/**
 * Roomstill — les deux pages d'accueil (`index.html`, `en.html`). Refonte du 27/09.
 *
 * POURQUOI UN FICHIER À PART. `style.css` est chargé par plus de 860 pages.
 * Tout ce qui suit est propre à l'accueil : le poser là-bas aurait fait payer
 * ces octets à 860 pages, et risqué d'en décaler une à chaque retouche. Ici,
 * tout est rangé sous `body.accueil`.
 *
 * LA DIRECTION, reprise telle quelle de l'app (`app/src/theme.ts`, « table
 * lumineuse ») pour que la vitrine et l'outil ne fassent qu'un :
 *   — LA SCÈNE graphite #18191C : là où vit la photo (en-tête, héros, planche).
 *     On juge une photo sur un entourage sombre, comme dans Lightroom.
 *   — LE PAPIER blanc, chroma nulle : là où l'on lit, compare et paie.
 *   — La TOILE #F1F1EF pour les bandes de lecture secondaires.
 *   — La terre cuite reste l'unique accent : l'action, le prix au rendu.
 *   — Archivo 800, interlettrage serré, pour les titres et les montants.
 *
 * Benchmark avant dessin : BENCHMARK-LANDING.md (Pedra, VSAI, ReimagineHome,
 * Collov, BoxBrownie, relevés le 27/09).
 */

.accueil {
  /* Les tokens de l'app (theme.ts), qui prennent le pas sur ceux du site. */
  --encre: #141517;
  --encre-douce: #393B40;
  --gris: #5A5C62;
  --filet: #E3E3E0;
  --terre: #C2603C;
  --terre-texte: #A64E2D;
  --terre-fonce: #A9502F;
  --terre-vive: #E88A64;
  --toile: #F1F1EF;
  --scene: #18191C;
  --scene-haut: #26282C;
  --scene-filet: rgba(255, 255, 255, 0.12);
  --scene-texte: #F4F4F2;
  --scene-doux: rgba(244, 244, 242, 0.72);

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --ombre-scene: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.45);
  --courbe: cubic-bezier(0.22, 1, 0.36, 1);

  --largeur: 1240px;
  --marge-page: clamp(16px, 5vw, 64px);
}

.accueil h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.accueil .chapo,
.accueil .l-chapo,
.accueil .galerie-legende { text-wrap: pretty; }

/* ── Les boutons de l'accueil ─────────────────────────────────────────────
   L'action principale est en terre sur la scène : c'est la seule chose de
   couleur au-dessus de la ligne de flottaison, donc la seule qu'on voit.
   Blanc sur #C2603C = 3,9:1 : réservé à un corps de 19 px en gras (« texte
   large » WCAG, seuil 3:1). Au survol, la terre fonce à 4,6:1. */
.accueil .bouton { border-radius: var(--r-m); }

.l-cta {
  background: var(--terre);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding: 18px 28px;
  min-height: 60px;
  transition: background-color 0.18s var(--courbe), transform 0.18s var(--courbe);
}
.l-cta:hover { background: var(--terre-fonce); }
.l-cta:active { transform: translateY(1px); }
.l-cta:focus-visible { outline-color: var(--scene-texte); }

.l-bouton-clair {
  background: var(--scene-texte);
  color: var(--encre);
  padding: 10px 18px;
}
.l-bouton-clair:hover { background: var(--terre-vive); }

.accueil .bouton-contour { border-color: var(--encre); color: var(--encre); }
.accueil .bouton-contour:hover { background: var(--encre); color: #fff; }

/* ── En-tête : sur la scène, comme la barre de l'app ─────────────────────── */

.l-tete {
  background: var(--scene);
  color: var(--scene-texte);
  border-bottom: 1px solid var(--scene-filet);
}
.l-tete .barre { max-width: var(--largeur); padding-block: 14px; }
.l-tete .logo { color: var(--scene-texte); }
.l-tete .logo-still { color: var(--terre-vive); }
.l-tete .barre-liens a { color: var(--scene-doux); }
.l-tete .barre-liens a:hover { color: var(--scene-texte); border-bottom-color: var(--scene-texte); }
.l-tete :focus-visible { outline-color: var(--terre-vive); }

/* ── Héros ─────────────────────────────────────────────────────────────── */

.l-hero {
  background: var(--scene);
  color: var(--scene-texte);
  padding: clamp(28px, 4.5vw, 64px) var(--marge-page) clamp(56px, 6vw, 96px);
}

.l-hero-grille {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}

.l-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  letter-spacing: -0.045em;
  line-height: 0.97;
  color: var(--scene-texte);
}

.l-hero .chapo {
  margin: 28px 0 0;
  max-width: 31em;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--scene-doux);
}

.l-hero-action {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.l-hero .micro { color: var(--scene-doux); font-size: 0.88rem; max-width: 34em; line-height: 1.5; }

.l-hero .faits {
  margin-top: 40px;
  padding-top: 22px;
  border-top-color: var(--scene-filet);
  gap: 44px;
}
.l-hero .faits dt { color: var(--scene-texte); font-size: 1.6rem; }
.l-hero .faits dd { color: var(--scene-doux); }

/* La paire du héros : la HAUTEUR fixe la taille (4/5 sur la hauteur utile de
   l'écran), la largeur suit. Posée sur la scène avec l'ombre de l'app. */
.l-hero-preuve { margin: 0; }
.l-hero-preuve .comparateur--hero {
  aspect-ratio: 4 / 5;
  height: clamp(440px, 74vh, 700px);
  width: auto;
  border-radius: var(--r-l);
  background: var(--scene-haut);
  box-shadow: var(--ombre-scene);
}
.l-hero-preuve figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  max-width: calc(clamp(440px, 74vh, 700px) * 0.8);
}
.l-hero-preuve .micro { color: var(--scene-doux); font-size: 0.82rem; }
.l-hero .bascule { color: var(--scene-texte); border-bottom-color: var(--scene-doux); }
.l-hero .bascule[aria-pressed="true"] { color: var(--terre-vive); border-bottom-color: var(--terre-vive); }

/* Étiquettes du comparateur : casse normale, comme dans l'app (plus de
   capitales espacées). */
.accueil .comparateur-etiquette {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: var(--r-s);
  background: rgba(20, 21, 23, 0.74);
}
.accueil .comparateur-prise { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

/* ── Sections et bandes ─────────────────────────────────────────────────── */

.l-section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) var(--marge-page);
}
.l-bande--toile { background: var(--toile); }
.l-bande--scene { background: var(--scene); color: var(--scene-texte); }

.l-chapo {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

/* ── La preuve : le registre de ce qui tient ─────────────────────────────── */

.l-preuve {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
@media (min-width: 961px) {
  .l-preuve-texte { position: sticky; top: 40px; }
}

.l-registre {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 44px;
}
.l-registre h3 {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris);
  margin-bottom: 6px;
}
.l-tenu, .l-change { list-style: none; margin: 0; padding: 0; }
.l-tenu li, .l-change li {
  padding: 13px 0;
  border-bottom: 1px solid var(--filet);
  line-height: 1.3;
}
/* Ce qui tient est écrit fort, avec le carré du relevé ; ce qui change est
   écrit doux : la hiérarchie EST l'argument. */
.l-tenu li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.l-tenu li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--terre);
  border-radius: 2px;
  transform: translateY(1px);
}
.l-change li { color: var(--encre-douce); }

.l-preuve-galerie .comparateur--portrait {
  width: min(100%, 440px, 62vh * 0.558);
  border-radius: var(--r-l);
}
.l-preuve-galerie .galerie-piece img { border-radius: var(--r-s); }

/* ── Les étapes : un vrai ordre, donc numérotées ─────────────────────────── */

.l-etapes {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  counter-reset: none;
}
.l-etapes li { border-top: 2px solid var(--encre); padding-top: 20px; }
.l-etape-rang {
  display: block;
  font-size: clamp(3rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--terre);
  font-variant-numeric: tabular-nums;
  margin-bottom: 20px;
}
.l-etapes h3 { font-size: 1.25rem; margin-bottom: 10px; }
.l-etapes p { margin: 0; color: var(--encre-douce); max-width: 30em; }

/* ── La planche : les tirages posés sur la scène ─────────────────────────── */

.l-bande--scene h2 { color: var(--scene-texte); }
.l-bande--scene .l-chapo { color: var(--scene-doux); }
.l-bande--scene :focus-visible { outline-color: var(--terre-vive); }

.l-entete-planche h2 { max-width: 16em; }

.l-planche {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
/* Un décalage d'une rangée sur deux : des tirages posés à la main, pas une
   grille de cartes. */
.l-planche li:nth-child(even) { margin-top: clamp(24px, 4vw, 56px); }

.l-tirage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--scene-texte);
}
.l-tirage-cadre {
  position: relative;
  display: block;
  aspect-ratio: 480 / 643;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--scene-haut);
  box-shadow: var(--ombre-scene);
  margin-bottom: 10px;
}
.l-tirage-cadre img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* L'état d'origine remonte du bas au survol : le même rideau que le
   comparateur, en vertical. `clip-path` et non une opacité — on voit la
   limite passer, donc que c'est la même pièce. */
.l-tirage-avant {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.55s var(--courbe);
}
.l-tirage:hover .l-tirage-avant,
.l-tirage:focus-visible .l-tirage-avant { clip-path: inset(0 0 0 0); }

.l-tirage-mention {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: var(--r-s);
  background: rgba(20, 21, 23, 0.74);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.l-tirage-titre { font-weight: 700; letter-spacing: -0.01em; }
.l-tirage-quoi { font-size: 0.9rem; color: var(--scene-doux); }
.l-tirage:hover .l-tirage-titre { text-decoration: underline; text-underline-offset: 3px; }

.l-suite { margin: 40px 0 0; font-weight: 600; }
.l-suite a { color: var(--terre-vive); text-underline-offset: 3px; }

/* ── Les tarifs : un relevé ligne par ligne ──────────────────────────────── */

.l-entete-tarifs { margin-bottom: 40px; }

.l-tarifs-groupe + .l-tarifs-groupe { margin-top: 40px; }
.l-tarifs-titre {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gris);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--encre);
}

/* `.agence` porte les MÊMES colonnes que `.tarif` : le test de cohérence
   lit le quota dans `<div class="agence">`, la classe ne peut pas changer.
   On neutralise d'abord son habillage de bande (style.css). */
.accueil .tarif,
.accueil .agence {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2.1fr) minmax(128px, auto) minmax(120px, auto) 232px;
  grid-template-areas: "nom quoi prix rendu action" "nom quoi annuel annuel action";
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 36px);
  padding: 24px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: none;
  flex-wrap: nowrap;
  justify-content: normal;
}
.tarif-nom {
  grid-area: nom;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.tarif-quoi {
  grid-area: quoi;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 34em;
}
.tarif-quoi strong { display: block; color: var(--encre); font-weight: 700; }
.accueil .tarif > .offre-prix:not(.offre-prix--annuel),
.accueil .agence > .offre-prix {
  grid-area: prix;
  margin: 0;
  justify-self: end;
  white-space: nowrap;
}
.accueil .tarif .offre-montant,
.accueil .agence .offre-montant { font-size: 2rem; letter-spacing: -0.04em; }
.tarif-rendu {
  grid-area: rendu;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--terre-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tant que la caisse n'a pas répondu, la ligne garde sa place (pas de
   décalage) mais ne montre pas un tiret orphelin. */
.tarif-rendu:not([data-pret]) { visibility: hidden; }
.accueil .tarif > .bouton,
.accueil .agence > .bouton { grid-area: action; justify-self: stretch; }
.accueil .offre-prix--annuel {
  grid-area: annuel;
  margin: 10px 0 0;
  justify-self: end;
  font-size: 0.88rem;
}

.l-tarifs-pied { margin-top: 36px; display: grid; gap: 10px; justify-items: start; }
.l-tarifs-pied .garantie { margin: 0 0 8px; justify-content: flex-start; }
.l-tarifs-pied a { color: var(--encre-douce); text-underline-offset: 3px; }

/* ── Conformité : les deux fichiers d'un export ──────────────────────────── */

.l-conformite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 104px);
  align-items: center;
}
.l-conformite-texte p { color: var(--encre-douce); max-width: 34em; }
.l-conformite-texte h2 { margin-bottom: 24px; max-width: 13em; }
.l-liens { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-weight: 600; }
.l-liens a { color: var(--terre-texte); text-underline-offset: 3px; }

.l-fichiers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; max-width: 520px; justify-self: end; width: 100%; }
.l-fichier { margin: 0; }
.l-fichier:nth-child(2) { margin-top: 40px; }
.l-fichier img,
.l-fichier-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-l);
  background: var(--filet);
}
.l-fichier img { height: auto; }
.l-fichier-image { position: relative; overflow: hidden; }
.l-fichier-image img { position: absolute; inset: 0; height: 100%; border-radius: 0; }
/* La bande, reproduite d'après `bandes-mention.json` : le gris et les
   capitales de la vraie mention incrustée par l'app. */
.l-fichier-bande {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 8px;
  background: #5F5F5F;
  color: #fff;
  font-size: clamp(0.5rem, 0.72vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}
.l-fichier figcaption { margin-top: 12px; font-size: 0.9rem; font-weight: 600; }

/* ── Questions, outils, rappel ───────────────────────────────────────────── */

.l-questions .questions { margin-top: 36px; }
.l-questions .questions summary { font-size: 1.05rem; }

.accueil .explorer { max-width: var(--largeur); padding-inline: var(--marge-page); }
.accueil .explorer h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.l-rappel { background: var(--scene); padding-block: clamp(72px, 10vw, 128px); }
.l-rappel h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); color: var(--scene-texte); }
.l-rappel .rappel-chapo { color: var(--scene-doux); }
.l-rappel .micro { color: var(--scene-doux); margin-top: 16px; }

/* ── Écrans moyens ─────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .accueil .tarif,
  .accueil .agence {
    grid-template-columns: minmax(0, 1fr) auto 220px;
    grid-template-areas:
      "nom prix action"
      "quoi rendu action"
      "quoi annuel annuel";
    row-gap: 6px;
  }
  .tarif-rendu { justify-self: end; }
  .tarif-quoi { margin-top: 4px; }
}

/* ── Tablette et téléphone ─────────────────────────────────────────────── */

@media (max-width: 960px) {
  /* Le héros se lit dans l'ordre d'une annonce : la promesse, la photo, le
     bouton. Pedra et VSAI montrent tous deux l'image avant le pli sur
     mobile ; ici elle passait 800 px plus bas. */
  .l-hero-grille { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .l-hero-mots { display: contents; }
  .l-hero h1 { order: 1; max-width: none; }
  .l-hero-preuve { order: 2; margin-top: 24px; }
  .l-hero-action { order: 3; margin-top: 24px; align-items: stretch; }
  .l-hero .chapo { order: 4; margin-top: 32px; }
  .l-hero .faits { order: 5; }
  .l-hero-preuve .comparateur--hero { height: auto; width: 100%; aspect-ratio: 1 / 1; max-height: 62vh; }
  .l-hero-preuve figcaption { max-width: none; }
  .l-cta { width: 100%; }

  .l-preuve,
  .l-conformite { grid-template-columns: minmax(0, 1fr); }
  .l-preuve-galerie .comparateur--portrait { width: min(100%, 420px, 68vh * 0.558); }

  .l-etapes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .l-etapes li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .l-etape-rang { grid-row: span 2; margin: 0; font-size: 3rem; }

  /* Rangée qui défile au doigt seulement : sur un écran tactile le geste est
     naturel, et la rangée reste dans sa propre boîte (pas de débordement de
     page). */
  .l-planche {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--marge-page) * -1);
    padding: 0 var(--marge-page) 24px;
    scroll-padding-inline: var(--marge-page);
    scrollbar-width: none;
  }
  .l-planche::-webkit-scrollbar { display: none; }
  .l-planche li { flex: 0 0 min(62vw, 280px); scroll-snap-align: start; }
  .l-planche li:nth-child(even) { margin-top: 0; }
}

@media (max-width: 640px) {
  .l-hero h1 { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  /* Sous 19 px le blanc sur la terre claire passe sous 4,5:1 : la terre
     foncée (4,9:1) prend le relais, et le bouton tient sur une ligne. */
  .l-cta { font-size: 1.05rem; padding: 16px 18px; min-height: 56px; background: var(--terre-fonce); }
  .l-cta:hover { background: #8F4327; }
  .l-hero-preuve figcaption { margin-top: 12px; }
  .l-hero-action { margin-top: 18px; }
  .l-hero .faits { gap: 28px; }
  .l-tete .barre { padding-block: 12px; }
  .l-bouton-clair { padding: 9px 14px; font-size: 0.9rem; }

  .l-registre { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .accueil .tarif,
  .accueil .agence {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nom prix"
      "quoi rendu"
      "annuel annuel"
      "action action";
    row-gap: 8px;
    align-items: start;
  }
  .tarif-rendu { align-self: start; margin-top: 4px; }
  .accueil .offre-prix--annuel { justify-self: start; margin: 4px 0 0; }
  .accueil .tarif > .bouton,
  .accueil .agence > .bouton { margin-top: 10px; }
  .accueil .tarif .offre-montant,
  .accueil .agence .offre-montant { font-size: 1.7rem; }

  .l-fichiers { gap: 12px; }
  .l-fichier:nth-child(2) { margin-top: 24px; }
  .l-fichier-bande { font-size: 0.42rem; padding: 5px 4px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .l-tirage-avant { transition: none; }
}

/* Le titre en deux phrases, chacune équilibrée pour elle-même : un `<br>`
   laissait « mur. » seul sur sa ligne au téléphone. */
.l-hero h1 > span { display: block; text-wrap: balance; }

/* Même bord gauche que l'en-tête, les sections et le pied (largeur de
   contenu = --largeur moins les marges). */
.l-hero-grille { max-width: calc(var(--largeur) - 2 * var(--marge-page)); }