/* ==========================================================================
   Portail des demandes — Campus universitaire de Safi
   Feuille de style reprise de la maquette v6 (français / arabe, poste de
   vérification, pilotage, dépôt sur téléphone).
   Ne pas modifier à la main : régénérée depuis la maquette.
   ========================================================================== */

/* ============================================================
   Portail public des demandes — Campus universitaire de Safi
   5 facultés (FSAS, FEG, FSHS, FSJP, FLLA) · 6 types de demande,
   dont un propre à la FSAS (accès à la filière 2IA),
   ouvertes établissement par établissement par la présidence.
   Dépôt sans compte ; preuve = reçu PDF téléchargeable.
   Thème clair unique.
   ============================================================ */


/* ==========================================================================
   Polices embarquées
   --------------------------------------------------------------------------
   Une seule famille pour tout le texte de l'interface française : Archivo,
   titres compris. La chasse fixe reste réservée aux suites de caractères
   qu'on recopie ou qu'on dicte — numéro de dossier, CIN, CNE, code de
   vérification — où confondre 0 et O coûte un déplacement au guichet.

   Les fichiers vivent dans public/fonts : rien n'est demandé à Google. Le
   rendu est donc identique même si le réseau du campus filtre les domaines
   tiers, et aucune requête ne part vers un service extérieur — un point de
   moins à justifier vis-à-vis de la CNDP.

   Deux sous-ensembles par graisse : « latin » et « latin-ext ». Le second
   n'est pas facultatif ici — le « œ » de « vœux » y vit (U+0153), et il
   manquerait à toutes les pages de choix de filière.

   Les polices arabes ne portent QUE le sous-ensemble arabe : les caractères
   latins d'une page en arabe retombent sur Archivo par la pile de familles,
   et le navigateur ne télécharge ces fichiers que s'il rencontre de l'arabe.
   ========================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/plexmono-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexmono-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plexmono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kufi-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/kufi-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/kufi-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/kufi-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/naskh-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/naskh-arabic-500.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/naskh-arabic-600.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Naskh Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/naskh-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --paper:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#EFF2F8;
  --surface-3:#E6EAF3;
  --ink:#0E1626;
  --ink-2:#454F68;
  --ink-3:#6C7791;
  --line:#DBE0EC;
  --line-2:#C2CADC;
  --cobalt:#173F8A;
  --cobalt-2:#2C63C7;
  --cobalt-soft:#E6EDFB;
  --cobalt-ring:rgba(44,99,199,.30);
  --clay:#A9532C;
  /* Identité des 5 établissements, relevée sur leurs blocs-marques
     officiels : l'écran parle la même couleur que leur papier à en-tête.
     Ce sont des couleurs subies, pas choisies — certaines sont trop claires
     pour porter du texte de 12 px, d'où la règle .fac-tag plus bas. Et la
     teinte ne porte jamais l'information seule : le code de la faculté est
     systématiquement écrit à côté. */
  --fsa:#3E8BC8;   --fsa-soft:#E9F1F9;
  --feg:#323E56;   --feg-soft:#E9EBF0;
  --fshs:#A45525;  --fshs-soft:#F6EBE4;
  --fsjp:#0A8557;  --fsjp-soft:#E2F1EB;
  --flla:#8B1D3F;  --flla-soft:#F4E6EB;
  --ok:#186B4A;      --ok-soft:#DFF1E8;
  --warn:#875806;    --warn-soft:#FAEDD3;
  --crit:#A32218;    --crit-soft:#FAE3E0;
  --shadow:0 1px 2px rgba(14,22,38,.05), 0 8px 24px -12px rgba(14,22,38,.18);
  --radius:12px;
  --radius-sm:8px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}

body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{margin:0;font-family:inherit;font-weight:600;text-wrap:balance;letter-spacing:-.018em}
h1{font-size:2rem;line-height:1.15}
h2{font-size:1.5rem;line-height:1.2}
h3{font-size:1.15rem;line-height:1.3}
p{margin:0}
a{color:var(--cobalt-2)}

:focus-visible{outline:2px solid var(--cobalt-2);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- En-tête applicatif ---------- */
.appbar{background:var(--surface);border-bottom:1px solid var(--line)}
.appbar__in{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand__mark{width:34px;height:34px;flex:none;border-radius:9px;background:var(--cobalt);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:600;letter-spacing:.03em;overflow:hidden}
.brand__mark--lg{width:52px;height:52px;font-size:.85rem;border-radius:12px}
.brand__mark.has-logo{background:transparent;border-radius:0;display:block;width:auto;height:auto;overflow:visible}
.brand__mark.has-logo img{height:58px;width:auto;display:block}
.brand__mark--lg.has-logo img{height:96px}
.brand__mark img{object-fit:contain}
.brand__t{font-size:1.02rem;font-weight:600;line-height:1.1}
.brand__s{font-size:.76rem;color:var(--ink-3);line-height:1.2}
.appbar__right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------- Structure ---------- */
/* Chaque écran de la maquette est une page servie par le routeur. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px 20px 72px}
.stack{display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.page-head p{color:var(--ink-2);max-width:64ch}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card__body{padding:22px}
.card__head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card__head h3{flex:1;min-width:0}

/* ---------- Boutons ---------- */
.btn{font:inherit;font-weight:500;font-size:.92rem;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:background .15s ease,border-color .15s ease,transform .1s ease}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn--primary:hover{background:var(--cobalt-2);border-color:var(--cobalt-2)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn--sm{padding:6px 12px;font-size:.82rem}
.btn--lg{padding:13px 24px;font-size:1rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Champs ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.col-span{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.req{color:var(--clay)}
/* Pièce conditionnelle : ni l'astérisque rouge des pièces exigées, ni le gris
   discret des facultatives. Le ton d'avertissement dit « regardez si cela vous
   concerne » — la condition elle-même est écrite juste en dessous. */
.tag-cond{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:99px;font-size:.7rem;font-weight:600;background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);vertical-align:1px}
.input,.select,.textarea{font:inherit;font-size:.92rem;width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
/* « font:inherit » ci-dessus réinitialise aussi la famille, et cette règle
   vient après .mono : sans la ligne suivante, un champ marqué .mono retombe
   sur la police du corps de page. Cela touchait la CIN, le CNE, le téléphone
   et le code de vérification — exactement les endroits où la chasse fixe
   sert à ne pas confondre 0 et O. */
.input.mono,.select.mono,.textarea.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--cobalt-2);box-shadow:0 0 0 3px var(--cobalt-ring)}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.hint{font-size:.78rem;color:var(--ink-3)}

/* ---------- Accueil public ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 18% 22%, rgba(23,63,138,.13) 0 1.6px, transparent 2.2px) 0 0/26px 26px,
             linear-gradient(155deg,#F4F8FF 0%,#E9F0FD 55%,#E2EAFA 100%)}
.hero__in{max-width:var(--maxw);margin:0 auto;padding:56px 20px 52px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hero h1{font-size:2.5rem;color:var(--cobalt);max-width:20ch}
.hero__lede{color:var(--ink-2);font-size:1.02rem;max-width:58ch}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero__meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:.85rem;color:var(--ink-2)}
.hero__meta b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--ink)}

.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.info{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--fac,var(--line-2));border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}
.info__c{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;color:var(--fac);letter-spacing:.04em}
.info__t{font-weight:600}
.info__d{font-size:.82rem;color:var(--ink-3)}

.howto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:h}
.howto__s{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.howto__n{width:24px;height:24px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:600}
.howto__t{font-weight:600;font-size:.93rem}
.howto__d{font-size:.82rem;color:var(--ink-3)}

/* ---------- Facultés ---------- */
.facs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.fac-card{position:relative;border:1px solid var(--line-2);border-radius:var(--radius);padding:18px 18px 17px;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:5px;overflow:hidden;transition:border-color .15s ease,background .15s ease}
.fac-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fac,var(--line-2))}
.fac-card input{position:absolute;opacity:0;inset:0;cursor:pointer}
.fac-card:hover{border-color:var(--fac)}
.fac-card:has(input:checked){border-color:var(--fac);background:var(--fac-bg);box-shadow:0 0 0 1px var(--fac) inset}
.fac-card:has(input:focus-visible){outline:2px solid var(--fac);outline-offset:2px}
.fac-card__c{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;color:var(--fac);letter-spacing:.04em}
.fac-card__t{font-weight:600;font-size:1rem;line-height:1.25}
.fac-card__d{font-size:.81rem;color:var(--ink-3)}
[data-fac="fsa"]{--fac:var(--fsa);--fac-bg:var(--fsa-soft)}
[data-fac="feg"]{--fac:var(--feg);--fac-bg:var(--feg-soft)}
[data-fac="fshs"]{--fac:var(--fshs);--fac-bg:var(--fshs-soft)}
[data-fac="fsjp"]{--fac:var(--fsjp);--fac-bg:var(--fsjp-soft)}
[data-fac="flla"]{--fac:var(--flla);--fac-bg:var(--flla-soft)}

/* Le libellé est en encre, pas dans la couleur de la faculté : les teintes
   viennent des blocs-marques officiels et rien ne garantit qu'elles
   contrastent assez pour être lues en 12 px. La couleur reste portée par la
   pastille, le fond et le filet — l'identification est intacte, la lisibilité
   ne dépend plus de la teinte reçue. */
.fac-tag{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 8px;border-radius:99px;font-size:.75rem;font-weight:600;white-space:nowrap;color:var(--ink);background:var(--fac-bg);border:1px solid color-mix(in srgb,var(--fac) 32%,transparent)}
.fac-tag::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--fac);flex:none}

/* ---------- Catégories ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cat{position:relative;min-height:104px;border:1px solid var(--line-2);border-radius:var(--radius);padding:16px;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:6px;transition:border-color .15s ease,background .15s ease}
.cat:hover{border-color:var(--cobalt-2)}
.cat input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cat__t{font-weight:600;font-size:.98rem;line-height:1.3}
.cat__f{font-size:.75rem;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;padding-top:2px}
.cat:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);box-shadow:0 0 0 1px var(--cobalt) inset}
.cat:has(input:checked) .cat__f{color:var(--ink-2)}
.cat:has(input:focus-visible){outline:2px solid var(--cobalt-2);outline-offset:2px}
.cat.is-closed{background:var(--surface-2);border-style:dashed;cursor:not-allowed}
.cat.is-closed .cat__t{color:var(--ink-3)}
.cat__s{align-self:flex-start;margin-bottom:2px}

/* ---------- Diplôme ---------- */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.choice{position:relative;border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 15px;cursor:pointer;background:var(--surface);display:flex;flex-direction:column;gap:3px;transition:border-color .15s ease,background .15s ease}
.choice:hover{border-color:var(--cobalt-2)}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice__t{font-weight:600;font-size:.95rem}
.choice__d{font-size:.79rem;color:var(--ink-3)}
.choice:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-soft);box-shadow:0 0 0 1px var(--cobalt) inset}
.choice:has(input:focus-visible){outline:2px solid var(--cobalt-2);outline-offset:2px}

/* ---------- Stepper ---------- */
.stepper{display:flex;gap:5px;padding:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap}
.step{flex:1 1 120px;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--ink-3);background:transparent;border:0;font:inherit;font-size:.82rem;cursor:pointer;text-align:left}
.step__n{width:21px;height:21px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;background:var(--surface-3);color:var(--ink-2);font-family:"IBM Plex Mono",monospace}
.step__l{font-weight:500}
.step.is-done{color:var(--ink-2)}
.step.is-done .step__n{background:var(--ok-soft);color:var(--ok)}
.step.is-current{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.step.is-current .step__n{background:var(--cobalt);color:#fff}

/* Progression à l'intérieur de l'étape des pièces : un jeton par lot.
   Volontairement plus discret que le fil d'étapes du parcours, qu'il ne
   doit pas concurrencer — c'est une sous-progression, pas une étape. */
.lotbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px}
.lotbar__i{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:600;font-family:"IBM Plex Mono",monospace;background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line)}
.lotbar__i.is-done{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.lotbar__i.is-current{background:var(--cobalt);color:#fff;border-color:transparent}
.lotbar__l{margin-inline-start:6px;font-size:.8rem;color:var(--ink-3)}

.panel{display:none}
.panel.is-active{display:block}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 22px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius)}
.form-actions .spacer{flex:1}

/* ---------- Documents ---------- */
.docs{display:flex;flex-direction:column;gap:12px}
.doc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:var(--radius);padding:14px 16px;background:var(--surface);transition:border-color .15s ease,background .15s ease}
.doc:hover{border-color:var(--cobalt-2)}
.doc__ico{width:38px;height:38px;flex:none;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3)}
.doc__ico svg{width:19px;height:19px}
.doc__txt{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.doc__t{font-weight:600;font-size:.92rem}
.doc__d{font-size:.78rem;color:var(--ink-3)}
.doc input[type=file]{display:none}
.doc.is-filled{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.doc.is-filled .doc__ico{background:var(--surface);color:var(--ok)}
.doc.is-filled .doc__d{color:var(--ok)}
.doc__ico img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block}
.doc__see{font-size:.78rem;font-weight:600;color:var(--cobalt-2);text-decoration:underline;cursor:pointer}
.seal{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.seal__r{display:flex;align-items:center;gap:10px;font-size:.85rem;flex-wrap:wrap}
.seal__r b{font-weight:600}
.seal__r .f{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-3)}

/* ---------- Pills / notes ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill--ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.pill--warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pill--crit{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
.pill--info{background:var(--cobalt-soft);color:var(--cobalt);border-color:var(--cobalt-ring)}
.pill--mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.pill--cat{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2);font-weight:500}

.note{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius);font-size:.88rem;line-height:1.5;border:1px solid transparent}
/* « display:flex » l'emporte sur le « display:none » que le navigateur associe
   à l'attribut hidden : sans cette ligne, un encart masqué par un script reste
   affiché, vide. Vaut pour tout ce qui se montre et se cache. */
[hidden]{display:none!important}
.note strong{display:block;margin-bottom:2px}
.note--info{background:var(--cobalt-soft);color:var(--ink);border-color:var(--cobalt-ring)}
.note--warn{background:var(--warn-soft);color:var(--ink);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.note--crit{background:var(--crit-soft);color:var(--ink);border-color:color-mix(in srgb,var(--crit) 32%,transparent)}
.note--ok{background:var(--ok-soft);color:var(--ink);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.note__ico{flex:none;font-weight:700}

/* ---------- Récapitulatif & confirmation ---------- */
.recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.recap__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.recap__k{color:var(--ink-3)}
.recap__v{font-weight:600;text-align:right}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.check input{margin-top:3px;accent-color:var(--cobalt-2);width:16px;height:16px;flex:none}
.captcha{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-2);max-width:340px}
.captcha__b{margin-left:auto;font-size:.7rem;color:var(--ink-3);text-align:right;line-height:1.2}

.done{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:14px 0 6px}
.done__ico{width:52px;height:52px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:1.5rem;font-weight:700}
.done__num{font-family:"IBM Plex Mono",monospace;font-size:1.5rem;font-weight:500;letter-spacing:.02em}
.done__d{color:var(--ink-2);max-width:58ch}
.done__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- Reçu PDF ---------- */
.recu-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.sheet{
  width:210mm;max-width:100%;margin:0 auto;background:#fff;color:#0E1626;
  border:1px solid var(--line);box-shadow:0 4px 32px -12px rgba(14,22,38,.3);
  padding:16mm 15mm;position:relative;overflow:hidden;
}
.sheet__wm{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:4.6rem;font-weight:700;letter-spacing:.1em;
  color:rgba(23,63,138,.06);white-space:nowrap;pointer-events:none;user-select:none}
.sheet__head{display:flex;gap:16px;align-items:flex-start;border-bottom:2px solid var(--cobalt);padding-bottom:12px}
.sheet__id{flex:1;min-width:0}
.sheet__u{font-weight:600;font-size:1.02rem;line-height:1.25}
.sheet__f{font-size:.82rem;color:var(--ink-2)}
.sheet__k{font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.sheet h2{font-size:1.5rem;margin:18px 0 2px}
.sheet__sub{font-size:.85rem;color:var(--ink-2);margin-bottom:16px}
.sheet__num{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-2);margin-bottom:18px}
.sheet__num .n{font-family:"IBM Plex Mono",monospace;font-size:1.45rem;font-weight:500;letter-spacing:.02em}
.sheet__num .c{margin-left:auto;text-align:right}
.sheet__num .c b{font-family:"IBM Plex Mono",monospace;font-size:.95rem;letter-spacing:.08em}
.sheet__sec{margin-bottom:16px}
.sheet__sec > p.eyebrow{margin-bottom:8px;color:var(--cobalt)}
.sheet__kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.sheet__kv div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.84rem}
.sheet__kv span{color:var(--ink-3)}
.sheet__kv b{font-weight:600;text-align:right}
.sheet table.pieces{width:100%;min-width:0;border-collapse:collapse;font-size:.82rem}
.sheet table.pieces th{background:var(--surface-2);text-align:left;padding:8px 10px;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.sheet table.pieces td{padding:8px 10px;border-bottom:1px solid var(--line)}
.sheet__foot{display:flex;gap:18px;align-items:flex-start;border-top:1px solid var(--line);padding-top:14px;margin-top:20px}
.sheet__mentions{flex:1;font-size:.74rem;color:var(--ink-2);line-height:1.6}
.sheet__mentions b{color:var(--ink)}
.qr{width:104px;height:104px;flex:none;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr);border:5px solid #fff;outline:1px solid var(--line)}
.qr i{background:#0E1626}
.qr__l{font-size:.66rem;color:var(--ink-3);text-align:center;margin-top:5px;font-family:"IBM Plex Mono",monospace}

/* ---------- Admin ---------- */
.scope{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;flex-wrap:wrap}
.scope__b{font:inherit;font-size:.84rem;font-weight:500;padding:6px 14px;border-radius:99px;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.scope__b::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--fac,var(--ink-3));flex:none}
.scope__b:hover{background:var(--surface)}
.scope__b[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border-color:var(--line)}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow)}
.kpi__v{font-size:1.9rem;font-weight:600;line-height:1;letter-spacing:-.018em}
.kpi__l{font-size:.82rem;color:var(--ink-2)}
.kpi__d{font-size:.76rem;color:var(--ink-3)}
.kpi--attn{border-color:color-mix(in srgb,var(--warn) 42%,var(--line))}
.kpi--attn .kpi__v{color:var(--warn)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:.82rem;font-weight:500;padding:6px 12px;border-radius:99px;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.search{flex:1;min-width:180px;max-width:280px}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:960px}
thead th{text-align:left;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{cursor:pointer;transition:background .12s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td .who{display:flex;flex-direction:column;gap:1px}
td .who b{font-weight:600}
td .who span{font-size:.78rem;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace;font-size:.83rem;color:var(--ink-2)}
table.hide-fac th:nth-child(2),table.hide-fac td:nth-child(2){display:none}
table.calendrier{min-width:720px}
table.calendrier td{font-size:.85rem}
table.calendrier td:first-child{font-weight:600}

.bars{display:flex;flex-direction:column;gap:10px}
.bar{display:grid;grid-template-columns:250px 1fr 46px;align-items:center;gap:12px}
.bar--cat{grid-template-columns:190px 1fr 46px}
.bar__l{font-size:.85rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__t{background:var(--surface-2);border-radius:4px;height:14px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--fac,var(--cobalt));border-radius:0 4px 4px 0}
.bar__v{font-size:.83rem;text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace;color:var(--ink)}

.set{display:flex;flex-direction:column;gap:10px}
.set__r{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.set__t{flex:1;min-width:180px;font-size:.9rem;font-weight:600}
.set__d{font-size:.78rem;color:var(--ink-3);font-weight:400;display:block}
.set__dates{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-2)}
.set__dates .input{padding:5px 8px;font-size:.8rem;width:auto}
.set__where{display:flex;gap:4px}
.set__where .w{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;padding:2px 6px;border-radius:5px;background:var(--surface-3);color:var(--ink-3);border:1px solid transparent}
.set__where .w.on{color:var(--fac);background:var(--fac-bg);border-color:color-mix(in srgb,var(--fac) 30%,transparent)}
.switch{position:relative;width:40px;height:22px;flex:none}
.switch input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .15s ease;pointer-events:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s ease;box-shadow:0 1px 2px rgba(14,22,38,.25)}
.switch input:checked + i{background:var(--ok)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:focus-visible + i{outline:2px solid var(--cobalt-2);outline-offset:2px}

.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.is-open{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(23,42,80,.28)}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}
.drawer__head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.drawer__body{padding:22px;display:flex;flex-direction:column;gap:20px;flex:1}
.drawer__foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;background:var(--surface-2)}
.kv{display:flex;flex-direction:column;gap:9px}
.kv__r{display:flex;justify-content:space-between;gap:14px;font-size:.88rem}
.kv__r span{color:var(--ink-3)}
.kv__r b{font-weight:600;text-align:right}
.filelist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.filelist li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.filelist .name{flex:1;min-width:140px;font-size:.9rem;font-weight:500}

.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl{display:flex;gap:16px;padding-bottom:20px;position:relative}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line)}
.tl:last-child::before{display:none}
.tl__dot{width:24px;height:24px;flex:none;border-radius:50%;z-index:1;display:grid;place-items:center;font-size:.7rem;font-weight:700;background:var(--surface-3);color:var(--ink-3);border:2px solid var(--surface)}
.tl.is-done .tl__dot{background:var(--ok);color:#fff}
.tl.is-current .tl__dot{background:var(--cobalt);color:#fff;box-shadow:0 0 0 4px var(--cobalt-soft)}
.tl__b{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.tl__t{font-weight:600;font-size:.94rem}
.tl__d{font-size:.82rem;color:var(--ink-3)}
.tl:not(.is-done):not(.is-current) .tl__t{color:var(--ink-3);font-weight:500}

/* ---------- Spécifications ---------- */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.spec .card__body{display:flex;flex-direction:column;gap:12px}
.spec ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:.9rem;color:var(--ink-2)}
.spec li b{color:var(--ink)}
.code{font-family:"IBM Plex Mono",monospace;font-size:.79rem;line-height:1.7;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;overflow-x:auto;white-space:pre;color:var(--ink-2);margin:0}
.flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.82rem}
.flow__s{padding:5px 11px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);font-weight:500}
.flow__a{color:var(--ink-3)}
.roles{display:flex;flex-direction:column;gap:10px}
.role{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.role b{display:block;color:var(--ink)}
.role span{color:var(--ink-2)}
.matrix{width:100%;min-width:520px;font-size:.85rem}
.matrix th:first-child{text-align:left}
.matrix th:not(:first-child),.matrix td:not(:first-child){text-align:center}
.matrix td{padding:10px 12px}
.matrix .y{color:var(--ok);font-weight:700}
.matrix .n{color:var(--ink-3)}

/* ---------- Impression : seul le reçu sort ---------- */
@media print{
  .proto,.appbar,.recu-bar{display:none!important}
  .screen{display:none!important}
  .screen[data-screen="recu"]{display:block!important}
  .wrap{padding:0;max-width:none}
  body{background:#fff}
  .sheet{border:0;box-shadow:none;padding:0;width:auto}
}


/* ---------- Poste de vérification (agents) ---------- */
/* La visionneuse prend toute la place disponible : c'est elle que l'agent
   regarde pendant les deux cents dossiers de la journée. La colonne des
   décisions est réduite au strict nécessaire, et la page sort de la largeur
   de lecture habituelle — un PDF A4 lu à 60 % est illisible. */
.verif{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
/* Le poste 2IA loge en plus la liste des notes : sa colonne est plus large. */
.verif--2ia{grid-template-columns:minmax(0,1fr) 356px}
.wrap--large{max-width:1680px}
.file{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.file__t{font-weight:600;font-size:.92rem}
.file__b{flex:1;min-width:160px;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.file__f{display:block;height:100%;background:var(--cobalt);border-radius:99px}
.file__c{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

.visio{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.visio__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.visio__nom{font-weight:600;font-size:.88rem;flex:1;min-width:140px}
.visio__zoom{display:flex;gap:4px;align-items:center}
.visio__scene{background:var(--surface-3);padding:0;display:block;height:min(68vh,880px);overflow:auto}
/* Le poste 2IA demande de confronter un scan à des valeurs déclarées : c'est
   la visionneuse qui doit être grande. Les notes sont passées dans la colonne
   latérale — le regard va horizontalement d'une valeur à la même valeur sur le
   document — et la scène récupère toute la hauteur disponible. */
.visio--2ia .visio__scene{height:min(80vh,1040px)}

/* Notes déclarées par le candidat. Une ligne par valeur, cochable : sur un
   relevé de vingt lignes, l'agent doit pouvoir reprendre où il en était après
   avoir zoomé. La valeur est en gros chiffres à droite, alignée d'une ligne à
   l'autre — c'est elle qu'on cherche, pas son intitulé. */
.notes-2ia{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.note-2ia{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .12s ease}
.note-2ia:last-child{border-bottom:0}
.note-2ia:hover{background:var(--surface-2)}
.note-2ia__vu{width:16px;height:16px;margin:0;accent-color:var(--ok);cursor:pointer}
.note-2ia__k{font-size:.82rem;color:var(--ink-2);line-height:1.25}
.note-2ia__v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1.32rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* La moyenne générale résume les autres : elle se lit en premier. */
.note-2ia--tete{background:var(--cobalt-soft)}
.note-2ia--tete .note-2ia__k{font-weight:600;color:var(--ink)}
.note-2ia--tete .note-2ia__v{color:var(--cobalt);font-size:1.5rem}
/* Une valeur non saisie ne se compare à rien : elle doit sauter aux yeux. */
.note-2ia.est-vide .note-2ia__v{color:var(--crit)}
.note-2ia.est-vide .note-2ia__k::after{content:" — non saisie";color:var(--crit);font-size:.72rem}
/* Cochée, la ligne s'efface : ce qui reste à faire est ce qui ressort. */
.note-2ia.est-vue{background:var(--ok-soft)}
.note-2ia.est-vue .note-2ia__k{color:var(--ink-3)}
.note-2ia.est-vue .note-2ia__v{color:var(--ink-3)}
.scan{background:#fff;width:420px;max-width:100%;aspect-ratio:1/1.414;box-shadow:0 6px 30px -10px rgba(14,22,38,.45);padding:26px 24px;transform-origin:center;transition:transform .15s ease;font-size:.68rem;color:#2A3346;position:relative}
.scan h4{font-size:1rem;margin:0 0 3px}
.scan .l{height:6px;background:#E4E8F0;border-radius:2px;margin:7px 0}
.scan .l.s{width:60%}
.scan .l.m{width:80%}
.scan__cachet{position:absolute;right:26px;bottom:34px;width:74px;height:74px;border:2px solid rgba(23,63,138,.35);border-radius:50%;display:grid;place-items:center;color:rgba(23,63,138,.45);font-size:.55rem;text-align:center;transform:rotate(-12deg);line-height:1.2}
.scan__sim{position:absolute;left:24px;bottom:20px;font-size:.55rem;color:#9AA3B5;letter-spacing:.08em;text-transform:uppercase}
.vignettes{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2);overflow-x:auto}
.vignette{flex:none;width:88px;height:66px;text-decoration:none;overflow:hidden;border-radius:6px;border:2px solid var(--line-2);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:.6rem;color:var(--ink-3);padding:4px;text-align:center;line-height:1.15;position:relative}
.vignette[aria-current="true"]{border-color:var(--cobalt);box-shadow:0 0 0 2px var(--cobalt-soft)}
.vignette__e{position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;font-size:.55rem;font-weight:700;color:#fff}
.vignette__e.ok{background:var(--ok)}
.vignette__e.crit{background:var(--crit)}
.vignette__e.attente{background:var(--warn)}

.decision{display:flex;flex-direction:column;gap:10px}
.motifs{display:flex;gap:6px;flex-wrap:wrap}
.motif{font:inherit;font-size:.78rem;padding:5px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.motif:hover{background:var(--surface-2)}
.motif[aria-pressed="true"]{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 40%,transparent);color:var(--crit)}
.touches{display:flex;gap:10px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-3);align-items:center}
kbd{font-family:"IBM Plex Mono",monospace;font-size:.72rem;background:var(--surface-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink-2)}

/* ---------- Pilotage (présidence) ---------- */
.graph{width:100%;height:auto;aspect-ratio:720/220;display:block;overflow:visible}
.graph text{font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:10px;fill:var(--ink-3)}
.graph .axe{stroke:var(--line);stroke-width:1}
.graph .aire{fill:var(--cobalt);opacity:.10}
.graph .courbe{fill:none;stroke:var(--cobalt);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graph .point{fill:var(--cobalt);stroke:var(--surface);stroke-width:2}
.graph .viseur{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3}
.bulle{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px 10px;font-size:.78rem;white-space:nowrap;opacity:0;transition:opacity .1s ease;z-index:5}
.bulle b{font-family:"IBM Plex Mono",monospace}
.graph-wrap{position:relative}
.empile{display:flex;height:16px;border-radius:4px;overflow:hidden;background:var(--surface-2);gap:2px}
.empile span{display:block;height:100%}
.legende{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-2);margin-top:10px}
.legende i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.repartition{display:flex;flex-direction:column;gap:12px}
.repartition__l{display:flex;align-items:center;gap:10px;font-size:.85rem}
.repartition__l b{width:52px;font-family:"IBM Plex Mono",monospace;font-size:.78rem}
.donnees{width:100%;font-size:.82rem;min-width:0}
.donnees th,.donnees td{padding:6px 10px}

@media (max-width:1240px){
  .verif,.verif--2ia{grid-template-columns:1fr}
  .visio__scene,.visio--2ia .visio__scene{height:min(62vh,700px)}
}


/* ---------- Bascule de langue ---------- */
.btn--lang{font-family:"Noto Kufi Arabic","Archivo",sans-serif;border-color:var(--cobalt-ring);background:var(--cobalt-soft);color:var(--cobalt);font-weight:600}
.btn--lang:hover{background:#DCE7FA}

/* ---------- Version arabe : lecture de droite à gauche ---------- */
[dir="rtl"]{font-family:"Noto Naskh Arabic","Archivo",sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .brand__t,[dir="rtl"] .eyebrow,[dir="rtl"] .btn,[dir="rtl"] .step,
[dir="rtl"] .pill,[dir="rtl"] .cat__t,[dir="rtl"] .fac-card__t,
[dir="rtl"] .doc__t,[dir="rtl"] .recap__k,[dir="rtl"] thead th{font-family:"Noto Kufi Arabic","Archivo",sans-serif}
/* L'arabe est une écriture liée : l'interlettrage des micro-titres la casse. */
[dir="rtl"],[dir="rtl"] *{letter-spacing:normal}
[dir="rtl"] .mono,[dir="rtl"] .num,[dir="rtl"] input.mono,[dir="rtl"] .sheet__num b{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .appbar__right{margin-left:0;margin-right:auto}
[dir="rtl"] .select{background-position:17px 50%,12px 50%;padding-right:12px;padding-left:36px}
[dir="rtl"] .info{border-left:1px solid var(--line);border-right:4px solid var(--fac,var(--line-2))}
[dir="rtl"] .fac-card::before{left:auto;right:0}
[dir="rtl"] .step,[dir="rtl"] .mstep__h{text-align:right}
[dir="rtl"] .seal__r .f{margin-left:0;margin-right:auto}
[dir="rtl"] .recap__v,[dir="rtl"] .sheet__kv b{text-align:left}
[dir="rtl"] .captcha__b{margin-left:0;margin-right:auto;text-align:left}
[dir="rtl"] .sheet__num .c{margin-left:0;margin-right:auto;text-align:left}
[dir="rtl"] .sheet table.pieces th{text-align:right}
[dir="rtl"] .tl::before{left:auto;right:11px}
[dir="rtl"] .mstep__f{margin-left:auto}
[dir="rtl"] .hero h1,[dir="rtl"] .hero__lede{max-width:34ch}

/* ---------- Dépôt sur téléphone ---------- */
.mstep{display:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.mstep__h{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.mstep__h b{font-size:.98rem;font-weight:600}
.mstep__h span{margin-inline-start:auto;font-size:.76rem;color:var(--ink-3)}
.mstep__b{display:block;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.mstep__f{display:block;height:100%;background:var(--cobalt);border-radius:99px;transition:width .25s ease}
.doc__act{display:flex;gap:8px;flex-wrap:wrap}
.doc.is-bad{border-style:solid;border-color:var(--crit);background:var(--crit-soft)}
.doc.is-bad .doc__ico{background:var(--surface);color:var(--crit)}
.doc.is-bad .doc__d{color:var(--crit);font-weight:600}

@media (max-width:640px){
  .input,.select,.textarea{font-size:16px;padding:13px 12px}   /* évite le zoom automatique d'iOS */
  .btn{min-height:46px}
  .btn--sm{min-height:40px}
  .stepper{display:none}
  .mstep{display:block}
  .doc{display:grid;grid-template-columns:44px minmax(0,1fr);
       grid-template-areas:"i t" "a a" "s s";gap:10px 12px;align-items:center;padding:13px 14px}
  .doc__ico{grid-area:i;width:44px;height:44px}
  .doc__txt{grid-area:t;min-width:0}
  .doc__act{grid-area:a}
  .doc__act .btn{flex:1 1 0;min-width:0}
  .doc__see{grid-area:s}
  .fac-card,.cat,.choice{min-height:64px}
  /* La barre d'action reste sous le pouce, au-dessus du clavier virtuel. */
  .form-actions{position:sticky;bottom:0;z-index:20;border-radius:0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 22px -14px rgba(14,22,38,.55)}
  .form-actions .btn{flex:1 1 auto}
  .form-actions .btn--ghost{flex:0 0 auto}
  .form-actions .hint{order:-1;flex:1 1 100%}
  .form-actions .spacer{display:none}
}

/* ---------- Comptes du back-office ---------- */
/* Une ligne désactivée reste lisible — son nom apparaît encore dans les
   dossiers traités — mais recule visuellement. */
tr.est-inactif td{opacity:.55}
tr.est-inactif .who b{font-weight:500}
tr.volet > td{background:var(--surface-2);border-bottom:2px solid var(--line)}
.mdp{display:inline-block;margin:8px 0;padding:9px 16px;background:var(--surface);
  border:1px dashed var(--line-2);border-radius:var(--radius-sm);
  font-family:"IBM Plex Mono",monospace;font-size:1.15rem;letter-spacing:.06em;
  color:var(--ink);user-select:all;word-break:break-all}

/* ---------- Extraction : filtres et choix des colonnes ---------- */
.cases{display:flex;flex-direction:column;gap:6px}
.case{display:flex;align-items:flex-start;gap:8px;font-size:.85rem;color:var(--ink-2);cursor:pointer;
  padding:5px 8px;border-radius:var(--radius-sm);border:1px solid transparent}
.case:hover{background:var(--surface-2)}
.case input{margin-top:2px;flex:none;width:15px;height:15px;accent-color:var(--cobalt-2)}
.case b{font-weight:600;color:var(--ink)}
.case:has(input:checked){background:var(--cobalt-soft);border-color:var(--cobalt-ring);color:var(--ink)}
.case[style*="--fac"]:has(input:checked){background:color-mix(in srgb,var(--fac) 10%,transparent);
  border-color:color-mix(in srgb,var(--fac) 35%,transparent)}
/* Les colonnes personnelles portent une pastille : l'œil doit les repérer
   avant de cocher, pas après avoir envoyé le fichier. */
.case--sensible b{color:var(--clay);font-size:1.1rem;line-height:0}
.case--sensible:has(input:checked){background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.colonnes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .cats,.howto{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec,.duo{grid-template-columns:1fr}
  .recap{grid-template-columns:1fr}
  .facs,.trio{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .sheet{padding:22px 20px}
  .sheet__kv{grid-template-columns:1fr}
}
@media (max-width:640px){
  h1{font-size:1.62rem}
  .wrap{padding:20px 15px 60px}
  .hero__in{padding:38px 15px 34px}
  .card__body{padding:17px}
  .card__head,.form-actions,.drawer__head,.drawer__body,.drawer__foot{padding-left:17px;padding-right:17px}
  .grid,.choices,.kpis,.cats,.howto{grid-template-columns:1fr}
  .step{flex:1 1 100%}
  .bar,.bar--cat{grid-template-columns:1fr 42px;grid-template-areas:"l l" "t v"}
  .bar__l{grid-area:l}.bar__t{grid-area:t}.bar__v{grid-area:v}
  .proto__nav{margin-left:0;width:100%}
  .proto__btn{font-size:.8rem;padding:6px 10px}
  .card__head{flex-direction:column;align-items:flex-start;gap:6px}
  .form-actions .btn{flex:1}
  .sheet__wm{font-size:2.6rem}
  .brand__mark.has-logo img{height:46px}
  .brand__mark--lg.has-logo img{height:74px}
}