/* ============================================================
   PAGE D'ACCUEIL — direction « Signature »
   Dérivé de design/signature/signature.css (maquette validée).
   NE PAS éditer à la main : régénérer depuis la maquette, ou
   basculer ce fichier en source unique si la maquette est
   retirée. Les autres pages utilisent assets/css/signature.css.
   ============================================================ */

/* ============================================================
   Maquette " Signature " v2 - aideassurance.fr
   Direction : canvas clair chaud, images cinematographiques
   plein ecran, titre geant bord a bord, nav pilule flottante,
   un seul accent vif = azur #2377E8 (logo).
   References : ayocin.com (lumiere doree, matiere),
   terminal-industries.com (image plein ecran, nav pilule).
   Typographies auto-hebergees : Fraunces / Instrument Sans /
   IBM Plex Mono (vendor/fonts.css).
   ============================================================ */

:root {
  --canvas: #F1EADD;          /* ivoire chaud, fond principal */
  --canvas-2: #E9E0CE;        /* beige plus soutenu, sections */
  --papier: #FBF7EE;          /* papier des cartes */
  --ivoire: #F6EFE2;          /* texte sur image */
  --encre: #272016;           /* brun-noir chaud */
  --encre-2: #6A5F4F;         /* texte secondaire */
  --filet: rgba(39, 32, 22, .16);
  --azur: #2377E8;            /* SEUL accent vif */
  --azur-sombre: #1B62C4;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --marge: clamp(20px, 4vw, 56px);
  --ombre-douce: 0 24px 70px -30px rgba(63, 48, 26, .45);

  /* Pont de compatibilite v1 -> v2 (estimation.html) : les noms
     de la maquette sombre re-projetes sur la palette claire. */
  --perle: var(--encre);
  --argent: var(--encre-2);
  --encre-800: #EDE4D2;
  --encre-950: var(--papier);
  --azur-clair: var(--azur-sombre);
  --erreur: #B4342A;
  --t-label: 12.5px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--canvas);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--azur); color: #fff; }

/* Ancres : ne pas passer sous la nav flottante */
section[id] { scroll-margin-top: 120px; }

/* Focus clavier homogene */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--azur);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ascenseur discret accorde au canvas */
html { scrollbar-color: rgba(39, 32, 22, .35) var(--canvas); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: rgba(39, 32, 22, .3);
  border-radius: 999px;
  border: 3px solid var(--canvas);
}

/* ---------- Acces / ruban ---------- */

.acces-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--ivoire);
  padding: 10px 18px; z-index: 300;
}
.acces-contenu:focus { left: 0; }

.ruban {
  background: var(--encre);
  color: var(--ivoire);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  padding: 8px var(--marge);
  position: relative;
  z-index: 120;
}
.ruban a { color: var(--ivoire); }

/* ---------- Nav pilule flottante ---------- */
/* Redessinee le 22/08. Deux corrections de fond :
   - le fichier logo fourni contient DEUX propositions du monogramme
     cote a cote ; la barre affichait donc deux « A » de couleurs
     differentes. On sert la variante azur seule (logo-mark.png,
     decoupee dans le PNG d'origine) suivie du nom en serif ;
   - la pilule etait plus etroite que son contenu et le bouton en
     sortait : un element `fixed` ancre a left:50% sans largeur
     explicite ne dispose que de la moitie droite de l'ecran. */

.entete {
  position: fixed;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: max-content;
  max-width: calc(100vw - 28px);
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(251, 247, 238, .84);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(39, 32, 22, .09);
  border-radius: 999px;
  padding: 6px 6px 6px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 18px 44px -24px rgba(63, 48, 26, .6);
  white-space: nowrap;
}
.entete-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--encre);
}
.entete-logo img { width: 27px; height: auto; display: block; }
.entete-marque {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1;
  letter-spacing: -.005em;
}
.entete-filet {
  width: 1px;
  align-self: stretch;
  margin: 7px 10px 7px 12px;
  background: var(--filet);
}
.entete-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14.5px;
  font-weight: 500;
}
.entete-nav a {
  text-decoration: none;
  color: var(--encre);
  opacity: .74;
  padding: 9px 13px;
  border-radius: 999px;
  transition: opacity .2s ease, background-color .2s ease;
}
.entete-nav a:hover { opacity: 1; background: rgba(39, 32, 22, .055); }
.entete-actions { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.entete-connexion {
  text-decoration: none;
  color: var(--encre);
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
.entete-connexion:hover {
  background: rgba(39, 32, 22, .045);
  border-color: rgba(39, 32, 22, .3);
}
/* Le formulaire de deconnexion ne doit pas casser l alignement de
   la barre : ses enfants participent directement au flex. */
.entete-deconnexion { display: contents; }
.entete-deconnexion button { font-family: inherit; }
@media (max-width: 899.98px) {
  /* place limitee : la deconnexion reste offerte dans l espace client */
  .entete-deconnexion { display: none; }
}

/* « Espace Pro » : le bouton existe, la destination n a pas encore
   ete ouverte — on le dit plutot que de proposer un lien mort. */
.entete-bientot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: not-allowed;
  opacity: .72;
}
.entete-bientot:hover { background: transparent; border-color: var(--filet); }
.entete-bientot-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 2px 7px;
}
@media (max-width: 1099.98px) {
  /* place limitee : l espace pro attend son heure */
  .entete-bientot { display: none; }
}

.entete-cta {
  background: var(--azur);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 19px;
  border-radius: 999px;
  transition: background-color .2s ease;
}
.entete-cta:hover { background: var(--azur-sombre); }

@media (max-width: 899.98px) {
  .entete {
    top: 64px;
    width: calc(100% - 24px);
    max-width: none;
    justify-content: space-between;
    padding: 6px 6px 6px 12px;
  }

  .entete-nav, .entete-filet { display: none; }
  .entete-actions { margin-left: 0; }
  .entete-marque { font-size: 15.5px; }
  .entete-connexion { padding: 9px 13px; }
  .entete-cta { padding: 10px 15px; }
}
@media (max-width: 519.98px) {
  /* le bouton se raccourcit pour que la marque reste visible */
  .cta-suite { display: none; }
  .entete { gap: 2px; padding: 6px 6px 6px 11px; }
  .entete-logo { gap: 7px; }
  .entete-connexion { padding: 9px 11px; }
}
@media (max-width: 339.98px) {
  /* en dessous, il faut bien ceder quelque chose */
  .entete-marque { display: none; }
}

/* ---------- Briques communes ---------- */

.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 var(--marge); }
.conteneur-large { max-width: 1440px; margin: 0 auto; padding: 0 var(--marge); }
.conteneur-etroit { max-width: 780px; margin: 0 auto; padding: 0 var(--marge); }

.etiquette {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-top: 14px;
  text-wrap: balance;
}

.corps { color: var(--encre-2); max-width: 60ch; }
.section-tete { margin-bottom: clamp(36px, 5vw, 64px); }
.section-sous { margin-top: 18px; }

.mention {
  font-size: 13.5px;
  color: var(--encre-2);
  max-width: 72ch;
  margin-top: 26px;
}

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--encre-2);
  background: rgba(251, 247, 238, .7);
  vertical-align: middle;
}

.mono-chiffre { font-family: var(--mono); font-size: .95em; font-variant-numeric: tabular-nums; }
.prix-valeur { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease;
}
.btn-azur { background: var(--azur); color: #fff; }
.btn-azur:hover { background: var(--azur-sombre); }
.btn-ligne { border: 1px solid var(--filet); color: var(--encre); background: rgba(251,247,238,.6); }
.btn-ligne:hover { border-color: var(--encre); }
.btn-papier { border: 1px solid var(--filet); color: var(--encre); background: transparent; }
.btn-papier:hover { border-color: var(--encre); }
.fleche { display: inline-block; margin-left: 6px; }

/* ============================================================
   1. HEROS : image cinematographique plein ecran, titre geant
   ============================================================ */

.heros {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.heros-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.heros-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* voile chaud pour asseoir la lisibilite, du haut vers le bas */
.heros-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(58, 42, 20, .52) 0%,
      rgba(58, 42, 20, .18) 34%,
      rgba(58, 42, 20, .05) 55%,
      rgba(43, 30, 13, .55) 100%);
}

.heros-int {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-top: clamp(96px, 12vh, 132px);
  padding-bottom: clamp(44px, 6vh, 72px);
}

.heros-eyebrow {
  color: rgba(246, 239, 226, .92);
  margin-bottom: clamp(16px, 3vh, 30px);
}

.heros-titre {
  font-family: var(--serif);
  font-weight: 380;
  color: var(--ivoire);
  line-height: .98;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(22px, 4vh, 44px);
}
.h-ligne { display: block; overflow: hidden; }
.h-int { display: block; }
.h-ligne-1 .h-int {
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.15;
  margin-bottom: clamp(6px, 1.4vh, 16px);
}
/* le titre geant, bord a bord (une seule ligne sur desktop) */
.h-ligne-2 .h-int {
  font-size: clamp(58px, 15.2vw, 240px);
  letter-spacing: -0.028em;
}
@media (min-width: 900px) {
  .h-ligne-2 .h-int { white-space: nowrap; }
}

/* Mention de duree, posee sous la goutte azur qui ponctue le titre.
   Alignee a droite sur grand ecran (elle tombe dans le prolongement
   de la fin du titre) ; a gauche des que le titre se replie. */
.heros-minutes {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 clamp(18px, 2.6vh, 30px);
}
.heros-minutes span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .92);
  text-shadow: 0 1px 14px rgba(24, 18, 10, .6);
}
.heros-minutes span::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--azur);
  box-shadow: 0 0 10px rgba(35, 119, 232, .75);
}
@media (max-width: 899.98px) {
  .heros-minutes { justify-content: flex-start; margin-top: 2px; }
  .heros-minutes span { font-size: 11.5px; letter-spacing: .1em; }
}

/* ---------- Bulle du heros : l'ecart, en un coup d'oeil ----------
   Reprise du visuel demande par le client : halo azur qui s'estompe,
   repere flechee, courbe exponentielle epaisse, chiffres en grande
   grotesque. Tout est en code (degrade + SVG) : net a toutes les
   tailles, aucune image a charger. */
.heros-bulle {
  position: relative;
  width: clamp(186px, 15.5vw, 224px);
  height: clamp(186px, 15.5vw, 224px);
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  color: var(--encre);
  /* Le halo EST le disque : c est le degrade qui dessine la forme,
     d ou l extinction douce sur le pourtour (aucun bord coupe net).
     `closest-side` est indispensable : par defaut un degrade radial
     porte jusqu au COIN du carre, et toute la couronne azur tombait
     hors du cercle visible. */
  background:
    radial-gradient(circle closest-side,
      #FCFAF4 0%,
      #FBF7EE 56%,
      #EDF4FE 70%,
      #AECBF7 82%,
      #3E88EC 92%,
      rgba(35, 119, 232, .5) 97%,
      rgba(35, 119, 232, 0) 100%);
  filter: drop-shadow(0 26px 46px rgba(24, 18, 10, .45));
}
.bulle-graphe {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
}
.bulle-repere line { stroke: rgba(39, 32, 22, .1); stroke-width: 1.4; }
.bulle-axes line { stroke: rgba(39, 32, 22, .45); stroke-width: 1.8; }
.bulle-courbe {
  fill: none;
  stroke: var(--azur);
  stroke-width: 6;
  stroke-linecap: round;
}
.bulle-point { fill: var(--azur); }

.bulle-textes { position: absolute; inset: 0; }
.bulle-mesure {
  position: absolute;
  display: grid;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}
.bulle-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(7.4px, .64vw, 9px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
}
.bulle-valeur {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bulle-valeur-forte { color: var(--azur); }
/* « Indemnite obtenue » au bout de la courbe, « proposee » a son pied */
.bulle-haut { right: 22%; top: 20%; text-align: right; justify-items: end; }
.bulle-bas { left: 22%; bottom: 20%; }

.bulle-centre {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}
.bulle-pct {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(31px, 2.8vw, 42px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--azur);
  font-variant-numeric: tabular-nums;
}
.bulle-pct-note {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(9px, .78vw, 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre);
}
/* La chip ne tient pas dans le halo sans le salir : elle se pose juste
   en dessous, sur la photo — d'ou le contraste inverse, sans flou. */
.bulle-chip {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  font-size: 8px;
  padding: 3px 10px;
  white-space: nowrap;
  border-color: rgba(246, 239, 226, .45);
  color: rgba(246, 239, 226, .94);
  background: rgba(24, 18, 10, .5);
}

/* A partir de 900 px : texte et boutons a gauche, bulle a droite,
   alignee sur le BAS du bloc de gauche — donc a la hauteur de la
   rangee de boutons. Grille explicite : ni l ordre ni l alignement
   ne dependent du retour a la ligne. */
@media (min-width: 900px) {
  .heros-bas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(26px, 4vw, 64px);
    row-gap: 18px;
  }
  .heros-gauche { grid-column: 1; grid-row: 1; }
  .heros-bulle { grid-column: 2; grid-row: 1; align-self: end; }
  .heros-reassurance { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 899.98px) {
  /* Sur telephone : bulle, puis texte et boutons, puis reassurance.
     Grille a lignes EXPLICITES plutot que `order` : l ordre est
     alors garanti, quel que soit l enchainement des regles. */
  .heros-bas { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .heros-bulle { grid-row: 1; }
  .heros-gauche { grid-row: 2; }
  .heros-reassurance { grid-row: 3; }
  .heros-bulle {
    position: static;
    order: -1;
    width: 214px;
    height: 214px;
    margin: 0 auto 10px 0;
  }
  .bulle-valeur { font-size: 21px; }
  .bulle-pct { font-size: 37px; }
  .bulle-label { font-size: 8.5px; }
  .bulle-pct-note { font-size: 9.5px; }
}
.heros-gauche { max-width: none; }
  .heros-sous { font-size: 15.5px; }
  .bulle-valeur { font-size: 12.5px; }
  .bulle-valeur-forte { font-size: 14px; }
  .bulle-label { font-size: 7px; }
  .bulle-pct { font-size: 23px; }
}
.heros-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}
/* Colonne gauche du bas de heros : le texte et les deux boutons.
   La bulle occupe la colonne de droite, sous la mention de duree. */
.heros-gauche {
  display: grid;
  gap: clamp(16px, 2.2vh, 24px);
  max-width: 64ch;
}
.heros-sous {
  color: rgba(246, 239, 226, .93);
  font-size: 16.5px;
  line-height: 1.5;
}
.heros-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.heros .btn-ligne {
  background: rgba(251, 247, 238, .14);
  border-color: rgba(246, 239, 226, .5);
  color: var(--ivoire);
}
.heros .btn-ligne:hover { border-color: var(--ivoire); }
.heros-reassurance {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .85);
  margin-top: 18px;
  width: 100%;
}

.heros-defile {
  position: absolute;
  right: var(--marge);
  bottom: 26px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(246, 239, 226, .8);
}
.defile-filet { width: 46px; height: 1px; background: rgba(246, 239, 226, .55); }
.defile-texte {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (max-width: 899.98px) {
  .heros-defile { display: none; }
  .h-ligne-2 .h-int { white-space: normal; font-size: clamp(46px, 13.5vw, 92px); }
}

/* ============================================================
   2. NARRATIF : chapitres sur image macro (gouttes au soleil)
   ============================================================ */

.narratif { position: relative; }
.narratif-stage {
  position: relative;
  overflow: hidden;
}
/* lecture automatique (JS actif) : les chapitres se superposent */
html.narratif-auto .narratif-stage {
  min-height: 100svh;
  display: grid;
}
.narratif-image {
  position: absolute;
  inset: 0;
}
.narratif-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.narratif-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(31, 22, 12, .78) 0%,
    rgba(31, 22, 12, .55) 46%,
    rgba(31, 22, 12, .28) 100%);
}

.temps {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(60px, 10vh, 110px) 0;
}
html.narratif-auto .temps {
  grid-area: 1 / 1;
  min-height: 100svh;
  padding: 90px 0;
}
.temps .etiquette { color: rgba(246, 239, 226, .75); margin-bottom: 26px; }
.frags { max-width: 640px; }
.frag {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.22;
  color: var(--ivoire);
  letter-spacing: -0.01em;
}
.frag + .frag { margin-top: .5em; }
.frag .chip {
  border-color: rgba(246, 239, 226, .45);
  color: rgba(246, 239, 226, .9);
  background: transparent;
  /* calage optique en position, pas en transform : GSAP ecrase
     le transform entier pendant le recit */
  position: relative;
  top: -4px;
}

/* Barre de lecture : trois segments fins, remplis au fil du recit */
.narratif-prog {
  position: absolute;
  z-index: 3;
  left: var(--marge);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}
html:not(.narratif-auto) .narratif-prog { display: none; }
/* zone de clic confortable (22 px), trait visuel de 2 px */
.prog-seg {
  appearance: none;
  border: 0;
  background: transparent;
  width: clamp(44px, 6vw, 84px);
  height: 22px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.prog-seg::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(246, 239, 226, .28);
}
.prog-seg:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 4px; }
.prog-seg-fill {
  position: absolute;
  left: 0; right: 0; top: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--ivoire);
  transform: scaleX(0);
  transform-origin: left center;
}
.narratif-rejouer {
  appearance: none;
  margin-left: 14px;
  background: rgba(251, 247, 238, .12);
  border: 1px solid rgba(246, 239, 226, .45);
  border-radius: 999px;
  color: var(--ivoire);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease, border-color .2s ease;
}
.narratif-rejouer.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.narratif-rejouer:hover { border-color: var(--ivoire); }
.narratif-rejouer:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 4px; }

/* ============================================================
   3. REPONSE : retour au calme, canvas clair
   ============================================================ */

.reponse { padding: clamp(90px, 14vh, 170px) 0; }
.reponse-frags { margin-top: 26px; }
.rep-ligne {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(26px, 3.3vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24em;
}
.rep-ligne + .rep-ligne { margin-top: .45em; }
.reponse-appui { margin: 34px 0 34px; }

/* ============================================================
   4. RAPPORT : le document mis en scene comme un objet
   ============================================================ */

.rapport {
  background: var(--canvas-2);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: clamp(90px, 13vh, 160px) 0;
}

.rapport-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
@media (max-width: 899.98px) {
  .rapport-grille { grid-template-columns: 1fr; }
}

.rapport-items { display: grid; gap: clamp(26px, 4vh, 40px); }
.rapport-item {
  border-top: 1px solid var(--filet);
  padding-top: 20px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 18px;
}
.item-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--encre-2);
  padding-top: 5px;
}
.item-titre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.rapport-item .corps { grid-column: 2; font-size: 15.5px; }

.doc-colonne { position: relative; }
.doc-scene { position: relative; padding: clamp(30px, 4vw, 56px) clamp(14px, 2vw, 30px); }
.doc-fond {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
}
.doc-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.doc-fond::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(46, 31, 12, .14);
}
.doc-lueur {
  position: absolute;
  inset: 8% -6% 4% -6%;
  background: radial-gradient(closest-side, rgba(230, 186, 96, .5), rgba(230, 186, 96, 0) 72%);
  filter: blur(6px);
}
.doc {
  position: relative;
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: 10px;
  box-shadow: var(--ombre-douce);
  padding: clamp(24px, 3vw, 40px);
  max-width: 460px;
  margin: 0 auto;
  transform: rotate(-1deg);
}
.doc-part + .doc-part { margin-top: 20px; }
.doc-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 14px;
}
.doc-marque {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 17px;
}
.doc-type {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 380;
}
.doc-ref { font-family: var(--mono); font-size: 12px; color: var(--encre-2); margin-top: 4px; }
.doc-montant {
  background: rgba(35, 119, 232, .07);
  border: 1px solid rgba(35, 119, 232, .25);
  border-radius: 8px;
  padding: 14px 18px;
}
.doc-etiquette {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.doc-valeur {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  color: var(--azur-sombre);
  margin-top: 4px;
}
.doc-ligne {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(39, 32, 22, .1);
  margin-top: 8px;
}
.doc-vigilance ul { margin-top: 8px; }
.doc-vigilance li {
  font-size: 14.5px;
  color: var(--encre-2);
  padding-left: 16px;
  position: relative;
}
.doc-vigilance li + li { margin-top: 4px; }
.doc-vigilance li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 1px;
  background: var(--encre-2);
}
.doc-pied {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--encre-2);
  border-top: 1px solid var(--filet);
  padding-top: 14px;
}

/* ============================================================
   5. ECART : comparateur
   ============================================================ */

.ecart { padding: clamp(90px, 13vh, 160px) 0; }

.carte {
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: 14px;
  box-shadow: var(--ombre-douce);
  padding: clamp(24px, 3.4vw, 44px);
}
/* Le module : un instrument de mesure sur panneau encre sombre */
.module-ecart {
  background: var(--encre);
  color: var(--ivoire);
  border: 1px solid rgba(246, 239, 226, .08);
  border-radius: 20px;
  box-shadow: 0 46px 110px -42px rgba(39, 32, 22, .85);
  padding: clamp(28px, 3.6vw, 48px);
}
.module-tete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.module-ecart .chip-exemple {
  border-color: rgba(246, 239, 226, .4);
  color: rgba(246, 239, 226, .88);
  background: transparent;
}
.module-consigne {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .6);
}

.ecart-corps {
  display: grid;
  grid-template-columns: minmax(220px, 5fr) minmax(0, 12fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 899.98px) {
  .ecart-corps { grid-template-columns: 1fr; }
}

/* Lecture chiffree, grand corps */
.ec-etiquette {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .6);
}
.ec-valeur {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(48px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.ec-detail {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(246, 239, 226, .8);
  max-width: 26ch;
}
.ecart-statique {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 239, 226, .14);
  font-size: 14px;
  color: rgba(246, 239, 226, .65);
}

/* ---------- Selecteur de livrable ----------------------------------
   Un seul cadre, deux onglets. Le cadre CHANGE D'AMBIANCE quand on
   choisit le Pack (papier -> encre) : la montee en gamme se voit avant
   d'etre lue. Toutes les nuances passent par quatre variables locales,
   une seule bascule d'attribut suffit.
   Sans JS : la barre d'onglets reste `hidden` (le script la revele) et
   les deux panneaux s'affichent l'un sous l'autre. */
.livrables {
  --lv-fond: var(--papier);
  --lv-texte: var(--encre);
  --lv-sec: var(--encre-2);
  --lv-filet: var(--filet);
  position: relative;
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--lv-fond);
  color: var(--lv-texte);
  border: 1px solid var(--lv-filet);
  border-radius: 24px;
  padding: clamp(20px, 2.6vw, 34px);
  box-shadow: 0 40px 100px -50px rgba(39, 32, 22, .75);
  transition: background-color .55s ease, color .55s ease, border-color .55s ease,
              box-shadow .55s ease;
}
.livrables[data-actif="pack"] {
  --lv-fond: var(--encre);
  --lv-texte: var(--ivoire);
  --lv-sec: rgba(246, 239, 226, .72);
  --lv-filet: rgba(246, 239, 226, .16);
  border-color: rgba(35, 119, 232, .32);
  box-shadow:
    0 0 0 1px rgba(35, 119, 232, .12),
    0 0 60px -14px rgba(35, 119, 232, .26),
    0 50px 120px -46px rgba(39, 32, 22, .9);
}

/* Les deux cartes de choix ------------------------------------------
   Une pastille glissante s'alignait mal des que les cartes s'empilaient
   et le badge partait de travers : chaque carte porte desormais son
   propre etat (bordure azur, fond teinte, pastille cochee). */
.lv-barre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-bottom: clamp(24px, 3vw, 38px);
}
.lv-barre[hidden] { display: none; }
.lv-onglet {
  position: relative;
  display: grid;
  gap: 9px;
  align-content: start;
  text-align: left;
  padding: clamp(16px, 1.7vw, 22px) clamp(18px, 1.9vw, 26px);
  padding-right: clamp(40px, 4vw, 52px);
  border: 1px solid var(--lv-filet);
  border-radius: 16px;
  background: transparent;
  color: var(--lv-sec);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease,
              box-shadow .3s ease;
}
.lv-onglet:hover { border-color: rgba(35, 119, 232, .45); }
.lv-onglet:focus-visible { outline: 2px solid var(--azur); outline-offset: 3px; }
.lv-onglet.est-actif {
  border-color: rgba(35, 119, 232, .6);
  background: rgba(35, 119, 232, .07);
  color: var(--lv-texte);
  box-shadow: 0 0 0 1px rgba(35, 119, 232, .3);
}
.livrables[data-actif="pack"] .lv-onglet.est-actif {
  background: rgba(35, 119, 232, .14);
}
.lv-tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.lv-nom {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.1;
  color: var(--lv-texte);
}
/* Le prix se lit d'aussi loin que le nom de l'offre (demande du client,
   06/09) : il etait en 14 px a cote d'un nom de 23 px. Aligne sur la
   ligne de base du nom, il fait desormais jeu egal avec lui. */
.lv-prix {
  font-family: var(--mono);
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--lv-texte);
}
.lv-desc {
  font-size: 14px;
  line-height: 1.45;
  max-width: 36ch;
}
.lv-badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--azur);
  color: #fff;
  white-space: nowrap;
}
/* la pastille : vide quand la carte n'est pas choisie, pleine sinon */
.lv-coche {
  position: absolute;
  top: clamp(16px, 1.7vw, 22px);
  right: clamp(16px, 1.7vw, 22px);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid var(--lv-filet);
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.lv-onglet.est-actif .lv-coche {
  border-color: var(--azur);
  background: var(--azur);
  box-shadow: inset 0 0 0 3.5px var(--lv-fond);
}
@media (max-width: 719.98px) {
  .lv-barre { grid-template-columns: 1fr; }
  .lv-desc { max-width: none; }
}
/* Les panneaux */
.lv-scene { position: relative; }
.lv-panneau[hidden] { display: none; }
.lv-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--lv-filet);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lv-texte);
  transition: border-color .55s ease;
}
.lv-cap-prix {
  margin-left: auto;
  color: var(--lv-texte);
  font-size: 16px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* quand les onglets sont actifs, le bandeau ferait doublon */
.livrables:not([data-onglets]) .lv-panneau + .lv-panneau { margin-top: clamp(40px, 6vh, 72px); }
.livrables[data-onglets] .lv-cap { display: none; }

.lv-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 899.98px) {
  .lv-corps { grid-template-columns: 1fr; }
}
.lv-texte { min-width: 0; }
.lv-visuel { min-width: 0; }
/* ---------- Voyant : le gain en pourcentage, au curseur ----------
   Lecture immediate de l'ecart, exprimee en part de l'offre :
   (valeur au curseur - offre) / offre. Reste un EXEMPLE : la chip
   « Exemple illustratif » du module en repond. */
.voyant {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 20px 12px 18px;
  border: 1px solid rgba(35, 119, 232, .55);
  border-radius: 999px;
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(35, 119, 232, .28), transparent 62%),
    rgba(35, 119, 232, .10);
  box-shadow: 0 0 0 6px rgba(35, 119, 232, .07);
  transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.voyant-mesure {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--serif);
  font-weight: 380;
  line-height: .9;
  letter-spacing: -.02em;
  color: #8FBFFF;
  font-variant-numeric: tabular-nums;
  transition: color .35s ease;
}
.voyant-signe { font-size: clamp(26px, 2.4vw, 34px); margin-right: 2px; }
.voyant-nombre { font-size: clamp(42px, 4.4vw, 60px); }
.voyant-unite { font-size: clamp(22px, 2vw, 28px); margin-left: 4px; }
.voyant-libelle {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.45;
  white-space: nowrap;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .72);
  text-align: left;
}
/* Sous l'offre : ambre discret, jamais de rouge (regle de la charte) */
.voyant[data-etat="perte"] {
  border-color: rgba(196, 149, 74, .5);
  background: rgba(196, 149, 74, .1);
  box-shadow: 0 0 0 6px rgba(196, 149, 74, .06);
}
.voyant[data-etat="perte"] .voyant-mesure { color: #E0BC84; }
.voyant[data-etat="neutre"] {
  border-color: rgba(246, 239, 226, .3);
  background: rgba(246, 239, 226, .06);
  box-shadow: none;
}
.voyant[data-etat="neutre"] .voyant-mesure { color: rgba(246, 239, 226, .9); }
@media (max-width: 899.98px) {
  .voyant { margin-bottom: 18px; padding: 10px 16px; gap: 12px; }
}

/* ---------- Statistique France : la courbe ----------
   BLOC RETIRE DE LA PAGE le 22/08/2026 a la demande du client.
   Les styles restent ici : le fragment HTML est conserve dans le
   commit da9e771 (figure.stat-france de public/signature/index.html),
   le remettre suffit a le rallumer. */
.stat-france {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--filet);
  padding-top: clamp(28px, 3.5vw, 44px);
}
.stat-titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-top: 10px;
  max-width: 20ch;
  text-wrap: balance;
}
.stat-sous {
  margin-top: 10px;
  font-size: 15px;
  color: var(--encre-2);
  max-width: 52ch;
}
.stat-cadre {
  margin-top: clamp(20px, 2.4vw, 30px);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 26px) clamp(12px, 2vw, 24px) clamp(12px, 1.6vw, 18px);
  box-shadow: 0 26px 60px -46px rgba(63, 48, 26, .8);
}
.stat-courbe { display: block; width: 100%; height: auto; overflow: visible; }
.stat-grille line { stroke: rgba(39, 32, 22, .13); stroke-width: 1; }
.stat-axe-y text,
.stat-axe-x text {
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--encre-2);
}
.stat-axe-y text { text-anchor: end; }
.stat-axe-x text { text-anchor: middle; letter-spacing: .06em; }
.stat-trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stat-trait-nombre { stroke: var(--azur); stroke-width: 3; }
.stat-trait-charge {
  stroke: rgba(39, 32, 22, .42);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}
.stat-points circle { fill: var(--papier); stroke: var(--azur); stroke-width: 3; }
.stat-valeurs text {
  font-family: var(--serif);
  font-size: 19px;
  fill: var(--encre);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.stat-valeurs-charge text { font-size: 14px; fill: var(--encre-2); }
.stat-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 12px;
  padding-left: 6px;
  list-style: none;
  font-size: 13px;
  color: var(--encre-2);
}
.stat-legende li { display: flex; align-items: center; gap: 8px; }
.stat-puce { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.stat-puce-nombre { background: var(--azur); }
.stat-puce-charge { background: repeating-linear-gradient(90deg, rgba(39,32,22,.45) 0 5px, transparent 5px 10px); }
.stat-source {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--encre-2);
  max-width: 78ch;
}
@media (max-width: 599.98px) {
  /* sur telephone, la seconde serie surcharge : on garde la principale */
  .stat-valeurs-charge, .stat-trait-charge { display: none; }
  .stat-legende li:last-child { display: none; }
  .stat-valeurs text { font-size: 22px; }
  .stat-axe-y text, .stat-axe-x text { font-size: 14px; }
}
/* L'echelle graduee */
/* Base NEUTRE (contexte clair) : ces briques sont reutilisees par le
   bloc resultat d'estimation.html, pose sur une carte papier. La
   declinaison ivoire est reservee au panneau sombre .module-ecart. */
.pistes {
  position: relative;
  --curseur-pct: 76.7%;
  background-image: repeating-linear-gradient(90deg,
    rgba(39, 32, 22, .1) 0, rgba(39, 32, 22, .1) 1px,
    transparent 1px, transparent calc(100% / 6));
  padding-top: 6px;
}
.piste-rang + .piste-rang { margin-top: 26px; }
.piste-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 10px;
}
.piste {
  position: relative;
  height: 30px;
  background: rgba(39, 32, 22, .07);
  border-radius: 4px;
  overflow: hidden;
}
.piste-plein {
  position: absolute; inset: 0 auto 0 0;
  width: calc(2300 / 4300 * 100%);
  background: linear-gradient(90deg, rgba(39, 32, 22, .3), rgba(39, 32, 22, .45));
  border-right: 2px solid var(--encre);
  border-radius: 4px 0 0 4px;
  transform-origin: left center;
}
/* declinaison ivoire, uniquement dans l'instrument sombre */
.module-ecart .pistes {
  background-image: repeating-linear-gradient(90deg,
    rgba(246, 239, 226, .1) 0, rgba(246, 239, 226, .1) 1px,
    transparent 1px, transparent calc(100% / 6));
}
.module-ecart .piste-label { color: rgba(246, 239, 226, .65); }
.module-ecart .piste { background: rgba(246, 239, 226, .07); }
.module-ecart .piste-plein {
  background: linear-gradient(90deg, rgba(246, 239, 226, .34), rgba(246, 239, 226, .5));
  border-right-color: var(--ivoire);
}
.piste-zone {
  position: absolute; inset: 0 auto 0 calc(3040 / 4300 * 100%);
  width: calc(520 / 4300 * 100%);
  background: linear-gradient(90deg, var(--azur), #4D93F2);
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(35, 119, 232, .55);
  transform-origin: left center;
}
.curseur-couche {
  position: absolute;
  inset: -10px 0 0 0;
  pointer-events: none;
}
.curseur-ligne {
  position: absolute;
  top: 0; bottom: -8px;
  left: var(--curseur-pct);
  width: 2px;
  background: var(--ivoire);
  box-shadow: 0 0 12px rgba(246, 239, 226, .5);
}
.curseur-bulle {
  position: absolute;
  top: -24px;
  left: var(--curseur-pct);
  transform: translateX(-50%);
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.echelle {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--encre-2);
  margin-top: 12px;
}
.module-ecart .echelle { color: rgba(246, 239, 226, .5); }

/* Curseur redessine */
.module-ecart input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin-top: 22px;
  background: transparent;
  cursor: pointer;
}
.module-ecart input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(246, 239, 226, .25);
  border-radius: 999px;
}
.module-ecart input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--azur);
  border: 3px solid var(--ivoire);
  margin-top: -9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.module-ecart input[type="range"]::-moz-range-track {
  height: 2px;
  background: rgba(246, 239, 226, .25);
  border-radius: 999px;
}
.module-ecart input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--azur);
  border: 3px solid var(--ivoire);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.module-ecart input[type="range"]:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 4px; }

/* Reglage de l'offre : la meme reglette, mais en ivoire — c'est la
   piste d'offre qu'elle commande, pas la fourchette azur. Elle vit
   AU-DESSUS des pistes : son repere est le montant, pas l'axe. */
.reglette-rang {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(246, 239, 226, .12);
}
.reglette-etiquette {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .65);
}
/* `input[type="range"]` pese un attribut : sans le repeter ici, la
   regle azur ci-dessus resterait la plus specifique. */
.module-ecart input[type="range"].reglette { margin-top: 0; }
.module-ecart input[type="range"].reglette::-webkit-slider-thumb { background: var(--ivoire); border-color: rgba(39, 32, 22, .55); }
.module-ecart input[type="range"].reglette::-moz-range-thumb { background: var(--ivoire); border-color: rgba(39, 32, 22, .55); }
.reglette-valeur {
  font-size: 15px;
  color: var(--ivoire);
  min-width: 8ch;
  text-align: right;
}
@media (max-width: 599.98px) {
  .reglette-rang { grid-template-columns: 1fr auto; }
  .reglette-rang .reglette { grid-column: 1 / -1; order: 3; }
}

.legende { font-size: 12.5px; color: var(--encre-2); margin-top: 16px; }
.module-ecart .legende { color: rgba(246, 239, 226, .5); }

/* ============================================================
   6. FONCTIONNEMENT
   ============================================================ */

.fonctionnement {
  background:
    linear-gradient(0deg, rgba(241, 234, 221, .88), rgba(241, 234, 221, .88)),
    var(--canvas-2);
  border-top: 1px solid var(--filet);
  padding: clamp(90px, 13vh, 160px) 0;
}
.fx-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 90px);
}
@media (max-width: 899.98px) {
  .fx-grille { grid-template-columns: 1fr; }
}
.fx-droite { position: relative; padding-left: 34px; }
.fx-ligne {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--encre);
  transform-origin: top center;
}
.fx-liste { display: grid; gap: clamp(34px, 6vh, 56px); }
.fx-etape .etiquette { color: var(--encre); margin-bottom: 8px; }
/* lien dans le texte d une etape (conseils photo) : azur souligne,
   sinon il se confondrait avec le paragraphe */
.fx-etape .corps a {
  color: var(--azur);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fx-etape .corps a:hover { color: var(--azur-sombre); }

/* ---------- Bandeau de livrable (Analyse Flash / Pack) ---------- */
.livrable-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(26px, 3.4vw, 40px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre);
}
.livrable-prix { margin-left: auto; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.livrable-cap-sombre {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  color: rgba(246, 239, 226, .92);
}
.livrable-cap-sombre .livrable-prix { color: rgba(246, 239, 226, .62); }

/* ---------- Pack Reclamation : le dossier complet ----------
   Panneau encre au coeur d'une section claire : la montee en gamme se
   lit avant meme d'etre lue. Les trois pieces sont un APERCU STYLISE
   (chip « Exemple illustratif », montants coherents entre eux : le
   devis tombe dans la fourchette du rapport). */
/* (Le cadre du Pack est desormais porte par .livrables : les deux
   livrables partagent un seul cadre a deux onglets.) */

.pack-badge {
  background: var(--azur);
  border-color: var(--azur);
  color: #fff;
}
.pack-int {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
  padding-top: clamp(24px, 3vw, 40px);
}
.pack-titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 19ch;
  text-wrap: balance;
}
.pack-sous {
  margin-top: 14px;
  color: rgba(246, 239, 226, .82);
  max-width: 46ch;
}
.pack-liste {
  margin-top: clamp(22px, 3vh, 32px);
  display: grid;
  gap: 16px;
  list-style: none;
}
.pack-liste li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid rgba(246, 239, 226, .12);
}
.pack-plus {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.35;
  color: var(--azur);
}
.pack-liste h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
}
.pack-liste p {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(246, 239, 226, .7);
  max-width: 44ch;
}
.pack-actions {
  margin-top: clamp(24px, 3vh, 34px);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pack-note {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(246, 239, 226, .6);
  max-width: 26ch;
}
.pack-apercu { margin-top: 16px; font-size: 13.5px; }
.pack-apercu a { color: rgba(246, 239, 226, .72); text-underline-offset: 3px; }
.pack-apercu a:hover { color: var(--ivoire); }

/* La scene : trois pieces en eventail */
.pack-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
}
.pack-chip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  border-color: rgba(246, 239, 226, .4);
  color: rgba(246, 239, 226, .88);
  background: transparent;
}
.pack-pile {
  position: relative;
  width: min(100%, 500px);
  height: 392px;
}
.pack-piece {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 202px;
  height: 312px;
  overflow: hidden;
  background: var(--papier);
  color: var(--encre);
  border: 1px solid rgba(39, 32, 22, .1);
  border-radius: 8px;
  padding: 18px 18px 16px;
  box-shadow: 0 30px 58px -28px rgba(0, 0, 0, .75);
}
.piece-rapport  { transform: translate(-112px, -12px) rotate(-8deg); z-index: 1; }
.piece-courrier { transform: translate(0, 12px) rotate(-1deg);      z-index: 2; }
.piece-devis    { transform: translate(112px, -6px) rotate(7deg);   z-index: 3; }

.piece-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--filet);
}
.piece-titre {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  margin-top: 12px;
}
.piece-montant {
  margin-top: 12px;
  display: grid;
  gap: 3px;
  background: rgba(35, 119, 232, .08);
  border: 1px solid rgba(35, 119, 232, .2);
  border-radius: 6px;
  padding: 9px 10px;
}
.piece-etiquette {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.piece-valeur {
  font-family: var(--serif);
  font-size: 15.5px;
  color: var(--azur);
  font-variant-numeric: tabular-nums;
}
.piece-sstitre { margin-top: 12px; }
.piece-ligne {
  display: block;
  height: 5px;
  margin-top: 7px;
  border-radius: 3px;
  background: rgba(39, 32, 22, .13);
}
.piece-objet {
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--encre);
}
.piece-formule {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 13px;
}
.piece-signature {
  display: block;
  width: 82px;
  height: 22px;
  margin-top: 18px;
  margin-left: auto;
  border-bottom: 1px solid rgba(39, 32, 22, .28);
  background:
    radial-gradient(60% 90% at 20% 70%, rgba(39, 32, 22, .22), transparent 70%),
    radial-gradient(50% 80% at 62% 40%, rgba(39, 32, 22, .18), transparent 70%);
}
.piece-postes { margin-top: 14px; list-style: none; display: grid; gap: 10px; }
.piece-postes li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.35;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--filet);
  font-variant-numeric: tabular-nums;
}
.piece-total {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.piece-total span:first-child {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}

@media (max-width: 899.98px) {
  .pack-int { grid-template-columns: 1fr; }
  .pack-scene { min-height: 380px; order: -1; }
}
@media (max-width: 599.98px) {
  /* la pile doit tenir DANS le panneau (qui rogne) : 148 + 2x76
     = 300 px, pour 314 px utiles sur un ecran de 390 px */
  .pack-scene { min-height: 320px; }
  .pack-pile { height: 292px; }
  .pack-piece { width: 148px; height: 262px; padding: 10px; }
  .piece-rapport  { transform: translate(-76px, -10px) rotate(-8deg); }
  .piece-courrier { transform: translate(0, 6px) rotate(-1deg); }
  .piece-devis    { transform: translate(76px, -6px) rotate(7deg); }
  .piece-tag { font-size: 8px; padding-bottom: 7px; }
  .piece-titre { font-size: 15px; margin-top: 9px; }
  .piece-montant { margin-top: 9px; padding: 7px 8px; }
  .piece-valeur { font-size: 12.5px; }
  .piece-etiquette { font-size: 7.5px; }
  .piece-ligne { height: 4px; margin-top: 5px; }
  .piece-objet { font-size: 9.5px; margin-top: 9px; }
  .piece-formule { font-size: 11px; margin-top: 9px; }
  .piece-signature { width: 60px; height: 16px; margin-top: 12px; }
  .piece-postes { margin-top: 10px; gap: 7px; }
  .piece-postes li { font-size: 9.5px; padding-bottom: 6px; }
  .piece-total { margin-top: 10px; font-size: 14px; }
  .piece-total span:first-child { font-size: 8px; }
}
/* ============================================================
   7. OFFRES
   ============================================================ */

.offres {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 13vh, 160px) 0;
}
.offres-scene { margin: 10px 0 46px; }
.scene-ligne {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.offres-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
@media (max-width: 899.98px) {
  .offres-grille { grid-template-columns: 1fr; }
}
.offre-carte {
  position: relative;
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: 20px;
  box-shadow: 0 30px 80px -38px rgba(63, 48, 26, .55);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  transform-origin: center;
  transition:
    transform .38s cubic-bezier(.2, .7, .2, 1),
    border-color .25s ease,
    box-shadow .38s ease;
}
/* grossissement au survol (demande client 18/08) */
.offre-carte:hover {
  transform: scale(1.035);
  z-index: 2;
  border-color: rgba(39, 32, 22, .2);
  box-shadow: 0 46px 110px -40px rgba(63, 48, 26, .75);
}
@media (prefers-reduced-motion: reduce) {
  .offre-carte, .offre-carte:hover { transform: none; transition: none; }
}
.offre-badge { margin-bottom: 22px; align-self: flex-start; }
.offre-nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.offre-prix {
  font-family: var(--serif);
  font-size: clamp(58px, 5vw, 76px);
  font-weight: 380;
  line-height: 1;
  margin-top: 16px;
  letter-spacing: -0.02em;
}
.offre-sousprix {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-top: 10px;
}
.offre-liste { margin: 26px 0 28px; flex: 1; }
.offre-liste li {
  font-size: 15.5px;
  color: var(--encre-2);
  padding: 11px 0;
  border-top: 1px solid rgba(39, 32, 22, .1);
}
.offre-liste li:last-child { border-bottom: 1px solid rgba(39, 32, 22, .1); }
.offre-carte .btn { text-align: center; white-space: nowrap; padding-inline: 18px; }

/* La carte vedette : encre sombre chaude, seule masse foncee du chapitre,
   cerclee d'azur et sensiblement plus imposante */
.offre-vedette {
  background: var(--encre);
  border-color: rgba(35, 119, 232, .45);
  color: var(--ivoire);
  padding-block: 56px 48px;
  box-shadow:
    0 0 0 1px rgba(35, 119, 232, .18),
    0 0 44px -8px rgba(35, 119, 232, .28),
    0 46px 110px -42px rgba(39, 32, 22, .85);
}
.offre-vedette:hover {
  transform: scale(1.055);
  border-color: rgba(35, 119, 232, .75);
  box-shadow:
    0 0 0 1px rgba(35, 119, 232, .3),
    0 0 60px -6px rgba(35, 119, 232, .42),
    0 54px 125px -42px rgba(39, 32, 22, .95);
}
.offre-vedette .offre-prix { font-size: clamp(72px, 6vw, 96px); }
.offre-vedette .offre-nom { font-size: 27px; }
.offre-vedette .btn-azur { padding-block: 18px; font-size: 17px; }
.offre-vedette .offre-badge {
  background: var(--azur);
  border-color: var(--azur);
  color: #fff;
}
.offre-vedette .offre-sousprix { color: rgba(246, 239, 226, .65); }
.offre-vedette .offre-liste li {
  color: rgba(246, 239, 226, .85);
  border-top-color: rgba(246, 239, 226, .14);
}
.offre-vedette .offre-liste li:last-child { border-bottom-color: rgba(246, 239, 226, .14); }
@media (max-width: 899.98px) {
  .offre-vedette { padding-block: 40px 36px; }
}
.mention-papier { margin-top: 18px; }

/* ============================================================
   8. ENGAGEMENTS
   ============================================================ */

.engagements {
  background: var(--canvas-2);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: clamp(90px, 13vh, 160px) 0;
}
.engagements-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 54px);
}
@media (max-width: 719.98px) {
  .engagements-grille { grid-template-columns: 1fr; }
}
.engagement { border-top: 1px solid var(--filet); padding-top: 20px; }
.engagement-titre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  max-width: 24em;
}

/* ============================================================
   9. FAQ
   ============================================================ */

.faq { padding: clamp(90px, 13vh, 160px) 0; }
.faq-pile { display: grid; gap: 18px; }
.faq-carte {
  --voile: 0;
  position: sticky;
  top: calc(120px + var(--i) * 14px);
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: 14px;
  box-shadow: var(--ombre-douce);
  padding: 26px 28px;
}
/* Les cartes empilees restent OPAQUES : c'est ce voile qui les
   estompe quand la suivante passe devant. Baisser leur opacite
   les rendait translucides et melangeait les textes. */
.faq-carte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--canvas);
  opacity: var(--voile);
  pointer-events: none;
}
.faq-question {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* ============================================================
   10. FINAL : image chaude plein ecran, mots geants
   ============================================================ */

.final {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(90px, 12vh, 150px) 0;
}
.final-image { position: absolute; inset: 0; }
.final-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.final-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(46, 31, 12, .5) 0%,
    rgba(46, 31, 12, .34) 50%,
    rgba(46, 31, 12, .6) 100%);
}
.final .conteneur-large { position: relative; z-index: 1; }
.final-ligne {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ivoire);
  text-wrap: balance;
}
.final-ligne + .final-ligne { margin-top: .18em; }
.final-ligne-sous {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.3;
  color: rgba(246, 239, 226, .9);
  margin-top: .8em;
  max-width: 30em;
}
.final-action { margin-top: 40px; }
.final .heros-reassurance { margin-top: 20px; }

/* ============================================================
   PIED
   ============================================================ */

.pied {
  background: var(--encre);
  color: rgba(246, 239, 226, .85);
  padding: clamp(60px, 8vh, 90px) 0 36px;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 719.98px) {
  .pied-grille { grid-template-columns: 1fr; }
}
.pied-marque img {
  width: 150px; height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
}
.pied-baseline { margin-top: 16px; max-width: 34ch; }
.pied-liens .etiquette { color: rgba(246, 239, 226, .6); margin-bottom: 14px; }
.pied-liens li + li { margin-top: 8px; }
.pied-liens a { color: rgba(246, 239, 226, .85); text-decoration: none; }
.pied-liens a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied-bas {
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid rgba(246, 239, 226, .18);
  font-size: 13px;
  color: rgba(246, 239, 226, .6);
  display: grid;
  gap: 6px;
}

/* ============================================================
   LOT 17/08 SOIR : prechargeur, heros enrichi, recit par
   chapitre, rapport 3D, comparateur affine, curseur viseur,
   matieres, scrollspy. (Voir docs/SIGNATURE_HISTORIQUE.md)
   ============================================================ */

/* ---------- Prechargeur « la goutte » ---------- */
.prechargeur { display: none; }
/* verrou de defilement : sans lui, un swipe pendant l'intro fait
   defiler la page invisible et on atterrit au milieu du site */
html.precharge, html.precharge body { overflow: hidden; }
html.precharge .prechargeur {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--encre);
  align-items: center;
  justify-content: center;
  /* les anneaux font 100vmax (844 px sur un iPhone) : sans rognage
     ils elargissent la zone scrollable pendant toute l intro */
  overflow: hidden;
}
/* Revelation par l'onde : un trou circulaire s'ouvre dans le calque
   a l'impact de la goutte, EN BAS de l'ecran.
   IMPORTANT : le masque n'est applique QUE pendant l'iris (classe
   posee par le JS). Laisse en permanence avec --trou: 0, le degrade
   avait ses deux arrets a -1px et 0px — un cas degenere que Chrome
   bureau rend opaque mais que les moteurs mobiles rendent
   TRANSPARENT : le calque disparaissait, on voyait l'index, puis il
   resurgissait des que le rayon devenait positif (bug du 21/08).
   Le rayon de depart est non nul pour la meme raison. */
html.precharge .prechargeur.pre-iris {
  --trou: 0.5vmax;
  -webkit-mask-image: radial-gradient(circle at 50% 100%,
    transparent calc(var(--trou) - 1px), #000 var(--trou));
  mask-image: radial-gradient(circle at 50% 100%,
    transparent calc(var(--trou) - 1px), #000 var(--trou));
}
/* la goutte finale, enorme (x2 le 18/08), qui traverse l'ecran */
.pre-goutte-finale {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(128px, 16vw, 240px);
  height: clamp(176px, 22vw, 330px);
  margin-left: calc(clamp(128px, 16vw, 240px) / -2);
  background: var(--azur);
  border-radius: 50% 50% 58% 58% / 38% 38% 72% 72%;
  box-shadow: 0 0 110px rgba(35, 119, 232, .55);
  opacity: 0;
  pointer-events: none;
}
/* anneaux d'eclaboussure au point d'impact (bas d'ecran) */
.pre-cercle {
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vmax; height: 100vmax;
  margin: 0 0 -50vmax -50vmax;
  border: 2px solid rgba(246, 239, 226, .8);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
/* gouttelettes projetees par l'impact */
.pre-eclat {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 22px; height: 28px;
  margin-left: -11px;
  background: var(--azur);
  border-radius: 50% 50% 58% 58% / 38% 38% 72% 72%;
  pointer-events: none;
}
.pre-scene {
  position: relative;
  text-align: center;
  color: var(--ivoire);
  padding: 0 24px;
  width: 100%;
}
.pre-marque {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(56px, 10.5vw, 170px);
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.pre-etiquette {
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .6);
  margin-top: clamp(16px, 2.6vh, 30px);
}
.pre-ligne {
  position: relative;
  width: min(860px, 82vw);
  margin: clamp(48px, 8vh, 84px) auto 0;
  height: 90px;
}
.pre-goutte {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px; height: 22px;
  margin-left: -8px;
  background: var(--azur);
  border-radius: 50% 50% 60% 60% / 40% 40% 70% 70%;
  opacity: 0;
}
.pre-filet {
  position: absolute;
  left: 0; right: 0;
  top: 62px;
  height: 2px;
  background: rgba(246, 239, 226, .22);
  display: block;
  overflow: visible;
}
.pre-filet-plein {
  position: absolute;
  inset: 0;
  background: var(--azur);
  transform: scaleX(0);
  transform-origin: center;
  display: block;
  box-shadow: 0 0 18px rgba(35, 119, 232, .55);
}
.pre-onde {
  position: absolute;
  left: 50%; top: 62px;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border: 1.5px solid rgba(246, 239, 226, .5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}
.pre-compteur {
  font-family: var(--mono);
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .12em;
  color: rgba(246, 239, 226, .75);
  margin-top: clamp(24px, 4vh, 40px);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 719.98px) {
  .pre-marque { white-space: normal; font-size: clamp(32px, 11vw, 56px); }
}
/* remplacé : voir le bloc « intro sans mouvement » en fin de fichier */

/* ---------- Heros enrichi ---------- */
.h-italique { font-style: normal; display: inline-block; transform: skewX(-7deg); }
.lettre { display: inline-block; white-space: pre; }
/* un mot ne se coupe jamais entre deux lettres */
.mot-lettres { display: inline-block; white-space: nowrap; }

.titre-goutte {
  display: inline-block;
  width: 12px; height: 16px;
  margin-left: 10px;
  background: var(--azur);
  border-radius: 50% 50% 60% 60% / 40% 40% 70% 70%;
  vertical-align: baseline;
}

.heros-poussiere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Recit : une image par chapitre, sortie fondue ---------- */
.chap-img { position: absolute; inset: 0; }
.chap-img-cache { opacity: 0; }
.narratif-sortie {
  position: absolute;
  inset: 0;
  z-index: 2; /* au-dessus des chapitres (z1), sous la barre de lecture */
  background: var(--canvas);
  opacity: 0;
  pointer-events: none;
}

/* chapitre 03 : les questions en notes decalees (desktop) */
@media (min-width: 900px) {
  .temps[data-notes] .frag:nth-child(2) { transform: rotate(-0.5deg) translateX(14px); }
  .temps[data-notes] .frag:nth-child(3) { transform: rotate(0.6deg) translateX(34px); }
  .temps[data-notes] .frag:nth-child(4) { transform: rotate(-0.3deg) translateX(6px); }
}

/* le montant qui se tamponne */
/* Le montant du chapitre 02 : c est le choc du recit, il doit se
   detacher du reste de la phrase. Il forme un seul « mot » (les
   espaces y sont insecables), on peut donc l agrandir sans
   disloquer la ligne. */
.mot-cachet { transform-origin: center; }
.montant-choc {
  display: inline-block;
  font-weight: 500;
  font-size: 1.5em;
  line-height: .95;
  letter-spacing: -.015em;
  color: #FFFDF7;
  text-shadow: 0 2px 30px rgba(24, 18, 10, .7), 0 1px 3px rgba(24, 18, 10, .55);
  padding: 0 .04em;
}
@media (max-width: 599.98px) { .montant-choc { font-size: 1.32em; } }

/* ---------- Rapport : 3D, tranche, page, tampon ---------- */
.doc-scene { perspective: 1400px; }
/* tranche : epaisseur de pages simulee par ombres pleines decalees
   (aucun pseudo-element : le rotate() de .doc creerait un contexte
   d'empilement qui les ferait passer DEVANT le fond papier) */
.doc {
  transform-style: preserve-3d;
  box-shadow:
    3px 4px 0 -1px #EFE8D9,
    4px 5px 0 -1px rgba(39, 32, 22, .09),
    7px 9px 0 -2px #E9E0CD,
    8px 10px 0 -2px rgba(39, 32, 22, .08),
    var(--ombre-douce);
}

.doc-couverture {
  transform-origin: left center;
  backface-visibility: hidden;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.doc-page {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--papier);
  border-radius: 10px;
  transform-origin: left center;
  backface-visibility: hidden;
  background-image: repeating-linear-gradient(0deg,
    transparent 0 34px, rgba(39, 32, 22, .07) 34px 35px);
  background-size: 72% 60%;
  background-position: 14% 30%;
  background-repeat: no-repeat;
}
html.narratif-auto .doc-page { display: block; }
/* le clip v1 forcait transform-style a flat : la 3D en a besoin */
.doc { overflow: visible; }

.doc-tampon {
  position: absolute;
  right: 18px;
  bottom: 64px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(180, 52, 42, .55);
  border: 2px solid rgba(180, 52, 42, .45);
  border-radius: 4px;
  padding: 6px 12px;
  transform: rotate(-8deg);
  opacity: 0;
}
html:not(.narratif-auto) .doc-tampon { opacity: 1; }

/* ---------- Comparateur affine ---------- */
/* graduations fines (100) qui montent pendant la manipulation */
.pistes::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(246, 239, 226, .06) 0, rgba(246, 239, 226, .06) 1px,
    transparent 1px, transparent calc(100% / 45));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.module-ecart.manipule .pistes::after { opacity: 1; }

/* la poignee grossit pendant le drag */
.module-ecart input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}
.module-ecart input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}

/* en butee sur une borne de la fourchette : ambre discret */
.module-ecart.en-butee .piste-plein {
  background: linear-gradient(90deg, rgba(196, 148, 66, .4), rgba(196, 148, 66, .55));
  border-right-color: #C49442;
}

/* les etiquettes s'ecartent au survol */
.piste-label { transition: letter-spacing .35s ease; }
.pistes:hover .piste-label { letter-spacing: .12em; }

/* ---------- Curseur : viseur photo, teinte CTA ---------- */
.curseur-coin {
  position: absolute;
  width: 8px; height: 8px;
  border: 1.5px solid rgba(246, 239, 226, .9);
  opacity: 0;
}
.curseur-coin:nth-child(2) { top: -2px; left: -2px; border-width: 1.5px 0 0 1.5px; }
.curseur-coin:nth-child(3) { top: -2px; right: -2px; border-width: 1.5px 1.5px 0 0; }
.curseur-coin:nth-child(4) { bottom: -2px; right: -2px; border-width: 0 1.5px 1.5px 0; }
.curseur-coin:nth-child(5) { bottom: -2px; left: -2px; border-width: 0 0 1.5px 1.5px; }
.curseur-anneau.viseur .curseur-anneau-int { border-radius: 26%; }
.curseur-anneau.viseur .curseur-coin { opacity: 1; }
.curseur-anneau.cta,
.curseur-anneau.cta ~ .curseur-dot { mix-blend-mode: normal; }
.curseur-anneau.cta .curseur-anneau-int { border-color: var(--azur); }
@supports not (mix-blend-mode: difference) {
  .curseur-dot { background: var(--encre); }
  .curseur-anneau-int, .curseur-onde { border-color: rgba(39, 32, 22, .7); }
}

/* ---------- Matieres ---------- */
/* grain papier tres fin, statique */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* les panneaux sombres portent une lueur chaude qui se deplace
   tres lentement (fond anime, coupe en mouvement reduit) */
@media (prefers-reduced-motion: no-preference) {
  .module-ecart, .offre-vedette {
    background-image: radial-gradient(65% 55% at 30% 20%,
      rgba(226, 180, 90, .10), rgba(226, 180, 90, 0) 70%);
    background-size: 220% 220%;
    background-repeat: no-repeat;
    animation: lueur-panneau 36s ease-in-out infinite alternate;
  }
}
@keyframes lueur-panneau {
  from { background-position: 0% 0%; }
  to { background-position: 100% 85%; }
}

/* lisere dore qui respire sur les panneaux sombres */
.module-ecart, .offre-vedette { position: relative; }
.module-ecart::before, .offre-vedette::before, .pack::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(226, 180, 90, .7), transparent);
  opacity: .4;
}
@media (prefers-reduced-motion: no-preference) {
  .module-ecart::before, .offre-vedette::before, .pack::before {
    animation: lisere-respire 6s ease-in-out infinite alternate;
  }
}
@keyframes lisere-respire {
  from { opacity: .18; }
  to { opacity: .6; }
}

/* vignettage doux des sections photo */
.heros-image::before, .final-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 180px rgba(31, 22, 12, .38);
}

/* ---------- Micro : chips, ruban, pied ---------- */
.ruban a .fleche-retour { display: inline-block; transition: transform .3s ease; }
.pied-liens a {
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: left calc(100% - 1px);
  transition: background-size .3s ease;
}
.pied-liens a:hover { text-decoration: none; background-size: 100% 1px; }

/* ---------- Scrollspy : point sous le lien actif ---------- */
.entete-nav a { position: relative; }
.entete-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--azur);
  opacity: 0;
  transition: opacity .25s ease;
}
.entete-nav a.actif { opacity: 1; }
.entete-nav a.actif::after { opacity: 1; }

/* ---------- Fleche « revenir en haut » ----------
   Posee par le script (aucune page a modifier). Elle se range au-dessus
   du CTA fixe sur telephone, et sous la barre de navigation en z-index. */
.haut-page {
  position: fixed;
  right: clamp(14px, 2.2vw, 30px);
  bottom: clamp(14px, 2.2vw, 30px);
  z-index: 95;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: rgba(251, 247, 238, .94);
  color: var(--encre);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .2s ease;
  box-shadow: 0 16px 32px -16px rgba(24, 18, 10, .7);
}
.haut-page.est-visible { opacity: 1; visibility: visible; transform: none; }
.haut-page:hover { background: #fff; }
.haut-page:focus-visible { outline: 2px solid var(--azur); outline-offset: 3px; }
.haut-page svg { width: 19px; height: 19px; display: block; }
@media (max-width: 899.98px) {
  /* le CTA fixe occupe le bas de l'ecran : on se range au-dessus */
  .haut-page { bottom: 78px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .haut-page { transform: none; transition: opacity .2s ease, visibility .2s; }
}
/* ---------- Marque de la barre ----------
   La marque reste ENTIERE, monogramme ET nom, quel que soit le
   defilement (22/08). L'ancienne « nav compacte » effacait le nom
   apres 500 px : retiree, avec son declencheur de scroll. */
.entete-logo { position: relative; }

/* ---------- Engagements : ce que nous ne faisons pas ---------- */
.non-perimetre {
  margin-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--filet);
  padding-top: 26px;
}
.non-perimetre-liste { margin-top: 16px; display: grid; gap: 10px; }
.non-perimetre-liste li {
  color: var(--encre-2);
  padding-left: 22px;
  position: relative;
  max-width: 70ch;
}
.non-perimetre-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 1px;
  background: var(--encre);
}

/* ---------- LQIP : micro-fond flou sous les photos ---------- */
.lqip { background-size: cover; background-position: center; }

/* ---------- Fil d'Ariane (estimation) ---------- */
.fil-ariane {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 22px;
}
.fil-ariane a { color: inherit; text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   TACTILE (20/08) : ecrans sans souris. Trois chantiers :
   1. neutraliser les :hover, qui « collent » apres un tap sur iOS
   2. cibles tactiles a la bonne taille
   3. rendre un retour visuel au toucher (le halo natif est coupe)
   ============================================================ */

@media (hover: none) {
  /* 1. plus aucun etat survol persistant */
  .offre-carte:hover,
  .offre-vedette:hover {
    transform: none;
    z-index: auto;
  }
  .offre-carte:hover {
    border-color: rgba(39, 32, 22, .08);
    box-shadow: 0 30px 80px -38px rgba(63, 48, 26, .55);
  }
  .offre-vedette:hover {
    border-color: rgba(35, 119, 232, .45);
    box-shadow:
      0 0 0 1px rgba(35, 119, 232, .18),
      0 0 44px -8px rgba(35, 119, 232, .28),
      0 46px 110px -42px rgba(39, 32, 22, .85);
  }
  .pistes:hover .piste-label { letter-spacing: .06em; }
  .btn:hover .fleche { transform: none; }
  .pied-liens a:hover { background-size: 0 1px; text-decoration: underline; }

  /* 3. retour au toucher (le tap-highlight natif est neutralise) */
  .btn:active, .entete-cta:active, .prog-seg:active,
  .narratif-rejouer:active, .pied-liens a:active {
    opacity: .72;
    transition: opacity .05s linear;
  }
  .offre-carte:active {
    transform: scale(.988);
    transition: transform .12s ease-out;
  }
}

@media (pointer: coarse) {
  /* 2. le curseur du comparateur passe de 22 a 44 px de haut ;
     pan-y : le glissement horizontal pilote le curseur, le
     balayage vertical continue de faire defiler la page */
  .module-ecart input[type="range"] {
    height: 44px;
    margin-top: 14px;
    touch-action: pan-y;
  }
  .module-ecart input[type="range"]::-webkit-slider-thumb {
    width: 30px; height: 30px;
    margin-top: -14px;
  }
  .module-ecart input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px;
  }
  /* segments de lecture du recit : 22 -> 40 px de zone tapable */
  .prog-seg { height: 40px; }
  .prog-seg::before, .prog-seg-fill { top: 19px; }
  .narratif-rejouer { padding: 12px 18px; }
}

/* ---------- QA : viewports irreels (captures pleine page) ----------
   Sans effet en usage reel : aucun ecran ne fait 3000 px de haut.
   Permet aux captures headless pleine hauteur de rester fideles. */
@media (min-height: 3000px) {
  .heros, .temps, .narratif-stage,
  html.narratif-auto .temps, html.narratif-auto .narratif-stage { min-height: 940px; }
  .final { min-height: 860px; }
}

/* ---------- Etats JS ---------- */
.mot { display: inline-block; }

/* ---------- Curseur personnalise (pointeur fin, JS actif) ---------- */
html.curseur-actif,
html.curseur-actif a,
html.curseur-actif button,
html.curseur-actif input[type="range"],
html.curseur-actif label { cursor: none; }

.curseur-dot,
.curseur-anneau {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 700; /* au-dessus du prechargeur (600) */
  border-radius: 50%;
  mix-blend-mode: difference;
}
.curseur-dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #F6EFE2;
}
.curseur-anneau {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
}
.curseur-anneau-int {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(246, 239, 226, .85);
  border-radius: 50%;
}
.curseur-onde {
  position: fixed;
  top: 0; left: 0;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 1.5px solid rgba(246, 239, 226, .9);
  border-radius: 50%;
  pointer-events: none;
  z-index: 699;
  mix-blend-mode: difference;
}

/* Lumiere doree qui derive sur les sections claires (JS).
   overflow:hidden OBLIGATOIRE : le halo est pose a right:-12% et
   debordait de 47 px a droite, ce qui rendait la page scrollable
   lateralement — d ou une bande vide sur le cote (bug iOS du 21/08,
   invisible sur Chrome qui rogne via body{overflow-x:hidden}). */
.reponse, .rapport, .fonctionnement, .offres {
  position: relative;
  overflow: hidden;
}
.reponse > .conteneur, .rapport > .conteneur,
.fonctionnement > .conteneur, .offres > .conteneur { position: relative; z-index: 1; }
.lumiere-derive {
  position: absolute;
  /* le minimum etait de 420 px : plus large que l ecran d un
     telephone, le halo debordait forcement */
  width: clamp(240px, 58vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 180, 90, .22), rgba(226, 180, 90, 0) 70%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
}

/* Couverture du rapport : ne s'affiche que si le JS anime */
.doc-couverture {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--papier);
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(24px, 3vw, 40px);
}
html.narratif-auto .doc-couverture { display: flex; }
/* PAS d'overflow:hidden ici : il forcerait transform-style a flat et
   aplatirait l'ouverture 3D (regression constatee le 20/08). */
.doc { position: relative; }
.couv-marque {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
}
.couv-titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.couv-bas {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--filet);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--encre-2);
}

/* Jauge de defilement : filet azur en haut de page */
.defilement-jauge {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--azur);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 300;
  pointer-events: none;
}

/* ---------- Micro-interactions ---------- */
.fleche { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.btn:hover .fleche { transform: translateX(5px); }
.entete { transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
/* on remonte au-dela de la hauteur de la pilule ET de son offset
   haut (44 px bureau, 64 px mobile) : sinon un liseré et l'ombre
   restaient visibles en haut d'ecran pendant le defilement */
.entete.entete-cachee { transform: translate(-50%, calc(-100% - 90px)); }

/* Le contenu du Pack herite des variables du cadre : il est lisible
   aussi bien sur papier (sans JS, panneaux empiles) que sur encre. */
.lv-panneau .pack-sous { color: var(--lv-sec); }
.lv-panneau .pack-liste li { border-top-color: var(--lv-filet); }
.lv-panneau .pack-liste p { color: var(--lv-sec); }
.lv-panneau .pack-note { color: var(--lv-sec); }
.lv-panneau .pack-apercu a { color: var(--lv-sec); }
.lv-panneau .pack-apercu a:hover { color: var(--lv-texte); }
.pack-coche { font-size: 14px; line-height: 1.35; color: var(--lv-texte); opacity: .75; }
.pack-inclus h4 { opacity: .95; }

/* ---------- Prise en charge des honoraires ----------------------
   Refait le 23/08/2026. La premiere version etait un encadre beige
   centre sur 720 px, coiffe d une etiquette en capitales
   monospace : mal alignee — elle demarrait bien plus a droite que
   la mention legale juste en dessous — et le petit tag technique
   jurait avec une page qui parle en serif.

   Ici, le vocabulaire de la maison : un filet qui separe, une
   accroche en serif dans la colonne de gauche, le texte dans la
   colonne de droite, et le trait azur pour tout accent. Le bloc
   s aligne sur la grille du conteneur, donc sur la mention qui le
   suit. Aucun fond, aucune ombre : ce n est pas une carte de plus
   dans une section qui en compte deja. */
.lv-honoraires {
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding-top: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid var(--filet);
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}
.lv-honoraires-titre {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--encre);
  margin: 0;
}
.lv-honoraires-titre::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--azur);
  margin-bottom: 14px;
}
.lv-honoraires-corps {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--encre-2);
  max-width: 62ch;
}
.lv-honoraires-corps strong { color: var(--encre); font-weight: 500; }
@media (max-width: 767.98px) {
  /* une seule colonne : l accroche passe au-dessus du texte */
  .lv-honoraires { grid-template-columns: 1fr; gap: 14px; }
  .lv-honoraires-titre { font-size: 20px; }
  .lv-honoraires-titre::before { margin-bottom: 10px; }
  .lv-honoraires-corps { font-size: 15px; }
}

/* ============================================================
   HÉROS SUR TÉLÉPHONE — corrections du 23/08/2026

   PLACÉ EN FIN DE FEUILLE, ET C'EST LE SUJET. Une première
   version de ces règles avait été écrite dans le bloc média de
   l'en-tête, plus haut : elle était donc déclarée AVANT
   `.heros-int`, et à spécificité égale c'est la dernière
   déclaration qui l'emporte. Le `padding-top: clamp(96px…)` de
   la règle générale reprenait le dessus et rien ne changeait à
   l'écran. Le projet avait déjà buté là-dessus sur `.dg-etapes`.
   ============================================================ */

@media (max-width: 899.98px) {
  /* La pilule descend à 64 px du haut sur téléphone et mesure une
     cinquantaine de pixels : elle occupe jusqu'à ~112 px. Le héros
     gardait le retrait du bureau — 96 px sur un petit écran — et la
     première ligne du titre passait dessous. */
  .heros-int {
    padding-top: 128px;
    /* Le héros aligne son contenu en bas. Quand ce contenu est plus
       haut que la place disponible, un conteneur flex déborde PAR LE
       HAUT en passant outre le padding : augmenter le retrait seul
       n'aurait donc rien réglé. La marge automatique fait le même
       travail tant qu'il y a de la place, et se réduit à zéro quand
       il n'y en a plus. */
    justify-content: flex-start;
  }
  .heros-int > *:first-child { margin-top: auto; }

  /* Le bouton fixe du bas mangeait la fin du paragraphe : mesuré à
     41 px de texte recouverts sur un écran de 844 px. Le pied de page
     réservait déjà sa place (`.pied { padding-bottom: 90px }`), mais
     le héros, lui, ne le faisait pas — et c'est la première chose
     qu'on voit. Le bouton occupe 56 px, posé à 12 px du bas : on
     réserve 92 px, marge comprise. */
  .heros-int { padding-bottom: 92px; }
}

@media (max-width: 399.98px) {
  /* Sur un téléphone de 360 px, la barre débordait de 19 px : mesuré
     à 364 px de bord droit pour 345 px utiles. Les paliers existants
     s'arrêtaient à 520 px puis à 340 px — il manquait celui du milieu,
     qui est justement la largeur la plus répandue (Galaxy S8, iPhone
     SE en 375).

     On resserre plutôt que de masquer : le nom de la marque reste
     lisible, conformément à la demande du 22/08. Les trois réductions
     rendent ensemble une vingtaine de pixels. */
  .entete { padding: 5px 5px 5px 9px; }
  .entete-marque { font-size: 14px; }
  .entete-logo { gap: 6px; }
  .entete-logo img { width: 24px; }
  .entete-connexion { padding: 9px 9px; font-size: 13.5px; }
  .entete-cta { padding: 10px 11px; font-size: 13.5px; }
}

@media (max-width: 359.98px) {
  /* Sur un écran de 320 px, les cartes d'offres débordaient de 26 px :
     leur bouton porte `white-space: nowrap`, et « Choisir le Pack
     Réclamation » impose alors sa largeur à toute la carte. Le
     débordement ne se voyait pas en barre de défilement — la section
     rogne — mais les cartes étaient coupées.

     Sur cette largeur, mieux vaut un bouton sur deux lignes qu'une
     carte tronquée. */
  .offre-carte { padding: 28px 20px 24px; }
  .offre-carte .btn { white-space: normal; padding-inline: 12px; }
}

/* Lien d'aperçu de livrable sous chaque offre payante */
.offre-apercu { margin: 0 0 18px; font-size: 13.5px; text-align: center; }
.offre-apercu a { color: var(--encre-2); text-underline-offset: 3px; }
.offre-vedette .offre-apercu a { color: rgba(246, 239, 226, .7); }

/* CTA fixe mobile (flag mobile_sticky_cta) */
.sticky-cta { display: none; }
@media (max-width: 899.98px) {
  .sticky-cta {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px;
    z-index: 90; gap: 10px; align-items: center;
  }
  .sticky-cta .btn { flex: 1; text-align: center; padding: 15px 18px; }
  .pied { padding-bottom: 90px; }
  .sticky-cta {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.3, .7, .2, 1), opacity .3s ease;
  }
  .sticky-cta.est-visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* Navigation : liens supplémentaires du site réel.
   La maquette n'avait que trois liens ; avec « Professionnels »
   et « Connexion » en plus, le logo se faisait écraser jusqu'à
   disparaître. Il ne doit jamais rétrécir. */
.entete-logo, .entete-nav, .entete-cta { flex: 0 0 auto; }
.entete { max-width: calc(100% - 32px); }
@media (max-width: 899.98px) { .entete-nav { display: none; } }

/* ---------- Marque du pied ---------- */
.pied-logo { display: flex; align-items: center; gap: 12px; }
.pied-logo img {
  width: 34px; height: auto;
  background: var(--papier); border-radius: 10px; padding: 7px 8px;
}
.pied-logo span { font-family: var(--serif); font-size: 21px; color: var(--ivoire); }

/* ---------- Fenetre de connexion ----------
   Le formulaire est celui de /login.php : meme action, meme jeton.
   Sans JS, le lien ouvre la page ; la fenetre reste un confort. */
html.modale-ouverte { overflow: hidden; }
.modale {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modale[hidden] { display: none; }
.modale-fond {
  position: absolute; inset: 0;
  background: rgba(24, 19, 12, .64);
  opacity: 0; transition: opacity .22s ease;
}
.modale.est-ouverte .modale-fond { opacity: 1; }
.modale-boite {
  position: relative; width: min(430px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--filet); border-radius: 20px;
  padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 50px 110px -45px rgba(39, 32, 22, .9);
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2, .7, .2, 1);
}
.modale.est-ouverte .modale-boite { opacity: 1; transform: none; }
.modale-fermer {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--encre-2); font-size: 26px; line-height: 1; cursor: pointer;
}
.modale-fermer:hover { background: rgba(39, 32, 22, .06); color: var(--encre); }
.modale-titre {
  font-family: var(--serif); font-weight: 380;
  font-size: clamp(28px, 3.4vw, 34px); line-height: 1.1;
  letter-spacing: -.02em; margin-top: 8px;
}
.modale-intro { margin-top: 10px; font-size: 14.5px; color: var(--encre-2); }
/* colonne bornee a 0 : sans cela un enfant large (les champs en
   duo) elargit la grille et deborde de la fenetre */
.modale-form { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.modale-form label {
  display: grid; gap: 7px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2);
}
.modale-form input {
  /* sans largeur, un champ garde sa taille native (~180 px) et deux
     champs cote a cote debordent de la fenetre */
  width: 100%; min-width: 0;
  font-family: var(--sans); font-size: 16px; color: var(--encre);
  background: #fff; border: 1px solid var(--filet); border-radius: 12px;
  padding: 12px 14px; text-transform: none; letter-spacing: normal;
}
.modale-form input:focus-visible {
  outline: 2px solid var(--azur); outline-offset: 2px; border-color: var(--azur);
}
.modale-form .btn { margin-top: 6px; width: 100%; text-align: center; }
.modale-erreur {
  border-left: 3px solid #B4342A; border-radius: 0 8px 8px 0;
  background: rgba(180, 52, 42, .07); padding: 10px 12px; font-size: 14px;
}
.modale-erreur[hidden] { display: none; }
.modale-confirme {
  border-left: 3px solid var(--azur); border-radius: 0 8px 8px 0;
  background: rgba(35, 119, 232, .08); padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
}
.modale-confirme[hidden] { display: none; }
.modale-liens {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 13.5px; color: var(--encre-2);
}
.modale-liens a { color: var(--encre); }
.modale-vue[hidden] { display: none; }
/* deux champs cote a cote quand la place le permet */
/* minmax(0,1fr) et non 1fr : sinon les colonnes ne descendent pas
   sous la taille du contenu et les champs debordent de la fenetre */
.modale-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
@media (max-width: 419.98px) { .modale-duo { grid-template-columns: 1fr; } }
/* « .modale-form label » (classe + type) l emporterait sur une simple
   classe : la case a cocher s empilait au-dessus de son texte */
.modale-form .modale-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  letter-spacing: normal; text-transform: none; color: var(--encre-2);
}
.modale-form .modale-check input { margin-top: 2px; flex: 0 0 auto; width: auto; }
.modale-form .modale-check a { color: var(--encre); }
/* bascule entre les deux vues : un bouton qui se lit comme un lien */
.modale-bascule {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; color: var(--encre);
  text-decoration: underline; text-underline-offset: 3px;
}
.modale-bascule:hover { color: var(--azur); }
/* Mouvement reduit : on garde le fondu, on retire le deplacement. */
@media (prefers-reduced-motion: reduce) {
  .modale-boite { transform: none; }
}

/* ---------- Intro SANS MOUVEMENT (réglage « réduire les animations ») ----------
   On ne supprime pas l'intro : on retire ce qui bouge et on garde
   un écran de marque qui se fond. */
html.mouvement-reduit .pre-goutte,
html.mouvement-reduit .pre-goutte-finale,
html.mouvement-reduit .pre-onde,
html.mouvement-reduit .pre-cercle,
html.mouvement-reduit .pre-ligne,
html.mouvement-reduit .pre-compteur { display: none; }
html.mouvement-reduit .prechargeur {
  transition: opacity .55s ease;
  -webkit-mask-image: none; mask-image: none;
}
html.mouvement-reduit .prechargeur.pre-sortie { opacity: 0; }
html.mouvement-reduit .pre-marque { opacity: 0; transition: opacity .5s ease; }
html.mouvement-reduit .prechargeur.pre-entree .pre-marque { opacity: 1; }