/* =====================================================================
   AUDIT DE CROISSANCE — parcours et rapport.
   Structure de document de conseil : la question seule, et le rail des
   sections à droite sur fond clair. 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 claire, à droite, qui tient tout le parcours
   ===================================================================== */
.cadre { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); min-height: 100vh; }

/* Le rail est passé À DROITE et sur fond clair (Vincent, 28/10) : à gauche et
   en bleu foncé, il faisait doublon avec le menu de l'espace. L'ordre du HTML
   ne change pas (le rail reste le premier élément lu), seul l'affichage bascule. */
.scene { order: 1; }
.rail {
  order: 2;
  background: var(--paper); color: var(--ink); padding: 34px 28px 30px;
  border-left: 1px solid var(--rule);
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Intégré dans l'espace, la marque est déjà dans le menu : pas de second logo. */
.embed .rail-logo { display: none; }
.rail-logo img { height: 24px; width: auto; display: block; filter: invert(1); }
.rail-titre {
  font-family: var(--tete); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue);
}
.rail-logo + .rail-titre { margin-top: 30px; }
.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: var(--ink-mute);
  transition: color 0.35s ease;
}
.rail-sections li .p {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rule);
  justify-self: center; transition: background 0.35s ease, box-shadow 0.35s ease;
}
.rail-sections li.faite { color: var(--ink-soft); }
.rail-sections li.faite .p { background: var(--blue-soft); }
.rail-sections li.ici { color: var(--ink); font-weight: 600; }
.rail-sections li.ici .p { background: var(--blue); box-shadow: 0 0 0 4px rgba(0,70,255,0.14); }

.rail-pied { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--rule); }
.rail-avance {
  font-family: var(--tete); font-weight: 700; font-size: 32px; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.rail-avance em { font-style: normal; font-size: 0.42em; font-weight: 600; color: var(--ink-mute); }
.rail-jauge { height: 3px; background: var(--rule); margin-top: 12px; overflow: hidden; border-radius: 2px; }
.rail-jauge i { display: block; height: 100%; width: 0; background: var(--blue); transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.rail-note { margin-top: 12px; font-size: 12px; color: var(--ink-mute); 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: minmax(0, 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); }

/* Zone de texte des questions ouvertes. Elle était rendue hors de .champ, donc
   sans style : un petit rectangle de navigateur, sans rapport avec la réponse
   attendue (Vincent, 28/10). Elle prend maintenant toute la colonne, part sur
   quatre lignes et grandit avec la réponse (hauteur pilotée par app.js). */
.saisie-txt {
  display: block; width: 100%; font-family: var(--corps); font-size: 17px;
  line-height: 1.65; color: var(--ink); padding: 16px 20px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--white);
  resize: vertical; min-height: 128px; max-height: 420px; overflow-y: auto;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.saisie-txt::placeholder { color: var(--ink-mute); }
.saisie-txt:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,70,255,0.10); }
.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 18px;
  font-family: var(--tete); font-weight: 600; color: var(--ink-mute); font-size: 18px;
}
.saisie-nb input {
  font-family: var(--tete); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.03em; color: var(--ink); padding: 12px 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 18px 0 4px;
  color: var(--ink-mute); font-size: 13.5px; white-space: nowrap;
}

/* ---------- options ---------- */
.options { display: grid; gap: 9px; }

/* Liste déroulante : pour les questions à longue liste (secteur d'activité),
   où un mur de boutons obligerait à faire défiler la page (Vincent 28/10). */
.select-q {
  width: 100%; appearance: none; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 15px 44px 15px 16px; cursor: pointer; line-height: 1.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E778B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;
  transition: border-color .12s, box-shadow .12s;
}
.select-q:hover { border-color: rgba(0, 70, 255, 0.32); }
.select-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.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 — plein écran (fond clair depuis le 28/10, cf. plus bas)
   ===================================================================== */
.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; }
  .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);
}

/* La lecture intermédiaire reste dans le registre clair du parcours (Vincent,
   28/10) : un aplat bleu foncé plein écran, entre deux questions, cassait la
   lecture et faisait doublon avec le menu sombre de l'espace. Le chiffre garde
   son effet, en navy et un peu plus fin. Les autres moments forts (le calcul,
   les quatre notes) gardent leur fond sombre : ils sont l'aboutissement. */
.plein.lecture { background: var(--white); background-image: none; color: var(--ink); }
.lecture .lect-lib { color: var(--blue); }
.lecture .lect-chiffre { color: var(--navy); font-size: clamp(40px, 6vw, 64px); }
.lecture .lect-sous { color: var(--ink-mute); border-bottom-color: var(--rule); }
.lecture .lect-texte { color: var(--ink); }
.lecture .lect-texte b { color: var(--blue); }
.lecture .lect-manque { color: var(--ink-soft); border-left-color: var(--rule); }

/* =====================================================================
   TOUT LE PARCOURS EN CLAIR (Vincent, 28/10)
   Les écrans pleins (le calcul en cours, les quatre notes) passent eux aussi
   sur fond clair : plus aucun aplat bleu foncé pendant le parcours. Le rapport
   final garde ses blocs navy, qui sont un autre document.
   ===================================================================== */
.plein { background: var(--white); background-image: none; color: var(--ink); }
.plein h2 { color: var(--ink); }
.plein .chapo { color: var(--ink-mute); }

/* calcul en cours */
.plein .calcul-etapes li { color: var(--ink-mute); opacity: 0.5; transition: color 0.45s ease, opacity 0.45s ease; }
.plein .calcul-etapes li.ok { color: var(--ink); opacity: 1; }
.plein .calcul-etapes li .coche { color: var(--blue); }

/* les quatre notes */
.plein .scores { background: var(--rule); border-color: var(--rule); }
.plein .score { background: var(--white); }
.plein .score .axe { color: var(--ink); }
.plein .score .v em { color: var(--ink-mute); }
.plein .score .jauge { background: var(--rule-fine); }
.plein .score .repere { color: var(--ink-mute); }
.plein .n-faible { color: var(--faible); } .plein .n-moyen { color: var(--moyen); } .plein .n-fort { color: var(--fort); }
.plein .b-faible { background: var(--faible); } .plein .b-moyen { background: var(--moyen); } .plein .b-fort { background: var(--fort); }
.plein .radar .toile, .plein .radar .axe { stroke: var(--rule); }
.plein .radar .aire { fill: rgba(0, 70, 255, 0.12); stroke: var(--blue); }
.plein .radar .point { fill: var(--navy); }
.plein .radar .etiq { fill: var(--ink-mute); }
.plein .radar .val { fill: var(--navy); }

/* dernière étape avant le rapport */
.plein .verrou { border-top-color: var(--rule); }
.plein .verrou .lib { color: var(--blue); }
.plein .verrou .flou { color: var(--navy); }
.plein .verrou h3 { color: var(--ink); }
.plein .verrou p.intro { color: var(--ink-mute); }
.plein .verrou .champ label { color: var(--ink-mute); }
.plein .verrou .champ input { background: var(--white); border-color: var(--rule); color: var(--ink); }
.plein .verrou .champ input::placeholder { color: var(--ink-mute); }
.plein .verrou .champ .aide-champ { color: var(--ink-mute); }
.plein .verrou .btn { background: var(--blue); }
.plein .verrou .btn:hover:not(:disabled) { background: var(--blue-2); }


/* =====================================================================
   FAITS ÉTABLIS dans le rail — le rapport se construit sous les yeux
   ===================================================================== */
.rail-faits {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule);
  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); 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: var(--ink-mute);
  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: var(--ink); 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; }
}

/* =====================================================================
   Diagnostic IA (25/10/2026) : questions à plusieurs champs, notes du
   moteur avec leur repère, attente du rapport, rapport dans la page
   ===================================================================== */
.champ-q + .champ-q { margin-top: 18px; }
/* Plusieurs chiffres du même ordre : côte à côte, pour que la question tienne
   dans l'écran (Vincent, 28/10). Sous 560 px, ils reprennent la colonne. */
.champs-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 18px 16px; align-items: start; }
.champs-ligne .champ-q + .champ-q { margin-top: 0; }
.champs-ligne .saisie-nb .unite { padding-left: 14px; }
.champs-ligne .saisie-nb input { font-size: clamp(18px, 1.9vw, 21px); }
.champ-lib { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0.02em; margin: 0 0 7px; }
.champ-q .saisie-nb input { font-size: clamp(19px, 2.1vw, 22px); padding: 10px 8px; }
.champ-q .options { gap: 7px; }
.champ-q .option { padding: 13px 18px; font-size: 15px; }
.champ-q .sais-pas { margin-top: 5px; }
.sais-pas.choisi { color: var(--blue); font-weight: 600; text-decoration: none; }
.sais-pas.choisi::before { content: '\2713\00a0'; }

.score .jauge i { background: var(--blue-2); }
.score .repere { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); margin: 14px 0 0; }

.attente-rapport { padding: 72px 0 48px; max-width: 52ch; }
.attente-rapport .lib { font-family: var(--tete); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin: 0 0 16px; }
.attente-rapport h2 { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 14px; }
.attente-rapport p { color: var(--ink-soft); margin: 0 0 26px; }
.etapes-rapport { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.etapes-rapport li { display: flex; gap: 12px; align-items: center; color: var(--ink-mute); }
.etapes-rapport li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.etapes-rapport li.faite { color: var(--ink); }
.etapes-rapport li.faite::before { background: var(--fort); }
.etapes-rapport li.encours { color: var(--ink); font-weight: 600; }
.etapes-rapport li.encours::before { background: var(--blue); animation: pouls-rapport 1.2s ease-in-out infinite; }
@keyframes pouls-rapport { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .etapes-rapport li.encours::before { animation: none; } }

/* le rapport occupe toute la largeur à côté du rail : la colonne de 640 px des questions est trop étroite */
html.avec-rapport .dedans { max-width: none; padding: 0; }
.cadre-rapport { display: block; width: 100%; min-height: 80vh; border: 0; background: #fff; }

/* ── Audit intégré dans l'espace client (?embed=1) ───────────────────────────
   On masque l'en-tête propre de l'audit : logo, titre « Audit de croissance »,
   « Retour au site » et le sélecteur de langue EN (ça, c'est pour le site web).
   La navigation et la marque viennent de la sidebar de l'espace. On garde les
   questions et la progression. */
.embed .rail-logo,
.embed .rail-titre,
.embed .barre-mob .mob-logo,
.embed .barre-mob .sec,
.embed .retour-site { display: none !important; }
.embed .rail { padding-top: 22px; }