/* ==========================================================================
   Flambée — le site public
   Prolonge les tokens de style.css : même identité, échelle plus ample.
   ========================================================================== */

body.site { padding: 0; }

/* --------------------------------------------------------------- En-tête --- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 36px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(7, 7, 12, .72);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.site-header .brand {
  font-family: var(--serif); font-size: 26px; color: var(--text);
  text-decoration: none; display: flex; align-items: center; gap: 9px;
}
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  color: var(--text-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  transition: color .2s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.courant { color: var(--flamme-claire); }
/* `.site-nav a` est plus spécifique que `.primary` : sans cette règle, le
   bouton hérite du gris de la navigation et devient illisible sur l'orange. */
.site-nav a.button.primary { color: var(--sur-flamme); }
.site-nav a.button.ghost { color: var(--text); }
.button.petit { padding: 10px 20px; font-size: 13.5px; }
.button.grand { padding: 16px 32px; font-size: 15.5px; }

.menu-bouton {
  display: none; background: none; border: none; padding: 10px;
  flex-direction: column; gap: 5px; cursor: pointer;
}
.menu-bouton span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .3s, opacity .2s;
}
.menu-bouton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-bouton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero --- */
.hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.16fr .84fr;
  align-items: center; gap: 52px;
  max-width: 1180px; margin: 0 auto; padding: 90px 36px 70px;
}
/* Un voile sous la colonne de texte. Le fond animé est beau, mais un titre se
   lit sur un appui, pas sur des volutes : le voile est dense à gauche, là où
   se trouve la copie, et s'efface vers le visuel pour ne pas l'éteindre. */
.hero::before {
  /* Le voile va d'un bord de la fenêtre à l'autre, pas d'un bord du contenu
     à l'autre. Arrêté à la colonne centrale, son dégradé se coupait net sur
     les côtés : on voyait un grand rectangle sombre posé sur le fond animé,
     avec deux arêtes verticales bien nettes. `100vw` centré le déborde sans
     élargir la page — la barre de défilement mise à part, et `body` la
     masque déjà par `overflow-x: hidden`. */
  content: ""; position: absolute; inset: -40px auto; top: -40px; bottom: -40px;
  left: 50%; width: 100vw; translate: -50% 0; pointer-events: none;
  background: radial-gradient(58% 96% at 22% 50%,
              rgba(7, 7, 12, .92) 0%, rgba(7, 7, 12, .78) 34%,
              rgba(7, 7, 12, .34) 62%, transparent 82%);
}
.hero > * { position: relative; }
/* La taille est bornée à 74 px, pas à 82 : la troisième ligne — « Une vidéo
   qui prend. » — est la chute du titre, et au-delà elle se coupait en deux
   sur un écran de portable ou d'ordinateur portable. Une chute coupée en
   deux n'est plus une chute. */
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5.6vw, 74px); line-height: 1.04;
  letter-spacing: -.025em; margin: 0 0 24px;
}
.hero h1 em { font-style: italic; color: var(--eclat); }
.hero-accroche {
  font-size: 18px; line-height: 1.65; color: var(--text-soft);
  max-width: 46ch; margin: 0 0 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin: 20px 0 0; font-size: 13px; color: var(--text-faint); }

/* Le téléphone : un cadre sobre, la vidéo respire dedans. */
.hero-visuel { display: flex; justify-content: center; }
.scene { position: relative; }

/* Deux étiquettes flottantes : elles disent ce que fait l'outil, sans texte
   supplémentaire dans la colonne de gauche. */
.jeton {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--hairline-2);
  background: rgba(16, 16, 26, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .95);
  font-size: 12.5px; font-weight: 500; color: var(--text);
  white-space: nowrap;
  animation: jeton-flotte 6s ease-in-out infinite;
}
.jeton-point {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--flamme); box-shadow: 0 0 10px var(--flamme);
}
/* Le jeton du bas désigne les sous-titres : il se place sous eux, dans la
   bande vide du cadre. Le sortir entièrement du téléphone élargissait la page
   — débordement horizontal constaté de 1000 à 1280 px, et sur mobile. */
.jeton-haut { top: 58px; left: -86px; }
.jeton-bas { bottom: 26px; right: -104px; animation-delay: -3s; }
@keyframes jeton-flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.telephone {
  position: relative; width: 272px; padding: 11px;
  border-radius: 40px;
  background: linear-gradient(160deg, #33324a 0%, #16161f 18%,
                              #08080d 55%, #1d1c2c 88%, #454263 100%);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .95),
              inset 0 1px 0 rgb(var(--os-rvb) / .28),
              0 0 0 1px rgb(var(--laiton-rvb) / .30),
              0 0 90px -26px rgb(var(--flamme-rvb) / .55);
  animation: flotte 7s ease-in-out infinite;
}
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
.telephone video {
  display: block; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 30px; background: #07070c; object-fit: cover;
}
.telephone-reflet {
  position: absolute; inset: 11px; border-radius: 30px; pointer-events: none;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 42%);
}

/* ------------------------------------------------------------- Sections --- */
/* La citation pleine largeur. Sa mise en scène — l'image, les voiles, la
   hauteur — est plus bas, avec celle du dernier appel : les deux bandeaux
   partagent leur construction, et les séparer ici les ferait diverger.
   Ne reste donc ici que ce qui n'appartient qu'à elle. */
.bande { text-align: center; }
.bande p { font-family: var(--serif); font-style: italic; margin: 0; }

.section {
  position: relative; z-index: 1;
  max-width: 1120px; margin: 0 auto; padding: 92px 36px;
}
.section-premiere { padding-top: 72px; }
/* Un appui sous le titre des pages intérieures. L'accueil a le voile de son
   premier écran ; ailleurs, le titre se posait directement sur le champ de
   braises, qui est au plus vif en haut de page. Comme le voile de l'accueil,
   celui-ci va d'un bord de la fenêtre à l'autre pour n'avoir aucune arête. */
.section-premiere::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -72px auto auto; left: 50%; width: 100vw; height: 460px;
  translate: -50% 0;
  background: radial-gradient(72% 100% at 30% 28%,
              rgba(7, 7, 12, .92) 0%, rgba(7, 7, 12, .78) 38%,
              rgba(7, 7, 12, .34) 66%, transparent 86%);
}
@media (max-width: 760px) {
  /* En une colonne, le titre prend toute la largeur : le voile doit la
     couvrir aussi, sinon sa dernière ligne retombe sur les volutes. */
  .section-premiere::before {
    height: 400px;
    background: radial-gradient(96% 100% at 50% 26%,
                rgba(7, 7, 12, .92) 0%, rgba(7, 7, 12, .80) 44%,
                rgba(7, 7, 12, .34) 72%, transparent 92%);
  }
}
.section.etroit { max-width: 700px; }
.section h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 62px); line-height: 1.06;
  letter-spacing: -.02em; margin: 0 0 20px;
}
.section h1 em, .section h2 em, .appel h2 em { font-style: italic; color: var(--eclat); }
.section h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(31px, 4.2vw, 46px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 18px;
}
.section-accroche {
  font-size: 17px; color: var(--text-soft); max-width: 62ch;
  margin: 0 0 44px; line-height: 1.65;
}

/* ------------------------------------------------- Le test de l'accroche --- */
/* Trois manches, deux boutons chacune. Tant qu'on n'a pas répondu, la note et
   la raison restent repliées : sans cela le test se lit à l'avance et il n'y a
   plus rien à jouer. Le repli se fait par `grid-template-rows: 0fr → 1fr`,
   qui s'anime, là où `height: auto` ne s'anime pas. */
.duel-manches {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 26px;
}
.duel-manche { counter-increment: manche; }
.duel-sujet {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; font-size: 14px; color: var(--text-soft);
}
.duel-sujet span {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hairline-2); background: var(--surface);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.duel-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.duel-choix {
  /* Un bouton centre son contenu verticalement : dans une paire dont une
     carte est plus haute que l'autre, les deux phrases ne s'alignent plus.
     En colonne, elles repartent du haut. */
  position: relative; display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  width: 100%; text-align: left;
  padding: 22px 22px 20px; border-radius: 18px;
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .25s, background .25s, transform .25s;
}
.duel-choix:hover { border-color: var(--hairline-2); background: var(--surface-2); }
.duel-choix:active { transform: scale(.994); }
.duel-texte {
  display: block; font-family: var(--serif); font-size: 20px;
  line-height: 1.35; letter-spacing: -.01em;
}
.duel-texte::before { content: "\00ab\00a0"; color: var(--text-faint); }
.duel-texte::after { content: "\00a0\00bb"; color: var(--text-faint); }

/* Le badge ne dit son verdict qu'une fois la manche jouée. */
.duel-badge {
  position: absolute; top: -10px; right: 18px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--surface-2); color: var(--text-faint);
  border: 1px solid var(--hairline-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s .15s, transform .3s .15s;
}
.duel-manche.jouee .duel-badge { opacity: 1; transform: none; }
.duel-manche.jouee .gagnante .duel-badge {
  background: linear-gradient(135deg, var(--flamme-claire), var(--flamme));
  border-color: transparent; color: var(--sur-flamme);
}
.duel-manche.jouee .gagnante {
  border-color: rgb(var(--flamme-claire-rvb) / .45);
  background: linear-gradient(165deg, rgb(var(--flamme-rvb) / .10), var(--surface));
}
/* Ce qu'on a choisi reste visible, même quand c'était la mauvaise. */
.duel-manche.jouee .choisi::after {
  content: "Ton choix"; position: absolute; left: 22px; bottom: -9px;
  padding: 3px 10px; border-radius: 999px;
  background: #0f1014; border: 1px solid var(--hairline-2);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft);
}

/* Le repli : `max-height` s'anime, `height: auto` non. La valeur haute est
   volontairement généreuse — elle borne l'animation, pas le contenu. */
.duel-verdict {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 12px; align-items: center;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(.16, 1, .3, 1),
              opacity .3s, margin-top .45s cubic-bezier(.16, 1, .3, 1);
}
.duel-manche.jouee .duel-verdict {
  max-height: 240px; opacity: 1; margin-top: 16px;
}
.duel-jauge {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12);
  position: relative;
}
.duel-jauge i {
  position: absolute; inset: 0 auto 0 0; border-radius: 2px;
  width: calc(var(--part) * 100%);
  background: linear-gradient(90deg, var(--flamme-claire), var(--flamme));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s .1s cubic-bezier(.16, 1, .3, 1);
}
.duel-manche.jouee .duel-jauge i { transform: scaleX(1); }
.duel-verdict b {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--flamme-claire);
}
.duel-verdict em {
  grid-column: 1 / -1; margin-top: 10px;
  font-style: normal; font-size: 14px; line-height: 1.55;
  color: var(--text-soft);
}

.duel-bilan {
  margin: 30px 0 0; min-height: 26px;
  font-size: 16px; color: var(--text-soft);
}
.duel-bilan b { color: var(--eclat); font-weight: 600; }
.duel-bilan a { color: var(--flamme-claire); }
.duel-final { margin: 18px 0 0; }
.duel-final[hidden] { display: none; }

@media (max-width: 760px) {
  .duel-paire { grid-template-columns: 1fr; gap: 12px; }
  .duel-texte { font-size: 18px; }
  .duel-choix { padding: 20px 18px 18px; }
  .duel-manche.jouee .choisi::after { left: 18px; }
}

/* Sans mouvement : les replis s'ouvrent sec, rien ne glisse. */
@media (prefers-reduced-motion: reduce) {
  .duel-choix, .duel-verdict, .duel-jauge i, .duel-badge { transition: none; }
}

/* L'avis de la vitrine : posé par l'export quand aucun atelier ne répond.
   Il doit se lire avant les prix, pas après. */
.tarifs-avis {
  max-width: 62ch; margin: 0 0 30px; padding: 14px 18px;
  border: 1px solid var(--hairline-2); border-radius: 14px;
  background: var(--surface);
  font-size: 14.5px; line-height: 1.6; color: var(--text-soft);
}

/* Le canevas d'aperçu, posé exactement sur la vidéo de fond. Le fond vient du
   moteur, le texte est peint par le navigateur : c'est la seule façon de
   rendre une phrase à la demande sans serveur. */
.essayage-scene { position: relative; }
.essayage-toile {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; border-radius: inherit;
}

/* ===================================================================
   La matière
   ===================================================================
   Le fond était un aplat : entre deux sections, de vastes plages de noir
   parfaitement mort, où l'œil n'a rien à faire. On y pose maintenant une
   lumière — des lueurs très basses, ancrées au haut de chaque section, qui
   donnent au défilement une respiration au lieu d'un vide.

   Les valeurs restent très basses — cinq centièmes d'opacité pour la lueur,
   trois pour le filet. C'est voulu : une atmosphère qu'on remarque n'est plus
   une atmosphère, c'est un motif. */
.section, .sequence, .chiffres, .appel, .duel { position: relative; }
.section::before, .appel::before, .duel::before {
  content: ""; position: absolute; inset: -10% 0 auto; height: 60%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(70% 100% at 50% 0%,
              rgb(var(--flamme-rvb) / .050), transparent 72%);
}
/* Un filet de laiton entre les sections, très bas en intensité : il marque la
   coupe sans la souligner, comme un trait de crayon sur un carton. */
.section + .section::after,
.chiffres + .section::after {
  content: ""; position: absolute; inset: 0 auto auto 50%; translate: -50% 0;
  width: min(520px, 62%); height: 1px;
  background: linear-gradient(90deg, transparent,
              rgb(var(--laiton-rvb) / .34), transparent);
}

/* Les surfaces prennent la lumière du haut : une arête claire d'un pixel
   suffit à leur donner une épaisseur qu'une bordure uniforme ne donne pas.
   Seules les surfaces qui en sont vraiment une : posée sur un bloc
   transparent, l'arête dessinerait un trait clair sans rien dessous. */
.duel-choix, .tarif {
  box-shadow: var(--lueur);
}

/* Les chiffres : de l'or en relief plutôt qu'un dégradé plat. */

/* --------------------------------------------------------------- Étapes --- */
.etapes {
  list-style: none; padding: 0; margin: 46px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
}
.etapes li { position: relative; padding-top: 26px; border-top: 1px solid var(--hairline); }
.etape-numero {
  font-family: var(--serif); font-size: 15px; color: var(--flamme);
  letter-spacing: .1em;
}
.etapes h3 { font-size: 17px; font-weight: 600; margin: 12px 0 8px; }
.etapes p { font-size: 14.5px; color: var(--text-soft); margin: 0; line-height: 1.6; }

/* --------------------------------------------------------------- Atouts --- */
.atouts-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 22px; margin-top: 46px;
}
/* Fond opaque, pas translucide : derrière ces cartes tourne un champ de
   braises, et un voile le laissait monter à travers le texte — très visible
   sur /fonctionnalites, où elles occupent la page entière. */
.atout {
  padding: 30px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgb(var(--os-rvb) / .055), rgb(var(--os-rvb) / .012)),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: var(--lueur);
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s,
              box-shadow .3s;
}
.atout:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--laiton-rvb) / .38);
  box-shadow: var(--lueur-forte), 0 22px 50px -28px rgba(0, 0, 0, .9);
}
/* L'icône d'un atout : posée dans un jeton discret plutôt que nue, pour lui
   donner un point d'appui et aligner toutes les cartes sur la même hauteur. */
.atout-icone {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 18px;
  border-radius: 12px; color: var(--flamme-claire);
  background: rgb(var(--flamme-rvb) / .10);
  border: 1px solid rgb(var(--flamme-rvb) / .18);
}
.atout h3 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.atout p { font-size: 14.5px; color: var(--text-soft); margin: 0; line-height: 1.65; }

/* ------------------------------------------------------- Styles vidéo ----- */
.styles-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 22px; margin-top: 40px;
}
.style-carte {
  margin: 0; padding: 14px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: rgba(0, 0, 0, .3);
}
.style-carte video {
  width: 100%; aspect-ratio: 108 / 34; display: block;
  border-radius: 11px; background: #12131a;
}
.style-carte figcaption {
  padding: 14px 4px 2px; font-size: 13.5px; color: var(--text-soft);
  line-height: 1.55;
}
.style-carte figcaption b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 21px; color: var(--text); margin-bottom: 5px;
}

/* ------------------------------------------------------------------ FAQ --- */
.faq { margin-top: 36px; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  padding: 24px 40px 24px 0; cursor: pointer; position: relative;
  font-size: 17px; font-weight: 500; list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 22px; color: var(--flamme);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--flamme-claire); }
.faq details p {
  margin: 0; padding: 0 40px 26px 0;
  font-size: 15px; color: var(--text-soft); line-height: 1.7;
}

/* ----------------------------------------------------------- Formulaire --- */
.formulaire { margin-top: 34px; display: flex; flex-direction: column; gap: 4px; }
.formulaire .button, .formulaire button { margin-top: 20px; align-self: flex-start; }
.mention { font-size: 12.5px; color: var(--text-faint); margin: 16px 0 0; line-height: 1.6; }
.mention a, .texte-legal a, .carte p a {
  color: var(--flamme-claire); text-decoration: none;
  border-bottom: 1px solid rgb(var(--flamme-claire-rvb) / .3);
}
.mention a:hover, .texte-legal a:hover { border-bottom-color: var(--flamme-claire); }

.avis {
  padding: 20px 24px; margin: 28px 0;
  border: 1px solid rgb(var(--flamme-claire-rvb) / .3); border-radius: var(--radius-sm);
  background: rgb(var(--flamme-claire-rvb) / .06);
  color: rgb(var(--os-rvb) / .9); font-size: 14.5px; line-height: 1.65;
}
.avis b { color: var(--eclat); display: block; margin-bottom: 5px; }
.avis.erreur {
  border-color: rgba(255, 107, 107, .3); background: rgba(255, 107, 107, .07);
  color: #ffb4b4;
}

.texte-legal { margin-top: 34px; }
.texte-legal h2 {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--flamme);
  margin: 44px 0 14px;
}
.texte-legal p { font-size: 15px; color: var(--text-soft); line-height: 1.75; margin: 0 0 14px; }

/* ----------------------------------------------------------- Appel final --- */
.appel {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto; padding: 100px 36px 110px;
  text-align: center;
}
.appel h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(33px, 5vw, 52px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 16px;
}
.appel p { color: var(--text-soft); font-size: 17px; margin: 0 0 32px; }

/* ------------------------------------------------------------ Pied de page --- */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hairline);
  background: rgba(0, 0, 0, .3);
  padding: 64px 36px 30px;
}
.footer-grille {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px; max-width: 1120px; margin: 0 auto 48px;
}
.footer-marque .brand { font-family: var(--serif); font-size: 24px; margin-bottom: 14px; }
.footer-marque p { font-size: 14px; color: var(--text-faint); max-width: 34ch; line-height: 1.65; margin: 0; }
.site-footer h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
}
.site-footer a {
  display: block; color: var(--text-soft); text-decoration: none;
  font-size: 14px; margin-bottom: 11px; transition: color .2s;
}
.site-footer a:hover { color: var(--flamme-claire); }
.footer-bas {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding-top: 26px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px; color: var(--text-faint);
}

/* ------------------------------------------------------------ Téléphone --- */
@media (max-width: 1080px) {
  .jeton-haut { left: -34px; }
  .jeton-bas { right: -40px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 46px; padding: 56px 20px 50px; text-align: center; }
  .jeton { font-size: 11.5px; padding: 8px 12px; }
  .jeton-haut { left: -12px; top: 36px; }
  .jeton-bas { right: -12px; bottom: 20px; }
  .hero-accroche { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .footer-grille { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 680px) {
  .site-header { padding: 14px 18px; }
  .site-header .brand { font-size: 22px; }
  .menu-bouton { display: flex; }
  /* Le panneau est opaque, pas voilé. Un fond translucide posé sous un
     en-tête qui filtre déjà son arrière-plan laissait le titre de la page
     transparaître au travers des entrées du menu : on lisait deux textes
     superposés. Et un menu doit de toute façon couvrir ce qu'il recouvre. */
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 18px 22px;
    background: var(--ink-2);
    border-bottom: 1px solid rgb(var(--laiton-rvb) / .24);
    box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .95);
    display: none;
  }
  .site-nav.ouvert { display: flex; }
  .site-nav a { padding: 15px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
  .site-nav a.button { margin-top: 16px; border-bottom: none; text-align: center; }
  .section { padding: 62px 20px; }
  .appel { padding: 70px 20px 80px; }
  .hero-actions .button { flex: 1 1 100%; }
  .footer-grille { grid-template-columns: 1fr; gap: 30px; }
  .site-footer { padding: 46px 20px 24px; }
}

/* ------------------------------------------------- Formulaires de compte --- */
/* Opaque, comme les autres cartes : un formulaire dont on voit les flammes
   monter derrière les champs n'inspire pas la confiance qu'on demande à
   quelqu'un qui va y taper son adresse et son mot de passe. */
.carte-formulaire {
  margin-top: 30px; padding: 32px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgb(var(--os-rvb) / .055), rgb(var(--os-rvb) / .012)),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: var(--shadow), var(--lueur);
}
.carte-formulaire .formulaire { margin-top: 0; }
.carte-formulaire .button,
.carte-formulaire button { width: 100%; margin-top: 26px; }
input[type=email], input[type=password] {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .32); color: var(--text);
  font: 400 15px/1.6 var(--sans);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input[type=email]:focus, input[type=password]:focus {
  outline: none; border-color: rgb(var(--flamme-rvb) / .55);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 4px rgb(var(--flamme-rvb) / .1);
}
.sous-formulaire {
  margin-top: 26px; text-align: center;
  font-size: 14px; color: var(--text-soft);
}
.sous-formulaire a { color: var(--flamme-claire); text-decoration: none; font-weight: 500; }
.sous-formulaire a:hover { text-decoration: underline; }
.avis.reussite {
  border-color: rgba(95, 214, 164, .3); background: rgba(95, 214, 164, .06);
  color: #a5ead0;
}
.avis.reussite b { color: var(--ok); }
@media (max-width: 680px) { .carte-formulaire { padding: 22px; } }

/* ------------------------------------------------ Révélation au défilement --- */
.a-reveler {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--retard, 0ms),
              transform .7s cubic-bezier(.16, 1, .3, 1) var(--retard, 0ms);
}
.a-reveler.revele { opacity: 1; transform: none; }

.site-header.pose {
  background: rgba(7, 7, 12, .9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 12px 40px -24px rgba(0, 0, 0, .9);
}

@media (prefers-reduced-motion: reduce) {
  .a-reveler { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------- Chiffres --- */
.chiffres {
  border-block: 1px solid rgb(var(--laiton-rvb) / .22);
  background:
    radial-gradient(120% 140% at 50% 0%, rgb(var(--flamme-rvb) / .055), transparent 70%),
    rgb(var(--os-rvb) / .014);
  padding: 44px 36px;
}
.chiffres-grille {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 34px; text-align: center;
}
.chiffres-grille b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.5vw, 46px); line-height: 1;
  background: linear-gradient(135deg, var(--flamme-claire), var(--flamme));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--flamme);
  margin-bottom: 9px;
}
.chiffres-grille span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ------------------------------------------------------------ Franchise --- */
.franchise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px; margin-top: 40px;
}
.franchise > div {
  padding: 28px; border-radius: var(--radius);
  border: 1px solid var(--hairline);
  border-left: 2px solid rgb(var(--flamme-rvb) / .4);
  background: rgba(0, 0, 0, .22);
}
.franchise h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.franchise p { font-size: 14.5px; color: var(--text-soft); margin: 0; line-height: 1.65; }

.appel-note { margin-top: 20px; font-size: 13px; color: var(--text-faint); }

.erreur-page { text-align: center; padding-block: 110px 130px; }
.erreur-page .section-accroche { margin-inline: auto; }
.erreur-page .row { justify-content: center; }

/* ---------------------------------------------- Essayage des sous-titres --- */
.essayage { margin-top: 38px; }

.essayage-champ { position: relative; display: block; margin-bottom: 22px; }
.essayage-champ input {
  width: 100%; padding: 20px 92px 20px 24px;
  font: 500 19px/1.4 var(--sans); color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--hairline); border-radius: 16px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.essayage-champ input::placeholder { color: var(--text-faint); }
.essayage-champ input:focus {
  outline: none; border-color: rgb(var(--flamme-rvb) / .55);
  background: rgb(var(--flamme-rvb) / .05);
  box-shadow: 0 0 0 4px rgb(var(--flamme-rvb) / .10),
              0 22px 60px -34px rgb(var(--flamme-rvb) / .8);
}
.essayage-compteur {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font: 600 12px var(--sans); letter-spacing: .04em;
  color: var(--text-faint); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.essayage-compteur.proche { color: var(--flamme-claire); }

.essayage-styles {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px;
}
.puce {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: 500 13.5px var(--sans); color: var(--text-soft);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline);
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.puce:hover { color: var(--text); border-color: rgba(255, 255, 255, .18); }
.puce:active { transform: scale(.97); }
.puce.actif {
  background: linear-gradient(135deg, var(--flamme-claire), var(--flamme));
  border-color: transparent; color: var(--sur-flamme); font-weight: 650;
  box-shadow: 0 14px 34px -18px rgb(var(--flamme-rvb) / .9);
}

/* La scène : un cadre sombre où le clip occupe toute la largeur. Le fond du
   clip étant lui-même un dégradé, le cadre reste neutre pour ne pas jurer. */
.essayage-scene {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hairline);
  background: #07080b;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95);
}
.essayage-scene video {
  display: block; width: 100%; height: auto;
  /* Le clip est une bande : on réserve sa place pour éviter le saut de page. */
  aspect-ratio: 540 / 170; object-fit: cover; background: #07080b;
}
.essayage-scene figcaption {
  padding: 16px 22px 18px; font-size: 13.5px; color: var(--text-soft);
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .015);
}

/* Pendant le rendu : le clip se retire légèrement et une barre progresse. */
.essayage.charge .essayage-scene video { opacity: .38; filter: saturate(.5); }
.essayage-scene video { transition: opacity .35s, filter .35s; }
.essayage.charge .essayage-scene::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--flamme), transparent);
  animation: balayage 1.15s ease-in-out infinite;
}
@keyframes balayage {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.essayage-etat {
  margin: 14px 0 0; min-height: 20px;
  font-size: 13.5px; color: var(--text-faint);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 680px) {
  .essayage-champ input { padding: 17px 78px 17px 18px; font-size: 16.5px; }
  .puce { padding: 9px 15px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .essayage.charge .essayage-scene::after { animation: none; opacity: .6; }
}

/* =============================================================== Séquence ===
   Cinq actes, un seul décor. Le conteneur est haut et la scène y reste
   collée : ce qu'on fait défiler n'est pas la page, c'est le temps du récit.
   Les positions sont toutes posées par le script, en transformations — ni
   largeur ni marge ne changent, donc aucune remise en page à calculer.
   ========================================================================= */
/* Cinq actes en trois écrans et demi : à 460vh, le récit se méritait au
   prix d'un défilement interminable, et la page paraissait vide entre
   deux sections. La lecture reste ample, l'attente non. */
.sequence { height: 350vh; position: relative; }
.sequence-piste {
  position: sticky; top: 0; height: 100vh;
  display: grid; place-items: center; overflow: hidden;
}
.sequence-cadre {
  width: min(1180px, 100%); padding: 0 36px;
  display: grid; grid-template-columns: .92fr 1.08fr;
  align-items: center; gap: 48px;
}
.sequence-texte h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.06; letter-spacing: -.015em; margin: 12px 0 28px;
}
.sequence-texte h2 em { font-style: italic; color: var(--eclat); }

/* La liste des étapes : celle en cours s'éclaire, les autres s'effacent sans
   disparaître — on doit voir d'où l'on vient et où l'on va. */
.sequence-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sequence-liste li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 11px 14px; border-radius: 12px;
  opacity: .34; transition: opacity .45s, background .45s;
}
.sequence-liste li.actif {
  opacity: 1;
  background: linear-gradient(90deg, rgb(var(--flamme-rvb) / .10), transparent 76%);
}
.sequence-numero {
  font-family: var(--serif); font-size: 17px; color: var(--text-faint);
  transition: color .45s;
}
.sequence-liste li.actif .sequence-numero { color: var(--flamme-claire); }
.sequence-liste b {
  display: block; font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.sequence-liste span:not(.sequence-numero) {
  font-size: 13.5px; color: var(--text-soft); line-height: 1.5;
}
/* La description ne se déplie que pour l'étape en cours : sans cela, cinq
   paragraphes empilés font une page de texte, pas un récit. */
.sequence-liste li:not(.actif) div span { display: none; }

/* Le plateau porte la perspective : sans profondeur déclarée ici, les
   rotations des enfants resteraient plates. */
.sequence-plateau {
  position: relative; height: min(66vh, 540px);
  perspective: 1400px; perspective-origin: 50% 46%;
  transform-style: preserve-3d;
}

.source, .montage {
  position: absolute; top: 50%; left: 50%;
  will-change: transform, opacity;
}

/* Les trois vignettes portent de vraies images — calculées par le moteur de
   Flambée lui-même (outils/engendrer_vues.py), à trois moments du jour. Trois
   aplats de couleur suffisaient à occuper la place, mais donnaient au passage
   le plus important du site l'air d'une maquette : on y cherchait une vidéo,
   on y trouvait un rectangle. Le dégradé reste dessous, comme repli tant que
   l'image n'est pas arrivée. */
.source {
  width: 168px; aspect-ratio: 9 / 16;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(165deg, var(--teinte-a), var(--teinte-b));
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .95), var(--lueur);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px;
}
.source::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--vue);
  background-size: cover; background-position: center;
}
/* Un voile sombre en haut et en bas : l'étiquette et la jauge se posent sur
   l'image sans qu'on ait à choisir entre les lire et la voir. */
.source::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 9, .62), transparent 26%,
                    transparent 62%, rgba(5, 5, 9, .78));
}
.source > * { position: relative; z-index: 1; }
.source-1 { --teinte-a: #2b2f63; --teinte-b: #0b0c18;
            --vue: url('/static/vues/vue-aube.jpg'); }
.source-2 { --teinte-a: #4b3785; --teinte-b: #120f1c;
            --vue: url('/static/vues/vue-couchant.jpg'); }
.source-3 { --teinte-a: #141a4a; --teinte-b: #05050e;
            --vue: url('/static/vues/vue-nuit.jpg'); }

.source-etiquette {
  align-self: flex-start;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(7, 7, 12, .62); backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-soft);
}
/* La note d'accroche : une jauge, parce qu'un chiffre seul ne se compare pas
   d'un coup d'œil. */
.source-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .4s;
}
.acte-1 .source-note, .acte-2 .source-note,
.acte-3 .source-note { opacity: 1; }
.source-note i {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .16); position: relative;
}
.source-note i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc(var(--part) * 100%); border-radius: 2px;
  background: linear-gradient(90deg, var(--flamme-claire), var(--flamme));
}
/* Le verdict de l'acte 2 : la source la mieux notée ouvre le montage. */
.source-retenue {
  position: absolute; inset: auto 10px 42px;
  padding: 5px 0; border-radius: 999px; text-align: center;
  background: linear-gradient(135deg, var(--flamme-claire), var(--flamme));
  color: var(--sur-flamme); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
/* Le verdict tombe à l'acte du choix, pas à celui d'après. */
.acte-1 .source-2 .source-retenue,
.acte-2 .source-2 .source-retenue { opacity: 1; transform: none; }
.source-retenue i { font-style: normal; }

.montage { width: 196px; }
.montage-cadre {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden;
  border: 1px solid rgb(var(--flamme-claire-rvb) / .35);
  background: linear-gradient(170deg, #1d1738, #07070c 62%);
  box-shadow: 0 48px 90px -34px rgb(var(--flamme-rvb) / .55),
              0 0 0 1px rgba(255, 255, 255, .06);
}
.montage-bande {
  position: absolute; inset: 0;
  background: radial-gradient(90% 58% at 50% 26%,
              rgb(var(--flamme-claire-rvb) / .30), transparent 72%);
}
/* Le script de l'acte 4 : trois lignes qui s'écrivent l'une après l'autre. */
.montage-script {
  position: absolute; inset: auto 16px 96px; display: grid; gap: 7px;
}
.montage-script span {
  height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .26);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.montage-script span:nth-child(2) { transition-delay: .12s; width: 82%; }
.montage-script span:nth-child(3) { transition-delay: .24s; width: 58%; }
.acte-3 .montage-script span, .acte-4 .montage-script span { transform: scaleX(1); }

.montage-soustitre {
  position: absolute; inset: auto 12px 42px; text-align: center;
  font: 700 13px/1.25 var(--sans); letter-spacing: -.01em;
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
  opacity: 0; transition: opacity .45s;
}
.acte-4 .montage-soustitre { opacity: 1; }
.montage-soustitre b { color: var(--eclat); }
.montage-etiquette {
  display: block; margin-top: 14px; text-align: center;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0; transition: opacity .45s;
}
.acte-4 .montage-etiquette { opacity: 1; }

@media (max-width: 900px) {
  .sequence { height: 300vh; }
  .sequence-cadre { grid-template-columns: 1fr; gap: 22px; }
  .sequence-texte h2 { font-size: clamp(28px, 7vw, 38px); margin-bottom: 16px; }
  .sequence-liste li { padding: 8px 10px; gap: 10px; grid-template-columns: 26px 1fr; }
  .sequence-liste b { font-size: 14px; }
  .sequence-plateau { height: min(38vh, 320px); }
  .source { width: 108px; }
  .montage { width: 128px; }
  /* « Accroche retenue » passe sur deux lignes dans une carte de 108 px et
     l'écrase : le premier mot disparaît, le sens reste. */
  .source-retenue { inset: auto 6px 30px; font-size: 8.5px; letter-spacing: .04em; }
  .source-retenue i { display: none; }
}

/* Sans mouvement : on montre l'aboutissement, qui est le propos, et les cinq
   étapes se lisent comme une liste ordinaire. */
@media (prefers-reduced-motion: reduce) {
  .sequence { height: auto; }
  .sequence-piste { position: static; height: auto; padding: 80px 0; }
  .sequence-liste li { opacity: 1; }
  .sequence-liste li div span { display: block; }
}

/* ===================================================================
   Les respirations
   ===================================================================
   Le défaut de la page tenait moins à ses couleurs qu'à son rythme : dix
   sections d'affilée bâties pareil — une colonne centrée de cartes arrondies
   sur fond noir. Chacune était juste ; ensemble elles donnaient l'impression
   d'un gabarit rempli, parce que rien n'y reprenait son souffle.

   On ouvre donc deux fois le cadre en grand, aux deux endroits où la page
   change de propos : après la démonstration, et avant le dernier appel. Les
   images sont celles du moteur (outils/engendrer_vues.py) — le site s'illustre
   de ce qu'il fabrique, ce qui vaut mieux qu'une banque d'images.

   Elles portent `--bandeau-h` : la même règle sert aux deux, seule la hauteur
   et l'image changent. */
.bande, .appel {
  --bandeau-h: 300px;
  position: relative; isolation: isolate;
  background-image: var(--bandeau);
  background-size: cover; background-position: center 62%;
}
.bande::before, .appel::before {
  /* `height: auto` n'est pas décoratif : la lueur de section, plus haut,
     donne à `.appel::before` une hauteur de 60 %. Sans l'annuler, le voile
     s'arrêtait aux trois cinquièmes du bandeau et l'image reparaissait crue
     en dessous — une ligne d'horizon en travers de la page, que l'on prenait
     pour un défaut de l'image. */
  content: ""; position: absolute; inset: 0; height: auto; z-index: -1;
  /* Deux voiles superposés. Le premier noie l'image pour que le texte passe
     partout ; le second la rattrape par les bords, sans quoi la coupe d'avec
     le fond de la page se verrait comme un timbre collé. */
  background:
    /* Un assombrissement au centre, sous le texte. L'astre de l'image y tombe
       pile : sans lui, la phrase se lit sur un aplat clair. */
    radial-gradient(58% 74% at 50% 50%,
                    rgba(7, 7, 12, var(--voile-centre)), transparent 72%),
    /* Le haut et le bas éteignent l'image avant les bords de la section.
       Arrêtés trop tard, la coupe se voyait comme un timbre collé — c'est
       exactement ce que ces voiles doivent éviter. */
    linear-gradient(180deg, var(--ink) 0%,
                    rgba(7, 7, 12, var(--voile-haut)) 18%,
                    rgba(7, 7, 12, var(--voile-milieu)) 52%,
                    rgba(7, 7, 12, var(--voile-bas)) 82%,
                    var(--ink) 100%),
    linear-gradient(90deg, var(--ink), transparent 18%,
                    transparent 82%, var(--ink));
}
/* Le couchant est une image claire : il lui faut un voile plus dense que la
   nuit, déjà presque noire, que les mêmes valeurs effaçaient complètement —
   il n'en restait qu'un rectangle sombre où l'on devinait une lune. Les deux
   bandeaux partagent leur construction, jamais leurs valeurs. */
.bande {
  --bandeau: url('/static/vues/bandeau-couchant.jpg');
  --voile-centre: .30; --voile-haut: .40;
  --voile-milieu: .44; --voile-bas: .66;
  border-block: 1px solid rgb(var(--laiton-rvb) / .22);
  min-height: var(--bandeau-h);
  /* Cadré par le bas : le soleil et la ligne de mer y sont, et la citation
     occupe le ciel au-dessus, quelle que soit la découpe. */
  background-position: center bottom;
  display: grid; place-items: center;
  padding: 64px 36px;
}
.bande p {
  max-width: 22ch;
  font-size: clamp(25px, 4.2vw, 42px);
  line-height: 1.22; color: var(--text);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(3, 3, 7, .9);
}

.appel {
  --bandeau: url('/static/vues/bandeau-nuit.jpg');
  --voile-centre: .26; --voile-haut: .22;
  --voile-milieu: .26; --voile-bas: .52;
  --bandeau-h: 340px;
  min-height: var(--bandeau-h);
  /* Cadré par le haut : la lune est haute dans l'image, et tout autre
     cadrage lui coupe le halo au bord supérieur. */
  background-position: center top;
  max-width: none; width: 100%;
  border-top: 1px solid rgb(var(--laiton-rvb) / .22);
  /* Le texte garde sa largeur de lecture, mais l'image va d'un bord à
     l'autre : les marges deviennent du remplissage plutôt qu'une limite. */
  padding-inline: max(36px, calc((100% - 780px) / 2));
}
/* La lueur de section ferait double emploi par-dessus une image. */
.appel::after { content: none; }

/* --- L'ouverture d'une section ---------------------------------------
   Un filet de laiton avant le sur-titre. Trois fois rien, mais l'œil
   reconnaît un début de chapitre au lieu d'un paragraphe de plus, et les
   sections cessent de se ressembler par le haut. */
.section > .eyebrow, .sequence-texte > .eyebrow {
  display: flex; align-items: center; gap: 12px;
}
.section > .eyebrow::before, .sequence-texte > .eyebrow::before {
  content: ""; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--laiton), rgb(var(--laiton-rvb) / .15));
}

/* Les titres de section respirent davantage, et la phrase d'accroche se
   rapproche du titre : ensemble ils forment un bloc, au lieu de deux. */
.section h2 { margin-bottom: 14px; }
.section-accroche { font-size: 17.5px; max-width: 56ch; margin-bottom: 48px; }

@media (max-width: 760px) {
  .bande { --bandeau-h: 240px; padding: 52px 26px; }
  .appel { --bandeau-h: 280px; }
  .bande p { max-width: 16ch; }
}

/* ===================================================================
   Le pied de page et les chiffres
   ===================================================================
   Deux blocs qu'on traite d'ordinaire comme du rangement. Ce sont pourtant
   les deux derniers écrans d'une visite qui va jusqu'au bout : les bâcler,
   c'est finir sur une note plate. */

/* Les chiffres deviennent des colonnes séparées par un filet, plutôt que
   trois blocs flottant dans le vide. Le filet est le même laiton que les
   sur-titres : la page a un seul métal. */
.chiffres-grille > div { position: relative; padding-inline: 20px; }
.chiffres-grille > div + div::before {
  content: ""; position: absolute; inset: 12% auto 12% 0;
  width: 1px;
  background: linear-gradient(180deg, transparent,
              rgb(var(--laiton-rvb) / .30), transparent);
}
@media (max-width: 640px) {
  /* En une seule colonne, le filet vertical n'a plus rien à séparer : il
     devient horizontal, sinon il traîne sur le côté sans raison. */
  .chiffres-grille > div + div::before {
    inset: 0 12% auto; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent,
                rgb(var(--laiton-rvb) / .30), transparent);
  }
}

.site-footer {
  border-top: 1px solid rgb(var(--laiton-rvb) / .24);
  background:
    linear-gradient(180deg, rgb(var(--flamme-rvb) / .035), transparent 40%),
    rgba(3, 3, 7, .55);
}
.footer-marque .brand { color: var(--text); }
.footer-marque .brand .flamme { filter: drop-shadow(0 0 12px rgb(var(--flamme-rvb) / .55)); }
.site-footer a { transition: color .2s, translate .2s; }
.site-footer a:not(.brand):hover { color: var(--flamme-claire); translate: 2px 0; }

/* ===================================================================
   Le premier écran
   ===================================================================
   Le téléphone était posé de face, à plat : une capture d'écran dans un
   cadre. Trois choses en font un objet — une légère rotation dans l'espace,
   une lumière rasante qui traverse la vitre, et un reflet dessous, qui lui
   donne un sol. Rien de tout cela n'est décoratif : sans sol ni ombre
   portée, un objet flotte, et l'œil le lit comme un dessin.

   Réservé aux grands écrans. En une seule colonne, le téléphone est au
   milieu du cadre et regardé de face : l'incliner le ferait fuir sur le
   côté, et il n'y a plus de place pour le reflet. */
@media (min-width: 901px) {
  .scene { perspective: 1600px; perspective-origin: 60% 45%; }
  .telephone {
    transform-style: preserve-3d;
    rotate: y -9deg;
    transition: rotate .8s cubic-bezier(.16, 1, .3, 1);
  }
  /* Il se redresse quand on vient le regarder : la page répond, sans que
     rien ne bouge tant qu'on ne s'en approche pas. */
  .scene:hover .telephone { rotate: y 0deg; }

  /* Le sol. Une copie retournée du cadre, effacée vers le bas — pas un vrai
     reflet (il faudrait rendre la vidéo deux fois), mais la trace lumineuse
     qu'il laisserait, ce qui suffit à poser l'objet. */
  .scene::after {
    content: ""; position: absolute; z-index: -1;
    left: 50%; translate: -50% 0; bottom: -56px;
    width: 236px; height: 92px;
    background: radial-gradient(50% 100% at 50% 0%,
                rgb(var(--flamme-claire-rvb) / .30), rgb(var(--flamme-rvb) / .07) 46%,
                transparent 76%);
    filter: blur(12px);
  }

  /* La lumière rasante sur la vitre : une bande claire très oblique, presque
     invisible, qui glisse quand on survole. C'est ce qui dit « verre ». */
  .telephone-reflet {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .14), transparent 40%),
      linear-gradient(76deg, transparent 36%, rgb(var(--os-rvb) / .10) 46%,
                      transparent 56%);
    background-size: 100% 100%, 300% 100%;
    background-position: 0 0, 78% 0;
    transition: background-position .9s cubic-bezier(.16, 1, .3, 1);
  }
  .scene:hover .telephone-reflet { background-position: 0 0, 18% 0; }

  /* Le filet de laiton devant le sur-titre, comme dans les sections. */
  .hero-texte > .eyebrow { display: flex; align-items: center; gap: 12px; }
  .hero-texte > .eyebrow::before {
    content: ""; width: 26px; height: 1px; flex: none;
    background: linear-gradient(90deg, var(--laiton), rgb(var(--laiton-rvb) / .15));
  }
}

@media (prefers-reduced-motion: reduce) {
  .telephone { rotate: none; animation: none; }
  .jeton { animation: none; }
}

/* Les listes de questions n'ont pas de carte pour les asseoir : on pose donc
   le voile sous la section elle-même, sinon le champ de braises se lit
   derrière chaque ligne. */
.faq { position: relative; isolation: isolate; }
.faq::before {
  content: ""; position: absolute; inset: -20px -24px; z-index: -1;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(7, 7, 12, .55), rgba(7, 7, 12, .80) 30%,
                    rgba(7, 7, 12, .86) 100%);
}

/* ===================================================================
   La porte
   ===================================================================
   Le site publié en pages statiques peut demander un code. Il n'y a pas de
   serveur pour le vérifier : c'est le navigateur qui le fait, et la porte
   masque le contenu au lieu de l'enfermer. Le détail est écrit dans
   `templates/site/_porte.html`.

   Le masquage est porté par `<html>`, pas par un script : la classe est
   posée à la publication, dans le fichier lui-même. Un navigateur sans
   JavaScript garde donc la page fermée, au lieu de l'ouvrir en grand. */
html.verrouille body > *:not(.porte) { display: none !important; }
html.verrouille, html.verrouille body { overflow: hidden; height: 100%; }
/* Et l'inverse, qui compte tout autant : porte ouverte, la porte s'efface.
   Sans cette ligne, elle restait en place — `position: fixed`, plein écran —
   chez tout visiteur déjà entré. Le contenu s'affichait bien derrière, et
   restait invisible : le site paraissait verrouillé pour toujours dès la
   deuxième visite. Le script la retire aussi, mais il arrive après le premier
   affichage, et la feuille de style non. */
html:not(.verrouille) .porte { display: none !important; }

.porte {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 100% at 50% 0%,
                    rgb(var(--flamme-rvb) / .14), transparent 62%),
    var(--ink);
}
.porte-carte {
  width: min(380px, 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 40px 32px 34px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgb(var(--os-rvb) / .055), rgb(var(--os-rvb) / .012)),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  box-shadow: var(--shadow), var(--lueur);
}
.porte-marque .flamme { filter: drop-shadow(0 0 14px rgb(var(--flamme-rvb) / .6)); }
.porte h1 {
  font-family: var(--serif); font-weight: 400; font-size: 34px;
  letter-spacing: -.01em; margin: 14px 0 0;
}
.porte-mot {
  font-size: 14.5px; color: var(--text-soft); line-height: 1.6;
  margin: 10px 0 26px; max-width: 26ch;
}
.porte-champ { display: block; width: 100%; }
.porte-champ input {
  width: 100%; padding: 15px 18px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .34); color: var(--text);
  font: 500 17px/1.4 var(--sans);
  /* Au centre, et espacé : un code se relit caractère par caractère. */
  text-align: center; letter-spacing: .10em;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.porte-champ input::placeholder { letter-spacing: 0; color: var(--text-faint); }
.porte-champ input:focus {
  outline: none; border-color: rgb(var(--flamme-rvb) / .55);
  background: rgba(0, 0, 0, .46);
  box-shadow: 0 0 0 4px rgb(var(--flamme-rvb) / .12);
}
.porte .button { width: 100%; margin-top: 14px; }
.porte-avis {
  min-height: 1.3em;                 /* la carte ne saute pas à l'apparition */
  margin: 14px 0 0; font-size: 13.5px; color: var(--alert);
}
.porte-note {
  margin: 18px 0 0; font-size: 12.5px; color: var(--text-faint);
  line-height: 1.55; max-width: 30ch;
}

/* Le refus se voit : la carte hésite, une fois. */
.porte.refuse .porte-carte { animation: porte-refus .42s ease; }
.porte.refuse .porte-champ input { border-color: rgb(255 107 107 / .55); }
@keyframes porte-refus {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  45%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .porte.refuse .porte-carte { animation: none; }
}