/* Ad Vocatus — feuille unique. Laque sombre, laiton, encre claire.
   Règle tenue partout : jamais d'encre sombre sur fond bleu. */

:root{
  color-scheme: dark;
  --laque:#0d1418;
  --laque-basse:#0b1114;
  --laque-haute:#0f181c;
  --panneau:#16222899;
  --panneau-plein:#131f24;
  --trait:#2a3b42;
  --trait-fort:#3b525b;
  --encre:#eef4f3;
  --encre-douce:#9fb3b7;
  --encre-faible:#6f868c;
  --laiton:#d9a94c;
  --laiton-sourd:#8d6f31;
  --vif:#4cb79a;
  --alerte:#e07a4f;
  --rouge:#d9534f;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --acte:'Spectral',Georgia,'Times New Roman',serif;
  --rail:62px;
  --panneau-l:410px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--laque);color:var(--encre);font-family:var(--ui);font-size:14px;
  background-image:radial-gradient(900px 500px at 74% -10%, #1d3a3a55, transparent 70%)}
button,input,select,textarea{font:inherit}
a{color:var(--laiton)}
img{max-width:100%}
[hidden]{display:none !important}

/* ───────────────── charpente ───────────────── */

.cadre{height:100%;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  padding-left:max(0px, env(safe-area-inset-left, 0px));padding-right:max(0px, env(safe-area-inset-right, 0px))}
.cadre.avec-panneau{grid-template-columns:var(--rail) minmax(0,1fr) var(--panneau-l)}

.rail{border-right:1px solid var(--trait);display:flex;flex-direction:column;align-items:center;gap:7px;
  padding-block:14px;background:var(--laque-basse)}
.rail .sceau{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(150deg,var(--laiton),var(--laiton-sourd));color:#1a1206 !important;
  font-weight:700;font-size:13px;font-family:var(--acte);text-decoration:none;border:0;cursor:pointer}
.rail a.nav,.rail button.nav{width:40px;height:40px;border-radius:11px;border:1px solid transparent;background:transparent;
  color:var(--encre-faible) !important;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.rail a.nav:hover{color:var(--encre-douce) !important;background:#141f23}
.rail [aria-current="page"]{background:#1d2e32;border-color:var(--trait-fort);color:var(--laiton) !important}
.rail svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail .bas{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:7px}
.rail .pastille{width:8px;height:8px;border-radius:50%;background:var(--vif)}

.centre{min-width:0;display:flex;flex-direction:column;overflow:hidden}

.fil{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--trait);
  background:var(--laque-haute);padding-block:13px;
  padding-left:max(22px, env(safe-area-inset-left, 0px));padding-right:max(22px, env(safe-area-inset-right, 0px))}
.fil a,.fil span{font-size:12.5px;color:var(--encre-faible) !important;text-decoration:none}
.fil a:hover{color:var(--encre-douce) !important}
.fil .ici{color:var(--encre) !important;font-weight:600}
.fil .sep{color:var(--trait-fort) !important}
.chiffres{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.chiffres div{font-size:11px;color:var(--encre-faible) !important}
.chiffres b{display:block;font-size:14px;color:var(--encre-douce) !important;font-weight:600;
  font-variant-numeric:tabular-nums;margin-top:2px}
.chiffres .or b{color:var(--laiton) !important}
.chiffres .v b{color:var(--vif) !important}

.chapeau{border-bottom:1px solid var(--trait);background:var(--laque-haute);padding-block:18px 15px;
  padding-left:max(26px, env(safe-area-inset-left, 0px));padding-right:max(26px, env(safe-area-inset-right, 0px))}
.chapeau .haut{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.chapeau h1{margin:0;font-family:var(--acte);font-weight:600;font-size:24px;letter-spacing:-.01em;
  color:var(--encre) !important;text-wrap:balance}
.chapeau .date,.chapeau .cab{font-size:12px;color:var(--encre-faible) !important}
.chapeau .cles{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.chapeau .cles div{font-size:11px;color:var(--encre-faible) !important}
.chapeau .cles b{display:block;font-size:19px;font-weight:600;color:var(--encre-douce) !important;
  font-variant-numeric:tabular-nums;margin-top:3px}
.chapeau .cles .or b{color:var(--laiton) !important}
.chapeau .cles .v b{color:var(--vif) !important}

.corps{overflow:auto;flex:1;padding-block:20px 40px;
  padding-left:max(22px, env(safe-area-inset-left, 0px));padding-right:max(22px, env(safe-area-inset-right, 0px))}
.corps.serre{max-width:980px}

.panneau{border-left:1px solid var(--trait);background:var(--panneau-plein);overflow:auto;
  padding-block:18px 30px;
  padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}

/* ───────────────── blocs ───────────────── */

.sect{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-faible) !important;
  margin:0 0 12px}
.sect.espace{margin-top:30px}
.intro{font-size:13px;line-height:1.6;color:var(--encre-douce) !important;max-width:76ch;margin:0 0 20px}
.intro b{color:var(--laiton) !important;font-weight:600}

.carte{border:1px solid var(--trait);border-radius:13px;padding:15px 16px;margin-bottom:11px;
  background:#131f2440}
.carte:hover{border-color:var(--trait-fort)}
.carte .titre{font-size:14.5px;font-weight:600;color:var(--encre) !important;margin:0 0 4px}
.carte .sous{font-size:12px;color:var(--encre-faible) !important;line-height:1.5}
.carte.lien{display:block;text-decoration:none;color:inherit}

.grille{display:grid;gap:11px}
.grille.d2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grille.d3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.vide{border:1px dashed var(--trait);border-radius:13px;padding:26px;text-align:center;
  color:var(--encre-faible) !important;font-size:13px}

/* ───────────────── listes à lignes ───────────────── */

.ligne{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--trait);
  border-radius:12px;margin-bottom:8px;background:#131f2440;text-decoration:none;color:inherit}
.ligne:hover{border-color:var(--trait-fort);background:#16242a66}
.ligne .dit{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ligne .n{font-size:13.5px;font-weight:600;color:var(--encre) !important;display:block}
.ligne .m{font-size:12px;color:var(--encre-faible) !important;line-height:1.45;display:block}
.ligne .h{font-size:12px;color:var(--encre-douce) !important;font-variant-numeric:tabular-nums;
  min-width:56px}
.ligne .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  border:1px solid var(--trait);color:var(--encre-faible) !important}
.ligne .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ligne .ic.or{color:var(--laiton) !important;border-color:var(--laiton-sourd)}
.ligne .ic.vive{color:var(--vif) !important;border-color:#2f6b5c}
.ligne .ic.rouge{color:var(--alerte) !important;border-color:#7a4430}

/* ───────────────── boutons ───────────────── */

.go{border:1px solid var(--trait-fort);background:#16242a;color:var(--encre-douce) !important;
  border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.go:hover{background:#1d2e32;color:var(--encre) !important}
.go.fort{background:linear-gradient(150deg,var(--laiton),var(--laiton-sourd));border-color:var(--laiton-sourd);
  color:#1a1206 !important}
.go.fort:hover{filter:brightness(1.07);color:#1a1206 !important}
.go.vive{border-color:#2f6b5c;color:var(--vif) !important;background:#13241f}
.go.danger{border-color:#7a4430;color:var(--alerte) !important;background:#241713}
.go.nu{border-color:transparent;background:transparent;color:var(--encre-faible) !important}
.go.nu:hover{color:var(--encre) !important;background:#16242a}
.go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.go[disabled]{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.actions.droite{margin-left:auto}

/* ───────────────── étiquettes ───────────────── */

.etiq{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--trait);border-radius:999px;
  padding:3px 10px;font-size:11px;color:var(--encre-faible) !important;white-space:nowrap}
.etiq.or{color:var(--laiton) !important;border-color:var(--laiton-sourd);background:#2418062e}
.etiq.vive{color:var(--vif) !important;border-color:#2f6b5c;background:#0f241f}
.etiq.rouge{color:var(--alerte) !important;border-color:#7a4430;background:#241713}
.etiq.pleine{background:#1d2e32;color:var(--encre-douce) !important}

/* ───────────────── frise des étapes ───────────────── */

.frise{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:4px 0 18px}
.frise .pas{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--encre-faible) !important}
.frise .rond{width:19px;height:19px;border-radius:50%;border:1px solid var(--trait-fort);display:grid;
  place-items:center;font-size:10px;color:var(--encre-faible) !important;flex:none}
.frise .barre{width:34px;height:1px;background:var(--trait);margin:0 9px}
.frise .pas.faite .rond{background:#1d3029;border-color:#2f6b5c;color:var(--vif) !important}
.frise .pas.faite{color:var(--encre-douce) !important}
.frise .pas.ici .rond{background:linear-gradient(150deg,var(--laiton),var(--laiton-sourd));
  border-color:var(--laiton-sourd);color:#1a1206 !important}
.frise .pas.ici{color:var(--laiton) !important;font-weight:600}

/* ───────────────── tableaux ───────────────── */

table.tab{width:100%;border-collapse:collapse;font-size:12.5px}
table.tab th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-faible) !important;font-weight:500;padding:0 14px 9px 0;white-space:nowrap}
table.tab td{padding:11px 14px 11px 0;border-top:1px solid var(--trait);color:var(--encre-douce) !important;
  vertical-align:top}
table.tab td.n{color:var(--encre) !important;font-weight:600}
table.tab td.chiffre{font-variant-numeric:tabular-nums;text-align:right;padding-right:18px}
table.tab td.chiffre:last-child,table.tab th:last-child{padding-right:0}
table.tab tr:hover td{background:#131f2433}
.table-cadre{overflow-x:auto}

/* ───────────────── texte d'acte ───────────────── */

.acte{font-family:var(--acte);font-size:14.5px;line-height:1.75;color:var(--encre-douce) !important;
  max-width:74ch}
.acte h2{font-size:15px;font-weight:600;color:var(--encre) !important;margin:22px 0 8px;
  font-family:var(--ui);letter-spacing:.01em}
.acte p{margin:0 0 13px}
mark.trace{background:#3a2a0c;color:var(--laiton) !important;border-bottom:1px solid var(--laiton-sourd);
  padding:1px 3px;border-radius:3px;cursor:pointer}
mark.trace.remplacee{background:#13281f;color:var(--vif) !important;border-color:#2f6b5c}
mark.trace.completer{background:#2c1710;color:var(--alerte) !important;border-color:#7a4430}
mark.residu{background:#331410;color:var(--alerte) !important;border-bottom:1px solid var(--alerte)}

/* ───────────────── formulaires ───────────────── */

label.champ{display:block;margin-bottom:13px}
label.champ span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-faible) !important;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=search],select,textarea{
  width:100%;background:#101a1e;border:1px solid var(--trait);border-radius:10px;padding:10px 12px;
  color:var(--encre) !important;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--laiton-sourd)}
input::placeholder,textarea::placeholder{color:var(--encre-faible) !important}
textarea{resize:vertical;min-height:90px;line-height:1.6}
.rangee{display:flex;gap:12px;flex-wrap:wrap}
.rangee > *{flex:1 1 180px;min-width:0}

/* ───────────────── mémo ───────────────── */

.memo{border:1px solid var(--trait);border-radius:14px;background:#101a1e;overflow:hidden;margin-bottom:16px}
.memo textarea{border:0;border-radius:0;background:transparent;min-height:130px;font-family:var(--acte);
  font-size:14px}
.memo .pied{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--trait);
  background:#0e171b;flex-wrap:wrap}
.memo .pied small{font-size:11px;color:var(--encre-faible) !important}
.lu{border-left:2px solid var(--laiton-sourd);padding:9px 0 9px 13px;margin:10px 0;font-size:12.5px;
  color:var(--encre-douce) !important;line-height:1.55}
.lu b{color:var(--laiton) !important;font-weight:600}

/* ───────────────── messages ───────────────── */

.bulle{border:1px solid var(--trait);border-radius:13px;padding:11px 13px;margin-bottom:9px;
  background:#131f2440;max-width:min(640px,92%)}
.bulle.moi{margin-left:auto;background:#16242a;border-color:var(--trait-fort)}
.bulle .qui{font-size:11px;color:var(--encre-faible) !important;margin-bottom:4px;display:flex;gap:8px}
.bulle .corps{font-size:13px;line-height:1.55;color:var(--encre-douce) !important;white-space:pre-wrap}

.alerte-bande{border:1px solid var(--laiton-sourd);background:#2418062e;border-radius:12px;padding:12px 14px;
  margin-bottom:14px;font-size:12.5px;color:var(--laiton) !important;line-height:1.55;
  display:flex;gap:11px;align-items:flex-start}
.alerte-bande.rouge{border-color:#7a4430;background:#241713;color:var(--alerte) !important}
.alerte-bande.vive{border-color:#2f6b5c;background:#0f241f;color:var(--vif) !important}
.alerte-bande svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.flash{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:40;display:flex;
  flex-direction:column;gap:8px;max-width:min(560px,92vw)}
.flash div{border:1px solid var(--trait-fort);background:#16242aee;border-radius:12px;padding:11px 16px;
  font-size:13px;color:var(--encre) !important;box-shadow:0 10px 30px #0008}
.flash div.erreur{border-color:#7a4430;color:var(--alerte) !important}
.flash div.vive{border-color:#2f6b5c;color:var(--vif) !important}

/* ───────────────── jauges et mesures ───────────────── */

.jauge{height:4px;border-radius:999px;background:#1b272c;overflow:hidden;margin-top:7px}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--laiton-sourd),var(--laiton))}
.jauge.vive i{background:linear-gradient(90deg,#2f6b5c,var(--vif))}
.jauge.rouge i{background:linear-gradient(90deg,#7a4430,var(--alerte))}
.mesure{font-variant-numeric:tabular-nums;font-size:12px;color:var(--encre-douce) !important}

/* ───────────────── téléphone ───────────────── */

.tel{max-width:430px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.tel .haut{position:sticky;top:env(safe-area-inset-top, 0px);background:var(--laque-haute);
  border-bottom:1px solid var(--trait);padding:13px 16px;display:flex;align-items:center;gap:11px;z-index:5}
.tel .corps{flex:1;padding:16px;padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px))}
.tel .barre-bas{position:sticky;bottom:0;background:var(--laque-basse);border-top:1px solid var(--trait);
  display:flex;justify-content:space-around;padding:9px 0 calc(9px + env(safe-area-inset-bottom, 0px))}
.tel .barre-bas a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;
  color:var(--encre-faible) !important;text-decoration:none}
.tel .barre-bas a[aria-current="page"]{color:var(--laiton) !important}
.tel .barre-bas svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ───────────────── page publique et connexion ───────────────── */

.seuil{min-height:100dvh;display:grid;place-items:center;padding-block:40px;
  padding-left:max(18px, env(safe-area-inset-left, 0px));padding-right:max(18px, env(safe-area-inset-right, 0px))}
.seuil .boite{width:min(430px,100%);border:1px solid var(--trait);border-radius:18px;
  background:var(--panneau-plein);padding:28px 26px}
.seuil .marque{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.seuil .marque .sceau{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--laiton),var(--laiton-sourd));color:#1a1206 !important;
  font-family:var(--acte);font-weight:700;font-size:15px}
.seuil .marque b{font-family:var(--acte);font-size:19px;font-weight:600;color:var(--encre) !important}
.seuil h1{font-family:var(--acte);font-size:21px;font-weight:600;margin:0 0 7px;color:var(--encre) !important}
.seuil p.dit{font-size:13px;line-height:1.6;color:var(--encre-faible) !important;margin:0 0 20px}

/* ───────────────── adaptation ───────────────── */

.trace-l{border:1px solid var(--trait);border-radius:12px;padding:11px 13px;margin-bottom:9px;
  background:#131f2440}
.trace-l.traitee{border-color:#2f6b5c;background:#0f241f55}
.trace-l.completer{border-color:#7a4430;background:#24171355}
.trace-l .forme{font-family:var(--acte);font-size:14px;color:var(--laiton) !important;font-weight:600}
.trace-l .occ{font-size:11px;color:var(--encre-faible) !important;margin-left:7px}
.trace-l .issues{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.trace-l .issues button{flex:1 1 90px}

/* ───────────────── écran étroit ───────────────── */

@media (max-width:1180px){
  :root{--panneau-l:330px}
}
@media (max-width:1040px){
  /* Le panneau ne disparaît pas : il passe sous le contenu, la page entière défile. */
  html,body{height:auto}
  .cadre,.cadre.avec-panneau{grid-template-columns:var(--rail) minmax(0,1fr);
    height:auto;min-height:100dvh}
  .rail{grid-row:1 / -1;position:sticky;top:0;align-self:start;height:100dvh}
  .centre{overflow:visible}
  .corps{overflow:visible}
  .panneau{grid-column:2;grid-row:2;border-left:0;border-top:1px solid var(--trait);
    overflow:visible}
  .tel{min-height:100dvh}
  .seuil{min-height:100dvh}
}
@media (max-width:720px){
  :root{--rail:54px}
  .chapeau .cles{gap:18px}
  .chapeau h1{font-size:20px}
  .ligne{flex-wrap:wrap}
  .ligne .h{min-width:46px}
}