/* gomme — feuille de style unique (Cabinet JMH)
   Référence : docs/design/design_handoff_gomme/README.md
   Aucune ressource externe : la police IBM Plex Mono est servie par le serveur. */

/* ───────────── Police (hébergée localement, licence OFL) ───────────── */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/statique/polices/ibm-plex-mono-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(/statique/polices/ibm-plex-mono-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:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/statique/polices/ibm-plex-mono-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:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/statique/polices/ibm-plex-mono-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(/statique/polices/ibm-plex-mono-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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(/statique/polices/ibm-plex-mono-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:600;font-display:swap;src:url(/statique/polices/ibm-plex-mono-ext-600.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:700;font-display:swap;src:url(/statique/polices/ibm-plex-mono-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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}

/* ───────────── Variables : thème clair ───────────── */
:root{
  color-scheme:light;
  --bg:#F4F4F4;--sf:#FFFFFF;--sf2:#F6F6F6;--ln:#EBEBEB;--ln2:#D6D6D6;
  --tx:#161616;--mu:#6E6E6E;
  --ac:#EB7823;--ach:#D96A16;--act:#161616;--acs:#FDE8D6;
  --ink:#161616;--inkt:#FFFFFF;--inkl:rgba(255,255,255,.14);
  --dg:#B42318;--dgs:#FDECEA;--wn:#8A4B00;--wns:#FFF2E0;
  --s-bg:#FDE8D6;--s-tx:#8A3F06;--s-ln:#EB7823;
  --p-bg:#161616;--p-tx:#FFFFFF;--p-ln:#161616;
  --i-bg:#E4E4E4;--i-tx:#161616;--i-ln:#9A9A9A;
  --ringp:#FFFFFF;
  --ui:system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --r-carte:clamp(24px,3vw,32px);
  --pad-carte:clamp(18px,2.5vw,28px);
  --marge:clamp(14px,4vw,40px);
}

/* ───────────── Variables : thème sombre (système, ou forcé par le bouton « Thème ») ───────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    color-scheme:dark;
    --bg:#0E0E0E;--sf:#1A1A1A;--sf2:#222222;--ln:#2E2E2E;--ln2:#4A4A4A;
    --tx:#F2F2F2;--mu:#A8A8A8;
    --ac:#EB7823;--ach:#F58B3E;--act:#111111;--acs:#3A230F;
    --ink:#F2F2F2;--inkt:#111111;--inkl:rgba(0,0,0,.12);
    --dg:#FF8A80;--dgs:#3A1A1A;--wn:#FFC970;--wns:#33280F;
    --s-bg:#4A2A0C;--s-tx:#FFC48F;--s-ln:#EB7823;
    --p-bg:#F2F2F2;--p-tx:#111111;--p-ln:#F2F2F2;
    --i-bg:#333333;--i-tx:#EDEDED;--i-ln:#8A8A8A;
    --ringp:#111111;
  }
}
:root[data-theme="sombre"]{
  color-scheme:dark;
  --bg:#0E0E0E;--sf:#1A1A1A;--sf2:#222222;--ln:#2E2E2E;--ln2:#4A4A4A;
  --tx:#F2F2F2;--mu:#A8A8A8;
  --ac:#EB7823;--ach:#F58B3E;--act:#111111;--acs:#3A230F;
  --ink:#F2F2F2;--inkt:#111111;--inkl:rgba(0,0,0,.12);
  --dg:#FF8A80;--dgs:#3A1A1A;--wn:#FFC970;--wns:#33280F;
  --s-bg:#4A2A0C;--s-tx:#FFC48F;--s-ln:#EB7823;
  --p-bg:#F2F2F2;--p-tx:#111111;--p-ln:#F2F2F2;
  --i-bg:#333333;--i-tx:#EDEDED;--i-ln:#8A8A8A;
  --ringp:#111111;
}

/* ───────────── Base ───────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:400 15px/1.45 var(--ui);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
a{color:inherit}
a:hover{color:var(--ach)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
.mu{color:var(--mu)}
.invisible{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lien-evitement{position:absolute;left:var(--marge);top:-60px;z-index:20;min-height:44px;display:flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--inkt);text-decoration:none}
.lien-evitement:focus{top:12px}

/* Focus clavier : contour net, jamais supprimé */
:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.champ:focus-visible,.liste-deroulante select:focus-visible,textarea:focus-visible{outline:3px solid var(--acs);outline-offset:0;border-color:var(--tx)}

/* ───────────── En-tête et onglets ───────────── */
.entete{max-width:1280px;margin:0 auto;padding:clamp(14px,3vw,28px) var(--marge) 8px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.logos{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--tx)}
.logos:hover{color:var(--tx)}
.logo-jmh{height:28px;width:auto;flex:none}
.filet-v{flex:none;width:1px;height:32px;background:var(--ln2)}
.entete-espace{flex:1}
.btn-entete{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--ln2);border-radius:999px;background:transparent;color:var(--tx);font-size:13.5px;white-space:nowrap;text-decoration:none}
.btn-entete:hover{background:var(--sf);color:var(--tx)}
.onglets{flex:1 1 100%;display:flex;gap:2px;padding:5px;background:var(--sf);border-radius:999px;overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets a{flex:none;min-height:42px;display:flex;align-items:center;padding:0 16px;border-radius:999px;color:var(--tx);font-size:14.5px;text-decoration:none;white-space:nowrap}
.onglets a:hover{background:var(--sf2);color:var(--tx)}
.onglets a[aria-current="page"]{background:var(--ink);color:var(--inkt);padding:0 18px}
.onglets a:focus-visible{outline-offset:-2px}

/* ───────────── Logotype « gomme » (piste 1c) ───────────── */
.logotype{display:inline-flex;align-items:baseline;font:700 30px/1 var(--ui);letter-spacing:-.06em;color:var(--tx);white-space:nowrap}
.logotype-o{display:inline-block;width:.53em;height:.53em;border-radius:50%;background:var(--ac);margin:0 .04em;align-self:flex-end;margin-bottom:.035em}
.logotype-e{opacity:.2}
.logotype.grand{font-size:40px}

/* ───────────── Mise en page ───────────── */
.contenu{max-width:1280px;margin:0 auto;padding:12px var(--marge) 48px;display:flex;flex-direction:column;gap:16px}
.ligne{display:flex;flex-wrap:wrap;gap:16px}
.ligne.haut{align-items:flex-start}
.carte{background:var(--sf);border-radius:var(--r-carte);padding:var(--pad-carte);display:flex;flex-direction:column;gap:14px;min-width:0}
.carte.encre{background:var(--ink);color:var(--inkt)}
.carte.large{padding:clamp(24px,5vw,48px)}
.carte-titre{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
h2.titre-carte,.titre-carte{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.titre-petit{font-size:18px;font-weight:500;letter-spacing:-.02em}
.aide{font-size:14px;line-height:1.45;color:var(--mu)}

/* Grand titre en deux tons */
.tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;padding:12px 4px}
.titre{flex:1 1 420px;font-size:clamp(30px,5vw,46px);line-height:1.08;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.titre .mu,.titre-moyen .mu{color:var(--mu)}
.titre-moyen{font-size:clamp(26px,3.6vw,38px);line-height:1.12;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.chapo{flex:0 1 340px;font-size:16px;line-height:1.45;color:var(--mu)}

/* ───────────── Boutons ───────────── */
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-size:15px;font-weight:400;text-decoration:none;white-space:nowrap;line-height:1.2;text-align:center}
.btn-principal{min-height:58px;justify-content:space-between;padding:0 26px;background:var(--ac);color:var(--act);font-size:16px;font-weight:500}
.btn-principal:hover{background:var(--ach);color:var(--act)}
.btn-principal .fleche{font-size:20px;line-height:1}
.btn-principal.compact{min-height:48px;justify-content:center;font-size:14.5px;font-weight:400}
.btn-encre{background:var(--ink);color:var(--inkt);font-size:14.5px}
.btn-encre:hover{color:var(--inkt);opacity:.88}
.btn-second{min-height:52px;background:var(--sf);border-color:var(--ln2);color:var(--tx)}
.btn-second:hover{background:var(--sf2);color:var(--tx)}
.btn-danger{background:transparent;border-color:var(--dg);color:var(--dg);font-size:14px}
.btn-danger:hover{background:var(--dgs);color:var(--dg)}
.btn-petit{min-height:44px;padding:0 20px;font-size:14.5px}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--sf2);color:var(--mu);border-color:transparent;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions>.btn{flex:1 1 130px}

/* ───────────── Champs ───────────── */
.etiquette{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--mu)}
.champ{width:100%;min-height:48px;padding:0 20px;border:1px solid var(--ln2);border-radius:999px;background:var(--sf);color:var(--tx);font-size:16px}
.champ.grand{min-height:58px;padding:0 22px;font-size:18px}
.champ:disabled{background:var(--sf2);color:var(--mu);cursor:not-allowed}
.liste-deroulante{position:relative;display:block}
.liste-deroulante select{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;padding:0 44px 0 18px;border:1px solid var(--ln2);border-radius:999px;background:var(--sf);color:var(--tx);font-size:15px;text-overflow:ellipsis}
.liste-deroulante.grand select{min-height:54px;padding-left:20px;font-size:16px}
.liste-deroulante::after{content:"▼";position:absolute;right:20px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:9px;color:var(--tx)}
textarea.zone-texte{width:100%;min-height:220px;padding:18px 20px;border:1px solid var(--ln2);border-radius:24px;background:var(--sf);color:var(--tx);font:13px/24px var(--mono);resize:vertical}
input[type=file].fichier-csv{width:100%;min-height:52px;padding:4px;border:1px dashed var(--ln2);border-radius:999px;background:var(--sf2);color:var(--mu);font:13px var(--mono)}
input[type=file].fichier-csv::file-selector-button{min-height:42px;margin-right:12px;padding:0 18px;border:1px solid var(--ln2);border-radius:999px;background:var(--sf);color:var(--tx);font:14px var(--ui);cursor:pointer}

/* ───────────── Bandeaux ───────────── */
.bandeau{border-radius:24px;padding:16px 20px;font-size:14.5px;line-height:1.45;display:flex;gap:14px;align-items:center}
.bandeau.alerte{background:var(--wns);color:var(--wn)}
.bandeau.erreur{background:var(--dgs);color:var(--tx)}
.bandeau.ok{background:var(--sf);color:var(--tx)}
.bandeau strong{font-weight:600}
.rond-ok{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--inkt);display:flex;align-items:center;justify-content:center;font-size:15px}

/* ───────────── Alias (élément signature) ───────────── */
.alias{border-radius:999px;font-family:var(--mono);font-weight:600;white-space:pre}
mark.alias{color:inherit;background:none}
.alias.a-s{background:var(--s-bg);color:var(--s-tx);box-shadow:0 0 0 3px var(--s-bg)}
.alias.a-p{background:var(--p-bg);color:var(--p-tx);box-shadow:0 0 0 3px var(--p-bg)}
.alias.a-i{background:var(--i-bg);color:var(--i-tx);box-shadow:0 0 0 3px var(--i-bg)}
.pilule-alias{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font:600 12.5px/1.6 var(--mono);white-space:nowrap}
.pilule-alias.a-s{background:var(--s-bg);color:var(--s-tx)}
.pilule-alias.a-p{background:var(--p-bg);color:var(--p-tx)}
.pilule-alias.a-i{background:var(--i-bg);color:var(--i-tx)}
.point{flex:none;width:6px;height:6px;border-radius:50%}
.point.a-s{background:var(--s-ln)}.point.a-p{background:var(--p-ln)}.point.a-i{background:var(--i-ln)}

/* ───────────── Connexion ───────────── */
.connexion{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.connexion-cartes{width:100%;max-width:1080px;display:flex;flex-wrap:wrap;gap:16px}
.connexion-cartes>.carte{border-radius:clamp(28px,4vw,40px);padding:clamp(24px,5vw,48px)}
.connexion-gauche{flex:1.15 1 340px;justify-content:space-between;gap:32px;min-height:min(560px,70vh)}
.connexion-gauche .logos{gap:16px;flex-wrap:wrap}
.connexion-gauche .logo-jmh{height:36px}
.connexion-gauche .filet-v{height:36px}
.titre-connexion{font-size:clamp(32px,5vw,50px);line-height:1.06;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
.demo-alias{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:15px}
.demo-alias .avant{min-height:44px;display:flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--sf2)}
.rond-fleche{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ln2);display:flex;align-items:center;justify-content:center;color:var(--ac)}
.demo-alias .apres{min-height:44px;display:flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--p-bg);color:var(--p-tx);font:600 14px var(--mono)}
.connexion-droite{flex:1 1 320px;justify-content:center;gap:20px}
.connexion-droite h2{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-.03em;margin-bottom:4px}
.connexion-droite .sous-titre{font-size:15px;color:var(--mu)}
.erreur-ligne{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--dg)}
.rond-exclam{flex:none;width:24px;height:24px;border-radius:50%;background:var(--dg);color:var(--sf);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.blocage{display:flex;gap:14px;align-items:center;background:var(--dgs);border-radius:24px;padding:16px 18px;font-size:14.5px;line-height:1.45}
.blocage-compteur{flex:none;width:60px;height:60px;border-radius:50%;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.blocage-compteur b{font-size:22px;font-weight:400;color:var(--dg)}
.blocage-compteur span{font-size:11px;color:var(--mu)}

/* ───────────── Pastilles d'étape ───────────── */
.pastilles{flex:none;display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.pastille{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.pastille.faite{background:var(--ink);color:var(--inkt);font-size:17px}
.pastille.en-cours{border:1px solid var(--tx)}
.pastille.hors{border:1px dashed var(--ln2);color:var(--mu)}

/* ───────────── Déposer : usages ───────────── */
.usages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.usage{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:24px;background:var(--sf2);color:var(--tx);cursor:pointer}
.usage:hover{background:var(--ln)}
.usage input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.usage-haut{display:flex;justify-content:space-between;align-items:center;width:100%}
.usage-rond{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--ln2);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--act)}
.usage-choisi{font-size:13px;opacity:.75;visibility:hidden}
.usage-titre{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.usage-desc{font-size:14px;line-height:1.45;color:var(--mu)}
.usage-exemple{font:12.5px/1.6 var(--mono);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.usage:has(input:checked){background:var(--ink);color:var(--inkt)}
.usage:has(input:checked) .usage-desc{color:inherit;opacity:.75}
.usage:has(input:checked) .usage-rond{border:0;background:var(--ac)}
.usage:has(input:checked) .usage-rond::after{content:"✓"}
.usage:has(input:checked) .usage-choisi{visibility:visible}
.usage:has(input:checked) .pilule-alias.a-p{background:var(--inkt);color:var(--ink)}
.usage:has(input:focus-visible){outline:2px solid var(--tx);outline-offset:2px}

/* Étapes 2-3 ou carte « Juridique » selon l'usage choisi (sans JavaScript) */
.si-juridique{display:none}
.form-depot:has(input[data-sans-masquage]:checked) .si-juridique{display:flex}
.form-depot:has(input[data-sans-masquage]:checked) .si-masquage{display:none}
.pastilles .p-juridique{display:none}
.depot-page:has(input[data-sans-masquage]:checked) .pastilles .p-masquage{display:none}
.depot-page:has(input[data-sans-masquage]:checked) .pastilles .p-juridique{display:flex}
.carte-juridique{flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.carte-juridique>div{flex:1 1 420px;display:flex;flex-direction:column;gap:16px}
.carte-juridique p.aide{font-size:15px;line-height:1.5;max-width:560px}

/* ───────────── Déposer : client et fichiers ───────────── */
.carte-client{flex:1 1 300px}
.carte-client .liste-deroulante{margin-top:auto}
.carte-fichiers{flex:3 1 420px}
.zone-depot{border:1.5px dashed var(--ln2);border-radius:24px;padding:10px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,background-color .15s}
.zone-depot.survol{border-style:solid;border-color:var(--ac);background:var(--acs)}
.zone-depot:has(#liste-fichiers[hidden]) .zone-depot-invite{min-height:132px}
.zone-depot-invite{min-height:48px;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;padding:4px 12px;font-size:14px;color:var(--mu);text-align:center}
.zone-depot-invite label{color:var(--tx);font-weight:500;text-decoration:underline;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.zone-depot-invite label:has(+ input:focus-visible),.zone-depot:has(input[type=file]:focus-visible) .zone-depot-invite label{outline:2px solid var(--tx);outline-offset:2px;border-radius:6px}
.zone-depot input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
.zone-depot.survol .zone-depot-invite .normal{display:none}
.zone-depot .zone-depot-invite .depose{display:none}
.zone-depot.survol .zone-depot-invite .depose{display:inline;color:var(--tx);font-weight:500}
.fichiers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fichier{display:flex;align-items:center;gap:12px;background:var(--sf2);border-radius:999px;padding:6px}
.fichier-ext{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sf);display:flex;align-items:center;justify-content:center;font:600 10px var(--mono)}
.fichier-nom{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fichier-nom .mu{color:var(--mu)}
.fichier-retirer{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--sf);color:var(--tx);font-size:16px}
.fichier-retirer:hover{background:var(--ln)}
.envoi{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.envoi .btn-principal{flex:1 1 260px;max-width:340px}
.envoi .note{flex:1 1 220px;font-size:14px;color:var(--mu)}

/* ───────────── Masquage en cours ───────────── */
.progression-carte{flex:1 1 280px;align-items:center;gap:18px;padding:28px}
.progression-carte .etat{align-self:flex-start;font-size:15px;opacity:.75}
.anneau{position:relative;flex:none;display:flex;align-items:center;justify-content:center}
.anneau svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.anneau-centre{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-align:center}
.anneau-progression{width:180px;height:180px}
.anneau-progression .valeur{font-size:44px;letter-spacing:-.04em}
.anneau-progression .legende{font-size:13px;opacity:.75}
.anneau .fond{stroke:rgba(127,127,127,.25)}
.anneau .avance{stroke:var(--ac);transition:stroke-dasharray .3s}
.progression-carte .rassure{font-size:14px;line-height:1.45;opacity:.75;text-align:center}
.progression-liste{flex:3 1 420px;gap:8px}
.progression-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--sf2);border-radius:28px;padding:8px 20px 8px 8px}
.progression-rond{flex:none;width:44px;height:44px;border-radius:50%;border:1px dashed var(--ln2);display:flex;align-items:center;justify-content:center}
.progression-ligne.fait .progression-rond{border:0;background:var(--ink);color:var(--inkt)}
.progression-ligne.fait .progression-rond::after{content:"✓"}
.progression-ligne.refuse .progression-rond{border:0;background:var(--dgs);color:var(--dg)}
.progression-ligne.refuse .progression-rond::after{content:"!";font-weight:700}
.progression-ligne.en-cours .progression-rond{border:3px solid var(--ac);border-right-color:var(--ln2);animation:tourne 1s linear infinite}
.progression-nom{flex:1 1 160px;min-width:0;font-size:14.5px;overflow-wrap:anywhere}
.progression-etat{font-size:14px;color:var(--mu)}
.progression-ligne.refuse .progression-etat{color:var(--dg)}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ───────────── Dépôt terminé ───────────── */
.compteurs{flex:none;display:flex;gap:10px}
.compteur{width:clamp(84px,22vw,104px);aspect-ratio:1;border-radius:50%;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.compteur b{font-size:clamp(28px,7vw,36px);font-weight:400;letter-spacing:-.04em}
.compteur span{font-size:12.5px;color:var(--mu)}
.compteur.alerte b{color:var(--wn)}
.compteur.erreur b{color:var(--dg)}
.resultats{padding:clamp(10px,2vw,20px);gap:8px}
.resultat{background:var(--sf2);border-radius:24px;padding:14px 14px 14px 20px;display:flex;flex-direction:column;gap:10px}
.resultat.alerte{background:var(--wns);padding-bottom:16px}
.resultat.erreur{background:var(--dgs);padding:14px 20px}
.resultat-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.resultat-col{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.resultat-col.presente{flex:1 1 220px}
.resultat-col .etiq{font-size:12.5px;color:var(--mu)}
.resultat-col .val{font-size:15px;overflow-wrap:anywhere}
.resultat-col .val.mono{font:500 14.5px var(--mono)}
.rond-fleche-petit{flex:none;width:36px;height:36px;border-radius:50%;background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--ac)}
.resultat-fin{flex:none;margin-left:auto;display:flex;align-items:center;gap:14px}
.nombre-masque{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.nombre-masque b{font-size:26px;font-weight:400;letter-spacing:-.03em}
.nombre-masque span{font-size:12px;color:var(--mu)}
.resultat-note{font-size:14px;line-height:1.45;color:var(--wn)}
.resultat-note strong,.resultat-erreur strong{font-weight:600}
.resultat-erreur{flex:2 1 260px;color:var(--dg);font-size:14px;line-height:1.45}
.demandes{display:flex;flex-direction:column;gap:8px;align-items:flex-start;list-style:none;margin:0;padding:0}
.demande{max-width:100%;min-height:48px;display:flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;border:1px solid var(--ln2);border-radius:28px;background:var(--sf);font-size:14.5px;line-height:1.35;text-align:left;color:var(--tx)}
.demande:hover{background:var(--sf2)}
.demande .copier{flex:none;min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--sf2);font-size:13px}
.carte-suite{flex:1 1 280px;justify-content:center;gap:10px}

/* ───────────── Vérifier ───────────── */
.retour{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 8px;border-radius:999px;background:var(--sf);text-decoration:none;font-size:14px}
.retour:hover{color:var(--tx);background:var(--sf2)}
.retour span{width:30px;height:30px;border-radius:50%;background:var(--sf2);display:flex;align-items:center;justify-content:center}
.tete-verif{align-items:flex-end;gap:16px 32px;padding:4px 4px 8px}
.tete-verif .gauche{flex:1 1 380px;display:flex;flex-direction:column;gap:16px}
.tete-verif .titre{flex:none}
.carte-apercu{flex:999 1 560px;padding:clamp(10px,2vw,20px)}
.apercu-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 4px 0}
.puce{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 14px;border-radius:999px;border:1px solid var(--ln2);font-size:14px}
.puce b{min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.puce b.a-s{background:var(--s-bg);color:var(--s-tx)}
.puce b.a-p{background:var(--p-bg);color:var(--p-tx)}
.puce b.a-i{background:var(--i-bg);color:var(--i-tx)}
.interrupteur{margin-left:auto;min-height:44px;display:flex;align-items:center;gap:10px;padding:0 16px 0 8px;border-radius:999px;border:0;background:var(--sf2);color:var(--tx);font-size:14px}
.interrupteur-piste{width:44px;height:28px;border-radius:999px;background:var(--ln2);display:flex;align-items:center;padding:3px;transition:background-color .15s}
.interrupteur-pouce{width:22px;height:22px;border-radius:50%;background:var(--sf);transition:transform .15s}
.interrupteur[aria-checked="true"] .interrupteur-piste{background:var(--ac)}
.interrupteur[aria-checked="true"] .interrupteur-pouce{transform:translateX(16px)}
.document{background:var(--sf2);border-radius:20px;padding:12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.document-lignes{min-width:max-content;margin:0;padding:0;list-style:none}
.document-ligne{display:grid;grid-template-columns:48px max-content;min-height:24px;align-items:center}
.document-num{position:sticky;left:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;gap:5px;padding-right:10px;font:11px/24px var(--mono);color:var(--mu);background:var(--sf2)}
.document-texte{padding:0 20px 0 4px;white-space:pre;font:13px/24px var(--mono);color:var(--tx)}
.document.filtre .document-ligne:not(.masquee){display:none}
.document-note{padding:0 8px 4px;font-size:13.5px;color:var(--mu)}
.mot-libre{position:relative;cursor:pointer;border-radius:999px;text-decoration:underline dotted var(--ln2);text-underline-offset:4px}
.mot-libre:hover,.mot-libre:focus-visible,.mot-libre[aria-expanded="true"]{outline:0;background:var(--sf);box-shadow:0 0 0 3px var(--sf),0 0 0 4px var(--ac);text-decoration:none}
.infobulle{position:absolute;z-index:5;width:min(290px,80vw);padding:16px;border-radius:22px;background:var(--ink);color:var(--inkt);font:14px/1.4 var(--ui);white-space:normal;display:flex;flex-direction:column;gap:12px}
.infobulle .ligne-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.infobulle .btn-bientot{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--ac);color:var(--act);font-size:14px;cursor:not-allowed}
.infobulle .bientot{font-size:13px;opacity:.75}
.panneau{flex:1 1 300px;display:flex;flex-direction:column;gap:16px;min-width:0}
.panneau>.carte{padding:24px}
.decompte-haut{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.anneau-familles{width:124px;height:124px}
.anneau-familles .valeur{font-size:42px;letter-spacing:-.04em;line-height:1}
.anneau-familles .legende{font-size:12px;opacity:.7;margin-top:4px}
.seg-s{stroke:var(--s-ln)}.seg-p{stroke:var(--ringp)}.seg-i{stroke:var(--i-ln)}
.legende-familles{display:flex;flex-direction:column;gap:8px;font-size:14px;list-style:none;margin:0;padding:0}
.legende-familles li{display:flex;align-items:center;gap:8px}
.legende-familles .point{width:8px;height:8px}
.legende-familles .point.a-p{background:var(--ringp)}
.detail{display:flex;flex-direction:column;font-size:14px;margin:0}
.detail div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--inkl)}
.detail dt{opacity:.75}
.detail dd{margin:0}
.nom-claude{font:500 15px var(--mono);overflow-wrap:anywhere}

/* ───────────── Listes (Documents, Livrables, Référentiel) ───────────── */
.liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rangee{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;background:var(--sf2);border-radius:24px;padding:14px 14px 14px 20px}
.rangee:hover{background:var(--ln)}
.rangee .col{min-width:0;display:flex;flex-direction:column;gap:3px}
.rangee .etiq{font-size:12.5px;color:var(--mu)}
.rangee .col-client{flex:1 1 220px}
.rangee .col-doc{flex:1.4 1 240px}
.rangee .col-usage{flex:1 1 200px}
.rangee .col-fin{flex:none;margin-left:auto;display:flex;align-items:center;gap:16px}
.rangee .lien-fort{font-size:15.5px;font-weight:500;text-decoration:none}
.rangee .lien-fort:hover{text-decoration:underline;color:var(--tx)}
.rangee .petit-mono{font:12.5px var(--mono);color:var(--mu);overflow-wrap:anywhere}
.rangee .date{font-size:13px;color:var(--mu);white-space:nowrap}
.etiquette-usage{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--ln2);font-size:13px;color:var(--tx)}
.vide{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.vide .titre-moyen{max-width:20ch}

/* ───────────── Remettre les noms ───────────── */
.trois-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.texte-courant{font-size:15px;line-height:1.75;overflow-wrap:anywhere;white-space:pre-wrap}
.texte-courant .alias{font-size:13.5px;padding:0 2px}
.nom-remis{text-decoration:underline;text-decoration-color:var(--ac);text-decoration-thickness:2px;text-underline-offset:4px}
.correspondances{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.correspondances li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 14px 6px 6px;background:var(--sf2);border-radius:999px;font-size:14.5px}
.correspondances .fl{color:var(--ac)}
.titre-section{font-size:13.5px;color:var(--mu)}

/* ───────────── Lecture d'un livrable ───────────── */
.prose{max-width:76ch;font-size:16px;line-height:1.6}
.prose>:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4,.prose h5{font-weight:500;letter-spacing:-.02em;margin:28px 0 10px;line-height:1.25}
.prose h2{font-size:24px}.prose h3{font-size:20px}.prose h4,.prose h5{font-size:17px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:4px 0}
.prose .tableau{overflow-x:auto;margin:16px 0;border-radius:20px;background:var(--sf2);padding:6px 10px}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--ln);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose th{font-weight:500;color:var(--mu);font-size:13px}
.prose td.n,.prose th.n{text-align:right}
.prose tr:has(strong) td{font-weight:600}
.livrable-page.noms-visibles .nom-remis-lecture{text-decoration:underline;text-decoration-color:var(--ac);text-decoration-thickness:2px;text-underline-offset:4px}

/* ───────────── Référentiel et règles ───────────── */
.formulaire-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.message{display:flex;gap:14px;align-items:center;background:var(--sf);border-radius:24px;padding:14px 18px;font-size:15px}
.tableau-regles{overflow-x:auto;border-radius:20px}
.tableau-regles table{border-collapse:separate;border-spacing:0 6px;width:100%;min-width:640px;font-size:14px}
.tableau-regles th{font-weight:500;color:var(--mu);font-size:13px;text-align:left;padding:4px 14px}
.tableau-regles td{background:var(--sf2);padding:10px 14px;vertical-align:middle}
.tableau-regles td:first-child{border-radius:999px 0 0 999px;padding-left:20px}
.tableau-regles td:last-child{border-radius:0 999px 999px 0}
.etat-masque{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--inkt);font-size:13px;white-space:nowrap}
.etat-conserve{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px dashed var(--ln2);color:var(--mu);font-size:13px;white-space:nowrap}

/* ───────────── Mouvement réduit ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ───────────── Impression ───────────── */
@media print{
  .entete,.panneau,.apercu-barre,.actions{display:none!important}
  body,.carte{background:#fff!important;color:#000!important}
}

/* Compléments */
.liste-nue{list-style:none;margin:0;padding:0}
.carte-demandes{flex:3 1 420px}
.form-depot{display:flex;flex-direction:column;gap:16px}
.entete-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:600px){.entete-actions{margin-left:0;flex-basis:100%}}
.pile{display:flex;flex-direction:column;gap:12px}
.refaire-actions{justify-content:space-between;margin-top:4px}
.refaire-actions>.btn-principal{flex:1 1 160px}
.refaire-actions form{flex:0 1 auto;display:flex}
.refaire-actions .btn-danger{min-height:48px;padding:0 18px}
.carte-apercu{position:relative}
.decompte-haut{gap:16px}
.legende-familles{flex:1 1 100px;min-width:0}
@media (max-width:600px){.interrupteur{margin-left:0}}
.carte-import{flex:1 1 360px}
.carte-import .btn{align-self:flex-start}
.formulaire-cp{display:grid;grid-template-columns:minmax(90px,130px) 1fr;gap:8px}
.titre-liste{padding:6px 6px 4px}
.rangee .col-alias{flex:0 0 auto;min-width:110px}
.rangee .col-siren{flex:0 1 140px}
.carte-lecture{flex:999 1 560px}
.decompte-livrable{font-size:15px}
.decompte-livrable b{display:block;font-size:42px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
.noms-liste{font-size:14px;opacity:.75;line-height:1.5}
.panneau .actions{flex-direction:column}
.panneau .actions>.btn{flex:none;width:100%}
.panneau .refaire-actions{flex-direction:row}
.panneau .refaire-actions>.btn-principal{flex:1 1 160px;width:auto}
.tableau-regles .regle-libelle{background:var(--sf2);color:var(--tx);font-size:14px;font-weight:400;padding:10px 14px 10px 20px;border-radius:999px 0 0 999px;text-align:left;min-width:240px}
.tableau-regles td:first-child{border-radius:0}
.rangee .nombre-masque{min-width:64px}
.rangee .date{min-width:120px}
.choix-fichier{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:4px;border:1px dashed var(--ln2);border-radius:999px;background:var(--sf2)}
.choix-fichier .btn{cursor:pointer}
.choix-fichier:has(input:focus-visible) .btn{outline:2px solid var(--tx);outline-offset:2px}
.nom-fichier{flex:1 1 120px;min-width:0;font:13px var(--mono);color:var(--mu);overflow-wrap:anywhere}
.texte-courant .alias{box-shadow:none;padding:2px 7px;margin:0 1px}
.choix-fichier{border-radius:24px}
.etiquette .titre-carte{color:var(--tx)}
/* Contrastes AA : le gris secondaire ne passe pas sur --ln ni sur --dgs */
.rangee:hover{background:var(--sf2);box-shadow:inset 0 0 0 1px var(--ln2)}
.usage:hover:not(:has(input:checked)){background:var(--sf2);box-shadow:inset 0 0 0 1px var(--ln2)}
.resultat.erreur .etiq,.bandeau.erreur .mu{color:var(--tx)}
.tableau-regles .regle-libelle{position:sticky;left:0;z-index:1;min-width:min(240px,42vw)}
.tableau-regles thead th:first-child{position:sticky;left:0;z-index:1;background:var(--sf)}
@media (max-width:600px){.tableau-regles .regle-libelle{border-radius:0;box-shadow:-24px 0 0 var(--sf)}}

/* ───────────── Comptes : personne connectée ───────────── */
.personne{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:0 14px 0 4px;border-radius:999px;background:var(--sf);font-size:13.5px;max-width:100%}
.personne-initiales{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--inkt);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:.02em}
.personne-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.personne-role{color:var(--mu)}
.btn-microsoft .microsoft-texte{display:inline-flex;align-items:center;gap:14px}
.logo-microsoft{width:20px;height:20px;flex:none;background:var(--sf);padding:3px;border-radius:4px;box-sizing:content-box}
.case{min-height:44px;display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.case input{width:22px;height:22px;accent-color:var(--ac)}
.bascule{align-self:flex-start;display:flex;gap:2px;padding:5px;background:var(--sf);border-radius:999px;flex-wrap:wrap}
.bascule a{min-height:42px;display:flex;align-items:center;padding:0 16px;border-radius:999px;text-decoration:none;font-size:14.5px}
.bascule a:hover{background:var(--sf2);color:var(--tx)}
.bascule a[aria-current="page"]{background:var(--ink);color:var(--inkt)}
.deposant{color:var(--tx)}

/* ───────────── Tableau de bord ───────────── */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.tuile{gap:4px;padding:20px 22px}
.tuile b{font-size:clamp(30px,4vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.05}
.tuile span{font-size:13.5px;color:var(--mu)}
.tuile>span .mu{color:var(--mu)}
.tuile.alerte b{color:var(--wn)}
.tuile.erreur b{color:var(--dg)}
.carte-graphique{flex:2 1 460px}
.carte-familles{flex:1 1 300px;padding:24px}
.note-encre{font-size:13px;opacity:.75;line-height:1.45}
.graphique{display:flex;flex-direction:column;gap:6px}
.barres{width:100%;height:auto;max-height:220px;overflow:visible}
.barres .axe{stroke:var(--ln2);stroke-width:1}
.barres path{fill:var(--ac)}
.barres .cible{fill:transparent}
.barres .barre:hover .cible{fill:var(--sf2)}
.barres .barre:hover path{fill:var(--ach)}
.graduations{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mu)}
.detail-chiffres summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;font-size:14px}
.detail-chiffres table{border-collapse:collapse;font-size:14px;margin-top:6px}
.detail-chiffres th,.detail-chiffres td{padding:6px 14px 6px 0;text-align:left;border-bottom:1px solid var(--ln)}
.detail-chiffres th{font-weight:500;color:var(--mu);font-size:13px}
.detail-chiffres .n{text-align:right}
.chiffres-ligne{flex-wrap:wrap;justify-content:flex-end}
.personne-ligne{display:flex;align-items:center;gap:12px}
.personne-ligne>span:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px}
.etat-coupe{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--dgs);color:var(--dg);font-size:13px}
.rangee.coupee{opacity:.85}
.fil{display:flex;flex-direction:column}
.fil li{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 0;border-top:1px solid var(--ln);font-size:14.5px}
.fil li:first-child{border-top:0}
.fil .date{min-width:150px}
.rangee .col-fin.chiffres-ligne{flex:1 1 auto;min-width:0;gap:12px 18px}
@media (max-width:600px){.rangee .col-fin.chiffres-ligne{justify-content:flex-start;margin-left:0}}
.rangee .col .date{white-space:normal;overflow-wrap:anywhere}
.btn-microsoft{white-space:normal;text-align:left;gap:12px;padding:8px 22px}
.btn-microsoft .microsoft-texte{gap:12px}
.logo-microsoft{background:#FFFFFF}
.proposition{border:1.5px solid var(--wn);background:var(--sf)}
.proposition .titre-carte .mu{color:var(--mu)}
.resultat-note a{color:inherit;font-weight:600}
.proposition .envoi .btn-principal{max-width:none;flex:0 1 auto;white-space:normal;text-align:left;gap:16px}
.bascule-regle{position:relative;display:inline-flex;min-height:44px;align-items:center;cursor:pointer}
.bascule-regle input{position:absolute;opacity:0;width:1px;height:1px}
.bascule-regle input:checked~.etat-conserve,.bascule-regle input:not(:checked)~.etat-masque{display:none}
.bascule-regle:has(input:focus-visible){outline:2px solid var(--tx);outline-offset:2px;border-radius:999px}
.bascule-regle:hover .etat-conserve{border-color:var(--tx);color:var(--tx)}
.zone-mots{min-height:180px;font:14px/1.6 var(--mono)}
.mots{display:flex;flex-wrap:wrap;gap:6px}