/* fib-roleplay-krapio — feuille de style principale
   Direction : poste securise / banniere de classification (voir design-contract.ejs) */

:root {
  /* Neutres institutionnels (bleu-nuit) */
  --fond-page: #060d17;
  --fond-carte: #0c1a2b;
  --bleu-nuit: #0a1826;
  --bleu-institutionnel: #1D4E75;
  --blanc-casse: #F4F6F8;
  --gris-metallique: #94A3B4;
  --rouge-alerte: #B3261E;
  --vert-succes: #2E7D32;
  --jaune-attente: #B8860B;

  --fond-carte-claire: #142943;
  --fond-carte-survol: #1a3350;
  --bordure: #223c58;
  --bordure-forte: #35577c;
  --texte-principal: var(--blanc-casse);
  --texte-discret: var(--gris-metallique);

  /* Accent unique — actions primaires, liens, focus */
  --or-discret: #C9A24D;
  --or-hover: #E0BE6C;
  --or-ombre: rgba(201, 162, 77, 0.35);

  /* Rampe de classification — fonctionnelle, jamais decorative.
     N0 (le plus secret) -> N4 (public), meme logique que les vraies bannieres gouvernementales. */
  --hab-n0-bg: #6d1c26;
  --hab-n0-fg: #fbe2e4;
  --hab-n1-bg: #7a4212;
  --hab-n1-fg: #fbe6d2;
  --hab-n2-bg: #7a6412;
  --hab-n2-fg: #f8edc9;
  --hab-n3-bg: #1e4a72;
  --hab-n3-fg: #dceafc;
  --hab-n4-bg: #205c3c;
  --hab-n4-fg: #dcf3e6;
  --hab-neutre-bg: #2a3b4d;
  --hab-neutre-fg: #cbd6e0;

  /* Typographie */
  --police-ui: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", monospace;

  --texte-xs: 0.75rem;
  --texte-sm: 0.8125rem;
  --texte-base: 0.9375rem;
  --texte-md: 1.0625rem;
  --texte-lg: 1.25rem;
  --texte-xl: 1.5rem;
  --texte-2xl: 1.8rem;
  --texte-3xl: 2.1rem;

  /* Rayons — sobres, plus proches d'un outil officiel que d'un SaaS arrondi */
  --rayon-sm: 4px;
  --rayon-md: 7px;
  --rayon-lg: 11px;

  --ombre-carte: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.28);
  --transition-rapide: 150ms ease;
  --transition-normale: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: var(--fond-page);
  background-image: linear-gradient(135deg, rgba(7, 16, 26, 0.82), rgba(11, 26, 41, 0.72)), url('/assets/FondAccueil.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--texte-principal);
  font-family: var(--police-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--or-discret); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--or-hover); }

h1, h2, h3 { color: var(--blanc-casse); font-weight: 600; margin-top: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--texte-2xl); border-bottom: 1px solid var(--bordure); padding-bottom: 0.7rem; margin-bottom: 1.3rem; }
h2 { font-size: var(--texte-lg); margin-bottom: 0.8rem; }

.texte-discret { color: var(--texte-discret); font-size: var(--texte-sm); }
.sous-titre-page { color: var(--texte-discret); font-size: var(--texte-base); margin-top: -0.8rem; margin-bottom: 1.5rem; }

:focus-visible {
  outline: 2px solid var(--or-discret);
  outline-offset: 2px;
  border-radius: var(--rayon-sm);
}

code, .donnee-mono { font-family: var(--police-mono); font-size: 0.9em; letter-spacing: 0.01em; }

/* ---------- Banniere de classification / habilitation ---------- */

.banniere-habilitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.4rem;
  font-family: var(--police-mono);
  font-size: var(--texte-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.banniere-libelle { display: inline-flex; align-items: center; gap: 0.5rem; }
.icone-banniere { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.banniere-contexte { opacity: 0.85; }

.habilitation-n0 { background: var(--hab-n0-bg); color: var(--hab-n0-fg); }
.habilitation-n1 { background: var(--hab-n1-bg); color: var(--hab-n1-fg); }
.habilitation-n2 { background: var(--hab-n2-bg); color: var(--hab-n2-fg); }
.habilitation-n3 { background: var(--hab-n3-bg); color: var(--hab-n3-fg); }
.habilitation-n4 { background: var(--hab-n4-bg); color: var(--hab-n4-fg); }
.habilitation-neutre { background: var(--hab-neutre-bg); color: var(--hab-neutre-fg); }

/* ---------- Pages publiques ---------- */

.page-publique {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(29,78,117,0.25), transparent 60%),
    linear-gradient(180deg, var(--bleu-nuit) 0%, var(--fond-page) 55%);
}

.conteneur-connexion, .conteneur-erreur {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.carte-connexion {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  text-align: left;
  box-shadow: var(--ombre-carte);
}

.entete-connexion { text-align: center; margin-bottom: 1.5rem; }
.logo-connexion { height: 60px; margin-bottom: 0.9rem; }
.sous-titre { color: var(--or-discret); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--texte-xs); font-family: var(--police-mono); }

.formulaire-connexion, .formulaire-standard { display: flex; flex-direction: column; gap: 0.4rem; }
.formulaire-connexion label, .formulaire-standard label {
  font-size: var(--texte-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-discret);
  margin-top: 0.9rem;
}
.formulaire-connexion input, .formulaire-standard input, .formulaire-standard select, .formulaire-standard textarea,
.formulaire-filtres input, .formulaire-filtres select, .formulaire-en-ligne select, .formulaire-en-ligne input,
.formulaire-candidature input, .formulaire-candidature select {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  color: var(--texte-principal);
  border-radius: var(--rayon-sm);
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: var(--texte-base);
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}
.formulaire-standard select, .formulaire-filtres select, .formulaire-candidature select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 16px;
  padding-right: 2.2rem;
}
.formulaire-connexion input:focus, .formulaire-standard input:focus, .formulaire-standard select:focus,
.formulaire-filtres input:focus, .formulaire-filtres select:focus, .formulaire-en-ligne select:focus,
.formulaire-candidature input:focus, .formulaire-candidature select:focus {
  outline: none;
  border-color: var(--or-discret);
  box-shadow: 0 0 0 3px var(--or-ombre);
}
.formulaire-connexion input:disabled, .formulaire-standard input:disabled { opacity: 0.5; cursor: not-allowed; }

.case-a-cocher { display: flex; align-items: center; gap: 0.5rem; font-size: var(--texte-sm); color: var(--texte-discret); margin-top: 0.9rem; flex-direction: row; text-transform: none; letter-spacing: normal; }
.case-a-cocher input { width: auto; accent-color: var(--or-discret); }

.bouton-principal, .bouton-secondaire, .bouton-danger {
  border: none;
  border-radius: var(--rayon-sm);
  padding: 0.65rem 1.25rem;
  font-size: var(--texte-base);
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  margin-top: 1rem;
  transition: background-color var(--transition-rapide), border-color var(--transition-rapide), transform var(--transition-rapide), opacity var(--transition-rapide);
}
.bouton-principal { background: var(--bleu-institutionnel); color: var(--blanc-casse); }
.bouton-principal:hover { background: #24608c; text-decoration: none; }
.bouton-principal:active { transform: translateY(1px); }
.bouton-secondaire { background: var(--fond-carte-claire); color: var(--blanc-casse); border: 1px solid var(--bordure); }
.bouton-secondaire:hover { border-color: var(--bordure-forte); background: var(--fond-carte-survol); text-decoration: none; }
.bouton-danger { background: var(--rouge-alerte); color: var(--blanc-casse); }
.bouton-danger:hover { background: #931f19; text-decoration: none; }
button:disabled, .bouton-principal:disabled, .bouton-secondaire:disabled, .bouton-danger:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.bouton-desactive { opacity: 0.5; cursor: not-allowed; pointer-events: auto; }

.liens-publics { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.5rem; text-align: center; font-size: var(--texte-sm); }

.alerte { border-radius: var(--rayon-sm); padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: var(--texte-sm); border-width: 1px; border-style: solid; }
.alerte-erreur { background: rgba(179,38,30,0.15); border-color: var(--rouge-alerte); color: #f2b8b5; }
.alerte-avertissement { background: rgba(122,100,18,0.2); border-color: var(--hab-n2-bg); color: var(--hab-n2-fg); }
.alerte-succes { background: rgba(46,125,50,0.15); border-color: var(--vert-succes); color: #9ccc9f; }

.mention-fictive { color: var(--texte-discret); font-size: var(--texte-xs); text-align: center; }
.mention-connexion { margin-top: 1.5rem; }

/* ---------- Page d'accueil ---------- */

.badge-habilitation-neutre { background: rgba(42,59,77,0.5); color: var(--hab-neutre-fg); }

.accueil-page { flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 0; }

.accueil-corps {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3.5vh, 2.2rem);
  padding: 1.4rem 2rem;
  overflow: visible;
  text-align: center;
  min-height: 0;
  background-image: linear-gradient(135deg, rgba(7, 16, 26, 0.82), rgba(11, 26, 41, 0.72)), url('/assets/FondAccueil.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.accueil-hero-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(201,162,77,0.09), transparent);
  animation: accueil-balayage 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes accueil-balayage {
  0% { top: -20%; opacity: 0; }
  10% { opacity: 1; }
  50% { top: 90%; opacity: 1; }
  62% { opacity: 0; }
  100% { top: 90%; opacity: 0; }
}

.accueil-partenaire {
  position: absolute;
  top: 1.4rem;
  left: 1.8rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.accueil-partenaire-logo {
  height: 160px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  opacity: 0.5;
}

.accueil-partenaire-lien {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  background: rgba(11, 26, 41, 0.6);
  border: 1px solid var(--bordure-discrete, rgba(201, 162, 77, 0.35));
  color: var(--texte-principal);
  font-size: var(--texte-sm);
  text-decoration: none;
  transition: background 0.15s ease;
}

.accueil-partenaire-lien:hover {
  background: rgba(11, 26, 41, 0.85);
}

@media (max-width: 720px) {
  .accueil-partenaire { top: 0.8rem; left: 1rem; }
  .accueil-partenaire-logo { height: 60px; }
}

.accueil-hero-contenu { position: relative; max-width: 620px; }

.accueil-sceau {
  height: clamp(320px, 46vh, 880px);
  width: auto;
  max-width: 90%;
  margin-bottom: 0.2rem;
  opacity: 0;
  transform: translateY(-40px);
  animation: accueil-logo-entree 3600ms cubic-bezier(.16,1,.3,1) 3700ms forwards;
}

/* ---------- Modale disclaimer fullscreen avec animation 3D ---------- */

.accueil-modal-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07101a;
  perspective: 1400px;
  overflow: hidden;
}

.accueil-modal-disclaimer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(29, 78, 117, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(29, 78, 117, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
  animation: accueil-grille-scan 6s ease-in-out infinite;
}

.accueil-modal-disclaimer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(29, 78, 117, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: accueil-scan-radar 4s linear infinite;
  transform: translateX(-50%);
}

@keyframes accueil-grille-scan {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.15; }
}

@keyframes accueil-scan-radar {
  from { transform: translateX(-50%) translateY(0) rotate(0deg); }
  to { transform: translateX(-50%) translateY(200px) rotate(360deg); }
}

.accueil-modal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Le transform (scale/rotateY) et l'opacité du logo sont pilotés en JS via la Web
   Animations API (accueil-animations.js) — pas de @keyframes ici : ça évite tout
   conflit de spécificité CSS et ça ignore volontairement prefers-reduced-motion,
   car cette séquence fait partie du disclaimer obligatoire, pas d'un effet décoratif. */
.accueil-modal-logo {
  width: min(55vw, 480px);
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 30px rgba(29, 78, 117, 0.4));
  opacity: 0;
  transform: scale(0.04);
}

.accueil-modal-contenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 540px;
  padding: 0 2rem;
  opacity: 0;
}

.accueil-modal-texte {
  font-size: 1.35rem;
  color: var(--texte-principal);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.accueil-modal-bouton {
  margin-top: 0;
  padding: 0.85rem 2.2rem;
  font-size: var(--texte-md);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .accueil-intro-overlay { display: none; }
  .accueil-sceau { animation-delay: 100ms !important; }
}

@keyframes accueil-logo-entree {
  0% {
    opacity: 0;
    transform: translateY(-120px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(18px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.accueil-hero-contenu h1 {
  border: none;
  padding: 0;
  font-size: var(--texte-2xl);
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 3820ms forwards;
}

.accueil-hero-contenu .sous-titre {
  display: block;
  margin-bottom: 0.8rem;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 3920ms forwards;
}

.accueil-statut {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 4020ms forwards;
}
.accueil-statut svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.accueil-description {
  color: var(--texte-discret);
  max-width: 520px;
  margin: 0 auto;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 4120ms forwards;
}

@keyframes accueil-apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Hub d'acces : tronc horizontal + cartes branchees */
.hub-liste-compacte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 980px;
  width: 100%;
  margin-top: 0.6rem;
}

.hub-tronc-horizontal {
  position: absolute;
  top: -14px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--or-discret), var(--bordure-forte) 85%);
  transform: scaleX(0);
  transform-origin: left;
  animation: hub-tronc-dessin 650ms cubic-bezier(.16,1,.3,1) 4380ms forwards;
}
@keyframes hub-tronc-dessin { to { transform: scaleX(1); } }

.hub-carte-compacte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 1.3rem 1rem 1.3rem;
  color: var(--texte-principal);
  box-shadow: var(--ombre-carte);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  animation: accueil-apparition 550ms cubic-bezier(.16,1,.3,1) forwards;
  transition: all var(--transition-normale);
}
.hub-carte-compacte:hover {
  border-color: var(--or-discret);
  background: var(--fond-carte-claire);
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(201, 162, 77, 0.2), 0 10px 28px rgba(0, 0, 0, 0.35);
}
.hub-carte-statut { position: absolute; top: 0.7rem; right: 0.7rem; }
.hub-carte-compacte.hub-carte-desactivee { cursor: not-allowed; filter: grayscale(0.6); }
.hub-carte-compacte.hub-carte-desactivee:hover { border-color: var(--bordure); background: var(--fond-carte); transform: none; box-shadow: var(--ombre-carte); }
.hub-carte-compacte:nth-child(2) { animation-delay: 4960ms; }
.hub-carte-compacte:nth-child(3) { animation-delay: 5030ms; }
.hub-carte-compacte:nth-child(4) { animation-delay: 5100ms; }
.hub-carte-compacte:nth-child(5) { animation-delay: 5170ms; }

.hub-carte-compacte::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 2px;
  height: 14px;
  background: var(--bordure-forte);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  animation: hub-tige-dessin 350ms cubic-bezier(.16,1,.3,1) 950ms forwards;
}
.hub-carte-compacte::after {
  content: '';
  position: absolute;
  top: -17px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--or-discret);
  transform: scale(0);
  animation: hub-noeud-dessin 300ms cubic-bezier(.16,1,.3,1) 1250ms forwards;
}
@keyframes hub-tige-dessin { to { transform: translateX(-50%) scaleY(1); } }
@keyframes hub-noeud-dessin { to { transform: scale(1); } }

.hub-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rayon-md);
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  color: var(--or-discret);
  margin-bottom: 0.8rem;
  transition: all var(--transition-normale);
}

.hub-carte-compacte:hover .hub-icone {
  background: rgba(201, 162, 77, 0.15);
  border-color: var(--or-discret);
  transform: scale(1.08);
}

.hub-icone svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hub-carte-compacte h3 {
  font-size: var(--texte-base);
  font-weight: 600;
  color: var(--blanc-casse);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.hub-carte-compacte p {
  color: var(--texte-discret);
  font-size: var(--texte-xs);
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

@media (min-width: 901px) {
  html:has(body.page-accueil) { height: 100%; }
  body.page-accueil { height: 100vh; overflow-y: auto; }
  body.page-accueil .accueil-page { flex: 1; }
}

@media (max-width: 900px) {
  .hub-liste-compacte {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-top: 0;
    gap: 0.9rem;
  }
  .hub-tronc-horizontal, .hub-carte-compacte::before, .hub-carte-compacte::after { display: none; }

  .hub-carte-compacte {
    padding: 1.1rem 1rem;
  }

  .hub-carte-compacte:hover {
    transform: translateY(-2px);
  }
}

.entete-rejoindre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.5rem;
  background: var(--bleu-nuit);
  border-bottom: 1px solid var(--bordure);
  text-align: center;
}
.entete-rejoindre p { margin: 0; font-size: var(--texte-sm); color: var(--texte-discret); }
.entete-rejoindre-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.formulaire-deconnexion-accueil { margin: 0; display: contents; }
.formulaire-deconnexion-accueil .bouton-principal { border: none; cursor: pointer; font: inherit; }
.entete-rejoindre-actions .bouton-principal, .entete-rejoindre-actions .bouton-secondaire {
  margin-top: 0;
  padding: 0.4rem 0.9rem;
  font-size: var(--texte-sm);
}

.entete-page-publique {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.4rem;
  background: var(--bleu-nuit);
  border-bottom: 1px solid var(--bordure);
}

.entete-page-publique .logo-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--texte-sm);
  font-weight: 600;
  color: var(--or-discret);
  text-decoration: none;
}

.entete-page-publique .logo-nav:hover {
  color: var(--or-hover);
}

.entete-page-publique .logo-nav img {
  height: 24px;
}

.entete-page-publique nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.entete-page-publique nav a {
  font-size: var(--texte-sm);
  color: var(--texte-discret);
  padding: 0.4rem 0.7rem;
  border-radius: var(--rayon-sm);
  transition: all var(--transition-rapide);
}

.entete-page-publique nav a:hover {
  color: var(--blanc-casse);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

@media (max-width: 900px) {
  .accueil-corps { padding: 2.2rem 1.2rem; min-height: calc(100vh - 44px); }
  .accueil-hero-contenu h1 { font-size: var(--texte-xl); }
}

/* ---------- Application interne ---------- */

.mise-en-page-interne { display: flex; min-height: calc(100vh - 34px); }

.bascule-menu-case { position: absolute; opacity: 0; pointer-events: none; }

.menu-lateral {
  width: 250px;
  flex-shrink: 0;
  background: var(--bleu-nuit);
  border-right: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  padding: 1.2rem 0;
}
.menu-logo { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.5rem; border-bottom: 1px solid var(--bordure); height: 250px; width: 250px; overflow: hidden; }
.menu-logo img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.menu-logo span { display: none; }
.bouton-bascule-menu { display: none; margin-left: auto; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--rayon-sm); cursor: pointer; color: var(--texte-discret); }
.bouton-bascule-menu:hover { background: var(--fond-carte-survol); color: var(--blanc-casse); }
.bouton-bascule-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.menu-navigation { display: flex; flex-direction: column; padding: 0.7rem 0.6rem; flex: 1; overflow-y: auto; gap: 0.1rem; }
.menu-lien {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--texte-discret);
  padding: 0.75rem 0.7rem;
  font-size: 1.21875rem;
  font-weight: 500;
  border-radius: var(--rayon-sm);
  border-left: 3px solid transparent;
  transition: background-color var(--transition-rapide), color var(--transition-rapide);
}
.menu-lien:hover { background: rgba(255,255,255,0.05); color: var(--blanc-casse); text-decoration: none; }
.menu-lien.actif { border-left-color: var(--or-discret); color: var(--blanc-casse); background: rgba(201,162,77,0.1); font-weight: 600; }
.icone-menu { width: 25px; height: 25px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sprite-icones { position: absolute; width: 0; height: 0; overflow: hidden; }

.menu-utilisateur {
  padding: 1.5rem 1.2rem;
  border-top: 1px solid var(--bordure);
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.menu-utilisateur p {
  margin: 0.3rem 0;
  font-weight: 600;
}

.menu-grade {
  color: var(--texte-discret);
  font-size: 0.75rem;
  text-transform: uppercase;
  font-family: var(--police-mono);
  letter-spacing: 0.04em;
}

.lien-deconnexion { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; color: var(--rouge-alerte); cursor: pointer; padding: 0.5rem 0; font-size: var(--texte-sm); font-family: inherit; }
.lien-deconnexion:hover { text-decoration: underline; }
.lien-deconnexion svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.menu-utilisateur-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  width: 100%;
}

.bouton-icone-utilisateur {
  align-items: center;
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: 50%;
  color: var(--texte-discret);
  cursor: pointer;
  display: flex;
  height: 51px;
  justify-content: center;
  width: 51px;
  flex-shrink: 0;
}

.bouton-icone-utilisateur svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bouton-icone-utilisateur:hover { border-color: var(--or-discret); color: var(--or-discret); }
.bouton-icone-utilisateur[type="submit"]:hover { border-color: var(--rouge-alerte); color: var(--rouge-alerte); }

.contenu-principal { flex: 1; min-width: 0; padding: 2rem 2.5rem; max-width: 1240px; }

.entete-page { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.8rem; }
.entete-page h1 { border: none; margin: 0; padding: 0; }

.grille-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.widget { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); padding: 1.4rem; box-shadow: var(--ombre-carte); }

.carte-statut-candidatures { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.carte-statut-candidatures-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.carte-statut-candidatures-entete h3 { margin: 0; font-size: var(--texte-md); }
.carte-statut-candidatures form { margin-top: 0.2rem; }
.liste-statistiques, .liste-activites { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.liste-statistiques li, .liste-activites li { padding: 0.4rem 0; border-bottom: 1px solid var(--bordure); font-size: var(--texte-base); display: flex; justify-content: space-between; gap: 0.6rem; }
.liste-statistiques li strong { font-family: var(--police-mono); }
.date-activite { color: var(--texte-discret); font-size: var(--texte-xs); font-family: var(--police-mono); margin-right: 0.4rem; white-space: nowrap; }
.lien-widget { font-size: var(--texte-sm); }

.fiche-profil, .bloc-section { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); padding: 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--ombre-carte); }
.liste-definitions { display: grid; grid-template-columns: 170px 1fr; row-gap: 0.6rem; column-gap: 0.8rem; }
.liste-definitions dt { color: var(--texte-discret); font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.15rem; }
.liste-definitions dd { margin: 0; }

.zone-danger { border-color: var(--rouge-alerte); }

.formulaire-filtres { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.formulaire-filtres .bouton-principal, .formulaire-filtres .bouton-secondaire, .formulaire-filtres .bouton-danger,
.formulaire-en-ligne .bouton-principal, .formulaire-en-ligne .bouton-secondaire, .formulaire-en-ligne .bouton-danger { margin-top: 0; }
.formulaire-en-ligne { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.onglets-filtres { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; border-bottom: 1px solid var(--bordure); padding-bottom: 0.8rem; }
.onglets-filtres a { padding: 0.45rem 0.9rem; border-radius: var(--rayon-sm); font-size: var(--texte-sm); color: var(--texte-discret); background: var(--fond-carte-claire); border: 1px solid var(--bordure); }
.onglets-filtres a:hover { color: var(--blanc-casse); border-color: var(--bordure-forte); text-decoration: none; }
.onglets-filtres a.actif { background: var(--or-discret); color: var(--bleu-nuit); border-color: var(--or-discret); font-weight: 600; }

.action-archivage { text-align: right; margin-top: 1.2rem; }

.tableau-donnees { width: 100%; border-collapse: collapse; background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); overflow: hidden; }
.tableau-donnees th, .tableau-donnees td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--bordure); font-size: var(--texte-sm); vertical-align: middle; }
.tableau-donnees th { background: var(--fond-carte-claire); color: var(--texte-discret); text-transform: uppercase; font-size: var(--texte-xs); letter-spacing: 0.06em; font-weight: 600; }
.tableau-donnees tr:last-child td { border-bottom: none; }
.tableau-donnees tr:hover td { background: rgba(255,255,255,0.025); }
.tableau-donnees td:has(> a) { white-space: nowrap; }

.badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: var(--texte-xs); font-weight: 600; letter-spacing: 0.02em; }
.badge-statut-actif { background: rgba(46,125,50,0.2); color: #9ccc9f; }
.badge-statut-suspendu, .badge-statut-radie, .badge-statut-demissionnaire, .badge-statut-archive { background: rgba(179,38,30,0.2); color: #f2b8b5; }
.badge-statut-absent, .badge-statut-indisponible, .badge-statut-en_formation { background: rgba(195,163,74,0.2); color: var(--or-discret); }

.badge-habilitation-n0 { background: rgba(109,28,38,0.35); color: var(--hab-n0-fg); }
.badge-habilitation-n1 { background: rgba(122,66,18,0.35); color: var(--hab-n1-fg); }
.badge-habilitation-n2 { background: rgba(122,100,18,0.35); color: var(--hab-n2-fg); }
.badge-habilitation-n3 { background: rgba(30,74,114,0.35); color: var(--hab-n3-fg); }
.badge-habilitation-n4 { background: rgba(32,92,60,0.35); color: var(--hab-n4-fg); }

.avatar-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--fond-carte-claire); border: 1px solid var(--bordure); }
.avatar-fiche { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--fond-carte-claire); border: 2px solid var(--bordure-forte); float: right; }
.entete-avatar-fiche { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; }
.avatar-fiche-grand { width: 140px; height: 140px; float: none; }
.badges-entete-fiche { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.bloc-categorie-info h2 { margin-top: 0; }
.entete-categorie { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.entete-categorie h2, .entete-categorie h3 { margin: 0; }
.entete-sous-section { margin-top: 1rem; margin-bottom: 0.6rem; }
.icones-categorie { display: flex; align-items: center; gap: 0.3rem; }
.bouton-modifier-categorie { font-size: 1.1rem; }
.bouton-ajouter-valeur { font-size: 1.2rem; font-weight: 700; }
.bouton-ajouter-sanction { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.formulaire-ajout-sanction { display: none; }
.formulaire-ajout-sanction.visible { display: flex; }
.ligne-champ { display: contents; }
.ligne-champ dd { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bouton-icone { background: none; border: none; cursor: pointer; font-size: 0.95rem; color: var(--texte-discret); padding: 0.1rem 0.3rem; }
.bouton-icone:hover { color: var(--or-discret); }
.zone-edition-champ { display: none; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%; }
.zone-edition-champ textarea { min-width: 260px; min-height: 4rem; }
.bloc-categorie-modifiable.mode-edition .valeur-affichee { display: none; }
.bloc-categorie-modifiable.mode-edition .zone-edition-champ { display: flex; }
.bloc-categorie-modifiable .actions-categorie { display: none; margin-top: 1rem; gap: 0.6rem; align-items: center; }
.case-a-cocher-filtre { display: flex; align-items: center; gap: 0.35rem; font-size: var(--texte-sm); color: var(--texte-discret); }
.bouton-filtre-etat { padding: 0.65rem 1.25rem; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--fond-carte-claire); color: var(--blanc-casse); font-size: var(--texte-base); font-weight: 600; cursor: pointer; transition: border-color var(--transition-rapide), background var(--transition-rapide), box-shadow var(--transition-rapide); margin-top: 0; }
.bouton-filtre-etat:hover { border-color: var(--bordure-forte); background: var(--fond-carte-survol); }
.bouton-filtre-etat.actif { background: var(--vert-succes); border-color: var(--vert-succes); color: var(--bleu-nuit); font-weight: 700; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2); }
.bouton-filtre-etat.actif:hover { background: #359a3d; border-color: #359a3d; }
.bloc-categorie-modifiable.mode-edition .actions-categorie { display: flex; }
.miniature-piece { max-width: 160px; max-height: 100px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure); }
.avatar-vide { display: inline-flex; align-items: center; justify-content: center; color: var(--or-discret); font-weight: 700; font-family: var(--police-mono); text-transform: uppercase; }
.avatar-mini.avatar-vide { font-size: var(--texte-xs); }
.avatar-fiche.avatar-vide { font-size: 1.7rem; }

.contenu-principal.pleine-largeur { max-width: none; }
.contenu-principal.pleine-largeur .grille-widgets { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (min-width: 1500px) { .contenu-principal.pleine-largeur .grille-widgets { grid-template-columns: repeat(4, 1fr); } }
.barre-filtres-renseignements { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.formulaire-filtres-renseignements { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; flex: 1; }
.formulaire-filtre-en-attente { margin-left: auto; }
.etiquette-filtre-date { display: flex; align-items: center; gap: 0.4rem; font-size: var(--texte-sm); color: var(--texte-discret); }
.modale-fond { position: fixed; inset: 0; background: rgba(4,10,20,0.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modale-fond[hidden] { display: none; }
.modale-contenu { background: var(--fond-carte); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-lg); padding: 1.5rem; min-width: 320px; }
.modale-contenu h2 { margin-top: 0; }
.choix-type-fiche { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.grille-renseignements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: start; }
.colonne-renseignements { background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-lg); overflow: hidden; }
.colonne-renseignements h2 { margin: 0; padding: 0.8rem 1rem; font-size: var(--texte-sm); text-transform: uppercase; letter-spacing: 0.06em; background: var(--fond-carte-claire); border-bottom: 1px solid var(--bordure); }
.liste-cartes-renseignement { list-style: none; margin: 0; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 70vh; overflow-y: auto; }
.carte-fiche-renseignement { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--fond-carte-claire); color: var(--blanc-casse); text-decoration: none; }
.carte-fiche-renseignement:hover { background: var(--fond-carte-survol); border-color: var(--bordure-forte); text-decoration: none; }
.carte-fiche-renseignement .titre-fiche { display: block; font-weight: 700; font-size: var(--texte-lg); line-height: 1.3; color: var(--blanc-casse); order: -2; margin-bottom: 0.4rem; }
.carte-fiche-renseignement .reference-fiche { display: flex; align-items: center; gap: 0.4rem; font-family: var(--police-mono); font-size: var(--texte-xs); font-weight: 600; color: var(--or-discret); order: -1; margin-bottom: 0.6rem; }
.carte-fiche-renseignement .badge { order: 1; align-self: flex-start; margin-top: auto; }
.texte-discret-colonne { padding: 0.8rem; color: var(--texte-discret); font-size: var(--texte-sm); }
@media (max-width: 1200px) { .grille-renseignements { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grille-renseignements { grid-template-columns: 1fr; } }

.galerie-images-fiche { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.vignette-galerie { display: flex; flex-direction: column; gap: 0.3rem; width: 140px; padding: 0; background: none; border: none; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.vignette-galerie img { width: 140px; height: 100px; object-fit: cover; border-radius: var(--rayon-sm); border: 1px solid var(--bordure); transition: border-color var(--transition-rapide); }
.vignette-galerie:hover img { border-color: var(--or-discret); }
.legende-vignette { font-size: var(--texte-xs); color: var(--texte-discret); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.visionneuse-fond { flex-direction: row; gap: 1rem; padding: 2rem; z-index: 100; }
.visionneuse-contenu { margin: 0; max-width: min(85vw, 1000px); max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.visionneuse-contenu img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--rayon-md); }
.visionneuse-contenu figcaption { color: var(--blanc-casse); font-size: var(--texte-sm); text-align: center; }
.visionneuse-nav { font-size: 2rem; color: var(--blanc-casse); flex-shrink: 0; }
.visionneuse-nav:hover { color: var(--or-discret); }
.visionneuse-fermer { position: absolute; top: 1.2rem; right: 1.5rem; font-size: 1.6rem; color: var(--blanc-casse); }
.visionneuse-fermer:hover { color: var(--or-discret); }
.liste-fiches-liees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.liste-fiches-liees li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm); }

.pied-de-page {
  background: var(--bleu-nuit);
  border-top: 1px solid var(--bordure);
  padding: 0.8rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--police-mono);
}
.pied-de-page p { margin: 0; font-size: var(--texte-xs); color: var(--texte-discret); }
.pied-de-page .mention-fictive { text-align: right; }
.page-publique .pied-de-page, .page-publique ~ .pied-de-page { background: transparent; border-top: none; justify-content: center; padding: 1rem; }

@media (max-width: 900px) {
  .mise-en-page-interne { flex-direction: column; }

  .menu-lateral { width: 100%; padding: 0; }
  .menu-logo { padding: 0.9rem 1.2rem; border-bottom: none; }
  .bouton-bascule-menu { display: inline-flex; }
  .menu-navigation, .menu-utilisateur { display: none; }
  .menu-lateral:has(.bascule-menu-case:checked) { border-bottom: 1px solid var(--bordure); }
  .menu-lateral:has(.bascule-menu-case:checked) .menu-navigation,
  .menu-lateral:has(.bascule-menu-case:checked) .menu-utilisateur { display: flex; flex-direction: column; }
  .menu-utilisateur { padding: 1rem 1.2rem 1rem; border-top: 1px solid var(--bordure); }

  .contenu-principal { padding: 1.2rem; }
  .banniere-habilitation { padding: 0.5rem 1rem; }

  .tableau-donnees { display: block; overflow-x: auto; white-space: nowrap; }

  .liste-definitions { grid-template-columns: 1fr; }
  .avatar-fiche { float: none; margin-bottom: 1rem; }

  .pied-de-page { flex-direction: column; text-align: center; padding: 0.9rem 1.2rem; }
  .pied-de-page .mention-fictive { text-align: center; }
}

/* ---------- Page candidature ---------- */

.candidature-page { flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 0; }

.candidature-corps {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
  text-align: center;
  min-height: 0;
  background-image: linear-gradient(135deg, rgba(7, 16, 26, 0.82), rgba(11, 26, 41, 0.72)), url('/assets/FondAccueil.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carte-candidature {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 3rem 3.5rem;
  width: 100%;
  max-width: 920px;
  text-align: left;
  box-shadow: var(--ombre-carte);
}

.entete-candidature { text-align: center; margin-bottom: 2rem; }
.entete-candidature .badge { margin-bottom: 0.6rem; }
.logo-candidature { height: 80px; margin-bottom: 1rem; opacity: 0; animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 100ms forwards; }
.entete-candidature h1 {
  border: none;
  padding: 0;
  font-size: var(--texte-2xl);
  margin: 0 0 0.4rem;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 220ms forwards;
}
.entete-candidature .sous-titre {
  display: block;
  margin-bottom: 0;
  opacity: 0;
  animation: accueil-apparition 700ms cubic-bezier(.16,1,.3,1) 320ms forwards;
}

.indicateur-etape {
  display: inline-block;
  margin: 0.6rem 0 0;
  padding: 0.35rem 1rem;
  font-size: var(--texte-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--or-discret);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  background: rgba(201, 162, 77, 0.08);
}

.progression-etapes {
  height: 4px;
  max-width: 220px;
  margin: 0.7rem auto 0;
  background: var(--fond-carte-claire);
  border-radius: 999px;
  overflow: hidden;
}
.progression-etapes-remplissage {
  height: 100%;
  background: var(--or-discret);
  border-radius: 999px;
}

.formulaire-candidature { display: flex; flex-direction: column; gap: 0.8rem; }
.formulaire-candidature label, .formulaire-candidature legend {
  font-size: var(--texte-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-discret);
  display: block;
  margin-top: 0;
}

.formulaire-candidature label:not(.case-a-cocher) {
  margin-top: 0;
  margin-bottom: 0.3rem;
}

.groupe-formulaire {
  border: none;
  padding: 0;
  margin: 1.6rem 0 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.75rem;
  align-items: start;
}

.groupe-formulaire:first-of-type {
  margin-top: 0;
}

.groupe-formulaire.groupe-accord {
  display: block;
}

.titre-groupe {
  grid-column: 1 / -1;
  font-size: var(--texte-sm);
  font-weight: 600;
  color: var(--blanc-casse);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--bordure);
}

.champ {
  display: flex;
  flex-direction: column;
}

.champ-large {
  grid-column: 1 / -1;
}

.entourage-blocs { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.entourage-bloc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; position: relative; }
.entourage-bloc input { width: 100%; }
.entourage-bloc-supprimer { grid-column: 2 / 3; justify-self: end; background: none; border: none; color: #e07a7a; cursor: pointer; font-size: 0.85rem; padding: 0.25rem 0; }

.champ-aide, .aide-champ {
  color: var(--texte-discret);
  font-size: var(--texte-xs);
  display: block;
  margin: 0 0 0.4rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.formulaire-candidature .champ-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-size: var(--texte-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--texte-principal);
  cursor: pointer;
  transition: border-color var(--transition-rapide);
}
.champ-checkbox input { width: auto; margin-top: 0.15rem; accent-color: var(--or-discret); flex-shrink: 0; }
.champ-checkbox:has(input:checked) { border-color: var(--or-discret); background: rgba(201, 162, 77, 0.08); }

.groupe-boutons {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1.8rem;
}

.formulaire-candidature .groupe-boutons .bouton-principal,
.formulaire-candidature .groupe-boutons .bouton-secondaire {
  flex: 1;
  margin-top: 0;
  width: auto;
  text-align: center;
}

.formulaire-candidature textarea {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  color: var(--texte-principal);
  border-radius: var(--rayon-sm);
  padding: 0.75rem;
  font-family: var(--police-ui);
  font-size: var(--texte-base);
  resize: vertical;
  min-height: 120px;
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}

.formulaire-candidature textarea:focus {
  outline: none;
  border-color: var(--or-discret);
  box-shadow: 0 0 0 3px var(--or-ombre);
}

.indicateur-caracteres {
  display: block;
  font-size: var(--texte-xs);
  color: var(--texte-discret);
  margin-top: 0.25rem;
  text-align: right;
}

.groupe-accord {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bordure);
}

.groupe-accord .case-a-cocher {
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: var(--texte-xs);
}

.formulaire-candidature .bouton-principal {
  margin-top: 1.5rem;
  width: 100%;
}

.lien-retour {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  margin: 1.5rem auto 0;
  padding: 0.65rem 1.2rem;
  font-size: var(--texte-sm);
  font-weight: 500;
  color: var(--or-discret);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: rgba(201, 162, 77, 0.05);
  transition: all var(--transition-rapide);
}

.lien-retour:hover {
  color: var(--or-hover);
  border-color: var(--or-discret);
  background: rgba(201, 162, 77, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.lien-retour::before {
  content: '← ';
  font-weight: 600;
}

.mention-candidature { margin-top: 1.5rem; }

/* Suivi candidature - affichage */
.statut-badge {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--rayon-sm);
  font-weight: 600;
  font-size: var(--texte-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1rem 0;
}

.statut-badge.statut-en_attente {
  background: #4a3a1a;
  color: #e8d5b7;
}

.statut-badge.statut-acceptee {
  background: var(--hab-n4-bg);
  color: var(--hab-n4-fg);
}

.statut-badge.statut-rejetee {
  background: var(--hab-n0-bg);
  color: var(--hab-n0-fg);
}

.statut-badge.statut-archivee {
  background: var(--hab-neutre-bg);
  color: var(--hab-neutre-fg);
}

.section-candidature {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.section-candidature h3 {
  font-size: var(--texte-md);
  margin-bottom: 0.8rem;
  color: var(--blanc-casse);
}

.champ-affichage {
  margin-bottom: 1rem;
}

.liste-proches {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-proches li {
  padding: 0.6rem;
  margin-bottom: 0.4rem;
  background: var(--fond-carte-claire);
  border-radius: 4px;
  color: var(--texte-principal);
  font-size: var(--texte-base);
}

.champ-affichage label {
  font-size: var(--texte-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texte-discret);
  display: block;
  margin-bottom: 0.3rem;
}

.champ-affichage p {
  margin: 0;
  color: var(--texte-principal);
  font-size: var(--texte-base);
  padding: 0.6rem;
  background: var(--fond-carte-claire);
  border-radius: var(--rayon-sm);
  border-left: 2px solid var(--or-discret);
}

.section-commentaire {
  background: rgba(201, 162, 77, 0.08);
  border-left: 3px solid var(--or-discret);
  padding: 1rem;
  border-radius: var(--rayon-sm);
}

@media (max-width: 900px) {
  html:has(body.page-candidature) { height: 100%; }
  body.page-candidature { height: 100vh; overflow-y: auto; }
  body.page-candidature .candidature-page { flex: 1; }
  .groupe-formulaire { grid-template-columns: 1fr; }
  .champ-large { grid-column: auto; }
}

@media (max-width: 600px) {
  .candidature-corps { padding: 1.2rem; min-height: calc(100vh - 34px); }
  .carte-candidature { padding: 1.8rem; max-width: none; }
  .logo-candidature { height: 60px; }
  .entete-candidature h1 { font-size: var(--texte-xl); }
  .groupe-formulaire { margin-top: 0.8rem; }
}

/* --- Hierarchie (organigramme) ------------------------------------------ */

.message-erreur {
  background: rgba(179, 38, 30, 0.15);
  border: 1px solid var(--rouge-alerte);
  color: var(--blanc-casse);
  padding: 0.7rem 1rem;
  border-radius: var(--rayon-sm);
  font-size: var(--texte-sm);
  margin-bottom: 1rem;
}

.note-gestion-hierarchie {
  color: var(--texte-discret);
  font-size: var(--texte-sm);
  margin-bottom: 1.2rem;
}

.conteneur-organigramme {
  overflow: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  background: var(--fond-carte-claire);
  height: calc(100vh - 260px);
}

.plan-organigramme {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  padding: 2rem;
}

.lignes-organigramme {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.ligne-organigramme {
  stroke: var(--bordure-forte);
  stroke-width: 1;
}

.compartiment-deplacable .compartiment-rect {
  cursor: move;
}

.compartiment-poignee {
  cursor: nwse-resize;
}

.carte-organigramme {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 168px;
  padding: 1rem 0.9rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-carte);
  text-align: center;
  touch-action: none;
}

.avatar-organigramme {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fond-carte-claire);
  border: 2px solid var(--bordure-forte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--or-discret);
  font-weight: 700;
  font-family: var(--police-mono);
  text-transform: uppercase;
}

.nom-organigramme {
  font-weight: 600;
  color: var(--texte-principal);
  text-decoration: none;
  font-size: var(--texte-sm);
}
.nom-organigramme:hover { color: var(--or-discret); }

.grade-organigramme { color: var(--texte-discret); font-size: var(--texte-xs); }

.grade-organigramme-editable {
  cursor: text;
  border-radius: var(--rayon-sm);
  padding: 0.1rem 0.3rem;
  outline: none;
}

.grade-organigramme-editable:hover,
.grade-organigramme-editable:focus {
  background: var(--fond-carte-claire);
  color: var(--or-discret);
}
.titre-organigramme { color: var(--texte-discret); font-size: var(--texte-xs); font-style: italic; }

.form-responsable-organigramme-cache {
  display: none;
}

.carte-organigramme-deplacable {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carte-organigramme-deplacable * {
  -webkit-user-drag: none;
}

.carte-organigramme-deplacable:active {
  cursor: grabbing;
}

.carte-organigramme.en-glissement {
  opacity: 0.4;
}

.carte-organigramme.survol-drop {
  border-color: var(--or-discret);
  box-shadow: 0 0 0 2px var(--or-discret);
}

.zone-drop-racine {
  margin-bottom: 1.2rem;
  padding: 0.8rem;
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-sm);
  text-align: center;
  color: var(--texte-discret);
  font-size: var(--texte-xs);
}

.zone-drop-racine.survol-drop {
  border-color: var(--or-discret);
  color: var(--or-discret);
}

.bouton-masquer-profil {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--bordure-forte);
  background: var(--fond-carte-claire);
  color: var(--texte-discret);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bouton-masquer-profil:hover {
  color: var(--rouge-alerte);
  border-color: var(--rouge-alerte);
}

.titre-section-masques {
  margin-top: 1.6rem;
}

.liste-profils-masques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.liste-profils-masques li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-size: var(--texte-sm);
  color: var(--texte-discret);
}

.bouton-lien {
  background: none;
  border: none;
  color: var(--or-discret);
  cursor: pointer;
  font-size: var(--texte-sm);
  padding: 0;
  text-decoration: underline;
}

.controls-hierarchie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.2rem;
  padding: 0.8rem 1rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
}

.controls-hierarchie #bouton-export {
  margin-left: auto;
}

.controls-hierarchie label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--texte-sm);
  color: var(--texte-discret);
}

.controls-hierarchie input[type="range"] {
  width: 200px;
}

.controls-hierarchie input[type="text"] {
  width: 180px;
}

.controls-hierarchie button {
  padding: 0.4rem 0.8rem;
  background: var(--fond-carte-claire);
  color: var(--texte-principal);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  font-size: var(--texte-sm);
  white-space: nowrap;
}

.controls-hierarchie button:hover {
  border-color: var(--or-discret);
  color: var(--or-discret);
}

.controles-zoom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.controles-zoom button.bouton-zoom-carre {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

#valeur-zoom {
  font-size: var(--texte-sm);
  color: var(--texte-discret);
  min-width: 44px;
  text-align: center;
}

.poignee-redim-carte {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--bordure-forte) 50%);
  border-radius: 0 0 var(--rayon-lg) 0;
}

.carte-organigramme.estompee {
  opacity: 0.15;
}

.carte-organigramme.mise-en-avant {
  box-shadow: 0 0 0 2px var(--or-discret), var(--ombre-carte);
}

.titre-section-compartiments {
  margin-top: 1.6rem;
}

.formulaire-compartiment {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.8rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
}

.formulaire-compartiment input[type="text"] {
  flex: 1;
  min-width: 200px;
}

.formulaire-compartiment input[type="color"] {
  width: 50px;
  cursor: pointer;
}

.formulaire-compartiment button {
  padding: 0.6rem 1rem;
  background: var(--or-discret);
  color: var(--fond-page);
  border: none;
  border-radius: var(--rayon-sm);
  cursor: pointer;
  font-weight: 600;
}

.liste-compartiments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.liste-compartiments li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  font-size: var(--texte-sm);
}

.compartiment-actions {
  display: flex;
  gap: 0.4rem;
}

.bouton-petit {
  background: none;
  border: 1px solid var(--bordure-forte);
  color: var(--texte-discret);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--rayon-sm);
  font-size: var(--texte-xs);
}

.bouton-petit:hover {
  color: var(--rouge-alerte);
  border-color: var(--rouge-alerte);
}

@media (max-width: 900px) {
  .carte-organigramme { min-width: 140px; padding: 0.8rem 0.6rem; }
  .avatar-organigramme { width: 44px; height: 44px; }
}

/* Editeur de graphique (dossiers et operations) */
.editeur-graphique { display: flex; flex-direction: column; gap: 0.6rem; }

.sprite-icones-graphique { position: absolute; width: 0; height: 0; overflow: hidden; }

.barre-outils-graphique {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 0.5rem;
}

.groupe-outils {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.4rem;
  border-right: 1px solid var(--bordure);
}

.groupe-outils:last-child,
.groupe-outils.groupe-outils-droite { border-right: none; }

.groupe-outils-droite { margin-left: auto; }

.barre-outils-graphique button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-principal);
  cursor: pointer;
  line-height: 1;
  height: 36px;
  min-width: 36px;
  padding: 0 0.55rem;
  font-size: var(--texte-sm);
}

.barre-outils-graphique button:hover { background: var(--fond-carte-survol); border-color: var(--bordure-forte); }
.barre-outils-graphique button:disabled { opacity: 0.4; cursor: not-allowed; }

.barre-outils-graphique .bouton-secondaire {
  margin-top: 0;
  padding: 0 0.7rem;
  font-size: var(--texte-sm);
  font-weight: 600;
}

.barre-outils-graphique svg, .barre-texte-graphique svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.outil-graphique-actif { border-color: var(--or-discret) !important; box-shadow: 0 0 0 1px var(--or-ombre); }

.nuancier-couleurs { gap: 0.35rem; }

.pastille-couleur {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  border: 2px solid var(--bordure-forte);
  padding: 0 !important;
  cursor: pointer;
}

.barre-texte-graphique {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 0.45rem 0.6rem;
}

.barre-texte-graphique label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--texte-xs);
  color: var(--texte-discret);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.barre-texte-graphique input[type="number"] {
  width: 56px;
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  color: var(--texte-principal);
  border-radius: var(--rayon-sm);
  padding: 0.3rem 0.4rem;
}

.barre-texte-graphique button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-principal);
  cursor: pointer;
  height: 32px;
  width: 32px;
}

.barre-texte-graphique button:hover { background: var(--fond-carte-survol); border-color: var(--bordure-forte); }
.outil-texte-actif { border-color: var(--or-discret) !important; box-shadow: 0 0 0 1px var(--or-ombre); color: var(--or-discret); }

.zone-canevas-graphique {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  overflow: auto;
  padding: 0.4rem;
}

#canevas-graphique {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  cursor: crosshair;
  border-radius: var(--rayon-sm);
}

/* ===== Bloc-notes : calpin + tableau de post-it ===== */

.bloc-notes-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
  min-height: 70vh;
}

@media (max-width: 900px) {
  .bloc-notes-layout { grid-template-columns: 1fr; }
}

.calpin-panneau,
.postit-panneau {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.calpin-onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.calpin-onglet {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-discret);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
}

.calpin-onglet:hover { border-color: var(--bordure-forte); color: var(--texte-principal); }
.calpin-onglet.actif { border-color: var(--or-discret); color: var(--or-discret); }

.calpin-nouvelle-page {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon-sm);
  color: var(--texte-discret);
  cursor: pointer;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.6rem;
}

.calpin-nouvelle-page:hover { color: var(--or-discret); border-color: var(--or-discret); }

.calpin-zone-edition {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  min-height: 0;
}

.calpin-titre-page {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-principal);
  font-weight: 600;
  padding: 0.5rem 0.6rem;
}

.calpin-contenu-page {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-principal);
  flex: 1;
  font-family: inherit;
  line-height: 1.5;
  min-height: 320px;
  padding: 0.7rem;
  resize: vertical;
}

.calpin-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.calpin-statut {
  color: var(--texte-discret);
  font-size: 0.78rem;
}

.bouton-secondaire-discret,
.bouton-danger-discret {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  color: var(--texte-discret);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
}

.bouton-secondaire-discret:hover { border-color: var(--or-discret); color: var(--or-discret); }
.bouton-danger-discret:hover { border-color: #c85a5a; color: #c85a5a; }

.postit-barre-outils {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.postit-couleurs {
  display: flex;
  gap: 0.3rem;
}

.postit-choix-couleur {
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.postit-choix-couleur.actif { border-color: var(--texte-principal); }

.postit-tableau {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  flex: 1;
  min-height: 420px;
  position: relative;
  overflow: auto;
}

.postit-note {
  background: #fdf59f;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  cursor: grab;
  display: flex;
  flex-direction: column;
  height: 150px;
  padding: 0.5rem;
  position: absolute;
  width: 150px;
}

.postit-note.en-deplacement { cursor: grabbing; opacity: 0.85; z-index: 10; }

.postit-note textarea {
  background: transparent;
  border: none;
  color: #1c1c1c;
  flex: 1;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.35;
  resize: none;
}

.postit-note textarea:focus { outline: none; }

.postit-supprimer {
  align-self: flex-end;
  background: none;
  border: none;
  color: #1c1c1c;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0.6;
  padding: 0;
}

.postit-supprimer:hover { opacity: 1; }

/* ===== Post-it flottant global ===== */

.postit-flottant-note {
  background: #fdf59f;
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  height: 210px;
  left: 1.1rem;
  bottom: 1.1rem;
  position: fixed;
  width: 210px;
  z-index: 501;
}

.postit-flottant-entete {
  align-items: center;
  cursor: grab;
  display: flex;
  justify-content: flex-end;
  padding: 0.3rem 0.4rem;
}

.postit-flottant-entete.en-deplacement { cursor: grabbing; }

.postit-flottant-fermer {
  background: none;
  border: none;
  color: #1c1c1c;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.6;
  padding: 0;
}

.postit-flottant-fermer:hover { opacity: 1; }

.postit-flottant-note textarea {
  background: transparent;
  border: none;
  color: #1c1c1c;
  flex: 1;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 0 0.6rem 0.6rem;
  resize: none;
}

.postit-flottant-note textarea:focus { outline: none; }

/* ---------------------------------------------------------------------
   Documents — editeur de documents (WYSIWYG, modeles, PDF, affiliations)
--------------------------------------------------------------------- */

.formulaire-vertical { display: flex; flex-direction: column; gap: 0.5rem; }
.formulaire-vertical label { font-size: var(--texte-xs); color: var(--texte-discret); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.4rem; }
.formulaire-vertical input, .formulaire-vertical select {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-md);
  color: var(--texte-principal); padding: 0.55rem 0.7rem; font: inherit;
}
.formulaire-vertical input:focus, .formulaire-vertical select:focus { outline: none; border-color: var(--or-discret); }

.statut-enregistrement { color: var(--texte-discret); font-size: var(--texte-xs); }

.editeur-document-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.2rem; align-items: start; }
.editeur-document-principal { min-width: 0; }
.editeur-document-lateral { display: flex; flex-direction: column; gap: 1rem; }

.editeur-titre-champ {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--bordure);
  color: var(--texte-principal); font-size: var(--texte-xl); font-weight: 600; padding: 0.4rem 0.1rem; margin-bottom: 0.8rem;
}
.editeur-titre-champ:focus { outline: none; border-color: var(--or-discret); }

.editeur-barre-outils {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-md);
  padding: 0.5rem; margin-bottom: 0.6rem; position: sticky; top: 0; z-index: 2;
}
.editeur-barre-outils button, .editeur-barre-outils input[type="color"] {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  color: var(--texte-principal); min-width: 2.6rem; height: 2.6rem; cursor: pointer; font-size: var(--texte-md);
}
.editeur-barre-outils button:hover { background: var(--fond-carte-survol); border-color: var(--bordure-forte); }
.editeur-barre-outils input[type="color"] { padding: 0.15rem; width: 2.6rem; }
#bouton-emoji, #bouton-logo, #bouton-image { font-size: 1.3rem; }
.editeur-separateur-outils { width: 1px; height: 1.4rem; background: var(--bordure); margin: 0 0.2rem; }

.editeur-select-outil {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  color: var(--texte-principal); height: 2.6rem; padding: 0 0.4rem; font-size: var(--texte-sm); cursor: pointer;
}
.editeur-select-outil:hover { border-color: var(--bordure-forte); }

.editeur-zone-contenu [data-resize-wrapper] { display: inline-block; max-width: 100%; vertical-align: top; }
.editeur-zone-contenu [data-resize-handle] {
  width: 11px; height: 11px; background: var(--or-discret); border: 2px solid #fff;
  border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.5); z-index: 5;
}
.editeur-zone-contenu [data-resize-handle="top-left"] { cursor: nwse-resize; }
.editeur-zone-contenu [data-resize-handle="bottom-right"] { cursor: nwse-resize; }
.editeur-zone-contenu [data-resize-handle="top-right"] { cursor: nesw-resize; }
.editeur-zone-contenu [data-resize-handle="bottom-left"] { cursor: nesw-resize; }

.editeur-emoji-panneau, .editeur-logo-panneau {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-md);
  padding: 0.6rem; margin-bottom: 0.6rem;
}
.editeur-emoji-panneau button {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  font-size: 1.4rem; width: 2.6rem; height: 2.6rem; cursor: pointer;
}
.editeur-emoji-panneau button:hover { background: var(--fond-carte-survol); }

.editeur-logo-liste { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; }
.editeur-logo-vignette {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 0.3rem; cursor: pointer;
}
.editeur-logo-vignette img { max-height: 50px; max-width: 90px; display: block; }
.editeur-logo-vignette:hover { border-color: var(--or-discret); }

/* Plan de travail : simple fond gris qui centre la feuille. Toute la mise en forme
   du contenu (largeur A4, police, tableaux) vient de .doc-page dans
   document-contenu.css, partagee avec l'apercu de modele et l'export PDF. */
.editeur-zone-contenu {
  background: #d8dee5; border-radius: var(--rayon-lg);
  padding: 1.6rem; overflow-x: auto;
}
.editeur-zone-contenu .doc-page { box-shadow: var(--ombre-carte); }
.editeur-zone-contenu .ProseMirror { outline: none; }
.editeur-zone-contenu p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; color: #9aa4ad; pointer-events: none; height: 0;
}

.editeur-liste-modeles-panel { display: flex; flex-direction: column; gap: 0.4rem; }
.editeur-modele-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 0.4rem 0.6rem; font-size: var(--texte-sm);
}
.editeur-modele-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.editeur-resultats-affiliation { display: flex; flex-direction: column; gap: 0.2rem; }
.editeur-resultats-affiliation button {
  text-align: left; background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  color: var(--texte-principal); padding: 0.4rem 0.6rem; cursor: pointer; font-size: var(--texte-sm);
}
.editeur-resultats-affiliation button:hover { border-color: var(--or-discret); }

.editeur-liste-affiliations { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.editeur-liste-affiliations li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 0.4rem 0.6rem; font-size: var(--texte-sm);
}

@media (max-width: 900px) {
  .editeur-document-layout { grid-template-columns: 1fr; }
}

.documents-layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.documents-colonne h2 { font-size: var(--texte-md); margin: 0 0 0.8rem; }
.document-ligne { cursor: pointer; }
.document-ligne:hover { background: var(--fond-carte-survol); }
.document-reference { font-family: var(--police-mono); font-size: var(--texte-sm); }

@media (max-width: 1100px) {
  .documents-layout-2col { grid-template-columns: 1fr; }
}

/* --- Bibliotheque de modeles de documents (/documents/modeles) ------------- */
.modeles-barre-recherche {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem;
}
.modeles-barre-recherche input[type="search"] {
  flex: 1; max-width: 480px; padding: 0.55rem 0.9rem;
  background: var(--fond-carte); color: var(--texte-principal);
  border: 1px solid var(--bordure); border-radius: var(--rayon-md); font-size: var(--texte-base);
}
.modeles-barre-recherche input[type="search"]:focus {
  outline: none; border-color: var(--or-discret); box-shadow: 0 0 0 3px var(--or-ombre);
}

.modeles-famille { margin-bottom: 1rem; }
.modeles-famille-entete {
  display: flex; align-items: center; gap: 0.8rem; width: 100%;
  padding: 0.85rem 1.1rem; cursor: pointer; text-align: left;
  background: var(--fond-carte-claire); color: var(--texte-principal);
  border: 1px solid var(--bordure); border-radius: var(--rayon-lg);
}
.modeles-famille-entete:hover { background: var(--fond-carte-survol); border-color: var(--bordure-forte); }
.modeles-famille-nom {
  flex: 1; font-size: var(--texte-md); font-weight: 600; letter-spacing: 0.02em;
}
.modeles-chevron { color: var(--texte-discret); transition: transform 0.15s ease; }
.modeles-famille-entete[aria-expanded="true"] .modeles-chevron { transform: rotate(180deg); }

.modeles-famille-corps { padding: 1rem 0 0.4rem 0.6rem; }
.modeles-categorie { margin-bottom: 1.6rem; }
.modeles-categorie-titre {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.7rem; font-size: var(--texte-base); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-discret);
}
.modeles-categorie-icone { font-size: 1.05rem; }

.modeles-grille {
  display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.modele-carte {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg); border-left: 3px solid var(--bleu-institutionnel);
}
.modele-carte:hover { border-color: var(--bordure-forte); border-left-color: var(--or-discret); }
.modele-carte[hidden] { display: none; }
.modele-carte-entete { display: flex; align-items: flex-start; gap: 0.5rem; }
.modele-carte-entete h3 {
  flex: 1; margin: 0; font-size: var(--texte-base); font-weight: 600; line-height: 1.35;
}
.badge-systeme { background: rgba(201,162,77,0.16); color: var(--or-hover); }
.badge-neutre { background: var(--hab-neutre-bg); color: var(--hab-neutre-fg); }
.badge-succes { background: rgba(74,158,110,0.18); color: #4a9e6e; }
.badge-avertissement { background: rgba(214,158,46,0.18); color: #d69e2e; }
.badge-danger { background: rgba(197,72,72,0.18); color: #c54848; }
.modele-carte-description {
  flex: 1; margin: 0; font-size: var(--texte-sm); color: var(--texte-discret); line-height: 1.5;
}
.modele-carte-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; }
.bouton-compact { padding: 0.3rem 0.75rem; font-size: var(--texte-sm); }

/* Apercu : le contenu injecte est stylé par document-contenu.css, sur fond clair
   comme dans l'editeur et dans le PDF. */
.modale-apercu {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem; background: rgba(3,8,15,0.78);
}
.modale-apercu[hidden] { display: none; }
.modale-apercu-fenetre {
  display: flex; flex-direction: column; width: min(920px, 100%); max-height: 90vh;
  background: var(--fond-carte); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-lg); box-shadow: var(--ombre-carte);
}
.modale-apercu-entete, .modale-apercu-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--bordure);
}
.modale-apercu-pied { border-bottom: none; border-top: 1px solid var(--bordure); justify-content: flex-end; }
.modale-apercu-entete h2 { margin: 0; font-size: var(--texte-md); }
/* Meme principe que le plan de travail de l'editeur : fond gris, la feuille .doc-page
   posee dessus. L'apercu montre donc exactement la page qui sortira au PDF. */
.modale-apercu-contenu {
  flex: 1; overflow: auto; padding: 1.4rem;
  background: #d8dee5;
}
.modale-apercu-contenu .doc-page { box-shadow: var(--ombre-carte); }
/* Lecture seule : les cases a cocher posees dans le contenu du document (modeles avec
   cases) ne doivent pouvoir etre modifiees que depuis l'editeur, jamais dans un apercu. */
.modale-apercu-contenu .doc-page input[type="checkbox"] { pointer-events: none; }

/* Onglets de la modale "Lire le dossier" (documents-affilies.ejs) : meme principe
   que .calpin-onglet, un onglet par document affilie, lecture seule. */
.lecture-documents-onglets {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.7rem 1.2rem 0; border-bottom: 1px solid var(--bordure);
}
.lecture-documents-onglet {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-bottom: none;
  border-radius: var(--rayon-sm) var(--rayon-sm) 0 0; color: var(--texte-discret);
  cursor: pointer; font-size: var(--texte-sm); padding: 0.4rem 0.8rem;
}
.lecture-documents-onglet:hover { color: var(--texte-principal); }
.lecture-documents-onglet.actif { background: #d8dee5; color: var(--bleu-nuit); font-weight: 600; }

/* Separateur visuel entre le groupe fiches et le groupe dossiers/operations dans le
   bloc "Fiches et dossiers/operations lies" (dossiersOperations/fiche.ejs). */
.liste-elements-separateur {
  border: none !important; border-top: 1px solid var(--bordure); border-radius: 0 !important;
  padding: 0 !important; margin: 0.2rem 0; background: none !important; height: 0;
}

.formulaires-liaison-elements { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.8rem; }

@media (max-width: 700px) {
  .modeles-grille { grid-template-columns: 1fr; }
  .modeles-famille-corps { padding-left: 0; }
  .modale-apercu-contenu { padding: 0.8rem; }
}

/* Panneau lateral "Modeles" de l'editeur : liste groupee + filtre. */
#editeur-recherche-modele {
  width: 100%; margin-bottom: 0.6rem; padding: 0.4rem 0.6rem;
  background: var(--fond-page); color: var(--texte-principal);
  border: 1px solid var(--bordure); border-radius: var(--rayon-sm); font-size: var(--texte-sm);
}
.editeur-liste-modeles-panel { max-height: 320px; overflow-y: auto; }
.editeur-modele-categorie {
  margin: 0.7rem 0 0.3rem; font-size: var(--texte-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--or-discret);
}
.editeur-modele-categorie[hidden], .editeur-modele-item[hidden] { display: none; }

.alerte-info { background: rgba(29,78,117,0.18); border-color: var(--bleu-institutionnel); color: #cfe0f0; }

/* Document publie, utilisateur sans habilitation N0 : editeur en lecture seule. */
.editeur-verrouille .editeur-barre-outils,
.editeur-verrouille #editeur-panneau-modeles .bouton-appliquer-modele,
.editeur-verrouille #bouton-emoji,
.editeur-verrouille #bouton-logo,
.editeur-verrouille #bouton-image {
  pointer-events: none;
  opacity: 0.45;
}
.editeur-verrouille .editeur-zone-contenu { cursor: default; }

/* ---------------------------------------------------------------------------
   CHANNELS — messagerie interne agents/groupes/unites
--------------------------------------------------------------------------- */

.channels-app {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  height: calc(100vh - 220px);
  min-height: 480px;
}

.channels-sidebar {
  background: var(--fond-carte-claire);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.channels-sidebar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem; border-bottom: 1px solid var(--bordure); }
.channels-sidebar-actions button { flex: 1 1 auto; white-space: nowrap; font-size: var(--texte-xs); padding: 0.4rem 0.5rem; }

.channels-recherche { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bordure); }
.channels-recherche input {
  width: 100%; background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 0.4rem 0.6rem; color: var(--texte-principal);
  font-size: var(--texte-sm);
}

.channels-sidebar-haut {
  flex: 1 1 40%;
  overflow-y: auto;
  border-bottom: 1px solid var(--bordure);
  min-height: 80px;
}
.channels-sidebar-bas {
  flex: 1 1 60%;
  overflow-y: auto;
  min-height: 80px;
}
.channels-sections { overflow-y: auto; flex: 1; }
.channels-section h3 {
  margin: 0; padding: 0.6rem 0.75rem 0.4rem;
  display: flex; align-items: center; justify-content: space-between;
}
.channels-etiquette-categorie {
  display: inline-flex; align-items: center;
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
  color: var(--or-discret); background: rgba(201, 162, 77, 0.10);
  border: 1px solid var(--bordure-forte); border-radius: 999px;
  padding: 0.22rem 0.65rem;
}
.channels-bouton-icone-mini {
  background: none; border: 1px solid var(--bordure); color: var(--or-discret);
  border-radius: var(--rayon-sm); width: 1.2rem; height: 1.2rem; line-height: 1;
  cursor: pointer; font-size: var(--texte-xs);
}

.channels-liste { display: flex; flex-direction: column; }
.channels-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem;
  cursor: pointer; border-left: 3px solid transparent; transition: background var(--transition-rapide);
}
.channels-item:hover { background: var(--fond-carte-survol); }
.channels-item.actif { background: var(--fond-carte-survol); border-left-color: var(--or-discret); }
.channels-item-nom { flex: 1; font-size: var(--texte-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channels-item-nom.non-lu { font-weight: 700; color: var(--texte-principal); }
.channels-item-apercu { font-size: var(--texte-xs); color: var(--texte-discret); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channels-badge-non-lu {
  background: var(--or-discret); color: var(--bleu-nuit); border-radius: 999px;
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; min-width: 1.1rem; text-align: center;
}

.channels-conversation {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.channels-conversation-vide { margin: auto; color: var(--texte-discret); text-align: center; }
.channels-conversation-active { display: flex; flex-direction: column; height: 100%; }

.channels-conversation-entete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--bordure);
}
.channels-conversation-entete h2 { margin: 0; font-size: var(--texte-md); }
.channels-sous-titre { font-size: var(--texte-xs); color: var(--texte-discret); }
.channels-conversation-outils { display: flex; gap: 0.5rem; }

.channels-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }

.channels-message { max-width: 70%; padding: 0.5rem 0.7rem; border-radius: var(--rayon-md); background: var(--fond-carte); align-self: flex-start; }
.channels-message.mien { align-self: flex-end; background: rgba(201,162,77,0.14); border: 1px solid var(--or-ombre); }
.channels-message-auteur { font-size: var(--texte-xs); color: var(--or-discret); font-weight: 600; margin-bottom: 0.15rem; }
.channels-message-contenu { font-size: var(--texte-sm); white-space: pre-wrap; word-break: break-word; }
.channels-message-heure { font-size: 0.65rem; color: var(--texte-discret); margin-top: 0.2rem; text-align: right; }
.channels-message-modifie-tag { font-size: 0.62rem; color: var(--texte-discret); font-style: italic; }

.channels-message-entete { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.channels-message-options { position: relative; }
.channels-bouton-options {
  background: none; border: none; color: var(--texte-discret); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 0.2rem; border-radius: var(--rayon-sm);
}
.channels-bouton-options:hover { background: var(--fond-carte-survol); color: var(--texte-principal); }
.channels-menu-options {
  position: absolute; right: 0; top: 100%; z-index: 10;
  background: var(--fond-carte-claire); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-sm);
  box-shadow: var(--ombre-carte); min-width: 120px; display: flex; flex-direction: column;
}
.channels-menu-options[hidden] { display: none; }
.channels-menu-options button {
  background: none; border: none; text-align: left; padding: 0.4rem 0.6rem; cursor: pointer;
  font-size: var(--texte-sm); color: var(--texte-principal);
}
.channels-menu-options button:hover { background: var(--fond-carte-survol); }
.channels-menu-options button.danger { color: var(--rouge-alerte); }

.channels-message-edition { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.2rem; }
.channels-message-edition textarea {
  width: 100%; background: var(--fond-carte); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-sm); color: var(--texte-principal); font-family: var(--police-ui);
  font-size: var(--texte-sm); padding: 0.4rem; resize: vertical;
}
.channels-message-edition-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }

.channels-message.supprime .channels-message-contenu { color: var(--texte-discret); font-style: italic; }
.channels-message.supprime-visible {
  border-left: 3px solid var(--rouge-alerte); background: rgba(179,38,30,0.12);
}
.channels-message.supprime-visible .channels-message-contenu { color: #f0c9c7; }
.channels-tag-supprime {
  display: inline-block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--rouge-alerte); font-weight: 700; margin-bottom: 0.2rem;
}

.channels-message-piece-jointe { margin-top: 0.35rem; }
.channels-message-piece-jointe img { max-width: 220px; border-radius: var(--rayon-sm); display: block; }
.channels-message-piece-jointe a { color: var(--or-discret); font-size: var(--texte-sm); }

.channels-carte-reference {
  display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.35rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-sm);
  background: var(--fond-carte-claire); text-decoration: none; color: var(--texte-principal);
  cursor: pointer; transition: background var(--transition-rapide);
}
.channels-carte-reference:hover { background: var(--fond-carte-survol); border-color: var(--or-discret); }
.channels-carte-reference-type { font-size: 0.62rem; text-transform: uppercase; color: var(--or-discret); letter-spacing: 0.05em; }
.channels-carte-reference-libelle { font-size: var(--texte-sm); font-weight: 600; }

.channels-typing { min-height: 1.2rem; padding: 0 1rem; font-size: var(--texte-xs); color: var(--texte-discret); font-style: italic; }

.channels-composer { border-top: 1px solid var(--bordure); padding: 0.9rem 1.1rem; position: relative; }
.channels-composer-barre { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.channels-composer-barre:empty { display: none; }
.channels-composer-ligne { display: flex; align-items: flex-end; gap: 0.6rem; }
.channels-champ-message,
#channels-champ-message {
  flex: 1; resize: none; background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 0.75rem 0.9rem; color: var(--texte-principal);
  font-family: var(--police-ui); font-size: var(--texte-md); max-height: 8rem; min-height: 2.9rem;
}
.channels-bouton-icone {
  background: none; border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  width: 2.6rem; height: 2.6rem; cursor: pointer; font-size: 1.2rem;
}
.channels-bouton-icone:hover { background: var(--fond-carte-survol); }
#channels-bouton-envoyer {
  background: var(--vert-succes); border-color: var(--vert-succes); color: #fff;
  padding: 0.6rem 1.3rem; font-weight: 700;
}
#channels-bouton-envoyer:hover { filter: brightness(1.1); }

.channels-emoji-panneau {
  position: absolute; bottom: 100%; left: 0.85rem; margin-bottom: 0.4rem;
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-md);
  padding: 0.5rem; display: grid; grid-template-columns: repeat(8, 1.8rem); gap: 0.2rem;
  box-shadow: var(--ombre-carte); max-width: 320px;
}
.channels-emoji-panneau button { background: none; border: none; font-size: 1.2rem; cursor: pointer; border-radius: var(--rayon-sm); }
.channels-emoji-panneau button:hover { background: var(--fond-carte-survol); }

.channels-reference-chip {
  display: flex; align-items: center; gap: 0.3rem; background: var(--fond-carte);
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-sm); padding: 0.2rem 0.5rem;
  font-size: var(--texte-xs);
}
.channels-reference-chip button { background: none; border: none; color: var(--rouge-alerte); cursor: pointer; font-weight: 700; }

.channels-modale {
  position: fixed; inset: 0; background: rgba(6,13,23,0.72); display: flex;
  align-items: center; justify-content: center; z-index: 100;
}
.channels-modale[hidden] { display: none; }
.channels-modale-contenu {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-lg);
  padding: 1.2rem; width: min(420px, 92vw); max-height: 80vh; display: flex; flex-direction: column; gap: 0.6rem;
}
.channels-modale-contenu h3 { margin: 0 0 0.2rem; }
.channels-modale-contenu input,
.channels-modale-contenu select {
  width: 100%; background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 0.5rem 0.6rem; color: var(--texte-principal); font-size: var(--texte-sm);
}
.channels-modale-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }

.channels-liste-selection { overflow-y: auto; max-height: 260px; display: flex; flex-direction: column; gap: 0.2rem; }
.channels-option-agent {
  display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem;
  border-radius: var(--rayon-sm); cursor: pointer; font-size: var(--texte-sm);
}
.channels-option-agent:hover { background: var(--fond-carte-survol); }
.channels-option-agent.selectionne { background: rgba(201,162,77,0.16); }

@media (max-width: 900px) {
  .channels-app { grid-template-columns: 1fr; height: auto; }
  .channels-sidebar { max-height: 260px; }
  .channels-conversation { min-height: 480px; }
}

/* ---------------------------------------------------------------------------
   CALENDRIER — planning general / par unite / personnel
--------------------------------------------------------------------------- */

.texte-erreur { color: var(--rouge-alerte); font-size: var(--texte-sm); }

.calendrier-app { display: flex; flex-direction: column; gap: 0.85rem; }

.calendrier-onglets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.calendrier-onglet {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); color: var(--texte-discret);
  border-radius: var(--rayon-md); padding: 0.5rem 0.9rem; font-size: var(--texte-sm); cursor: pointer;
  transition: background var(--transition-rapide), color var(--transition-rapide);
}
.calendrier-onglet:hover { background: var(--fond-carte-survol); color: var(--texte-principal); }
.calendrier-onglet.actif { background: rgba(201,162,77,0.14); border-color: var(--or-discret); color: var(--or-discret); font-weight: 600; }

.calendrier-barre-outils {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-lg);
  padding: 0.6rem 0.85rem;
}
.calendrier-nav { display: flex; align-items: center; gap: 0.5rem; }
.calendrier-titre-periode { margin: 0 0 0 0.4rem; font-size: var(--texte-md); text-transform: capitalize; }
.calendrier-bouton-icone {
  background: none; border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  width: 2rem; height: 2rem; cursor: pointer; font-size: 1.1rem; color: var(--texte-principal); line-height: 1;
}
.calendrier-bouton-icone:hover { background: var(--fond-carte-survol); }

.calendrier-outils-droite { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.calendrier-select {
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
  padding: 0.4rem 0.6rem; color: var(--texte-principal); font-size: var(--texte-sm);
}
.calendrier-vues { display: flex; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); overflow: hidden; }
.calendrier-bouton-vue {
  background: var(--fond-carte); border: none; color: var(--texte-discret); padding: 0.4rem 0.7rem;
  font-size: var(--texte-sm); cursor: pointer; border-left: 1px solid var(--bordure);
}
.calendrier-bouton-vue:first-child { border-left: none; }
.calendrier-bouton-vue.actif { background: rgba(201,162,77,0.14); color: var(--or-discret); font-weight: 600; }
.calendrier-bouton-vue:hover { background: var(--fond-carte-survol); }

.calendrier-legende { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: var(--texte-xs); color: var(--texte-discret); }
.calendrier-legende-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.calendrier-legende-item-propre { color: var(--texte-principal); font-weight: 600; }
.calendrier-legende-item-autre { color: var(--texte-discret); opacity: 0.6; }
.calendrier-pastille { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--couleur-evenement, var(--or-discret)); display: inline-block; }

.calendrier-grille {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure); border-radius: var(--rayon-lg);
  overflow: hidden;
}

/* Vue mois */
.calendrier-mois-entete { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--bordure); }
.calendrier-mois-entete-jour {
  padding: 0.5rem; text-align: center; font-size: var(--texte-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-discret);
}
.calendrier-mois-corps { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, 1fr); }
.calendrier-jour-cellule {
  border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
  padding: 0.35rem; cursor: pointer; transition: background var(--transition-rapide);
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
}
.calendrier-jour-cellule:hover { background: var(--fond-carte-survol); }
.calendrier-jour-cellule.hors-mois { opacity: 0.4; }
.calendrier-jour-cellule.aujourdhui { background: rgba(201,162,77,0.08); }
.calendrier-jour-numero { font-size: var(--texte-xs); color: var(--texte-discret); }
.calendrier-jour-cellule.aujourdhui .calendrier-jour-numero { color: var(--or-discret); font-weight: 700; }
.calendrier-jour-evenements { display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }

.evenement-chip {
  background: var(--couleur-evenement, var(--or-discret)); color: #0a1826; border: none;
  border-radius: var(--rayon-sm); padding: 0.15rem 0.4rem; font-size: 0.7rem; text-align: left;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
}
.evenement-chip:hover { filter: brightness(1.1); }

/* Vue semaine */
.calendrier-semaine-corps { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 420px; }
.calendrier-semaine-colonne {
  border-right: 1px solid var(--bordure); padding: 0.5rem; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 0.35rem; transition: background var(--transition-rapide);
}
.calendrier-semaine-colonne:hover { background: var(--fond-carte-survol); }
.calendrier-semaine-colonne.aujourdhui { background: rgba(201,162,77,0.08); }
.calendrier-semaine-entete {
  font-size: var(--texte-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-discret);
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--bordure);
}
.calendrier-jour-evenements-semaine { flex: 1; }

/* Vue annee */
.calendrier-annee-corps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--bordure); }
.calendrier-mini-mois { background: var(--fond-carte-claire); padding: 0.6rem; }
.calendrier-mini-mois-titre { font-size: var(--texte-sm); font-weight: 600; margin-bottom: 0.4rem; text-align: center; }
.calendrier-mini-mois-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendrier-mini-jour {
  position: relative; text-align: center; font-size: 0.65rem; color: var(--texte-discret);
  padding: 0.2rem 0; cursor: pointer; border-radius: var(--rayon-sm);
}
.calendrier-mini-jour:hover { background: var(--fond-carte-survol); }
.calendrier-mini-jour.hors-mois { opacity: 0.3; }
.calendrier-mini-jour.aujourdhui { color: var(--or-discret); font-weight: 700; }
.calendrier-mini-point { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 999px; background: var(--or-discret); }

/* Modales (creation/edition/detail) */
.calendrier-modale {
  position: fixed; inset: 0; background: rgba(6,13,23,0.72); display: flex;
  align-items: center; justify-content: center; z-index: 100;
}
.calendrier-modale[hidden] { display: none; }
.calendrier-modale-contenu {
  background: var(--fond-carte-claire); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-lg);
  padding: 1.2rem; width: min(460px, 92vw); max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.calendrier-modale-contenu h3 { margin: 0 0 0.2rem; }
.calendrier-champ { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--texte-sm); color: var(--texte-discret); }
.calendrier-champ input,
.calendrier-champ select,
.calendrier-champ textarea {
  width: 100%; background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm); padding: 0.5rem 0.6rem; color: var(--texte-principal);
  font-family: var(--police-ui); font-size: var(--texte-sm);
}
.calendrier-champ input[type="color"] { padding: 0.2rem; height: 2.2rem; }
.calendrier-champs-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.calendrier-case { display: flex; align-items: center; gap: 0.5rem; font-size: var(--texte-sm); }
.calendrier-modale-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }

@media (max-width: 900px) {
  .calendrier-barre-outils { flex-direction: column; align-items: stretch; }
  .calendrier-mois-corps { grid-auto-rows: minmax(72px, 1fr); }
  .calendrier-semaine-corps { grid-template-columns: 1fr; }
  .calendrier-champs-dates { grid-template-columns: 1fr; }
}