/* =====================================================================
   AUDIT DE CROISSANCE — parcours et rapport.
   Structure de document de conseil : rail de sections à gauche, la
   question seule à droite. Navy de la charte sur les moments forts.
   ===================================================================== */

:root {
  --navy: #00194C;
  --navy-deep: #000D2B;
  --blue: #0046FF;
  --blue-2: #2563FF;
  --blue-soft: #6B9FFF;
  --ink: #0B1526;
  --ink-soft: #3F4759;
  --ink-mute: #6E778B;
  --rule: #DEE2EA;
  --rule-fine: #EDF0F5;
  --paper: #F4F6FA;
  --white: #fff;
  --fort: #16694E;
  --moyen: #96660F;
  --faible: #A32C22;
  --tete: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --corps: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --rail: 268px;
  --r-sm: 12px;
  --r: 16px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--corps); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--tete); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
/* Un display pose par une classe l'emporte sur le display:none de [hidden] :
   un bloc masque en JS restait affiche, vide. On le reaffirme une fois pour
   toutes plutot que de le rattraper element par element. */
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* =====================================================================
   RAIL — la colonne navy qui tient tout le parcours
   ===================================================================== */
.cadre { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--navy-deep); color: #fff; padding: 34px 30px 30px;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background-image:
    radial-gradient(520px 300px at 20% -10%, rgba(0,70,255,0.30), transparent 65%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 44px);
}
.rail-logo img { height: 24px; width: auto; display: block; }
.rail-titre {
  margin-top: 30px; font-family: var(--tete); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft);
}
.rail-sections { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; }
.rail-sections li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center;
  padding: 9px 0; font-size: 13.5px; color: rgba(255,255,255,0.34);
  transition: color 0.35s ease;
}
.rail-sections li .p {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.16);
  justify-self: center; transition: background 0.35s ease, box-shadow 0.35s ease;
}
.rail-sections li.faite { color: rgba(255,255,255,0.6); }
.rail-sections li.faite .p { background: var(--blue-soft); }
.rail-sections li.ici { color: #fff; font-weight: 600; }
.rail-sections li.ici .p { background: var(--blue-2); box-shadow: 0 0 0 4px rgba(37,99,255,0.2); }

.rail-pied { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.rail-avance {
  font-family: var(--tete); font-weight: 700; font-size: 32px; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.rail-avance em { font-style: normal; font-size: 0.42em; font-weight: 600; color: rgba(255,255,255,0.45); }
.rail-jauge { height: 3px; background: rgba(255,255,255,0.13); margin-top: 12px; overflow: hidden; }
.rail-jauge i { display: block; height: 100%; width: 0; background: var(--blue-2); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.rail-note { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,0.60); line-height: 1.5; }

/* barre mobile */
.barre-mob { display: none; }

/* =====================================================================
   RETOUR AU SITE — écran d'identité seulement
   Le tunnel reste dépouillé une fois commencé ; ici le visiteur n'a encore
   rien engagé, il doit voir qu'il est chez Max Piccinini et pouvoir y aller.
   ===================================================================== */
.retour-site {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 62px; padding: 0 40px; border-bottom: 1px solid var(--rule-fine);
}
.rs-retour {
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s ease;
}
/* La fleche recule au survol : le geste est un retour, pas une avancee. */
.rs-retour::before { content: '\2190'; transition: transform 0.2s ease; }
.rs-retour:hover { color: var(--blue); }
.rs-retour:hover::before { transform: translateX(-3px); }
.rs-retour:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rs-liens { display: flex; gap: 26px; }
.rs-liens a {
  font-size: 14px; color: var(--ink-soft); text-decoration: none;
  transition: color 0.2s ease;
}
.rs-liens a:hover { color: var(--blue); }
.rs-liens a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Selecteur de langue de l'audit : meme registre que les liens du site. */
.rs-lang {
  margin-left: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-soft); text-decoration: none;
  border: 1px solid currentColor; border-radius: 3px; padding: 4px 8px;
  opacity: 0.55; transition: opacity 0.25s ease;
}
.rs-lang:hover, .rs-lang:focus-visible { opacity: 1; }

/* La barre occupe 62px : l'écran d'identité les rend, sinon la page déborde. */
#ec-identite.question { min-height: calc(100vh - 62px); }

/* =====================================================================
   SCÈNE
   ===================================================================== */
.scene { padding: 0; background: var(--white); }
.dedans { max-width: 640px; margin: 0 auto; padding: 0 40px; }
.ecran { display: none; animation: entree 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.ecran.actif { display: block; }
/* Les mises en page ci-dessous n'imposent leur display QUE sur l'ecran actif :
   sinon elles ecrasent le display:none et tous les ecrans s'empilent. */
.ecran.question.actif, .ecran.plein.actif { display: flex; flex-direction: column; justify-content: center; }
@keyframes entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- question ---------- */
.question { min-height: 100vh; padding: 70px 0; }
.q-rang {
  font-family: var(--tete); font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 20px;
}
.question h2 {
  font-size: clamp(25px, 3.3vw, 35px); font-weight: 600; line-height: 1.2;
  margin-bottom: 14px;
}
.question .aide { font-size: 15.5px; color: var(--ink-mute); margin: 0 0 32px; max-width: 52ch; line-height: 1.6; }
.question .exemple {
  font-size: 13.5px; color: var(--ink-mute); margin-top: 12px; line-height: 1.55;
  padding-left: 15px; border-left: 2px solid var(--rule);
}

/* ---------- champs ---------- */
.duo-champ { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.champ { display: grid; gap: 8px; }
.champ label { font-size: 13px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0.02em; }
.champ input, .champ textarea {
  font-family: var(--corps); font-size: 17px; color: var(--ink);
  padding: 15px 20px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--white); width: 100%; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.champ textarea { resize: vertical; min-height: 108px; line-height: 1.65; }
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,70,255,0.10);
}
.champ .aide-champ { font-size: 13px; color: var(--ink-mute); }
.err { font-size: 13.5px; color: var(--faible); font-weight: 500; margin-top: 10px; }

/* saisie chiffrée : registre financier */
.saisie-nb { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--white); overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.saisie-nb:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,70,255,0.10); }
.saisie-nb .unite {
  display: flex; align-items: center; padding: 0 4px 0 22px;
  font-family: var(--tete); font-weight: 600; color: var(--ink-mute); font-size: 22px;
}
.saisie-nb input {
  font-family: var(--tete); font-weight: 700; font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.03em; color: var(--ink); padding: 14px 8px; border: 0;
  background: none; width: 100%; font-variant-numeric: tabular-nums;
}
.saisie-nb input:focus { outline: none; }
.saisie-nb .suffixe {
  display: flex; align-items: center; padding: 0 22px 0 4px;
  color: var(--ink-mute); font-size: 14.5px; white-space: nowrap;
}

/* ---------- options ---------- */
.options { display: grid; gap: 9px; }
.option {
  display: flex; align-items: center; gap: 15px; padding: 17px 20px;
  border: 1px solid var(--rule); background: var(--white); border-radius: var(--r-sm);
  font-family: var(--corps); font-size: 16px; color: var(--ink); text-align: left;
  cursor: pointer; width: 100%;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.option:hover { border-color: rgba(0, 70, 255, 0.32); background: #FBFCFF; box-shadow: 0 4px 16px rgba(0, 25, 76, 0.05); transform: translateY(-1px); }
.option:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.option .puce { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--rule); border-radius: 50%; position: relative; }
.option[aria-checked="true"] { border-color: var(--blue); background: #F4F8FF; }
.option[aria-checked="true"] .puce { border-color: var(--blue); }
.option[aria-checked="true"] .puce::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--blue); }

.sais-pas {
  margin-top: 14px; background: none; border: 0; padding: 6px 0;
  font-family: var(--corps); font-size: 14px; color: var(--ink-mute);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sais-pas:hover { color: var(--blue); }

/* ---------- actions ---------- */
.actions { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
/* Boutons : jetons repris tels quels de la charte du site. */
.btn {
  font-family: var(--tete); font-weight: 600; font-size: 0.9375rem;
  background: linear-gradient(135deg, var(--navy) 0%, #0033CC 100%);
  color: #fff; border: 0; border-radius: var(--r-sm);
  padding: 14px 28px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::after { content: '\2192'; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0A0A0F 0%, var(--navy) 100%);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 13, 43, 0.2);
}
.btn:hover:not(:disabled)::after { transform: translateX(4px); }
.btn:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn-lg { font-size: 1rem; padding: 16px 34px; }
.entree-note { font-size: 12.5px; color: var(--ink-mute); }
.entree-note kbd {
  font-family: var(--corps); font-size: 11px; background: var(--paper);
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; padding: 2px 6px;
}
.btn-retour {
  background: none; border: 0; color: var(--ink-mute); font-family: var(--corps);
  font-size: 14px; cursor: pointer; padding: 10px 0; margin-top: 6px; text-align: left;
}
.btn-retour:hover { color: var(--ink); }
/* Grille et non flex : quatre mentions de longueurs inegales s enroulaient
   en lignes ragged. Deux colonnes fixes tiennent l alignement. */
.rassure {
  margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 28px; max-width: 520px; font-size: 13px; color: var(--ink-mute);
}
.rassure span { display: flex; align-items: center; gap: 9px; }
.rassure svg { flex: none; width: 16px; height: 16px; color: var(--blue); opacity: 0.85; }

/* =====================================================================
   MOMENTS FORTS — navy plein écran
   ===================================================================== */
.plein {
  min-height: 100vh; background: var(--navy-deep); color: #fff; padding: 70px 0;
  background-image:
    radial-gradient(900px 460px at 12% -12%, rgba(0,70,255,0.26), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 52px);
  margin: 0 -40px; padding-left: 40px; padding-right: 40px;
}
.plein h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; color: #fff; margin-bottom: 14px; }
.plein .chapo { font-size: 17px; color: rgba(255,255,255,0.62); margin: 0 0 36px; max-width: 50ch; }

/* calcul */
.calcul-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; max-width: 430px; }
.calcul-etapes li {
  display: grid; grid-template-columns: 18px 1fr; gap: 15px; align-items: center;
  font-size: 15.5px; color: rgba(255,255,255,0.3); transition: color 0.45s ease;
}
.calcul-etapes li .coche { color: var(--blue-soft); font-weight: 700; opacity: 0; transition: opacity 0.35s ease; }
.calcul-etapes li.ok { color: rgba(255,255,255,0.92); }
.calcul-etapes li.ok .coche { opacity: 1; }

/* scores */
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); }
.score { background: rgba(255,255,255,0.035); padding: 24px 22px; }
.score .axe { font-family: var(--tete); font-weight: 600; font-size: 13.5px; color: rgba(255,255,255,0.72); margin-bottom: 14px; min-height: 2.6em; }
.score .v { font-family: var(--tete); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.score .v em { font-style: normal; font-size: 0.34em; font-weight: 600; color: rgba(255,255,255,0.42); }
.score .jauge { height: 3px; background: rgba(255,255,255,0.14); margin-top: 15px; overflow: hidden; }
.score .jauge i { display: block; height: 100%; width: 0; transition: width 0.95s cubic-bezier(0.16,1,0.3,1); }
.n-faible { color: #F0857C; } .n-moyen { color: #E0B364; } .n-fort { color: #63C79C; }
.b-faible { background: #F0857C; } .b-moyen { background: #E0B364; } .b-fort { background: #63C79C; }
/* sur fond clair (rapport) */
.rapport .scores { background: var(--rule); border-color: var(--rule); }
.rapport .score { background: var(--white); }
.rapport .score .axe { color: var(--ink); }
.rapport .score .v em { color: var(--ink-mute); }
.rapport .score .jauge { background: var(--rule-fine); }
.rapport .n-faible { color: var(--faible); } .rapport .n-moyen { color: var(--moyen); } .rapport .n-fort { color: var(--fort); }
.rapport .b-faible { background: var(--faible); } .rapport .b-moyen { background: var(--moyen); } .rapport .b-fort { background: var(--fort); }

/* verrou */
.verrou { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.14); }
.verrou .lib { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); margin: 0 0 10px; }
.verrou .flou {
  font-family: var(--tete); font-weight: 700; font-size: clamp(34px, 6vw, 52px);
  letter-spacing: -0.035em; filter: blur(13px); user-select: none; color: #fff; margin-bottom: 22px;
}
.verrou h3 { font-size: 21px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.verrou p.intro { font-size: 15px; color: rgba(255,255,255,0.62); margin: 0 0 24px; max-width: 48ch; }
.verrou .champ label { color: rgba(255,255,255,0.72); }
.verrou .champ input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: #fff; }
.verrou .champ input::placeholder { color: rgba(255,255,255,0.3); }
.verrou .champ .aide-champ { color: rgba(255,255,255,0.45); }
.verrou .btn { background: var(--blue-2); margin-top: 22px; }
.verrou .btn:hover:not(:disabled) { background: #3d74ff; }

/* =====================================================================
   RAPPORT
   ===================================================================== */
.rapport { padding: 0 0 60px; }
.rapport-couv {
  background: var(--navy-deep); color: #fff; margin: 0 -40px 0; padding: 54px 40px 50px;
  background-image:
    radial-gradient(760px 400px at 14% -14%, rgba(0,70,255,0.26), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 52px);
}
.rapport-couv .lib { font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue-soft); margin: 0 0 16px; }
.rapport-couv h1 { font-size: clamp(27px, 4.4vw, 38px); font-weight: 700; line-height: 1.14; color: #fff; margin-bottom: 10px; }
.rapport-couv .sous { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 36px; }
.rapport-couv .pot-lib { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-soft); margin: 0 0 12px; }
.rapport-couv .pot {
  font-family: var(--tete); font-weight: 700; font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
/* le montant ne se coupe jamais avant son euro */
.rapport-couv .pot .montant { white-space: nowrap; }
.rapport-couv .pot small { font-size: 0.36em; font-weight: 600; color: rgba(255,255,255,0.55); margin-left: 10px; letter-spacing: 0; }
.rapport-couv .note { font-size: 13px; color: rgba(255,255,255,0.5); margin: 18px 0 0; max-width: 52ch; line-height: 1.6; }

.bloc { padding: 46px 0; border-bottom: 1px solid var(--rule); }
.bloc:last-of-type { border-bottom: 0; }
.bloc-lib { font-family: var(--tete); font-size: 11.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 6px; }
.bloc-chapo { font-size: 14.5px; color: var(--ink-mute); margin: 0 0 26px; max-width: 58ch; line-height: 1.6; }

.levier { padding: 26px 0; border-top: 1px solid var(--rule-fine); }
.levier:first-of-type { border-top: 1px solid var(--rule); }
.levier-tete { display: flex; align-items: baseline; gap: 15px; margin-bottom: 16px; flex-wrap: wrap; }
.levier-rang { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.levier-nom { font-family: var(--tete); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.levier-montant {
  margin-left: auto; font-family: var(--tete); font-weight: 700; font-size: 26px;
  letter-spacing: -0.03em; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.levier-montant small { display: block; font-size: 0.44em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.levier-montant.sans { font-size: 14px; color: var(--ink-mute); letter-spacing: 0; white-space: normal; max-width: 175px; }
.ligne { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.etiq { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; text-align: center; }
.etiq.mesure { background: var(--navy); color: #fff; }
.etiq.estime { background: #F7EFDD; color: var(--moyen); }
.ligne p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.62; }
.ligne p b { color: var(--ink); font-weight: 600; }
details.calcul-detail { margin: 14px 0 0 104px; }
details.calcul-detail summary { cursor: pointer; font-size: 12.5px; color: var(--blue); font-weight: 600; list-style: none; }
details.calcul-detail summary::-webkit-details-marker { display: none; }
details.calcul-detail summary::before { content: '▸ '; display: inline-block; transition: transform 0.2s; }
details.calcul-detail[open] summary::before { transform: rotate(90deg); }
details.calcul-detail .corps { margin-top: 10px; font-size: 13px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule-fine); padding: 13px 15px; font-variant-numeric: tabular-nums; }

.ecart { display: grid; grid-template-columns: auto 1fr; gap: 15px; background: var(--paper); border-left: 3px solid var(--ink-mute); padding: 17px 21px; margin-top: 24px; }
.ecart .t { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; padding-top: 2px; }
.ecart p { margin: 0 0 9px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.58; }
.ecart p:last-child { margin-bottom: 0; }

.message-cle {
  background: var(--navy); color: #fff; padding: 34px 32px; margin: 0 -40px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px),
                    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px);
}
.message-cle p { margin: 0; font-family: var(--tete); font-weight: 600; font-size: clamp(18px, 3.1vw, 23px); line-height: 1.35; }
.message-cle p b { color: var(--blue-soft); }
.message-cle .suite { font-family: var(--corps); font-weight: 400; font-size: 15px; color: rgba(255,255,255,0.68); margin-top: 16px; }

.recos { display: grid; }
.reco { display: grid; grid-template-columns: 26px 1fr; gap: 20px; padding: 19px 0; border-top: 1px solid var(--rule-fine); align-items: baseline; }
.reco:first-child { border-top: 1px solid var(--rule); }
.reco .r { font-size: 13px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.reco p { margin: 0; font-size: 16px; }
.reco p em { font-style: normal; display: block; font-size: 14.5px; color: var(--ink-mute); margin-top: 4px; }

.action-finale {
  background: var(--navy-deep); color: #fff; padding: 46px 40px; margin: 0 -40px;
  background-image:
    radial-gradient(620px 300px at 82% 0%, rgba(0,70,255,0.24), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px);
}
.action-finale h2 { font-size: clamp(21px, 3.6vw, 27px); font-weight: 700; color: #fff; margin-bottom: 12px; }
.action-finale p { font-size: 15.5px; color: rgba(255,255,255,0.66); margin: 0 0 28px; max-width: 48ch; }
.action-finale .btn { background: var(--blue-2); }
.mentions { padding: 26px 0 0; font-size: 12px; color: var(--ink-mute); line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .ecran { animation: none; }
  .rail-jauge i, .score .jauge i { transition: none; }
  .option:hover { transform: none; }
}

/* =====================================================================
   MOBILE — le rail devient une barre
   ===================================================================== */
@media (max-width: 900px) {
  /* minmax(0,1fr) et non 1fr : sinon la barre defilante impose sa largeur
     de contenu a toute la grille et la page part en scroll horizontal. */
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .barre-mob, .scene { min-width: 0; }
  .rail { display: none; }
  .barre-mob {
    display: block; position: sticky; top: 0; z-index: 20;
    background: var(--navy-deep); color: #fff; padding: 12px 20px 0;
  }
  .barre-mob .haut { display: flex; align-items: center; gap: 14px; padding-bottom: 11px; }
  .barre-mob img { height: 20px; width: auto; display: block; }
  .mob-logo { display: block; line-height: 0; }
  .mob-logo:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

  .retour-site { height: 54px; padding: 0 22px; }
  /* Les trois liens ne tiennent pas à côté du logo sous 900px : le logo
     suffit à dire où l'on est, et il ramène au site. */
  .rs-liens { display: none; }
  /* Ecran d'entree resserre : sur un 375x667, le bouton « Commencer » passait
     sous la ligne de flottaison. Rien ne compte plus que de le voir. */
  #ec-identite.question { min-height: calc(100vh - 62px - 54px); padding: 28px 0; }
  #ec-identite h2 { font-size: 23px; }
  #ec-identite .aide { margin-bottom: 22px; }
  #ec-identite .rassure { margin-top: 18px; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: 12.5px; }
  #ec-identite .rassure svg { width: 15px; height: 15px; }
  /* La barre du haut nomme deja la section : le sur-titre ferait doublon. */
  #ec-question .q-rang { display: none; }
  .barre-mob .sec { font-size: 12px; color: var(--blue-soft); font-weight: 600; letter-spacing: 0.05em; }
  .barre-mob .cpt { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
  .barre-mob .jauge { height: 3px; background: rgba(255,255,255,0.14); margin: 0 -20px; }
  .barre-mob .jauge i { display: block; height: 100%; width: 0; background: var(--blue-2); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }

  .dedans { padding: 0 22px; max-width: none; }
  .question { min-height: calc(100vh - 62px); padding: 42px 0; }
  .plein, .rapport-couv, .action-finale, .message-cle { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .scores { grid-template-columns: 1fr; }
  .duo-champ { grid-template-columns: 1fr; }
  .ligne { grid-template-columns: 1fr; gap: 7px; }
  .etiq { justify-self: start; }
  details.calcul-detail { margin-left: 0; }
  .levier-montant { margin-left: 0; width: 100%; text-align: left; }
  .levier-montant.sans { max-width: none; }
}


/* =====================================================================
   LECTURES INTERMÉDIAIRES — le rapport s'écrit sous les yeux
   ===================================================================== */
.lect-lib {
  font-family: var(--tete); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-soft); margin: 0 0 22px;
}
.lect-chiffre {
  font-family: var(--tete); font-weight: 700; font-size: clamp(52px, 9vw, 88px);
  line-height: 0.95; letter-spacing: -0.045em; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lect-sous {
  font-size: 14.5px; color: rgba(255, 255, 255, 0.5); margin: 12px 0 30px;
  padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); max-width: 42ch;
}
.lect-texte {
  font-family: var(--tete); font-weight: 600; font-size: clamp(18px, 2.7vw, 23px);
  line-height: 1.42; color: #fff; margin: 0 0 20px; max-width: 30ch;
}
.lect-texte b { color: var(--blue-soft); }
.lect-manque {
  font-size: 15px; color: rgba(255, 255, 255, 0.58); margin: 0; max-width: 46ch; line-height: 1.6;
  padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, 0.18);
}


/* =====================================================================
   FAITS ÉTABLIS dans le rail — le rapport se construit sous les yeux
   ===================================================================== */
.rail-faits {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.rf-titre {
  font-family: var(--tete); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-soft); margin: 0 0 14px;
}
.rail-faits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rail-faits li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.44);
  animation: faitEntre 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rail-faits li b {
  font-family: var(--tete); font-weight: 600; color: #fff; font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@keyframes faitEntre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   RADAR — quatre axes, uniquement quand les quatre existent
   ===================================================================== */
.radar-bloc { display: flex; justify-content: center; margin: 4px 0 26px; }
.radar { width: 100%; max-width: 400px; }
.radar svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar .toile { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.radar .axe { stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.radar .aire { fill: rgba(37, 99, 255, 0.24); stroke: var(--blue-2); stroke-width: 2;
  stroke-linejoin: round; transform-origin: center; animation: radarPousse 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.radar .point { fill: #fff; }
.radar .etiq { font-family: var(--corps); font-size: 10px; fill: rgba(255, 255, 255, 0.62); }
.radar .val { font-family: var(--tete); font-size: 12px; font-weight: 700; fill: #fff; }
@keyframes radarPousse { from { transform: scale(0.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* variante claire, dans le rapport */
.rapport .radar .toile, .rapport .radar .axe { stroke: var(--rule); }
.rapport .radar .aire { fill: rgba(0, 70, 255, 0.12); stroke: var(--blue); }
.rapport .radar .point { fill: var(--navy); }
.rapport .radar .etiq { fill: var(--ink-mute); }
.rapport .radar .val { fill: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .rail-faits li, .radar .aire { animation: none; }
}
@media (max-width: 900px) { .radar { max-width: 320px; } }

/* =====================================================================
   RAPPORT — mise en cartes
   ===================================================================== */
.rapport .bloc { padding: 40px 0 44px; border-bottom: 0; }
.bloc-tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.bloc-tete h2 { font-family: var(--tete); font-size: 21px; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; }
.bloc-tete .cle { margin-left: auto; font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }

/* --- cartes de note --- */
.rapport .scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; background: none; border: 0; }
.rapport .score {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 20px 20px 18px; box-shadow: 0 1px 3px rgba(0, 25, 76, 0.05);
}
.rapport .score .axe { font-size: 14px; color: var(--navy); margin-bottom: 12px; min-height: 0; }
.rapport .score .v { font-size: 34px; }
.rapport .score .jauge { height: 6px; border-radius: 99px; margin-top: 12px; }
.rapport .score .jauge i { border-radius: 99px; }
.score .verdict { margin-top: 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }

/* --- cartes de levier --- */
.rapport .levier {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 22px 24px; margin-top: 14px; border-top: 1px solid var(--rule);
  box-shadow: 0 1px 3px rgba(0, 25, 76, 0.05); position: relative; overflow: hidden;
}
.rapport .levier::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); }
.rapport .levier.sans-montant::before { background: var(--ink-mute); }
.rapport .levier-tete { align-items: center; gap: 13px; margin-bottom: 18px; }
.rapport .levier-rang {
  flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: #fff;
  font-family: var(--tete); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.rapport .levier-nom { font-size: 17.5px; color: var(--navy); }
.marque-src {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px;
}
.marque-src.mesure { background: var(--navy); color: #fff; }
.marque-src.estime { background: #F7EFDD; color: var(--moyen); }
.lev-stats { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: start; margin-bottom: 16px; }
.lev-stat .sl { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 4px; }
.lev-stat .sv { font-family: var(--tete); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.015em; }
.lev-stat:last-child { text-align: right; }
.lev-stat:last-child .sv { color: var(--fort); font-size: 21px; white-space: nowrap; }
.lev-stat.alerte .sv { color: var(--faible); }

/* --- manque à gagner --- */
.mag { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mag .m { border-radius: var(--r); padding: 22px 24px; }
.mag .mes { background: linear-gradient(180deg, #EDF7F3, #E6F2ED); border: 1px solid #C8E4DA; }
.mag .est { background: var(--white); border: 1px dashed #C7CFE0; }
.mag .lab { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.mag .mes .lab { color: var(--fort); } .mag .est .lab { color: var(--ink-mute); }
.mag .fig { font-family: var(--tete); font-weight: 700; font-size: clamp(24px, 3.4vw, 30px); line-height: 1.05; color: var(--navy); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mag .fig small { font-size: 0.42em; font-weight: 600; color: var(--ink-mute); margin-left: 6px; letter-spacing: 0; }
.mag .sub { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.55; }
.mag-regle {
  margin-top: 14px; font-size: 13px; color: var(--ink-soft); background: var(--white);
  border: 1px solid var(--rule); border-left: 3px solid var(--fort); border-radius: var(--r-sm);
  padding: 14px 17px; line-height: 1.6;
}
.mag-regle b { color: var(--navy); }

/* --- recommandations en cartes --- */
.rapport .recos { gap: 11px; }
.rapport .reco {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 16px 18px; border-top: 1px solid var(--rule);
  box-shadow: 0 1px 3px rgba(0, 25, 76, 0.05); align-items: start;
}
.rapport .reco .r {
  flex: none; width: 26px; height: 26px; border-radius: 8px; background: #EAF0FF; color: var(--blue);
  font-family: var(--tete); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.rapport .reco p { font-size: 15px; }

.rapport .message-cle { border-radius: var(--r); margin: 0; }
.rapport .action-finale { border-radius: var(--r); margin: 0; padding: 38px 32px; }
.rapport .rapport-couv { border-radius: 0 0 var(--r) var(--r); }

@media (max-width: 900px) {
  .rapport .scores, .mag { grid-template-columns: 1fr; }
  .lev-stats { grid-template-columns: 1fr 1fr; }
  .lev-stat:last-child { grid-column: 1 / -1; text-align: left; padding-top: 6px; border-top: 1px solid var(--rule-fine); }
  .rapport .action-finale, .rapport .message-cle { margin-left: 0; margin-right: 0; }
}


/* =====================================================================
   FAITS ÉTABLIS sur mobile — le rail n'existe pas, la barre les porte
   ===================================================================== */
.mob-faits { display: none; }
@media (max-width: 900px) {
  .mob-faits {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -20px; padding: 9px 20px 10px;
    background: rgba(0, 0, 0, 0.22);
    -webkit-overflow-scrolling: touch;
  }
  .mob-faits::-webkit-scrollbar { display: none; }
  .mob-faits span {
    flex: none; font-size: 11.5px; color: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 99px;
    padding: 4px 11px; white-space: nowrap;
    transition: color 0.4s ease, border-color 0.4s ease;
  }
  .mob-faits span b {
    font-family: var(--tete); font-weight: 600; color: rgba(255, 255, 255, 0.82);
    font-variant-numeric: tabular-nums; margin-left: 5px;
  }
  .mob-faits span.neuf { border-color: var(--blue-2); color: rgba(255, 255, 255, 0.7); }
  .mob-faits span.neuf b { color: #fff; }
}


/* =====================================================================
   ÉCRANS COURTS — iPhone SE, petits Android
   Le bouton d'entrée doit rester visible sans défiler : c'est le seul
   geste qui compte sur cet écran. On resserre ici plutôt que de punir
   les téléphones normaux.
   ===================================================================== */
@media (max-width: 900px) and (max-height: 720px) {
  #ec-identite.question { padding: 20px 0; }
  #ec-identite .q-rang { margin-bottom: 10px; }
  #ec-identite h2 { font-size: 21px; }
  #ec-identite .aide { margin-bottom: 15px; font-size: 14.5px; }
  #ec-identite .duo-champ { gap: 10px; }
  #ec-identite .rassure { margin-top: 13px; gap: 8px; }
}