@import url("polices.css");
/* Design system Meropti (CRM des CFA) — fichier unique, aucune ressource externe.
   Ambiance pastel choisie par le client (15/09/2026) : bleu, bleu ciel, rose, jaune beurre.
   Sens des couleurs : JAUNE BEURRE = « une action est attendue de VOUS » ; BLEU CIEL = « en
   cours chez l'autre partie » ; ROSE = documents / signature ; MENTHE = « fait / terminé » ;
   LILAS = le calendrier officiel (les jours fériés, et rien d'autre).
   Les boutons principaux gardent le bleu Meropti (#225A91) : un pastel n'est pas lisible
   en blanc. Typographie : Bricolage Grotesque (titres, chiffres), Instrument Sans (texte),
   JetBrains Mono (codes administratifs : RNCP, SIRET, UAI, IDCC).
   Penser à incrémenter ?v=N dans base.html, login.html et acces.html à chaque évolution. */

:root{
  color-scheme:light;
  /* fonds et encres */
  --fond:#FBF3F8; --surface:#FFFFFF; --surface-2:#FDF5F9; --survol:#FDF1F7;
  --trait:#EEE5EC; --trait-fort:#DCD1DA;
  --encre:#16233F; --encre-2:#55607A; --encre-3:#8690A6;
  /* marque */
  --marque:#225A91; --marque-fonce:#1A4775; --marque-vif:#3474BD;
  /* pastels : fond / bord / texte lisible dessus */
  --bleu:#E1EBFC;   --bleu-bord:#C4D6F6;   --bleu-texte:#2A549A;
  --ciel:#DDF2FD;   --ciel-bord:#B6E0F7;   --ciel-texte:#1B6690;
  --rose:#FCE6EF;   --rose-bord:#F5C4D8;   --rose-texte:#A4336A; --rose-vif:#E0759F; --rose-pale:#FEF3F8;
  --beurre:#FFF4C9; --beurre-bord:#F2DE93; --beurre-texte:#7A5700; --beurre-vif:#F2C230;
  --menthe:#E2F5EA; --menthe-bord:#B9E3C9; --menthe-texte:#1E7447; --menthe-vif:#34A26A;
  --corail:#FDE9E7; --corail-bord:#F5C6C0; --corail-texte:#AE2A1E;
  /* LILAS = le calendrier officiel : les jours feries, et rien d'autre. Ajoute le
     21/09/2026 — le ferie etait jaune beurre, comme une seance sans formateur, et le
     client ne les distinguait plus (« la couleur jours ferie et sans formateur se
     ressemble trop »). Une couleur, un sens : le beurre reste « une action est
     attendue de vous », donc la seance sans formateur. */
  --lilas:#EDE7FB; --lilas-bord:#D4C7F2; --lilas-texte:#5B3FA8; --lilas-pale:#F7F4FE;
  --lilas-vif:#8A6CE0;
  --rayon:18px; --rayon-sm:12px;
  --ombre:0 1px 2px rgba(22,35,63,.04),0 10px 28px -18px rgba(22,35,63,.20);
  --ombre-haute:0 2px 6px rgba(22,35,63,.06),0 22px 40px -20px rgba(22,35,63,.28);
  --anneau:0 0 0 4px rgba(224,117,159,.22);
  /* ambiance, au choix de l'utilisateur (rose par defaut, bleu : bloc [data-theme="bleu"] plus bas).
     Lue par le menu, les onglets, les filtres, l'etape en cours, les champs et l'editeur ;
     les couleurs de SENS (beurre, ciel, menthe, corail, rose des documents) ne changent pas. */
  --amb-pale:var(--rose); --amb-bord:var(--rose-bord); --amb-texte:var(--rose-texte);
  --amb-vif:var(--rose-vif); --amb-tres-pale:var(--rose-pale); --amb-titre:#B77E9C;
  --amb-laterale:radial-gradient(120% 28% at 0% 0%,rgba(214,236,253,.85),transparent 70%),
    radial-gradient(90% 18% at 100% 0%,rgba(255,244,201,.8),transparent 70%),
    linear-gradient(180deg,#F7EEF9 0%,#FAE6F1 45%,#F7D9E8 100%);
  --amb-laterale-bord:#EBDCE7; --amb-laterale-defil:#E7C6D8; --amb-laterale-pied:rgba(214,168,194,.45);
  --amb-barre:rgba(251,243,248,.82);
  --titres:"Bricolage Grotesque","Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --texte:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* noms historiques, encore lus par quelques gabarits */
  --primary:var(--marque); --primary-hover:var(--marque-fonce); --accent:var(--marque-vif);
  --bg:var(--fond); --border:var(--trait); --ink:var(--encre); --ink-2:var(--encre-2); --ink-3:var(--encre-3);
  --success:var(--menthe-texte); --success-bg:var(--menthe); --warn:var(--beurre-texte); --warn-bg:var(--beurre);
  --error:var(--corail-texte); --error-bg:var(--corail); --info:var(--bleu-texte); --info-bg:var(--bleu);
  --danger:#E0457B; --step-done:var(--menthe-vif); --step-current:var(--marque); --step-todo:var(--trait-fort);
}

/* Ambiance bleue (cookie meropti_ambiance, cf. routeurs/accueils.choisir_ambiance) : celle du
   15/09/2026 au matin, avant la demande « plus de rose ». */
:root[data-theme="bleu"]{
  --fond:#F5F7FC; --surface-2:#F8FAFD; --survol:#F3F7FE; --trait:#E6EAF3; --trait-fort:#D2D9E6;
  --anneau:0 0 0 4px rgba(52,116,189,.18);
  --amb-pale:var(--bleu); --amb-bord:var(--bleu-bord); --amb-texte:var(--bleu-texte);
  --amb-vif:var(--marque-vif); --amb-tres-pale:#F3F7FE; --amb-titre:#8A9AB5;
  --amb-laterale:radial-gradient(120% 34% at 0% 100%,rgba(252,230,239,.95),transparent 70%),
    radial-gradient(90% 22% at 100% 0%,rgba(255,244,201,.9),transparent 70%),
    linear-gradient(180deg,#E8F4FE 0%,#EEF3FD 55%,#F5EEF7 100%);
  --amb-laterale-bord:#DCE8F6; --amb-laterale-defil:#C9DAEE; --amb-laterale-pied:rgba(160,180,210,.35);
  --amb-barre:rgba(245,247,252,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texte);font-size:14.5px;line-height:1.55;color:var(--encre);
     background:var(--fond);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
h1{font-family:var(--titres);font-optical-sizing:auto;color:var(--encre);font-size:30px;line-height:1.15;
   font-weight:700;letter-spacing:-.022em;margin:0 0 6px;text-wrap:balance}
h2{font-family:var(--texte);color:var(--encre);font-size:16px;line-height:1.35;font-weight:650;
   letter-spacing:-.005em;margin:0 0 14px;text-wrap:balance}
h2 .icone{vertical-align:-3px}
h3{font-size:14.5px;font-weight:650;margin:18px 0 8px}
p{margin:0 0 12px}
a{color:var(--marque-vif);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
small,.aide{color:var(--encre-2);font-size:13px}
.aide{display:block;margin-top:3px}
.muted{color:var(--encre-3)}
b,strong{font-weight:650}
pre{font-family:var(--code);font-size:12.5px;background:var(--surface-2);border:1px solid var(--trait);
    border-radius:var(--rayon-sm);padding:12px 14px;overflow-x:auto;white-space:pre-wrap}
code,.code{font-family:var(--code);font-size:.88em}
.code{background:var(--surface-2);border:1px solid var(--trait);border-radius:7px;padding:1px 7px;
      color:var(--encre-2);white-space:nowrap;letter-spacing:-.01em}
.icone{flex:none;display:inline-block;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--marque-vif);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Ossature : équipe du centre (menu latéral) ----------------------------- */
.coque{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.laterale{position:sticky;top:0;height:100vh;overflow-y:auto;color:var(--encre-2);display:flex;flex-direction:column;
  padding:16px 12px 12px;border-right:1px solid var(--amb-laterale-bord);scrollbar-width:thin;
  scrollbar-color:var(--amb-laterale-defil) transparent;background:var(--amb-laterale)}
.plaque{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;
  padding:10px 12px;margin:0 2px 10px;min-height:58px;box-shadow:0 1px 2px rgba(22,35,63,.05),0 6px 16px -10px rgba(22,35,63,.25)}
.plaque:hover{text-decoration:none}
.plaque img{max-height:36px;max-width:100%;display:block}
.centre-actif{margin:0 6px 6px;font-size:12.5px;font-weight:600;color:var(--encre-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.laterale .bascule-org{display:block;margin:0 2px 6px}
.laterale .bascule-org select{height:36px;font-size:13px;background-color:rgba(255,255,255,.75);border-color:#CFDDEE}
.nav-laterale{display:flex;flex-direction:column;gap:2px}
.nav-titre{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--amb-titre);margin:16px 10px 6px}
.laterale a.lien{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:11px;color:#34425E;
  font-weight:550;font-size:14px;line-height:1.35;transition:background .15s,color .15s,box-shadow .15s}
.laterale a.lien .icone{color:#7B8DAB;transition:color .15s}
.laterale a.lien:hover{text-decoration:none;background:rgba(255,255,255,.6);color:var(--encre)}
.laterale a.lien:hover .icone{color:var(--amb-vif)}
.laterale a.lien.actif{color:var(--encre);font-weight:650;background:#fff;
  box-shadow:0 1px 2px rgba(22,35,63,.06),0 6px 14px -10px rgba(22,35,63,.35)}
.laterale a.lien.actif .icone{color:var(--amb-vif)}
.laterale a.lien>span:not(.nav-badge){flex:1;min-width:0}
.laterale a.lien .nav-badge{flex:none}
.laterale .nav-badge{background:var(--beurre);color:var(--beurre-texte);box-shadow:inset 0 0 0 1px var(--beurre-bord)}
.laterale-pied{margin-top:auto;padding:12px 4px 0;border-top:1px solid var(--amb-laterale-pied);display:flex;align-items:center;gap:10px}
.laterale-pied .qui{flex:1;min-width:0;line-height:1.3}
.laterale-pied .qui b{display:block;color:var(--encre);font-size:13.5px;font-weight:650}
.laterale-pied .qui small{display:block;color:var(--encre-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-mini{flex:none;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FBCFE0,#FFE9A8);color:#7A3558;font-size:13px;font-weight:700}
.bouton-icone{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;
  background:transparent;border:0;color:var(--encre-2);cursor:pointer;transition:background .15s,color .15s}
.bouton-icone:hover{background:rgba(22,35,63,.06);color:var(--encre);text-decoration:none}
.laterale .bouton-icone:hover{background:rgba(255,255,255,.75)}
.zone{min-width:0;display:flex;flex-direction:column}
.barre-haut{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;min-height:52px;
  padding:0 32px;background:var(--amb-barre);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.barre-haut .espace{flex:1}
.bouton-menu{display:none}
.contenu{width:100%;max-width:1180px;margin:0 auto;padding:4px 32px 64px}
.voile{display:none}
@media (max-width:960px){
  .coque{grid-template-columns:minmax(0,1fr)}
  .laterale{position:fixed;inset:0 auto 0 0;width:min(288px,86vw);z-index:60;transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:var(--ombre-haute)}
  #menu-ouvert:checked~.coque .laterale{transform:none}
  #menu-ouvert:checked~.coque .voile{display:block;position:fixed;inset:0;z-index:55;background:rgba(22,35,63,.28)}
  .bouton-menu{display:inline-flex}
  .barre-haut{padding:0 12px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--trait)}
  .contenu{padding:14px 16px 48px}
}

/* --- Ossature : entreprise, apprenti, pages publiques --------------------------- */
.entete-simple{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--trait)}
.entete-simple::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--ciel-bord),var(--bleu-bord) 35%,var(--rose-bord) 70%,var(--beurre-bord))}
.entete-interieur{max-width:1080px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.entete-interieur .logo{display:flex;align-items:center}
.entete-interieur .logo:hover{text-decoration:none}
.entete-interieur .logo img{height:32px;width:auto;display:block}
.onglets{display:flex;gap:4px;align-items:center;overflow-x:auto}
.onglets a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:var(--encre-2);
  font-weight:550;white-space:nowrap;transition:background .15s,color .15s}
.onglets a .icone{color:var(--encre-3)}
.onglets a:hover{text-decoration:none;background:var(--surface-2);color:var(--encre)}
.onglets a.actif{background:var(--amb-pale);color:var(--amb-texte);font-weight:650}
.onglets a.actif .icone{color:var(--amb-texte)}
.zone-droite{margin-left:auto;display:flex;align-items:center;gap:6px}
.zone-droite .qui{color:var(--encre-2);font-size:13.5px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.coque-simple .contenu{max-width:1080px;padding:28px 24px 64px}
@media (max-width:720px){
  .entete-interieur{padding:8px 16px;gap:10px}
  .onglets{order:3;width:100%;padding-bottom:6px}
  .zone-droite .qui{display:none}
  .coque-simple .contenu{padding:18px 16px 48px}
}

/* --- Notifications (cloche) ----------------------------------------------------- */
.cloche{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;color:var(--encre-2);transition:background .15s,color .15s}
.cloche:hover{background:rgba(22,35,63,.06);color:var(--encre);text-decoration:none}
.pill{background:var(--danger);color:#fff;border-radius:999px;padding:0 6px;min-width:18px;height:18px;
  font-size:11px;font-weight:700;line-height:18px;text-align:center}
.cloche .pill{position:absolute;top:2px;right:0;box-shadow:0 0 0 2px var(--fond)}
.nav-badge{margin-left:auto;background:var(--beurre);color:var(--beurre-texte);border-radius:999px;
  padding:0 7px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
form.inline{display:inline;margin:0}
button.lien-ghost{background:none;border:0;padding:6px 10px;font:inherit;font-size:13.5px;color:var(--encre-2);cursor:pointer;border-radius:10px}
button.lien-ghost:hover{background:rgba(22,35,63,.06);color:var(--encre)}
.lien-ghost{color:var(--encre-2);font-size:14px}
.bascule-org{display:inline-block}
.bascule-org select{width:auto;max-width:240px;height:36px;font-size:13.5px}

/* --- En-têtes de page ------------------------------------------------------------ */
.h1-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:8px 0 22px}
.h1-row h1{margin:0}
.sous-titre{color:var(--encre-2);font-size:14.5px;margin:0 0 22px;max-width:78ch}
.h1-row .sous-titre{margin:4px 0 0}
.breadcrumb{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:550;margin:8px 0 10px;color:var(--encre-2)}
.breadcrumb:hover{color:var(--amb-texte);text-decoration:none}
.container-narrow{max-width:760px}
.entete-fiche{display:flex;align-items:center;gap:14px;margin:8px 0 20px}
.entete-fiche h1{margin:0}
.entete-fiche .sous-titre{margin:0}
.codes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.codes .code{font-size:12px}
.codes .code b{font-family:var(--texte);font-weight:650;color:var(--encre-3);margin-right:5px;font-size:10.5px;letter-spacing:.05em}

/* --- Cartes ------------------------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:22px 24px;margin-bottom:18px}
.card>:last-child{margin-bottom:0}
.card-action{border-color:var(--amb-bord);box-shadow:0 0 0 4px var(--amb-pale),var(--ombre)}
.card-attente{border-color:var(--beurre-bord);box-shadow:0 0 0 4px var(--beurre),var(--ombre)}
.card-done>h2 .icone,.card-done summary h2 .icone{color:var(--menthe-vif)}
.card-muted{opacity:.6}
.card-done>h2,.card-done summary h2{display:inline}
.card details summary{cursor:pointer;color:var(--encre-2);font-weight:550}
.card details summary:hover{color:var(--marque)}
.card>.table-scroll:only-child,.card[style*="padding:0"]>.table-scroll{border-radius:inherit}
.card-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:18px}
.card-grille>.card{margin-bottom:0}

/* --- Badges, puces ------------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:20px;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-brouillon{background:#F1F3F8;color:#5A647C;border-color:#E2E6EE}
.b-en_attente_cfa,.b-aide{background:var(--beurre);color:var(--beurre-texte);border-color:var(--beurre-bord)}
.b-complet,.b-encours{background:var(--ciel);color:var(--ciel-texte);border-color:var(--ciel-bord)}
.b-genere{background:var(--rose);color:var(--rose-texte);border-color:var(--rose-bord)}
.b-signe,.b-valide{background:var(--menthe);color:var(--menthe-texte);border-color:var(--menthe-bord)}
.b-depose{background:var(--bleu);color:var(--bleu-texte);border-color:var(--bleu-bord)}
.b-rupture{background:var(--corail);color:var(--corail-texte);border-color:var(--corail-bord)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;
  font-weight:600;line-height:20px;background:var(--surface-2);color:var(--encre-2);border:1px solid var(--trait);white-space:nowrap}
.chip-vous{background:var(--beurre);color:var(--beurre-texte);border-color:var(--beurre-bord)}
.chip-autre{background:var(--ciel);color:var(--ciel-texte);border-color:var(--ciel-bord)}
.chip-fini{background:var(--menthe);color:var(--menthe-texte);border-color:var(--menthe-bord)}

/* --- Boutons ------------------------------------------------------------------------ */
button,input,select,textarea{font:inherit}
.btn-primary,.btn-secondary,.btn-success{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--rayon-sm);padding:9px 16px;font-size:14.5px;font-weight:600;cursor:pointer;
  text-decoration:none;border:1px solid transparent;line-height:1.25;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s,transform .05s}
.btn-primary{background:linear-gradient(180deg,#2E6AAB,var(--marque));color:#fff;border-color:#1F5486;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px rgba(34,90,145,.55)}
.btn-primary:hover{background:linear-gradient(180deg,#285F99,var(--marque-fonce));text-decoration:none}
.btn-secondary{background:var(--surface);border-color:var(--trait-fort);color:var(--encre);box-shadow:0 1px 2px rgba(22,35,63,.05)}
.btn-secondary:hover{border-color:var(--amb-bord);color:var(--amb-texte);background:var(--amb-tres-pale);text-decoration:none}
.btn-success{background:linear-gradient(180deg,#2F9A62,#23804F);color:#fff;border-color:#1D6E43;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px rgba(35,128,79,.5)}
.btn-success:hover{background:#1D6E43;text-decoration:none}
.btn-primary:active,.btn-secondary:active,.btn-success:active{transform:translateY(1px)}
.btn-primary:disabled,.btn-secondary:disabled,.btn-success:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sm{font-size:13px;padding:6px 12px;border-radius:10px}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-success:focus-visible{outline:none;box-shadow:var(--anneau)}

/* --- Messages ------------------------------------------------------------------------ */
.note{border:1px solid;border-radius:14px;padding:12px 16px;margin-bottom:16px;font-size:14px;line-height:1.5}
.note ul{margin:6px 0 0;padding-left:18px}
.note .icone{vertical-align:-3px}
.note.note-icone{display:flex;gap:10px;align-items:flex-start}
.note.note-icone>.icone{margin-top:2px}
.note-success{background:var(--menthe);border-color:var(--menthe-bord);color:#17583A}
.note-success>.icone{color:var(--menthe-vif)}
.note-warn{background:var(--beurre);border-color:var(--beurre-bord);color:#5E4300}
.note-warn>.icone{color:#C99A06}
.note-error{background:var(--corail);border-color:var(--corail-bord);color:#86211A}
.note-error>.icone{color:var(--corail-texte)}
.note-info{background:var(--ciel);border-color:var(--ciel-bord);color:#154F70}
.note-info>.icone{color:var(--ciel-texte)}
.note a{color:inherit;text-decoration:underline}

/* --- Tableaux ------------------------------------------------------------------------ */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface)}
th{background:var(--surface-2);color:var(--encre-3);font-size:12px;font-weight:600;letter-spacing:.02em;
   text-align:left;padding:10px 16px;border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--trait);vertical-align:middle}
tr:last-child>td{border-bottom:0}
tr:hover>td{background:var(--survol)}
td a{font-weight:550}
.card:not([style*="padding:0"])>.table-scroll{margin:0 -24px}
.card:not([style*="padding:0"])>.table-scroll th:first-child,.card:not([style*="padding:0"])>.table-scroll td:first-child{padding-left:24px}
.card:not([style*="padding:0"])>.table-scroll th:last-child,.card:not([style*="padding:0"])>.table-scroll td:last-child{padding-right:24px}
.card:not([style*="padding:0"])>.table-scroll:last-child{margin-bottom:-22px}
.card:not([style*="padding:0"])>.table-scroll:last-child tr:last-child>td:first-child{border-bottom-left-radius:var(--rayon)}
.card:not([style*="padding:0"])>.table-scroll:last-child tr:last-child>td:last-child{border-bottom-right-radius:var(--rayon)}
.nombre,td.nombre{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* --- Formulaires ---------------------------------------------------------------------- */
label{display:block;font-size:13px;color:var(--encre-2);margin:12px 0 5px;font-weight:600}
/* Champ obligatoire : l'etoile rouge est posee par le `required` du champ lui-meme —
   une seule source de verite, aucune etoile ne peut promettre ce que le formulaire
   n'exige pas (ni l'oublier quand un champ devient obligatoire). */
label:has(+ :is(input,select,textarea)[required])::after,
label:has(+ small + :is(input,select,textarea)[required])::after,
label:has(> :is(input,select,textarea)[required])::after{content:" *";color:var(--error);font-weight:700}
.obligatoire{color:var(--error);font-weight:700}
input,select,textarea{height:40px;padding:0 12px;border:1px solid var(--trait-fort);border-radius:var(--rayon-sm);
  width:100%;font-size:14.5px;color:var(--encre);background-color:var(--surface);
  transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:92px;padding:10px 12px;line-height:1.5;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238690A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
input:hover,select:hover,textarea:hover{border-color:#B7C2D3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amb-vif);box-shadow:var(--anneau)}
input::placeholder,textarea::placeholder{color:#9CA5B6}
input[type=checkbox],input[type=radio]{width:16px;height:16px;padding:0;margin:0 6px 0 0;vertical-align:-3px;
  accent-color:var(--marque);box-shadow:none;cursor:pointer}
input[type=file]{height:auto;padding:8px;border-style:dashed;background:var(--surface-2);font-size:13.5px;color:var(--encre-2)}
input[type=file]::file-selector-button{font:inherit;font-weight:600;border:1px solid var(--trait-fort);background:#fff;
  border-radius:9px;padding:6px 12px;margin-right:10px;color:var(--encre);cursor:pointer}
input[readonly],input:disabled,select:disabled{background:var(--surface-2);color:var(--encre-2)}
fieldset{border:1px solid var(--trait);border-radius:var(--rayon-sm);padding:10px 16px 16px;margin:12px 0}
legend{font-weight:650;padding:0 6px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:160px}
details.section{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  margin-bottom:12px;box-shadow:var(--ombre)}
details.section>summary{cursor:pointer;padding:15px 22px;border-radius:var(--rayon);font-weight:650;color:var(--encre);
  list-style:none;display:flex;align-items:center;gap:10px}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary::before{content:"";width:18px;height:18px;flex:none;transition:transform .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238690A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/18px no-repeat}
details.section[open]>summary::before{transform:rotate(90deg)}
details.section>summary:hover{background:var(--survol)}
details.section[open]>summary{border-bottom:1px solid var(--trait);border-radius:var(--rayon) var(--rayon) 0 0}
details.section>.corps{padding:8px 22px 22px}
.card details.section{box-shadow:none;background:var(--surface-2);margin-top:12px}
.card details.section>summary{padding:12px 18px}
.card details.section[open]>summary{background:var(--surface)}
.card details.section>.corps{background:var(--surface);border-radius:0 0 var(--rayon) var(--rayon)}
.row>div:has(>input[type=file]){min-width:240px}
details.card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;color:var(--amb-texte);font-weight:650}
details.card>summary::-webkit-details-marker{display:none}
details.card[open]>summary{margin-bottom:6px}
.actionbar-sticky{position:sticky;bottom:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  box-shadow:var(--ombre-haute);border:1px solid var(--trait);border-radius:var(--rayon);padding:12px 18px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* --- Étapes d'un dossier ----------------------------------------------------------------- */
.timeline{display:flex;list-style:none;margin:2px 0;padding:0;counter-reset:etape}
.timeline li{flex:1;position:relative;text-align:center;font-size:12.5px;line-height:1.35;color:var(--encre-3);
  counter-increment:etape;padding:0 4px}
.timeline li::before{content:counter(etape);display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;margin:0 auto 8px;background:var(--surface);border:1.5px solid var(--trait-fort);color:var(--encre-3);
  font-size:12px;font-weight:700;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.timeline li::after{content:"";position:absolute;top:13px;left:calc(-50% + 18px);width:calc(100% - 36px);height:3px;
  border-radius:3px;background:var(--trait)}
.timeline li:first-child::after{display:none}
.timeline li.fait{color:var(--encre-2)}
.timeline li.fait::before{content:"";border-color:var(--menthe-bord);
  background:var(--menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7447' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.timeline li.fait::after,.timeline li.courant::after{background:linear-gradient(90deg,var(--menthe-bord),var(--ciel-bord))}
.timeline li.courant{color:var(--encre);font-weight:650}
.timeline li.courant::before{background:var(--marque);border-color:var(--marque);color:#fff;box-shadow:0 0 0 5px var(--amb-pale)}
.timeline.compacte li{font-size:0;padding:0}
.timeline.compacte li::before{width:12px;height:12px;font-size:0;margin-bottom:0;border-width:1.5px;background-size:8px}
.timeline.compacte li.courant::before{box-shadow:0 0 0 3px var(--amb-pale)}
.timeline.compacte li::after{top:5px;height:2px;left:calc(-50% + 9px);width:calc(100% - 18px)}
.timeline-legende{font-size:13px;color:var(--encre-2);margin:6px 0 0}
@media (max-width:520px){
  .timeline li{font-size:0}
  .timeline li.courant{font-size:11.5px}
}

/* --- Cartes apprenti (accueil entreprise) ------------------------------------------------- */
.grille-apprentis{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
@media (max-width:720px){.grille-apprentis{grid-template-columns:1fr}}
a.carte-apprenti{display:flex;flex-direction:column;gap:4px;color:inherit;background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--rayon);box-shadow:var(--ombre);padding:20px 22px 18px;transition:transform .15s,box-shadow .15s,border-color .15s}
a.carte-apprenti:hover{text-decoration:none;border-color:var(--amb-bord);box-shadow:var(--ombre-haute);transform:translateY(-2px)}
a.carte-apprenti.carte-a-vous{border-color:var(--beurre-bord);box-shadow:0 0 0 4px var(--beurre),var(--ombre)}
.carte-apprenti .nom{font-family:var(--titres);font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.carte-apprenti .infos{color:var(--encre-2);font-size:13.5px;margin:2px 0 14px}
.carte-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}

/* --- Chiffres clés (accueil CFA) : une couleur pastel par étape ------------------------------ */
.grille-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
@media (max-width:860px){.grille-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:16px 18px 18px;color:inherit;box-shadow:var(--ombre);overflow:hidden;
  transition:transform .15s,box-shadow .15s}
.stat br{display:none}
a.stat:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--ombre-haute)}
a.stat::after{content:"";position:absolute;top:16px;right:16px;width:16px;height:16px;opacity:0;transition:opacity .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center/16px no-repeat}
a.stat:hover::after{opacity:1}
.stat .libelle{font-size:13px;font-weight:650;color:var(--encre-2)}
.stat .valeur{font-family:var(--titres);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--encre)}
.stat .valeur .sur{font-family:var(--texte);font-size:15px;font-weight:600;color:var(--encre-3);letter-spacing:0}
.stat .sous{font-size:12.5px;color:var(--encre-2)}
.stat-attente{background:var(--beurre);border-color:var(--beurre-bord)}.stat-attente .libelle{color:var(--beurre-texte)}
.stat-preparation{background:var(--ciel);border-color:var(--ciel-bord)}.stat-preparation .libelle{color:var(--ciel-texte)}
.stat-signature{background:var(--rose);border-color:var(--rose-bord)}.stat-signature .libelle{color:var(--rose-texte)}
.stat-depose{background:var(--bleu);border-color:var(--bleu-bord)}.stat-depose .libelle{color:var(--bleu-texte)}
.stat-ok{background:var(--menthe);border-color:var(--menthe-bord)}.stat-ok .libelle{color:var(--menthe-texte)}
.stat-info{background:var(--ciel);border-color:var(--ciel-bord)}.stat-info .libelle{color:var(--ciel-texte)}

/* --- Filtres (liste des dossiers) ------------------------------------------------------------ */
.filtres{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filtres a{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre-2);font-size:13px;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.filtres a:hover{text-decoration:none;border-color:var(--amb-bord);color:var(--amb-texte)}
.filtres a.actif{background:var(--amb-pale);border-color:var(--amb-bord);color:var(--amb-texte)}
.recherche{display:flex;gap:8px;margin-left:auto;align-items:center}
.recherche input{width:260px;padding-left:36px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238690A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 11px center/16px no-repeat}
.recherche select{width:auto;max-width:220px}
@media (max-width:720px){.recherche{margin-left:0;width:100%;flex-wrap:wrap}.recherche input{flex:1;width:auto}}

/* --- États vides, complétude ------------------------------------------------------------------ */
.vide{text-align:center;padding:36px 20px;color:var(--encre-2)}
.vide .rond{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:22px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--amb-pale),var(--beurre));color:var(--amb-texte)}
.vide .titre{font-family:var(--titres);font-size:19px;font-weight:650;letter-spacing:-.01em;color:var(--encre);margin-bottom:4px}
.vide .btn-primary{margin-top:18px}
.vide .note{text-align:left;display:inline-flex;gap:8px;align-items:center;margin:0}
.completude{margin-bottom:8px}
.completude .barre{height:6px;background:var(--trait);border-radius:3px;overflow:hidden}
.completude .barre span{display:block;height:100%;background:var(--menthe-vif);border-radius:3px}
.completude p{margin:6px 0 0;font-size:13px;color:var(--encre-2)}

/* --- Notifications ------------------------------------------------------------------------------ */
.notif{display:flex;gap:12px;align-items:baseline;padding:13px 18px;border-bottom:1px solid var(--trait)}
.notif:last-child{border-bottom:none}
.notif .point{flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
.notif.non-lu{font-weight:600;background:var(--survol)}
.notif.non-lu .point{background:var(--danger);box-shadow:0 0 0 3px var(--rose)}
.notif .quand{flex:none;color:var(--encre-3);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
.notif .msg{flex:1}

/* --- Suivi pédagogique (coach) ------------------------------------------------------------------ */
.jauge{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.jauge .barre{display:inline-block;width:80px;height:6px;background:var(--trait);border-radius:3px;overflow:hidden}
.jauge .barre span{display:block;height:100%;border-radius:3px;background:var(--marque-vif)}
.jauge.j-fait .barre span{background:var(--menthe-vif)}
.jauge.j-action .barre span{background:var(--beurre-vif)}
.jauge .val{font-size:13px;color:var(--encre-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-nom{display:flex;align-items:center;gap:10px}
.avatar{flex:none;width:32px;height:32px;border-radius:11px;background:linear-gradient(135deg,var(--amb-pale),var(--beurre));
  color:var(--amb-texte);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em}
.avatar.grand{width:52px;height:52px;border-radius:16px;font-size:17px}
.liste-bilans{list-style:none;margin:0;padding:0}
.liste-bilans li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--trait)}
.liste-bilans li:last-child{border-bottom:none}
.liste-bilans .corps{flex:1}
.liste-bilans .cat{font-weight:600}
.liste-bilans .nom-bilan{color:var(--encre-2);font-size:13px}
.card details.groupe{border-top:1px solid var(--trait)}
.card details.groupe:first-of-type{border-top:none}
.card details.groupe>summary{cursor:pointer;padding:11px 0;font-weight:600;color:var(--encre)}
.card details.groupe>summary:hover,.card details.groupe[open]>summary{color:var(--marque)}
.card details.groupe>summary .badge{margin-left:6px}
.card details.groupe>.table-scroll{margin:2px 0 12px}
.form-signal{margin:-6px 0 16px}
.actions-bandeau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.actions-bandeau small{flex:1;min-width:220px}

/* --- Divers ------------------------------------------------------------------------------------- */
.kv{display:grid;grid-template-columns:220px 1fr;gap:10px 16px;font-size:14px}
.kv b{color:var(--encre-3);font-weight:550}
@media (max-width:520px){.kv{grid-template-columns:1fr}.kv b{margin-bottom:-8px}}
.liste-docs{list-style:none;margin:0;padding:0}
.liste-docs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--trait)}
.liste-docs li:last-child{border-bottom:none}
.etat{display:inline-flex;align-items:center;gap:6px;font-weight:550;vertical-align:middle}
.etat-ok .icone{color:var(--menthe-vif)}
.etat-refus .icone{color:var(--corail-texte)}
.etat-attente .icone,.etat-alerte .icone{color:#C99A06}
.controle-erreur{color:var(--corail-texte)}
.controle-warn{color:var(--beurre-texte)}
.erreur{color:var(--corail-texte)}
.alerte{color:var(--beurre-texte)}
hr{border:0;border-top:1px solid var(--trait);margin:18px 0}

/* --- Connexion et choix du mot de passe ----------------------------------------------------------- */
.page-connexion{background:var(--surface)}
.connexion{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}
.connexion-marque{position:relative;overflow:hidden;color:var(--encre-2);padding:48px 56px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(250,204,223,.98),transparent 72%),
    radial-gradient(55% 45% at 0% 100%,rgba(255,236,168,.9),transparent 70%),
    radial-gradient(70% 60% at 35% 45%,rgba(206,236,253,.95),transparent 75%),
    linear-gradient(160deg,#E4EEFD,#EEF4FE)}
.connexion-marque .surtitre{display:inline-flex;align-items:center;gap:10px;color:var(--encre);font-family:var(--titres);
  font-weight:700;font-size:20px;letter-spacing:-.01em;margin:0;position:relative;z-index:1}
.connexion-marque .surtitre img{width:42px;height:42px;background:#fff;border-radius:12px;padding:5px;
  box-shadow:0 6px 16px -10px rgba(22,35,63,.4)}
.connexion-marque h1{color:var(--encre);font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-.035em;
  max-width:13ch;margin:18px 0 0;position:relative;z-index:1}
.connexion-marque .accroche{font-size:16px;color:var(--encre-2);max-width:40ch;margin:0;position:relative;z-index:1}
.connexion-points{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.connexion-points li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--encre)}
.connexion-points .pastille{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.75);box-shadow:0 4px 10px -8px rgba(22,35,63,.5)}
.connexion-points li:nth-child(1) .pastille{color:var(--bleu-texte)}
.connexion-points li:nth-child(2) .pastille{color:var(--rose-texte)}
.connexion-points li:nth-child(3) .pastille{color:var(--beurre-texte)}
.ruban{position:absolute;right:-60px;bottom:-110px;width:420px;height:440px;pointer-events:none}
.ruban span{position:absolute;bottom:0;width:96px;height:380px;border-radius:48px;transform-origin:bottom center}
.ruban span:nth-child(1){left:40px;transform:rotate(-24deg);background:linear-gradient(180deg,#FFF1BA,#F6D873)}
.ruban span:nth-child(2){left:160px;transform:rotate(20deg);background:linear-gradient(180deg,#FCE0EC,#F3B8D0)}
.ruban span:nth-child(3){left:280px;transform:rotate(-22deg);background:linear-gradient(180deg,#CBEAFD,#8CC5F5)}
.connexion-formulaire{align-self:center;justify-self:center;width:100%;max-width:400px;padding:40px 28px}
.connexion-formulaire .logo-form{height:34px;width:auto;display:block;margin:0 0 30px}
.connexion-formulaire h2{font-family:var(--titres);font-size:27px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.connexion-formulaire .accroche-form{color:var(--encre-2);margin:0 0 18px}
.connexion-formulaire .identifiant{font-weight:600;word-break:break-all;margin:2px 0 6px}
.connexion-formulaire .btn-primary{width:100%;margin-top:22px;padding:11px 16px}
.connexion-formulaire .pied{margin-top:26px;font-size:12.5px;color:var(--encre-3)}
@media (max-width:860px){
  .connexion{grid-template-columns:1fr;min-height:auto}
  .connexion-marque{padding:28px 20px 30px;gap:8px}
  .connexion-marque h1{font-size:32px;margin-top:8px}
  .connexion-points,.ruban{display:none}
  .connexion-formulaire{padding:28px 20px 48px}
}

/* --- Formulaires de contrat (éditeur complet du CFA, modification par l'entreprise) ------------- */
.editeur{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.sommaire{position:sticky;top:66px;display:flex;flex-direction:column;gap:2px;padding:14px 10px;
  background:rgba(255,255,255,.75);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre)}
.sommaire-titre{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--amb-titre);margin:2px 8px 8px}
.sommaire a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--encre-2);
  font-weight:550;font-size:13.5px;line-height:1.3}
.sommaire a:hover{background:var(--amb-tres-pale);color:var(--amb-texte);text-decoration:none}
.puce{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;
  background:var(--amb-pale);color:var(--amb-texte);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.titre-section{display:flex;align-items:center;gap:12px;font-family:var(--titres);font-size:20px;font-weight:650;
  letter-spacing:-.015em;margin:0 0 4px}
.titre-section .puce{width:32px;height:32px;border-radius:11px;font-size:14px;
  background:linear-gradient(135deg,var(--amb-pale),var(--beurre))}
.carte-cerfa{scroll-margin-top:72px;padding:24px 26px 26px}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 18px;align-items:start}
.champ{min-width:0}
.champ.large{grid-column:span 2}
.champ .aide{font-size:12.5px;line-height:1.4;color:var(--encre-3);margin-top:5px}
.sous-rubrique{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:24px 0 0;font-size:11.5px;font-weight:650;
  letter-spacing:.09em;text-transform:uppercase;color:var(--amb-texte)}
.sous-rubrique::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amb-bord),transparent)}
.grille-champs>.sous-rubrique:first-child{margin-top:12px}
.editeur .actionbar-sticky{margin-top:4px}
@media (max-width:1180px){.editeur{grid-template-columns:minmax(0,1fr)}.sommaire{display:none}}
@media (max-width:520px){.champ.large{grid-column:auto}}

/* --- Choix de l'ambiance (barre du haut) ---------------------------------------------------------- */
.choix-ambiance{display:inline-flex;align-items:center;gap:2px;margin:0;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--trait)}
.choix-ambiance button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;
  border:0;border-radius:50%;background:transparent;cursor:pointer;transition:background .15s,box-shadow .15s}
.choix-ambiance button:hover{background:#fff}
.choix-ambiance button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 2px rgba(22,35,63,.14),0 0 0 2px var(--amb-bord)}
.pastille-ambiance{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(22,35,63,.12)}
.ambiance-rose .pastille-ambiance{background:linear-gradient(135deg,#F3AFCB,#FCE6EF)}
.ambiance-bleu .pastille-ambiance{background:linear-gradient(135deg,#9CCBF3,#E1EBFC)}

/* --- École LMS : cours, contenus, dépôt intelligent, lecteur (15/09/2026) ------------------------ */
/* Partagées avec l'espace apprenti : .vignette, .grille-cours, .carte-cours, .liste-contenus, .verrou,
   .lecteur, .chip-masque, .chip-programme. Disponibilité : MENTHE (chip-fini) = visible ; GRIS = masqué ;
   BLEU CIEL = débloqué à une date. Vignettes : ROSE pour les documents (PDF, Office), bleu sinon. */
.vignette{flex:none;display:flex;align-items:center;justify-content:center;width:96px;max-width:100%;aspect-ratio:4/3;
  border-radius:var(--rayon-sm);overflow:hidden;border:1px solid var(--trait);color:var(--bleu-texte);
  background:linear-gradient(135deg,var(--ciel),var(--bleu))}
a.vignette:hover{text-decoration:none;border-color:var(--amb-bord)}
/* haut de la page (titre d'un PDF A4) plutot que son milieu, souvent blanc */
.vignette img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.vignette.large{width:100%}
.vignette-pdf,.vignette-document{color:var(--rose-texte);background:linear-gradient(135deg,var(--rose-pale),var(--rose))}
.vignette-page{color:var(--amb-texte);background:linear-gradient(135deg,var(--amb-tres-pale),var(--amb-pale))}
.grille-cours{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
@media (max-width:520px){.grille-cours{grid-template-columns:minmax(0,1fr)}}
.carte-cours{display:flex;flex-direction:column;gap:8px;min-width:0;color:inherit;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);padding:12px 12px 14px;
  transition:transform .15s,box-shadow .15s,border-color .15s}
a.carte-cours:hover{text-decoration:none;border-color:var(--amb-bord);box-shadow:var(--ombre-haute);transform:translateY(-2px)}
.carte-cours .titre-cours{font-family:var(--titres);font-size:16.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3;
  color:var(--encre);overflow-wrap:anywhere}
.carte-cours .meta{color:var(--encre-2);font-size:13px}
.carte-cours .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.carte-cours.verrou{opacity:.6;pointer-events:none;box-shadow:none}
.carte-cours.carte-masquee .vignette{filter:grayscale(.7)}
.liste-contenus{list-style:none;margin:0;padding:0}
.liste-contenus>li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--trait);scroll-margin-top:70px}
.liste-contenus>li:last-child{border-bottom:0}
.liste-contenus .corps{flex:1;min-width:0}
.liste-contenus .corps>a{color:var(--encre);font-weight:650;overflow-wrap:anywhere}
.liste-contenus .puces{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 3px}
.liste-contenus .meta{color:var(--encre-2);font-size:13px}
.liste-contenus .actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
@media (max-width:720px){
  .liste-contenus>li{flex-wrap:wrap;align-items:flex-start}
  .liste-contenus .corps{flex-basis:calc(100% - 112px)}
  .liste-contenus .actions{width:100%;justify-content:flex-start}
}
.verrou{opacity:.6}
.lecteur{margin:0}
.lecteur video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;background:#0E1526;border-radius:var(--rayon-sm)}
.lecteur iframe.pdf{display:block;width:100%;height:75vh;border:1px solid var(--trait);border-radius:var(--rayon-sm);background:#fff}
.lecteur img{display:block;width:100%;height:auto;border-radius:var(--rayon-sm)}
.lecteur-document,.lecteur-lien{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.lecteur .lecteur-lien img.apercu-lien{width:260px;max-width:100%}
.lecteur-lien .adresse{word-break:break-all}
.texte-page{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.chip .icone{vertical-align:-2px}
.chip-masque{background:#EFF1F5;color:#5A647C;border-color:#DDE1E9}
.chip-programme{background:var(--ciel);color:var(--ciel-texte);border-color:var(--ciel-bord)}
.actions-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-sm.btn-icone{padding:6px 8px}
.btn-secondary.danger{color:var(--corail-texte)}
.btn-secondary.danger:hover{border-color:var(--corail-bord);background:var(--corail);color:var(--corail-texte)}
.h2-actions{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:14px}
.h2-actions h2{margin:0}
/* dépôt intelligent : un fichier (zone de dépôt), un lien ou une page écrite */
.depot-facons{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.depot-facons{grid-template-columns:minmax(0,1fr)}}
.depot-autres>div:first-child>label{margin-top:0}
.zone-depot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0;padding:22px 16px;
  min-height:180px;text-align:center;border:2px dashed var(--trait-fort);border-radius:var(--rayon);background:var(--surface-2);
  color:var(--encre-2);font-size:14px;font-weight:550;cursor:pointer;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.zone-depot b{color:var(--encre);font-weight:650}
.zone-depot small{max-width:48ch}
.zone-depot:hover,.zone-depot.survol{border-color:var(--amb-vif);background:var(--amb-tres-pale);color:var(--amb-texte)}
.zone-depot.survol{box-shadow:var(--anneau)}
.zone-depot-icone{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;
  background:var(--amb-pale);color:var(--amb-texte)}
.zone-depot input[type=file]{width:auto;max-width:100%;margin-top:6px;background:var(--surface)}
.depot-apercu{display:flex;gap:12px;align-items:center;margin-top:10px;padding:10px 12px;border:1px solid var(--trait);
  border-radius:var(--rayon-sm);background:var(--surface)}
.depot-apercu[hidden],.depot-apercu img[hidden]{display:none}
.depot-apercu img{flex:none;width:96px;aspect-ratio:4/3;object-fit:cover;object-position:center top;border-radius:10px;border:1px solid var(--trait)}
.depot-apercu p{margin:0;font-size:13px;color:var(--encre-2);overflow-wrap:anywhere}
.depot-apercu p.erreur{color:var(--corail-texte)}
/* disponibilité : la date ne s'affiche que pour « débloqué à une date » */
.champ-dispo:has(option[value="programme"]:not(:checked)) .dispo-date{display:none}
/* cases à cocher : classes, cours et devoirs à copier */
.cases-classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px;margin:6px 0}
label.case{display:flex;align-items:flex-start;gap:8px;margin:0;padding:7px 0;font-size:14px;font-weight:550;color:var(--encre);cursor:pointer}
label.case input[type=checkbox],label.case input[type=radio]{flex:none;margin:3px 0 0}
.liste-cases{list-style:none;margin:0 0 6px;padding:0}
.liste-cases li{border-bottom:1px solid var(--trait)}
.liste-cases li:last-child{border-bottom:0}
.liste-cases label.case{padding:10px 0;align-items:center;flex-wrap:wrap}
.liste-cases .corps{flex:1;min-width:180px}
fieldset.choix-copie{margin:14px 0}
/* questions d'un questionnaire */
.question{padding:12px 0;border-bottom:1px solid var(--trait);scroll-margin-top:70px}
.question-tete{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.question-tete .corps{flex:1;min-width:220px}
.question .choix{margin:4px 0 0 18px;padding:0}
.question details.section{margin-top:8px}
/* qui voit (15/09/2026, D3) : toute la classe par défaut, ou certains groupes et apprentis */
[hidden]{display:none!important}
.carte-cours .puces{display:flex;gap:6px;flex-wrap:wrap}
.chip-classe{background:var(--surface-2);color:var(--encre-2);border-color:var(--trait)}
.chip-reserve{background:var(--rose-pale);color:var(--rose-texte);border-color:var(--rose-bord)}
/* public réservé que plus personne ne compose (groupe vidé, apprenti parti), copies hors public */
.chip-personne{background:var(--beurre);color:var(--beurre-texte);border-color:var(--beurre-bord)}
fieldset.champ-audience{margin:14px 0;min-width:0}
.audience-modes{display:flex;flex-wrap:wrap;gap:0 22px}
.audience-choix{margin:4px 0 2px;padding:8px 12px 10px;border:1px solid var(--trait);border-radius:var(--rayon-sm);background:var(--surface-2)}
.champ-audience:has(input[name=audience][value=classe]:checked) .audience-choix{display:none}
.audience-titre{margin:6px 0 0;font-size:13px;font-weight:650;color:var(--encre-2)}
.cases-audience{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:0 16px;margin:2px 0 6px}
.cases-audience label.case{padding:5px 0;overflow-wrap:anywhere}
.aide-inline{font-size:12.5px;font-weight:500;color:var(--encre-3)}
.cases-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:12px}
.liste-groupes{list-style:none;margin:0 0 10px;padding:0}
.liste-groupes>li{padding:12px 0;border-bottom:1px solid var(--trait);scroll-margin-top:70px}
.liste-groupes>li:last-child{border-bottom:0}
.groupe-tete{display:flex;gap:10px 12px;align-items:flex-start;flex-wrap:wrap}
.groupe-tete .corps{flex:1;min-width:min(200px,100%)}
.groupe-tete .meta{margin-top:4px;color:var(--encre-2);font-size:13px;overflow-wrap:anywhere}
.liste-groupes details.section{margin-top:8px}

/* --- Planning : le mois à l'écran ---------------------------------------
   Une grille de sept colonnes, une case par jour, deux demi-journées par case.
   Aucune bibliothèque : la CSP n'autorise que nos propres fichiers, et un
   calendrier est une grille — pas un composant. */
.cal-tete{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:12px}
.cal-titre{font-size:17px;font-weight:650;color:var(--encre);text-transform:capitalize;margin:0}
.cal-nav{display:flex;gap:6px;align-items:center}
.cal-jours,.cal-semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-jours{margin-bottom:6px}
.cal-jours>div{font-size:12px;font-weight:650;color:var(--encre-3);text-align:center;
  text-transform:uppercase;letter-spacing:.04em}
.cal-semaine{margin-bottom:6px}
.cal-case{min-height:96px;border:1px solid var(--trait);border-radius:12px;background:var(--surface);
  padding:6px;display:flex;flex-direction:column;gap:4px}
.cal-case.hors-mois{opacity:.45}
.cal-case.week-end{background:var(--surface-2)}
.cal-case.aujourdhui{border-color:var(--amb-bord);box-shadow:0 0 0 2px var(--amb-pale)}
.cal-num{font-size:12.5px;font-weight:650;color:var(--encre-2);display:flex;justify-content:space-between;
  align-items:center;gap:4px}
.cal-num .cal-ajout{opacity:0;font-size:11px;text-decoration:none;color:var(--amb-texte);
  border:1px solid var(--amb-bord);border-radius:999px;padding:0 6px;line-height:16px}
.cal-case:hover .cal-ajout,.cal-case:focus-within .cal-ajout{opacity:1}
.cal-demi{display:flex;flex-direction:column;gap:3px}
.cal-seance{display:block;font-size:12px;line-height:1.25;padding:3px 6px;border-radius:8px;
  border:1px solid var(--ciel-bord);background:var(--ciel);color:var(--ciel-texte);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-seance:hover{filter:brightness(.97)}
.cal-seance.pm{border-color:var(--bleu-bord);background:var(--bleu);color:var(--bleu-texte)}
.cal-seance.annulee{border-color:var(--corail-bord);background:var(--corail);color:var(--corail-texte);
  text-decoration:line-through}
.cal-seance.sans-formateur{border-color:var(--beurre-bord);background:var(--beurre);color:var(--beurre-texte)}
.cal-vide{font-size:11.5px;color:var(--encre-3);text-decoration:none;border:1px dashed var(--trait);
  border-radius:8px;padding:2px 6px;text-align:center}
.cal-vide:hover{border-color:var(--amb-bord);color:var(--amb-texte)}
.cal-legende{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12px;color:var(--encre-3);margin-top:8px}
@media (max-width:860px){
  .cal-case{min-height:76px}
  .cal-seance{white-space:normal}
}
@media (max-width:620px){
  /* sur un téléphone, sept colonnes deviennent illisibles : une ligne par jour */
  .cal-jours{display:none}
  .cal-semaine{grid-template-columns:minmax(0,1fr)}
  .cal-case{min-height:0}
  .cal-case.hors-mois{display:none}
  .cal-num::after{content:attr(data-jour);font-weight:500;color:var(--encre-3)}
}
@media print{
  .cal-nav,.cal-ajout,.cal-vide{display:none}
  .cal-case{break-inside:avoid}
}

/* --- Planning : l'année entière, de janvier à janvier --------------------- */
.cal-annee{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px}
.cal-mois h3{margin:0 0 6px;font-size:13.5px;font-weight:650;text-transform:capitalize;
  display:flex;align-items:center;gap:6px}
.cal-mois h3 a{color:var(--encre)}
.cal-jours.mini{gap:2px;margin-bottom:2px}
.cal-jours.mini>div{font-size:10px;letter-spacing:0}
.cal-semaine.mini{gap:2px;margin-bottom:2px}
.cal-jour{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:0;
  border-radius:6px;font-size:11px;color:var(--encre-2);background:var(--surface);
  border:1px solid var(--trait);text-decoration:none}
.cal-jour:hover{border-color:var(--amb-bord);color:var(--amb-texte);text-decoration:none}
.cal-jour.hors-mois{visibility:hidden}
.cal-jour.occupe{background:var(--ciel);border-color:var(--ciel-bord);color:var(--ciel-texte);
  font-weight:650}
.cal-jour.aujourdhui{box-shadow:0 0 0 2px var(--amb-pale);border-color:var(--amb-bord)}
@media print{.cal-annee{grid-template-columns:repeat(3,1fr)}}

/* --- Planning : les jours fériés ------------------------------------------
   Un REPÈRE, pas une règle : le centre programme un cours le 25 décembre s'il
   le veut (décision du client du 17/09/2026). D'où un fond discret et un nom,
   sans le moindre blocage ni avertissement.
   En LILAS depuis le 21/09/2026 : en beurre, le férié se confondait avec la pastille
   d'une séance sans formateur, qui est juste à côté dans la même case. */
.cal-case.ferie{background:var(--lilas-pale)}
.cal-case.ferie .cal-num{color:var(--lilas-texte)}
.cal-ferie{font-weight:500;font-size:10.5px;color:var(--lilas-texte);background:var(--lilas);
  border:1px solid var(--lilas-bord);border-radius:999px;padding:0 6px;margin-left:4px;
  white-space:nowrap}
.cal-jour.ferie{background:var(--lilas);border-color:var(--lilas-bord);color:var(--lilas-texte)}
.cal-jour.ferie.occupe{background:var(--ciel);border-color:var(--lilas-vif);color:var(--ciel-texte)}
.cal-pastille-ferie{display:inline-block;width:14px;height:12px;border-radius:4px;
  background:var(--lilas);border:1px solid var(--lilas-bord);vertical-align:-1px}
@media (max-width:620px){.cal-ferie{display:inline-block;margin:2px 0 0}}

/* --- Planning : les fermetures du centre -----------------------------------
   Vacances, ponts, congés, saisis par le centre (ecole/fermetures.py). Même
   statut qu'un jour férié : un REPÈRE, jamais une règle. Des hachures grises
   plutôt qu'une couleur — une fermeture n'est ni une alerte ni une réussite,
   et le gris laisse les pastilles de séances lisibles par-dessus. */
.cal-case.fermeture{background:repeating-linear-gradient(135deg,
  var(--surface-2) 0 7px,var(--trait) 7px 8px)}
.cal-case.fermeture .cal-num{color:var(--encre-2)}
/* férié ET fermé (le 25 décembre dans les vacances) : le lilas du férié garde
   la main, les hachures passent par-dessus pour dire les deux. */
.cal-case.ferie.fermeture{background:repeating-linear-gradient(135deg,
  var(--lilas-pale) 0 7px,var(--lilas-bord) 7px 8px)}
.cal-fermeture{font-weight:500;font-size:10.5px;color:var(--encre-2);background:var(--surface);
  border:1px solid var(--trait-fort);border-radius:999px;padding:0 6px;margin-left:4px;
  white-space:nowrap}
/* Le nom d'une fermeture est libre (« Fermeture annuelle du centre de formation »).
   Le gabarit le raccourcit a 22 caracteres et garde le nom entier en infobulle ; ici,
   on fait en sorte que ce qui depasse encore se termine par « … » DANS la case, au
   lieu de sortir de la grille (qui decalerait les sept colonnes) ou d'etre tranche
   net au milieu d'un mot. Il faut les trois : `overflow` sur la case, un conteneur
   compressible (`min-width:0`, sinon un element flex ne descend jamais sous la
   largeur de son contenu), et l'ellipse sur la pastille elle-meme. */
.cal-case .cal-num{overflow:hidden}
.cal-case .cal-num>span:first-child{min-width:0;display:flex;align-items:center}
/* Quand les deux repères se partagent une case (le 25 décembre dans les vacances),
   c'est la fermeture qui cède : le nom d'un férié est court et connu d'avance, celui
   d'une fermeture est libre. Sans ce `flex-shrink:0`, « Noël » se réduisait à « N… ». */
.cal-ferie{flex:0 0 auto}
.cal-fermeture{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cal-jour.fermeture{background:var(--surface-2);border-color:var(--trait-fort);color:var(--encre-2)}
.cal-jour.fermeture.occupe{background:var(--ciel);border-color:var(--trait-fort);color:var(--ciel-texte)}
.cal-pastille-fermeture{display:inline-block;width:14px;height:12px;border-radius:4px;
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 3px,var(--trait) 3px 4px);
  border:1px solid var(--trait-fort);vertical-align:-1px}
@media (max-width:620px){.cal-fermeture{display:inline-block;margin:2px 0 0}}
/* À l'impression, les hachures mangent l'encre et grisent le texte : on les retire.
   Le nom de la fermeture reste écrit dans la case — c'est lui qui porte l'information
   sur une feuille, pas le fond. */
@media print{
  .cal-case.fermeture,.cal-case.ferie.fermeture,.cal-jour.fermeture{background:#fff}
}

/* --- Espace apprenant : son tableau de bord (17/09/2026) -------------------
   Refonte demandée par le client, inspirée d'un tableau de bord : on entre par
   ce qui est attendu de lui, puis où il en est, puis QUI appeler. Les tuiles
   réutilisent .grille-stats / .stat de l'accueil du centre — une seule mécanique
   de chiffres clés dans toute la plateforme ; seule la première, à la marque,
   est propre à cet écran. */
.entete-eleve{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 22px}
.entete-eleve-texte{min-width:240px}
.entete-eleve-texte h1{margin:0}
.entete-eleve-texte .sous-titre{margin:4px 0 0}
.entete-eleve-puces{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.entete-eleve-puces .chip{background:var(--surface);border-color:var(--trait-fort);padding:5px 13px}
.entete-eleve-puces .chip .icone{color:var(--encre-3)}
.avatar-eleve{flex:none;width:58px;height:58px;border-radius:20px;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--titres);font-size:21px;font-weight:700;letter-spacing:-.01em;
  color:#7A3558;background:linear-gradient(135deg,var(--rose),var(--beurre));
  box-shadow:0 1px 2px rgba(22,35,63,.06),0 10px 22px -14px rgba(22,35,63,.5)}
:root[data-theme="bleu"] .avatar-eleve{background:linear-gradient(135deg,var(--ciel),var(--bleu));color:var(--marque)}

/* la tuile de tête : la seule surface pleine de la page, pour que l'œil s'y pose */
.stat-marque{background:linear-gradient(145deg,var(--marque-vif),var(--marque-fonce));border-color:var(--marque-fonce)}
.stat-marque::before{content:"";position:absolute;top:-38px;right:-30px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.10)}
.stat-marque .libelle{color:rgba(255,255,255,.82)}
.stat-marque .valeur{color:#fff}
.stat-marque .valeur .sur{color:rgba(255,255,255,.7)}
.stat-marque .sous{color:rgba(255,255,255,.78)}
.stat .valeur.texte{font-family:var(--texte);font-size:19px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.jauge-tuile{height:6px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.jauge-tuile span{display:block;height:100%;border-radius:3px;background:#fff}

/* deux colonnes : ce qui vient, puis qui appeler (une seule colonne sur mobile) */
.duo-eleve{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 18px;align-items:start}
@media (max-width:960px){.duo-eleve{grid-template-columns:minmax(0,1fr)}}

/* prochaines séances */
.liste-seances{list-style:none;margin:0;padding:0}
.liste-seances li{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--trait)}
.liste-seances li:first-child{padding-top:0}
.liste-seances li:last-child{border-bottom:none;padding-bottom:0}
.liste-seances .quand{min-width:150px}
.liste-seances .quand small{display:block;color:var(--encre-2);font-variant-numeric:tabular-nums}
.liste-seances .quoi{flex:1;min-width:190px}
.liste-seances .quoi .aide{margin-top:1px}
.seance-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Sur un telephone, la ligne s'empile : quand / quoi / boutons, chacun sa ligne.
   `flex:1 1 100%` et non `width:100%` : sur un element flexible, c'est la base qui
   decide, et un `flex:1` (base 0) laissait le titre s'ecraser en colonne de trois
   mots a cote des boutons (constate a 420 px). */
@media (max-width:560px){
  .liste-seances li{gap:8px}
  .liste-seances .quand,.liste-seances .quoi{flex:1 1 100%;min-width:0}
  .liste-seances .quand{display:flex;gap:8px;align-items:baseline}
  .liste-seances .quand small{display:inline}
  .seance-actions{width:100%}
}
.lien-suite{margin:14px 0 0;font-weight:600}
.lien-suite .icone{vertical-align:-2px}

/* heures signées, mois par mois : des barres, pas un graphique — la valeur est écrite */
.barres-mois{display:flex;align-items:flex-end;gap:10px;height:130px;margin:18px 0 0}
.barre-mois{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.barre-mois .tige{flex:1;width:100%;max-width:46px;display:flex;align-items:flex-end;
  background:var(--surface-2);border-radius:8px;overflow:hidden}
.barre-mois .tige span{display:block;width:100%;border-radius:8px;
  background:linear-gradient(180deg,var(--marque-vif),var(--marque))}
.barre-mois .valeur-mois{font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}
.barre-mois .nom-mois{font-size:12px;color:var(--encre-2)}
.total-heures{margin:14px 0 0;color:var(--encre-2)}

/* qui appeler */
.groupe-contacts+.groupe-contacts{margin-top:18px}
.groupe-titre{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre-3);margin-bottom:8px}
.contact{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--trait)}
.groupe-contacts .contact:first-of-type{border-top:none;padding-top:0}
.contact .rond{flex:none;width:38px;height:38px;border-radius:13px;display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:700;background:var(--amb-pale);color:var(--amb-texte)}
.contact-corps{min-width:0;flex:1}
.contact-nom{font-weight:650;line-height:1.3}
.contact-liens{display:flex;flex-direction:column;gap:2px;margin-top:5px}
.contact-liens a{display:inline-flex;align-items:center;gap:6px;font-size:13px;word-break:break-word}
.contact-liens .icone{flex:none;color:var(--encre-3)}

/* mon contrat */
.fiche-contrat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0}
.fiche-contrat dt{color:var(--encre-2);font-size:13px}
.fiche-contrat dd{margin:0;font-weight:650;min-width:0;overflow-wrap:anywhere}

/* mes documents */
.liste-documents{list-style:none;margin:0;padding:0}
.liste-documents a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rayon-sm);
  color:var(--encre);border:1px solid var(--trait);margin-bottom:8px;transition:border-color .15s,background .15s}
.liste-documents a:hover{text-decoration:none;border-color:var(--amb-bord);background:var(--amb-tres-pale)}
.liste-documents a span{flex:1;min-width:0;font-weight:550;overflow-wrap:anywhere}
.liste-documents a .icone{color:var(--encre-3)}
.liste-documents li:last-child a{margin-bottom:0}

/* paramétrage des contacts, côté centre */
.bloc-contact{border:1px solid var(--trait);border-radius:var(--rayon-sm);padding:14px 16px;margin-bottom:12px;
  background:var(--surface-2)}
.bloc-contact-tete{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.bloc-contact-tete b{font-size:15px}
.bloc-contact .row{margin-bottom:0}
.bloc-contact>.aide{margin-top:8px}

/* Modules d'une classe (« Modules et dates ») : une tuile par module, sa couleur
   reprise partout ensuite — pastille du calendrier, plus tard pastille d'inscription.
   Palette FERMÉE (models.COULEURS_BLOC) : les six pastels définis plus haut, pour que
   l'ambiance du centre suive et qu'aucune tuile ne devienne illisible. */
.bloc-tuile{border:1px solid var(--trait);border-left:5px solid var(--trait-fort);
  border-radius:var(--rayon-sm);padding:14px 16px;margin-bottom:12px;background:var(--surface-2)}
.bloc-tete{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.bloc-tete>div:first-child{flex:1;min-width:0}
.bloc-tete h3{margin:0;font-size:16px;overflow-wrap:anywhere}
.bloc-modalite{margin:0 0 2px;font-size:12px;font-weight:650;letter-spacing:.02em;
  text-transform:uppercase;color:var(--encre-3)}
.bloc-chiffres{margin:0 0 2px;font-size:15px}
.bloc-chiffres b{font-weight:700}
.bloc-ecart{color:var(--beurre-texte);font-weight:650}
.bloc-financement{display:flex;align-items:center;gap:6px;margin:0 0 12px;
  color:var(--encre-2);font-size:13px}
.bloc-reglages{margin-top:10px}
.bloc-reglages .row:last-of-type{margin-bottom:8px}
.bloc-bleu{border-left-color:var(--bleu-bord);background:var(--bleu)}
.bloc-ciel{border-left-color:var(--ciel-bord);background:var(--ciel)}
.bloc-rose{border-left-color:var(--rose-bord);background:var(--rose)}
.bloc-beurre{border-left-color:var(--beurre-bord);background:var(--beurre)}
.bloc-menthe{border-left-color:var(--menthe-bord);background:var(--menthe)}
.bloc-corail{border-left-color:var(--corail-bord);background:var(--corail)}
.bloc-bleu .bloc-modalite{color:var(--bleu-texte)}
.bloc-ciel .bloc-modalite{color:var(--ciel-texte)}
.bloc-rose .bloc-modalite{color:var(--rose-texte)}
.bloc-beurre .bloc-modalite{color:var(--beurre-texte)}
.bloc-menthe .bloc-modalite{color:var(--menthe-texte)}
.bloc-corail .bloc-modalite{color:var(--corail-texte)}

/* Éditeur de dates d'un module : à gauche on sème, à droite on règle. Deux colonnes
   sur grand écran, l'une sous l'autre sur téléphone (le semeur d'abord : c'est par lui
   qu'on commence). */
.colonnes-dates{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
@media (max-width:900px){.colonnes-dates{grid-template-columns:minmax(0,1fr)}}
.creneau-carte{border:1px solid var(--trait);border-radius:var(--rayon-sm);padding:12px 14px;
  margin-bottom:10px;background:var(--surface-2)}
.creneau-tete{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.creneau-tete>span:first-child{flex:1;min-width:0}
.creneau-carte .row{margin-bottom:6px}
.creneau-carte .row:last-of-type{margin-bottom:0}
/* Verrouillé = signé, ou signature déjà ouverte : lecture seule, et on dit pourquoi. */
.creneau-verrouille{background:var(--surface);border-style:dashed;opacity:.85}
/* Menu « Appliquer à… » d'une carte de créneau : discret, à droite de son groupe de
   champs, comme les « options de propagation » de Digiforma. */
.propager{flex:2;min-width:160px}
.propager label{color:var(--encre-3);font-size:12px}
/* Pastille d'un module, à la couleur du module : rubrique Intervenants, et plus tard
   la grille « quel apprenant suit quel module ». */
.puce-bloc{display:inline-block;padding:1px 8px;margin:1px 2px 1px 0;border-radius:999px;
  border:1px solid var(--trait-fort);font-size:12px;font-weight:600;white-space:nowrap}
.puce-bloc.bloc-bleu{border-color:var(--bleu-bord);color:var(--bleu-texte)}
.puce-bloc.bloc-ciel{border-color:var(--ciel-bord);color:var(--ciel-texte)}
.puce-bloc.bloc-rose{border-color:var(--rose-bord);color:var(--rose-texte)}
.puce-bloc.bloc-beurre{border-color:var(--beurre-bord);color:var(--beurre-texte)}
.puce-bloc.bloc-menthe{border-color:var(--menthe-bord);color:var(--menthe-texte)}
.puce-bloc.bloc-corail{border-color:var(--corail-bord);color:var(--corail-texte)}
.ligne-alerte>td:first-child{border-left:3px solid var(--beurre-vif)}
/* Grille « qui suit quel module » : une pastille par apprenant et par module, cliquable.
   Coche = il suit. Un module sans aucune inscription vaut pour toute la classe, et ses
   pastilles sont donc toutes cochées. */
.grille-modules th{white-space:nowrap}
.pastille-module{width:30px;height:30px;border-radius:999px;border:1px solid var(--trait-fort);
  background:var(--surface);cursor:pointer;font-weight:700;line-height:1;padding:0}
.pastille-module:hover{border-color:var(--marque)}
.pastille-module.pastille-vide{color:var(--encre-3)}
.pastille-module.bloc-bleu{background:var(--bleu);border-color:var(--bleu-bord);color:var(--bleu-texte)}
.pastille-module.bloc-ciel{background:var(--ciel);border-color:var(--ciel-bord);color:var(--ciel-texte)}
.pastille-module.bloc-rose{background:var(--rose);border-color:var(--rose-bord);color:var(--rose-texte)}
.pastille-module.bloc-beurre{background:var(--beurre);border-color:var(--beurre-bord);color:var(--beurre-texte)}
.pastille-module.bloc-menthe{background:var(--menthe);border-color:var(--menthe-bord);color:var(--menthe-texte)}
.pastille-module.bloc-corail{background:var(--corail);border-color:var(--corail-bord);color:var(--corail-texte)}

/* --- Grille de rémunération de référence (notice CERFA) ------------------------------- */
.grille-salaire table{font-size:13px}
.grille-salaire th[scope="row"]{white-space:nowrap}
.grille-salaire td{font-weight:600;white-space:nowrap}
.grille-salaire td small{display:block;font-weight:400;color:var(--encre-3)}
.grille-salaire [data-tranche].applicable{background:var(--amb-tres-pale);color:var(--amb-texte)}
.grille-salaire th[data-tranche].applicable{box-shadow:inset 0 -2px 0 var(--amb-vif)}

/* --- Composeur de convention : les articles à gauche, le document à droite ----------- */
.composeur{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.composeur .colonne-apercu{position:sticky;top:66px}
.composeur .apercu{max-height:calc(100vh - 150px);overflow:auto;background:#fff;
  border:1px solid var(--trait);border-radius:var(--rayon);padding:24px 28px}
.composeur .outils-article{display:flex;gap:6px;align-items:center;margin-top:10px}
/* « Article 1er » ne doit pas se couper en deux lignes : c'est un repère, il se lit d'un bloc */
.composeur details.section>summary b{white-space:nowrap}
@media (max-width:1100px){.composeur{grid-template-columns:minmax(0,1fr)}
  .composeur .colonne-apercu{position:static}.composeur .apercu{max-height:none}}

/* Le document tel qu'il sera imprimé : mêmes règles que le .docx (services/convention_plan.py),
   volontairement en dur — c'est un papier, pas une page de l'interface. */
.apercu .c-titre{font-size:15px;text-align:center;font-weight:700;margin:0 0 12px;letter-spacing:0}
.apercu .c-article{font-size:12.5px;color:#1F3FA0;text-decoration:underline;margin:14px 0 4px}
.apercu .c-sous{font-size:12px;text-decoration:underline;margin:10px 0 3px}
.apercu .c-para{font-size:12px;line-height:1.45;margin:0 0 6px;color:#111}
.apercu .c-gras{font-weight:700}
.apercu .c-ital{font-style:italic}
.apercu .c-bleu{color:#1F3FA0;font-weight:700}
.apercu .c-droite{text-align:right}
.apercu .c-centre{text-align:center}
.apercu .c-vide{height:7px;margin:0}
.apercu .c-puces{font-size:12px;line-height:1.45;margin:0 0 6px;padding-left:20px;color:#111}
.apercu .c-tableau{width:100%;border-collapse:collapse;font-size:10.5px;margin:6px 0}
.apercu .c-tableau th,.apercu .c-tableau td{border:1px solid #8c97ab;padding:4px 6px;
  text-align:left;vertical-align:top}
.apercu .c-saut{border-top:1px dashed var(--trait-fort);margin:20px 0}
.apercu .c-signatures{display:flex;gap:16px;font-size:12px;margin-top:8px}
.apercu .c-signatures>div{flex:1}
.apercu .c-espace{height:52px;margin:0}
.apercu .c-cachet{color:var(--encre-3)}
.apercu .c-logo img{max-width:150px;height:auto}

/* ==================================================================== BIBLIOTHÈQUE
   Les fiches de ressources viennent du kit d'écriture : leurs schémas sont des SVG
   dont toutes les couleurs passent par des variables CSS. On redéfinit ces variables
   ici, en fonction de la palette de la plateforme — le dessin suit l'ambiance du
   centre (rose ou bleue) sans avoir été redessiné. Ajouté le 21/09/2026. */
.biblio, .fiche, .apercu-dessine{
  --ciel-f:var(--ciel);     --ciel-b:var(--ciel-bord);     --ciel-t:var(--ciel-texte);
  --beurre-f:var(--beurre); --beurre-b:var(--beurre-bord); --beurre-t:var(--beurre-texte);
  --menthe-f:var(--menthe); --menthe-b:var(--menthe-bord); --menthe-t:var(--menthe-texte);
  --corail-f:var(--corail); --corail-b:var(--corail-bord); --corail-t:var(--corail-texte);
  --bleu-f:var(--bleu);     --bleu-b:var(--bleu-bord);     --bleu-t:var(--bleu-texte);
  --rose-f:var(--rose);     --rose-b:var(--rose-bord);     --rose-t:var(--rose-texte);
  --ok:var(--menthe-texte);     --ok-f:var(--menthe);  --ok-b:var(--menthe-bord);
  --attente:var(--beurre-texte);--attente-f:var(--beurre);--attente-b:var(--beurre-bord);
  --alerte:var(--corail-texte); --alerte-f:var(--corail);--alerte-b:var(--corail-bord);
  --info-f:var(--bleu);
  --doc:var(--rose-texte);   --doc-f:var(--rose);  --doc-b:var(--rose-bord);
  --cours:var(--ciel-texte); --cours-f:var(--ciel);--cours-b:var(--ciel-bord);
  --marque-clair:#EAF1F8;
  /* Rayons PROPRES aux dessins : ils ont été tracés pour ces valeurs. Le rayon de
     l'interface (--rayon, 18px) écraserait les angles d'un schéma de 400 px. */
  --r:10px; --r-sm:7px; --r-xs:5px; --t:180ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- Catalogue : les familles et leurs cartes ---------- */
.biblio-famille{margin:0 0 26px}
.biblio-famille > h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.05rem}
.biblio-famille > h2 .compte{color:var(--encre-3);font-size:.8rem;font-weight:500}
.biblio-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.biblio-carte{display:flex;flex-direction:column;gap:8px;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon-sm);padding:16px 17px;
  transition:border-color var(--t),box-shadow var(--t);color:inherit;text-decoration:none}
.biblio-carte:hover{border-color:var(--amb-bord);box-shadow:var(--ombre)}
.biblio-carte .bulle{width:34px;height:34px;border-radius:var(--rayon-sm);display:grid;
  place-items:center;background:var(--amb-tres-pale);color:var(--amb-texte);flex:0 0 auto}
.biblio-carte b{color:var(--encre);font-size:.95rem;line-height:1.35}
.biblio-carte p{margin:0;color:var(--encre-2);font-size:.86rem;line-height:1.5}
.biblio-carte .pied{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  color:var(--encre-3);font-size:.78rem;padding-top:4px}
.biblio-carte.masquee{opacity:.55;border-style:dashed}

/* ---------- La fiche ---------- */
.fiche{max-width:none}
.fiche-entete{display:grid;grid-template-columns:1fr 280px;gap:26px;align-items:center;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:22px 24px;margin-bottom:20px;overflow:hidden}
.fiche-entete h1{margin:.1em 0 .3em;font-size:1.5rem}
.fiche-entete .sous{color:var(--encre-2);margin:0;font-size:.95rem;max-width:58ch}
.fiche-entete .illu{min-width:0}
.fiche-entete .illu svg{border-radius:var(--rayon-sm);display:block;width:100%;height:auto}
@media (max-width:900px){.fiche-entete{grid-template-columns:1fr;padding:18px}
  .fiche-entete .illu{display:none}}
.fiche-programme{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.fiche-programme li{background:var(--surface-2);border:1px solid var(--trait);
  border-radius:999px;padding:3px 11px;font-size:.78rem;color:var(--encre-2)}
.fiche section{margin:0 0 26px}
.fiche section > h2{font-size:1.08rem;margin:0 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--trait)}
.fiche p{font-size:.94rem;line-height:1.65;color:var(--encre-2);margin:0 0 14px}

/* ---------- Encadrés (4 registres) ---------- */
.fiche .encart{border:1px solid var(--trait);border-left:3px solid var(--marque);
  border-radius:var(--rayon-sm);padding:13px 16px;margin:0 0 16px;background:var(--surface-2)}
.fiche .encart > .tete{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.fiche .encart h4{margin:0;font-size:.86rem;font-weight:650;color:var(--encre)}
.fiche .encart .icone{color:var(--marque);flex:0 0 auto}
.fiche .encart p{margin:0;font-size:.915rem;color:var(--encre-2)}
.fiche .encart ul{margin:.4em 0 0;padding-left:18px;font-size:.915rem;color:var(--encre-2)}
.fiche .e-action{background:var(--beurre);border-color:var(--beurre-bord);border-left-color:var(--beurre-vif)}
.fiche .e-action h4,.fiche .e-action .icone{color:var(--beurre-texte)}
.fiche .e-action p,.fiche .e-action ul{color:#6B4D07}
.fiche .e-alerte{background:var(--corail);border-color:var(--corail-bord);border-left-color:var(--corail-texte)}
.fiche .e-alerte h4,.fiche .e-alerte .icone{color:var(--corail-texte)}
.fiche .e-alerte p,.fiche .e-alerte ul{color:#8E241A}
.fiche .e-cle{background:var(--menthe);border-color:var(--menthe-bord);border-left-color:var(--menthe-texte)}
.fiche .e-cle h4,.fiche .e-cle .icone{color:var(--menthe-texte)}
.fiche .e-cle p,.fiche .e-cle ul{color:#155A36}

/* ---------- Tableaux ---------- */
.fiche .tbl-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--trait);
  border-radius:var(--rayon-sm);background:var(--surface)}
.fiche table.tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:.885rem}
.fiche table.tbl caption{text-align:left;padding:13px 16px 10px;font-weight:600;
  color:var(--encre);font-size:.93rem}
.fiche table.tbl th,.fiche table.tbl td{padding:9px 16px;text-align:left;
  border-top:1px solid var(--trait);vertical-align:top}
.fiche table.tbl thead th{background:var(--surface-2);color:var(--encre-2);font-size:.71rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;border-top:0}
.fiche table.tbl td{color:var(--encre-2)}
.fiche table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--encre);white-space:nowrap}
.fiche table.tbl td.fort{font-weight:580;color:var(--encre)}
.fiche table.tbl tr.vedette td{background:var(--beurre)}
.fiche .tbl-note{padding:10px 16px;border-top:1px solid var(--trait);color:var(--encre-3);
  font-size:.8rem;background:var(--surface-2);line-height:1.55}

/* ---------- Schémas ---------- */
.fiche figure.fig{margin:0 0 18px;border:1px solid var(--trait);border-radius:var(--rayon-sm);
  background:var(--surface);padding:18px;overflow-x:auto}
.fiche figure.fig svg{min-width:440px}
.fiche figure.fig figcaption{margin-top:12px;color:var(--encre-3);font-size:.815rem;
  text-align:center;line-height:1.55}

/* ---------- Chiffres clés ---------- */
.fiche .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px;margin:0 0 18px}
.fiche .chiffres > div{background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--rayon-sm);padding:14px 15px}
.fiche .chiffres .n{display:block;font-family:var(--titres);font-size:1.38rem;font-weight:700;
  color:var(--marque);line-height:1.15;font-variant-numeric:tabular-nums}
.fiche .chiffres .l{display:block;color:var(--encre-2);font-size:.795rem;margin-top:3px;line-height:1.45}

/* ---------- Comparatif ---------- */
.fiche .compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:12px;margin:0 0 18px}
.fiche .compare .col{border:1px solid var(--trait);border-radius:var(--rayon-sm);
  background:var(--surface);overflow:hidden}
.fiche .compare .col > h5{margin:0;padding:11px 15px;font-size:.875rem;font-weight:640;
  color:var(--encre);background:var(--surface-2);border-bottom:1px solid var(--trait);
  display:flex;align-items:center;gap:7px}
.fiche .compare .col dl{margin:0;padding:4px 15px 13px}
.fiche .compare .col dt{font-size:.69rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--encre-3);font-weight:700;margin-top:11px}
.fiche .compare .col dd{margin:2px 0 0;font-size:.875rem;color:var(--encre-2)}
.fiche .compare .c-oui > h5{color:var(--menthe-texte);background:var(--menthe);border-bottom-color:var(--menthe-bord)}
.fiche .compare .c-non > h5{color:var(--corail-texte);background:var(--corail);border-bottom-color:var(--corail-bord)}

/* ---------- Étapes ---------- */
.fiche ol.etapes-det{list-style:none;counter-reset:e;padding:0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:2px}
.fiche ol.etapes-det > li{counter-increment:e;display:flex;gap:14px;padding:13px 4px;
  border-top:1px solid var(--trait)}
.fiche ol.etapes-det > li:first-child{border-top:0;padding-top:4px}
.fiche ol.etapes-det > li::before{content:counter(e);flex:0 0 auto;width:23px;height:23px;
  border-radius:50%;background:var(--marque-clair);color:var(--marque);font-weight:700;
  font-size:.75rem;display:grid;place-items:center;margin-top:1px}
.fiche ol.etapes-det b{display:block;color:var(--encre);font-size:.915rem;
  font-weight:600;margin-bottom:2px}
.fiche ol.etapes-det span{color:var(--encre-2);font-size:.875rem;line-height:1.55}

/* ---------- Questions-réponses ---------- */
.fiche .faq{margin:0 0 18px;border:1px solid var(--trait);border-radius:var(--rayon-sm);
  overflow:hidden;background:var(--surface)}
.fiche .faq details{border-top:1px solid var(--trait)}
.fiche .faq details:first-child{border-top:0}
.fiche .faq summary{cursor:pointer;padding:12px 16px;font-weight:580;font-size:.9rem;
  color:var(--encre);list-style:none;display:flex;align-items:center;gap:10px}
.fiche .faq summary::-webkit-details-marker{display:none}
.fiche .faq summary:hover{background:var(--survol)}
.fiche .faq summary .icone{color:var(--encre-3);margin-left:auto;transition:transform var(--t)}
.fiche .faq details[open] summary .icone{transform:rotate(180deg);color:var(--marque)}
.fiche .faq .rep{padding:0 16px 14px;color:var(--encre-2);font-size:.885rem;line-height:1.6}
.fiche .faq .rep p{margin:0 0 .7em}
.fiche .faq .rep p:last-child{margin:0}

/* ---------- Listes ---------- */
.fiche ul.puces{margin:0 0 18px;padding-left:19px;color:var(--encre-2);font-size:.92rem}
.fiche ul.puces li{margin-bottom:6px;line-height:1.6}

/* ---------- Cas chiffré ---------- */
.fiche .cas{display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:start;
  background:var(--surface);border:1px solid var(--trait);border-left:3px solid var(--marque-vif);
  border-radius:var(--rayon-sm);padding:16px 18px;margin:0 0 18px}
.fiche .cas .port{width:62px;border-radius:50%;overflow:hidden}
.fiche .cas .port svg{display:block;width:100%;height:auto}
.fiche .cas .etiquette{display:inline-block;background:var(--amb-tres-pale);color:var(--amb-texte);
  border-radius:999px;padding:2px 10px;font-size:.7rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase}
.fiche .cas .qui{font-weight:620;color:var(--encre);font-size:.925rem;margin:6px 0 2px}
.fiche .cas .sit{color:var(--encre-2);font-size:.875rem;margin:0 0 12px;line-height:1.55}
.fiche .cas dl{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:0 0 12px;font-size:.865rem}
.fiche .cas dt{color:var(--encre-3);font-weight:660;font-size:.685rem;text-transform:uppercase;
  letter-spacing:.06em;padding-top:2px}
.fiche .cas dd{margin:0;color:var(--encre-2)}
.fiche .cas .concl{background:var(--surface-2);border:1px solid var(--trait);color:var(--encre-2);
  border-radius:var(--rayon-sm);padding:10px 13px;font-size:.875rem;margin:0;line-height:1.55}
@media (max-width:620px){.fiche .cas{grid-template-columns:1fr}.fiche .cas .port{width:52px}}

/* ---------- À retenir, sources, documents ---------- */
.fiche-retenir{background:var(--menthe);border:1px solid var(--menthe-bord);
  border-radius:var(--rayon);padding:18px 22px;margin:0 0 22px}
.fiche-retenir h2{margin:0 0 10px;font-size:1rem;color:var(--menthe-texte);
  display:flex;align-items:center;gap:8px}
.fiche-retenir ul{margin:0;padding-left:19px;color:#155A36;font-size:.92rem}
.fiche-retenir li{margin-bottom:6px;line-height:1.6}
.biblio-liens{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--rayon-sm);overflow:hidden;margin:0 0 22px}
/* Alignement en HAUT : une entrée tient sur trois lignes (titre, éditeur, description)
   et une icône centrée verticalement se retrouvait au milieu du paragraphe, détachée
   du titre qu'elle désigne. */
.biblio-liens a{display:flex;gap:12px;align-items:flex-start;padding:11px 15px;
  background:var(--surface);text-decoration:none}
.biblio-liens a:hover{background:var(--survol)}
/* ui.icon pose .icone sur CHAQUE icône de la ligne : sans le `:last-child`, l'icône de
   tête recevait elle aussi margin-left:auto, l'espace libre se partageait entre les deux
   et chaque ligne démarrait à un endroit différent selon la longueur de son texte. */
.biblio-liens a > .icone{color:var(--encre-3);flex:0 0 auto;margin-top:2px}
.biblio-liens a > .icone:last-child{margin-left:auto}
.biblio-liens a > span{flex:1 1 auto;min-width:0}
.biblio-liens b{color:var(--encre);font-size:.9rem;font-weight:580;display:block}
.biblio-liens span{color:var(--encre-2);font-size:.83rem;display:block;line-height:1.45}
.biblio-doc{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  background:var(--surface);padding:15px 17px}
.biblio-doc .doc-ic{color:var(--encre-3);margin-top:2px}
.biblio-doc b{display:block;color:var(--encre);font-size:.925rem;font-weight:580;line-height:1.35}
.biblio-doc .meta{display:block;color:var(--encre-3);font-size:.74rem;font-weight:540;
  letter-spacing:.02em;text-transform:uppercase;margin:3px 0 5px}
.biblio-doc .desc{display:block;color:var(--encre-2);font-size:.85rem;line-height:1.55;max-width:62ch}
.biblio-doc .act{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
@media (max-width:720px){.biblio-doc{grid-template-columns:auto 1fr}
  .biblio-doc .act{grid-column:2;flex-direction:row;align-items:center;gap:14px}}

/* ---------- L'éditeur de fiche (bloc par bloc) ---------- */
.bloc-edit{border:1px solid var(--trait);border-radius:var(--rayon-sm);padding:12px 14px;
  margin:0 0 12px;background:var(--surface-2)}
.bloc-edit.dessine{background:var(--surface);border-style:dashed}
.bloc-edit-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.bloc-edit-tete b{font-size:12.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--encre-3)}
.bloc-edit > label:first-of-type{margin-top:4px}
.bloc-edit textarea{min-height:76px}
.ajout-bloc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.apercu-dessine{background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--rayon-sm);padding:12px;overflow-x:auto}
.apercu-dessine svg{max-width:100%;height:auto;min-width:380px}
.apercu-dessine p{margin:8px 0 0}
.h2-actions > input[type=text]{max-width:480px;font-weight:600}
.fiche-meta{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
/* Gestion de la bibliothèque : les commandes d'une ligne tiennent sur une ligne —
   empilées, elles doublaient la hauteur du tableau pour rien. */
.biblio-famille td .actions-ligne{flex-wrap:nowrap;white-space:nowrap}