/* ==========================================================================
   L'Atelier de Roxane — Redesign démo
   Charte reprise à l'identique du site actuel : logo, couleurs, typos, fond blanc.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  /* Couleurs de marque (relevées sur le site actuel) */
  --beige: #F1D3B6;          /* accent principal — couleur du logo */
  --creme: #FBEEE3;          /* fond de section doux */
  --encre: #191919;          /* texte principal */
  --gris-clair: #EBEBEB;
  --blanc: #FFFFFF;

  /* Nuances dérivées (ombres, voiles) */
  --beige-05: rgba(241, 211, 182, 0.05);
  --beige-25: rgba(241, 211, 182, 0.25);
  --encre-45: rgba(25, 25, 25, 0.45);
  --encre-60: rgba(25, 25, 25, 0.6);
  --voile-blanc: rgba(255, 255, 255, 0.72);

  /* Typographies du site actuel */
  --titre: "Jomolhari", Georgia, serif;
  --texte: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique fluide */
  --fs-xs: clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem);
  --fs-sm: clamp(0.813rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-base: clamp(0.938rem, 0.91rem + 0.12vw, 1rem);
  --fs-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.313rem);
  --fs-xl: clamp(1.5rem, 1.32rem + 0.78vw, 2rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.7vw, 3.125rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);
  --fs-stat: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);

  /* Rythme */
  --pad-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gouttiere: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --largeur-max: 1360px;

  /* Mouvement — courbe douce reprise du site actuel */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --duree: 0.65s;

  --ombre-douce: 0 2px 12px rgba(25, 25, 25, 0.05);
  --ombre-carte: 0 18px 48px -18px rgba(25, 25, 25, 0.22);
  --ombre-flottante: 0 32px 70px -28px rgba(25, 25, 25, 0.3);
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Lenis pilote le défilement : on neutralise le smooth natif quand il est actif */
html.lenis { scroll-behavior: auto; }
html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Utilitaires --------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--pad-section); }
.section--creme { background: var(--creme); }

/* Sur-titre en capitales espacées (motif récurrent du site actuel) */
.surtitre {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-60);
  margin-bottom: 1.1rem;
}

.titre-section {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  max-width: 20ch;
}

.chapo {
  font-size: var(--fs-lg);
  color: var(--encre-60);
  max-width: 62ch;
  line-height: 1.75;
}

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

/* --- Boutons ------------------------------------------------------------- */
.btn {
  --btn-fond: var(--encre);
  --btn-texte: var(--blanc);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 2.1rem;
  border-radius: 100px;
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease);
}

/* Voile qui balaie le bouton au survol */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--beige);
  transform: translateY(101%);
  transition: transform var(--duree) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--encre); }

.btn--clair {
  --btn-fond: transparent;
  --btn-texte: var(--encre);
  border: 1px solid rgba(25, 25, 25, 0.18);
}

/* Lien souligné animé */
.lien-souligne {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.lien-souligne::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--duree) var(--ease);
}
.lien-souligne:hover::after {
  transform-origin: left;
  animation: souligne-repasse var(--duree) var(--ease);
}
@keyframes souligne-repasse {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background var(--duree) var(--ease),
              box-shadow var(--duree) var(--ease),
              padding var(--duree) var(--ease);
}

/* Sur le hero (vidéo sombre) : texte blanc. Après scroll : fond blanc, texte encre. */
.entete__grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: max-content;
}
.logo svg { width: 2.5rem; height: 2.5rem; }
.logo svg path { fill: var(--beige); transition: fill var(--duree) var(--ease); }

.logo__nom {
  font-family: var(--titre);
  font-size: clamp(0.625rem, 0.58rem + 0.19vw, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--beige);
  transition: color var(--duree) var(--ease);
  white-space: nowrap;
}

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem);
}

.nav__lien {
  position: relative;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanc);
  padding-block: 0.35rem;
  transition: color var(--duree) var(--ease);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duree) var(--ease);
}
.nav__lien:hover::after { transform: scaleX(1); transform-origin: left; }

.outils {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
}

.outil {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--blanc);
  transition: background var(--duree) var(--ease),
              color var(--duree) var(--ease),
              border-color var(--duree) var(--ease),
              transform var(--duree) var(--ease);
}
.outil svg { width: 1.05rem; height: 1.05rem; }
.outil:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--encre);
  transform: translateY(-2px);
}

/* État "détaché du hero" */
.entete.est-collee {
  background: var(--voile-blanc);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ombre-douce);
  padding-block: 0.7rem;
}
.entete.est-collee .nav__lien { color: var(--encre); }
.entete.est-collee .outil {
  color: var(--encre);
  border-color: rgba(25, 25, 25, 0.16);
}
.entete.est-collee .outil:hover { color: var(--encre); border-color: var(--beige); }

/* Menu mobile (burger) */
.burger { display: none; }

/* ==========================================================================
   Hero — vidéo plein écran + titre révélé
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--blanc);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dégradé pour garder le texte lisible sur la vidéo */
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(25, 25, 25, 0.78) 0%, rgba(25, 25, 25, 0.28) 45%, rgba(25, 25, 25, 0.42) 100%);
}

.hero__contenu {
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  padding-top: 9rem;
}

.hero__surtitre {
  color: var(--beige);
  opacity: 0;
}

/* Le titre tient sur 3 lignes : chaque ligne reste insécable pour que le
   masque de révélation (overflow hidden) coupe bien au bon endroit.
   La taille suit la largeur d'écran pour éviter tout débordement. */
.hero__titre {
  font-size: clamp(1.9rem, 7.6vw, 5.5rem);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

/* Chaque ligne du titre est masquée puis remonte.
   Le décalage de départ est posé par GSAP, pas ici : un `transform` en CSS
   deviendrait le point zéro de GSAP et la ligne ne remonterait jamais
   complètement. */
.ligne { display: block; overflow: hidden; }
.ligne > span {
  display: block;
  white-space: nowrap;
}

.hero__texte {
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 2.4rem;
  opacity: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  opacity: 0;
}

.hero .btn--clair {
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero .btn--clair:hover { color: var(--encre); }

/* Indicateur de défilement */
.hero__indice {
  position: absolute;
  right: var(--gouttiere);
  bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
}
.hero__indice-piste {
  position: relative;
  width: 1px;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.hero__indice-piste::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--beige);
  animation: descend 2.1s var(--ease) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .hero__indice { display: none; }
}

/* ==========================================================================
   Réglages responsive du header
   ========================================================================== */
@media (max-width: 980px) {
  .entete__grille { grid-template-columns: auto 1fr; }
  .nav { display: none; }
  .outils { gap: 0.4rem; }
  .outil { width: 2.4rem; height: 2.4rem; }
}

/* --- Accessibilité : mouvement réduit ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ligne > span { transform: none !important; }
  .hero__surtitre, .hero__texte, .hero__actions, .hero__indice { opacity: 1 !important; }
}

/* ==========================================================================
   Section Bienvenue — présentation + chiffres clés
   ========================================================================== */
.bienvenue__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  align-items: center;
}

.bienvenue__visuel {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.bienvenue__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le grossissement qui donne sa marge au parallaxe est posé par GSAP
     (voir main.js) : une propriété `scale` en CSS serait écrasée. */
}

/* Pastille chiffre posée sur la photo */
.pastille {
  position: absolute;
  right: -1.5rem;
  bottom: 2.5rem;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  width: clamp(8rem, 6rem + 6vw, 11rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--voile-blanc);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre-flottante);
  text-align: center;
  padding: 1rem;
}
.pastille__chiffre {
  font-family: var(--titre);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1;
}
.pastille__mot {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-60);
  line-height: 1.35;
}

.bienvenue__texte .chapo { margin-block: 1.6rem 2.2rem; }

/* --- Barre de chiffres clés ---------------------------------------------- */
.chiffres {
  margin-top: clamp(4rem, 2.5rem + 5vw, 7rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid rgba(25, 25, 25, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
}

.chiffre__valeur {
  font-family: var(--titre);
  font-size: var(--fs-stat);
  line-height: 1;
  margin-bottom: 0.6rem;
  /* Les chiffres qui s'incrémentent ne doivent pas faire sauter la mise en page */
  font-variant-numeric: tabular-nums;
}
.chiffre__libelle {
  font-size: var(--fs-sm);
  color: var(--encre-60);
  max-width: 24ch;
}

.chiffres--sur-creme .chiffre__valeur { color: var(--encre); }

@media (max-width: 900px) {
  .bienvenue__grille { grid-template-columns: 1fr; }
  .bienvenue__visuel { aspect-ratio: 4 / 3; }
  .pastille { right: 1rem; bottom: 1rem; }
  .chiffres { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   En-tête de section (surtitre + titre + lien)
   ========================================================================== */
.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.entete-section__texte { max-width: 46ch; }
.entete-section .chapo { margin-top: 1.2rem; }

/* ==========================================================================
   Cartes produit (ebooks & formations) — inclinaison 3D au survol
   ========================================================================== */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}

.carte {
  /* La perspective est portée par le conteneur : l'enfant s'incline dedans */
  perspective: 1000px;
}

.carte__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.carte:hover .carte__inner { box-shadow: var(--ombre-flottante); }

.carte__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--creme);
}
.carte__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.carte:hover .carte__media img { transform: scale(1.06); }

.carte__prix {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  background: var(--voile-blanc);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-sm);
  font-weight: 400;
  /* Décollée de la carte pour renforcer la profondeur */
  transform: translateZ(38px);
}

.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.85rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  transform: translateZ(22px);
}

.carte__titre {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  line-height: 1.2;
}

.carte__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--encre-60);
}
.etoiles { color: var(--beige); letter-spacing: 0.1em; }

.carte__texte {
  font-size: var(--fs-sm);
  color: var(--encre-60);
  line-height: 1.65;
  /* Résumé borné pour garder les cartes alignées */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carte__pied {
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (max-width: 980px) {
  .cartes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cartes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Section Recettes — grille avec décalage vertical
   ========================================================================== */
.recettes__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}

.recette {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--creme);
  color: var(--blanc);
}
.recette img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le grossissement est appliqué par GSAP (voir main.js) : il donne au
     parallaxe la marge nécessaire pour glisser sans découvrir de vide. */
}

/* Le survol joue sur le voile, pas sur une transformation de l'image :
   celle-ci est pilotée par le parallaxe et serait écrasée. */
.recette__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(25,25,25,0.82) 0%, rgba(25,25,25,0.15) 55%, transparent 100%);
  transition: opacity var(--duree) var(--ease);
}
.recette:hover .recette__voile { opacity: 0.75; }

.recette__contenu {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
}

.recette__cat {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige);
  margin-bottom: 0.6rem;
}

.recette__titre {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  line-height: 1.2;
}

.recette__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
}
.recette__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

@media (max-width: 980px) {
  .recettes__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recettes__grille { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Section « Comment ça se passe » — 3 étapes
   ========================================================================== */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  counter-reset: etape;
}

.etape { counter-increment: etape; }

.etape__visuel {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  background: var(--blanc);
}
.etape__visuel img { width: 100%; height: 100%; object-fit: cover; }

.etape__num {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--beige);
  font-family: var(--titre);
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
}
.etape__num::before { content: counter(etape); }

.etape__texte { color: var(--encre-60); }

@media (max-width: 860px) {
  .etapes { grid-template-columns: 1fr; max-width: 34rem; }
}

/* ==========================================================================
   Bandeau citation (Cyril Lignac)
   ========================================================================== */
.citation {
  position: relative;
  padding-block: clamp(5rem, 3rem + 7vw, 9rem);
  color: var(--blanc);
  text-align: center;
  overflow: hidden;
}
.citation__media { position: absolute; inset: 0; z-index: -2; }
.citation__media video,
.citation__media img { width: 100%; height: 100%; object-fit: cover; }
.citation__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(25, 25, 25, 0.62);
}

.citation__texte {
  font-family: var(--titre);
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.4rem);
  line-height: 1.4;
  max-width: 30ch;
  margin-inline: auto;
  text-transform: uppercase;
}
.citation__auteur {
  margin-top: 1.8rem;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem) 2rem;
}

.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Le logo du pied est repris via <use> : la couleur doit être posée sur le
   <svg> lui-même, le contenu cloné héritant du contexte et non des sélecteurs
   ciblant un <path> descendant. */
.pied .logo svg { fill: var(--beige); }
.pied .logo__nom { color: var(--beige); }
.pied__intro {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.pied__titre {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 1.1rem;
}

.pied__liens { display: grid; gap: 0.65rem; }
.pied__liens a {
  font-size: var(--fs-sm);
  transition: color var(--duree) var(--ease);
}
.pied__liens a:hover { color: var(--beige); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pied__haut { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ═══ REFONTE — sections enrichies
   ========================================================================== */

/* --- Hero piloté au défilement ------------------------------------------- */
.hero-scrub { position: relative; height: 380svh; }

.hero-scrub__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(5.5rem, 4rem + 5vw, 8.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
  overflow: hidden;
  background: var(--creme);
}

/* Le canvas est contenu dans la place restante. On borne par max-width /
   max-height plutôt que par `flex` : un élément remplacé avec un ratio
   d'image se réduirait sinon à zéro sur les écrans courts. */
.hero-scrub__media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding-block: 0.5rem;
}

.hero-scrub__canvas {
  width: auto;
  height: auto;
  max-width: min(100%, 1240px);
  max-height: 100%;
  object-fit: contain;
}

.hero-scrub__haut {
  flex: none;
  text-align: center;
  width: 100%;
  padding-inline: var(--gouttiere);
}
.hero-scrub__surtitre { color: var(--encre-60); }
.hero-scrub__titre {
  font-size: clamp(2rem, 1.1rem + 4.1vw, 4.6rem);
  text-transform: uppercase;
  line-height: 1;
}
.hero-scrub__titre .ligne > span { white-space: nowrap; }

.hero-scrub__bas {
  flex: none;
  width: 100%;
  padding-inline: var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.hero-scrub__texte { max-width: 40ch; color: var(--encre-60); }

/* Les ingrédients se dévoilent un par un pendant la scène */
.ingredients {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ingredient {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.15rem;
  border-radius: 100px;
  background: var(--voile-blanc);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ombre-carte);
  font-size: var(--fs-sm);
  white-space: nowrap;
  opacity: 0;
}
.ingredient b { font-weight: 500; }
.ingredient span { color: var(--encre-60); }

/* Répartis autour du cookie, en évitant le centre */
.ingredient--1 { top: 26%; left: 8%; }
.ingredient--2 { top: 62%; left: 12%; }
.ingredient--3 { top: 22%; right: 9%; }
.ingredient--4 { top: 58%; right: 7%; }

@media (max-width: 860px) {
  .hero-scrub { height: 300svh; }
  .ingredient--1 { top: 20%; left: 4%; }
  .ingredient--2 { top: 70%; left: 4%; }
  .ingredient--3 { top: 26%; right: 4%; }
  .ingredient--4 { top: 76%; right: 4%; }
  .ingredient { font-size: var(--fs-xs); padding: 0.45rem 0.85rem; }
}

/* --- Bandeau défilant ---------------------------------------------------- */
.bandeau {
  overflow: hidden;
  padding-block: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  background: var(--encre);
  color: var(--creme);
  white-space: nowrap;
}
.bandeau__piste {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  will-change: transform;
}
.bandeau__item {
  font-family: var(--titre);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.bandeau__item::after {
  content: "✦";
  color: var(--beige);
  font-size: 0.7em;
}

/* --- Mosaïque de photos (comble les vides) ------------------------------- */
.mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(7rem, 5rem + 8vw, 13rem);
  gap: clamp(0.6rem, 0.4rem + 0.7vw, 1rem);
}
.mosaique__case {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--creme);
}
.mosaique__case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Quelques cases plus grandes cassent la régularité de la grille */
.mosaique__case--haute { grid-row: span 2; }
.mosaique__case--large { grid-column: span 2; }

@media (max-width: 860px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .mosaique__case--large { grid-column: span 2; }
}

/* --- Section « livre » : les ebooks présentés comme de vrais ouvrages ----- */
.livres {
  display: grid;
  gap: clamp(4rem, 2.5rem + 6vw, 8rem);
}

.livre {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}
.livre:nth-child(even) .livre__objet { order: 2; }

/* Mise en volume : couverture + tranche + ombre portée */
.livre__objet {
  perspective: 1600px;
  display: grid;
  place-items: center;
  padding-block: 1rem;
}

.livre__corps {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(4deg);
  transition: transform 0.8s var(--ease);
  will-change: transform;
}
.livre:hover .livre__corps { transform: rotateY(-12deg) rotateX(2deg); }

.livre__couverture {
  position: absolute;
  inset: 0;
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  background: var(--creme);
  box-shadow:
    0 28px 60px -22px rgba(25, 25, 25, 0.45),
    0 4px 14px -6px rgba(25, 25, 25, 0.25);
}
.livre__couverture img { width: 100%; height: 100%; object-fit: cover; }

/* Reflet diagonal sur la couverture */
.livre__couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}

/* Tranche : épaisseur du livre, posée à gauche en profondeur */
.livre__tranche {
  position: absolute;
  top: 1.5%;
  left: 0;
  width: 1.5rem;
  height: 97%;
  background: linear-gradient(to right, #d8c7b6, #f3e7db 45%, #cbb9a8);
  transform: translateX(-100%) rotateY(78deg);
  transform-origin: right center;
  border-radius: 2px 0 0 2px;
}

.livre__numero {
  position: absolute;
  top: -1.5rem;
  right: -1rem;
  font-family: var(--titre);
  font-size: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  line-height: 1;
  color: var(--beige);
  opacity: 0.5;
  transform: translateZ(60px);
}

.livre__prix {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--titre);
  font-size: var(--fs-xl);
}
.livre__prix small { font-size: var(--fs-sm); color: var(--encre-60); font-family: var(--texte); }

.livre__note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  color: var(--encre-60);
  margin-block: 0.9rem 1.2rem;
}

.livre__points {
  display: grid;
  gap: 0.65rem;
  margin-block: 1.4rem 1.8rem;
}
.livre__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-sm);
  color: var(--encre-60);
}
.puce-check {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--creme);
  color: var(--encre);
  display: grid; place-items: center;
  font-size: 0.68rem;
}

.livre__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

@media (max-width: 900px) {
  .livre { grid-template-columns: 1fr; }
  .livre:nth-child(even) .livre__objet { order: 0; }
  .livre__corps { transform: rotateY(-14deg); }
}

/* --- Formations : rail horizontal ---------------------------------------- */
.rail { position: relative; height: 300svh; }
.rail__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.rail__piste {
  display: flex;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  padding-inline: var(--gouttiere);
  will-change: transform;
}

.formation {
  position: relative;
  flex: none;
  width: min(78vw, 30rem);
  border-radius: 8px;
  overflow: hidden;
  background: var(--encre);
  color: var(--blanc);
  aspect-ratio: 3 / 4;
  max-height: 78svh;
}
.formation img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.82;
  transition: transform 1s var(--ease), opacity 0.6s var(--ease);
}
.formation:hover img { transform: scale(1.05); opacity: 0.95; }
.formation__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25,25,25,0.9) 8%, rgba(25,25,25,0.15) 62%, transparent 100%);
}
.formation__contenu {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  display: grid;
  gap: 0.75rem;
}
.formation__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--beige);
}
.formation__titre { font-size: var(--fs-xl); text-transform: uppercase; }
.formation__texte { font-size: var(--fs-sm); color: rgba(255,255,255,0.78); }
.formation__pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.5rem;
}
.formation__prix { font-family: var(--titre); font-size: var(--fs-lg); }

/* --- Recettes : grille éditoriale asymétrique ---------------------------- */
.recettes-edito {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
}
.rec {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--creme);
  color: var(--blanc);
  display: block;
}
.rec img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(25,25,25,0.85) 0%, rgba(25,25,25,0.1) 58%, transparent 100%);
  transition: opacity var(--duree) var(--ease);
}
.rec:hover .rec__voile { opacity: 0.78; }
.rec__contenu { position: absolute; inset: auto 0 0 0; padding: clamp(1rem, 0.85rem + 0.9vw, 1.6rem); }
.rec__cat {
  font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--beige); display: block; margin-bottom: 0.5rem;
}
.rec__titre { font-size: var(--fs-lg); text-transform: uppercase; line-height: 1.15; }
.rec__meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  margin-top: 0.6rem; font-size: var(--fs-xs); color: rgba(255,255,255,0.75);
}

/* Rythme : une grande, deux moyennes, trois petites */
.rec--xl { grid-column: span 4; aspect-ratio: 16 / 10; }
.rec--md { grid-column: span 2; aspect-ratio: 4 / 5; }
.rec--sm { grid-column: span 2; aspect-ratio: 1; }

@media (max-width: 900px) {
  .recettes-edito { grid-template-columns: repeat(2, 1fr); }
  .rec--xl, .rec--md, .rec--sm { grid-column: span 2; aspect-ratio: 4 / 3; }
}

/* --- Parcours en 3 étapes (ligne reliée) --------------------------------- */
.parcours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
/* Trait qui relie les étapes, tracé au défilement */
.parcours__trait {
  position: absolute;
  top: 2.35rem;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(25, 25, 25, 0.14);
  transform-origin: left center;
}
.parcours__trait span {
  position: absolute;
  inset: 0;
  background: var(--beige);
  transform: scaleX(0);
  transform-origin: left center;
}

.etape-p { position: relative; text-align: center; }
.etape-p__pastille {
  width: 4.7rem; height: 4.7rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--blanc);
  border: 1px solid rgba(25, 25, 25, 0.1);
  display: grid; place-items: center;
  font-family: var(--titre);
  font-size: var(--fs-xl);
  margin-bottom: 1.4rem;
  box-shadow: var(--ombre-douce);
}
.etape-p h3 { font-size: var(--fs-lg); text-transform: uppercase; margin-bottom: 0.6rem; }
.etape-p p { color: var(--encre-60); font-size: var(--fs-sm); max-width: 32ch; margin-inline: auto; }

@media (max-width: 800px) {
  .parcours { grid-template-columns: 1fr; }
  .parcours__trait { display: none; }
}

/* --- Avis clients -------------------------------------------------------- */
.avis-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
}
.avis {
  background: var(--blanc);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 6px;
  padding: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.avis__etoiles { color: var(--beige); letter-spacing: 0.12em; }
.avis__texte { font-size: var(--fs-sm); color: var(--encre-60); line-height: 1.7; }
.avis__auteur {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }

/* --- Bandeau newsletter -------------------------------------------------- */
.lettre {
  background: var(--creme);
  border-radius: 10px;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}
.lettre__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  width: min(100%, 34rem);
}
.champ {
  flex: 1 1 16rem;
  padding: 0.95rem 1.4rem;
  border-radius: 100px;
  border: 1px solid rgba(25, 25, 25, 0.14);
  background: var(--blanc);
  font: inherit;
  color: inherit;
}
.champ::placeholder { color: var(--encre-45); }
.champ:focus { outline: 2px solid var(--beige); outline-offset: 1px; border-color: transparent; }

/* Écrans peu hauts (portables 13", fenêtres réduites) : on resserre le hero
   pour que titre, cookie et accroche tiennent sans se chevaucher. */
@media (max-height: 760px) {
  .hero-scrub__scene {
    padding-block: clamp(4.5rem, 4rem + 2vw, 5.5rem) 1.25rem;
  }
  .hero-scrub__titre { font-size: clamp(1.5rem, 0.9rem + 2.6vw, 2.6rem); }
  .hero-scrub__surtitre { margin-bottom: 0.5rem; }
  .hero-scrub__bas { gap: 0.75rem 1.5rem; }
  .hero-scrub__texte { font-size: var(--fs-sm); max-width: 34ch; }
  .hero-scrub__bas .btn { padding: 0.7rem 1.5rem; }
}

/* ==========================================================================
   ═══ PAGES INTÉRIEURES
   ========================================================================== */

/* Les pages internes n'ont pas de hero sombre : le header est clair d'entrée */
.page-interieure { padding-top: clamp(6.5rem, 5rem + 4vw, 9rem); }

.fil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--encre-45);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.fil a:hover { color: var(--encre); }

/* --- Fiche produit ------------------------------------------------------- */
.produit {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.produit__visuel { position: sticky; top: 7rem; }

.produit__livre { perspective: 1600px; display: grid; place-items: center; }
.produit__livre .livre__corps { width: min(100%, 26rem); }

/* Badges de réassurance : lever les freins à l'achat d'un produit numérique */
.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-block: 1.5rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border-radius: 100px;
  background: var(--creme);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.badge svg { width: 1rem; height: 1rem; flex: none; color: var(--encre); }

.produit__prix-bloc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  margin-block: 1.5rem 1.25rem;
}
.produit__prix { font-family: var(--titre); font-size: var(--fs-2xl); line-height: 1; }
.produit__prix-note { font-size: var(--fs-sm); color: var(--encre-60); }

.produit__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.bloc-decouverte {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  border-radius: 8px;
  background: var(--creme);
}
.bloc-decouverte h2 {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.liste-decouverte { display: grid; gap: 0.9rem; }
.liste-decouverte li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--fs-sm);
}
.liste-decouverte .puce-check { background: var(--blanc); }

@media (max-width: 900px) {
  .produit { grid-template-columns: 1fr; }
  .produit__visuel { position: static; }
}

/* --- Avis détaillés ------------------------------------------------------ */
.note-globale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
}
.note-globale__score {
  font-family: var(--titre);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.note-globale__detail { font-size: var(--fs-sm); color: var(--encre-60); }

/* --- Tunnel de commande -------------------------------------------------- */
.commande {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.form-bloc { display: grid; gap: 1.75rem; }

.form-groupe {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.form-groupe legend {
  font-family: var(--titre);
  font-size: var(--fs-lg);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  padding: 0;
}

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .duo { grid-template-columns: 1fr; } }

.champ-label {
  display: grid;
  gap: 0.4rem;
  font-size: var(--fs-sm);
}
.champ-label input {
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  border: 1px solid rgba(25, 25, 25, 0.16);
  background: var(--blanc);
  font: inherit;
  color: inherit;
}
.champ-label input:focus {
  outline: 2px solid var(--beige);
  outline-offset: 1px;
  border-color: transparent;
}
.aide {
  font-size: var(--fs-xs);
  color: var(--encre-60);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Rappel : aucun compte n'est nécessaire pour acheter */
.sans-compte {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--creme);
  font-size: var(--fs-sm);
}
.sans-compte svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem; }

/* Récapitulatif */
.recap {
  position: sticky;
  top: 7rem;
  border: 1px solid rgba(25, 25, 25, 0.1);
  border-radius: 10px;
  padding: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  background: var(--blanc);
  display: grid;
  gap: 1.25rem;
}
.recap__titre {
  font-family: var(--titre);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}
.recap__ligne {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.recap__vignette {
  width: 4.5rem;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  flex: none;
  background: var(--creme);
}
.recap__vignette img { width: 100%; height: 100%; object-fit: cover; }
.recap__nom { font-size: var(--fs-sm); }
.recap__format { font-size: var(--fs-xs); color: var(--encre-60); }

.recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid rgba(25, 25, 25, 0.1);
}
.recap__total b { font-family: var(--titre); font-size: var(--fs-xl); font-weight: 400; }

.recap__note {
  font-size: var(--fs-xs);
  color: var(--encre-60);
  display: grid;
  gap: 0.5rem;
}
.recap__note span { display: flex; align-items: center; gap: 0.5rem; }
.recap__note svg { width: 0.95rem; height: 0.95rem; flex: none; }

@media (max-width: 900px) {
  .commande { grid-template-columns: 1fr; }
  .recap { position: static; }
}

/* --- Listing recettes ---------------------------------------------------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.filtre {
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  border: 1px solid rgba(25, 25, 25, 0.14);
  font-size: var(--fs-sm);
  transition: background var(--duree) var(--ease), color var(--duree) var(--ease), border-color var(--duree) var(--ease);
}
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] {
  background: var(--encre);
  color: var(--blanc);
  border-color: var(--encre);
}

.grille-recettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 0.7rem + 1.4vw, 1.85rem);
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 — retours client : header clair + pilule, vagues entre sections,
   pellicule de polaroids, sections centrées, fond vivant, panier.
   Ce bloc arrive en fin de feuille : il gagne la cascade sur les réglages
   d'origine qu'il corrige.
   ══════════════════════════════════════════════════════════════════════════ */

figure { margin: 0; }

/* --- 1. Header par défaut : encre sur fond clair --------------------------
   Le hero est désormais crème : les liens blancs d'origine devenaient
   invisibles et les cercles d'icônes disparaissaient. */
.nav__lien { color: var(--encre); }
.outil { color: var(--encre); border-color: rgba(25, 25, 25, 0.16); }

/* Le logo est réutilisé via <use> : le clone vit dans un shadow DOM que les
   sélecteurs `svg path` n'atteignent pas. On pose la couleur sur le <svg>,
   `fill` étant héritée à l'intérieur du clone. */
.logo svg { fill: var(--beige); }

/* --- 2. Header au scroll : pilule centrée --------------------------------- */
@keyframes pilule-pop {
  from { transform: translateY(-12px); opacity: 0; }
}

.entete.est-collee {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: 0.55rem;
}

.entete.est-collee .entete__grille {
  display: flex;
  width: max-content;
  max-width: calc(100vw - 1.25rem);
  margin-inline: auto;
  align-items: center;
  column-gap: clamp(0.9rem, 2vw, 1.9rem);
  background: var(--voile-blanc);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 100px;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  box-shadow: var(--ombre-carte);
  animation: pilule-pop 0.5s var(--ease);
}

/* Dans la pilule, seul le monogramme reste */
.entete.est-collee .logo { gap: 0; }
.entete.est-collee .logo__nom { display: none; }
.entete.est-collee .logo svg { width: 2.15rem; height: 2.15rem; }
.entete.est-collee .nav { gap: clamp(0.9rem, 1.6vw, 1.6rem); }
.entete.est-collee .outil { width: 2.3rem; height: 2.3rem; }

/* --- 3. En-têtes de section : centrés ------------------------------------- */
.entete-section {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.5rem;
}
.entete-section__texte { display: grid; justify-items: center; max-width: 100%; }
.entete-section .titre-section { margin-inline: auto; }
.entete-section .chapo { margin-inline: auto; }
.entete-section > .lien-souligne { margin-top: 1rem; }

/* --- 4. Vagues entre les sections ------------------------------------------
   Chaque vague peint le fond de la section précédente (--de) et remplit la
   courbe avec la couleur de la suivante (--vers) : plus aucune ligne dure.
   Les petits cercles font les miettes. */
.vague {
  display: block;
  width: 100%;
  line-height: 0;
  background: var(--de, transparent);
  margin-top: -1px;
  margin-bottom: -1px;
  pointer-events: none;
}
.vague svg {
  display: block;
  width: 100%;
  height: clamp(44px, 7vw, 96px);
}
.vague path, .vague circle { fill: var(--vers, var(--creme)); }

/* Vagues internes de la citation (au-dessus de la vidéo) */
.citation__vague {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(44px, 7vw, 96px);
  z-index: 2;
  pointer-events: none;
}
.citation__vague--haut { top: -1px; transform: scaleY(-1); }
.citation__vague--haut path, .citation__vague--haut circle { fill: var(--creme); }
.citation__vague--bas { bottom: -1px; }
.citation__vague--bas path, .citation__vague--bas circle { fill: var(--blanc); }

/* --- 5. Fond vivant --------------------------------------------------------
   a) grain photo très léger sur tout le site
   b) semis de points qui dérive lentement sur les fonds crème
   c) grandes bulles floues qui respirent derrière le hero */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
}

@keyframes derive-points {
  from { background-position: 0 0, 45px 70px; }
  to   { background-position: 260px 160px, -220px -90px; }
}
.section--creme { position: relative; isolation: isolate; }
.section--creme::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(206, 168, 133, 0.16) 2px, transparent 2.6px),
    radial-gradient(rgba(206, 168, 133, 0.10) 1.6px, transparent 2.2px);
  background-size: 130px 130px, 90px 90px;
  animation: derive-points 80s linear infinite alternate;
}

@keyframes bulle-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(7%, 6%, 0) scale(1.14); }
}
@keyframes bulle-b {
  from { transform: translate3d(4%, 5%, 0) scale(1.06); }
  to   { transform: translate3d(-6%, -5%, 0) scale(0.94); }
}
.hero-scrub { background: var(--creme); }
.hero-scrub__scene::before,
.hero-scrub__scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.hero-scrub__scene::before {
  width: 46vmax;
  left: -14vmax;
  top: -16vmax;
  background: radial-gradient(circle, rgba(241, 211, 182, 0.6), rgba(241, 211, 182, 0) 68%);
  animation: bulle-a 17s ease-in-out infinite alternate;
}
.hero-scrub__scene::after {
  width: 34vmax;
  right: -11vmax;
  bottom: -13vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 66%);
  animation: bulle-b 21s ease-in-out infinite alternate;
}
/* Le contenu du hero passe devant les bulles */
.hero-scrub__haut, .hero-scrub__media, .hero-scrub__bas { position: relative; z-index: 1; }
.ingredients { z-index: 2; }

/* --- 6. Pellicule de polaroids (remplace la mosaïque) ---------------------- */
.pellicule {
  /* Pleine largeur, au-delà du conteneur centré */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  padding-block: 1rem;
}
.pellicule__rangee {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  width: max-content;
  will-change: transform;
}
.polaroid {
  flex: none;
  width: clamp(12.5rem, 21vw, 18.5rem);
  background: var(--blanc);
  border-radius: 10px;
  padding: 0.65rem 0.65rem 0;
  box-shadow: var(--ombre-carte);
  transform: rotate(var(--pente, -2.4deg));
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.polaroid:nth-child(even) { --pente: 2.1deg; }
.polaroid:nth-child(3n)   { --pente: -1.2deg; }
.polaroid:nth-child(5n)   { --pente: 3deg; }
.polaroid:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow: var(--ombre-flottante);
  z-index: 2;
}
.polaroid__img {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: var(--creme);
}
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--titre);
  text-align: center;
  padding: 0.65rem 0.25rem 0.85rem;
  font-size: var(--fs-sm);
  color: var(--encre-60);
}

/* --- 7. « Comment ça se passe » : blobs organiques ------------------------- */
@keyframes morphe {
  to {
    border-radius: 58% 42% 44% 56% / 52% 58% 42% 48%;
    transform: rotate(2.5deg);
  }
}
.etape-p__visuel {
  position: relative;
  width: min(100%, 14.5rem);
  aspect-ratio: 1;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.etape-p__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40% 60% 55% 45% / 46% 42% 58% 54%;
  box-shadow: var(--ombre-carte);
  animation: morphe 9s ease-in-out infinite alternate;
}
.etape-p:nth-of-type(2) .etape-p__visuel img { animation-delay: -3s; }
.etape-p:nth-of-type(3) .etape-p__visuel img { animation-delay: -6s; }

.etape-p__pastille {
  position: absolute;
  top: -0.8rem;
  left: -0.8rem;
  margin: 0;
  width: 3.6rem;
  height: 3.6rem;
  font-size: var(--fs-lg);
  box-shadow: var(--ombre-douce);
}
.parcours__trait { top: min(7.25rem, 32%); }

/* --- 8. Panier : suppression d'article ------------------------------------- */
.recap__suppr {
  margin-left: auto;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 1px solid rgba(25, 25, 25, 0.15);
  display: grid;
  place-items: center;
  color: var(--encre-60);
  transition: background var(--duree) var(--ease),
              color var(--duree) var(--ease),
              border-color var(--duree) var(--ease),
              transform var(--duree) var(--ease);
}
.recap__suppr svg { width: 0.85rem; height: 0.85rem; }
.recap__suppr:hover {
  background: #F7E3E0;
  border-color: #D9A69C;
  color: #A0442F;
  transform: scale(1.06);
}
.recap__vide {
  font-size: var(--fs-sm);
  color: var(--encre-60);
  text-align: center;
  padding-block: 0.75rem;
}
[data-payer][aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* --- 9. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .section--creme::before,
  .hero-scrub__scene::before,
  .hero-scrub__scene::after,
  .etape-p__visuel img { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3 — hero : la vidéo du cookie occupe TOUT l'écran.
   Le canvas passe en fond pleine surface (recadré comme une vidéo de fond),
   le texte se pose dessus, adouci par deux voiles crème en haut et en bas.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-scrub__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  padding: 0;
}
.hero-scrub__canvas {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* Voiles crème : le cookie reste la star, le texte reste lisible */
.hero-scrub__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(251, 238, 227, 0.97) 0%,
    rgba(251, 238, 227, 0.72) 22%,
    rgba(251, 238, 227, 0)   46%,
    rgba(251, 238, 227, 0)   58%,
    rgba(251, 238, 227, 0.68) 80%,
    rgba(251, 238, 227, 0.97) 100%
  );
}

/* Les bulles floues servaient la mise en page contenue : plus besoin */
.hero-scrub__scene::before,
.hero-scrub__scene::after { content: none; }

/* ══════════════════════════════════════════════════════════════════════════
   V4 — refonte de 3 sections pour les aligner sur la direction créative
   (Bienvenue, barre de crédibilité, en-tête Recettes).
   ══════════════════════════════════════════════════════════════════════════ */

/* --- 1. BIENVENUE : éditorial chaleureux ---------------------------------- */
.bienvenue {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem);
  align-items: center;
}

/* Visuel en forme organique + anneau pointillé + pastille + chip M6 */
.bienvenue__media {
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}
.bienvenue__media::before {
  /* anneau pointillé décoratif qui tourne lentement */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  border: 2px dashed rgba(206, 168, 133, 0.5);
  animation: tourne-lent 46s linear infinite;
}
@keyframes tourne-lent { to { transform: rotate(360deg); } }

.bienvenue__cadre {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 44% 56% 54% 46% / 52% 44% 56% 48%;
  box-shadow: var(--ombre-flottante);
  animation: morphe 11s ease-in-out infinite alternate;
}
.bienvenue__cadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bienvenue__pastille {
  position: absolute;
  right: clamp(0.25rem, -1rem + 4vw, 2rem);
  bottom: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  width: clamp(7.5rem, 6rem + 6vw, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--voile-blanc);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--ombre-flottante);
  text-align: center;
  padding: 1rem;
}
.bienvenue__pastille b {
  font-family: var(--titre);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1;
}
.bienvenue__pastille span {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-60);
  line-height: 1.3;
}

/* Puce « Vu sur M6 » posée en haut du visuel */
.chip-m6 {
  position: absolute;
  left: clamp(0.25rem, -1rem + 4vw, 1.5rem);
  top: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: var(--encre);
  color: var(--blanc);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: var(--ombre-carte);
}
.chip-m6 b {
  font-family: var(--titre);
  color: var(--beige);
  letter-spacing: 0.02em;
}

.bienvenue__texte .surtitre { margin-bottom: 1rem; }
.bienvenue__texte .chapo { margin-block: 1.4rem 1.8rem; }

/* Signature manuscrite sous le texte */
.signature {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-family: var(--titre);
  font-size: var(--fs-xl);
  color: var(--encre);
}
.signature small {
  font-family: var(--texte);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-45);
}

@media (max-width: 900px) {
  .bienvenue { grid-template-columns: 1fr; }
  .bienvenue__cadre { aspect-ratio: 4 / 3; }
}

/* --- 2. BARRE DE CRÉDIBILITÉ : bandeau premium ---------------------------- */
.credibilite {
  position: relative;
  background: var(--encre);
  color: var(--creme);
  border-radius: clamp(16px, 1rem + 1.5vw, 28px);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* semis de points animé, version sombre */
.credibilite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(241, 211, 182, 0.14) 2px, transparent 2.6px),
    radial-gradient(rgba(241, 211, 182, 0.08) 1.6px, transparent 2.2px);
  background-size: 130px 130px, 90px 90px;
  animation: derive-points 80s linear infinite alternate;
}

.credibilite__intro {
  text-align: center;
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.credibilite__intro .surtitre { color: var(--beige); margin-bottom: 0.75rem; }
.credibilite__intro h2 {
  font-size: var(--fs-xl);
  color: var(--blanc);
  max-width: 22ch;
  margin-inline: auto;
}

.credibilite__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
}
.credit {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  position: relative;
}
/* séparateurs verticaux discrets, sauf sur le premier */
.credit + .credit::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.625rem, 0.25rem + 1.25vw, 1.5rem));
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(241, 211, 182, 0.22);
}
.credit__icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(241, 211, 182, 0.14);
  color: var(--beige);
  margin-bottom: 0.35rem;
}
.credit__icone svg { width: 1.4rem; height: 1.4rem; }
.credit__valeur {
  font-family: var(--titre);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1;
  color: var(--blanc);
  font-variant-numeric: tabular-nums;
}
.credit__libelle {
  font-size: var(--fs-sm);
  color: rgba(251, 238, 227, 0.72);
  max-width: 22ch;
}
.credit__badge {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  background: var(--beige);
  color: var(--encre);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
}

@media (max-width: 820px) {
  .credibilite__grille { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  /* on ne garde que le séparateur central sur 2 colonnes */
  .credit + .credit::before { display: none; }
}
@media (max-width: 460px) {
  .credibilite__grille { grid-template-columns: 1fr; }
}

/* --- 3. EN-TÊTE RECETTES : éditorial avec grand nombre -------------------- */
.recettes-tete {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.recettes-tete__nombre {
  font-family: var(--titre);
  font-size: clamp(4rem, 2rem + 9vw, 9rem);
  line-height: 0.8;
  color: var(--beige);
  position: relative;
}
.recettes-tete__nombre span {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-60);
  margin-top: 0.5rem;
}
.recettes-tete__milieu { text-align: center; }
.recettes-tete__milieu .surtitre { margin-bottom: 0.75rem; }
.recettes-tete__milieu h2 {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  max-width: 18ch;
  margin-inline: auto;
}

@media (max-width: 820px) {
  .recettes-tete { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.5rem; }
  .recettes-tete__nombre { font-size: clamp(3.5rem, 2rem + 9vw, 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bienvenue__media::before,
  .bienvenue__cadre { animation: none !important; }
  .credibilite::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   V5 — passe finale : logo lisible, Bienvenue v3, stats éditoriales,
   en-têtes de pages intérieures, panneau de recherche, cartes commande.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- 1. Logo : encre sur fonds clairs ---------------------------------------
   Le beige du logo se fondait dans le hero crème. Sur fond clair il passe
   en encre (comme la navigation) ; il ne reste beige que sur le pied sombre. */
.logo svg { fill: var(--encre); }
.logo__nom { color: var(--encre); }
.pied .logo svg { fill: var(--beige); }
.pied .logo__nom { color: var(--beige); }

/* --- 2. Bienvenue v3 : duo de photos + texte ------------------------------- */
.presentation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  align-items: center;
}

.presentation__photos {
  position: relative;
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-right: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.presentation__grande {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--ombre-flottante);
}
.presentation__grande img { width: 100%; height: 100%; object-fit: cover; }

.presentation__petite {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(46%, 13.5rem);
  background: var(--blanc);
  padding: 0.5rem 0.5rem 0;
  border-radius: 10px;
  box-shadow: var(--ombre-carte);
  transform: rotate(4deg);
  transition: transform 0.5s var(--ease);
}
.presentation__petite:hover { transform: rotate(0deg) translateY(-4px); }
.presentation__petite img {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.presentation__petite figcaption {
  font-family: var(--titre);
  text-align: center;
  padding: 0.5rem 0.25rem 0.65rem;
  font-size: var(--fs-xs);
  color: var(--encre-60);
}

@media (max-width: 900px) {
  .presentation { grid-template-columns: 1fr; }
  .presentation__photos { max-width: 26rem; margin-inline: auto; width: 100%; }
}

/* --- 3. Stats v3 : bandeau éditorial clair --------------------------------- */
.stats-marque {
  margin-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  border-top: 1px solid rgba(25, 25, 25, 0.1);
  border-bottom: 1px solid rgba(25, 25, 25, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.75rem, 0.5rem + 1vw, 1.5rem));
  top: 14%;
  height: 72%;
  width: 1px;
  background: rgba(25, 25, 25, 0.1);
}
.stat__nombre {
  font-family: var(--titre);
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__libelle {
  margin-top: 0.65rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-60);
  line-height: 1.8;
}
.stat__libelle::before {
  content: "✦";
  display: block;
  color: var(--beige);
  font-size: 0.8rem;
  margin-bottom: 0.45rem;
  letter-spacing: 0;
}
.stat__m6 {
  display: inline-block;
  background: var(--encre);
  color: var(--beige);
  font-family: var(--texte);
  font-weight: 500;
  font-size: 0.85em;
  padding: 0.1em 0.6em;
  border-radius: 6px;
  letter-spacing: 0.08em;
}

@media (max-width: 860px) {
  .stats-marque { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 1.25rem; }
  .stat + .stat::before { display: none; }
}
@media (max-width: 520px) {
  .stats-marque { grid-template-columns: 1fr; }
}

/* --- 4. En-tête de page intérieure (façon accueil) -------------------------- */
.page-tete {
  padding: clamp(7rem, 6rem + 4vw, 9.5rem) 0 clamp(2.75rem, 2.25rem + 2vw, 4.25rem);
  text-align: center;
}
.page-tete .fil { justify-content: center; margin-bottom: 1.4rem; }
.page-tete h1 {
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  max-width: 22ch;
  margin-inline: auto;
}
.page-tete .chapo {
  margin-inline: auto;
  margin-top: 1.1rem;
  max-width: 58ch;
}
.page-tete .filtres {
  justify-content: center;
  margin-top: 1.75rem;
  margin-bottom: 0;
}
.page-tete .livre__note { justify-content: center; margin-top: 1rem; }
.page-tete__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.4rem;
}

/* --- 5. Commande : les groupes deviennent des cartes ------------------------ */
.form-groupe {
  background: var(--blanc);
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 18px;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  box-shadow: var(--ombre-douce);
}
.form-groupe legend {
  float: left;
  width: 100%;
  margin-bottom: 1.1rem;
}

/* --- 6. Recherche : panneau plein écran quasi transparent ------------------- */
.recherche {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: clamp(16vh, 20vh, 24vh);
  background: rgba(251, 238, 227, 0.58);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.recherche.est-ouverte { opacity: 1; pointer-events: auto; }

.recherche__fermer {
  position: absolute;
  top: clamp(1.25rem, 1rem + 1vw, 2rem);
  right: clamp(1.25rem, 1rem + 1.6vw, 2.5rem);
}

.recherche__boite {
  width: min(92vw, 660px);
  display: grid;
  gap: 1.75rem;
  transform: translateY(14px);
  transition: transform 0.45s var(--ease);
}
.recherche.est-ouverte .recherche__boite { transform: translateY(0); }

.recherche__champ {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid var(--encre);
  padding-bottom: 0.85rem;
}
.recherche__champ svg { width: 1.5rem; height: 1.5rem; flex: none; }
.recherche__champ input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--titre);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  color: var(--encre);
}
.recherche__champ input::placeholder { color: var(--encre-45); }

.recherche__sugg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.recherche__etiquette {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-60);
  margin-right: 0.4rem;
}

body.sans-defilement { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .recherche, .recherche__boite { transition: none; }
}

/* ══════ V6 — logo brun, réseaux sociaux ══════ */
.logo svg { fill: #704C3C; }
.logo__nom { color: #704C3C; }
.pied .logo svg { fill: var(--beige); }
.pied .logo__nom { color: var(--beige); }

.sociaux {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.4rem;
}
.social {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(25, 25, 25, 0.15);
  background: var(--blanc);
  display: grid;
  place-items: center;
  color: var(--encre);
  transition: background var(--duree) var(--ease),
              color var(--duree) var(--ease),
              transform var(--duree) var(--ease),
              border-color var(--duree) var(--ease);
}
.social:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--beige);
  transform: translateY(-3px);
}
.social svg { width: 1.15rem; height: 1.15rem; }