/* ═══════════════════════════════════════════════════════════════════════════
   ACCUEIL — la descente dans la nuit.                   (2ᵉ refonte, 31/07)
   Dépend de nuit.css (jetons, plaques, mouvement, typographie, nav, pied).
   Ici : ce qui n'existe QUE sur la page d'accueil.

   La page est une suite d'AFFICHES, plus une suite de sections. Une idée par
   écran, pleine largeur, et la composition change à chaque fois — la version
   précédente répétait la même grille deux colonnes texte-gauche /
   matière-droite, ce qui donne une page efficace et complètement muette.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── I · LE HÉROS ─────────────────────────────────────────────────────────────
   Trois éléments. Pas quatre.

   L'ancien héros en portait six : surtitre, titre, lede, deux boutons, une
   note avec un lien, et une invite à descendre. Chacun se défendait tout seul
   et l'ensemble ne tenait pas — le premium, à ce niveau, c'est ce qu'on
   retire. Il reste le titre (immense), les deux boutiques, et une ligne de
   pied qui porte les mentions et l'invite à descendre.

   Il n'y a plus de photo ici : elle passe juste après, en bande. Un titre
   d'affiche sur papier blanc n'a pas besoin d'être défendu par une image, et
   la photo gagne à devenir le PASSAGE du jour à la nuit plutôt qu'un décor.
   ────────────────────────────────────────────────────────────────────────── */
/* `100svh - var(--nav-h)` et non `100svh`. La barre est `sticky`, donc elle
   reste DANS LE FLUX et pousse le héros de sa propre hauteur : un héros à
   100svh se terminait 82 px sous le pli, et c'est précisément l'invite à
   descendre qui passait dessous — l'élément dont le seul travail est d'être
   vu sans scroller. Mesuré sur la page rendue, pas supposé. */
.hero {
  --fond:var(--p-blanc);
  position:relative; background:var(--fond);
  min-height:calc(100svh - var(--nav-h));
  display:grid; grid-template-rows:1fr auto; align-items:center;
  padding-block:clamp(88px,11vh,132px) 30px;
  overflow:clip;
}
.hero-dedans { position:relative; z-index:1; text-align:center; display:grid; justify-items:center }

/* `max-width` est ABSENT, volontairement. C'était le bridage qui tenait le
   titre à 45 % de la largeur d'écran : `max-width:15ch` sur un texte centré,
   plus un plafond de taille trop bas. Ici la largeur est celle de la coque
   large, et la taille se pilote au vw — le titre garde donc la même
   proportion d'écran partout, ~78 %, la mesure relevée sur tinder.com. */
.hero .affiche { margin-bottom:clamp(34px,4.6vh,54px) }
.hero .affiche .it { color:var(--lune) }

/* La ligne de pied du héros : les mentions obligatoires ET l'invite à
   descendre, dans un seul objet. Deux blocs séparés en bas d'une affiche se
   disputent la même place et la font paraître encombrée. */
/* `padding-inline` OBLIGATOIRE : ce bloc est un enfant DIRECT de `.hero`, il ne
   passe par aucune coque et n'hérite donc d'aucune gouttière. Sur téléphone le
   texte partait à x = 0 et sortait des deux côtés — mesuré à 412 px de large,
   bord gauche et bord droit à 0. La coque n'est pas utilisable ici : ce bloc
   doit rester la seconde rangée de la grille du héros pour être plaqué en bas. */
.hero-pied {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding-inline:var(--gout);
  font-size:var(--t-micro); color:var(--texte-3);
  text-align:center; text-wrap:balance;
}
.hero-pied .mentions { letter-spacing:.02em }
.hero-pied .mentions a { color:var(--texte-2); text-decoration:underline; text-underline-offset:3px }
.hero-pied .mentions a:hover { color:var(--texte) }

/* Un trait qui se remplit, pas une flèche qui rebondit : à cette échelle un
   rebond ferait bon marché. */
.hero-pied .trait { width:1px; height:clamp(34px,6vh,56px); background:var(--hair-2); overflow:hidden }
.hero-pied .trait::after {
  content:''; display:block; width:100%; height:100%;
  background:var(--lune); transform:translateY(-100%);
  animation:couler 2.8s var(--entree-sortie) infinite;
}
@keyframes couler {
  0%   { transform:translateY(-100%) }
  55%  { transform:translateY(0) }
  100% { transform:translateY(100%) }
}
@media (prefers-reduced-motion: reduce) { .hero-pied .trait::after { animation:none; transform:none; opacity:.4 } }

/* Écrans BAS. La version précédente rétrécissait le titre dès 840 px de haut —
   c'est-à-dire sur le portable 13 pouces le plus courant (1280×720), donc sur
   une bonne part du trafic bureau. Mesuré sur la page rendue : à 1280×720 le
   héros complet occupe 493 px sur 720 disponibles. Il n'y avait rien à
   sauver, et ce réglage à lui seul ramenait le titre de 78 % à 50 % de la
   largeur d'écran.

   On ne touche donc plus qu'à l'AIR, et seulement quand la hauteur devient
   vraiment contrainte. Le titre, lui, ne rétrécit jamais pour faire de la
   place — c'est lui, la page. */
@media (max-height: 640px) {
  .hero { padding-block:clamp(84px,11vh,110px) 20px }
  .hero .affiche { margin-bottom:1.5rem }
  .hero-pied { gap:10px }
  .hero-pied .trait { display:none }
}

/* ── II · LA BANDE CRÉPUSCULE ────────────────────────────────────────────────
   Le passage du jour à la nuit, et la seule transition FONDUE du site — toutes
   les autres frontières sont des arêtes nettes. Celle-ci a le droit de fondre
   parce qu'elle raconte quelque chose : la photo de lune n'est plus un décor
   posé derrière un titre, elle EST le crépuscule. Elle entre dans du papier
   blanc et sort dans l'encre la plus profonde.

   C'est aussi ce qui permet au héros d'être blanc : une photo nocturne en
   plein cadre sous un titre en encre n'aurait jamais tenu.
   ────────────────────────────────────────────────────────────────────────── */
.crepuscule {
  position:relative; overflow:clip;
  height:clamp(360px, 66svh, 780px);
  background:var(--e-fond);
}
.crepuscule picture, .crepuscule img { position:absolute; inset:0; width:100%; height:100% }
.crepuscule img { object-fit:cover; object-position:52% 32% }

/* Le voile fait les DEUX raccords d'un coup : blanc en haut, encre en bas, et
   la photo pleine au milieu. Deux dégradés séparés laisseraient une couture
   visible à leur jonction. */
.crepuscule::after {
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to bottom,
    var(--p-blanc) 0%,
    color-mix(in srgb, var(--p-blanc) 52%, transparent) 13%,
    color-mix(in srgb, var(--p-blanc) 8%, transparent) 30%,
    transparent 46%,
    color-mix(in srgb, var(--e-fond) 42%, transparent) 68%,
    color-mix(in srgb, var(--e-fond) 88%, transparent) 88%,
    var(--e-fond) 100%);
}

/* Parallaxe : la photo monte moins vite que la page. Pilotée par `scroll()`
   sur le compositeur — aucun écouteur, aucun recalcul de mise en page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .crepuscule img {
      animation:deriver linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes deriver {
  from { transform:translateY(-7%) scale(1.14) }
  to   { transform:translateY(7%) scale(1.14) }
}

/* ── III · LE MANIFESTE ──────────────────────────────────────────────────────
   Une phrase, à la plus grande taille du site, sur l'encre. C'est le seul
   endroit où l'on ne vend rien : elle existe pour que la promesse soit dite
   une fois en toutes lettres, et pour que la page respire après le passage.
   ────────────────────────────────────────────────────────────────────────── */
.manifeste { text-align:center }
.manifeste .affiche .it { color:var(--lune) }
.manifeste .apres {
  margin:clamp(34px,4.5vw,54px) auto 0; max-width:50ch;
  font-size:var(--t-lede); font-weight:300; color:var(--texte-2);
}

/* ── IV · LE MYSTÈRE ─────────────────────────────────────────────────────────
   Dans l'app, le flou EST la jauge : l'image se dévoile à mesure que la paire
   se parle. La page le REJOUE — mais en PLEINE PAGE, et non plus dans une
   vignette de 46 % de large posée à côté d'un paragraphe. Le visage qui émerge
   pendant qu'on descend est le seul moment de la page qui explique le produit
   sans une phrase ; l'enfermer dans une colonne revenait à s'en priver.

   Comment : deux images superposées, la nette dessous et la floutée dessus
   (floutée au build par sharp, jamais par `filter:blur()`). On anime
   l'OPACITÉ de celle du dessus. Animer un `filter:blur` sur une image de
   1600 px force le navigateur à re-flouter à chaque image — c'est ce genre de
   détail qui fait ramer une page sur un téléphone. L'opacité est gratuite.
   ────────────────────────────────────────────────────────────────────────── */
.mystere { position:relative; overflow:clip }
.mystere .decor { position:absolute; inset:0; z-index:0 }
.mystere .decor picture, .mystere .decor img { position:absolute; inset:0; width:100%; height:100% }
.mystere .decor img { object-fit:cover; object-position:58% 30% }
.mystere .decor .flou { z-index:2 }

/* Le voile protège la colonne de texte, pas toute l'image : à gauche il est
   presque opaque, à droite il laisse le visage respirer. Un voile uniforme
   assez fort pour le texte éteindrait la photo. */
.mystere .decor::after {
  content:''; position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--fond) 94%, transparent) 0%,
      color-mix(in srgb, var(--fond) 78%, transparent) 42%,
      color-mix(in srgb, var(--fond) 34%, transparent) 100%),
    linear-gradient(to bottom,
      var(--fond) 0%, transparent 22%, transparent 74%, var(--fond) 100%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mystere .decor .flou {
      animation:se-lever linear both;
      animation-timeline:view();
      animation-range:entry 30% cover 78%;
    }
  }
}
@keyframes se-lever { from { opacity:1 } to { opacity:0 } }

.mystere .surcouche { position:relative; z-index:4; max-width:30ch }
.mystere h2 { margin-bottom:1.5rem }
.mystere .corps { margin-top:1.3rem }
.mystere .chap-actions { margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:16px; align-items:center }

/* Les crans : la jauge de révélation, telle quelle dans l'app. Ils s'allument
   au même rythme que le flou recule — c'est la même information dite deux
   fois, une fois en image et une fois en mesure. */
.cran { display:flex; gap:7px; margin-top:2.4rem; max-width:260px }
.cran i { flex:1; height:3px; border-radius:2px; background:var(--lune); opacity:.16 }
.cran-dit { margin-top:.9rem; font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--texte-3) }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cran i { animation:allumer linear both; animation-timeline:view() }
    .cran i:nth-child(1) { animation-range:entry 34% cover 46% }
    .cran i:nth-child(2) { animation-range:entry 42% cover 55% }
    .cran i:nth-child(3) { animation-range:entry 50% cover 64% }
    .cran i:nth-child(4) { animation-range:entry 58% cover 74% }
  }
}
@keyframes allumer { from { opacity:.16 } to { opacity:1 } }

@media (max-width: 820px) {
  .mystere .surcouche { max-width:none }
  .mystere .decor::after {
    background:linear-gradient(to bottom,
      var(--fond) 0%,
      color-mix(in srgb, var(--fond) 62%, transparent) 26%,
      color-mix(in srgb, var(--fond) 88%, transparent) 62%,
      var(--fond) 100%);
  }
}

/* ── V · L'AVENTURE ──────────────────────────────────────────────────────────
   L'encre la plus profonde du site : c'est le cœur de la nuit, et le seul
   endroit où la page montre une mécanique de jeu. Le nœud est CENTRÉ, seul,
   sur la photo de porte — un objet posé au milieu de l'écran se lit comme une
   pièce à conviction ; le même objet dans une colonne de droite se lit comme
   une illustration.
   ────────────────────────────────────────────────────────────────────────── */
.aventure { position:relative; overflow:clip; text-align:center }
.aventure .decor { position:absolute; inset:0; z-index:0 }
.aventure .decor picture { position:absolute; inset:0 }
.aventure .decor img { width:100%; height:100%; object-fit:cover; object-position:50% 38%; opacity:.5 }
.aventure .decor::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(96% 72% at 50% 44%,
    color-mix(in srgb, var(--fond) 24%, transparent) 0%,
    color-mix(in srgb, var(--fond) 74%, transparent) 56%,
    var(--fond) 100%);
}
.aventure .surcouche { position:relative; z-index:1 }
.aventure h2 { max-width:18ch; margin:0 auto 1.5rem }
.aventure .lede { margin-inline:auto; max-width:52ch }

/* — Le nœud —————————————————————————————————————————————————————————————
   Une reproduction fidèle : la question, deux issues, et la mention qui fait
   tout le concept — « accord requis ». Ce n'est pas une capture d'écran, c'est
   du HTML : net à tout zoom, quelques centaines d'octets, et il hérite des
   jetons comme le reste.
   ————————————————————————————————————————————————————————————————————— */
.noeud {
  position:relative; width:min(520px,100%); margin:clamp(40px,6vh,68px) auto 0;
  border-radius:var(--r-xl); overflow:hidden; text-align:left;
  background:color-mix(in srgb, var(--texte) 6%, var(--fond));
  border:1px solid var(--hair-2);
  box-shadow:var(--ombre-4);
}
.noeud .dedans { padding:clamp(24px,3.4vw,38px) }
.noeud .etiquette {
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--champagne);
  padding:.42em .9em; border:1px solid color-mix(in srgb, var(--champagne) 30%, transparent); border-radius:999px;
}
.noeud .question {
  font-family:var(--display); font-size:clamp(1.28rem,1rem + 1.5vw,1.95rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.22;
  margin:1.5rem 0 1.7rem; font-variation-settings:'opsz' 60;
}
.noeud .issue {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:1rem 1.15rem; border-radius:var(--r-m);
  border:1px solid var(--hair); background:color-mix(in srgb, var(--texte) 4%, transparent);
  font-size:var(--t-petit);
}
.noeud .issue + .issue { margin-top:10px }
.noeud .issue .qui { font-size:var(--t-micro); color:var(--texte-3); white-space:nowrap }
.noeud .issue.choisie {
  border-color:color-mix(in srgb, var(--champagne) 44%, transparent);
  background:color-mix(in srgb, var(--champagne) 11%, transparent);
  color:var(--champagne);
}
.noeud .issue.choisie .qui { color:var(--champagne); opacity:.8 }
.noeud .accord {
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--hair);
  font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-3);
  display:flex; align-items:center; gap:.6em;
}
.noeud .accord::before {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--champagne);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--champagne) 18%, transparent);
}

/* ── VI · LE GESTE (deck jouable) ────────────────────────────────────────────
   Le morceau de l'ancien site qui méritait de survivre : on peut swiper AVANT
   d'installer. Il revient au JOUR — c'est le moment où la page remonte, et un
   aperçu jouable se présente en pleine lumière, pas au fond de la nuit.
   ────────────────────────────────────────────────────────────────────────── */
.geste { display:grid; grid-template-columns:1fr auto; gap:clamp(38px,6vw,90px); align-items:center }
@media (max-width: 900px) { .geste { grid-template-columns:1fr; justify-items:center; text-align:center }
  .geste .chap-texte .corps, .geste .chap-texte .lede { margin-inline:auto } }
.geste .chap-texte h2 { margin-bottom:1.4rem }
.geste .chap-texte .corps { margin-top:1.2rem }

/* Le châssis. Bordure claire + reflet en haut à gauche : un téléphone sans
   reflet est un rectangle noir troué. */
.tel {
  position:relative; width:min(330px, 82vw); aspect-ratio:9/19;
  border-radius:44px; padding:11px;
  background:linear-gradient(150deg, #423A50, #17131F 42%, #0D0A13);
  box-shadow:var(--ombre-4), inset 0 1px 0 rgba(246,243,236,.16);
}
.tel .ecran {
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:34px; background:var(--e-1);
  display:flex; flex-direction:column;
}
.tel .encoche {
  position:absolute; top:9px; left:50%; transform:translateX(-50%); z-index:20;
  width:86px; height:22px; border-radius:999px; background:#08060C;
}

/* La rangée de décision est RÉSERVÉE, pas superposée. Elle était en absolu à
   `bottom:18px` par-dessus une pile qui occupait tout le deck : mesuré sur la
   page rendue, le nom et la citation passaient sous les boutons sur 64 px —
   c'est-à-dire entièrement. Les 78 px de rembourrage bas sortent la pile de
   sous la rangée, et `inset` de la tuile reprend la même valeur. */
.deck {
  position:relative; flex:1; margin:44px 12px 14px; padding-bottom:78px;
  touch-action:pan-y;
}
.deck:focus-visible { outline-offset:6px }

.tuile {
  position:absolute; inset:0 0 78px; border-radius:22px; overflow:hidden;
  background:#201B2C; box-shadow:var(--ombre-3);
  will-change:transform, opacity;
}
.tuile.repos { transition:transform .42s var(--sortie), opacity .42s var(--sortie) }
.tuile.envol { transition:transform .42s var(--entree-sortie), opacity .42s linear }
/* `object-position` haut, et non centré. La carte est un portrait très
   allongé (0,53) alors que les photos sources sont en 0,75 : `cover` cale donc
   la hauteur et rogne les côtés. Centré, le cadre tombait sur le torse et
   coupait le visage — sur une carte de rencontre, c'est le seul endroit où il
   ne faut pas se tromper. 38 % place les yeux au tiers haut, la règle de
   cadrage du portrait.

   ⚠ Ce réglage RATTRAPE un mauvais rapport de forme, il ne le corrige pas :
   30 % de la largeur de chaque photo reste perdue. La vraie correction est de
   fournir des images cadrées pour ce format. */
.tuile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38% }
.tuile .ombrage {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,16,.94) 4%, rgba(10,8,16,.34) 42%, rgba(10,8,16,.12) 100%);
}
.tuile .infos { position:absolute; left:16px; right:16px; bottom:16px }
.tuile .nom {
  font-family:var(--display); font-size:1.28rem; font-weight:600;
  letter-spacing:-.018em; font-variation-settings:'opsz' 40;
}
.tuile .mot { margin-top:.28rem; font-size:.8rem; color:var(--texte-2); font-style:italic }

/* Les tampons du geste. Ils apparaissent proportionnellement à la course du
   doigt — exactement ce que fait l'app, et ce qui rend l'aperçu crédible
   plutôt que décoratif. */
.tampon {
  position:absolute; top:20px; z-index:6; opacity:0;
  padding:.32em .7em; border:2.5px solid currentColor; border-radius:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.1em;
}
.tampon.aime { left:16px; color:var(--love); transform:rotate(-13deg) }
.tampon.passe { right:16px; color:var(--texte-2); transform:rotate(13deg) }

.rangee {
  position:absolute; z-index:10; left:0; right:0; bottom:2px;
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.rb {
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(20,16,28,.72); border:1px solid var(--hair-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .2s var(--sortie), border-color .2s, background-color .2s;
}
.rb:hover { transform:scale(1.07); border-color:var(--texte-4) }
.rb:active { transform:scale(.94) }
.rb.aimer { width:62px; height:62px; background:var(--love); border-color:transparent }
.rb.aimer:hover { background:#e2837a }
.rb.bat { animation:battre .44s var(--sortie) }
@keyframes battre { 0%,100% { transform:scale(1) } 38% { transform:scale(1.2) } }

/* L'écran de Mystère : ce qui arrive au bout de la pile. */
.ouverture {
  position:absolute; inset:0; z-index:15;
  display:grid; place-content:center; text-align:center; gap:.9rem;
  padding:30px 24px; border-radius:22px;
  background:linear-gradient(to bottom, rgba(11,18,32,.9), rgba(10,8,16,.98));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:scale(1.03);
  transition:opacity .5s var(--sortie), transform .5s var(--sortie), visibility .5s;
}
.ouverture.on { opacity:1; visibility:visible; transform:none }
.ouverture .t { font-family:var(--display); font-size:1.4rem; font-weight:600; letter-spacing:-.02em;
  line-height:1.16; color:var(--lune); font-variation-settings:'opsz' 40 }
.ouverture .s { font-size:.82rem; color:var(--texte-2); line-height:1.55 }
.ouverture button {
  justify-self:center; margin-top:.4rem; padding:.6em 1.3em; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--hair-2); color:var(--texte);
  font-size:.78rem; font-weight:600; transition:border-color .2s, background-color .2s;
}
.ouverture button:hover { border-color:var(--texte-4); background:rgba(246,243,236,.06) }

/* Mention honnête, donc LISIBLE : elle dit que les cartes ne sont pas des
   membres. La mettre en gris de décor reviendrait à l'écrire pour ne pas être
   lue. */
.geste-note { margin-top:1.5rem; font-size:var(--t-micro); color:var(--texte-3); text-align:center }

/* ── VII · SÉCURITÉ ──────────────────────────────────────────────────────── */
.registre { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(38px,5vw,58px) }
@media (max-width: 880px) { .registre { grid-template-columns:1fr } }
.registre .carte::before {
  content:''; position:absolute; top:0; left:clamp(22px,3vw,32px); width:26px; height:1px;
  background:var(--lune);
}
.registre a { color:var(--texte); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--texte-4) }
.registre a:hover { text-decoration-color:var(--accent) }

/* ── VIII · CE QUI N'EST PAS À VENDRE ────────────────────────────────────────
   Le seul argument qu'aucun concurrent ne peut écrire. Il a droit à sa plaque.
   ────────────────────────────────────────────────────────────────────────── */
.serment { text-align:center }
.serment .geant { max-width:20ch; margin-inline:auto }
.serment .geant .it { color:var(--lune) }
.serment ul {
  margin-top:clamp(44px,6vw,72px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px);
  text-align:left;
}
@media (max-width: 820px) { .serment ul { grid-template-columns:1fr } .serment { text-align:left } }
.serment li { padding-top:1.15rem; border-top:1px solid var(--hair) }
.serment li b {
  display:block; font-family:var(--display); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.015em; margin-bottom:.5rem; font-variation-settings:'opsz' 40;
}
.serment li span { font-size:var(--t-petit); color:var(--texte-2); line-height:1.6 }

/* ── IX · TARIFS (aperçu) ────────────────────────────────────────────────────
   La page d'accueil ne VEND pas : elle situe. Trois cartes, un prix d'entrée
   chacune, et un lien vers la page qui détaille. Empiler ici le comparatif
   complet ferait de l'accueil une page de tarifs.
   ────────────────────────────────────────────────────────────────────────── */
.apercu-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); margin-top:clamp(36px,5vw,54px) }
@media (max-width: 820px) { .apercu-plans { grid-template-columns:1fr } }
.plan-mini { display:flex; flex-direction:column; gap:.55rem }
.plan-mini .nom {
  font-family:var(--display); font-size:1.35rem; font-weight:600; letter-spacing:-.018em;
  font-variation-settings:'opsz' 40;
}
.plan-mini.or .nom { color:var(--or) }
.plan-mini .promesse { font-size:var(--t-petit); color:var(--texte-2) }
.plan-mini .prix { margin-top:.5rem; font-size:var(--t-micro); color:var(--texte-3); letter-spacing:.02em }
.plan-mini .prix b { display:block; font-family:var(--display); font-size:1.6rem; font-weight:600;
  color:var(--texte); letter-spacing:-.022em; font-variation-settings:'opsz' 40 }
.apercu-lien { margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:20px; align-items:center }

/* ── X · LE SCEAU DE FIN ─────────────────────────────────────────────────────
   Le nom, en très grand, coupé net par le bas de la page. Un site qui se
   termine sur un plan de site se termine sur un formulaire administratif ;
   celui-ci se termine sur sa marque. Décoratif — le nom accessible est déjà
   lu plus haut dans le même pied, d'où l'`aria-hidden` côté HTML.
   ────────────────────────────────────────────────────────────────────────── */
.pied { overflow:clip }
.sceau-geant {
  margin:clamp(44px,7vh,88px) 0 -.26em;
  font-family:var(--display); font-weight:600;
  font-size:clamp(4.2rem,17.5vw,17rem); line-height:.76;
  letter-spacing:-.052em; text-align:center;
  color:color-mix(in srgb, var(--texte) 11%, transparent);
  font-variation-settings:'opsz' 144;
  user-select:none; -webkit-user-select:none;
}

/* ── L'ENTRÉE DU HÉROS ───────────────────────────────────────────────────────
   Le héros ne peut PAS se dévoiler au scroll : il est déjà entièrement à
   l'écran au chargement, donc une `animation-timeline: view()` s'y trouve déjà
   à 100 % de sa course et ne joue jamais. Il lui faut sa propre entrée, jouée
   une fois, en temps — d'où `animation-timeline:auto`, qui DÉSARME la règle
   pilotée au scroll héritée de nuit.css. Sans cette ligne, la déclaration de
   temporisation serait ignorée et le titre resterait figé.

   Les délais montent par crans de ~130 ms : c'est l'intervalle où l'œil lit
   encore une séquence plutôt qu'un groupe. En dessous ça paraît simultané,
   au-dessus ça paraît lent.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero .lignes .l > span {
    animation:devoiler 1.05s var(--sortie) both;
    animation-timeline:auto;
  }
  .hero .lignes .l:nth-child(1) > span { animation-delay:.08s }
  .hero .lignes .l:nth-child(2) > span { animation-delay:.21s }
  .hero .boutiques { animation:monter .85s var(--sortie) .46s both }
  .hero-pied      { animation:monter .85s var(--sortie) .62s both }
}