/* ============================================================================
   Simulateur de zone — styles (lot ACQ-2c)

   ⚠️ AUCUNE couleur, taille ou espacement en dur : tout passe par les tokens
   de `design.css`. C'est ce qui fait que le bloc suivra le jour où la charte
   bouge, et c'est la règle du skill graphiste du dépôt.
   ========================================================================= */

.sz-carte {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-32);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  color: var(--color-text);
}

.sz-etape[hidden] { display: none; }

/* ── Champs ─────────────────────────────────────────────────────────────── */
.sz-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: var(--sp-16) 0 var(--sp-6);
}
.sz-etape > .sz-label:first-child { margin-top: 0; }

.sz-champ {
  width: 100%;
  padding: var(--sp-12) var(--sp-14);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.sz-champ:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.sz-champ-sm { max-width: 9rem; padding: var(--sp-8) var(--sp-10); font-size: var(--text-sm); }

.sz-aide { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--sp-6) 0 0; }

/* Métier que la source de volumes ne recense pas : dit au CHOIX du métier, pas
   au résultat. Fond ambré et non gris — c'est un avertissement sur ce que la
   page ne pourra pas montrer, pas une aide à la saisie de plus. Le texte prend
   `--color-text` (et non `--color-text-muted`) : posé sur `--color-warning-soft`
   en clair (#fef3c7), le gris tombait sous le seuil AA. */
.sz-note-couverture {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background: var(--color-warning-soft);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-xs);
}
.sz-ok { color: var(--color-accent); }
.sz-alerte { color: var(--color-warning); }

.sz-carte .btn { margin-top: var(--sp-20); }

/* ── Autocomplétion ─────────────────────────────────────────────────────── */
.sz-auto { position: relative; }
.sz-suggestions {
  position: absolute; inset-inline: 0; top: 100%;
  margin: var(--sp-4) 0 0; padding: 0; list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  max-height: 13rem; overflow-y: auto;
  z-index: var(--z-dropdown);
}
.sz-suggestions li {
  display: flex; justify-content: space-between; gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-sm); cursor: pointer;
}
.sz-suggestions li:hover,
.sz-suggestions li:focus-visible,
.sz-suggestions li.sz-survol { background: var(--color-surface-2); outline: none; }
/* Le survol CLAVIER doit se voir autrement qu'un simple fond : sur un écran peu
   contrasté, un gris clair sur blanc ne se distingue pas. */
.sz-suggestions li.sz-survol { box-shadow: inset 3px 0 0 var(--color-primary); }
.sz-suggestions li span { color: var(--color-text-muted); }

/* ── Étape 2 ────────────────────────────────────────────────────────────── */
.sz-retour {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--color-text-link);
}
.sz-titre-zone {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--font-bold);
  margin: var(--sp-8) 0 var(--sp-20);
}

/* Le cas « on ne sait pas » a droit à un traitement à lui : il doit se lire
   comme une information, pas comme une erreur ni comme un chiffre absent. */
.sz-marche-absent {
  margin: 0;
  padding: var(--sp-14);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
}
.sz-source { font-size: var(--text-2xs); color: var(--color-text-subtle); margin: var(--sp-6) 0 0; }

.sz-reglages {
  margin-top: var(--sp-20); padding: var(--sp-16);
  background: var(--color-surface-2); border-radius: var(--radius-sm);
}
.sz-reglages-titre { margin: 0 0 var(--sp-12); font-size: var(--text-sm); font-weight: var(--font-semibold); }

/* « La marge, c'est vous qui la fixez » — sous le champ, jamais dans un
   accordéon : c'est la phrase qui empêche l'artisan de prendre notre point de
   départ pour un verdict sur son entreprise. Un cran au-dessus de `.sz-aide`
   (couleur de texte pleine, pas `muted`) parce qu'elle doit être lue. */
.sz-aide-marge {
  margin: var(--sp-10) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.sz-champ-ligne {
  display: flex; align-items: center; gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}
.sz-champ-ligne label { flex: 1; font-size: var(--text-sm); color: var(--color-text-muted); }
.sz-unite { font-size: var(--text-sm); color: var(--color-text-muted); min-width: 1.2rem; }

.sz-projection {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-16);
  margin-top: var(--sp-20); padding: var(--sp-20);
  background: var(--gradient-hero);
  border-radius: var(--radius-md);
  color: var(--color-text-invert);
}
.sz-proj-titre { display: block; font-size: var(--text-xs); color: var(--slate-300); }
.sz-proj-montant {
  display: block; margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--font-black);
}
.sz-proj-net .sz-proj-montant { color: var(--emerald-300); }

.sz-hypotheses { margin-top: var(--sp-16); font-size: var(--text-sm); }
.sz-hypotheses summary { cursor: pointer; color: var(--color-text-link); }
.sz-hypotheses p { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); }
.sz-sources { margin: var(--sp-8) 0 0; padding-left: var(--sp-20); font-size: var(--text-2xs); color: var(--color-text-subtle); }
.sz-sources a { color: var(--color-text-link); }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.sz-form { margin-top: var(--sp-24); padding-top: var(--sp-20); border-top: 1px solid var(--color-border); }
.sz-form h4 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }

/* Pot de miel : invisible pour l'humain, présent pour le robot. `display:none`
   est évité — certains robots l'ignorent, et un lecteur d'écran n'a pas à le
   rencontrer non plus, d'où aria-hidden + tabindex -1 côté HTML. */
.sz-pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.sz-consent {
  display: flex; gap: var(--sp-8); align-items: flex-start;
  margin-top: var(--sp-16); font-size: var(--text-xs);
  color: var(--color-text-muted); line-height: var(--leading-snug);
}
.sz-consent input { margin-top: .2em; flex-shrink: 0; }

.sz-erreur {
  margin: var(--sp-12) 0 0; padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-sm); color: var(--color-danger);
  background: var(--color-danger-soft); border-radius: var(--radius-xs);
}

/* ── Étape 3 ────────────────────────────────────────────────────────────── */
.sz-merci { text-align: center; padding: var(--sp-20) 0; }
.sz-merci h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--sp-8); }
.sz-merci p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .sz-carte { padding: var(--sp-20); }
  .sz-projection { grid-template-columns: 1fr; }
  .sz-champ-ligne { flex-wrap: wrap; }
  .sz-champ-sm { max-width: 100%; flex: 1; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sz-carte * { transition: none !important; animation: none !important; }
}

/* ── Variante BANDEAU — première section de la page (posée le 02/09) ───────
   Paul : « intègre-le en bandeau en haut du site ». Le simulateur ouvre
   désormais la page, avant le hero.

   ⚠️ Ce n'est PAS une section de milieu de page à qui on aurait juste changé
   l'ordre : elle est la première chose vue, donc elle se resserre
   verticalement (un pavé pleine hauteur repousserait le hero hors du premier
   écran) et elle se ferme par une bordure basse, sinon elle se confond avec le
   fond sombre du hero qui la suit immédiatement. */
.simulateur-zone--bandeau {
  padding: var(--sp-32) 0;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);

  /* ⚠️ Déplacé SOUS le hero le 02/09 (décision de Paul : on dit d'abord ce
     qu'on fait, on demande le métier ensuite). La couture a changé de nature —
     le bloc ne précède plus le fond sombre, il le SUIT. Pas de bordure haute :
     le passage du hero sombre à cette surface claire est déjà une rupture
     franche, et un trait par-dessus ferait un liseré parasite.
     Le défilement doux vient de l'ancre `#simulateur` de la barre. */
  scroll-margin-top: var(--sp-24);
}

/* L'en-tête se met sur une ligne : en tête de page, trois lignes de texte
   avant le premier champ font reculer le simulateur sous la ligne de flottaison. */
.simulateur-zone--bandeau .section-header { margin-bottom: var(--sp-20); }
.simulateur-zone--bandeau .section-desc { font-size: var(--text-sm); }

@media (max-width: 560px) {
  .simulateur-zone--bandeau { padding: var(--sp-24) 0; }
  /* Sur mobile, la description est le premier sacrifice : le titre suffit à
     dire ce que c'est, et l'écran doit montrer un champ, pas un paragraphe. */
  .simulateur-zone--bandeau .section-desc { display: none; }
}

/* ── Maille et couverture du relevé (posé le 02/09) ────────────────────────
   `.sz-maille` dit SUR QUOI porte le chiffre. Sans elle, un artisan qui a tapé
   sa commune croit lire les recherches de sa ville — alors que le relevé est
   départemental depuis le premier jour. Le défaut n'était pas dans le calcul,
   il était dans ce que l'écran laissait croire. */
.sz-maille {
  margin: 0 0 var(--sp-12);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sz-maille strong { color: var(--color-text); font-weight: var(--font-semibold); }

/* ⚠️ `.sz-couverture` n'est pas décorative : elle porte le fait qu'un total
   régional est un PLANCHER quand tous les départements ne sont pas relevés.
   La retirer rendrait le chiffre faux sans le dire. Ton d'avertissement —
   c'est une réserve sur la donnée, pas une erreur de l'artisan. */
.sz-couverture {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CHAÎNE — demande relevée → contacts → rendez-vous → CA potentiel

   ⛔ LES MAILLONS `renoboost` DOIVENT SE VOIR COMME DES ENGAGEMENTS, PAS COMME
   DES RELEVÉS. Le premier maillon est un fait sourcé et daté ; les deux
   suivants sont ce que RénoBoost se donne pour objectif. Les habiller pareil
   laisserait croire que le 10 % est mesuré comme le reste — ce qui
   transformerait une promesse assumée en donnée présentée comme un fait.
   D'où le fond primaire, le liseré et le badge qui l'attribue. Ce n'est pas
   du style : c'est la seule chose qui distingue les deux à l'œil.
   ═══════════════════════════════════════════════════════════════════════ */
.sz-chemin { list-style: none; margin: var(--sp-16) 0 0; padding: 0; }

.sz-maillon {
  position: relative;
  padding: var(--sp-14) var(--sp-16);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-border-strong);
}
.sz-maillon + .sz-maillon { margin-top: var(--sp-24); }

/* La flèche vit dans la marge haute créée ci-dessus : elle relie visuellement
   deux maillons sans ajouter d'élément entre eux dans la liste. */
.sz-fleche {
  position: absolute;
  top: calc(var(--sp-24) * -1); left: 50%;
  width: var(--sp-24); height: var(--sp-24);
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.sz-maillon[data-nature='renoboost'] {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
}
.sz-maillon[data-nature='vous'] {
  background: var(--color-surface);
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow);
}

.sz-maillon-titre {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.sz-maillon[data-nature='renoboost'] .sz-maillon-titre { color: var(--color-primary); font-weight: var(--font-semibold); }

.sz-maillon-val { margin: var(--sp-4) 0 0; display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap; }
.sz-maillon-nb {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: var(--font-black);
  line-height: 1;
  color: var(--color-text);
}
.sz-maillon[data-nature='vous'] .sz-maillon-nb { color: var(--color-accent); }
.sz-maillon-unite { font-size: var(--text-xs); color: var(--color-text-muted); }

.sz-maillon-detail {
  margin: var(--sp-6) 0 0;
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--color-text-subtle);
}

.sz-badge-rb {
  display: inline-block;
  margin-top: var(--sp-8);
  padding: 2px var(--sp-8);
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  letter-spacing: .04em;
}

@media (prefers-reduced-motion: no-preference) {
  .sz-maillon { transition: transform var(--transition-fast, .15s) ease; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE RYTHME — la tranche de dix rendez-vous, éclatée en semaines

   ⛔ CE BLOC EXISTE CONTRE UN CHIFFRE JUSTE MAIS MORT. « 2 184 000 € sur
   12 mois » est arithmétiquement exact et commercialement inutilisable :
   personne ne se projette dans un million. Dix rendez-vous et le nombre de
   semaines pour les remplir disent la même chose à une échelle où un artisan
   se reconnaît — et montrent en plus que l'activité arrive LISSÉE, pas d'un
   bloc. C'est la demande de Paul du 02/09, et c'est le cœur de l'argument.
   ═══════════════════════════════════════════════════════════════════════ */
.sz-rythme { margin-top: var(--sp-16); }

.sz-rythme-titre {
  margin: 0 0 var(--sp-10);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.sz-rythme-titre strong { color: var(--color-text); font-weight: var(--font-semibold); }

.sz-frise { list-style: none; margin: 0 0 var(--sp-8); padding: 0; }
.sz-frise-ligne {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-4) 0;
}
.sz-frise-sem {
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--color-text-subtle);
  min-width: 1.6em;
}

/* La barre porte le CUMUL, pas la semaine : c'est le remplissage de la tranche
   qu'on regarde monter, et c'est lui qui rend le lissage visible. */
.sz-frise-barre {
  height: var(--sp-8);
  border-radius: var(--radius-xs);
  background: var(--color-surface-2);
  position: relative;
  overflow: hidden;
}
.sz-frise-barre::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--part, 0%);
  border-radius: var(--radius-xs);
  background: var(--color-accent);
}
.sz-frise-nb {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  min-width: 2.4em;
  text-align: right;
}
.sz-frise-eur {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  min-width: 6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── D'où vient la demande : les étages de données ────────────────────────
   Deux états, et ils doivent se distinguer AUTREMENT que par la couleur :
   le badge le dit en toutes lettres (« en service » / « à venir »), et la
   pastille change de remplissage. Un daltonien lit la même chose que les
   autres, et une capture en noir et blanc reste juste. */
.sz-niveaux {
  margin: var(--sp-20) 0 0;
  padding: var(--sp-16);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.sz-niveaux-titre {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.sz-niveaux-intro {
  margin: var(--sp-4) 0 var(--sp-12);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.sz-niveaux-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.sz-niv {
  display: flex;
  gap: var(--sp-10);
  align-items: flex-start;
}
.sz-niv-etat {
  flex: 0 0 auto;
  width: .6rem;
  height: .6rem;
  margin-top: .38rem;
  border-radius: 50%;
  border: 2px solid var(--color-text-subtle);
}
.sz-niv-actif .sz-niv-etat {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
/* L'état intermédiaire : le relevé existe, mais il ne nourrit pas encore le
   chiffre affiché. La pastille est donc cerclée d'accent sans être pleine —
   la même couleur dit « c'est là », le creux dit « pas dans le calcul ». Aucun
   token nouveau : trois états se distinguent par le remplissage, pas par une
   troisième teinte à faire valider en contraste. */
.sz-niv-releve .sz-niv-etat { border-color: var(--color-accent); }
.sz-niv-releve .sz-niv-badge { color: var(--color-accent); }
.sz-niv-corps { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sz-niv-nom {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8);
}
.sz-niv-badge {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .1rem .4rem;
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.sz-niv-actif .sz-niv-badge {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.sz-niv-apporte,
.sz-niv-limite,
.sz-niv-attente {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}
.sz-niv-limite { font-style: italic; }
.sz-niv-chiffres {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.sz-niv-inactif .sz-niv-nom { color: var(--color-text-muted); }
.sz-niv-anomalie {
  margin: var(--sp-12) 0 0;
  padding: var(--sp-10) var(--sp-12);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background: var(--color-warning-soft);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-xs);
}