/* ==========================================================================
   Ma belle Bible illustrée — La plus belle des histoires
   Artège / Le Sénevé — page de présentation
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* --- Charte Le Sénevé --------------------------------------------------
     Violet #182D40 et gris ardoise #374250 relevés sur
     particulier.editionsleseneve.fr. Le violet porte toute la page :
     titres, boutons, aplats sombres. */
  --brand:        #182D40;   /* violet maison */
  --brand-hover:  #27455F;
  --brand-dark:   #0C1724;   /* ombres de boutons, texte sur fond clair */
  --brand-deep:   #10212F;   /* aplats sombres */
  --brand-light:  #8AA2B8;
  --brand-line:   #607381;   /* bordure des boutons clairs sur fond marine */
  --wash:         #F2F6F9;   /* fond clair */
  --wash-deep:    #E2EAF1;   /* fond alterné */
  --paper:        #FFFFFF;

  --ink:          #374250;   /* gris ardoise Le Sénevé */
  --ink-soft:     #606975;

  --accent:       #C9A227;   /* or discret, rappel de la couverture */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:  1180px;
  --wrap-narrow: 860px;
  /* Un seul rayon pour toutes les surfaces rectangulaires : à 26 px, les
     grandes cartes étaient plus arrondies que les petites, ce qui se voyait. */
  --radius: 10px;
  --radius-lg: 10px;
  --shadow: 0 18px 46px -22px rgba(55,66,80,.45);
  --shadow-soft: 0 10px 30px -18px rgba(55,66,80,.35);

  --topbar-h: 48px;
  /* Hauteur qu’une section peut occuper : l’écran moins la barre collante,
     qui la recouvrirait sinon. Sert à dimensionner les contenus chargés. */
  --ecran: calc(100svh - var(--topbar-h));
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--wash);
  /* `hidden` ferait de body un conteneur de défilement dans certains
     navigateurs, ce qui casserait les éléments en position:sticky (barre
     promo et bandes qui se révèlent). `clip` rogne sans jamais créer de
     conteneur ; la première ligne reste en repli pour les navigateurs qui
     ne connaissent pas `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{
  margin:0 0 .5em;font-family:var(--font-display);font-weight:600;
  line-height:1.08;letter-spacing:-.01em;text-wrap:balance;
  /* SOFT arrondit les terminaisons : la même famille garde son caractère
     du grand titre jusqu'aux intertitres. */
  font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 0;
}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* --- 3. Utilitaires ------------------------------------------------------ */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 40px,var(--wrap-narrow))}
/* Chaque section occupe au moins l'écran entier : on ne voit jamais le début
   de la suivante en même temps que la précédente. Le contenu est centré, et
   le rembourrage bas laisse la place au lien de cheminement.
   svh plutôt que vh sur mobile : avec vh, la barre du navigateur qui se
   rétracte fait sauter la hauteur en cours de défilement.
   Les sections plus hautes qu'un écran — la galerie et l'achat — débordent
   naturellement, min-height ne les contraint pas. */
.section{
  position:relative;
  min-height:calc(100vh - var(--topbar-h));
  min-height:calc(100svh - var(--topbar-h));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,6vh,84px) clamp(76px,10vh,120px);
  scroll-margin-top:var(--topbar-h);
}
/* La reserve basse ne sert qu’a degager le lien de cheminement. Les sections
   qui n’en portent pas (commande, citation, auteurs, cloture) retrouvent une
   respiration symetrique, et gagnent la place qui leur manquait. */
section.section:not(:has(> .suite)){padding-bottom:clamp(40px,6vh,84px)}

/* Au-dela du feuilletage la barre s’est retiree : plus rien ne recouvre le
   haut de l’ecran, ces sections reprennent donc les 48 px qu’elles lui
   reservaient. Conditionne a .js : sans script la barre reste en place. */
.js #comprendre,
.js #commander{
  min-height:100vh;min-height:100svh;
  scroll-margin-top:0;
}

/* --- Cheminement d'une section à la suivante ----------------------------- */
.suite{
  /* Le reperage se cale sur la reserve basse de la section, elle-meme
     proportionnelle a l’ecran : sur un portable il se resserre d’autant. */
  /* z-index : dans le bandeau, la marge basse de l’encadre (z-index:2)
     recouvrait le repere, qui n’etait donc ni survolable ni cliquable. */
  position:absolute;left:0;right:0;bottom:clamp(18px,2.4vh,30px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:clamp(5px,.8vh,7px);
  text-decoration:none;color:inherit;
  font-size:.74rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  opacity:.68;transition:opacity .2s ease;
}
.suite:hover{opacity:1}
/* Le repere du bandeau heritait du blanc du hero et se perdait sur le voile
   clair du bas. Il reprend l’encre des autres sections. */
.hero .suite{color:var(--ink)}
.suite svg{
  width:clamp(22px,2.8vh,26px);height:clamp(22px,2.8vh,26px);fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;
}
.suite:hover svg{transform:translateY(4px)}
@media (max-width:900px){
  /* Sur telephone une section depasse forcement un ecran : le repere n’a plus
     rien a reperer, et il viendrait couper la lecture. On le retire. */
  .suite{display:none}
}
@media (prefers-reduced-motion:reduce){
  .suite svg{transition:none}
  .suite:hover svg{transform:none}
}

/* Chapeau des sections qui ouvrent sur une grille. */
.section__intro{max-width:64ch;margin:0 auto clamp(36px,4vw,54px)}
.section--light{background:var(--wash)}
.section--deep{background:var(--wash-deep)}
.section--paper{background:var(--paper)}
/* position:relative pour ancrer le décor étoilé, qui est en absolu. */
.section--ink{background:var(--brand-deep);color:#fff;position:relative;overflow:hidden}
.center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{
  font-family:var(--font-body);
  font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-dark);margin:0 0 .9em;
}
.h-xxl{font-size:clamp(2.6rem,7.2vw,5.2rem)}
.h-xl {font-size:clamp(2.1rem,4.6vw,3.5rem)}
.h-lg {font-size:clamp(1.7rem,3.2vw,2.5rem)}
.h-md {font-size:clamp(1.25rem,2vw,1.6rem)}
.brand{color:var(--brand)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-soft)}
.section--ink .lead{color:rgba(255,255,255,.82)}

/* Bouton principal. Pas de lèvre épaisse ni de soulèvement au survol : une
   ombre portée douce et un éclaircissement du fond suffisent, et ne font pas
   sauter le bouton sous le curseur. */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  background:var(--brand);color:#fff;
  font-weight:800;font-size:.95rem;letter-spacing:.09em;text-transform:uppercase;
  padding:18px 42px;border-radius:999px;
  box-shadow:0 2px 5px rgba(16,33,47,.24), 0 12px 26px -12px rgba(16,33,47,.6);
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{
  background:var(--brand-hover);
  box-shadow:0 4px 10px rgba(16,33,47,.3), 0 20px 36px -12px rgba(16,33,47,.55);
}
.btn:active{box-shadow:0 1px 3px rgba(16,33,47,.3)}

/* Libellé long : une phrase entière ne tient pas sur une ligne de bouton. On
   la laisse passer sur deux, en resserrant l'interlettrage et le rembourrage
   pour que la pastille garde des proportions tenables. */

/* Au survol, seul l’intitule s’agrandit un peu : le bouton garde sa place,
   rien ne se souleve. inline-block est indispensable, une transformation
   restant sans effet sur une boite purement en ligne. */
.btn__texte{display:inline-block;transition:transform .2s ease}
.btn:hover .btn__texte{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .btn__texte{transition:none}
  .btn:hover .btn__texte{transform:none}
}

.btn--ghost{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  box-shadow:none;padding:17px 37px;
}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:34px}

/* Sur fond marine, un bouton marine disparaîtrait. Il passe donc en clair —
   mais pas en blanc pur : une bordure gris-bleu se perdrait entre un blanc et
   un marine. Le fond #B4C1CA la laisse se détacher.
   Au survol, le fond s'éclaircit et la bordure se fonce : deux mouvements de
   teinte qui se voient franchement, sans que rien ne bouge de place. */
.hero__text .btn,
.section--ink .btn{
  background:#B4C1CA;color:var(--brand);
  border:1px solid var(--brand-line);
  box-shadow:0 2px 6px rgba(0,0,0,.3), 0 14px 28px -16px rgba(0,0,0,.55);
}
.hero__text .btn:hover,
.section--ink .btn:hover{
  background:#D7E0E5;border-color:var(--brand);
  box-shadow:0 3px 10px rgba(0,0,0,.36), 0 20px 36px -16px rgba(0,0,0,.5);
}
.hero__text .btn:active,
.section--ink .btn:active{
  background:#A6B5C0;
  box-shadow:0 1px 3px rgba(0,0,0,.34);
}

/* --- 4. Barre promo + en-tête ------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--brand);color:#fff;
  text-align:center;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;gap:.4em;
  line-height:1.3;padding:12px 20px;min-height:var(--topbar-h);
}

/* Passe le feuilletage, la barre se retire (classe posee par le script).
   Elle reste dans le flux en haut du document et s’efface par transform :
   rien ne se replie, donc aucun saut de defilement. */
.topbar{transition:transform .35s ease}
.barre-retiree .topbar{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.topbar{transition:none}}

/* --- Marqueur de démonstration -------------------------------------------
   Le bandeau d'avertissement a été retiré à la demande de l'éditeur. La
   pastille reste : elle signale les seuls contenus encore inventés, les avis
   et la note. À supprimer avec eux, une fois de vrais témoignages recueillis. */
.demo-chip{
  display:inline-block;vertical-align:middle;
  font-family:var(--font-body);font-size:.6rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent);color:#2E2609;
  padding:3px 8px;border-radius:999px;margin-left:8px;
}

.masthead{
  position:absolute;top:calc(var(--topbar-h) + 14px);left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
}
/* Le fond du bandeau est éclairci par un voile blanc : le logo doit donc être
   violet et non blanc. Fichier dédié plutôt qu'un filtre CSS, qui ne sait pas
   produire une teinte précise à partir d'un noir. */
.masthead img{width:210px;opacity:.92}

/* --- 5. Hero ------------------------------------------------------------- */
.hero{
  /* Comme les sections : le bandeau occupe l'écran entier. */
  position:relative;
  min-height:calc(100vh - var(--topbar-h));min-height:calc(100svh - var(--topbar-h));
  display:grid;place-items:center;text-align:center;
  color:#fff;overflow:hidden;
  background:var(--brand-deep);
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* Voile blanc plutôt que sombre : l'illustration passe en arrière-plan clair,
   ce qui fait ressortir l'encadré sombre et la couverture posés dessus. Léger
   dégradé pour garder un peu de relief plutôt qu'un aplat uniforme. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.60) 45%,rgba(255,255,255,.74) 100%);
}
/* Le hero doit montrer le produit : le nom de l'ouvrage et sa couverture.
   Sur large écran, texte à gauche et couverture à droite. En dessous de
   900 px tout s'empile, et la couverture passe en tête (order:-1) : sinon
   elle tomberait sous le bouton, donc hors de l'écran d'accueil. */
.hero__inner{
  /* Reserve sous le contenu la place du lien de cheminement, qui se pose en
     bas du bandeau : sans cela il chevauchait l’encadre. */
  position:relative;z-index:2;padding:clamp(84px,11vh,118px) 0 clamp(76px,10vh,120px);
  display:grid;gap:clamp(26px,4vw,60px);align-items:center;
  grid-template-columns:1fr;justify-items:center;
}
.hero__cover{order:-1}
@media (min-width:900px){
  .hero__inner{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);text-align:left;justify-items:stretch}
  .hero__text{text-align:left}
  .hero__cover{order:0;justify-self:end}
}

/* Encadré du bandeau. Le texte se posait à même l'illustration étoilée, très
   contrastée, et devenait difficile à lire. L'encadré est un aplat franc : le
   texte blanc ne dépend donc plus de ce qui passe derrière. */
.hero__text{
  background:var(--brand);
  border:1px solid rgba(233,198,92,.3);
  border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,40px);
  box-shadow:0 26px 64px -28px rgba(16,33,47,.55);
}

.hero__eyebrow{
  font-size:.76rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  /* Plus clair que --brand-light, qui se perdait sur le fond étoilé. */
  color:#BCCBD9;margin:0 0 1.1em;
}
.hero__tagline{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.25rem,2.4vw,1.85rem);font-weight:500;
  color:#fff;opacity:.92;margin:0 0 .7em;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}

.hero__cover img{
  /* max-width plutot que width : avec une hauteur plafond, les deux
     contraintes jouent ensemble et l’image garde ses proportions. */
  /* La couverture etait bridee a 330 px alors que sa colonne en offre plus de
     500 : elle paraissait petite a cote de l’encadre. Les deux plafonds montent
     pour qu’elle arrive a sa hauteur, sans jamais la depasser. */
  max-width:min(78vw,430px);max-height:calc(var(--ecran) - 250px);
  width:auto;height:auto;
  border-radius:5px;
  /* Filet clair remplacé par un filet sombre : sur le fond éclairci, un liseré
     blanc ne se verrait plus. */
  box-shadow:0 34px 60px -24px rgba(16,33,47,.55), 0 0 0 1px rgba(16,33,47,.14);
  transform:rotate(2.5deg);
}
/* La page source compose son titre en new-spirit (Adobe Fonts, sous licence).
   Fraunces est une fonte variable : en poussant SOFT et en activant WONK, on
   obtient le même serif adouci aux terminaisons arrondies. Corps très large,
   interlignage serré, comme l'original. */
.hero h1{
  /* Le nom de l'ouvrage, pas son sous-titre : c'est ce que le visiteur
     doit lire en premier. Corps réduit par rapport à une accroche seule,
     puisqu'il partage désormais la largeur avec la couverture. */
  font-size:clamp(2.3rem,5.2vw,4.2rem);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 144,"SOFT" 55,"WONK" 1;
  text-wrap:balance;
  text-shadow:0 4px 26px rgba(0,0,0,.45);
  margin-bottom:.18em;
}
.hero__sub{
  font-size:clamp(1rem,1.5vw,1.15rem);font-weight:600;
  max-width:38ch;margin:0 auto 32px;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero__specs{
  font-size:.83rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#BCCBD9;margin:-14px 0 28px;
}
@media (min-width:900px){
  .hero__sub,.hero__specs{margin-inline:0}
}

/* --- 6. Vidéo ------------------------------------------------------------ */
.video-block{max-width:900px;margin-inline:auto}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:#16293A;box-shadow:var(--shadow);
}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video-caption{margin-top:18px;font-size:.95rem;color:var(--ink-soft);text-align:center}

/* --- 7. Grille d'atouts -------------------------------------------------- */
/* Six atouts : en auto-fit on obtenait 4 + 2, avec deux cartes orphelines
   calées à gauche. Trois colonnes donnent deux rangées pleines et des cartes
   plus larges, donc un texte plus lisible. */
.features{
  display:grid;gap:44px 38px;
  grid-template-columns:repeat(3,1fr);
  margin-top:56px;
}
@media (max-width:860px){.features{grid-template-columns:repeat(2,1fr);gap:36px 28px}}
@media (max-width:560px){.features{grid-template-columns:1fr;gap:34px}}
.feature{text-align:center}
/* Les icônes sont dessinées en currentColor : une seule règle suffit à les
   reteindre. Alternance violet / violet clair / or pour le rythme. */
.feature__icon{width:66px;height:66px;margin:0 auto 18px;display:grid;place-items:center;color:var(--brand)}
.feature:nth-child(3n+2) .feature__icon{color:var(--brand-light)}
.feature:nth-child(3n) .feature__icon{color:var(--accent)}
.feature__icon svg{width:100%;height:100%}
.feature h3{font-size:1.18rem;margin-bottom:.45em;line-height:1.25}
.feature p{font-size:.97rem;color:var(--ink-soft);margin:0}

/* --- 8. Galerie ---------------------------------------------------------- */
/* Les pages du livre sont en portrait, toutes au même rapport (1044/1500 et
   1392/2000 donnent 0,696). En calant la vignette sur ce rapport exact, aucune
   page n'est rognée : on montre l'illustration entière, ce qui est justement
   l'argument du livre. Le nombre de colonnes est explicite plutôt qu'auto-fit,
   pour que les huit vignettes tombent toujours en rangées pleines. */
.gallery{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(3,1fr)}
  /* Six cases sur une ligne demandent de la largeur : en dessous elles se
     remettent sur deux rangees de trois, puis trois de deux au telephone. */
  .specs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr);gap:12px}}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--wash-deep)}
.gallery img{aspect-ratio:1044/1500;object-fit:cover;width:100%;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.04)}

/* --- 9. Bloc produit ----------------------------------------------------- */
.product{display:grid;gap:clamp(32px,5vw,70px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  /* align-items:center plutot que start : l’encadre, bien plus court depuis
     qu’il a ete allege, pendait en haut d’une colonne deux fois plus haute. */
  .product{grid-template-columns:auto minmax(0,1fr);align-items:center}
}

.product__cover img{
  border-radius:6px;box-shadow:0 30px 60px -28px rgba(55,66,80,.75);
  margin-inline:auto;max-width:520px;width:100%;
}
.product__title{font-style:italic;text-align:center;margin-top:28px;font-size:1.25rem;font-family:var(--font-display)}
.product__title span{display:block;font-style:normal;font-size:.95rem;color:var(--ink-soft);margin-top:.4em;font-family:var(--font-body)}

/* Les caracteristiques sont passees sous les deux colonnes, sur une seule
   ligne : empilees sous la couverture, elles allongeaient la colonne de
   gauche bien au-dela de l’encadre. */
.specs{
  list-style:none;margin:clamp(30px,4vh,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:26px 12px;text-align:center;
  border-top:1px solid rgba(55,66,80,.14);border-bottom:1px solid rgba(55,66,80,.14);
  padding-block:26px;
}
.specs li{font-size:.92rem;line-height:1.35}
.specs b{display:block;font-family:var(--font-display);font-size:1.02rem;font-weight:600}
/* L’intitule coiffe la valeur : il annonce de quoi on parle avant de la dire. */
.specs span{
  display:block;margin-bottom:.3em;
  color:var(--ink-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
}

.buybox{
  text-align:center;
  background:var(--paper);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow);
}
/* Le haut du bloc respire : annonce, titre et promesse se detachaient a
   peine les uns des autres. */
.buybox .product__title{margin-top:0;margin-bottom:.75em}
/* La phrase annonce le bouton : elle doit peser plus que le chapo sans
   disputer la vedette au titre de l’ouvrage. */
.buybox__libraire{
  margin:0 0 16px;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--brand);
}
/* Le prix et sa ligne technique l’un sous l’autre : cote a cote, la seconde
   pendait au pied du chiffre sans s’y rattacher. */
.price{display:flex;flex-direction:column;align-items:center;gap:7px;margin:26px 0 8px}
.price strong{font-family:var(--font-display);font-size:2.8rem;line-height:1;color:var(--brand-dark)}
.price em{font-style:normal;color:var(--ink-soft);font-size:.9rem}


/* L'EAN sort de la grille : il sert aux libraires, pas aux parents. */
.specs__ean{
  margin:14px 0 0;text-align:center;
  font-size:.76rem;letter-spacing:.09em;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* Hiérarchie voulue par l'éditeur : la librairie en premier, en bouton
   plein ; la vente en ligne ensuite, en bouton fantôme, séparée par un
   filet pour que les deux ne se disputent pas le regard. */

.buybox__site{margin-top:28px;text-align:center}
.btn--cart{display:inline-flex;align-items:center;gap:11px}
.btn--cart svg{
  width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}


/* --- 10. Blocs alternés texte / image ------------------------------------ */
.split{display:grid;gap:clamp(30px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr}
  .split--reverse .split__text{order:2}
}
/* Une page en portrait occuperait toute la hauteur de la colonne : on la
   plafonne pour qu'elle reste à l'échelle du texte d'à côté. */
/* Comme la couverture du bandeau : une hauteur plafond en plus de la largeur,
   pour que la page presentee ne pousse pas le repere de cheminement. */
.split__media img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  max-width:400px;max-height:calc(var(--ecran) - 190px);
  width:auto;height:auto;margin-inline:auto;display:block;
}
.split__text h2{margin-bottom:.4em}

/* --- 11. Aperçu intérieur ------------------------------------------------ */
.peek{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:52px}
.peek figure{margin:0}
.peek img{border-radius:var(--radius);box-shadow:var(--shadow-soft);aspect-ratio:3/4;object-fit:cover;width:100%}
.peek figcaption{
  margin-top:18px;font-weight:800;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;color:var(--ink);
}

/* --- 11 bis. Bandes qui se révèlent ---------------------------------------
   Trois panneaux collants dans un même conteneur : chacun se fige en haut de
   l'écran pendant que le suivant glisse par-dessus, donc l'effet se produit
   trois fois de suite. Aucun JS — c'est position:sticky qui fait tout, et
   l'ordre du DOM suffit à empiler les panneaux dans le bon sens. */
.reveal-stack{position:relative}
.reveal-band{position:sticky;top:0;height:min(72vh,600px);overflow:hidden}
.reveal-band img{width:100%;height:100%;object-fit:cover;display:block}
.reveal-band__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:70px 24px 38px;
  background:linear-gradient(to top,rgba(16,33,47,.85),rgba(16,33,47,.25) 55%,transparent);
  color:#fff;text-align:center;
}
.reveal-band__caption p{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.2rem,2.6vw,2.1rem);
  font-variation-settings:"opsz" 120,"SOFT" 50,"WONK" 1;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

@media (prefers-reduced-motion:reduce){
  /* Sans le défilement, l'empilement n'a plus de sens : on déroule. */
  .reveal-band{position:static;height:auto}
  .reveal-band img{height:auto}
}

/* --- 11 ter. Étoiles scintillantes ----------------------------------------
   Reprise du motif à quatre branches qui parcourt les illustrations du livre.
   Les positions sont posées à la main dans le HTML (--x, --y, --s, --d) plutôt
   que par un motif répété : une trame régulière se verrait tout de suite. */
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stars i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0Q12 12 24 12Q12 12 12 24Q12 12 0 12Q12 12 12 0Z' fill='%23E9C65C'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.2;
  animation:scintille 5.5s ease-in-out var(--d,0s) infinite;
}
@keyframes scintille{
  0%,100%{opacity:.16;transform:scale(.88)}
  50%    {opacity:.7; transform:scale(1.06)}
}
/* Le contenu des sections etoilees doit rester au-dessus du decor. */
.section > .wrap{position:relative;z-index:1}

/* --- 11 quater. Micro-animations ------------------------------------------
   Trois gestes seulement, là où le survol appelle une réponse. */
.feature{transition:transform .25s ease}
.feature:hover{transform:translateY(-4px)}
.feature__icon{transition:transform .25s ease}
.feature:hover .feature__icon{transform:scale(1.08)}

.peek figure img,
.person img{transition:transform .3s ease, box-shadow .3s ease}
.peek figure:hover img{transform:translateY(-5px);box-shadow:var(--shadow)}

/* La couverture est le seul objet de la page qu’on a envie de prendre en
   main : elle repond au survol, sans se deplacer. */
.product__cover img{transition:transform .45s ease, box-shadow .45s ease}
.product__cover:hover img{
  transform:scale(1.025);
  box-shadow:0 38px 70px -28px rgba(55,66,80,.85);
}
.specs li b{transition:color .2s ease}
.specs li:hover b{color:var(--brand)}

@media (prefers-reduced-motion:reduce){
  .stars i{animation:none;opacity:.3}
  .feature,.feature__icon,.peek figure img,.person img,.specs li b{transition:none}
  .feature:hover,.feature:hover .feature__icon,.peek figure:hover img{transform:none}
}

/* --- 12. Citation -------------------------------------------------------- */
.pullquote{text-align:center}
.pullquote blockquote{margin:0;font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.25}
.pullquote cite{
  display:block;margin-top:26px;font-style:normal;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--brand-light);
}

/* --- 12 bis. Appel à l'action final ---------------------------------------
   Reprend la composition du bandeau d'accueil, mais en miroir : couverture à
   gauche, texte à droite, et l'inclinaison inversée. La page s'ouvre et se
   ferme ainsi sur le même objet. */
.final-cta{
  display:grid;gap:clamp(30px,5vw,60px);align-items:center;
  grid-template-columns:1fr;justify-items:center;text-align:center;
}
@media (min-width:860px){
  .final-cta{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);text-align:left;justify-items:stretch}
  .final-cta__cover{justify-self:start}
}
.final-cta__cover img{
  width:min(66vw,270px);margin-inline:auto;
  border-radius:5px;
  /* inclinaison opposée à celle du bandeau d'accueil */
  transform:rotate(-2.5deg);
  box-shadow:0 30px 60px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14);
}
.final-cta__specs{
  font-size:.83rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-light);margin:-6px 0 0;
}
/* En inline-flex, le groupe se rétrécit à la largeur du bouton : la mention
   se centre donc sur le bouton et non sur toute la colonne de texte. */
.final-cta__actions{
  display:inline-flex;flex-direction:column;align-items:center;
  gap:16px;margin-top:32px;
}

/* --- 13. Témoignages ----------------------------------------------------- */
.testimonials{columns:2;column-gap:28px;margin-top:48px}
@media (max-width:820px){.testimonials{columns:1}}
.testimonial{
  break-inside:avoid;background:var(--paper);border-radius:var(--radius);
  padding:28px 30px;margin:0 0 28px;box-shadow:var(--shadow-soft);
}
.testimonial h3{font-size:1.1rem;margin-bottom:.1em}
.testimonial .role{font-size:.83rem;color:var(--ink-soft);margin-bottom:1em;line-height:1.4}
.testimonial p{font-size:.98rem;margin:0}

/* --- 14. Contenu de chaque histoire -------------------------------------- */
.included{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:52px;padding:0}
.included li{
  list-style:none;background:var(--paper);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-soft);
  border-top:5px solid var(--brand);
}
.included li:nth-child(2){border-top-color:var(--accent)}
.included li:nth-child(3){border-top-color:var(--brand-light)}
.included li:nth-child(4){border-top-color:var(--ink-soft)}
.included h3{font-size:1.1rem}
.included p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* --- 15. Auteurs --------------------------------------------------------- */
.people{display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:48px}
.person{display:grid;gap:22px;grid-template-columns:110px 1fr;align-items:start}
.person img{width:110px;height:110px;border-radius:50%;object-fit:cover;background:var(--wash-deep)}
/* Faute de portrait, la notice occupe toute la largeur plutôt que d'afficher
   une silhouette générique à la place d'une personne réelle. */
.person--no-photo{grid-template-columns:1fr}
.person h3{font-size:1rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body);font-weight:800;margin-bottom:.6em}
.person p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* --- 15 bis. Cloture ------------------------------------------------------
   Citation, notices et appel final partagent un seul ecran. En haut, la
   parole de l’editeur et celles qui ont fait le livre se font face de part
   et d’autre d’un filet ; l’appel final vient ensuite, apres une respiration.
   Les notices sont en blanc : en bleu clair sur marine, elles se perdaient.
   ------------------------------------------------------------------------- */
#fin > .wrap{display:grid;gap:clamp(44px,7.4vh,96px);justify-items:center}

#fin .closing__top{display:grid;gap:clamp(22px,3vw,44px);width:100%}
@media (min-width:860px){
  #fin .closing__top{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
  }
  /* Le filet separe les deux prises de parole. Pose sur la colonne de
     droite plutot qu’en element a part : il suit sa hauteur tout seul. */
  #fin .people{
    border-left:1px solid rgba(255,255,255,.26);
    padding-left:clamp(22px,3vw,44px);
  }
}

#fin .pullquote{max-width:46ch;margin-inline:auto}
#fin .pullquote blockquote{font-size:clamp(1.12rem,1.8vw,1.5rem)}
/* Les deux phrases sont deux paragraphes, et non un bloc coupe par un <br>.
   text-wrap:balance repartit chacun sur des lignes de longueur voisine, ce
   qui supprime le mot reste seul en fin de phrase. La ou la propriete n’est
   pas connue, le texte se replie normalement : la coupure entre les deux
   phrases, elle, tient au balisage et reste acquise. */
#fin .pullquote blockquote p{margin:0;text-wrap:balance}
#fin .pullquote blockquote p + p{margin-top:.45em}
#fin .pullquote cite{margin-top:14px;color:#fff}

/* Les deux creatrices l’une sous l’autre, et non cote a cote. */
#fin .people{
  margin-top:0;max-width:none;
  grid-template-columns:1fr;gap:clamp(16px,2.4vh,28px);
}
#fin .person{grid-template-columns:68px 1fr;gap:16px;align-items:center}
#fin .person img{width:68px;height:68px}
#fin .person h3{font-size:.76rem;letter-spacing:.12em;margin-bottom:.45em;color:#fff}
#fin .person p{font-size:.84rem;line-height:1.5;color:#fff}

#fin .final-cta{width:100%}
@media (min-width:860px){
  /* Colonne de texte assez large pour que le titre et le bouton tiennent
     chacun sur une ligne, le groupe restant centre sous le haut. */
  #fin .final-cta{
    grid-template-columns:auto minmax(0,640px);
    justify-content:center;gap:clamp(28px,3.4vw,50px);
  }
  #fin .final-cta__cover{justify-self:auto}
  #fin .final-cta__text h2{white-space:nowrap}
}
#fin .final-cta__cover img{width:min(56vw,205px)}
#fin .final-cta__text h2{font-size:clamp(1.5rem,2.2vw,2.05rem)}
#fin .final-cta__text .lead{font-size:1rem}
/* Plus de bleu sur bleu, et blanc plein comme le reste de la cloture. */
#fin .final-cta__specs{color:#fff}
#fin .final-cta__libraire{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.08rem,1.4vw,1.28rem);color:#fff;
}
#fin .final-cta__actions{margin-top:20px}

/* --- 16. Pied de page ---------------------------------------------------- */
.site-footer{background:var(--brand-deep);color:rgba(255,255,255,.8);padding-block:56px;text-align:center;font-size:.9rem}
.site-footer img{width:200px;margin:0 auto 26px;filter:brightness(0) invert(1);opacity:.9}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer nav{margin-bottom:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.site-footer .legal{opacity:.6;font-size:.82rem;margin-top:18px}

/* --- 17. CTA flottant mobile --------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--wash-deep);border-top:1px solid rgba(55,66,80,.12);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none;justify-content:center;
  box-shadow:0 -10px 30px -20px rgba(55,66,80,.6);
  transform:translateY(110%);transition:transform .3s ease;
}
.sticky-cta.is-visible{transform:none}
.sticky-cta .btn{padding:14px 30px;font-size:.85rem}
@media (max-width:720px){.sticky-cta{display:flex}}

/* --- 18. Parallaxe -------------------------------------------------------
   Le visuel du hero est volontairement plus haut que son cadre : JS écrit
   --py et l'image glisse plus lentement que la page. On passe par transform
   (et non background-attachment:fixed, cassé sur iOS et coûteux au repaint). */
.hero__media{will-change:transform}
.has-parallax .hero__media{top:-14%;height:128%;transform:translate3d(0,var(--py,0px),0)}

/* Dérive plus discrète sur les visuels des blocs alternés */
.has-parallax .split__media{overflow:hidden;border-radius:var(--radius-lg)}
.has-parallax .split__media img{
  transform:translate3d(0,var(--py,0px),0) scale(1.08);
  will-change:transform;border-radius:0;
}

/* --- 19. Avis -------------------------------------------------------------
   Ils seront huit : plus assez pour tenir sur une ligne, trop peu pour une
   grille qui remplirait l’ecran. D’ou une piste qui defile.
   Le defilement natif plutot qu’un ruban en transform : le glissement du
   doigt, la molette et le clavier fonctionnent alors sans une ligne de code,
   et scroll-snap pose chaque carton au bon endroit.
   ------------------------------------------------------------------------- */
.reviews{position:relative;margin-top:clamp(26px,3.4vh,44px)}

.reviews__piste{
  display:flex;gap:clamp(14px,1.4vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* La barre de defilement est masquee : les fleches disent deja qu’on peut
     avancer, et le glissement reste possible. */
  scrollbar-width:none;-ms-overflow-style:none;
  /* De quoi laisser respirer l’ombre portee des cartons. */
  padding:6px 2px 18px;
}
.reviews__piste::-webkit-scrollbar{display:none}
.reviews__piste:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:var(--radius)}

/* Trois cartons visibles sur grand ecran, deux en dessous, un sur telephone. */
.reviews .testimonial{
  flex:0 0 calc((100% - 2 * clamp(14px,1.4vw,24px)) / 3);
  scroll-snap-align:start;
  margin:0;padding:clamp(18px,1.8vw,26px);
}
@media (max-width:1100px){
  .reviews .testimonial{flex-basis:calc((100% - clamp(14px,1.4vw,24px)) / 2)}
}
@media (max-width:640px){
  .reviews .testimonial{flex-basis:88%}
}
.reviews .testimonial h3{font-size:1rem;margin-bottom:.2em}
.reviews .testimonial .role{font-size:.78rem;margin-bottom:.9em;letter-spacing:.04em}
.reviews .testimonial p{font-size:.92rem;line-height:1.6;font-style:italic}
/* Un seul avis compte plusieurs paragraphes ; les autres n’en ont qu’un. */
.reviews .testimonial p + p{margin-top:.7em}
.reviews .testimonial .role + p{margin-top:0}

/* Les fleches debordent la piste : posees dessus, elles mangeraient le texte. */
.reviews__fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);color:var(--brand);
  border:1px solid rgba(55,66,80,.14);
  box-shadow:0 6px 18px -8px rgba(55,66,80,.5);
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}
.reviews__fleche--prec{left:-22px}
.reviews__fleche--suiv{right:-22px}
.reviews__fleche svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reviews__fleche:hover{background:var(--wash);border-color:var(--brand)}
/* Au bout de la piste, la fleche s’eteint plutot que de disparaitre : sa
   place reste prise, rien ne saute. */
.reviews__fleche[disabled]{opacity:.25;cursor:default;box-shadow:none}
/* En dessous de 1240 px, la piste occupe toute la largeur : une fleche
   posee a cheval masquerait le texte du premier carton. Elles passent donc
   sous la piste, cote a cote et centrees. */
@media (max-width:1240px){
  .reviews{padding-bottom:62px}
  .reviews__fleche{top:auto;bottom:0;transform:none}
  .reviews__fleche--prec{left:calc(50% - 52px)}
  .reviews__fleche--suiv{right:calc(50% - 52px)}
}
@media (prefers-reduced-motion:reduce){
  .reviews__piste{scroll-behavior:auto}
  .reviews__fleche{transition:none}
}

/* --- 19 bis. Éclats -------------------------------------------------------
   Deux essais ont échoué avant celui-ci, pour la même raison : des aplats.
   Même forme, même taille, même opacité — sur un fond pâle, ils ne pouvaient
   que ressembler à des croix grises. Un éclat est ici deux choses : l’étoile
   aux branches effilées, et un halo qui la déborde largement. C’est le halo
   qui fait la lumière ; l’étoile seule n’en donne aucune.
   Chaque éclat porte sa taille, son opacité et son retard : vingt éclats tous
   identiques se voient comme un motif, vingt éclats dissemblables se voient
   comme un ciel.
   ------------------------------------------------------------------------- */
.eclats{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.eclats i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--t);height:var(--t);margin:calc(var(--t) / -2);
  /* L’étoile n’occupe que 38 % de la boîte : tout le reste est le halo. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53 37 63 47 100 50C63 53 53 63 50 100C47 63 37 53 0 50C37 47 47 37 50 0Z' fill='%23C9A227'/%3E%3C/svg%3E") center/38% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(201,162,39,.20) 0%, rgba(201,162,39,0) 64%);
  opacity:var(--o,.4);
  animation:eclat 11s ease-in-out var(--d,0s) infinite;
}
/* La rotation est de six degrés : assez pour que l’éclat vive, trop peu pour
   qu’on voie tourner quoi que ce soit. */
@keyframes eclat{
  0%,100%{opacity:calc(var(--o) * .4);transform:scale(.78) rotate(-6deg)}
  50%    {opacity:var(--o);            transform:scale(1)    rotate(6deg)}
}
@media (prefers-reduced-motion:reduce){
  .eclats i{animation:none;opacity:calc(var(--o) * .7)}
}

/* --- 20. Note et étoiles -------------------------------------------------- */
.rating{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px}
.rating__stars{display:flex;gap:5px;color:var(--accent);line-height:0}
.rating__stars svg{width:25px;height:25px;fill:currentColor}
.rating__text{font-size:.93rem;color:var(--ink-soft);margin:0}
.rating__text b{color:var(--ink);font-size:1.05rem}

/* --- 21. Révélation au scroll --------------------------------------------
   Trois variantes reprises de la page source : glissé depuis le haut,
   fondu simple, et ouverture en échelle. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal--glide{transform:translateY(-34px)}
.js .reveal--fade{transform:none}
.js .reveal--zoom{transform:scale(.93)}
.reveal.is-in,
.reveal--glide.is-in,
.reveal--fade.is-in,
.reveal--zoom.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .reveal--glide,
  .js .reveal--fade,
  .js .reveal--zoom{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .gallery img{transition:none}
  .has-parallax .hero__media{top:0;height:100%;transform:none}
  .has-parallax .split__media img{transform:none}
}

/* --- 23. Retour en haut ---------------------------------------------------
   Apparaît une fois le bandeau d'accueil dépassé. Sur téléphone il remonte
   au-dessus du bandeau d'achat collant, sans quoi les deux se chevaucheraient. */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:75;
  width:50px;height:50px;border:0;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;
  box-shadow:0 10px 26px -10px rgba(16,33,47,.75);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,background .15s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-hover);transform:translateY(-3px)}
.to-top svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:720px){
  .to-top{right:16px;bottom:82px;width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){
  .to-top{transition:none}
  .to-top:hover{transform:none}
}

/* Repérage des liens encore provisoires. La règle ne dépend plus de rien
   d'autre que l'attribut lui-même : elle s'éteint d'elle-même le jour où le
   data-todo est retiré du lien. Les deux accroches précédentes — le bandeau
   de démonstration puis les pastilles — ont disparu tour à tour en emportant
   le signal avec elles. */
/* Trait d’un pixel et or tres dilue : le reperage subsiste pour nous sans
   defigurer le lien, la decoration se propageant aussi a la fleche. */
a[data-todo]{
  text-decoration:underline dotted rgba(201,162,39,.45);
  text-underline-offset:4px;text-decoration-thickness:1px;
}

/* --- 23 bis. Tenir dans un écran ------------------------------------------
   On ne doit jamais voir le début de la section suivante. Quatre sections
   débordaient parce que leur contenu est dimensionné en largeur ; on les
   redimensionne ici à partir de la hauteur disponible. Sous 900 px la règle
   ne s’applique pas : sur un téléphone, huit pages pleines et un texte ne
   tiennent pas ensemble dans un écran, et les resserrer les rendrait illisibles.
   ------------------------------------------------------------------------- */
@media (min-width:900px){

  /* Vidéo : la largeur découle de la hauteur restante, et non l’inverse. */
  .video-block{max-width:min(900px, (var(--ecran) - 420px) * 16 / 9)}

  /* Six atouts : interlignes et icônes resserrés. */
  #pourquoi h2{margin-bottom:clamp(12px,1.6vh,22px)}
  .features{margin-top:clamp(14px,1.8vh,26px);gap:clamp(20px,2.6vh,34px) 38px}
  .feature__icon{
    width:clamp(46px,6vh,62px);height:clamp(46px,6vh,62px);
    margin-bottom:clamp(9px,1.6vh,16px);
  }

  /* Comprendre : empilées, les huit pages demandaient 800 px à elles seules.
     Le texte passe donc à gauche et la galerie occupe la colonne de droite. */
  #comprendre > .wrap{
    display:grid;grid-template-columns:minmax(320px,.42fr) minmax(0,1fr);
    gap:clamp(32px,3.6vw,56px);align-items:center;
  }
  #comprendre .section__intro{margin:0;max-width:none}
  #comprendre .section__intro h2,
  #comprendre .section__intro p{text-align:left}
  #comprendre .gallery{gap:clamp(10px,1.4vh,16px)}

  /* Commande : la colonne de gauche était la plus haute, à cause de la
     couverture. On la cale sur la place restante une fois le reste posé. */
  .product__cover img{max-width:min(520px, (var(--ecran) - 355px) * 1044 / 1500)}
  .product__title{margin-top:16px}
  .specs{margin-top:20px;gap:26px 12px;padding-block:18px}
  .buybox{padding:clamp(20px,2vw,26px)}
  .price{margin:22px 0 4px}
  .price strong{font-size:2.4rem}
  .buybox__site{margin-top:16px}
}

/* --- 23 ter. Écrans peu hauts ---------------------------------------------
   Un portable courant n’offre que 720 px une fois la barre déduite. Les trois
   sections les plus denses y débordaient : on y réduit les titres et les
   réserves, sans toucher aux grands écrans où la composition reste ample.
   ------------------------------------------------------------------------- */
@media (min-width:900px) and (max-height:860px){

  /* Bandeau : c’est l’encadré, pas la couverture, qui débordait. */
  .hero__text{padding:clamp(20px,2vw,28px)}
  .hero h1{font-size:clamp(2.1rem,4vw,3.2rem)}
  .hero__tagline{font-size:clamp(1.15rem,1.9vw,1.5rem)}
  .hero__sub{font-size:.97rem}

  /* Six atouts : le titre sur deux lignes coûtait à lui seul 120 px. */
  #pourquoi h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
  .feature__icon{width:44px;height:44px;margin-bottom:10px}
  .feature h3{font-size:1.08rem}
  .feature p{font-size:.92rem}

  /* Commande : le bloc d’achat est la colonne la plus haute. */
  .buybox__lead{font-size:1rem}
  .price strong{font-size:2rem}
  /* Le repere « En savoir plus » prend sa part de la reserve basse : le
     bloc d’achat doit rendre autant de hauteur. */
  .buybox{padding:clamp(20px,2vw,26px)}
  .buybox__lead{font-size:1rem}
  .buybox__site{margin-top:20px}

  /* Cloture : trois anciennes sections dans un seul ecran. */
  /* L’ecart entre le haut de la cloture et l’appel final : c’est ce palier
     qui s’applique sur un portable, pas la regle de base. */
  #fin > .wrap{gap:clamp(36px,8vh,78px)}
  #fin .pullquote blockquote{font-size:clamp(1.12rem,1.8vw,1.45rem)}
  #fin .pullquote cite{margin-top:10px}
  #fin .final-cta__text h2{font-size:clamp(1.62rem,2.6vw,2.2rem)}
  #fin .final-cta__actions{margin-top:20px}
}

/* --- 23 quater. Écrans bas et étroits -------------------------------------
   Vers 1024 px de large, les cartes d’atouts se resserrent et gagnent donc en
   hauteur ; le bloc d’achat aussi. Dernier cran avant la version téléphone.
   ------------------------------------------------------------------------- */
@media (min-width:900px) and (max-height:760px){
  #pourquoi h2{margin-bottom:10px}
  .features{gap:clamp(12px,1.7vh,26px) 30px}
  .feature h3{font-size:1rem;margin-bottom:.35em}
  .feature p{font-size:.88rem;line-height:1.4}

  .buybox__lead{font-size:.93rem}
  .specs{margin-top:14px;gap:20px 12px;padding-block:14px}
  .buybox__site{margin-top:12px}

  #fin .pullquote{max-width:56ch}
  #fin .person img{width:68px;height:68px}
  #fin .person p{font-size:.79rem}
  #fin .final-cta__cover img{width:min(56vw,185px)}
  #fin .final-cta__text .lead{font-size:.92rem}
  .price strong{font-size:1.8rem}
  .buybox{padding:clamp(17px,1.6vw,22px)}
  .buybox__site{margin-top:14px}
  .feature__icon{width:38px;height:38px;margin-bottom:8px}
}

/* --- 24. Ajustements mobiles --------------------------------------------- */
@media (max-width:640px){
  body{font-size:16px}
  .specs{grid-template-columns:repeat(2,1fr);gap:18px 10px}
  .person{grid-template-columns:1fr;justify-items:center;text-align:center}
  .masthead img{width:160px}
  /* Une ligne, puis l’autre. Cote a cote, la date et le lien se
     partageaient la largeur et tenaient chacun sur deux lignes. */
  /* Sur deux lignes la barre mesure 52 px : le jeton doit dire vrai, les
     sections calculant leur hauteur en le retranchant de l’ecran. */
  :root{--topbar-h:52px}
  .topbar{flex-direction:column;gap:2px;font-size:.84rem;padding:7px 14px}
  .topbar__tiret{display:none}

  /* Boutons panier : entre le pictogramme, l’interlettrage et des marges
     calculees pour un grand ecran, il ne restait que 168 px a un intitule qui
     en demande 209 — d’ou le repli sur deux lignes. On resserre tout ce qui
     n’est pas le mot, et le bouton prend la largeur offerte. */
  .btn--cart{
    display:flex;width:100%;
    padding-inline:12px;gap:8px;
    font-size:.8rem;letter-spacing:.055em;
  }
  /* Le pictogramme disparait sur telephone : « Commandez-la sur notre site »
     dit tout, et ses 26 px de large et d’ecart faisaient basculer le libelle
     sur deux lignes. */
  .btn--cart svg{display:none}
  /* Hero resserré : couverture, titre et bouton doivent tenir ensemble
     dans le premier écran d'un téléphone. */
  /* Le bandeau reste plein écran sur téléphone, comme les sections. */
  .hero{min-height:calc(100vh - var(--topbar-h));min-height:calc(100svh - var(--topbar-h))}
  /* 84 px en haut : juste de quoi dégager le logo, positionné à 62 px. */
  .hero__inner{padding:84px 0 46px;gap:18px}
  .hero__cover img{width:min(52vw,215px)}
  .hero__eyebrow{margin-bottom:.7em}
  .hero__sub{margin-bottom:18px}
}