/* =========================================================================
   Ma Box Aventure — refonte commerciale
   -------------------------------------------------------------------------
   Direction artistique reprise de la façon de faire de lakube.com :
   fond crème très clair, encre presque noire, UNE couleur d'action chaude,
   beaucoup de blanc, des cartes plates à filet fin, des angles largement
   arrondis, une typographie d'affiche.

   Cette feuille est chargée APRÈS styles.css et app.css : elle ne remplace
   rien, elle redéfinit. Pour revenir à l'ancien visuel, il suffit de retirer
   la ligne <link> de views/partials/head.ejs — aucun gabarit ne dépend d'elle
   pour fonctionner.
   ========================================================================= */

:root {
  /* --- Papiers : crème chaud, presque blanc, comme la maquette de référence */
  --cream: #fdf7f0;
  --paper: #ffffff;
  --sand: #f7efe4;          /* bandeau alterné */
  --ink: #1b1b1b;
  --ink-soft: #5d5d5d;
  --line: #e8ded1;
  --line-soft: #f2ebe1;
  --line-strong: #8a8072;

  /* --- La couleur d'action : une seule, chaude, partout la même ---
     Ce ne sont pas des couleurs inventées : ce sont celles de l'affiche
     imprimée (public/images/affiche-box.jpg) — l'orange des pictos, le jaune
     des bandeaux, le vert des brosses. Le site et le carton qui arrive dans
     la boîte aux lettres doivent être la même marque. */
  --clay: #e8762c;
  --clay-ink: #b8500f;
  --clay-soft: #fde8d5;
  --gift: #e8762c;
  --gift-dark: #b8500f;
  --gift-ink: #b8500f;
  --gift-soft: #fde8d5;

  /* --- Le vert de l'affiche : celui des fonds sombres et du pied de page */
  --forest: #1d5c3a;
  --forest-dark: #123c26;
  --moss: #3a9b63;
  --moss-ink: #1a6b42;
  --leaf-soft: #e4f1e8;

  /* --- Le jaune de l'affiche : l'énergie, jamais un bouton --- */
  --sun: #f5c518;
  --sun-deep: #d9a800;
  --sun-ink: #7a5600;
  --sun-soft: #fdf3cf;

  /* --- L'ocre du bandeau d'accueil : le fond chaud des flat-lays --- */
  --ocre: #efc46b;
  --ocre-clair: #f6ddaa;
  --kraft: #d9a441;

  /* --- Formes : très arrondies, jamais de relief --- */
  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(27, 27, 27, .04);
  --shadow: 0 10px 30px -18px rgba(27, 27, 27, .35);
  --shadow-lg: 0 26px 60px -34px rgba(27, 27, 27, .45);

  --font: "Avenir Next", Avenir, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", Futura, Candara, "Segoe UI", var(--font);
  --wrap: 1180px;
}

/* Le fond était couvert d'un motif de boussoles et d'empreintes. Sur une page
   longue il grise tout et empêche les photos de porter : la maquette de
   référence n'a rien derrière son texte, et c'est ce qui la rend nette. */
body {
  background-image: none;
  background-color: var(--cream);
  font-size: 17px;
  line-height: 1.6;
}

/* --- Typographie d'affiche ------------------------------------------------
   Titres serrés, gras, sans italique ni ombre. */
h1, h2, h3, h4 { letter-spacing: -.022em; line-height: 1.06; font-weight: 800; }
/* Le titre d'accueil est en capitales, comme celui de la maquette de référence
   et comme celui de l'affiche imprimée : c'est la même phrase, il faut que ce
   soit la même voix. Les h2 restent en bas de casse — une page entière de
   capitales ne se lit plus, elle se crie. */
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); text-transform: uppercase; letter-spacing: -.015em; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -.012em; }

.lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-soft); }

/* Le sur-titre : petites capitales espacées, la signature de la maquette. */
.kicker, .eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 800;
  color: var(--clay-ink);
}
.eyebrow {
  display: inline-block;
  background: var(--clay-soft);
  border: 0;
  border-radius: var(--radius-pill);
  padding: .42rem 1rem;
  margin-bottom: 1.1rem;
  color: var(--clay-ink);
}

.section { padding: clamp(3.4rem, 7vw, 6.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head h2 { margin-bottom: .5rem; }
.section-head p { font-size: 1.08rem; }

/* Les bandeaux alternés portaient une découpe en vagues. On garde l'alternance
   — elle rythme la page — mais à bord droit, comme la référence. */
.section-alt { background: var(--paper); }
.section-alt::before, .section-alt::after { content: none; }

/* --- Boutons : pastilles plates -----------------------------------------
   L'ancien bouton avait une arête basse de 4 px qui s'écrasait au clic. C'est
   charmant et c'est daté : la maquette de référence n'a que des aplats. */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 800;
  letter-spacing: .005em;
  border-width: 1.5px;
  padding: .82rem 1.6rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #000; border-color: #000; box-shadow: none; }
.btn-primary:active { box-shadow: none; }

/* L'action commerciale — s'abonner, offrir, essayer — est orange, et elle est
   la seule chose orange d'une page. */
.btn-sun, .btn-gift { background: var(--clay); border-color: var(--clay); color: #fff; box-shadow: none; }
.btn-sun:hover, .btn-gift:hover { background: var(--clay-ink); border-color: var(--clay-ink); color: #fff; box-shadow: none; }
.btn-sun:active, .btn-gift:active { box-shadow: none; }

.btn-outline, .btn-gift-outline {
  background: transparent; border-color: var(--ink); color: var(--ink); box-shadow: none;
}
.btn-outline:hover, .btn-gift-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.btn-outline:active, .btn-gift-outline:active { box-shadow: none; }

.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .86rem; }

/* --- Cartes : filet fin, pas de rotation au survol ----------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.card-illustration { border-radius: var(--radius) var(--radius) 0 0; }

/* --- En-tête : blanche, collante, sans bandeau de revendication ---------- */
.claim-bar { display: none; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.site-header::after { content: none; }
.site-header .header-inner { padding-block: .55rem; }
.site-nav a { font-weight: 700; font-size: .95rem; letter-spacing: -.005em; }
.brand-text { letter-spacing: -.02em; }

/* --- Formulaires --------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], select, textarea {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--paper);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline-color: var(--clay); }

/* --- Pied de page : sombre, comme la référence --------------------------- */
.site-footer {
  background: var(--forest-dark);
  color: #e9eee9;
  border-top: 0;
}
.site-footer::before { content: none; }
.site-footer a { color: #e9eee9; }
.site-footer a:hover { color: #fff; }
/* styles.css colore les liens du pied de page en encre sombre (« .site-footer
   nav a », deux classes) : plus spécifique que la règle ci-dessus, elle
   l'emportait — des liens noirs sur le vert foncé, illisibles. On rétablit la
   couleur claire à spécificité égale, et on éclaircit le filet du bas, dessiné
   lui aussi pour un fond clair. */
.site-footer nav a { color: #e9eee9; }
.site-footer nav a:hover { color: #fff; }
.footer-bottom { border-top-color: rgba(233, 238, 233, .28); }
.footer-bottom p, .site-footer .small { color: #b9c7bd; }
.site-footer h3 { color: #fff; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.site-footer .muted, .site-footer .tagline { color: #b9c7bd; }
.site-footer .brand-text { color: #fff; }

/* =========================================================================
   Composants propres à la refonte commerciale
   ========================================================================= */

/* --- Le bandeau de confiance, tout en haut ------------------------------- */
.bandeau-confiance {
  background: var(--forest-dark);
  color: #eaf1ec;
  font-size: .84rem;
  letter-spacing: .01em;
}
.bandeau-confiance .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 2.2rem;
  align-items: center; justify-content: center;
  padding: .55rem 0;
  text-align: center;
}
.bandeau-confiance span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.bandeau-confiance strong { font-weight: 800; }
.bandeau-confiance .etoiles { color: var(--sun); letter-spacing: .06em; }
@media (max-width: 700px) {
  .bandeau-confiance .wrap { gap: .35rem 1.2rem; font-size: .76rem; }
  .bandeau-confiance span:nth-child(n+3) { display: none; }
}

/* --- Premier écran -------------------------------------------------------
   La maquette de référence ne met pas son texte à côté d'une photo : elle
   pose le titre, l'accroche et les deux boutons au centre, puis DÉROULE un
   grand bandeau photo sous eux. C'est ce bandeau qui fait tout le travail —
   un aplat chaud, l'objet au milieu, des mains autour — et c'est exactement
   ce qui manquait ici. */
.hero {
  background: var(--paper);
  padding: clamp(2.4rem, 5vw, 4rem) 0 0;
  border-bottom: 0;
  text-align: center;
}
.hero::before, .hero::after { content: none; }
.hero-grid { display: block; }
.hero h1 { margin: 0 auto 1.1rem; max-width: 19ch; }
.hero .lead { margin-inline: auto; max-width: 54ch; }
.hero-actions { margin: 1.9rem 0 .9rem; justify-content: center; }

/* --- Le grand bandeau ---------------------------------------------------- */
.banniere {
  position: relative; margin-top: clamp(2rem, 4vw, 3.2rem);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: radial-gradient(120% 100% at 50% 0%, var(--ocre-clair) 0%, var(--ocre) 55%, var(--kraft) 100%);
  /* L'encadré doit contenir la vidéo en entier.

     Le cadre de la vidéo fait 560 px de large au maximum, pour un rapport
     624/635 : il en mesure donc 570 de haut, quand ce panneau n'en réservait
     que 480 sans le moindre creux en bas. Avec overflow:hidden, le bas de la
     boucle était tout simplement coupé — on perdait le plan de la box tenue à
     deux mains, qui est la seule raison d'avoir une vidéo ici. */
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
  min-height: clamp(340px, 52vw, 700px);
  display: grid; place-items: center;
  overflow: hidden;
}

/* La box, au centre, comme sur le flat-lay de la maquette de référence.
   Le cadrage est celui de l'affiche imprimée (x 400→1024, y 370→1005 dans un
   fichier de 1024 × 1536), exprimé en pourcentages pour rester juste à toutes
   les largeurs : avant x = 400, l'image porte le texte composé de l'affiche. */
.banniere-box {
  position: relative; z-index: 2;
  width: min(560px, 62%); aspect-ratio: 624 / 635;
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(60, 36, 6, .55);
  background: #cbb391;
}
.banniere-box img { position: absolute; left: -64.1%; top: -58.3%; width: 164.1%; height: auto; max-width: none; }

/* Les bulles : une grenouille et deux explorateurs, en médaillon, posés sur
   l'ocre. C'est ce qui parle aux enfants — ni le prix, ni le mot « abonnement ». */
.bulle {
  position: absolute; z-index: 3; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 16px 34px -14px rgba(60, 36, 6, .6);
  background: var(--sand);
}
.bulle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bulle-1 { width: clamp(96px, 13vw, 168px); aspect-ratio: 1; left: 3%; top: 14%; }
/* La bulle de droite descend : l’étiquette « 12 aventures » occupe désormais
   le haut du même coin, et deux ronds superposés ne se lisent plus. */
.bulle-2 { width: clamp(88px, 12vw, 152px); aspect-ratio: 1; right: 4%; top: 34%; }
.bulle-3 { width: clamp(104px, 14vw, 180px); aspect-ratio: 1; right: 7%; bottom: 8%; }

/* L’étiquette « 12 aventures », en haut à droite.

   Elle était en bas à gauche, et sur un téléphone elle venait se coller sous
   la vidéo, par-dessus le texte incrusté : la promesse recouvrait la scène
   qu’elle annonce. En haut à droite, elle occupe le seul coin que rien
   n’occupe — le bouton du son est en bas à droite, les bulles à gauche. */
.banniere-etiquette {
  position: absolute; z-index: 4; right: 4%; top: 7%;
  background: var(--sun); color: #3a2a00;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(.85rem, 1.5vw, 1.05rem);
  padding: .6rem 1.2rem; border-radius: 8px; transform: rotate(-4deg);
  box-shadow: 0 10px 24px -10px rgba(60, 36, 6, .55);
  line-height: 1.25; text-align: left;
}
.banniere-etiquette strong { display: block; font-size: 1.25em; }

/* Les feuillages dessinés, en fond : ceux de l'affiche. */
.banniere-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; }
.banniere-decor svg { width: 100%; height: 100%; }

@media (max-width: 760px) {
  .banniere { min-height: 0; padding-inline: 1rem; }
  .banniere-box { width: 78%; }
  .bulle-1 { left: -2%; top: 6%; }
  .bulle-2 { display: none; }
  .bulle-3 { right: -2%; bottom: 4%; }
  .banniere-etiquette { right: 3%; top: 4%; transform: rotate(-3deg); font-size: .8rem; padding: .45rem .9rem; }
}

/* La pastille d'avis : ronde, discrète, cliquable. */
.avis-badge {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .5rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .9rem;
}
.avis-badge-stars { color: var(--sun-deep); letter-spacing: .08em; }

/* --- La grille des formules ---------------------------------------------- */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.5rem; }
.offre {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.offre:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.offre-visuel {
  aspect-ratio: 4 / 3; background: var(--sand);
  display: grid; place-items: center; overflow: hidden;
}
.offre-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offre-corps { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.offre h3 { margin: 0 0 .3rem; font-size: 1.14rem; }
.offre-tagline { color: var(--ink-soft); font-size: .93rem; margin: 0 0 1rem; flex: 1; }
.offre-prix { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1; }
.offre-prix small { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-top: .35rem; letter-spacing: 0; }
.offre-lien { margin-top: 1.1rem; font-weight: 800; color: var(--clay-ink); font-size: .92rem; }
.offre-ruban {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: var(--ink); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .35rem .8rem;
  border-radius: var(--radius-pill);
}

/* --- Les étapes, avec pictogramme dessiné -------------------------------- */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem 1.6rem; }
.etape { text-align: center; }
.etape-pic {
  width: 84px; height: 84px; margin: 0 auto 1.1rem;
  display: grid; place-items: center;
  background: var(--sand); border-radius: 50%;
}
.etape-pic img { width: 44px; height: 44px; }
.etape-num {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--clay-ink); margin-bottom: .4rem;
}
.etape h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.etape p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* =========================================================================
   « Et toi, tu vas faire quoi ? » — la seule section adressée à l'enfant.

   Tout le reste du site parle au parent qui paie, et c'est normal. Mais c'est
   l'enfant qui réclame, et il ne lit ni « sans engagement » ni « 12,50 € par
   mois » : il regarde la grenouille. Grandes photos, verbes à la deuxième
   personne, fond vert plein — on change de voix et ça doit se voir.
   ========================================================================= */
.section-gosses {
  background: var(--forest);
  color: #fff;
  background-image:
    radial-gradient(60% 50% at 10% 0%, rgba(245, 197, 24, .16) 0%, transparent 70%),
    radial-gradient(50% 50% at 95% 100%, rgba(232, 118, 44, .2) 0%, transparent 70%);
}
.section-gosses .section-head h2, .section-gosses h3 { color: #fff; }
.section-gosses .section-head p { color: #cfe2d5; }
.section-gosses .kicker { color: var(--sun); }

.missions-gosses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.mission-gosse {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; display: block; text-decoration: none; color: #fff;
  background: #0d2d1c;
  transition: transform .2s ease;
}
.mission-gosse:hover { transform: translateY(-6px); }
.mission-gosse img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.mission-gosse:hover img { transform: scale(1.06); }
.mission-gosse-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 32, 20, .92) 0%, rgba(8, 32, 20, .35) 48%, transparent 75%);
}
.mission-gosse-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.3rem; }
.mission-gosse-texte h3 { margin: 0 0 .25rem; font-size: 1.16rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.mission-gosse-texte p { margin: 0; font-size: .92rem; color: #dbe9df; }
.mission-gosse-num {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: var(--sun); color: #3a2a00; font-family: var(--font-display); font-weight: 800;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.1rem;
}

/* Le butin : ce qu'on rapporte, en pastilles. */
.butin { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2.4rem; }
.butin span {
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill); padding: .55rem 1.15rem; font-weight: 700; font-size: .95rem;
}

/* --- La garantie : un bloc large, vert, un seul message ------------------ */
.garantie {
  background: var(--forest); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: 88px 1fr auto; gap: 1.6rem; align-items: center;
}
.garantie img { width: 88px; height: 88px; }
.garantie h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.garantie p { color: #d8e6dc; margin: 0; max-width: 46ch; }
.garantie .btn { background: #fff; border-color: #fff; color: var(--forest-dark); }
.garantie .btn:hover { background: var(--sun); border-color: var(--sun); color: #3a2708; }
@media (max-width: 840px) {
  .garantie { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .garantie p { max-width: none; }
}

/* --- Les trois piliers de confiance -------------------------------------- */
.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.4rem; }
.pilier-pic { width: 52px; height: 52px; margin-bottom: 1rem; }
.pilier h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.pilier p { color: var(--ink-soft); margin: 0; }

/* --- Les trois entrées « cadeau / hors-série / lettre » ------------------ */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.6rem; }
.trio-carte {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; display: flex; flex-direction: column;
}
.trio-carte h3 { font-size: 1.16rem; }
.trio-carte p { color: var(--ink-soft); flex: 1; }

/* --- Témoignages : cartes claires, guillemets discrets ------------------- */
.temoignage {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem; box-shadow: none;
}
.temoignage .note { color: var(--sun-deep); letter-spacing: .08em; }

/* --- La parole des fondateurs -------------------------------------------- */
.fondateurs {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center;
}
.fondateurs-photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--sand); }
.fondateurs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fondateurs-mot { font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.65; }
.fondateurs-signature { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin-top: 1rem; }
@media (max-width: 820px) { .fondateurs { grid-template-columns: 1fr; } }

/* --- FAQ dépliable ------------------------------------------------------- */
.faq-accordeon { max-width: 800px; margin-inline: auto; }
.faq-accordeon details {
  border-bottom: 1px solid var(--line); background: transparent; padding: 0;
}
.faq-accordeon summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.4rem 1.25rem 0;
  font-family: var(--font-display); font-weight: 800; font-size: 1.06rem;
  position: relative; color: var(--ink);
}
.faq-accordeon summary::-webkit-details-marker { display: none; }
.faq-accordeon summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--clay); line-height: 1;
}
.faq-accordeon details[open] summary::after { content: "–"; }
.faq-accordeon details > *:not(summary) { color: var(--ink-soft); padding-bottom: 1.25rem; margin: 0; }
.faq-accordeon details > p + p { padding-top: .8rem; }

/* --- Le rappel d'action final -------------------------------------------- */
.cta-final {
  background: var(--forest-dark); color: #fff;
  border-radius: var(--radius-lg); padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: #cddbd2; max-width: 52ch; margin-inline: auto; }
.cta-final .btn-outline { border-color: #fff; color: #fff; }
.cta-final .btn-outline:hover { background: #fff; color: var(--forest-dark); }

/* Le tarif au mois, en pastille. Même charte que le bandeau de l'accueil et
   que le panneau d'économie de /abonnement : aplat jaune, montant en display,
   période en brun. Les sélecteurs sont doublés parce que « .cta-final p »
   impose sa couleur claire et sa largeur de 52 ch à tout paragraphe du bloc. */
.cta-final .cta-final-offre {
  display: inline-flex; align-items: baseline; gap: .55rem;
  margin: .2rem 0 .9rem !important; max-width: none !important;
  padding: .5rem 1.4rem .6rem;
  border-radius: 999px;
  background: #f5c231; color: #2a1e00;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .6);
}
.cta-final .cta-final-offre strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6.5vw, 2.9rem); line-height: 1; letter-spacing: -.03em;
}
.cta-final .cta-final-offre-periode { font-size: 1rem; font-weight: 800; color: #5a4200; }
.cta-final .cta-final-offre .price-star { color: #5a4200; }

/* =========================================================================
   Redressements — ce que styles.css penche, incline ou fait dépasser.

   L'ancien visuel était fait de petits décalages : la pastille de sur-titre
   penchée de 1,4°, les citations posées de travers, un logo de 92 px de haut
   dans l'en-tête. C'est un parti pris cohérent, et c'est exactement l'inverse
   de la maquette de référence, où tout est d'aplomb. Il faut donc l'annuler
   explicitement, sinon la refonte hérite d'un carnet de croquis.
   ========================================================================= */

.eyebrow { transform: none; box-shadow: none; display: inline-block; }
.quote, .quote:nth-child(odd), .quote:nth-child(even) { transform: none; }
.quote p { font-style: normal; }
.card-hover:hover, .brand:hover .brand-logo { transform: translateY(-4px); }
.brand:hover .brand-logo { transform: none; }

/* Un en-tête collant doit être bas : 112 px de haut, il mange un tiers de
   l'écran d'un téléphone à chaque défilement. */
.site-header .header-inner { min-height: 72px; }
.brand-logo { height: 54px; }
.footer-brand .brand-logo { height: 62px; }
@media (max-width: 480px) { .brand-logo { height: 46px; } }

/* Les bandeaux d'appel des autres pages suivent le même dessin que celui de
   l'accueil : même vert, mêmes angles, aucun relief. */
.cta-band, .gift-band {
  background: var(--forest-dark); border-radius: var(--radius-lg); box-shadow: none;
  border: 0;
}
.cta-band::before, .cta-band::after, .gift-band::before, .gift-band::after { content: none; }
.gift-band, .gift-band h2, .gift-band p, .gift-band li { color: #fff; }
.gift-band .kicker { color: var(--sun); }
.gift-preview { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); }

/* Le bandeau de lettre d'information, juste avant le pied de page sombre :
   il fait la transition, donc il est sable et non blanc. */
.lettre-bandeau { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 0; }
.lettre-bandeau::before, .lettre-bandeau::after { content: none; }

/* --- Ajustements mobiles ------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-preuves { gap: 1.1rem 1.8rem; }
}


/* --- Le bandeau d'offre du mois, tout en haut ---------------------------- */
.bandeau-offre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; padding: .6rem 1rem; text-align: center; text-decoration: none;
  background: var(--sun, #f5c231); color: #4a3208;
  font-size: .92rem; line-height: 1.25;
}
.bandeau-offre strong { font-weight: 800; }
.bandeau-offre-detail { opacity: .92; }
/* La date butoir : le seul élément du bandeau qu'on doit lire même en
   diagonale, donc détouré plutôt que simplement gras — sur fond jaune, le gras
   seul ne se distingue plus du nom de l'offre juste à côté. */
.bandeau-offre-limite {
  padding: .1rem .5rem; border-radius: 999px;
  background: #4a3208; color: var(--sun, #f5c231);
  font-weight: 800; white-space: nowrap;
}
.bandeau-offre-lien { font-weight: 800; text-decoration: underline; }
.bandeau-offre:hover { filter: brightness(1.05); }
@media (max-width: 560px) {
  .bandeau-offre { font-size: .82rem; padding: .5rem .8rem; }
  .bandeau-offre-detail { flex-basis: 100%; }
}

/* --- Le compte à rebours de l'offre -------------------------------------- */
/* Les chiffres sont en chasse fixe (tabular-nums) : sans cela, le passage de 9
   à 8 change la largeur du nombre, et toute la ligne tressaute une fois par
   seconde — un mouvement qu'on voit du coin de l'oeil et qui fait fuir le
   regard au lieu de l'attirer. */
.rebours {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rebours-bloc { display: inline-flex; align-items: baseline; gap: .12rem; }
.rebours-bloc strong { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.rebours-bloc span { font-weight: 700; opacity: .75; }

/* Dans le bandeau jaune : détouré comme la date butoir juste à côté, et de la
   même famille qu'elle — ils disent la même chose, l'un en toutes lettres,
   l'autre en chiffres qui descendent. */
.rebours--bandeau {
  padding: .1rem .55rem; border-radius: 999px;
  background: #4a3208; color: var(--sun, #f5c231);
  font-size: .9em;
}
.rebours--bandeau .rebours-bloc span { opacity: .8; font-size: .82em; }

/* Sur une page : plus grand, mais jamais plus grand que le titre au-dessus. */
.rebours--page {
  gap: .55rem; margin-top: .6rem;
  padding: .45rem .9rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sun, #f5c231) 32%, var(--paper));
  color: #4a3208;
}
.rebours--page .rebours-bloc strong { font-size: 1.35rem; line-height: 1; }
.rebours--page .rebours-bloc span { font-size: .8rem; }

/* Passé l'échéance, le script remplace les nombres par une phrase : la règle
   ci-dessous lui rend sa mise en forme de texte. */
.rebours--fini { gap: 0; }

@media (max-width: 560px) {
  .rebours--bandeau { font-size: .84em; }
  .rebours--page .rebours-bloc strong { font-size: 1.15rem; }
}

/* --- La photo du terrain, sur la grille du programme --------------------- *
   Le voile de teinte couvrait la photographie à 74 % en haut et 86 % en bas :
   on ne voyait plus le lieu, seulement un aplat coloré, et douze aventures
   se ressemblaient toutes. Le voile ne sert qu'à une chose — que le titre
   blanc reste lisible — donc il ne couvre plus que le bas de la vignette. */
.adventure-cover--photo::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 23, 15, .08) 0%,
    rgba(8, 23, 15, .16) 40%,
    color-mix(in srgb, #08170f 82%, transparent) 100%);
}
.adventure-cover--photo h3,
.adventure-cover--photo .month,
.adventure-cover--photo .emoji { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }


/* --- La démarcation et le cadeau, dans le premier écran ------------------ */
.revendication {
  margin: 1.1rem 0 0; padding: .85rem 1.1rem;
  border-left: 4px solid var(--sun, #f5c231);
  background: color-mix(in srgb, var(--sun, #f5c231) 14%, transparent);
  border-radius: 0 var(--radius-lg, 14px) var(--radius-lg, 14px) 0;
  font-size: 1.02rem; line-height: 1.45;
}
.hero-cadeau {
  margin: 1rem 0 0; font-size: .95rem; line-height: 1.45;
  color: var(--clay-ink, #8a4521);
}
.hero-cadeau a { font-weight: 800; }


/* --- La note de la fiche Google ----------------------------------------- */
.note-google {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem;
  margin: 1rem 0 0; font-size: .95rem;
}
.note-google .etoiles { color: #f5a623; letter-spacing: .06em; }
.note-google strong { font-weight: 800; }
.note-google a { font-weight: 700; }
.bandeau-confiance .confiance-google .etoiles { color: #f5c231; margin-right: .25rem; }
.bandeau-confiance .confiance-avis { opacity: .85; }
/* Le tarif du bandeau : une seule case, sinon la gouttière du bandeau
   s'insère entre le montant et la virgule qui suit. */
.bandeau-confiance .confiance-prix { display: inline; }



/* --- Le bloc « Où livrer la box », dans l'espace client ------------------ */
.adresse-livraison {
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; margin: 0 0 1.1rem;
}
.adresse-livraison legend {
  padding: 0 .5rem; font-weight: 800; font-size: .95rem; color: var(--clay-ink);
}


/* --- Le coin haut-droit : un seul bouton plein ---------------------------
   « Mon compte » est le bouton d'un abonné, exactement là où un visiteur voit
   « Je rejoins l'aventure ». « Déconnexion », juste à côté, doit rester en
   retrait — deux boutons pleins côte à côte se neutralisent. */
.site-nav .btn-logout {
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  color: var(--ink-soft, #54635a);
  font-weight: 600;
}
.site-nav .btn-logout:hover {
  border-color: currentColor;
  color: var(--ink, #243029);
}


/* --- « Vous recevrez la box du mois », sur la page d'essai --------------- */
.essai-box-du-mois {
  margin: 0 0 1rem; padding: .75rem 1rem;
  border-left: 4px solid var(--forest, #14794f);
  background: color-mix(in srgb, var(--leaf-soft, #e6f2e9) 60%, transparent);
  border-radius: 0 var(--radius-lg, 14px) var(--radius-lg, 14px) 0;
  font-size: .97rem; line-height: 1.4;
}


/* --- Un bouton de navigation n'est pas un lien de texte ------------------
   styles.css colore et souligne « .site-nav a.is-active » : écrit pour les
   liens de texte de la barre, ce style s'appliquait aussi au bouton « Mon
   compte » sur /compte — texte vert et soulignement jaune sur fond sombre.
   Un bouton dit qu'on est sur sa page autrement : en creux, avec un halo. */
.site-nav a.btn.is-active,
.site-nav a.btn:hover {
  text-decoration: none;
}
.site-nav a.btn.is-active {
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun, #f5c231) 55%, transparent);
}


/* --- Le bandeau de consentement -----------------------------------------
   Les deux boutons ont la même taille et le même poids : la loi demande que
   refuser soit aussi simple qu'accepter, et l'œil doit le voir tout de suite. */
.cookie-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.cookie-texte { flex: 1 1 22rem; min-width: 0; }
.cookie-texte p { margin: 0 0 .35rem; }
.cookie-texte p:last-child { margin-bottom: 0; }
.cookie-actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.cookie-actions .btn { min-width: 8.5rem; }
@media (max-width: 560px) {
  .cookie-actions { width: 100%; }
  .cookie-actions .btn { flex: 1; min-width: 0; }
}


/* --- L'histogramme des clics, en CSS ------------------------------------
   Trente barres ne valent pas une bibliothèque de graphiques : elle pèserait
   plus lourd à charger que tout le reste de la page d'administration. */
.histo {
  display: flex; align-items: flex-end; gap: 3px;
  height: 120px; margin: 1rem 0 .4rem;
  padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.histo-barre {
  flex: 1; min-width: 3px; height: var(--h, 2%);
  background: var(--forest, #14794f); border-radius: 2px 2px 0 0;
  transition: background .15s ease;
}
.histo-barre:hover { background: var(--sun, #f5c231); }

/* =========================================================================
   UN SEUL FOND, D'UNE PAGE À L'AUTRE
   -------------------------------------------------------------------------
   Trois traitements de haut de page coexistaient, et cela se voyait au premier
   coup d'œil en passant d'un onglet à l'autre :

   — /abonnement, /qui-sommes-nous, /aventures, /le-grimoire, la FAQ et
     /contact ouvraient sur le voile bleu clair de `.page-head` ;
   — l'accueil et /offrir ouvraient sur du blanc plein (`.hero`) ;
   — /la-box, /essayer et /connexion ouvraient sur le crème du `body`.

   C'est le voile bleu de la FAQ qui est retenu, et il vaut désormais pour
   TOUTES les pages : c'est la charte, pas une exception de gabarit.

   Il est peint une seule fois, sur `main`, et non sur le premier bloc de
   chaque page — un bandeau posé sur `.page-head` fait 250 px sur une page
   et 900 px sur l'accueil, et deux pages n'ouvrent alors plus pareil. Sur
   `main`, sa hauteur est la même partout, quel que soit le bloc qui vient
   dessus. Les blocs de tête ne font plus que se rendre transparents.
   ========================================================================= */
main {
  background-color: var(--cream);
  background-image: linear-gradient(180deg,
    var(--lake-soft, #ddf1fc) 0%,
    color-mix(in srgb, var(--cream) 92%, transparent) 55%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% clamp(300px, 32vw, 440px);
}

/* Les blocs de tête laissent voir le voile au lieu d'en peindre chacun un. */
.hero,
.page-head,
.essai-page,
main > .section:first-of-type,
main > .wrap:first-of-type {
  background: transparent;
  background-image: none;
}
.page-head { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0 clamp(1.4rem, 3vw, 2.2rem); }

/* =========================================================================
   LE PREMIER ÉCRAN DE L'ACCUEIL
   -------------------------------------------------------------------------
   Chez lakube.com comme chez meskits-makeit.com, la même chose est vraie : le
   titre, la phrase, le prix et les deux boutons tiennent dans le premier écran,
   sans défiler. Ici il fallait descendre de deux écrans pour trouver un bouton :
   le titre en capitales occupait 300 px à lui seul, suivi d'un paragraphe de
   cinq lignes, de deux pastilles d'avis et d'une bande de démarcation.

   L'ordre est refait : titre court, une phrase, LE PRIX, les deux boutons.
   Tout le reste — la preuve, la démarcation, le détail de ce qu'il y a dans la
   box, le cadeau — descend sous la ligne de flottaison, où il sera lu par ceux
   qui veulent en savoir plus, et non subi par ceux qui sont déjà décidés.
   ========================================================================= */
.hero { padding-top: clamp(1.1rem, 2.2vw, 1.9rem); }
.hero h1 {
  max-width: 32ch;
  font-size: clamp(1.9rem, 3.9vw, 2.9rem);
  margin-bottom: .7rem;
}
.hero .lead { max-width: 62ch; font-size: clamp(1.02rem, 1.7vw, 1.13rem); }
.hero-actions { margin: 1.2rem 0 .7rem; }

/* La preuve passe SOUS les boutons, sur une seule ligne : deux pastilles
   empilées au-dessus du prix repoussaient le bouton hors de l'écran. */
.hero-preuve {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.4rem; margin: .9rem 0 0;
}
.hero-preuve .note-google, .hero-preuve .avis-badge { margin: 0; }

/* Ce qui descend sous la ligne de flottaison : la démarcation, le détail, le
   cadeau. Une colonne étroite, alignée à gauche — c'est de la lecture, plus
   de l'affichage. */
.hero-details {
  max-width: 52rem; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: left;
}
.hero-details .lead { margin: 1.1rem 0 0; max-width: none; }


/* --- Le tarif de lancement : l'aplat qui doit sauter aux yeux -------------
   Il tenait dans un cadre clair à filet vert, sous une bande crème à filet
   jaune, dans un premier écran qui comptait déjà six blocs : personne ne le
   voyait. C'est pourtant la seule raison de s'abonner MAINTENANT plutôt que
   dans six mois.

   Aplat vert plein, prix en jaune d'affiche, chiffre à la taille d'un titre :
   la référence citée (meskits-makeit.com) affiche « 19 € par mois » dans une
   tuile de couleur haute de 300 px, et c'est la première chose qu'on lit de
   toute sa page d'accueil.

   Le vert plein ne fait pas concurrence aux boutons : ils sont orange, et
   c'est la seule surface orange du premier écran. Rien n'est promis de neuf —
   le verrou de prix est déjà la promesse écrite sur la page des tarifs, et le
   montant vient de `config.plans`, jamais de cette feuille. */
.offre-lancement {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .2rem 1.6rem;
  max-width: 44rem;
  margin: 1.25rem auto 0;
  padding: 1rem 1.5rem 1.1rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--forest-dark, #123c26);
  color: #fff;
  text-align: left;
}
.offre-lancement p { margin: 0; }
.offre-lancement-titre {
  grid-column: 1 / -1;
  margin-bottom: .55rem !important;
  font-weight: 800; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sun, #f5c518);
}
.offre-lancement-prix {
  grid-column: 1;
  display: flex; align-items: baseline; gap: .4rem;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  color: var(--sun, #f5c518);
}
.offre-lancement-prix strong {
  font-size: clamp(2.5rem, 6.4vw, 3.5rem);
  letter-spacing: -.03em; color: inherit;
}
.offre-lancement-unite { font-size: 1rem; font-weight: 700; color: #e7f0e9; }
.offre-lancement-detail {
  grid-column: 2;
  font-size: 1.02rem; font-weight: 700; line-height: 1.35; color: #fff;
}
.offre-lancement-verrou {
  grid-column: 2;
  margin-top: .3rem !important;
  font-size: .88rem; line-height: 1.4; color: #cfe0d5;
}
.offre-lancement-verrou strong { color: var(--sun, #f5c518); }

@media (max-width: 620px) {
  .offre-lancement {
    grid-template-columns: 1fr;
    gap: .35rem 0;
    padding: 1rem 1.1rem 1.1rem;
    margin-top: 1.2rem;
  }
  .offre-lancement-prix, .offre-lancement-detail, .offre-lancement-verrou { grid-column: 1; }
  .offre-lancement-detail { margin-top: .35rem !important; font-size: .96rem; }
}

.hero .eyebrow { margin-bottom: .8rem; }


/* --- La séquence en trois temps, sous le titre ---------------------------
   « Une box arrive. Votre enfant ouvre sa mission. Vous partez dehors. »
   Trois propositions courtes séparées par un point médian : c'est le produit
   raconté en cinq secondes, et c'est ce qui manquait entre le titre et la
   phrase de détail. */
.hero-sequence {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .3rem .9rem;
  margin: 0 auto .9rem; max-width: 56rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  font-weight: 800; line-height: 1.25; color: var(--ink);
}
.hero-sequence span { display: inline-flex; align-items: center; }
.hero-sequence span + span::before {
  content: "→"; margin-right: .9rem; color: var(--clay); font-weight: 800;
}

/* --- Les six raisons d'acheter, sous les boutons -------------------------
   Une grille et non une phrase : six mentions courtes se balaient d'un coup
   d'œil, la même phrase ponctuée de points médians se lit ou ne se lit pas. */
.hero-atouts {
  list-style: none; margin: 1.2rem auto 0; padding: 0;
  max-width: 54rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1rem;
}
.hero-atouts li {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: .88rem; font-weight: 700; color: var(--ink);
  text-align: left;
}
.hero-atouts li span { font-size: 1.05rem; line-height: 1; }
@media (max-width: 780px) { .hero-atouts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .hero-atouts { grid-template-columns: 1fr; } }

/* --- L'économie, dans le bandeau du tarif -------------------------------
   « −57 % » demande une règle de trois pour signifier quelque chose.
   « Vous économisez 198 € » est un montant, et un montant se comprend sans
   calcul. Les deux disent la même chose ; un seul se lit. */
.offre-lancement-economie {
  grid-column: 2;
  margin-top: .45rem !important;
  font-size: .95rem; line-height: 1.35; color: #e7f0e9;
}
.offre-lancement-economie strong { color: var(--sun, #f5c518); font-weight: 800; }
.offre-lancement-detail strong { color: #fff; }
@media (max-width: 620px) {
  .offre-lancement-economie { grid-column: 1; }
}


/* =========================================================================
   LES TROIS FORMULES
   -------------------------------------------------------------------------
   Trois colonnes, celle du milieu surélevée. Ce n'est pas une coquetterie :
   un tableau de prix où les trois colonnes se valent laisse le visiteur
   choisir seul, et un visiteur qui doit choisir seul reporte. La colonne
   recommandée est plus haute, plus large, sur fond vert, et c'est la seule
   qui porte un bouton plein.
   ========================================================================= */
.formules-3 {
  display: grid; gap: 1.2rem;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: center;
}
.formule {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.formule--vedette {
  position: relative;
  padding: 2.1rem 1.7rem 1.9rem;
  border: 0; background: var(--forest-dark, #123c26); color: #fff;
  box-shadow: var(--shadow-lg);
}
.formule-ruban {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  margin: 0; padding: .34rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--sun); color: #3a2a00;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.formule-titre {
  margin: 0 0 .6rem; font-family: var(--font-display);
  font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay-ink);
}
.formule--vedette .formule-titre { color: var(--sun); }
.formule-prix {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem;
  margin: 0; font-family: var(--font-display); line-height: 1;
}
.formule-prix strong { font-size: clamp(2.1rem, 4.4vw, 2.9rem); letter-spacing: -.03em; }
.formule--vedette .formule-prix strong { color: var(--sun); }
.formule-prix-periode { font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.formule--vedette .formule-prix-periode { color: #cfe0d5; }
.formule-mensuel { margin: .45rem 0 0; font-size: .98rem; color: var(--ink-soft); }
.formule-mensuel strong { color: var(--ink); font-weight: 800; }
.formule--vedette .formule-mensuel { color: #e7f0e9; }
.formule--vedette .formule-mensuel strong { color: #fff; }
.formule-economie {
  margin: .8rem 0 0; padding: .5rem .8rem;
  border-radius: var(--radius);
  background: rgba(245, 197, 24, .16);
  font-size: .93rem; line-height: 1.35; color: #fff;
}
.formule-economie strong { color: var(--sun); font-weight: 800; }
.formule-liste { list-style: none; margin: 1.1rem 0 1.4rem; padding: 0; }
.formule-liste li {
  position: relative; padding-left: 1.5rem; margin-bottom: .42rem;
  font-size: .96rem; line-height: 1.35;
}
.formule-liste li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--moss-ink, #1a6b42);
}
.formule--vedette .formule-liste li::before { color: var(--sun); }
.formule-action { margin-top: auto; text-align: center; }
.formule--vedette .btn-outline { border-color: #fff; color: #fff; }

.formules-note {
  max-width: 46rem; margin: 1.8rem auto 0; text-align: center;
  font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft);
}
.formules-note strong { color: var(--ink); }
.formules-note a { font-weight: 800; white-space: nowrap; }

/* L'accroche seule sous le bandeau.

   Cette phrase est le seul contenu de sa section : le rythme normal des
   sections (jusqu'à 6,5 rem de blanc en haut) plus la marge de
   `.formules-note` — héritée du temps où elle suivait trois cartes de
   formules — creusaient près de deux cents pixels de vide entre
   l'étiquette jaune du bandeau et la première ligne de texte. Une phrase
   seule ne demande pas le même sas. */
.section-accroche { padding-top: clamp(1.4rem, 2.6vw, 2.4rem); }
.section-accroche .formules-note { margin-top: 0; }

@media (max-width: 900px) {
  .formules-3 { grid-template-columns: 1fr; gap: 1.6rem; }
  .formule--vedette { order: -1; }
}


/* =========================================================================
   « REPÉRÉ À PIED » — le bloc qui porte l'argument
   -------------------------------------------------------------------------
   Deux colonnes : la promesse à gauche, la liste de ce qui est vérifié à
   droite. La liste fait le travail — huit lignes cochées disent mieux qu'un
   paragraphe que quelqu'un est allé sur place.
   ========================================================================= */
.usp {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
.usp-texte h2 { margin: .5rem 0 .9rem; }
.usp-chute {
  margin: 1.1rem 0 0; padding: .8rem 1.1rem;
  border-left: 4px solid var(--clay);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--clay-soft);
  font-size: 1.06rem; color: var(--clay-ink);
}
.usp-liste {
  list-style: none; margin: 0; padding: 1.5rem 1.7rem;
  border-radius: var(--radius-lg);
  background: var(--forest-dark, #123c26); color: #fff;
  display: grid; gap: .1rem;
}
.usp-liste li {
  position: relative; padding: .5rem 0 .5rem 2rem;
  font-size: 1rem; line-height: 1.35;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.usp-liste li:last-child { border-bottom: 0; }
.usp-liste li::before {
  content: "✓"; position: absolute; left: 0; top: .5rem;
  font-weight: 800; color: var(--sun);
}
@media (max-width: 860px) { .usp { grid-template-columns: 1fr; } }


/* --- « Zéro préparation » : les six choses déjà faites ------------------- */
.preparation {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.preparation li {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
  font-size: .96rem; line-height: 1.45; color: var(--ink-soft);
}
.preparation li span { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: .5rem; }
.preparation li strong {
  font-family: var(--font-display); font-size: 1.06rem; font-weight: 800; color: var(--ink);
}
.preparation-note {
  margin: 1.6rem auto 0; max-width: 44rem; text-align: center;
  font-size: .98rem; color: var(--ink-soft);
}
.preparation-note a { font-weight: 800; white-space: nowrap; }
@media (max-width: 860px) { .preparation { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .preparation { grid-template-columns: 1fr; } }


/* --- La comparaison ------------------------------------------------------
   Un tableau, et non deux listes côte à côte : la valeur d'une comparaison
   tient dans le fait que les deux colonnes se lisent LIGNE À LIGNE. */
.comparo-cadre {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.comparo { width: 100%; border-collapse: collapse; min-width: 34rem; }
.comparo th {
  padding: 1rem 1.3rem; text-align: left;
  font-family: var(--font-display); font-size: 1rem; font-weight: 800;
  border-bottom: 1px solid var(--line);
}
.comparo th:first-child { color: var(--ink-soft); }
.comparo th:last-child { color: #fff; background: var(--forest-dark, #123c26); }
.comparo td {
  padding: .85rem 1.3rem; font-size: .98rem; line-height: 1.35;
  border-bottom: 1px solid var(--line-soft);
}
.comparo td:first-child { color: var(--ink-soft); width: 50%; }
.comparo td:last-child {
  font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--leaf-soft, #e4f1e8) 55%, #fff);
}
.comparo tbody tr:last-child td { border-bottom: 0; }
.comparo td span { margin-right: .4rem; }


/* --- Les quatre temps du cadeau ------------------------------------------ */
.cadeau-temps {
  list-style: none; margin: 0 0 clamp(2rem, 4vw, 2.8rem); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
.cadeau-temps li {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1rem;
  border: 1px solid var(--gift-soft); border-radius: var(--radius);
  background: var(--gift-soft);
  font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--gift-ink);
}
.cadeau-temps li span { font-size: 1.25rem; line-height: 1; }
@media (max-width: 860px) { .cadeau-temps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cadeau-temps { grid-template-columns: 1fr; } }


/* --- Le panneau d'économie de /abonnement --------------------------------
   Le gros chiffre y était un pourcentage. Il porte maintenant un montant, et
   le mot « économisés » sous lui : sans ce mot, « 198 € » posé à côté de
   « 150 € » se lirait comme un second prix. */
.economie-chiffre small {
  display: block; margin-top: .25rem;
  font-family: var(--font); font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--forest, #14794f);
}


/* --- Resserrage final du premier écran -----------------------------------
   Le titre, la séquence, la promesse, le prix et les deux boutons doivent
   tenir ensemble sans défiler, y compris sur un écran d'ordinateur portable
   dont la fenêtre utile fait 700 px de haut. Chaque interligne gagné ici est
   un bouton qui reste visible. */
.hero { padding-top: clamp(.7rem, 1.5vw, 1.3rem); }
.hero .eyebrow { margin-bottom: .6rem; }
.hero h1 { margin-bottom: .55rem; }
.hero-sequence { margin-bottom: .55rem; }
.hero .lead { margin: 0 auto; font-size: clamp(.98rem, 1.5vw, 1.06rem); }
.offre-lancement { margin-top: 1rem; padding: .9rem 1.4rem 1rem; }
.offre-lancement-verrou { font-size: .85rem; }
.hero-actions { margin: 1rem 0 .6rem; }
/* L'angle du cadre : sans cela, l'aplat vert de l'en-tête dépasse du coin
   arrondi de la carte et lui fait une écaille. */
.comparo th:last-child { border-top-right-radius: calc(var(--radius-lg) - 1px); }


/* --- « Cher par rapport à quoi ? » ---------------------------------------
   Trois sorties ordinaires en gris, la nôtre en vert plein dessous. La
   comparaison ne chiffre pas les autres — nous ne fixons pas leurs prix —
   elle les nomme, ce qui suffit : le lecteur connaît déjà l'addition. */
.cout-sortie {
  max-width: 46rem; margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.cout-sortie-titre {
  margin: 0 0 .9rem; font-family: var(--font-display);
  font-size: 1.12rem; font-weight: 800; color: var(--ink);
}
.cout-sortie ul { list-style: none; margin: 0; padding: 0; }
.cout-sortie li {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; color: var(--ink-soft);
}
.cout-sortie li span { font-size: 1.15rem; line-height: 1; }
.cout-sortie-nous {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1.1rem 0 0; padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--forest-dark, #123c26); color: #e7f0e9;
  font-size: .98rem; line-height: 1.45;
}
.cout-sortie-nous span { font-size: 1.25rem; line-height: 1.2; }
.cout-sortie-nous strong { color: var(--sun, #f5c518); }
/* L'économie s'affiche aussi sur les cartes claires : même bloc, contraste
   inversé — jaune sur vert dans la carte recommandée, encre sur crème
   ailleurs. */
.formule .formule-economie {
  background: var(--sun-soft, #fdf3cf); color: var(--sun-ink, #7a5600);
}
.formule .formule-economie strong { color: var(--clay-ink); }
.formule--vedette .formule-economie {
  background: rgba(245, 197, 24, .16); color: #fff;
}
.formule--vedette .formule-economie strong { color: var(--sun, #f5c518); }


/* --- La boucle vidéo du bandeau ------------------------------------------
   Elle occupe exactement la place qu'occupait la photo de la box : même
   cadre, mêmes angles, mêmes bulles autour. Seul le contenu bouge. */
.banniere-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: #cbb391;
}
/* L'image de repli, à l'intérieur de la balise vidéo : elle ne s'affiche que
   si le navigateur ne sait lire ni le WebM ni le MP4. Elle reprend alors le
   cadrage de l'affiche imprimée, comme avant. */
.banniere-video img {
  position: absolute; left: -64.1%; top: -58.3%;
  width: 164.1%; height: auto; max-width: none;
}
/* Le bandeau d'économie des cartes claires était illisible : le blanc de la
   règle générique passait devant sur fond jaune pâle. On fixe encre et jaune
   ensemble, sans compter sur l'héritage. */
.formule:not(.formule--vedette) .formule-economie {
  background: var(--sun-soft, #fdf3cf);
  border: 1px solid var(--sun, #f5c518);
  color: #4a3208;
}
.formule:not(.formule--vedette) .formule-economie strong { color: var(--clay-ink, #b8500f); }


/* --- Ce que le parent y gagne --------------------------------------------
   Trois blocs, avant la liste de ce qui est déjà préparé. L'ordre n'est pas
   décoratif : « rien à préparer » est un soulagement, mais ce n'est pas ce
   qu'on achète. Ce qu'on achète, c'est la matinée avec eux. */
.gains {
  list-style: none; margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.gains li {
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--forest-dark, #123c26); color: #cfe0d5;
  font-size: .96rem; line-height: 1.5;
}
.gains li span { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: .6rem; }
.gains li strong {
  display: block; margin-bottom: .45rem;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--sun, #f5c518);
}
.gains-bascule {
  max-width: 42rem; margin: 0 auto clamp(1.4rem, 3vw, 2rem);
  text-align: center; font-size: 1.05rem; color: var(--ink-soft);
}
.gains-bascule strong { color: var(--ink); }
@media (max-width: 860px) { .gains { grid-template-columns: 1fr; } }
/* L'accroche de la page contact : elle doit tenir d'un seul tenant tant que
   l'écran le permet — « au plus vite » renvoyé seul en dessous ressemblait à
   une note ajoutée après coup. Sur téléphone elle se replie normalement. */
.contact-accroche { max-width: 62rem; text-wrap: pretty; }


/* =========================================================================
   LE BANDEAU VERT DE TÊTE
   -------------------------------------------------------------------------
   C'est l'en-tête de l'affiche de « La box », copié au chiffre près : mêmes
   cotes en pixels — 1024 × 360, titre 74 px, ligne 29 px, badge 238 px,
   marges 44/300/0/52 — même photo, même dégradé, même badge.

   Et surtout la MÊME façon de rétrécir. L'affiche de « La box » est dessinée
   à 1024 px puis réduite par transformation quand la place manque, jamais
   agrandie au-delà. Une première version d'ici exprimait tout en pourcentages
   de la largeur : les proportions étaient justes, mais les tailles ne
   tombaient pas sur les mêmes pixels, et le titre comme le badge paraissaient
   plus petits. Reprendre le mécanisme d'origine était le seul moyen d'obtenir
   exactement le même bloc.

   Le facteur de réduction est posé par main.js, comme sur « La box ».
   ========================================================================= */
.bandeau-vert-scene {
  width: 1024px; max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
}
.bandeau-vert {
  /* Retour aux 360 px de l'affiche imprimée. Les 70 px supplémentaires
     avaient été ajoutés pour loger la pastille du tarif sous la ligne en
     italique ; le tarif est parti sur /tarifs, et l'encadré gardait un vide
     que rien ne remplissait. */
  width: 1024px; height: 360px;
  position: relative; overflow: hidden;
  transform-origin: top left;
  padding: 44px 300px 0 52px;
  text-align: left;
  background: url("/images/photos/lieu-lac-bleu-carnelle.jpg") center 42% / cover no-repeat;
}
.bandeau-vert::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(20, 64, 42, .94) 0%, rgba(20, 64, 42, .88) 46%,
    rgba(20, 64, 42, .42) 72%, rgba(20, 64, 42, .18) 100%);
}
.bandeau-vert > * { position: relative; z-index: 1; }

.bandeau-vert h1 {
  margin: 0; max-width: none;
  font-family: var(--font-display);
  font-size: 74px; line-height: 1; font-weight: 900;
  color: #fff; text-transform: uppercase; letter-spacing: -1.5px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}
.bandeau-vert h1 em { font-style: normal; color: #f5c231; }

.bandeau-vert p {
  /* 672 px = toute la largeur laissée par le retrait de droite du badge. La
     ligne insécable en a besoin ; les mots qui la précèdent, non — ils se
     coupent au même endroit qu'avant. */
  margin: 22px 0 0; max-width: 672px;
  font-size: 29px; line-height: 1.14; font-weight: 700; font-style: italic;
  color: #eef7f1; text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.bandeau-vert p b { color: #f5c231; }
.bandeau-vert-suite { white-space: nowrap; }

.bandeau-vert-badge {
  position: absolute; z-index: 1;
  top: 44px; right: 44px; width: 238px; height: 238px;
  background: url("/images/logo-badge.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .5));
}

/* Sous 760 px, « La box » défait son affiche en colonne fluide et son script
   se retire. On fait pareil : le bandeau reprend une hauteur libre et des
   tailles en pourcentage de l'écran, sinon le titre déborde du cadre. */
@media (max-width: 760px) {
  .bandeau-vert-scene { width: 100%; }
  .bandeau-vert {
    width: 100%; height: auto; min-height: 168px;
    transform: none !important;
    padding: 5% 26% 5% 5%;
  }
  .bandeau-vert h1 { font-size: clamp(1.55rem, 7.2vw, 2.9rem); letter-spacing: -.5px; }
  .bandeau-vert p { font-size: clamp(.92rem, 4.1vw, 1.4rem); margin-top: 12px; max-width: none; }
  /* Sous 760 px il n'y a plus de largeur à défendre : l'insécable ferait
     déborder la ligne hors du cadre. */
  .bandeau-vert-suite { white-space: normal; }
  .bandeau-vert-badge { top: 5%; right: 3.5%; width: 21%; height: auto; aspect-ratio: 1; }
}

/* Le tarif reprend juste sous le bandeau. */
.bandeau-vert-scene + .offre-lancement { margin-top: clamp(1rem, 2.4vw, 1.6rem); }

/* --- Le bouton du son de la vidéo ----------------------------------------
   Dans le coin bas-droit du cadre vidéo, assez lisible pour se voir sur une
   image claire comme sur une image sombre — d'où l'aplat encre plutôt qu'un
   simple pictogramme posé sur la photo. */
.banniere-son {
  position: absolute; z-index: 5; right: .6rem; bottom: .6rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .42rem .8rem;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(18, 60, 38, .82); color: #fff;
  font: inherit; font-size: .82rem; font-weight: 800; line-height: 1;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background-color .15s ease;
}
.banniere-son:hover { background: var(--forest-dark, #123c26); }
.banniere-son:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.banniere-son .banniere-son-actif { display: none; }
.banniere-son[aria-pressed="true"] .banniere-son-muet { display: none; }
.banniere-son[aria-pressed="true"] .banniere-son-actif { display: inline; }
.banniere-son[aria-pressed="true"] { background: var(--clay, #e8762c); }
@media (max-width: 480px) {
  .banniere-son-mot { display: none; }
  .banniere-son { padding: .45rem .55rem; }
}


/* --- Le tarif, dans le bandeau vert --------------------------------------
   Il était dans un encadré séparé, sous le bandeau, et répétait mot pour mot
   ce que les trois formules annoncent quelques centimètres plus bas. Le prix
   doit se lire dans le même coup d'œil que le titre : il est donc entré dans
   le bandeau, en une ligne.

   Les cotes sont en pixels comme tout le reste du bandeau — c'est ce qui
   permet à la réduction d'ensemble de le rétrécir avec lui, sans dérive. */
/* La première ligne garde l'alignement sur la ligne de base : la mention, le
   montant et la période se lisent d'un seul trait. */
/* Le total en second rang : présent, mais assez discret pour ne pas disputer
   au montant mensuel le coup d'œil qu'on donne au bandeau. */

@media (max-width: 760px) {
}


/* =========================================================================
   LA BOX DÉBALLÉE — la photo, et la liste en regard
   -------------------------------------------------------------------------
   Le contenu de la box s'affichait en cases numérotées côte à côte : neuf
   blocs de même poids, qu'on parcourt sans en lire aucun. Une photo de la
   box ouverte, et à côté la liste de ce qu'on en sort, c'est l'ordre dans
   lequel on découvre un carton.

   La photo reste à hauteur pendant qu'on descend la liste : sans cela elle
   sort de l'écran dès la troisième entrée, et la liste se retrouve seule.
   ========================================================================= */
.apercu {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}
.apercu-photo {
  position: sticky; top: calc(var(--hauteur-entete, 86px) + 1rem);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
}
.apercu-photo img { display: block; width: 100%; height: auto; }

.apercu-liste { list-style: none; margin: 0; padding: 0; }
.apercu-liste > li {
  padding: 1.15rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
}
.apercu-liste > li:first-child { padding-top: 0; }
.apercu-liste > li:last-child { border-bottom: 0; }
.apercu-liste h3 {
  margin: 0 0 .4rem;
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 800;
  color: var(--ink);
}
.apercu-liste p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.apercu-liste strong { color: var(--ink); }

/* La pastille « à garder », quand une entrée en porte une. */
.apercu-flag {
  display: inline-block; margin-top: .5rem;
  padding: .24rem .7rem; border-radius: var(--radius-pill);
  background: var(--sun-soft, #fdf3cf); color: #4a3208;
  font-size: .78rem; font-weight: 800;
}

@media (max-width: 860px) {
  .apercu { grid-template-columns: 1fr; }
  .apercu-photo { position: static; max-width: 26rem; margin-inline: auto; }
}


/* =========================================================================
   LES HAUTS DE PAGE, TOUS PAREILS
   -------------------------------------------------------------------------
   Chaque page ouvrait à sa façon : « Début de l'expédition » centrait son
   titre dans une colonne étroite, « La box » l'alignait à gauche dans une
   colonne large, d'autres passaient par `.section-head` qui bride la largeur
   et colle à gauche. Trois arrivées différentes pour un même site.

   C'est le modèle de « Début de l'expédition » qui fait loi : sur-titre en
   petites capitales orange, titre centré, phrase centrée sous lui. La règle
   est portée ici, sur `.page-head`, plutôt que recopiée dans chaque gabarit —
   une règle recopiée douze fois est une règle qu'on oubliera la treizième.
   ========================================================================= */
.page-head { text-align: center; }
.page-head .wrap,
.page-head .wrap-narrow { display: block; }
.page-head .section-head {
  max-width: 52rem;
  margin-left: auto; margin-right: auto;
  margin-bottom: 0;
  text-align: center;
}
.page-head h1 {
  max-width: 22ch;
  margin-left: auto; margin-right: auto;
}
.page-head .kicker,
.page-head .eyebrow { display: block; margin-bottom: .7rem; }
.page-head p:not(.kicker) {
  max-width: 58ch;
  margin-left: auto; margin-right: auto;
}

/* La pastille du sur-titre n'a plus lieu d'être : sur « Début de l'expédition »
   comme sur « Qui sommes-nous », le sur-titre est du texte, pas un bouton. */
.page-head .eyebrow,
.hero .eyebrow {
  background: transparent; padding: 0; border-radius: 0;
  font-size: .74rem; letter-spacing: .18em; color: var(--clay-ink);
}


/* =========================================================================
   LE BANDEAU D'INVITATION DU GRIMOIRE
   -------------------------------------------------------------------------
   La page la plus visitée du site est aussi la seule qui ne demandait rien.
   Ce bandeau dit d'où viennent les fiches et ce qu'on peut en faire de plus,
   sans revenir sur la gratuité — qui reste écrite juste au-dessus.

   Deux colonnes : le propos à gauche, l'offre à droite, sur fond vert. Ce
   n'est pas un encadré discret : c'est la seule chose à vendre de la page,
   et elle ne doit pas se confondre avec une fiche de plus.
   ========================================================================= */
.grimoire-invite {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-lg);
  background: var(--forest-dark, #123c26); color: #cfe0d5;
  text-align: left;
}
.grimoire-invite p { margin: 0; }
.grimoire-invite-titre {
  margin-bottom: .6rem !important;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 800; line-height: 1.2; color: #fff;
}
.grimoire-invite-mot > p { font-size: 1rem; line-height: 1.5; }
.grimoire-invite-mot strong { color: #fff; }
.grimoire-invite-atouts {
  margin-top: .7rem !important;
  font-size: .88rem; font-weight: 700; color: var(--sun, #f5c518);
}

/* Deux boutons, côte à côte sur une même ligne : empilés, ils lisaient
   comme un choix hiérarchisé alors qu'ils sont de même rang, et l'encadré
   s'étirait en hauteur pour rien. Ils passent l'un sous l'autre seulement
   quand la largeur ne suffit plus. */
.grimoire-invite-offre {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .7rem;
  text-align: center;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}
.grimoire-invite-offre .btn { margin: 0; }

@media (max-width: 860px) {
  .grimoire-invite { grid-template-columns: 1fr; }
}
/* Les cases de « ce qui se passe avant que la box parte » portent un
   pictogramme de texte, là où « Comment ça marche » a des dessins. Même
   gabarit, même taille apparente. */
.etape-pic-emoji { font-size: 34px; line-height: 44px; }
.usp-chute.center {
  max-width: 40rem; margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  text-align: center;
}
/* La porte vers la FAQ, au bas de l'accueil : les sept questions qui y
   vivaient sont toutes sur /faq, au mot près, et les répéter ici faisait
   deux endroits à tenir à jour. */
.cta-final-faq { margin: 1.1rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .78); line-height: 1.7; }
/* Le lien tient sur sa ligne d'un bloc : coupé en deux, il ne se lit plus
   comme la réponse à la question posée juste au-dessus. */
.cta-final-faq a { color: var(--sun, #f5c518); font-weight: 700; white-space: nowrap; }


/* =========================================================================
   LE SUR-TITRE DE RUBRIQUE — une seule apparence, partout
   -------------------------------------------------------------------------
   « Début de l'expédition » l'affichait en petites capitales orange de 0,8 rem,
   « La box » en 1,08 rem : même classe, deux tailles. La cause est discrète —
   `.section-head p` fixe une taille de paragraphe, et sa spécificité (0,1,1)
   l'emporte sur celle de `.kicker` (0,1,0). Les pages dont le sur-titre est
   posé dans un `.section-head` héritaient donc de la taille du corps de texte,
   les autres non.

   La règle est réaffirmée ici à une spécificité qui gagne dans les deux cas,
   plutôt qu'en retouchant `.section-head p` — ce paragraphe-là a sa raison
   d'être, c'est le chapeau de section.
   ========================================================================= */
.kicker,
.section-head .kicker,
.page-head .kicker,
p.kicker {
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay-ink);
  margin: 0 0 .7rem;
}

/* Les deux fonds sombres gardent leur sur-titre jaune : l'orange de la marque
   n'y passerait pas. Réaffirmés APRÈS la règle générale, sinon elle les
   emporterait — c'est exactement le piège qu'on vient de corriger. */
.gift-band .kicker,
.section-gosses .kicker,
.cta-final .kicker { color: var(--sun); }


/* =========================================================================
   LA MÊME RESPIRATION SOUS L'EN-TÊTE, SUR TOUTES LES PAGES
   -------------------------------------------------------------------------
   Le blanc entre la barre de navigation et le premier titre variait selon le
   bloc qui ouvrait la page : `.page-head` a sa marge, `.hero` en avait une
   autre — c'est le cas d'« Offrir » —, et les pages qui démarrent sur une
   `.section` ordinaire, comme la connexion, héritaient de la marge d'une
   section de contenu, deux fois plus grande.

   Une seule valeur, donc, celle de `.page-head`, appliquée à tous les blocs
   susceptibles d'ouvrir une page.
   ========================================================================= */
.hero,
.essai-page,
main > .section:first-of-type {
  padding-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

/* L'accueil garde son ouverture serrée : le bandeau vert est une image, elle
   n'a pas besoin d'air au-dessus, et chaque pixel gagné ici est un pixel de
   plus pour le tarif dans le premier écran. */
.hero-accueil { padding-top: clamp(.7rem, 1.5vw, 1.3rem); }


/* --- Le déroulé de « Début de l'expédition », recentré -------------------
   Le reste de la page est centré ; le déroulé, lui, alternait photo à gauche
   puis photo à droite, texte aligné à gauche — une colonne qui zigzague au
   milieu d'une page centrée casse le rythme au lieu de le tenir.

   La photo passe au-dessus, le texte dessous, tous deux centrés. L'alternance
   gauche-droite disparaît avec elle : elle n'avait de sens qu'en deux
   colonnes. Les étapes se lisent alors comme les cases de « Comment ça
   marche », en plus détaillé. */
.parcours { max-width: 46rem; margin-inline: auto; }
.parcours-etape {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 1rem;
}
.parcours-etape:nth-child(even) .parcours-visuel { order: 0; }
.parcours-visuel { max-width: 340px; }
.parcours-visuel .photo { max-width: 340px; }
.parcours-titre { justify-content: center; }
.parcours-repere { margin-inline: auto; }


/* ---------------------------------------------------------------------------
   « Début de l'expédition » — le bloc de questions, centré.

   « texte-centre » ne vise que ses ENFANTS DIRECTS : les titres, les paragraphes
   et le bouton qui suit « Et dans la box, il y a quoi ? ». Le bandeau d'essai
   qui vit dans le même empilement est une ligne en flex, et le bandeau vert
   gère déjà son propre centrage — les toucher tous les deux casserait leur
   mise en page pour un gain nul.
   --------------------------------------------------------------------------- */
.texte-centre > h2,
.texte-centre > h3,
.texte-centre > p { text-align: center; }
.texte-centre > p { margin-inline: auto; }

/* De l'air avant le bandeau bleu : il arrive après une série de questions
   serrées, et sans respiration il se lit comme la réponse à la dernière. */
.avant-essai { margin-top: clamp(2.6rem, 6vw, 4.6rem); }

/* Le prix dans un bandeau vert : il se lit avant la phrase qui le justifie,
   donc il passe devant en taille, et l'or le détache du fond sombre. */
.cta-band-prix { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: .4rem; }
.cta-band-prix strong { color: var(--sun); font-size: 1.35em; }

/* --- La box du mois, nommée -----------------------------------------------
   Deux endroits, une même idée : « 12 aventures » et « la box » sont des
   promesses abstraites, le titre du mois en cours est une chose concrète. */

/* Sur l'accueil, sous les deux boutons : une pastille, pas un troisième
   bouton — trois boutons de même poids, c'est trois fois personne qui
   clique. */
.hero-mois-ligne { margin: .9rem 0 0; }
.hero-mois {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .95rem; border-radius: 999px;
  border: 2px dashed currentColor;
  font-size: .95rem; text-decoration: none; color: inherit;
}
.hero-mois strong { font-weight: 800; }
.hero-mois:hover { background: rgba(255, 255, 255, .14); }

/* Sur /la-box, juste avant l'encadré vert : la photo à gauche, le nom et les
   repères à droite. */
.mois-encadre {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 1.6rem; align-items: center;
  padding: 1.4rem; border-radius: var(--radius-lg, 20px);
  border: 3px solid var(--cover, #2f8fbf);
  background: color-mix(in srgb, var(--cover, #2f8fbf) 7%, #fff);
}
.mois-visuel img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius, 14px);
}
.mois-texte h2 { margin: .2rem 0 .5rem; }
.mois-lieu { margin: 0 0 .6rem; font-weight: 700; }
.mois-teaser { margin: 0 0 .9rem; font-style: italic; }
.mois-reperes {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.1rem; padding: 0;
}
.mois-reperes span {
  padding: .2rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cover, #2f8fbf) 16%, #fff);
  font-size: .86rem; font-weight: 700;
}
@media (max-width: 760px) {
  .mois-encadre { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* --- La carte du programme, sur /aventures ---------------------------------
   Un fond de département en aplat, des points volontairement gros : à cette
   taille un point couvre plusieurs kilomètres, ce qui est l'intention — la
   fiche donne l'adresse, la carte donne la région. */
.carte-aventures { margin: 0 0 2.4rem; }
.carte-aventures-svg {
  display: block; width: 100%; height: auto;
  max-width: 720px; margin: 0 auto;
  background: #eaf2f6; border-radius: var(--radius-lg, 20px);
}
.carte-dep { fill: #dbe6ec; stroke: #fff; stroke-width: 1.5; }
.carte-dep--idf { fill: #cfe3d6; }
.carte-paris { fill: #4a3208; }
.carte-paris-nom {
  fill: #4a3208; font-size: 22px; font-weight: 800;
  font-family: inherit; paint-order: stroke; stroke: #eaf2f6; stroke-width: 4;
}
.carte-point { fill: #b23c14; stroke: #fff; stroke-width: 3; transition: r .12s ease; }
/* Les hors-séries : le même point, évidé. Ils ne sont pas dans le calendrier,
   ils ne doivent pas se compter avec les douze. */
.carte-point--hs { fill: #fff; stroke: #b23c14; }
.carte-aventures-svg a:hover .carte-point,
.carte-aventures-svg a:focus .carte-point { r: 19; }

.carte-legende {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem;
  margin-top: .8rem; font-size: .9rem;
}
.carte-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.carte-puce {
  width: .85rem; height: .85rem; border-radius: 50%;
  background: #b23c14; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #b23c14;
}
.carte-puce--hs { background: #fff; }

/* =========================================================================
   L'ENCADRÉ D'INVITATION — bas d'une fiche d'aventure verrouillée
   -------------------------------------------------------------------------
   Il reprend la relance de l'accueil (.cta-final) : même aplat vert de
   l'affiche, même sur-titre jaune, mêmes deux boutons. Trois écarts, et
   trois seulement :

   — il est plus haut, parce qu'il est seul en bas d'une page longue et qu'il
     doit se voir arriver plutôt que se terminer ;
   — il porte un filet jaune, le seul de ce genre sur le site : c'est ce qui
     le distingue d'une relance générique quand on a lu la fiche jusqu'ici ;
   — la pastille du verrou passe du jaune pâle au jaune franc, avec son encre
     brune : sur le vert sombre, le gris clair des paragraphes de .cta-final
     l'effacerait.
   ========================================================================= */
.offre-invitation {
  background: linear-gradient(158deg, var(--forest) 0%, var(--forest-dark) 70%);
  border: 3px solid var(--sun);
  padding: clamp(2.6rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 3.4rem);
}
/* Le sur-titre était bien centré DANS son bloc — mais son bloc, lui, ne
   l’était pas : « .cta-final p » lui donne une largeur de 52 ch, et la règle
   « p.kicker », écrite plus bas dans ce fichier, remettait sa marge à zéro.
   Le texte se centrait donc au milieu d’une colonne collée à gauche. */
.offre-invitation .kicker {
  color: var(--sun); text-align: center;
  max-width: none; margin: 0 auto .9rem;
}
.offre-invitation .hero-actions { margin-top: 1.7rem; }
/* La pastille du verrou : le jaune de l'affiche, l'encre brune de la pastille
   de tarif, et pas la largeur de 52 ch que .cta-final impose aux paragraphes. */
.offre-invitation .offre-verrou {
  background: var(--sun); color: #5a4200;
  max-width: none; margin: 1.5rem auto 0;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .6);
}
/* Le rappel du calendrier et du cadeau : lisible, mais après les boutons. */
.offre-invitation .offre-invitation-note {
  margin: 1.7rem auto 0; max-width: 56ch;
  font-size: .93rem; color: rgba(255, 255, 255, .78);
}

/* =========================================================================
   LE COMPARATIF DES TROIS FORMULES
   -------------------------------------------------------------------------
   Il ne redit pas les cartes : il répond aux questions qui viennent APRÈS les
   trois prix — ce que ça fait au mois, ce qui part de la banque, à quoi on
   s'engage. Une colonne est mise en avant, la même que la carte vedette, pour
   qu'on lise les deux comme un seul objet.

   Le tableau défile horizontalement dans son propre cadre : rétrécir la
   typographie jusqu'à faire tenir quatre colonnes sur un téléphone rend
   illisible exactement ce qu'on demande de comparer.
   ========================================================================= */
.comparatif-cadre {
  margin: clamp(1.6rem, 3.5vw, 2.6rem) auto 0;
  max-width: 52rem; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper);
}
.comparatif {
  width: 100%; min-width: 34rem;
  border-collapse: collapse;
  font-size: .95rem;
}
.comparatif-legende {
  caption-side: top; text-align: left;
  padding: 1.1rem 1.2rem .2rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay-ink);
}
.comparatif th, .comparatif td {
  padding: .8rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.comparatif thead th { border-bottom: 2px solid var(--line); vertical-align: bottom; }
.comparatif tbody tr:last-child th,
.comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif tbody th {
  font-weight: 700; color: var(--ink-soft); font-size: .9rem;
  white-space: nowrap;
}
.comparatif-nom {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: .95rem; letter-spacing: -.01em;
}
.comparatif-prix {
  display: block; margin-top: .15rem;
  font-size: .84rem; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* La colonne de l'année : même vert que la carte vedette, en aplat léger —
   un fond plein répéterait la carte et écraserait les deux autres. */
.comparatif .est-vedette {
  background: color-mix(in srgb, var(--forest) 8%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--forest) 22%, transparent),
              inset -1px 0 0 color-mix(in srgb, var(--forest) 22%, transparent);
}
.comparatif thead .est-vedette .comparatif-nom,
.comparatif thead .est-vedette .comparatif-prix { color: var(--forest); }
/* La ligne du prix au mois : c'est celle qu'on vient comparer. */
.comparatif .est-fort td, .comparatif .est-fort th {
  font-weight: 800; color: var(--ink);
  font-size: 1.02rem; font-variant-numeric: tabular-nums;
}

/* Une question qui en suit une autre.

   « Et dans la box, il y a quoi ? », « Pour quel âge ? », « Et s'il pleut ? »
   s'enchaînaient au rythme d'un paragraphe : on ne voyait pas qu'on changeait
   de sujet, et le bouton « Voir tout ce qu'il y a dans la box » se retrouvait
   collé à la question suivante, comme s'il lui appartenait. Le blanc est ici
   la seule ponctuation qui sépare deux questions. */
.question-suivante { margin-top: clamp(2.6rem, 6vw, 4rem); }

/* Un avis venu de Google, au milieu de ceux de la maison.

   Même bloc, même typographie : ce n'est pas une carte de plus, c'est le même
   objet avec une provenance différente. Seul le filet vert le distingue — la
   couleur de la marque, pas celle de Google : la page ne se pare pas des
   couleurs d'un tiers pour emprunter sa crédibilité. */
.temoignage--google { border-left: 4px solid var(--forest); padding-left: 1.1rem; }
.temoignage--google footer { font-weight: 800; }

/* --- Le tarif de lancement, en grand ------------------------------------- */
/* Sur la page des abonnements, le lancement est l'argument qui décide : il se
   lisait dans le même corps que la phrase de chapeau, entre deux paragraphes.
   Il est maintenant la seule chose sous le titre, et il est écrit à sa taille.
   Le rebours suit — c'est lui qui dit combien de temps il reste. */
.tarifs-lancement {
  margin: 1.1rem auto 0; max-width: 36rem;
  font-size: 1.28rem; line-height: 1.45;
}
.tarifs-lancement strong { font-size: 1.08em; }

.rebours--geante {
  gap: .7rem; margin-top: .85rem;
  padding: .6rem 1.15rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sun, #f5c231) 32%, var(--paper));
  color: #4a3208;
}
.rebours--geante .rebours-bloc strong { font-size: 2.4rem; line-height: 1; }
.rebours--geante .rebours-bloc span { font-size: 1.05rem; }

/* --- L'encadré du mois, en vert et avec le bouton de commande ------------- */
/* Il prenait la couleur de l'aventure — un bleu en septembre, un ocre en
   octobre — et changeait donc de teinte tous les mois au milieu d'une page qui,
   elle, ne bouge pas. Il porte maintenant le vert de la marque, et le geste
   d'achat de l'accueil à la place du lien vers la fiche. */
.mois-encadre--vert {
  border-color: var(--forest-dark); background: var(--forest-dark); color: #fff;
}
.mois-encadre--vert .kicker,
.mois-encadre--vert h2,
.mois-encadre--vert .mois-lieu,
.mois-encadre--vert .mois-teaser { color: #fff; }
.mois-encadre--vert .mois-reperes span { background: rgba(255, 255, 255, .14); color: #fff; }

.mois-achat-box { margin: 0; }
.mois-achat-box .mois-prix { margin: 0 0 .55rem; font-size: 1.05rem; }
.mois-achat-box .mois-prix b { font-size: 1.45rem; }
.mois-achat-box .mois-champ { margin: 0 0 .6rem; }
.mois-achat-box label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.mois-achat-box input[type="email"],
.mois-achat-box input[type="text"] {
  width: 100%; box-sizing: border-box; padding: .55rem .7rem;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff;
}
.mois-achat-box .mois-cgu {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .82rem; margin: .2rem 0 .8rem; font-weight: 400;
}
.mois-achat-box .mois-cgu a { color: #ffd98a; }
.mois-achat-box .mois-cta {
  display: block; width: 100%; text-align: center;
  background: #f0a73c; color: #21331f; font-weight: 800;
  padding: .8rem 1rem; border: 0; border-radius: 12px; cursor: pointer; font-size: 1.05rem;
}
.mois-achat-box .mois-cta:hover { background: #ffbe5c; }
.mois-achat-box .mois-sous-cta { font-size: .8rem; margin: .55rem 0 0; text-align: center; opacity: .85; }

/* --- La carte du programme, plus petite et détachée du bandeau ------------ */
/* Elle arrivait collée sous le bandeau vert et occupait 720 px de large : au
   milieu d'une page dont le sujet est la liste des aventures, elle prenait la
   place du premier rang de vignettes. */
.carte-aventures { margin: 2.6rem 0 2.6rem; }
.carte-aventures-svg { max-width: 520px; }

/* --- Les trois avis Google, sur une seule ligne --------------------------- */
/* La grille automatique ne tenait que deux colonnes dans la colonne étroite de
   « Qui sommes-nous » : le troisième avis tombait seul au rang suivant, et se
   lisait comme un ajout. Trois colonnes explicites, qui se dépilent sur
   téléphone. */
.avis-trois {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  /* Plus large que la colonne de texte qui l'entoure : trois citations dans
     52 rem donnent des lignes de quatre mots. */
  width: min(100% + 13rem, 1040px, 100vw - 2rem);
  margin-left: 50%; transform: translateX(-50%);
}
.avis-trois .temoignage p { font-size: .95rem; }
@media (max-width: 780px) {
  .avis-trois { grid-template-columns: 1fr; width: 100%; margin-left: 0; transform: none; }
}

/* =========================================================================
   LA MARQUE : LE MACARON *ET* SON NOM

   Le macaron porte bien « MA BOX AVENTURE », mais en lettres courbées sur un
   cercle de 54 px de haut : à cette taille, personne ne le lit. styles.css
   masquait donc le nom écrit à côté (`.brand-badge .brand-text`, caché aux
   yeux mais laissé aux lecteurs d'écran), en faisant confiance au dessin.

   Résultat : la marque n'était nommée nulle part sur le site lui-même, alors
   qu'elle l'est en toutes lettres sur l'écran de paiement (entete-nu.ejs) et
   sur les pages d'annonce (landing.ejs, landing-fiche.ejs), qui affichent
   déjà le macaron SUIVI DU NOM. Le site était donc le seul endroit à ne pas
   suivre sa propre règle.

   On rétablit le nom dans l'en-tête et dans le pied de page. Rien n'est
   agrandi — l'en-tête collant reste à 72 px, décision prise plus haut dans
   ce fichier — mais le verrou de marque devient lisible, et il est le même
   partout.
   ========================================================================= */
.site-header .brand-badge .brand-text,
.site-footer .brand-badge .brand-text {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.site-header .brand-badge .brand-text { font-size: 1.18rem; color: var(--forest-dark); }
.site-footer .brand-badge .brand-text { font-size: 1.12rem; color: #fff; }
.site-header .brand, .site-footer .brand { gap: .62rem; }

/* Sur un téléphone, le nom reste — c'est justement là qu'un macaron de 46 px
   ne se lit pas — mais il se resserre pour laisser la place au bouton du
   menu. En dessous de 360 px, il passe sur deux lignes plutôt que de pousser
   le burger hors de l'écran. */
@media (max-width: 560px) {
  .site-header .brand-badge .brand-text { font-size: 1.02rem; }
}
@media (max-width: 360px) {
  .site-header .brand-badge .brand-text { font-size: .95rem; white-space: normal; max-width: 8ch; }
}