/* Espace salarié Le Rouic — mobile d'abord.
   Charte : _dossiers/identite-entreprise/design-system.md
   Noir et blanc dominants, bleu #2874B2 en accent, cyan #30B4D8 en touche,
   hexagone comme signature graphique, Montserrat en typographie web. */
:root{
  /* Thème sombre (décision Sylvain 2026-08-30, inspiration app Tesla night mode). */
  --noir:#0d1b2e; --noir-profond:#050b14;
  --bleu-nuit:#184884; --bleu:#2874B2; --cyan:#30B4D8; --accent:#F6A842;
  --fond:#080f1a; --carte:#111f31; --carte-haute:#16263b; --bord:#243349;
  --texte:#e9eef5; --texte-doux:#93a4bb;
  --vert:#2bc48a; --rouge:#f0655f; --orange:#f6a842;
  --rayon:14px; --ombre:0 2px 12px rgba(0,0,0,.35);
  --ombre-forte:0 10px 30px rgba(0,0,0,.5);
  --hex:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
  background:var(--fond); color:var(--texte); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--bleu)}
.centre{text-align:center}

/* ── Connexion ─────────────────────────────────────────────────────────── */
#connexion{
  min-height:100dvh; display:flex; flex-direction:column; justify-content:center;
  padding:28px 24px; max-width:430px; margin:0 auto; position:relative; overflow:hidden;
}
/* Filigrane hexagonal, signature de la marque. Entiers et non rognés : un
   hexagone coupé par le bord se lit comme une bavure, pas comme un motif. */
#connexion::before{
  content:""; position:absolute; top:30px; right:14px; width:132px; height:146px;
  background:linear-gradient(150deg,var(--cyan),var(--bleu)); opacity:.11;
  clip-path:var(--hex); pointer-events:none;
}
#connexion::after{
  content:""; position:absolute; bottom:26px; left:12px; width:96px; height:106px;
  background:var(--bleu-nuit); opacity:.08; clip-path:var(--hex); pointer-events:none;
}
.marque{text-align:center;margin-bottom:30px;position:relative}
.logo-marque{width:186px;max-width:60%;height:auto;display:block;margin:0 auto 22px}
#connexion h1{
  font-size:1.55rem; font-weight:800; margin:0 0 6px; color:var(--texte);
  letter-spacing:.01em;
}
#connexion p.sous{color:var(--texte-doux);margin:0;font-size:.95rem}
.pied-marque{
  margin-top:34px; text-align:center; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texte-doux); opacity:.75;
}

.champ{margin-bottom:16px;position:relative}
.champ label{
  display:block; font-size:.74rem; font-weight:700; color:var(--texte-doux);
  margin-bottom:7px; text-transform:uppercase; letter-spacing:.07em;
}
.champ input,.champ select,.champ textarea{
  width:100%; padding:14px 15px; border:1.5px solid var(--bord); border-radius:var(--rayon);
  background:var(--carte-haute); color:var(--texte); outline:none; transition:border-color .15s;
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--texte-doux)}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--cyan)}
input.pin{letter-spacing:.55em;text-align:center;font-size:1.45rem;font-weight:700}

.bouton{
  width:100%; padding:15px; border:0; border-radius:var(--rayon);
  background:linear-gradient(120deg,var(--bleu),var(--cyan));
  color:#fff; font-weight:700; cursor:pointer; letter-spacing:.01em;
  transition:transform .08s, filter .15s;
}
.bouton:active{transform:scale(.985)}
.bouton:disabled{opacity:.45}
.bouton.secondaire{background:var(--carte-haute);color:var(--texte);border:1.5px solid var(--bord)}
.bouton.danger{background:var(--rouge);color:#2a0b0a}
.bouton.vert{background:var(--vert);color:#06251a}
.bouton.mini{width:auto;padding:10px 15px;font-size:.88rem}
.bouton.alerte-action{
  background:transparent;color:var(--rouge);border:1.5px solid var(--rouge);margin-top:10px;
}
.bouton.alerte-action:active{background:rgba(240,101,95,.12)}

.alerte{padding:12px 15px;border-radius:var(--rayon);margin-bottom:14px;font-size:.9rem}
.alerte.erreur{background:rgba(240,101,95,.14);color:#ffb4b0;border:1px solid rgba(240,101,95,.35)}
.alerte.ok{background:rgba(43,196,138,.14);color:#8ff0cd;border:1px solid rgba(43,196,138,.35)}
.alerte.info{background:rgba(246,168,66,.14);color:#f6cf94;border:1px solid rgba(246,168,66,.35)}

/* ── Ossature application ──────────────────────────────────────────────── */
#app{display:none;padding-bottom:82px}
header.barre{
  background:linear-gradient(115deg,var(--noir-profond) 0%,var(--noir) 55%,var(--bleu-nuit) 100%);
  color:#fff; padding:12px 14px; padding-top:max(12px,env(safe-area-inset-top));
  display:flex; align-items:center; gap:11px; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 14px rgba(13,27,46,.22);
}
.logo-barre{height:26px;width:auto;flex-shrink:0;opacity:.97}
header.barre .titre{flex:1;min-width:0;line-height:1.25}
header.barre .titre .app-nom{
  display:block; font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6;
}
header.barre .titre small{
  display:block; font-weight:600; font-size:.92rem; opacity:.97;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
header.barre button{
  background:rgba(255,255,255,.1); border:0; color:#fff; cursor:pointer;
  border-radius:10px; padding:8px; display:flex; align-items:center;
  position:relative; flex-shrink:0;
}
header.barre button:active{background:rgba(255,255,255,.2)}
header.barre #cloche-nb:not(:empty){
  position:absolute; top:1px; right:1px; background:var(--accent); color:var(--noir);
  border-radius:999px; padding:0 5px; font-size:.63rem; font-weight:800;
  min-width:16px; text-align:center;
}

main{padding:18px 16px;max-width:760px;margin:0 auto}
h2.section{
  font-size:1.28rem; font-weight:800; margin:0 0 14px; color:var(--texte);
  letter-spacing:.005em;
}
h2.section small{font-weight:500;color:var(--texte-doux);font-size:.78rem}
h3.sous-section{
  font-size:.73rem; text-transform:uppercase; letter-spacing:.13em; font-weight:800;
  color:var(--cyan); margin:26px 0 10px; display:flex; align-items:center; gap:8px;
}
/* Puce hexagonale devant chaque intertitre, conformément à la charte */
h3.sous-section::before{
  content:""; width:9px; height:10px; background:var(--cyan);
  clip-path:var(--hex); flex-shrink:0;
}

.carte{
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon);
  padding:16px; margin-bottom:11px; box-shadow:var(--ombre);
}
.carte.cliquable{cursor:pointer;transition:transform .08s,box-shadow .15s}
.carte.cliquable:active{transform:scale(.99);box-shadow:var(--ombre-forte)}
.vide{
  color:var(--texte-doux); text-align:center; padding:34px 16px; font-size:.92rem;
  background:var(--carte); border:1px dashed var(--bord); border-radius:var(--rayon);
}

/* Salutation d'accueil */
.bonjour{margin:0 0 16px}

/* Pavé congés en héros (thème sombre, à la place d'une jauge : un solde de
   congés n'a pas de « 100 % » de référence). */
.pave-cp{
  background:linear-gradient(135deg,#12365f 0%,var(--bleu) 55%,var(--cyan) 130%);
  border-radius:22px; padding:24px 22px; margin-bottom:16px; position:relative;
  overflow:hidden; box-shadow:0 12px 34px rgba(40,116,178,.32);
}
.pave-cp::after{
  content:""; position:absolute; right:-24px; top:-24px; width:150px; height:165px;
  background:rgba(255,255,255,.12); clip-path:var(--hex); pointer-events:none;
}
.pave-cp::before{
  content:""; position:absolute; right:34px; bottom:-40px; width:96px; height:106px;
  background:rgba(255,255,255,.07); clip-path:var(--hex); pointer-events:none;
}
.pave-lbl{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800;
  color:rgba(255,255,255,.8); position:relative;
}
.pave-val{
  font-size:3.6rem; font-weight:900; line-height:.95; color:#fff; margin-top:4px;
  position:relative;
}
.pave-val small{font-size:1.05rem;font-weight:700;opacity:.8;margin-left:8px}
.pave-sub{font-size:.8rem;color:rgba(255,255,255,.82);margin-top:6px;position:relative}

/* Tuiles d'action rapide */
.tuiles-accueil{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.tuile{
  position:relative; background:var(--carte); border:1px solid var(--bord);
  border-radius:18px; padding:16px 15px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:11px; color:var(--texte);
  transition:transform .08s, border-color .15s;
}
.tuile:active{transform:scale(.98)}
.tuile .tuile-ico{
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:rgba(48,180,216,.14); color:var(--cyan);
}
.tuile.rouge .tuile-ico{background:rgba(240,101,95,.16);color:var(--rouge)}
.tuile .tuile-tt{font-weight:700;font-size:.92rem;line-height:1.15}
.tuile .tuile-pastille{
  position:absolute; top:12px; right:12px; background:var(--rouge); color:#2a0b0a;
  font-size:.72rem; font-weight:800; min-width:20px; height:20px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; padding:0 6px;
}
.bonjour .hello{font-size:1.45rem;font-weight:800;color:var(--texte);line-height:1.2}
/* « jeudi 27 août » : en français seule la première lettre prend la majuscule. */
.bonjour .date{font-size:.85rem;color:var(--texte-doux)}
.bonjour .date::first-letter{text-transform:uppercase}

/* Compteurs de congés */
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:16px}
.compteur{
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon);
  padding:15px; box-shadow:var(--ombre); position:relative; overflow:hidden;
}
/* Le compteur de congés payés se distingue par un filet coloré, pas par un
   motif : un hexagone posé là ne servait à rien et parasitait la lecture. */
.compteur.principal{border-left:3px solid var(--cyan)}
.compteur .lib{
  font-size:.68rem; color:var(--texte-doux); font-weight:800; text-transform:uppercase;
  letter-spacing:.09em;
}
.compteur .val{
  font-size:2.3rem; font-weight:800; color:var(--texte); line-height:1.05; margin-top:2px;
}
.compteur .val small{font-size:.8rem;font-weight:700;color:var(--texte-doux)}
.compteur .detail{font-size:.75rem;color:var(--texte-doux);margin-top:5px}

/* Étiquettes de statut */
.etiquette{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:.71rem;
  font-weight:800; letter-spacing:.03em; white-space:nowrap;
}
.etiquette.attente{background:rgba(246,168,66,.16);color:var(--orange)}
.etiquette.validee{background:rgba(43,196,138,.16);color:var(--vert)}
.etiquette.refusee{background:rgba(240,101,95,.16);color:var(--rouge)}
.etiquette.annulee{background:rgba(147,164,187,.16);color:var(--texte-doux)}
.etiquette.declaree{background:rgba(240,101,95,.16);color:var(--rouge)}

.ligne{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ligne .principal{font-weight:700}
.ligne .secondaire{font-size:.84rem;color:var(--texte-doux);margin-top:3px}
.pastille{
  background:var(--rouge); color:#fff; border-radius:999px; padding:1px 7px;
  font-size:.7rem; font-weight:800; margin-left:6px;
}

/* Messagerie */
.fil{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bulle{max-width:84%;padding:11px 14px;border-radius:16px;font-size:.94rem}
.bulle .meta{font-size:.7rem;opacity:.72;margin-top:5px}
.bulle.moi{align-self:flex-end;background:var(--noir);color:#fff;border-bottom-right-radius:5px}
.bulle.eux{align-self:flex-start;background:var(--carte-haute);border:1px solid var(--bord);border-bottom-left-radius:5px}
.saisie{display:flex;gap:8px;align-items:flex-end}
.saisie textarea{
  flex:1; resize:none; min-height:48px; max-height:140px; padding:13px;
  border:1.5px solid var(--bord); border-radius:var(--rayon);
}

/* Barre d'onglets */
nav.onglets{
  position:fixed; bottom:0; left:0; right:0; background:rgba(10,17,28,.92);
  backdrop-filter:blur(12px); border-top:1px solid var(--bord); display:flex;
  padding:7px 0 max(7px,env(safe-area-inset-bottom)); z-index:20;
}
nav.onglets button{
  flex:1; background:none; border:0; padding:5px 2px; cursor:pointer;
  color:var(--texte-doux); font-size:.64rem; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
}
nav.onglets button .ico{display:flex;align-items:center;justify-content:center;height:22px}
nav.onglets button.actif{color:#fff;font-weight:800}
nav.onglets button.actif .ico{color:var(--cyan)}
nav.onglets button .pastille{position:absolute;top:-1px;right:16%;margin:0}

/* Modale */
.modale{
  position:fixed; inset:0; background:rgba(13,27,46,.55); display:flex;
  align-items:flex-end; justify-content:center; z-index:40;
  animation:fondu .18s ease-out;
}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.modale .panneau{
  background:var(--carte); width:100%; max-width:560px; border-radius:20px 20px 0 0;
  padding:22px 20px max(22px,env(safe-area-inset-bottom)); max-height:92dvh;
  border:1px solid var(--bord); border-bottom:0;
  overflow-y:auto; animation:monte .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes monte{from{transform:translateY(22px)}to{transform:none}}
.modale .panneau h3{margin:0 0 15px;color:var(--texte);font-size:1.2rem;font-weight:800}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:700px){
  .modale{align-items:center}
  .modale .panneau{border-radius:20px;padding-bottom:22px}
}

.aide{font-size:.83rem;color:var(--texte-doux);margin:-4px 0 14px}
#connexion .aide{margin:20px 0 0;position:relative}
.recap{
  background:rgba(40,116,178,.12); border:1px solid rgba(48,180,216,.25);
  border-left:3px solid var(--cyan);
  border-radius:var(--rayon); padding:12px 14px; font-size:.9rem; margin-bottom:14px;
}
.hist{
  font-size:.85rem; color:var(--texte-doux); border-left:2px solid var(--bord);
  padding-left:13px; margin-top:4px;
}
.hist div{margin-bottom:6px}

/* Choix de canal */
.choix{
  display:block; border:1.5px solid var(--bord); border-radius:var(--rayon);
  padding:13px 15px; margin-bottom:9px; background:var(--carte-haute); cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.choix.actif{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.choix input{margin-right:9px;width:auto}
.choix .desc{font-size:.82rem;color:var(--texte-doux);margin-left:25px;margin-top:2px}

/* Notifications */
.notif{border-left:3px solid var(--bleu);padding-left:13px;margin-bottom:14px}
.notif.lue{border-left-color:var(--bord);opacity:.62}

/* ── Calendrier ─────────────────────────────────────────────────────────── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-nav .mois{font-weight:800;color:var(--texte);font-size:1.12rem}
.cal-nav button{
  background:var(--carte-haute); border:1.5px solid var(--bord); border-radius:12px; padding:9px 15px;
  cursor:pointer; color:var(--texte); font-weight:800;
}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-entete{
  text-align:center; font-size:.68rem; font-weight:800; color:var(--texte-doux);
  text-transform:uppercase; letter-spacing:.06em; padding-bottom:5px;
}
.cal-jour{
  position:relative; aspect-ratio:1; border:1px solid var(--bord); border-radius:11px;
  background:var(--carte-haute); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; cursor:pointer; padding:2px;
}
.cal-jour .num{font-size:.95rem;font-weight:700;line-height:1}
.cal-jour.hors{visibility:hidden}
.cal-jour.week{background:rgba(255,255,255,.03);color:var(--texte-doux);cursor:default;border-color:var(--bord)}
.cal-jour.ferie{background:rgba(246,168,66,.14);border-color:rgba(246,168,66,.3)}
.cal-jour.ferie .num{color:var(--orange)}
.cal-jour.ferm-decompte{background:rgba(40,116,178,.16);border-color:rgba(48,180,216,.3)}
.cal-jour.ferm-chome{background:rgba(246,168,66,.14);border-color:var(--accent)}
.cal-jour.aujourdhui{box-shadow:0 0 0 2px var(--cyan);border-color:transparent}
.cal-jour .abs{
  font-size:.64rem; font-weight:800; line-height:1; border-radius:999px;
  padding:2px 6px; background:var(--bleu); color:#fff;
}
.cal-jour .abs.moi{background:var(--vert)}
.cal-legende{
  display:flex; flex-wrap:wrap; gap:11px; margin-top:16px; font-size:.77rem;
  color:var(--texte-doux);
}
.cal-legende span{display:flex;align-items:center;gap:6px}
/* Les pastilles de légende reprennent la forme des cases du calendrier. */
.cal-legende i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* ── Documents ──────────────────────────────────────────────────────────── */
.tag-nouveau{
  display:inline-block; background:var(--cyan); color:#fff; border-radius:999px;
  padding:2px 8px; font-size:.63rem; font-weight:800; margin-left:7px;
  vertical-align:2px; letter-spacing:.03em;
}
.doc-confirme{color:var(--vert);font-weight:700;font-size:.8rem;margin-top:8px}

/* Journal des connexions (écran Administration) */
.journal-ligne{
  font-size:.8rem; padding:8px 2px; border-bottom:1px solid var(--bord);
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
}
.journal-ligne span:last-child{color:var(--texte-doux);white-space:nowrap;font-size:.72rem}
.journal-ligne .ok{color:var(--vert);font-weight:700}
.journal-ligne .ko{color:var(--rouge);font-weight:700}

/* ── Pages natives ──────────────────────────────────────────────────────── */
.page-corps{
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon);
  padding:20px 18px; box-shadow:var(--ombre); font-size:.95rem;
}
.page-corps h2{
  font-size:1.02rem; font-weight:800; color:var(--cyan); margin:22px 0 8px;
  display:flex; align-items:center; gap:8px;
}
.page-corps h2::before{
  content:""; width:10px; height:11px; background:var(--bleu);
  clip-path:var(--hex); flex-shrink:0;
}
.page-corps h2:first-child{margin-top:0}
.page-corps h3{font-size:.9rem;font-weight:800;color:var(--texte);margin:16px 0 6px}
.page-corps p{margin:0 0 10px}
.page-corps ul{margin:0 0 12px;padding-left:22px}
.page-corps li{margin-bottom:4px}
.page-corps a{font-weight:700}
.page-pied{
  font-size:.75rem; color:var(--texte-doux); margin-top:12px; text-align:right;
}

/* Organigramme généré : un bloc par département, cartes identiques pour tous
   (demande Sylvain 2026-08-30 : pas de mise en valeur des cadres). */
.org h2 small{
  font-weight:700; color:var(--texte-doux); font-size:.72rem;
  background:rgba(147,164,187,.16); border-radius:999px; padding:2px 8px; margin-left:2px;
}
.org-grille{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:8px; margin-bottom:6px;
}
.org-carte{
  border:1px solid var(--bord); border-radius:12px; padding:10px 12px;
  background:var(--carte-haute); line-height:1.35; min-height:58px;
}
.org-carte strong{display:block;font-size:.86rem}
.org-carte span{font-size:.72rem;color:var(--texte-doux);display:block}
details.org-carte{cursor:pointer}
details.org-carte summary{list-style:none;position:relative;padding-right:16px}
details.org-carte summary::-webkit-details-marker{display:none}
details.org-carte summary::after{
  content:"▾"; position:absolute; right:0; top:2px; color:var(--texte-doux);
  font-size:.8rem; transition:transform .15s;
}
details.org-carte[open] summary::after{transform:rotate(180deg)}
.org-contacts{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.org-contacts a{
  font-size:.8rem; font-weight:700; text-decoration:none;
  background:rgba(40,116,178,.14); border:1px solid rgba(48,180,216,.25); border-radius:9px; padding:7px 10px;
}
.org-pied{font-size:.74rem;color:var(--texte-doux);margin:14px 0 0;text-align:right}

/* ── Formation / quiz ───────────────────────────────────────────────────── */
.quiz-q{
  background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon);
  padding:14px 15px; margin-bottom:11px;
}
.quiz-enonce{font-weight:700;margin-bottom:10px;font-size:.94rem}
.quiz-multi{font-weight:600;color:var(--texte-doux);font-size:.78rem}
.quiz-opt{
  display:flex; align-items:flex-start; gap:9px; padding:9px 11px; margin-bottom:6px;
  border:1.5px solid var(--bord); border-radius:11px; cursor:pointer; background:var(--carte-haute);
}
.quiz-opt:has(input:checked){border-color:var(--cyan);background:rgba(48,180,216,.12)}
.quiz-opt input{margin-top:2px;width:auto;flex-shrink:0}
.quiz-opt span{font-size:.9rem}

/* Dépôt de pièce (pré-embauche) */
.depot-piece{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px; border:1.5px dashed var(--bord); border-radius:12px;
  background:var(--carte-haute); cursor:pointer; font-size:.86rem; font-weight:700;
  color:var(--cyan);
}
.depot-piece:active{border-color:var(--cyan);background:rgba(48,180,216,.1)}
.depot-piece input[type=file]{display:none}

/* Tuto : points à valider */
.tuto-point{
  display:flex; align-items:flex-start; gap:11px; padding:13px 15px; margin-bottom:8px;
  border:1.5px solid var(--bord); border-radius:12px; cursor:pointer;
  background:var(--carte-haute); transition:border-color .15s, background .15s;
}
.tuto-point:has(input:checked){border-color:var(--vert);background:rgba(43,196,138,.1)}
.tuto-point input{margin-top:2px;width:auto;flex-shrink:0;accent-color:var(--vert)}
.tuto-point span{font-size:.92rem}

/* Suivi individuel (traçabilité) */
.suivi{border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden;margin-bottom:4px}
.suivi-l{
  display:flex; justify-content:space-between; gap:12px; padding:9px 12px;
  border-bottom:1px solid var(--bord); font-size:.84rem; align-items:baseline;
}
.suivi-l:last-child{border-bottom:0}
.suivi-l span:first-child{min-width:0;font-weight:600}
.suivi-l span:last-child{text-align:right;white-space:nowrap;font-size:.8rem}

/* Registre e-learning */
.registre{border:1px solid var(--bord);border-radius:var(--rayon);overflow:hidden}
.registre-l{
  display:flex; justify-content:space-between; gap:10px; padding:9px 12px;
  border-bottom:1px solid var(--bord); font-size:.85rem;
}
.registre-l:last-child{border-bottom:0}
.registre-l span:last-child{color:var(--texte-doux);text-align:right;white-space:nowrap}
.registre-l em{color:var(--orange);font-style:normal}

/* Dépôt de justificatif */
.depot{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.depot label{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:17px 10px; border:1.5px dashed var(--bord); border-radius:var(--rayon);
  background:var(--carte-haute); cursor:pointer; font-size:.85rem; font-weight:700; text-align:center;
  color:var(--noir);
}
.depot label:active{border-color:var(--cyan);background:rgba(48,180,216,.1)}
.depot label svg{color:var(--bleu)}
.depot input[type=file]{display:none}
.depot-choisi{
  font-size:.83rem; color:var(--vert); font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}

/* Affectation d'un module ciblé (formation métier) */
.affectation{
  max-height:260px; overflow-y:auto; border:1.5px solid var(--bord);
  border-radius:var(--rayon); background:var(--carte-haute); padding:10px 12px;
}
.affectation-service{margin-bottom:10px}
.affectation-service:last-child{margin-bottom:0}
.lien-service{
  background:none; border:none; padding:0; margin:0 0 4px; cursor:pointer;
  font-size:.74rem; font-weight:700; text-transform:uppercase; color:var(--bleu);
}
.affectation-l{
  display:flex; align-items:center; gap:8px; font-size:.88rem; padding:3px 0;
  font-weight:400; text-transform:none; color:var(--texte);
}
.affectation-l input{width:auto}
.affectation-l small{color:var(--texte-doux)}

/* Volets de l'écran Gestion */
.segments{display:flex; gap:6px; margin:0 0 16px; flex-wrap:wrap}
.segments button{
  padding:9px 14px; border:1.5px solid var(--bord); border-radius:999px;
  background:var(--carte); color:var(--texte-doux); font-weight:700; font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; gap:4px;
}
.segments button.actif{background:var(--bleu); border-color:var(--bleu); color:#fff}

/* Bloc replié des réglages avancés (éditeurs) */
details.avance{
  margin:0 0 14px; border:1.5px solid var(--bord); border-radius:var(--rayon);
  background:var(--carte-haute);
}
details.avance summary{
  cursor:pointer; padding:12px 15px; font-size:.85rem; font-weight:700;
  color:var(--texte-doux); list-style-position:inside;
}
details.avance[open] summary{border-bottom:1px solid var(--bord); margin-bottom:12px}
details.avance > div{margin:0 15px}

/* Fonction pas encore ouverte : visible mais grisée (lancement sans congés) */
.grise{opacity:.42; filter:saturate(.4)}
nav.onglets button.grise{opacity:.38}