/* Le Bon Relais — page vitrine. Brief et valeurs : vitrine/DESIGN.md.
   Neutres chauds, un seul accent (au plus un élément accentué par section), une seule famille (celle du système),
   aucun dégradé, aucune ressource externe. Mobile d'abord. Animations CSS seules, coupées sous prefers-reduced-motion. */

:root {
  --fond: #F7F3EE;
  --fond-2: #EFE9E1;
  --surface: #FFFDFA;
  --texte: #1C1917;
  --doux: #625A52;
  --bord: #E2D9CE;
  --accent: #E8590C;
  --cible: #C81E1E;                   /* rouge de la cible du symbole, et rien d'autre (DESIGN.md, « Logo ») */
  --chantier: #FFF4C2;
  --chantier-bord: #C99700;
  --ombre-1: 0 2px 6px rgb(60 40 20 / .06), 0 14px 28px -16px rgb(60 40 20 / .22);
  --ombre-2: 0 4px 10px rgb(60 40 20 / .10), 0 32px 56px -24px rgb(60 40 20 / .35);
  --coque: #1A1715;
  --coque-bord: #3A3330;
  --ecran-haut: #15213B;              /* bande d'état : couleur de l'en-tête de l'application capturée */

  --r-pilule: 999px;
  --r-carte: 1rem;
  --r-encart: 1.25rem;
  --r-coque: 2.75rem;
  --r-ecran: 2.25rem;
  --r-petit: .5rem;

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --gouttiere: 1.25rem;
  --section: 3.5rem;
  --large: 72rem;
  --colonne: 36rem;

  --d-survol: 150ms;
  --d-ouverture: 250ms;
  --d-entree: 600ms;
  --d-apparition: 700ms;
  --sortie-douce: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #171412; --fond-2: #1D1916; --surface: #231F1B; --texte: #F3EEE8; --doux: #A89F94; --bord: #36302A;
    --accent: #F0742E; --cible: #F04438; --chantier: #3B3110; --chantier-bord: #B48A12;
    --ombre-1: 0 2px 6px rgb(0 0 0 / .35), 0 14px 28px -16px rgb(0 0 0 / .7);
    --ombre-2: 0 4px 10px rgb(0 0 0 / .45), 0 32px 56px -24px rgb(0 0 0 / .8);
    --coque: #0E0C0B; --coque-bord: #2E2927;
  }
}
:root[data-theme="dark"] {
  --fond: #171412; --fond-2: #1D1916; --surface: #231F1B; --texte: #F3EEE8; --doux: #A89F94; --bord: #36302A;
  --accent: #F0742E; --cible: #F04438; --chantier: #3B3110; --chantier-bord: #B48A12;
  --ombre-1: 0 2px 6px rgb(0 0 0 / .35), 0 14px 28px -16px rgb(0 0 0 / .7);
  --ombre-2: 0 4px 10px rgb(0 0 0 / .45), 0 32px 56px -24px rgb(0 0 0 / .8);
  --coque: #0E0C0B; --coque-bord: #2E2927;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem); line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--e-4); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; border-radius: var(--r-petit); }
.intro, .chapeau { color: var(--doux); max-width: var(--colonne); }
.intro { margin-top: var(--e-4); font-size: 1.0625rem; }
.etiquette {
  margin: 0 0 var(--e-2); color: var(--doux); font-size: .8125rem; font-weight: 600; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- barre ---------- */
.barre {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.barre-dedans {
  max-width: var(--large); margin: 0 auto; padding: var(--e-3) var(--gouttiere);
  display: flex; align-items: center; gap: var(--e-4);
}
.logo { display: flex; align-items: center; gap: var(--e-2); margin-right: auto; text-decoration: none; }
.logo-marque { width: 3.25rem; height: 3.25rem; flex: none; color: var(--accent); }   /* la marque : voir DESIGN.md, « Logo » */
.logo-cible { color: var(--cible); }   /* la cible du symbole ; sans cette règle, son attribut color garde le rouge clair */
/* Mot-marque sur deux lignes (variante B choisie par Ralph, 25/10/2026) : « Le Bon » petit au-dessus, « Relais » en gras.
   L'espace entre les deux reste dans le HTML : lecteurs d'écran et extraction de texte lisent « Le Bon Relais ». */
.logo-mot { display: block; font-size: 1.125rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.logo-petit { display: block; font-size: .8em; font-weight: 600; color: var(--doux); }
.logo-mot b { display: block; font-size: 1.35em; font-weight: 800; letter-spacing: -.03em; }
.menu { display: none; gap: var(--e-5); }
.menu a { color: var(--doux); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: color var(--d-survol) ease-out; }
.menu a:hover { color: var(--texte); }
.menu a[aria-current="page"] { color: var(--texte); }
/* Téléphone : les mêmes liens dans un tiroir (<details>, utilisable sans script ; menu.js le referme après un clic). */
.menu-mobile { position: relative; }
.menu-mobile > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: var(--r-pilule); border: 1px solid var(--bord); color: var(--texte);
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile[open] > summary { background: var(--fond-2); }
.menu-icone { width: 1.5rem; height: 1.5rem; }
.menu-tiroir {
  position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 20; min-width: 15rem;
  display: grid; padding: var(--e-2); background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--r-encart); box-shadow: var(--ombre-2);
}
.menu-tiroir a {
  padding: .8rem 1rem; border-radius: var(--r-petit); color: var(--texte); font-weight: 600; text-decoration: none;
}
.menu-tiroir a:not(.menu-essai):hover, .menu-tiroir a[aria-current="page"] { background: var(--fond-2); }
.menu-tiroir .menu-essai { margin-top: var(--e-2); background: var(--accent); color: #fff; text-align: center; border-radius: var(--r-pilule); }   /* l'action : bouton plein */
@media (max-width: 22rem) { .barre-dedans > .bouton-contour { display: none; } }   /* très petit écran (moins de 352 px) : « Essayer » reste dans le menu ; à 360 px il tient à côté du mot-marque sur deux lignes */

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 1.4rem; border-radius: var(--r-pilule);
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
  transition: transform var(--d-survol) ease-out, box-shadow var(--d-survol) ease-out;
}
.bouton:hover { transform: translateY(-2px); box-shadow: var(--ombre-1); }
.bouton:active { transform: none; }
.bouton-contour {
  min-height: 2.5rem; padding: .4rem 1rem; font-size: .9375rem;
  background: transparent; color: var(--texte); border: 1.5px solid var(--texte);
}
.bouton-large { width: 100%; max-width: 22rem; }
.lien-fleche {
  display: inline-flex; align-items: center; min-height: 3rem; padding: .8rem .25rem;
  font-weight: 600; text-decoration: none; color: var(--texte);
}
.lien-fleche::after { content: " →"; white-space: pre; transition: transform var(--d-survol) ease-out; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------- haut de page ---------- */
.hero {
  max-width: var(--large); margin: 0 auto; padding: var(--e-7) var(--gouttiere) var(--section);
  display: grid; gap: var(--e-7); align-items: center;
}
.surtitre { margin: 0 0 var(--e-4); color: var(--doux); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.souligne { white-space: nowrap; }
.chapeau { margin-top: var(--e-5); font-size: clamp(1.125rem, 1rem + .5vw, 1.3125rem); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-5); margin-top: var(--e-6); }
.reassurance { margin-top: var(--e-5); color: var(--doux); font-size: .9375rem; }
.reassurance strong { color: var(--texte); }
.reassurance::before { content: "✓ "; font-weight: 800; color: var(--texte); }
.hero-visuel { margin: 0; display: grid; justify-items: center; }

/* ---------- téléphone ---------- */
.telephone {
  position: relative; margin: 0; width: min(19rem, 76vw); aspect-ratio: 390 / 844; padding: .55rem;
  border-radius: var(--r-coque); background: var(--coque); box-shadow: var(--ombre-2), inset 0 0 0 2px var(--coque-bord);
}
.telephone::before {   /* encoche */
  content: ""; position: absolute; top: 1rem; left: 50%; width: 26%; height: 1rem; transform: translateX(-50%);
  border-radius: var(--r-pilule); background: var(--coque); z-index: 2;
}
.ecran {
  width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-ecran);
  background: var(--ecran-haut); padding-top: 2.1rem;   /* la capture commence sous l'encoche */
}
.ecran img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.telephone-petit { width: min(16rem, 68vw); }
.exemple {
  position: absolute; top: -.65rem; right: -.35rem; z-index: 3; padding: .2rem .65rem; border-radius: var(--r-pilule);
  background: var(--surface); color: var(--doux); border: 1px solid var(--bord);
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4; box-shadow: var(--ombre-1);
}

/* ---------- sections ---------- */
.bloc { max-width: var(--large); margin: 0 auto; padding: var(--section) var(--gouttiere); }
.grille-3, .grille-2 { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-4); }
.grille-3 li, .grille-2 li {
  padding: var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-carte);
  transition: transform var(--d-survol) ease-out, box-shadow var(--d-survol) ease-out;
}
.grille-3 li:hover, .grille-2 li:hover { transform: translateY(-2px); box-shadow: var(--ombre-1); }
.grille-3 p, .grille-2 p { margin-top: var(--e-2); color: var(--doux); }
.pastille {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: var(--e-3);
  border-radius: var(--r-petit); background: var(--fond-2); color: var(--texte); font-weight: 800; font-size: .9375rem;
}

.produit { max-width: none; padding-left: 0; padding-right: 0; background: var(--fond-2); }
.produit > * { max-width: var(--large); margin-left: auto; margin-right: auto; padding-left: var(--gouttiere); padding-right: var(--gouttiere); }
.demo { display: grid; gap: var(--e-6); align-items: center; justify-items: center; padding-top: var(--e-7); padding-bottom: var(--e-7); }
.demo + .demo { border-top: 1px solid var(--bord); }
.demo-texte { max-width: 30rem; }
.demo-texte p:last-child { margin-top: var(--e-2); color: var(--doux); }

.etapes { list-style: none; counter-reset: etape; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: var(--e-4); }
.etapes li {
  counter-increment: etape; position: relative; padding: var(--e-5) var(--e-5) var(--e-5) 4.5rem;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-carte);
}
.etapes li::before {
  content: counter(etape); position: absolute; left: var(--e-5); top: var(--e-5); width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--fond-2); border: 1px solid var(--bord);
  color: var(--texte); font-weight: 800; font-size: .9375rem;
}
.etapes p { margin-top: var(--e-2); color: var(--doux); }

/* « Vos données » : liste réglée, sans carte (changement de texture avant le tarif) */
.securite .grille-2 { gap: 0; }
.securite .grille-2 li {
  padding: var(--e-4) 0 var(--e-5); background: none; border: 0; border-top: 1px solid var(--bord); border-radius: 0;
  transition: none;
}
.securite .grille-2 li:hover { transform: none; box-shadow: none; }

.tarif { display: grid; justify-items: center; }
.tarif-carte {
  width: 100%; max-width: 28rem; padding: var(--e-6) var(--e-5); text-align: center;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-encart); box-shadow: var(--ombre-1);
}
.tarif-carte .etiquette { margin-bottom: var(--e-3); }
.prix { display: flex; align-items: baseline; justify-content: center; gap: var(--e-2); }
.prix-montant { font-size: clamp(3rem, 2.4rem + 3vw, 4.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.prix-unite { color: var(--doux); font-weight: 600; }
.prix-offre { margin-top: var(--e-4); color: var(--doux); }
.prix-offre strong { color: var(--texte); }
.coches { list-style: none; padding: 0; margin: var(--e-5) auto var(--e-6); max-width: 20rem; text-align: left; display: grid; gap: var(--e-3); }
.coches li { position: relative; padding-left: 1.75rem; }
.coches li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--texte); }

.faq details { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-carte); padding: 0 var(--e-5); margin-top: var(--e-3); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: var(--e-4) 2.25rem var(--e-4) 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--doux); transition: transform var(--d-ouverture) var(--sortie-douce);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding-bottom: var(--e-5); color: var(--doux); }
/* ouverture d'une réponse en 250 ms là où le navigateur le gère (::details-content) ; sinon, ouverture immédiate */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content {
  height: 0; overflow: clip;
  transition: height var(--d-ouverture) var(--sortie-douce), content-visibility var(--d-ouverture) allow-discrete;
}
.faq details[open]::details-content { height: auto; }

.contact { text-align: center; display: grid; justify-items: center; }
.contact p { margin-top: var(--e-4); color: var(--doux); max-width: var(--colonne); }
.contact .bouton { margin-top: var(--e-5); }

/* ---------- pied ---------- */
.pied { background: var(--fond-2); border-top: 1px solid var(--bord); color: var(--doux); font-size: .9375rem; line-height: 1.5; }
.pied-dedans { max-width: var(--large); margin: 0 auto; padding: var(--e-6) var(--gouttiere) var(--e-7); }
.pied h2 { font-size: 1.125rem; color: var(--texte); letter-spacing: -.01em; }
.pied p { margin-top: var(--e-4); }
.a-completer {
  margin-top: var(--e-4); padding: var(--e-2) var(--e-4) var(--e-4); color: var(--texte);
  background: var(--chantier); border: 2px dashed var(--chantier-bord); border-radius: var(--r-petit);
}
.avertissement { font-weight: 800; }
.copyright { margin-top: var(--e-5); }

/* ---------- mouvement ---------- */
.hero-texte > * { animation: entree var(--d-entree) var(--sortie-douce) both; }
.hero-texte > :nth-child(2) { animation-delay: 60ms; }
.hero-texte > :nth-child(3) { animation-delay: 120ms; }
.hero-texte > :nth-child(4) { animation-delay: 180ms; }
.hero-texte > :nth-child(5) { animation-delay: 240ms; }
.hero-visuel { animation: entree var(--d-entree) 150ms var(--sortie-douce) both; }
@keyframes entree { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .revele { animation: apparaitre var(--d-apparition) var(--sortie-douce) both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  @keyframes apparaitre { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- à partir de 48rem (768 px) ---------- */
@media (min-width: 48rem) {
  :root { --gouttiere: 2rem; --section: 5rem; }
  .menu { display: flex; }
  .menu-mobile { display: none; }
  .hero { grid-template-columns: 1.1fr .9fr; padding-top: var(--e-8); padding-bottom: var(--e-9); gap: var(--e-8); }
  .grille-2 { grid-template-columns: repeat(2, 1fr); }
  .demo { grid-template-columns: minmax(0, 30rem) auto; justify-content: center; column-gap: var(--e-9); justify-items: start; padding-top: var(--e-8); padding-bottom: var(--e-8); }
  .demo.inverse .demo-texte { order: 2; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .etapes li { padding: 4.5rem var(--e-5) var(--e-5); }
  .etapes li:not(:last-child)::after {   /* filet qui relie les numéros : une suite, pas trois boîtes */
    content: ""; position: absolute; top: calc(var(--e-5) + 1.125rem); left: calc(var(--e-5) + 2.25rem); right: -2.5rem;
    border-top: 1px solid var(--bord);
  }
  .etapes li::before { z-index: 1; }
  .securite .grille-2 { gap: 0 var(--e-6); border-top: 1px solid var(--bord); }   /* un seul filet au-dessus de la rangée */
  .securite .grille-2 li { border-top: 0; }
  .tarif-carte { padding: var(--e-7) var(--e-6); }
}
/* ---------- à partir de 64rem (1024 px) ---------- */
@media (min-width: 64rem) {
  .grille-3 { grid-template-columns: repeat(3, 1fr); }
  .securite .grille-2 { grid-template-columns: repeat(3, 1fr); }
  .benefices .grille-2 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- pages légales (v7) ---------- */
.page-texte { padding: var(--e-6) 0; }
.texte-legal { line-height: 1.6; }
.texte-legal h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -.02em; }
.texte-legal h2 { font-size: 1.25rem; margin-top: var(--e-6); }
.texte-legal p { margin-top: var(--e-4); }
.texte-legal .maj { color: var(--doux); }
.texte-legal a, .pied a { color: inherit; text-decoration: underline; }
.liens-pied { font-weight: 700; }