@import url("polices.css");
/* Design system Cleopti (le coffre-fort RH des cabinets et de leurs clients) — fichier
   unique, aucune ressource externe. Repris de Meropti le 25/09/2026 : mêmes jetons, même
   ossature, mêmes composants ; retirés : planning, émargement, École, bibliothèque, CERFA.

   Sens des couleurs (une couleur, UN sens — ne jamais détourner) :
     BEURRE  = « une action est attendue de VOUS » ;
     CIEL    = « en cours chez l'autre partie » ;
     ROSE    = documents, signature ;
     MENTHE  = « fait / terminé » ;
     CORAIL  = erreur, refus ;
     BLEU    = rangé au coffre (déposé, archivé).
   Les boutons principaux portent la couleur de la MARQUE (bloc ci-dessous) : un pastel
   n'est pas lisible en blanc. Typographie : Bricolage Grotesque (titres, chiffres),
   Instrument Sans (texte), JetBrains Mono (codes : SIRET, NIR, IDCC, APE).
   Penser à incrémenter ?v=N dans base.html, login.html, acces.html,
   mot_de_passe_oublie.html, erreur.html (et la page publique de signature) à chaque
   évolution. */

/* === MARQUE ================================================================
   Les SEULES couleurs propres à la marque. Logo et palette : marque/CHARTE.md (25/09/2026). Le logo était en cours de dessin
   (25/09/2026) : ces valeurs sont PROVISOIRES et se changent ici, nulle part ailleurs.
   Tout ce qui était « le bleu Meropti » (#225A91 et ses dérivés) lit ces jetons. */
:root{
  --marque-primaire:#0B6B66;   /* boutons principaux, étape en cours, tuile de tête */
  --marque-survol:#08524E;     /* survol et appui des boutons principaux, bords */
  --marque-lien:#0A5F5B;       /* liens, anneau de focus, icône active du menu */
  --marque-texte:#071830;      /* encre des titres et du nom de marque */
  --marque-accent:#F2A65A;     /* DÉCOR seulement (ruban de connexion, liseré) : jamais un état */
}

:root{
  color-scheme:light;
  /* fonds et encres (ambiance par défaut : « bleu », teintée de la marque) */
  --fond:#F2F6F7; --surface:#FFFFFF; --surface-2:#F6F9FA; --survol:#EFF5F6;
  --trait:#E1E9EB; --trait-fort:#CBD6DA;
  /* --encre-3 foncé de #8690A6 (3,2:1 sur blanc, 2,95:1 sur le fond) à #5F687D : 4,5:1 au
     moins sur le blanc, le fond et les pastels (revue du 25/09/2026, constat 75 — seuil
     WCAG AA pour un texte de 12,5 à 13 px). */
  --encre:var(--marque-texte); --encre-2:#55607A; --encre-3:#5F687D;
  /* marque, sous les noms historiques de Meropti */
  --marque:var(--marque-primaire); --marque-fonce:var(--marque-survol); --marque-vif:var(--marque-lien);
  /* 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;
  /* LAGON = l'ambiance par défaut de Cleopti (menu, onglets, étape en cours), tirée de
     la couleur de marque. Ce n'est PAS une couleur de sens : aucun statut ne la porte.
     (Le lilas de Meropti, réservé aux jours fériés du planning, n'a pas d'usage ici.) */
  --lagon:#DCEFEE;  --lagon-bord:#B2DAD8;  --lagon-texte:#1A5E65; --lagon-pale:#F0F8F8;
  --rayon:18px; --rayon-sm:12px;
  --ombre:0 1px 2px rgba(11,27,51,.04),0 10px 28px -18px rgba(11,27,51,.20);
  --ombre-haute:0 2px 6px rgba(11,27,51,.06),0 22px 40px -20px rgba(11,27,51,.28);
  --anneau:0 0 0 4px rgba(10,95,91,.18);
  /* ambiance, au choix de l'utilisateur (« bleu » par défaut, « rose » : bloc
     [data-theme="rose"] plus bas). Lue par le menu, les onglets, les filtres, l'étape en
     cours, les champs ; les couleurs de SENS (beurre, ciel, menthe, corail, rose des
     documents, bleu du coffre) ne changent pas avec l'ambiance. */
  --amb-pale:var(--lagon); --amb-bord:var(--lagon-bord); --amb-texte:var(--lagon-texte);
  --amb-vif:var(--marque-lien); --amb-tres-pale:var(--lagon-pale); --amb-titre:#6F8E93;
  --amb-laterale:radial-gradient(120% 28% at 0% 0%,rgba(221,242,253,.9),transparent 70%),
    radial-gradient(90% 18% at 100% 0%,rgba(255,244,201,.5),transparent 70%),
    linear-gradient(180deg,#EDF6F7 0%,#E4F1F2 50%,#D9ECED 100%);
  --amb-laterale-bord:#D3E4E6; --amb-laterale-defil:#B9D5D8; --amb-laterale-pied:rgba(110,160,166,.35);
  --amb-barre:rgba(242,246,247,.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 (var(--error) dans le JS des formulaires) */
  --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(--ciel-texte); --info-bg:var(--ciel);
  --danger:#D6455F; --step-done:var(--menthe-vif); --step-current:var(--marque); --step-todo:var(--trait-fort);
}

/* Ambiance rose (cookie cleopti_ambiance = « rose », cf. POST /preferences/ambiance) :
   celle de Meropti, gardée pour qui la préfère. Seuls le fond, les traits et les
   jetons --amb-* changent. */
:root[data-theme="rose"]{
  --fond:#FBF3F8; --surface-2:#FDF5F9; --survol:#FDF1F7; --trait:#EEE5EC; --trait-fort:#DCD1DA;
  --anneau:0 0 0 4px rgba(224,117,159,.22);
  --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);
}

*,*::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-lien);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-lien);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Ossature : équipe du cabinet (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(11,27,51,.05),0 6px 16px -10px rgba(11,27,51,.25)}
.plaque:hover{text-decoration:none}
.plaque img{max-height:36px;max-width:100%;display:block}
/* nom du cabinet actif, sous la plaque : on sait toujours chez qui l'on travaille */
.cabinet-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-cabinet{display:block;margin:0 2px 6px}
.laterale .bascule-cabinet select{height:36px;font-size:13px;background-color:rgba(255,255,255,.75);border-color:var(--amb-laterale-bord)}
.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(11,27,51,.06),0 6px 14px -10px rgba(11,27,51,.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-2);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,var(--amb-bord),var(--beurre));color:var(--amb-texte);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(11,27,51,.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}
/* sur téléphone seulement : le nom du cabinet à côté du bouton menu (le menu est replié) */
.barre-titre{display:none;min-width:0;font-weight:650;font-size:14px;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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(11,27,51,.28)}
  .bouton-menu{display:inline-flex}
  .barre-titre{display:block}
  .barre-haut{padding:0 12px;background:rgba(255,255,255,.9);border-bottom:1px solid var(--trait)}
  .contenu{padding:14px 16px 48px}
}

/* --- Ossature : entreprise, salarié, 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(--lagon-bord),var(--ciel-bord) 35%,var(--rose-bord) 70%,var(--beurre-bord))}
.entete-interieur{max-width:1240px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;gap:18px}
.entete-interieur .logo{flex:none;display:flex;align-items:center}
.entete-interieur .logo:hover{text-decoration:none}
.entete-interieur .logo img{height:32px;width:auto;display:block}
/* Sur un écran large, les onglets rétrécissent et défilent plutôt que de passer à la
   ligne : l'espace entreprise en a six (§ 8 du cahier des charges). Sur téléphone, ils
   PASSENT À LA LIGNE (plus bas) : à 400 px, « Arrêts », « Documents » et « Mon
   entreprise » sortaient de l'écran sans aucun indice (revue du 25/09/2026, constat 74). */
.onglets{flex:1 1 auto;min-width:0;display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;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{flex:none;margin-left:auto;display:flex;align-items:center;gap:6px}
.zone-droite .qui{color:var(--encre-2);font-size:13.5px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.coque-simple .contenu{max-width:1080px;padding:28px 24px 64px}
@media (max-width:1220px){.zone-droite .qui{display:none}}
@media (max-width:1040px){.onglets a .icone{display:none}}
@media (max-width:720px){
  .entete-interieur{padding:8px 16px 0;gap:10px;flex-wrap:wrap}
  .onglets{order:3;flex:1 1 100%;padding-bottom:8px;flex-wrap:wrap;overflow-x:visible;gap:4px}
  .onglets a{padding:6px 11px;font-size:13.5px}
  .onglets a .icone{display:inline-block}
  .coque-simple .contenu{padding:18px 16px 48px}
}
@media (max-width:480px){.onglets a .icone{display:none}}

/* --- Barre du haut : compteurs, déconnexion, bascule de cabinet ------------------- */
.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(11,27,51,.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{display:inline-flex;align-items:center;gap:6px;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(11,27,51,.06);color:var(--encre)}
.lien-ghost{color:var(--encre-2);font-size:14px}
.bascule-cabinet{display:inline-block}
.bascule-cabinet select{width:auto;max-width:240px;height:36px;font-size:13.5px}
.laterale .bascule-cabinet select{width:100%;max-width:none}

/* --- 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}
.h1-row>div:first-child{min-width: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}
.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 : l'étape qui attend le lecteur ; card-attente : une action attendue de lui
   (beurre) ; card-done : faite (coche menthe dans le titre) ; card-muted : pas encore
   accessible (une phrase en italique dit quand elle le sera). */
.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:last-child,.card-done summary h2 .icone:last-child{color:var(--menthe-vif)}
.card-muted{opacity:.6}
.card-aide{margin:-8px 0 14px}
.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}
@media (max-width:560px){.card{padding:18px 16px}}

/* --- 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}
/* Par SENS (à préférer pour tout nouveau statut : arrêts, imports, comptes…) */
.b-neutre{background:#F1F3F8;color:#5A647C;border-color:#E2E6EE}
.b-vous{background:var(--beurre);color:var(--beurre-texte);border-color:var(--beurre-bord)}
.b-autre{background:var(--ciel);color:var(--ciel-texte);border-color:var(--ciel-bord)}
.b-doc{background:var(--rose);color:var(--rose-texte);border-color:var(--rose-bord)}
.b-fait{background:var(--menthe);color:var(--menthe-texte);border-color:var(--menthe-bord)}
.b-erreur{background:var(--corail);color:var(--corail-texte);border-color:var(--corail-bord)}
.b-coffre{background:var(--bleu);color:var(--bleu-texte);border-color:var(--bleu-bord)}
.b-a-deposer{background:var(--surface);color:var(--encre-2);border:1px dashed var(--trait-fort)}
/* Statuts d'embauche (Embauche.statut, § 6.1), lus par ui.statut_embauche et ui.badge_statut */
.b-brouillon{background:#F1F3F8;color:#5A647C;border-color:#E2E6EE}
.b-transmise,.b-validee,.b-contrat_genere{background:var(--ciel);color:var(--ciel-texte);border-color:var(--ciel-bord)}
.b-a_corriger{background:var(--beurre);color:var(--beurre-texte);border-color:var(--beurre-bord)}
.b-en_signature{background:var(--rose);color:var(--rose-texte);border-color:var(--rose-bord)}
.b-signee{background:var(--menthe);color:var(--menthe-texte);border-color:var(--menthe-bord)}
.b-annulee{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 .icone{vertical-align:-2px}
.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)}
.chip-doc{background:var(--rose);color:var(--rose-texte);border-color:var(--rose-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:var(--marque-primaire);
  background:linear-gradient(180deg,color-mix(in srgb,var(--marque-primaire) 92%,#fff),var(--marque-primaire));
  color:#fff;border-color:var(--marque-survol);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px color-mix(in srgb,var(--marque-primaire) 60%,transparent)}
.btn-primary:hover{background:var(--marque-survol);
  background:linear-gradient(180deg,var(--marque-primaire),var(--marque-survol));text-decoration:none}
.btn-secondary{background:var(--surface);border-color:var(--trait-fort);color:var(--encre);box-shadow:0 1px 2px rgba(11,27,51,.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-sm.btn-icone{padding:6px 8px}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-success:focus-visible{outline:none;box-shadow:var(--anneau)}
/* à 400 px, un libellé long (« Valider l'embauche et générer le contrat ») passe à la
   ligne plutôt que de sortir de l'écran */
@media (max-width:560px){.btn-primary,.btn-secondary,.btn-success{white-space:normal;text-align:center}}
/* action définitive (annuler une embauche, supprimer un document) : texte corail, jamais un bouton plein */
.btn-secondary.danger{color:var(--corail-texte)}
.btn-secondary.danger:hover{border-color:var(--corail-bord);background:var(--corail);color:var(--corail-texte)}
/* « une action grisée qui s'explique vaut mieux qu'un bouton qui disparaît » (Meropti) :
   la raison est écrite JUSTE AU-DESSUS du bouton désactivé (ui.bouton_post(…, raison=…)). */
.action-indisponible{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:48ch}
.action-indisponible .aide{margin:0}
.actions-ligne{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- 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.note-icone>div{min-width:0}
/* Intégration du 25/09/2026 (constat du lot M1) : un lien d'accès affiché dans un message
   élargissait la page à 1 408 px sur téléphone. Un message se coupe où il faut. */
.note{overflow-wrap:anywhere}
.note>div{min-width:0}
.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 ------------------------------------------------------------------------ */
/* position:relative (intégration du 25/09/2026, constat du lot M6) : sans elle, les libellés
   .sr-only d'un tableau (position:absolute) sortent de la zone qui défile et élargissent la
   page sur téléphone (581 px mesurés à 400 px). */
.table-scroll{overflow-x:auto;position:relative}
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}
/* Tableau pleine largeur dans une carte : repose sur l'attribut EXACT style="padding:0"
   (écrire « padding:0 », pas « padding: 0 »). */
.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)}
@media (max-width:560px){
  .card:not([style*="padding:0"])>.table-scroll{margin:0 -16px}
  .card:not([style*="padding:0"])>.table-scroll th:first-child,.card:not([style*="padding:0"])>.table-scroll td:first-child{padding-left:16px}
  .card:not([style*="padding:0"])>.table-scroll:last-child{margin-bottom:-18px}
}
.nombre,td.nombre{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* ligne à surveiller (échéance proche, pièce qui expire) : un liseré beurre, rien d'autre */
.ligne-alerte>td:first-child{box-shadow:inset 3px 0 0 var(--beurre-vif)}

/* --- Formulaires ---------------------------------------------------------------------- */
label{display:block;font-size:13px;color:var(--encre-2);margin:12px 0 5px;font-weight:600}
/* Champ obligatoire : l'étoile rouge est posée par le `required` du champ lui-même —
   une seule source de vérité, aucune étoile ne peut promettre ce que le formulaire
   n'exige pas (ni l'oublier quand un champ devient obligatoire). Le <label> doit donc
   PRÉCÉDER immédiatement le champ (ou un <small> puis le champ). */
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,
fieldset:has(input[required])>legend::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,textarea: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;min-width:0}
legend{font-weight:650;padding:0 6px}
.row{display:flex;gap:0 14px;flex-wrap:wrap}
.row>div{flex:1;min-width:160px}
.row>div:has(>input[type=file]){min-width:240px}
/* un champ (ui.champ, ui.choix) : libellé, contrôle, aide dessous ; en erreur, bord corail */
.champ{min-width:0}
.champ-erreur :is(input,select,textarea){border-color:var(--corail-texte)}
.champ-erreur .aide.erreur{color:var(--corail-texte);font-weight:550}
/* choix exclusif en pilules (ui.segment) : CDI / CDD / Extra, brut / net, France / UE / hors UE */
fieldset.champ-segment{border:0;padding:0;margin:12px 0 0}
fieldset.champ-segment>legend{padding:0;margin:0 0 5px;font-size:13px;color:var(--encre-2);font-weight:600}
.segment{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--trait-fort);
  border-radius:var(--rayon-sm);background:var(--surface-2);max-width:100%}
.segment label{position:relative;display:inline-flex;align-items:center;margin:0;padding:6px 14px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--encre-2);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.segment label::after{content:none!important}
.segment input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.segment label:hover{color:var(--encre)}
.segment label:has(input:checked){background:var(--surface);color:var(--amb-texte);
  box-shadow:0 1px 2px rgba(11,27,51,.1),0 0 0 1px var(--amb-bord)}
.segment label:has(input:focus-visible){box-shadow:var(--anneau)}
/* cases à cocher : libellé cliquable, aide dessous */
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}
label.case .aide{font-weight:400}
.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}
.aide-inline{font-size:12.5px;font-weight:500;color:var(--encre-2)}
/* « Modifier » d'un récapitulatif : un LIEN (couleur de lien, souligné), pas une aide grise
   (revue du 25/09/2026, constat 75). */
a.lien-modifier{font-size:13px;font-weight:600;color:var(--marque-lien);text-decoration:underline;margin-left:6px}
.cases-tete{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-top:12px}
/* un <details> n'accueille que du SECONDAIRE (jamais l'action attendue du bloc) */
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)}
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;z-index:10;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;margin-bottom:18px}
.actionbar-sticky .aide{flex:1 1 220px;margin:0}
/* sur téléphone, une barre collante de trois lignes mangeait le quart de l'écran :
   elle reprend sa place, en fin de formulaire */
@media (max-width:560px){.actionbar-sticky{position:static;padding:12px 14px}}
/* Barre EN FIN de formulaire, jamais collante (retour de l'utilisateur du 26/09/2026 :
   collée en bas de l'écran, « Enregistrer et continuer » recouvrait la dernière rubrique,
   « Période d'essai »). Espace franc au-dessus, sans ombre de calque. */
.actionbar-sticky.actionbar-fin{position:static;margin-top:26px;margin-bottom:0;box-shadow:none;
  background:var(--surface-2);backdrop-filter:none}

/* Menu déroulant de cases (avantages de l'embauche, 26/09/2026) : un <details> à l'allure
   d'une liste déroulante, qui permet d'en cocher plusieurs et marche sans JavaScript.
   Ouvert, il s'étend DANS la page : aucun calque ne recouvre les champs suivants. */
.libelle-champ{display:block;font-size:13px;color:var(--encre-2);margin:12px 0 5px;font-weight:600}
details.menu-cases>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:40px;padding:8px 12px;border:1px solid var(--trait-fort);border-radius:var(--rayon-sm);
  background:var(--surface);cursor:pointer;font-size:14.5px;color:var(--encre);transition:border-color .15s,box-shadow .15s}
details.menu-cases>summary::-webkit-details-marker{display:none}
details.menu-cases>summary .icone{flex:none;color:#8690A6;transition:transform .15s}
details.menu-cases>summary:hover{border-color:#B7C2D3}
details.menu-cases>summary:focus-visible{outline:none;border-color:var(--amb-vif);box-shadow:var(--anneau)}
details.menu-cases[open]>summary{border-color:var(--amb-vif);border-radius:var(--rayon-sm) var(--rayon-sm) 0 0}
details.menu-cases[open]>summary .icone{transform:rotate(180deg)}
.menu-cases-resume{min-width:0;overflow-wrap:anywhere}
.menu-cases-liste{border:1px solid var(--amb-vif);border-top:0;border-radius:0 0 var(--rayon-sm) var(--rayon-sm);
  padding:2px 14px;background:var(--surface)}
.menu-cases-liste label.case{padding:9px 0;border-bottom:1px solid var(--trait);font-weight:550}
.menu-cases-liste label.case:last-child{border-bottom:0}
.menu-cases-liste label.case .aide{display:block;margin-top:2px;font-size:12.5px;color:var(--encre-3)}

/* --- Dépôt d'un fichier (ui.depot + ui.script_depot) -------------------------------------
   PDF, JPG, PNG, 10 Mo au plus (§ 12.6 du cahier). Sans JavaScript, le champ fichier
   reste visible et suffit ; le script ajoute le glisser-déposer et l'aperçu. */
.depot-fichier{margin:12px 0 0;min-width:0}
.zone-depot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin:0;padding:20px 16px;
  min-height:150px;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::after{content:none!important}
.zone-depot-texte{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.zone-depot b{color:var(--encre);font-weight:650}
.zone-depot:has(input[required]) b::after{content:" *";color:var(--error);font-weight:700}
.zone-depot small{max-width:52ch}
.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)}
/* variante en ligne, pour une liste de pièces (une zone par pièce exigée) */
.zone-depot.compacte{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;min-height:0;padding:12px 14px;gap:4px 12px}
.zone-depot.compacte .zone-depot-icone{width:38px;height:38px;border-radius:12px}
.zone-depot.compacte .zone-depot-texte{flex:1 1 200px;align-items:flex-start}
.zone-depot.compacte input[type=file]{flex:1 1 100%;margin-top:4px}
.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 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);font-weight:550}
.depot-fichier>.aide{margin-top:6px}
/* vignette d'un document (aperçu d'une pièce, d'un bulletin) : rose = document */
.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(--rose-texte);
  background:linear-gradient(135deg,var(--rose-pale),var(--rose))}
a.vignette:hover{text-decoration:none;border-color:var(--amb-bord)}
/* haut de la page (titre d'un PDF A4) plutôt 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{color:var(--rose-texte);background:linear-gradient(135deg,var(--rose-pale),var(--rose))}

/* --- Étapes d'un dossier (ui.timeline : où en est l'embauche, en lecture) ----------------- */
.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}
}

/* --- Parcours en étapes (ui.etapes : « Nouvelle embauche » en 4 étapes, § 8) -------------
   À la différence de la timeline, c'est une NAVIGATION : chaque étape déjà ouverte est un
   lien, le brouillon est enregistré à chaque étape. Sur téléphone, seule l'étape en cours
   garde son libellé ; les autres se réduisent à leur numéro. */
.etapes{display:flex;gap:6px;list-style:none;margin:0 0 20px;padding:6px;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre)}
.etapes li{flex:1 1 0;min-width:0;display:flex}
.etapes li>a,.etapes li>span{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;
  color:var(--encre-2)}
.etapes li>a:hover{background:var(--survol);text-decoration:none;color:var(--encre)}
.etapes .num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--trait-fort);background:var(--surface);color:var(--encre-3);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.etapes .txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.etapes .txt small{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-3);font-weight:650}
.etapes .txt b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etapes li.fait .num{background:var(--menthe);border-color:var(--menthe-bord);color:var(--menthe-texte)}
.etapes li.incomplet .num{background:var(--beurre);border-color:var(--beurre-bord);color:var(--beurre-texte)}
.etapes li.courante>a,.etapes li.courante>span{background:var(--amb-pale);color:var(--encre)}
.etapes li.courante .num{background:var(--marque);border-color:var(--marque);color:#fff}
.etapes li.courante .txt small{color:var(--amb-texte)}
.etapes li.a-venir{opacity:.75}
@media (max-width:720px){
  .etapes li{flex:0 0 auto}
  .etapes li.courante{flex:1 1 auto}
  .etapes li:not(.courante) .txt{display:none}
  .etapes li>a,.etapes li>span{padding:6px}
}

/* --- Cartes salarié (accueil entreprise) ------------------------------------------------- */
.grille-salaries{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:16px}
a.carte-salarie{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-salarie:hover{text-decoration:none;border-color:var(--amb-bord);box-shadow:var(--ombre-haute);transform:translateY(-2px)}
a.carte-salarie.carte-a-vous{border-color:var(--beurre-bord);box-shadow:0 0 0 4px var(--beurre),var(--ombre)}
.carte-salarie .nom{font-family:var(--titres);font-size:18px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.carte-salarie .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 du cabinet) : 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;min-width:0;
  transition:transform .15s,box-shadow .15s}
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 .valeur.texte{font-family:var(--texte);font-size:19px;font-weight:650;line-height:1.25;letter-spacing:-.01em}
.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)}
/* 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-lien),var(--marque-survol));border-color:var(--marque-survol)}
.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,.85)}
.stat-marque .valeur{color:#fff}
.stat-marque .valeur .sur{color:rgba(255,255,255,.7)}
.stat-marque .sous{color:rgba(255,255,255,.8)}
.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}

/* --- Filtres, recherche (listes) ---------------------------------------------------------- */
.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;min-width:0}}

/* --- É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}
/* liste vide (ui.vide) : une phrase qui dit ce qui apparaîtra ici, et l'action pour commencer */
.vide.vide-liste{padding:26px 18px}
.vide.vide-liste p{margin:0;max-width:60ch;margin-inline:auto}
.vide.vide-liste .btn-primary{margin-top:14px}
.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)}

/* --- Suivi : jauge, avatar, bandeau d'actions ---------------------------------------------- */
.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-lien)}
.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}
.actions-bandeau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.actions-bandeau small{flex:1;min-width:220px}
.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}

/* --- Divers ------------------------------------------------------------------------------------- */
.kv{display:grid;grid-template-columns:220px minmax(0,1fr);gap:10px 16px;font-size:14px}
.kv b{color:var(--encre-2);font-weight:550}
.kv>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.kv{grid-template-columns:minmax(0,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:8px 12px;padding:11px 0;border-bottom:1px solid var(--trait);flex-wrap:wrap}
.liste-docs li:last-child{border-bottom:none}
.liste-docs .doc-titre{flex:1 1 220px;min-width:0;display:flex;align-items:flex-start;gap:10px}
.liste-docs .doc-titre>.icone{margin-top:2px;color:var(--rose-texte)}
.liste-docs .doc-titre b{display:block;font-weight:600;overflow-wrap:anywhere}
.liste-docs .doc-titre small{display:block;color:var(--encre-3);font-size:12.5px}
.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}
.etat-info .icone{color:var(--ciel-texte)}
.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}

/* --- Fil des événements d'un dossier (ui.evenement) ---------------------------------------- */
.fil{list-style:none;margin:0;padding:0;position:relative}
.fil li{position:relative;display:flex;gap:12px;padding:0 0 16px}
.fil li:last-child{padding-bottom:0}
.fil li:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:var(--trait)}
.fil .evt-icone{flex:none;width:32px;height:32px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--trait);color:var(--encre-3)}
.fil .evt-corps{min-width:0;padding-top:5px}
.fil .evt-corps p{margin:0;overflow-wrap:anywhere}
.fil .evt-corps small{display:block;color:var(--encre-3);font-size:12.5px;margin-top:2px}
.fil li.evt-ok .evt-icone{background:var(--menthe);border-color:var(--menthe-bord);color:var(--menthe-texte)}
.fil li.evt-refus .evt-icone{background:var(--corail);border-color:var(--corail-bord);color:var(--corail-texte)}
.fil li.evt-attente .evt-icone{background:var(--beurre);border-color:var(--beurre-bord);color:var(--beurre-texte)}
.fil li.evt-info .evt-icone{background:var(--ciel);border-color:var(--ciel-bord);color:var(--ciel-texte)}
.fil li.evt-doc .evt-icone{background:var(--rose);border-color:var(--rose-bord);color:var(--rose-texte)}

/* --- Pages publiques, sans compte ------------------------------------------------------------
   Signer un contrat, choisir son mot de passe, lire une erreur : on y arrive par un lien
   reçu, parfois sans s'être jamais connecté. Chez Meropti, ces pages avaient perdu leurs
   classes à la refonte pastel et leur contenu « tombait à nu, collé au bord gauche »
   (client, 24/09/2026). Une seule coque pour toutes, et pour celles qui viendront. */
.page-publique{min-height:100vh;margin:0;padding:40px 16px 56px;
  background:
    radial-gradient(90% 55% at 100% 0%,rgba(220,239,238,.9),transparent 70%),
    radial-gradient(60% 45% at 0% 100%,rgba(255,236,168,.38),transparent 70%),
    var(--fond)}
:root[data-theme="rose"] .page-publique{background:
    radial-gradient(90% 55% at 100% 0%,rgba(250,204,223,.5),transparent 70%),
    radial-gradient(60% 45% at 0% 100%,rgba(255,236,168,.42),transparent 70%),
    var(--fond)}
.publique-entete{max-width:680px;margin:0 auto 18px;display:flex;align-items:center;gap:10px;
  font-family:var(--titres);font-weight:700;font-size:18px;color:var(--encre);letter-spacing:-.01em}
.publique-entete img{width:34px;height:34px;background:#fff;border-radius:10px;padding:4px;
  box-shadow:0 6px 16px -10px rgba(11,27,51,.4)}
.publique-entete:hover{text-decoration:none}
.carte-publique{max-width:680px;margin:0 auto;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre-haute);padding:30px 32px}
.carte-publique>:last-child{margin-bottom:0}
.carte-publique.large{max-width:920px}
.page-publique:has(.carte-publique.large) .publique-entete{max-width:920px}
.publique-pied{max-width:680px;margin:18px auto 0;text-align:center;color:var(--encre-3);font-size:12.5px}
.code-erreur{font-family:var(--titres);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--amb-texte);
  background:var(--amb-pale);border:1px solid var(--amb-bord);border-radius:999px;padding:2px 10px;display:inline-block;margin-bottom:12px}
@media (max-width:560px){
  .page-publique{padding:24px 14px 40px}
  .carte-publique{padding:22px 18px}
}

/* --- Connexion, mot de passe oublié, choix du mot de passe -------------------------------- */
.page-connexion{background:var(--surface);margin:0}
.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(80% 60% at 100% 0%,rgba(178,218,216,.95),transparent 72%),
    radial-gradient(55% 45% at 0% 100%,rgba(255,236,168,.85),transparent 70%),
    radial-gradient(70% 60% at 35% 45%,rgba(221,242,253,.95),transparent 75%),
    linear-gradient(160deg,#E3F1F1,#EEF6F7)}
:root[data-theme="rose"] .connexion-marque{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(11,27,51,.4)}
.connexion-marque h1{color:var(--encre);font-size:clamp(34px,4vw,52px);line-height:1.03;letter-spacing:-.035em;
  max-width:15ch;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{flex:none;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(11,27,51,.5)}
.connexion-points li:nth-child(1) .pastille{color:var(--rose-texte)}
.connexion-points li:nth-child(2) .pastille{color:var(--ciel-texte)}
.connexion-points li:nth-child(3) .pastille{color:var(--marque-primaire)}
.ruban{position:absolute;right:-60px;bottom:-170px;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,var(--marque-accent))}
.ruban span:nth-child(2){left:160px;transform:rotate(20deg);background:linear-gradient(180deg,#D6EEEC,#8CC7C4)}
.ruban span:nth-child(3){left:280px;transform:rotate(-22deg);background:linear-gradient(180deg,#5FA3AA,var(--marque-primaire))}
:root[data-theme="rose"] .ruban span:nth-child(2){background:linear-gradient(180deg,#FCE0EC,#F3B8D0)}
.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 .note{margin:0 0 6px}
.connexion-formulaire .pied{margin-top:26px;font-size:12.5px;color:var(--encre-3)}
.connexion-formulaire .lien-sous-champ{display:flex;justify-content:flex-end;margin-top:6px;font-size:13px}
.connexion-formulaire .retour{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:13.5px;font-weight:550}
/* force du mot de passe (acces.html) : la règle est dite AVANT l'erreur, pas après */
.regles-mdp{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--encre-2)}
.regles-mdp li{display:flex;align-items:center;gap:7px}
.regles-mdp .icone{color:var(--encre-3)}
.regles-mdp li.ok{color:var(--menthe-texte)}
.regles-mdp li.ok .icone{color:var(--menthe-vif)}
@media (max-width:860px){
  .connexion{grid-template-columns:minmax(0,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;max-width:440px}
  .connexion-formulaire .logo-form{display:none}   /* le bandeau de marque est juste au-dessus */
}

/* --- Formulaires longs : fiche salarié, fiche entreprise, modèle de contrat -------------------- */
.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-section{scroll-margin-top:72px;padding:24px 26px 26px}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:0 18px;align-items:start;
  container-type:inline-size}
/* Un champ « large » couvre deux colonnes SEULEMENT si la grille en a deux (2 × 210 + 18 =
   438 px). Intégration du 25/09/2026 (constat du lot M3) : dans une demi-carte d'environ
   420 px, « span 2 » créait une colonne implicite et décalait toute la grille. */
.champ.large{grid-column:auto}
@container (min-width:438px){.champ.large{grid-column:span 2}}
.champ .aide{font-size:12.5px;line-height:1.4;color:var(--encre-2);margin-top:5px}
.champ .aide.erreur{color:var(--corail-texte)}
.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}
/* Note d'une sous-rubrique : ce qu'il faut savoir AVANT de remplir ses champs. */
.note-rubrique{grid-column:1/-1;margin:6px 0 2px;font-size:13px;line-height:1.55;color:var(--encre-2)}
/* règles du § 5.3 affichées en direct sous les champs (M2) */
.regle-direct{grid-column:1/-1;margin:8px 0 0}
.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}.carte-section{padding:18px 16px 20px}}

/* --- 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(11,27,51,.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(11,27,51,.12)}
.ambiance-bleu .pastille-ambiance{background:linear-gradient(135deg,#7FC0C2,#DCEFEE)}
.ambiance-rose .pastille-ambiance{background:linear-gradient(135deg,#F3AFCB,#FCE6EF)}

/* --- Espace salarié : son coffre (Mon coffre, /moi) ------------------------------------------
   Repris de l'espace apprenant de Meropti (17/09/2026) : on entre par ce qui est attendu
   de lui, puis où il en est, puis QUI appeler. Les tuiles réutilisent .grille-stats. */
.entete-salarie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:8px 0 22px}
.entete-salarie-texte{min-width:0;flex:1 1 240px}
.entete-salarie-texte h1{margin:0}
.entete-salarie-texte .sous-titre{margin:4px 0 0}
.entete-salarie-puces{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.entete-salarie-puces .chip{background:var(--surface);border-color:var(--trait-fort);padding:5px 13px}
.entete-salarie-puces .chip .icone{color:var(--encre-3)}
.avatar-salarie{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:var(--amb-texte);background:linear-gradient(135deg,var(--amb-pale),var(--beurre));
  box-shadow:0 1px 2px rgba(11,27,51,.06),0 10px 22px -14px rgba(11,27,51,.5)}
/* deux colonnes : ce qui a besoin de largeur, puis la colonne étroite (une seule sur mobile).
   Ne pas laisser une colonne vide aux trois quarts (Meropti, 24/09/2026). */
.duo-salarie{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 18px;align-items:start}
@media (max-width:960px){.duo-salarie{grid-template-columns:minmax(0,1fr)}}
.lien-suite{margin:14px 0 0;font-weight:600}
.lien-suite .icone{vertical-align:-2px}
/* 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 : une ligne cliquable par document */
.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 small{flex:none;color:var(--encre-3);font-size:12.5px}
.liste-documents a .icone{color:var(--rose-texte)}
.liste-documents li:last-child a{margin-bottom:0}

/* --- Éditeur de modèle de contrat : les articles à gauche, le document à droite (M4) ----------- */
.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 PDF (services/contrat_pdf.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;font-weight:700;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-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}
/* une variable du modèle non renseignée pour cette embauche : visible, jamais silencieuse */
.apercu .c-manque{background:var(--beurre);color:var(--beurre-texte);border-radius:4px;padding:0 3px}
/* Palette des variables du modèle : des jetons qu'on insère au curseur */
.palette-balises{display:flex;flex-wrap:wrap;gap:6px}
.palette-balises button{font-size:12px}