/* PADHealth — feuille de style unique (application, questionnaire, impression). */

@font-face { font-family: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
  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: "Jakarta"; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --marine: #0a2552;
  --marine-2: #0f3470;
  --bleu: #1556c0;
  --bleu-clair: #e8f0fd;
  --ciel: #2fa8e0;
  --lime: #a4c21c;
  --fond: #f3f6fb;
  --carte: #ffffff;
  --carte-2: #f8fafd;
  --texte: #14213a;
  --texte-2: #4a5a74;
  --discret: #7383a0;
  --bord: #e2e8f2;
  --bord-fort: #cfd8e6;
  --ombre: 0 1px 2px rgba(16, 36, 72, .05), 0 4px 16px rgba(16, 36, 72, .06);
  --ombre-haute: 0 10px 40px rgba(10, 37, 82, .14);
  --vert: #157a43;   --vert-fond: #e3f5ea;   --vert-trait: #2fb26a;
  --orange: #9c5a00; --orange-fond: #fff2d9; --orange-trait: #f2a33a;
  --rouge: #b42318;  --rouge-fond: #fde9e7;  --rouge-trait: #e5484d;
  --gris: #556274;   --gris-fond: #edf0f4;   --gris-trait: #a5b0bf;
  --rayon: 14px;
  --rayon-s: 9px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0c1424; --carte: #131e33; --carte-2: #172440; --texte: #e8eef8; --texte-2: #b5c2d8; --discret: #8494b0;
    --bord: #24324d; --bord-fort: #2f4064; --bleu: #5b9bff; --bleu-clair: #1a2c4f;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --vert: #6fdc9b; --vert-fond: #12301f; --orange: #f5bd62; --orange-fond: #3a2a10;
    --rouge: #ff8f87; --rouge-fond: #3d1a18; --gris: #b9c3d2; --gris-fond: #232f45;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0c1424; --carte: #131e33; --carte-2: #172440; --texte: #e8eef8; --texte-2: #b5c2d8; --discret: #8494b0;
  --bord: #24324d; --bord-fort: #2f4064; --bleu: #5b9bff; --bleu-clair: #1a2c4f;
  --vert: #6fdc9b; --vert-fond: #12301f; --orange: #f5bd62; --orange-fond: #3a2a10;
  --rouge: #ff8f87; --rouge-fond: #3d1a18; --gris: #b9c3d2; --gris-fond: #232f45;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.55 "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 700; margin: 0 0 .9rem; }
h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
p { margin: 0 0 .8rem; }
.discret { color: var(--discret); font-weight: 500; }
.petit { font-size: .82rem; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.icone { flex: none; vertical-align: -.2em; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em;
  background: var(--gris-fond); padding: .05em .35em; border-radius: 5px; }
.code-pad { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; font-weight: 600;
  color: var(--bleu); background: var(--bleu-clair); padding: .1em .45em; border-radius: 6px; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- mise en page de l'application */

.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.barre { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.2rem;
  padding: 1.25rem 1rem; color: #dbe6f7;
  background: radial-gradient(120% 60% at 0% 0%, #154289 0%, transparent 60%),
              linear-gradient(180deg, var(--marine-2), var(--marine)); }
.marque { display: flex; align-items: center; gap: .7rem; color: #fff; padding: .2rem .4rem; }
.marque:hover { text-decoration: none; }
.marque img { width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.marque strong { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.marque span { display: block; font-size: .72rem; color: #9fb4d6; font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: .2rem; }
.nav-titre { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #7f98c2; margin: .6rem .7rem .3rem; font-weight: 700; }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .58rem .75rem; border-radius: 10px;
  color: #c9d7ee; font-weight: 600; font-size: .92rem; transition: background .15s, color .15s; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.actif { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 3px 0 0 var(--lime); }
.nav .badge { margin-left: auto; background: var(--rouge-trait); color: #fff; font-size: .7rem; font-weight: 800;
  padding: .05rem .45rem; border-radius: 999px; }
.barre-pied { margin-top: auto; display: flex; align-items: center; gap: .6rem; padding: .7rem; border-radius: 12px;
  background: rgba(255,255,255,.06); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, var(--ciel), var(--lime)); color: var(--marine); text-transform: uppercase; }
.barre-pied .qui { min-width: 0; flex: 1; line-height: 1.2; }
.barre-pied .qui strong { display: block; color: #fff; font-size: .88rem; text-transform: capitalize; }
.barre-pied .qui span { font-size: .72rem; color: #9fb4d6; }
.barre-pied button { background: transparent; border: 0; color: #c9d7ee; padding: .35rem; border-radius: 8px; cursor: pointer; }
.barre-pied button:hover { background: rgba(255,255,255,.1); color: #fff; }

.principal-zone { min-width: 0; display: flex; flex-direction: column; }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.6rem 2rem 1.1rem; }
.entete-page .sur-titre { font-size: .78rem; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.entete-page .sous-titre { color: var(--texte-2); margin: .3rem 0 0; }
.entete-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.contenu { padding: 0 2rem 2.5rem; flex: 1; }
.pied { padding: 1rem 2rem 1.5rem; font-size: .76rem; color: var(--discret); }
.menu-mobile { display: none; }

/* ---------------------------------------------------------------- composants */

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.25rem 1.4rem; box-shadow: var(--ombre); margin-bottom: 1.25rem; }
.carte-titre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.carte-titre h2 { margin: 0; }
.grille-2 { margin-bottom: 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 1.25rem; }
.grille-2 > .carte { margin-bottom: 0; }
.pile { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }

.btn, button { font: inherit; font-weight: 650; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: .45rem; padding: .55rem .95rem; border-radius: 10px; border: 1px solid var(--bord-fort);
  background: var(--carte); color: var(--texte); line-height: 1.2; transition: background .15s, box-shadow .15s, transform .05s;
  text-decoration: none; white-space: nowrap; }
.btn:hover, button:hover { background: var(--carte-2); text-decoration: none; }
.btn:active, button:active { transform: translateY(1px); }
.btn-primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 2px 8px rgba(21, 86, 192, .28); }
.btn-primaire:hover { background: #104aa8; }
.btn-danger { background: var(--rouge-fond); border-color: transparent; color: var(--rouge); }
.btn-fantome { background: transparent; border-color: transparent; color: var(--bleu); padding-inline: .5rem; }
.btn-fantome:hover { background: var(--bleu-clair); }
button:disabled { opacity: .5; cursor: not-allowed; }
.lien { background: none; border: 0; padding: 0; color: var(--bleu); font-weight: 600; }
.lien:hover { background: none; text-decoration: underline; }

label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 650; color: var(--texte-2); margin-bottom: .85rem; }
input, select, textarea { font: inherit; font-size: .92rem; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s); padding: .55rem .7rem; width: 100%;
  transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(21, 86, 192, .16); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--bleu); }
input[type="file"] { padding: .45rem; background: var(--carte-2); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 1rem; }
.champs .l2 { grid-column: span 2; }

.flash { display: flex; gap: .6rem; align-items: center; padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1.25rem; font-weight: 600; font-size: .92rem; }
.flash-info { background: var(--vert-fond); color: var(--vert); }
.flash-erreur { background: var(--rouge-fond); color: var(--rouge); }

/* indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { position: relative; overflow: hidden; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 1.05rem 1.15rem; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: .15rem; }
.kpi .pictogramme { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: .55rem;
  background: var(--bleu-clair); color: var(--bleu); }
.kpi.vert .pictogramme { background: var(--vert-fond); color: var(--vert); }
.kpi.rouge .pictogramme { background: var(--rouge-fond); color: var(--rouge); }
.kpi.orange .pictogramme { background: var(--orange-fond); color: var(--orange); }
.kpi span { font-size: .8rem; color: var(--texte-2); font-weight: 650; }
.kpi strong { font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi small { color: var(--discret); font-size: .78rem; font-weight: 500; }

/* bandeau d'accueil */
.bandeau { position: relative; overflow: hidden; border-radius: 18px; padding: 1.6rem 1.8rem; margin-bottom: 1.25rem; color: #fff;
  background: radial-gradient(80% 140% at 100% 0%, rgba(47, 168, 224, .55) 0%, transparent 55%),
              linear-gradient(120deg, var(--marine) 0%, #1449a3 100%);
  box-shadow: var(--ombre-haute); }
.bandeau h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; }
.bandeau p { color: #cfe0fb; margin: 0; max-width: 60ch; }
.bandeau .actions-bandeau { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.bandeau .btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; }
.bandeau .btn:hover { background: rgba(255,255,255,.2); }
.bandeau .btn-clair { background: #fff; color: var(--marine); border-color: #fff; }
.bandeau .btn-clair:hover { background: #eef4ff; }
.bandeau svg.vagues { position: absolute; right: -20px; bottom: -10px; width: 380px; opacity: .22; pointer-events: none; }

/* graphiques */
.anneau-zone { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.anneau { width: 150px; height: 150px; flex: none; }
.anneau circle { fill: none; stroke-width: 4.2; }
.anneau .fond { stroke: var(--gris-fond); }
.anneau .arc-vert { stroke: var(--vert-trait); } .anneau .arc-orange { stroke: var(--orange-trait); }
.anneau .arc-rouge { stroke: var(--rouge-trait); } .anneau .arc-gris { stroke: var(--gris-trait); }
.anneau text { fill: var(--texte); font-family: inherit; }
.anneau .valeur { font-size: 7px; font-weight: 800; text-anchor: middle; }
.anneau .legende-centre { font-size: 2.6px; fill: var(--discret); text-anchor: middle; font-weight: 600; }
.legende { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; flex: 1; min-width: 160px; }
.legende li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.legende li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.puce { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.puce.vert { background: var(--vert-trait); } .puce.orange { background: var(--orange-trait); }
.puce.rouge { background: var(--rouge-trait); } .puce.gris { background: var(--gris-trait); }
.puce.bleu { background: var(--bleu); } .puce.ciel { background: #9cc8f5; }

.barres { display: grid; gap: .85rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(110px, 1fr) 2.2fr auto; gap: .8rem; align-items: center; font-size: .86rem; }
.barre-ligne .nom { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-ligne svg { width: 100%; height: 22px; display: block; }
.barre-ligne .piste { fill: var(--gris-fond); }
.barre-ligne .facture { fill: #9cc8f5; } .barre-ligne .retenu { fill: var(--bleu); }
.barre-ligne .valeur { font-variant-numeric: tabular-nums; color: var(--texte-2); font-size: .8rem; text-align: right; }

/* tableaux */
.defile { overflow-x: auto; margin: 0 -1.4rem; padding: 0 1.4rem; }
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .89rem; }
.tableau th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); font-weight: 700;
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--bord); white-space: nowrap; background: var(--carte); }
.tableau td { padding: .7rem .7rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr { transition: background .12s; }
.tableau tbody tr:hover { background: var(--carte-2); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau .principal-cellule { font-weight: 650; }
.tableau .principal-cellule small { display: block; font-weight: 500; color: var(--discret); font-size: .78rem; }
.ligne-cliquable { cursor: pointer; }
.j-alerte td { color: var(--rouge); }

.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.recherche { position: relative; flex: 1 1 280px; }
.recherche .icone { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--discret); }
.recherche input { padding-left: 2.3rem; }
.filtres select { width: auto; min-width: 170px; }

.pastille, .statut { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastille.vert { background: var(--vert-fond); color: var(--vert); }
.pastille.orange { background: var(--orange-fond); color: var(--orange); }
.pastille.rouge { background: var(--rouge-fond); color: var(--rouge); }
.pastille.gris { background: var(--gris-fond); color: var(--gris); }
.statut { background: var(--gris-fond); color: var(--gris); }
.s-brouillon { background: var(--bleu-clair); color: var(--bleu); }
.s-a_valider { background: var(--rouge-fond); color: var(--rouge); }
.s-controlee { background: var(--orange-fond); color: var(--orange); }
.s-cloturee { background: var(--vert-fond); color: var(--vert); }

.vide { text-align: center; padding: 2.5rem 1rem; color: var(--texte-2); }
.vide .illustration { width: 64px; height: 64px; border-radius: 20px; display: inline-grid; place-items: center; margin-bottom: .8rem;
  background: var(--bleu-clair); color: var(--bleu); }
.vide strong { display: block; color: var(--texte); font-size: 1.02rem; margin-bottom: .25rem; }

/* ---------------------------------------------------------------- connexion */

.connexion-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.connexion-marque { position: relative; overflow: hidden; color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(70% 60% at 100% 0%, rgba(47,168,224,.45), transparent 60%),
              radial-gradient(60% 50% at 0% 100%, rgba(164,194,28,.25), transparent 60%),
              linear-gradient(150deg, #0d3274 0%, var(--marine) 70%); }
.connexion-marque .marque img { width: 52px; height: 52px; }
.connexion-marque h1 { font-size: 2.3rem; line-height: 1.12; margin: 2.5rem 0 1rem; max-width: 16ch; }
.connexion-marque p { color: #cddcf5; max-width: 46ch; font-size: 1.02rem; }
.atouts { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: .9rem; }
.atouts li { display: flex; gap: .8rem; align-items: flex-start; color: #e1ebfb; }
.atouts .icone { color: var(--lime); margin-top: .15rem; }
.connexion-marque svg.vagues { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: .18; }
.connexion-marque .mention { font-size: .78rem; color: #9fb4d6; position: relative; }
.connexion-formulaire { display: grid; place-items: center; padding: 2rem 1.25rem; }
.connexion-carte { width: min(400px, 100%); }
.connexion-carte h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .3rem; }
.connexion-carte .btn-primaire { width: 100%; padding: .75rem; margin-top: .4rem; }
.connexion-carte .securite { display: flex; gap: .5rem; align-items: center; margin-top: 1.4rem; font-size: .8rem; color: var(--discret); }

/* ---------------------------------------------------------------- facture */

.facture-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem; align-items: start; }
.scan { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; padding: .9rem; }
.scan-entete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; margin-bottom: .7rem; }
.scan-entete strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pages { overflow: auto; display: flex; flex-direction: column; gap: .7rem; border-radius: 10px; background: var(--carte-2); padding: .5rem; }
.pages img { width: 100%; border-radius: 6px; background: #fff; box-shadow: 0 1px 6px rgba(16,36,72,.12); }
.etape { display: flex; align-items: center; gap: .65rem; margin: 1.6rem 0 1rem; }
.etape:first-of-type { margin-top: 0; }
.etape .rond { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800;
  background: var(--bleu-clair); color: var(--bleu); }
.etape h2 { margin: 0; }
.lignes input { padding: .4rem .5rem; font-size: .86rem; }
.lignes td { padding: .35rem .3rem; vertical-align: top; }
.lignes .long { min-width: 190px; } .lignes .court { min-width: 74px; } .lignes .tres-court { min-width: 50px; }
.lignes .code { min-width: 100px; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.libelle-code { display: block; color: var(--discret); font-size: .72rem; max-width: 190px; margin-top: .2rem; }
.lignes tfoot td { font-weight: 700; padding-top: .7rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }
.espace { flex: 1; }
.resume-verdicts { display: flex; gap: .5rem; flex-wrap: wrap; }

.alertes { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .5rem; }
.alertes li { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .85rem; border-radius: 10px; font-size: .9rem; font-weight: 600; }
.a-rouge { background: var(--rouge-fond); color: var(--rouge); }
.a-orange { background: var(--orange-fond); color: var(--orange); }
.a-gris, .a-info { background: var(--gris-fond); color: var(--gris); }
.totaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.totaux div { background: var(--carte-2); border: 1px solid var(--bord); border-radius: 12px; padding: .75rem .9rem; }
.totaux span { display: block; color: var(--discret); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.totaux strong { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.totaux .ecart strong { color: var(--vert); }

.ligne-controle { border: 1px solid var(--bord); border-left: 4px solid var(--gris-trait); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .7rem; background: var(--carte); }
.ligne-controle.v-vert { border-left-color: var(--vert-trait); }
.ligne-controle.v-orange { border-left-color: var(--orange-trait); background: linear-gradient(90deg, var(--orange-fond), var(--carte) 30%); }
.ligne-controle.v-rouge { border-left-color: var(--rouge-trait); background: linear-gradient(90deg, var(--rouge-fond), var(--carte) 30%); }
.ligne-controle header { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ligne-controle header .montant { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.ligne-controle p { margin: .45rem 0 0; font-size: .86rem; }
.reference { color: var(--texte-2); }
.motifs { margin: .45rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.motifs li { margin-bottom: .15rem; }
.decision { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--bord-fort); }
.decision select { width: auto; flex: 0 1 260px; }
.decision input[name="motif"] { flex: 1 1 200px; width: auto; }
.decision input[name="code_admin"] { flex: 0 1 190px; width: auto; }
.cloture { display: flex; gap: .5rem; flex-wrap: wrap; }
.cloture input { width: auto; flex: 1 1 200px; }
.zone-admin summary { cursor: pointer; color: var(--texte-2); font-weight: 650; }
.zone-admin form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.zone-admin input { width: auto; }

/* zone de dépôt */
.depot { display: grid; place-items: center; text-align: center; gap: .5rem; border: 2px dashed var(--bord-fort); border-radius: 16px;
  padding: 2.2rem 1rem; background: var(--carte-2); transition: border-color .15s, background .15s; }
.depot.survol { border-color: var(--bleu); background: var(--bleu-clair); }
.depot .illustration { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bleu-clair); color: var(--bleu); }
.depot input[type="file"] { max-width: 360px; }
.option-case { display: flex; flex-direction: row; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--carte-2); color: var(--texte); font-size: .9rem; font-weight: 600; }
.option-case small { display: block; color: var(--discret); font-weight: 500; }

/* ---------------------------------------------------------------- questionnaire */

.q-page { min-height: 100vh; background:
  radial-gradient(70% 320px at 50% 0%, rgba(21, 86, 192, .10), transparent 70%), var(--fond); }
.q-entete { background: linear-gradient(120deg, var(--marine) 0%, #1449a3 100%); color: #fff; position: relative; overflow: hidden; }
.q-entete-int { max-width: 860px; margin: 0 auto; padding: 1.4rem 1.25rem 1.6rem; position: relative; }
.q-entete .marque img { width: 40px; height: 40px; }
.q-entete h1 { font-size: 1.65rem; margin: 1.4rem 0 .4rem; }
.q-entete p { color: #cfe0fb; margin: 0; max-width: 62ch; }
.q-entete svg.vagues { position: absolute; right: -30px; bottom: -20px; width: 420px; opacity: .2; }
.q-corps { max-width: 860px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.q-progression { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--bord); }
.q-progression-int { max-width: 860px; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.q-progression progress { flex: 1; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--gris-fond); appearance: none; }
.q-progression progress::-webkit-progress-bar { background: var(--gris-fond); border-radius: 99px; }
.q-progression progress::-webkit-progress-value { background: linear-gradient(90deg, var(--bleu), var(--ciel)); border-radius: 99px; }
.q-progression progress::-moz-progress-bar { background: linear-gradient(90deg, var(--bleu), var(--ciel)); border-radius: 99px; }
.q-progression .pourcent { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 3.2em; text-align: right; }
.q-etat { font-size: .78rem; color: var(--discret); min-width: 9em; text-align: right; }
.q-etat.ok { color: var(--vert); } .q-etat.erreur { color: var(--rouge); }
.q-etapes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.q-etapes a { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--carte); border: 1px solid var(--bord); color: var(--texte-2); }
.q-etapes a:hover { text-decoration: none; border-color: var(--bleu); }
.q-etapes a.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.q-etapes a.complet:not(.actif) { color: var(--vert); border-color: var(--vert-trait); }
.q-etapes .compte { font-size: .72rem; opacity: .8; }
.q-section-titre { margin-bottom: 1.2rem; }
.q-section-titre h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .3rem; }
.q-section-titre p { color: var(--texte-2); }
.question { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 1.3rem 1.4rem; margin-bottom: 1rem;
  box-shadow: var(--ombre); scroll-margin-top: 70px; transition: border-color .2s; }
.question.repondue { border-color: color-mix(in srgb, var(--vert-trait) 55%, var(--bord)); }
.question-entete { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .9rem; }
.question-num { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .82rem;
  background: var(--bleu-clair); color: var(--bleu); }
.question.repondue .question-num { background: var(--vert-fond); color: var(--vert); }
.question h3 { font-size: 1.02rem; font-weight: 700; margin: .2rem 0 0; }
.question .aide { color: var(--texte-2); font-size: .88rem; margin: .35rem 0 0; }
.question .debloque { display: inline-flex; gap: .4rem; align-items: center; margin-top: .5rem; font-size: .76rem; font-weight: 700;
  color: var(--bleu); background: var(--bleu-clair); padding: .2rem .6rem; border-radius: 999px; }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .55rem; }
.choix { position: relative; display: flex; flex-direction: row; align-items: center; gap: .65rem; margin: 0; padding: .75rem .9rem;
  border: 1.5px solid var(--bord-fort); border-radius: 12px; cursor: pointer; background: var(--carte); color: var(--texte);
  font-size: .92rem; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s; }
.choix:hover { border-color: var(--bleu); }
.choix input { margin: 0; }
.choix:has(input:checked) { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(21,86,192,.12); }
.hypothese { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .75rem .9rem; margin-bottom: .8rem; border-radius: 12px;
  background: linear-gradient(90deg, rgba(164,194,28,.14), transparent); border: 1px solid rgba(164,194,28,.45); font-size: .9rem; }
.hypothese .icone { color: #6f8a00; }
.hypothese label { flex-direction: row; align-items: center; gap: .5rem; margin: 0 0 0 auto; color: var(--texte); font-size: .88rem; }
.question-options { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--bord); }
.question-options > label { flex-direction: row; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; color: var(--texte-2); }
.question-options details { flex: 1 1 100%; }
.question-options summary { cursor: pointer; font-size: .85rem; color: var(--bleu); font-weight: 650; }
.qui-savoir { margin: .7rem 0 0; }
.qui-savoir[hidden] { display: none; }
.fichiers { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.fichiers li { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 10px; background: var(--carte-2); border: 1px solid var(--bord); font-size: .88rem; }
.fichiers li form { margin-left: auto; }
.envoi { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.envoi input[type="file"] { flex: 1 1 260px; width: auto; }
.q-navigation { display: flex; gap: .7rem; justify-content: space-between; flex-wrap: wrap; margin-top: 1.4rem; }
.q-accueil { display: grid; gap: 1.25rem; }
.q-accueil .carte { margin: 0; }
.q-avantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; }
.q-avantages div { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--texte-2); }
.q-avantages .icone { color: var(--bleu); margin-top: .15rem; }
.q-avantages strong { display: block; color: var(--texte); }
.q-reprise[hidden] { display: none; }
.merci { text-align: center; padding: 2.5rem 1.5rem; }
.merci .illustration { width: 76px; height: 76px; border-radius: 24px; display: inline-grid; place-items: center; background: var(--vert-fond); color: var(--vert); margin-bottom: 1rem; }
.resultat-question { padding: .9rem 0; border-bottom: 1px solid var(--bord); }
.resultat-question:last-child { border-bottom: 0; }
.resultat-question h3 { font-size: .92rem; }
.resultat-question .valeur { font-weight: 650; }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 6px; background: var(--gris-fond); color: var(--gris); margin-right: .3rem; }
.etiquette.verte { background: var(--vert-fond); color: var(--vert); }
.etiquette.orange { background: var(--orange-fond); color: var(--orange); }

/* ---------------------------------------------------------------- fiche de signalement */

.impression { background: #fff; color: #000; }
.feuille { max-width: 900px; margin: 0 auto; padding: 2rem 16px; }
.feuille h1 { font-size: 1.4rem; margin: .4rem 0; }
.fiche { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.fiche > tbody > tr > th, .fiche > tbody > tr > td { border: 1px solid #9aa4b2; padding: .55rem .65rem; vertical-align: top; text-align: left; font-size: .9rem; }
.fiche > tbody > tr > th { width: 28%; background: #f1f4f8; }
.fiche .tableau td, .fiche .tableau th { padding: .3rem .4rem; }
.a-remplir { height: 4.5rem; }
@media print { .sans-impression { display: none !important; } .feuille { padding: 0; } }

/* ---------------------------------------------------------------- petits écrans */

@media (max-width: 1280px) {
  .facture-grille { grid-template-columns: minmax(0, 1fr); }
  .scan { position: static; max-height: 75vh; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .kpi strong { font-size: 1.15rem; overflow-wrap: anywhere; }
  .entete-actions .btn { flex: 1 1 auto; }
  .barre { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .app.menu-ouvert .barre { transform: none; box-shadow: var(--ombre-haute); }
  .menu-mobile { display: flex; align-items: center; gap: .7rem; padding: .7rem 16px; background: var(--marine); color: #fff; position: sticky; top: 0; z-index: 20; }
  .menu-mobile button { background: transparent; border: 0; color: #fff; padding: .3rem; }
  .menu-mobile img { width: 30px; height: 30px; border-radius: 8px; background: #fff; }
  .entete-page { padding: 1.1rem 16px .9rem; }
  .contenu { padding: 0 16px 2rem; }
  .pied { padding: 1rem 16px; }
  .carte { padding: 1rem; }
  .defile { margin: 0 -1rem; padding: 0 1rem; }
  .champs .l2 { grid-column: span 1; }
  .totaux { grid-template-columns: 1fr; }
  .connexion-page { grid-template-columns: 1fr; }
  .connexion-marque { padding: 1.6rem 16px; }
  .connexion-marque h1 { font-size: 1.6rem; margin: 1.4rem 0 .6rem; }
  .atouts { display: none; }
  .barre-ligne { grid-template-columns: 1fr auto; }
  .barre-ligne svg { grid-column: 1 / -1; grid-row: 2; }
  .q-corps { padding: 1rem 16px 2.5rem; }
  .question { padding: 1rem; }
  .q-etat { display: none; }
}

/* compléments */
.legende-inline { display: inline-flex; align-items: center; gap: .35rem; }
.carte .grille-2 { margin-bottom: 0; }
.connexion-carte .flash { align-items: flex-start; }
.etapes-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.etapes-liste li { display: flex; gap: .8rem; align-items: flex-start; }
.etapes-liste p { margin: .15rem 0 0; font-size: .88rem; }
.rond { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800;
  background: var(--bleu-clair); color: var(--bleu); }
.note { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--texte-2); background: var(--carte-2);
  border: 1px solid var(--bord); border-radius: 10px; padding: .6rem .8rem; margin: 0; }
.depot { cursor: pointer; color: var(--texte); font-size: .92rem; }
.depot strong { font-size: 1rem; }
.barre-progression { width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: var(--gris-fond); appearance: none; margin-bottom: 1rem; }
.barre-progression::-webkit-progress-bar { background: var(--gris-fond); }
.barre-progression::-webkit-progress-value { background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.barre-progression::-moz-progress-bar { background: linear-gradient(90deg, var(--bleu), var(--ciel)); }
.pourcent-grand { font-size: 1.6rem; font-weight: 800; color: var(--bleu); }
.sommaire-liste li { align-items: center; }
.sommaire-liste li > div { flex: 1; }
.rond-ok { background: var(--vert-fond); color: var(--vert); }
.repondant { display: flex; gap: .8rem; align-items: center; }
.repondant h2 { margin: 0; }
.repondant p { margin: 0; }
.resultat-section { border-top: 1px solid var(--bord); padding: .7rem 0; }
.resultat-section summary { cursor: pointer; display: flex; gap: .6rem; align-items: baseline; }
.resultat-section p { margin: .25rem 0; font-size: .9rem; }
.q-pied { text-align: center; }
.champ-nombre { max-width: 260px; }
.question textarea, .question > input { margin: 0; }