/* Révision FEC — volet du complément. Charte « Consigne » : rayon 0, aucune ombre, une seule zone de signal (violet exigence). */
@font-face { font-family: Archivo; src: url(polices/Archivo-var.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url(polices/MartianMono-var.woff2) format('woff2'); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
@font-face { font-family: Atkinson; src: url(polices/AtkinsonHyperlegibleNext-var.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --fond: #F3F4F5; --surface: #FFFFFF; --process: #D4D7DA; --carter: #9AA0A6; --gris: #5C636A; --encre: #1B1E21;
  --signal: #9B87FF; --sur-signal: #1B1E21; --filet: 1px solid var(--carter);
  --f-titre: Archivo, 'Arial Narrow', sans-serif; --f-data: 'Martian Mono', ui-monospace, Consolas, monospace; --f-texte: Atkinson, 'Segoe UI', system-ui, sans-serif;
}
.sombre {
  --fond: #1B1E21; --surface: #2A2F34; --process: #3A4046; --carter: #6B7279; --gris: #B4BAC0; --encre: #F3F4F5;
}

* { box-sizing: border-box; margin: 0; }
html, body { background: var(--fond); color: var(--encre); }
html { scrollbar-width: thin; scrollbar-color: var(--carter, #C9CED3) transparent; }
body { font: 15px/1.45 var(--f-texte); min-width: 280px; padding: 16px 16px 24px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 2px; }
.titre { font-family: var(--f-titre); font-weight: 800; font-stretch: 62%; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: 28px; }
.data { font-family: var(--f-data); font-stretch: 87.5%; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; font-size: 11px; color: var(--gris); }
h2.data { margin-bottom: 8px; }
[hidden] { display: none !important; }

.tete { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1.5px solid var(--encre); margin-bottom: 16px; }
.bulle { width: 44px; height: 44px; flex: none; }
.bulle circle { fill: var(--surface); stroke: var(--encre); stroke-width: 1.5; }
.bulle line { stroke: var(--encre); stroke-width: 1; }
.bulle text { font: 500 9px var(--f-data); font-stretch: 87.5%; text-anchor: middle; fill: var(--encre); letter-spacing: .06em; }

.bloc { margin-bottom: 20px; }
.intro { margin-bottom: 14px; }
.aide { color: var(--gris); font-size: 13px; }

.depot { position: relative; display: grid; gap: 4px; padding: 14px; border: 1.5px dashed var(--carter); background: var(--surface); cursor: pointer; margin-bottom: 8px; }
.depot:hover, .depot.survol { border-color: var(--encre); }
.depot:focus-within { outline: 2px solid var(--encre); outline-offset: 2px; }
.depot strong { font-weight: 600; word-break: break-all; }

button { cursor: pointer; border-radius: 0; }
.primaire, .secondaire { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--encre); font-weight: 600; text-align: center; }
.primaire { background: var(--encre); color: var(--fond); margin-top: 14px; }
.primaire:disabled { background: var(--process); border-color: var(--process); color: var(--gris); cursor: not-allowed; }
.secondaire { background: transparent; margin-top: 10px; }
.primaire:focus-visible, .secondaire:focus-visible, .lien:focus-visible, summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.lien { background: none; border: 0; padding: 0; text-decoration: underline; font-size: 13px; color: var(--encre); }

.reglages { margin-top: 14px; border-top: var(--filet); padding-top: 10px; }
summary { cursor: pointer; }
.champs { display: grid; gap: 10px; margin-top: 10px; }
.champs label { display: grid; gap: 4px; font-size: 13px; }
.champs label.case { display: flex; gap: 8px; align-items: center; }
input[type=date], input[type=number], textarea { width: 100%; padding: 6px 8px; border: var(--filet); background: var(--surface); border-radius: 0; }
textarea { font: 12px/1.4 var(--f-data); resize: vertical; margin-top: 8px; }

.erreur { margin-top: 10px; padding: 10px; border: 1.5px solid var(--encre); background: var(--surface); }

.barre { height: 8px; background: var(--process); margin: 8px 0; }
.barre div { height: 100%; width: 0; background: var(--encre); transition: width .2s linear; }

.verdict { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--encre); background: var(--surface); margin-bottom: 12px; }
.verdict strong { font-family: var(--f-titre); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 26px; line-height: 1; }
/* Seule zone de signal du volet : le verdict quand il y a quelque chose à traiter. */
.verdict.alerte { background: var(--signal); border-color: var(--signal); }
.verdict.alerte, .verdict.alerte .data { color: var(--sur-signal); }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--carter); border: var(--filet); margin-bottom: 16px; }
.chiffres div { background: var(--surface); padding: 8px 10px; }
.chiffres dt { font: 500 10px var(--f-data); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.chiffres dd { font: 500 15px var(--f-data); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }

.points { list-style: none; padding: 0; border-top: var(--filet); }
.points li { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: var(--filet); font-size: 13px; }
.points .id { font: 500 11px var(--f-data); font-stretch: 87.5%; }
.points .grav { display: block; font: 500 10px var(--f-data); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.points .nb { font: 500 12px var(--f-data); font-stretch: 87.5%; text-align: right; }
.points button { margin-left: 6px; }
.points .vide { display: block; color: var(--gris); }

.licence { border-top: 1.5px solid var(--encre); padding-top: 14px; }
.licence #licence-actions { display: grid; gap: 8px; }
.licence #saisie-cle { margin-top: 12px; }

.pied { border-top: var(--filet); padding-top: 10px; color: var(--gris); font-size: 12px; display: grid; gap: 4px; }

/* Champ fichier invisible mais atteignable au clavier : le cadre « depot » montre le focus. */
.masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.attention { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.attention li { font-size: 12px; line-height: 1.45; padding: 6px 10px; border-left: 3px solid var(--encre); background: var(--surface); }
.page-aide main { max-width: 640px; margin: 0 auto; }
.page-aide h2 { margin: 18px 0 6px; }
.page-aide ol { padding-left: 20px; display: grid; gap: 4px; }
.page-aide p { margin: 0 0 8px; }