/* ------------------------------------------------------------------ base */
:root{
  --encre:#16202b;
  --encre-doux:#5a6b7c;
  --fond:#f5f2ec;
  --papier:#ffffff;
  --bleu:#1f3a5f;
  --bleu-clair:#e8eef5;
  --eau:#3d7a8c;
  --trait:#dfd8cc;
  --rouge:#b23a2e;
  --ambre:#b8860b;
  --vert:#3f7d4e;
  --rayon:10px;
  --ombre:0 1px 2px rgba(22,32,43,.06), 0 6px 20px rgba(22,32,43,.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --encre:#e8e6e1; --encre-doux:#9aa7b4; --fond:#14181d; --papier:#1c2229;
    --bleu:#8fb2d9; --bleu-clair:#22303f; --eau:#6fb3c4; --trait:#2c3540;
    --rouge:#e0776a; --ambre:#d9a83a; --vert:#79b98a;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{line-height:1.25; color:var(--bleu); font-weight:700}
a{color:var(--eau)}
em{color:inherit}

/* ------------------------------------------------------------------ écrans centrés */
.boite{
  max-width:560px; margin:8vh auto; padding:38px 34px;
  background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--rayon); box-shadow:var(--ombre);
}
.surtitre{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-doux); margin:0 0 4px;
}
.boite h1{margin:0 0 18px; font-size:30px}
.intro{color:var(--encre-doux); margin:0 0 24px}

.etats{display:flex; gap:10px; margin:0 0 26px; flex-wrap:wrap}
.etat{
  flex:1 1 160px; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border:1px solid var(--trait); border-radius:8px; background:var(--fond);
}
.etat.ok{border-color:var(--vert)}
.etat-nom{font-weight:600; font-size:14px}
.etat-badge{font-size:12px; font-weight:700; color:var(--vert)}
.etat-badge.attente{color:var(--encre-doux)}

.formulaire-court label{display:block; font-weight:600; font-size:14px; margin:14px 0 6px}
.formulaire-court input,.formulaire-court select{width:100%}
.formulaire-court .bouton{width:100%; margin-top:20px}
.liens-bas{margin-top:26px; padding-top:18px; border-top:1px solid var(--trait);
  font-size:14px; color:var(--encre-doux); display:flex; gap:10px; justify-content:center}

/* ------------------------------------------------------------------ champs */
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--encre);
  background:var(--papier); border:1px solid var(--trait); border-radius:8px;
}
textarea{resize:vertical; min-height:96px}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--eau); box-shadow:0 0 0 3px rgba(61,122,140,.18);
}
.champ-unite{display:flex; align-items:center; gap:10px}
.champ-unite input{max-width:220px}
.unite{font-size:14px; color:var(--encre-doux); font-weight:600}

.bouton{
  display:inline-block; padding:12px 22px; font:inherit; font-weight:600;
  color:#fff; background:var(--bleu); border:1px solid var(--bleu);
  border-radius:8px; cursor:pointer; text-decoration:none; text-align:center;
}
.bouton:hover{filter:brightness(1.12)}
.bouton.secondaire{background:transparent; color:var(--bleu)}
.bouton.mini{padding:8px 14px; font-size:13px}
@media (prefers-color-scheme: dark){ .bouton{color:#0f1419} }

/* ------------------------------------------------------------------ barre */
.barre{position:sticky; top:0; z-index:20; background:var(--papier); border-bottom:1px solid var(--trait)}
.barre-in{
  max-width:920px; margin:0 auto; padding:12px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.barre strong{display:block; font-size:15px}
.barre-droite{display:flex; align-items:center; gap:16px; font-size:14px}
.compteur{font-variant-numeric:tabular-nums; font-weight:700; color:var(--bleu)}
.lien-sortie{color:var(--encre-doux); text-decoration:none}
.lien-sortie:hover{color:var(--eau)}
.etat-sauvegarde{font-size:13px; color:var(--vert); min-width:0}
.progression{height:3px; background:var(--trait)}
.progression-barre{height:3px; background:var(--eau); transition:width .3s}

/* ------------------------------------------------------------------ page */
.page{max-width:920px; margin:0 auto; padding:30px 22px 90px}
.page-texte{max-width:760px}
.chapeau{font-size:18px; color:var(--encre-doux)}

.bandeau{padding:12px 16px; border-radius:8px; margin:0 0 22px; font-weight:600}
.bandeau.ok{background:rgba(63,125,78,.12); color:var(--vert)}
.bandeau.erreur{background:rgba(178,58,46,.12); color:var(--rouge)}
.erreur{color:var(--rouge); font-weight:600}

.intro-questionnaire{
  background:var(--papier); border:1px solid var(--trait); border-left:4px solid var(--eau);
  border-radius:var(--rayon); padding:22px 26px; margin-bottom:26px;
}
.intro-questionnaire h1{margin:0 0 12px; font-size:24px}
.intro-questionnaire p{margin:0 0 10px; color:var(--encre-doux)}

.sommaire-sections{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.sommaire-sections a{
  font-size:13px; padding:6px 12px; border:1px solid var(--trait); border-radius:99px;
  background:var(--papier); text-decoration:none; color:var(--encre-doux);
}
.sommaire-sections a:hover{border-color:var(--eau); color:var(--eau)}

.section{
  scroll-margin-top:80px;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:26px 28px; margin-bottom:22px; box-shadow:var(--ombre);
}
.section h2{display:flex; align-items:center; gap:12px; margin:0 0 6px; font-size:21px}
.section .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--bleu-clair);
  color:var(--bleu); font-size:14px; font-weight:700; flex:none;
}
.section-intro{color:var(--encre-doux); margin:0 0 22px; font-size:15px}

.question{padding:20px 0; border-top:1px solid var(--trait)}
.question:first-of-type{border-top:none}
.question.manquante{
  border-left:3px solid var(--rouge); margin-left:-16px; padding-left:13px;
  background:rgba(178,58,46,.04);
}
.q-label{display:block; font-weight:600; margin-bottom:5px}
.obligatoire{color:var(--rouge); margin-left:3px}
.q-aide{margin:0 0 12px; font-size:14px; color:var(--encre-doux); font-style:italic}

.echelle{display:grid; grid-template-columns:repeat(10,1fr); gap:6px}
.cran{position:relative; cursor:pointer}
.cran input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.cran span{
  display:block; text-align:center; padding:12px 0; font-weight:700; font-variant-numeric:tabular-nums;
  border:1px solid var(--trait); border-radius:8px; background:var(--papier); color:var(--encre-doux);
}
.cran:hover span{border-color:var(--eau); color:var(--eau)}
.cran input:checked + span{background:var(--bleu); border-color:var(--bleu); color:#fff}
.cran input:focus-visible + span{box-shadow:0 0 0 3px rgba(61,122,140,.35)}
@media (prefers-color-scheme: dark){ .cran input:checked + span{color:#0f1419} }
.echelle-bornes{display:flex; justify-content:space-between; font-size:12px; color:var(--encre-doux); margin-top:5px}
@media (max-width:520px){ .echelle{gap:4px} .cran span{padding:10px 0; font-size:14px} }

.options{display:flex; flex-direction:column; gap:7px}
.options-multi{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:7px}
.option{
  display:flex; align-items:flex-start; gap:10px; padding:10px 13px;
  border:1px solid var(--trait); border-radius:8px; cursor:pointer; font-size:15px;
}
.option:hover{border-color:var(--eau)}
.option input{margin-top:3px; accent-color:var(--eau); flex:none}
.option:has(input:checked){border-color:var(--eau); background:var(--bleu-clair)}

.zone-envoi{border-color:var(--eau)}
.boutons{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.carte-info{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:30px; text-align:center; box-shadow:var(--ombre);
}
.carte-info h2{margin-top:0}
.actions-info{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px}

/* ------------------------------------------------------------------ comparaison */
.resume{display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap}
.resume-bloc{
  flex:1 1 140px; background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:16px 18px; font-size:14px; color:var(--encre-doux);
}
.resume-bloc .chiffre{display:block; font-size:30px; font-weight:700; line-height:1.1}
.resume-bloc.fort{border-left:4px solid var(--rouge)} .resume-bloc.fort .chiffre{color:var(--rouge)}
.resume-bloc.notable{border-left:4px solid var(--ambre)} .resume-bloc.notable .chiffre{color:var(--ambre)}
.resume-bloc.convergence{border-left:4px solid var(--vert)} .resume-bloc.convergence .chiffre{color:var(--vert)}

.note-methode{font-size:14px; color:var(--encre-doux); margin-bottom:20px}
.filtres{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; position:sticky; top:56px; z-index:10;
  background:var(--fond); padding:8px 0}
.filtre{
  font:inherit; font-size:13px; padding:7px 15px; border-radius:99px; cursor:pointer;
  border:1px solid var(--trait); background:var(--papier); color:var(--encre-doux);
}
.filtre.actif{background:var(--bleu); border-color:var(--bleu); color:#fff}
@media (prefers-color-scheme: dark){ .filtre.actif{color:#0f1419} }

.comparaison{padding:22px 0; border-top:1px solid var(--trait); scroll-margin-top:120px}
.comparaison:first-of-type{border-top:none}
.comparaison.fort{border-left:3px solid var(--rouge); padding-left:16px; margin-left:-19px}
.comparaison.notable{border-left:3px solid var(--ambre); padding-left:16px; margin-left:-19px}
.comparaison-tete{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.comparaison h3{margin:0 0 12px; font-size:16px; flex:1 1 300px}
.etiquette{font-size:12px; font-weight:700; padding:4px 10px; border-radius:99px; white-space:nowrap}
.etiquette.fort{background:rgba(178,58,46,.14); color:var(--rouge)}
.etiquette.notable{background:rgba(184,134,11,.16); color:var(--ambre)}
.etiquette.convergence{background:rgba(63,125,78,.14); color:var(--vert)}

.colonnes{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.colonne{background:var(--fond); border:1px solid var(--trait); border-radius:8px; padding:14px 16px}
.colonne-nom{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--encre-doux); margin-bottom:8px}
.colonne-corps{font-size:15px}
.pastille{display:inline-block; background:var(--bleu-clair); color:var(--bleu);
  font-weight:700; padding:4px 12px; border-radius:8px}
.liste-choix{margin:0; padding-left:18px}
.liste-choix li{margin-bottom:3px}
.vide{color:var(--encre-doux); font-style:italic}

.cotation{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center}
.cotation select{flex:0 1 280px; font-size:14px; padding:8px 10px}
.cotation input[type=text]{flex:1 1 240px; font-size:14px; padding:8px 10px}
.comparaison.est-cote{background:rgba(31,58,95,.035)}

.tableau{width:100%; border-collapse:collapse; margin:16px 0; font-size:15px}
.tableau th,.tableau td{border:1px solid var(--trait); padding:10px 12px; text-align:left; vertical-align:top}
.tableau th{background:var(--bleu-clair); color:var(--bleu)}

.page-texte h2{margin-top:34px}
.page-texte li{margin-bottom:8px}

@media (max-width:640px){
  .colonnes{grid-template-columns:1fr}
  .boite{margin:0; border-radius:0; border-left:none; border-right:none; min-height:100vh}
  .section{padding:20px 18px}
  .comparaison.fort,.comparaison.notable{margin-left:-13px; padding-left:10px}
}

@media print{
  .barre,.filtres,.cotation,.liens-bas,.note-methode,.bouton{display:none !important}
  body{background:#fff}
  .section{break-inside:auto; box-shadow:none; border:none; padding:0}
  .comparaison{break-inside:avoid}
}