/* ═══════════════════════════════════════════════════════════════
   PANIBAG — morceau 1 : en-tête et hero.  V3.3, 27/09/2026.

   Retour de Romain sur la V3.2, deux points :
   · les pictos racontaient autre chose que le texte ;
   · le hero ne tenait plus dans un écran, il fallait dérouler pour
     lire, alors que l'encart existe justement pour donner
     l'information d'un seul coup d'œil.

   Donc : l'encart revient sur l'image, tout y tient, et les quatre
   repères sont de même rang — même corps, même alignement, séparés
   par des filets. Plus aucun picto dans cette rangée : aucun dessin à
   30 px ne dit « manne à pain » ou « satisfait ou remboursé » sans se
   faire lire de travers. Les trois seuls pictos restants, carte, colis
   et camion, sont univoques.

   Typo : Cabinet Grotesk aux titres, Switzer au corps.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:Switzer;src:url(fonts/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cabinet;src:url(fonts/cabinet-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Cabinet;src:url(fonts/cabinet-800.woff2) format('woff2');font-weight:800;font-display:swap}

/* ── LE SYSTÈME ──────────────────────────────────────────────────
   Un rôle par token, un token par rôle. Les valeurs qui traînaient
   en dur dans la feuille ont toutes reçu leur nom : le charbon
   portait quatre couleurs anonymes, plus aucune n'était modifiable
   en un seul endroit.

   Trois contrastes ont été corrigés. Ils sont mesurés contre le fond
   sur lequel la couleur est réellement posée, seuil 4,5 pour du texte
   courant, 3,0 au-delà de 24 px :
   · --gris passe de #7A6A58 (4,36) à #776756 (4,56). C'est la
     couleur de toutes les légendes et de tout le technique.
   · le CTA passe de --orange (3,39 sous du blanc) à --orange-txt
     (4,50). Le libellé du bouton de commande était sous le seuil.
   · l'orange en petit corps passe à --orange-lisible (4,57). À
     10,5 px, 2,84 ne se lit pas dans un fournil au néon.

   L'orange vif reste, sur les aplats et les pictos, là où il ne
   porte pas de texte. ──────────────────────────────────────────── */
:root{
  /* fonds */
  --creme:#F2EADC;
  --creme-clair:#F8F3E9;
  --charbon:#241C14;

  /* texte sur crème */
  --txt:#241C14;
  --gris:#776756;              /* était #7A6A58, 4,36 : sous le seuil */

  /* texte sur charbon */
  --txt-inv:#EFE7DA;           /* était en dur 22 fois */
  --txt-inv-attenue:#B6A692;   /* était en dur 12 fois */

  /* accent : trois rôles, jamais interchangeables */
  --orange:#EA6020;            /* aplats et pictos, ne porte pas de texte */
  --orange-txt:#CC4E13;        /* fond des boutons, texte blanc dessus */
  --orange-lisible:#B64511;    /* orange en petit corps sur crème */

  /* filets, décoratifs : ne portent jamais une information seuls */
  --filet:#D9CDB8;
  --filet-inv:rgba(239,231,218,.2);

  /* échelle typographique : 7 pas, plus aucun clamp isolé.
     d1 sur t1 fait 5,8:1, au-dessus de la règle des 5:1. */
  --d1:clamp(56px,9vw,104px);  /* chiffre clé */
  --d2:clamp(34px,4.4vw,54px); /* titre d'impact */
  --d3:clamp(26px,3vw,38px);   /* titre de section */
  --d4:clamp(20px,2vw,26px);   /* mot-clé */
  --t1:18px;                   /* corps */
  --t2:15px;                   /* secondaire */
  --t3:12.5px;                 /* capitales */

  --ft:"Cabinet","Helvetica Neue",Arial,sans-serif;
  --fc:"Switzer","Helvetica Neue",Arial,sans-serif;
}

body{font-family:var(--fc);background:var(--creme);color:var(--txt);
  font-size:17px;line-height:1.6;overflow-x:hidden}
.wr{max-width:1280px;margin:0 auto;padding:0 44px}

header{background:var(--creme);padding:26px 0 22px}
header .brand{display:flex;justify-content:center}
header .brand img{height:76px;width:auto}
@media(max-width:900px){header .brand img{height:56px}}
@media(max-width:560px){header .brand img{height:44px}}

/* ── La scène : le produit à gauche, l'encart à droite ──────────
   L'image est cadrée sur son bord gauche : la feuille de kraft et les
   housses restent entières. L'encart se pose sur la partie vide de la
   photo, à droite. Le produit n'est jamais couvert. */
/* Le hero occupe l'écran entier sous l'en-tête : la section suivante
   ne doit pas dépasser en bas, elle ferait sortir de la page. */
.hero{background:var(--creme);padding:0;display:flex;flex-direction:column;
  min-height:var(--hero-min,calc(100svh - 124px))}
/* Le visuel occupe tout l'écran disponible sous l'en-tête. Cadré sur son
   bord gauche : c'est là que se trouvent la marque et l'estampille
   « recommandation sanitaire ». Si on ne les voit pas, l'image ne sert
   à rien. */
.hero-scene{position:relative;isolation:isolate;display:flex;flex:1;
  min-height:clamp(300px,30vw,470px)}
/* Cadrage : la feuille de kraft n'est plus qu'une amorce à gauche,
   ce sont les housses qui occupent le centre. */
.hero-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:38% center;z-index:-1}
/* L'encart est collé à droite de l'écran, pas au bord d'un conteneur
   centré. Le produit garde tout l'espace restant. */
/* L'encart respire des quatre côtés : il ne touche ni le haut, ni le
   bas, ni les bords. Il est posé dans l'image, pas collé dessus. */
.hero-grille{display:flex;justify-content:flex-end;align-items:center;width:100%;
  max-width:none;padding:clamp(26px,4vh,52px) clamp(24px,3vw,56px)}

/* L'encart : un bloc plein, sans ombre, sans arrondi, sans bordure. */
/* L'encart respire : il ne touche ni le bord de l'écran ni le produit. */
.encart{background:var(--creme);width:min(400px,40%);padding:clamp(28px,2.4vw,38px)}
/* Les trois tailles de l'encart sont la seule exception à l'échelle.
   Elles sont contraintes par la tenue en un écran, pas choisies : le
   hero doit se lire d'un seul coup d'œil, sans dérouler. Passer le
   titre au pas d2 fait sortir le prix et le bouton de l'écran. Section
   validée le 27/09, on n'y touche pas. */
.encart h1{font-family:var(--ft);font-weight:800;font-size:clamp(26px,2.3vw,33px);
  line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
/* La mise en exergue : un seul membre de phrase en orange, comme sur
   Minerya. C'est la seule couleur que porte un titre. */
.exergue{color:var(--orange);font:inherit;font-style:normal}
.encart-p{font-size:13.5px;line-height:1.55;color:var(--gris);margin-top:14px}
.encart-promo{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--orange-lisible);margin-top:18px;padding-top:16px;
  border-top:1px solid var(--filet)}
.encart-pg{font-family:var(--ft);font-weight:800;font-size:clamp(28px,2.3vw,34px);
  line-height:1;letter-spacing:-.02em;margin-top:8px}
.encart-ht{font-family:var(--fc);font-size:12.5px;font-weight:700;color:var(--gris);margin-left:6px}
.encart-pb{font-family:var(--fc);font-size:13px;font-weight:400;color:var(--gris);
  text-decoration:line-through;margin-left:4px}
.encart-ps{font-size:13px;color:var(--gris);margin-top:6px}
.cta{display:inline-block;background:var(--orange-txt);color:#fff;margin-top:16px;
  padding:13px 24px;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;line-height:1.2;transition:background .18s}
.cta:hover{background:var(--orange-lisible)}
.encart-rassure{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.encart-rassure li{display:flex;align-items:center;gap:9px;font-size:12px;
  line-height:1.35;color:var(--gris)}
.pic-s{width:15px;height:15px;flex:none;color:var(--orange);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ── Les trois atouts du produit, sous la scène ──────────────── */
.pic{width:30px;height:30px;flex:none;color:var(--orange);fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.atouts{background:var(--charbon);color:var(--txt-inv);
  padding:clamp(30px,3.6vh,46px) 0 clamp(52px,7vh,92px);flex:none}
.atouts-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,54px)}
.atout{display:flex;flex-direction:column}
.atout+.atout{border-left:1px solid var(--filet-inv);padding-left:clamp(24px,3vw,54px)}
.atout-n{font-family:var(--ft);font-weight:800;font-size:clamp(24px,2.5vw,36px);
  line-height:1;letter-spacing:-.025em;margin-top:10px;min-height:1.05em;
  display:flex;align-items:flex-end}
.atout-l{font-size:13px;line-height:1.45;color:var(--txt-inv-attenue);margin-top:4px}

@media(max-width:900px){
  .hero-scene{display:block;min-height:0}
  .hero-fond{position:relative;height:42vw;min-height:200px;z-index:0}
  .hero-grille{display:block}
  .encart{width:auto;margin-top:-34px;position:relative}
  .atouts-g{grid-template-columns:minmax(0,1fr);gap:0}
  .atout+.atout{border-left:0;padding-left:0;border-top:1px solid var(--filet);
    margin-top:22px;padding-top:22px}
}
@media(max-width:560px){
  .wr{padding:0 20px}
  .cta{width:100%;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════
   MORCEAU 2 — témoignages et description produit
   Le rythme repéré sur aesop.com : une section très vide, puis une
   section dense en écran partagé, l'image partant du bord.
   ═══════════════════════════════════════════════════════════════ */

.sur{font-size:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--gris);margin-bottom:0}

/* ── 2. TÉMOIGNAGES — la section vide du métronome ────────────── */
.temoins{background:var(--creme-clair);padding:clamp(70px,8vw,120px) 0 clamp(70px,8vw,120px);overflow:hidden}
.temoins::before,.temoins::after{display:none}
.temoins .sur{margin-bottom:clamp(38px,4vw,62px)}
.temoins .ticker{overflow:hidden;max-width:100vw}
.ticker-piste{display:flex;gap:0;width:max-content;animation:defile 110s linear infinite}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-piste{animation:none}}
.tk{width:clamp(320px,30vw,440px);flex:none;background:none;border:0;border-radius:0;
  box-shadow:none;padding:0 clamp(28px,3vw,52px);margin:0;position:relative}
.tk+.tk{border-left:1px solid var(--filet)}
.tk::before{content:"«";display:block;font-family:var(--ft);font-weight:800;
  font-size:40px;line-height:1;color:var(--orange);margin-bottom:16px}
/* L'ancienne feuille ajoutait déjà des guillemets autour de la citation :
   avec le grand guillemet de tête, on en avait deux. */
.tk blockquote{font-family:var(--ft);font-weight:700;font-size:var(--d4);
  line-height:1.28;letter-spacing:-.012em;color:var(--charbon);border:0;padding:0;margin:0;
  font-style:normal}
.tk blockquote::before,.tk blockquote::after{content:none}
.tk figcaption{margin-top:18px;font-size:12px;font-weight:700;font-style:normal;
  text-transform:uppercase;letter-spacing:.09em;color:var(--gris)}

/* ── 3. DESCRIPTION PRODUIT — l'écran partagé ─────────────────── */
.produit{background:var(--creme);padding:0}
/* La coupe se fait au milieu, exactement : une moitié image, une moitié
   texte. Et chaque moitié est occupée sur toute sa largeur, sinon on
   retombe sur des phrases de deux mots dans un espace vide. */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
/* Un filet sous l'image ferme la section : sans lui, le changement de
   fond en dessous ne se comprend pas. */
.split{border-bottom:1px solid var(--filet)}
.split--inverse{border-bottom:0}
.split--inverse .split-txt{padding-left:clamp(24px,4vw,80px);padding-right:0;margin-left:auto}
/* L'image part du bord gauche de l'écran, elle n'est pas rangée dans
   une colonne centrée : c'est ce qui donne l'échelle. */
.split-img{display:flex}
.split-img img{width:100%;height:100%;min-height:clamp(420px,42vw,640px);
  object-fit:cover;display:block}
.split-txt{padding:clamp(44px,5vw,80px) clamp(32px,4.4vw,76px);max-width:none;
  display:flex;flex-direction:column;justify-content:center}
.split--inverse .split-txt{padding-left:clamp(32px,4.4vw,76px);
  padding-right:clamp(32px,4.4vw,76px);margin-left:0}
.split-txt h2{max-width:19ch;font-family:var(--ft);font-weight:800;font-size:var(--d3);
  line-height:1.05;letter-spacing:-.025em;margin:18px 0 0}
.fort{font-size:var(--t2);font-weight:700;line-height:1.5;margin-top:26px;max-width:none}
.tech{font-size:13.5px;line-height:1.65;color:var(--gris);margin-top:18px}

/* Les quatre bénéfices : aucune boîte, l'espace sépare. */
.benefs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3.2vw,52px);margin-top:clamp(64px,7vw,104px)}
.benef .pic{width:58px;height:58px;stroke-width:1.25}
.benef h3{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.1;letter-spacing:-.022em;margin-top:24px}
.benef p{font-size:15px;line-height:1.55;color:var(--gris);margin-top:12px}
.resultat-bande{background:var(--charbon);margin-top:clamp(64px,7vw,104px);
  padding:clamp(56px,6.5vw,100px) 0}
.resultat{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.1;letter-spacing:-.025em;max-width:30ch;margin:0 auto;
  color:var(--txt-inv);text-align:center;text-wrap:balance}

@media(max-width:980px){
  .split{grid-template-columns:minmax(0,1fr);gap:0}
  .split-img img{height:52vw;min-height:240px}
  .split-txt{padding:clamp(36px,6vw,56px) 5% clamp(40px,6vw,64px);max-width:none}
  .benefs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .benefs{grid-template-columns:minmax(0,1fr);gap:34px}
  .tk{width:82vw;padding:0 22px}
}

/* ── Les données techniques ──────────────────────────────────────
   Une caractéristique ne se lit pas dans une phrase, elle se scanne.
   Chaque donnée garde son intitulé et sa valeur : rien n'est perdu,
   tout devient repérable en une seconde. */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,48px);margin-top:26px;border-top:1px solid var(--filet)}
.specs>div{padding:15px 0;border-bottom:1px solid var(--filet)}
.specs dt{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gris)}
.specs dd{font-family:var(--ft);font-weight:800;font-size:var(--t1);
  line-height:1.25;letter-spacing:-.012em;margin-top:6px}
/* Les qualités qui n'ont pas de valeur chiffrée : des mots-clés posés,
   pas cliquables, juste là pour être vus. */
.mentions-tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mentions-tech span{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--orange-lisible);border:1.5px solid var(--orange);
  padding:10px 17px;line-height:1}
@media(max-width:620px){.specs{grid-template-columns:minmax(0,1fr)}}

/* ── 4. VIDÉO PRODUIT ────────────────────────────────────────────
   Elle n'était ni à gauche ni à droite, calée au milieu sans raison.
   Elle prend la colonne de droite, le titre tient la gauche : c'est
   l'alternance, inversée par rapport à la section précédente. */
.video-sec{background:var(--creme-clair);padding:0}
.split-video{display:flex}
.split-video video{width:100%;height:100%;min-height:clamp(420px,42vw,640px);
  object-fit:cover;background:var(--charbon);display:block}
.video-p{font-size:16px;line-height:1.6;color:var(--gris);margin-top:20px;max-width:none}

/* ═══════════════════════════════════════════════════════════════
   LE RESTE DE LA PAGE
   Même système : coupe au milieu quand il y a deux moitiés, bandes
   charbon ou orange pour les moments d'impact, pictos à la place des
   puces, Cabinet aux titres, orange en exergue seulement.
   Référence de mise en page : farmminerals.com
   ═══════════════════════════════════════════════════════════════ */

section{padding:clamp(70px,8vw,120px) 0}
.wr h2,.split-txt h2{max-width:19ch;font-family:var(--ft);font-weight:800;
  font-size:var(--d3);line-height:1.05;letter-spacing:-.025em}
.wr>.kicker,.kicker{display:block;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gris);margin-bottom:20px}
.sec-intro{font-size:var(--t2);font-weight:700;line-height:1.5;
  max-width:60ch;margin:26px 0 clamp(44px,5vw,72px)}
.w{max-width:1280px;margin:0 auto;padding:0 44px}

/* ── PRESSE ─────────────────────────────────────────────────── */
.parutions{background:var(--creme)}
.pr-anim{display:none}
.pr-statique{max-width:1280px;margin:clamp(34px,4vw,56px) auto 0;padding:0 44px}
.pr-statique .pr-piste{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);
  align-items:flex-start;animation:none;transform:none;width:auto}
.pr-chip{display:flex;flex-direction:column;gap:5px;text-align:left;background:none;
  border:0;padding:0;filter:grayscale(1);opacity:.6;transition:opacity .18s}
.pr-chip:hover{opacity:1;filter:none}
.pr-m{font-family:var(--ft);font-weight:800;font-size:19px;letter-spacing:-.015em}
.pr-d{font-size:12.5px;color:var(--gris)}
.pr-aide{font-size:12.5px;color:var(--gris);margin-top:clamp(34px,4vw,56px)}

/* ── LES CARTES À PHOTO : 4 gains, profils, RSE ─────────────── */
.cartes{display:grid;gap:clamp(40px,4.4vw,72px) clamp(28px,3.2vw,52px)}
.cartes.g4,.cartes.g4b{grid-template-columns:repeat(2,minmax(0,1fr))}
.cartes.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc{display:flex;flex-direction:column;background:none!important;border:0;
  padding:0;min-height:0!important;border-radius:0;box-shadow:none;color:var(--charbon)}
.pc::before{display:none}
.pc-bg{order:-1;position:relative;inset:auto;aspect-ratio:3/2;overflow:hidden;z-index:0}
.cartes.g4b .pc-bg{aspect-ratio:3/2}
.pc-bg img{width:100%;height:100%;object-fit:cover}
.pc .ico{width:50px;height:50px;margin:26px 0 0}
.pc .ico svg{width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.pc h4,.pc-lab{display:block;font-family:var(--ft);font-weight:800;
  font-size:var(--d4);line-height:1.12;letter-spacing:-.022em;
  margin-top:18px;color:var(--charbon);text-transform:none}
.pc p,.pc-txt{font-size:15px!important;line-height:1.55;color:var(--gris)!important;margin-top:12px}
.pq-sub{font-size:11.5px!important;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--gris)!important;margin-top:8px!important}
.pc .sep{display:none}
.phrase-conclusion{font-family:var(--ft);font-weight:800;
  font-size:var(--d4);line-height:1.15;letter-spacing:-.022em;
  max-width:26ch;margin-top:clamp(48px,5vw,80px)}
.pourqui{background:var(--creme-clair)}
.pourqui .intro{font-size:16px;color:var(--gris);max-width:62ch;margin:0 0 clamp(44px,5vw,72px)}
.rse-sec{background:var(--creme-clair)}
.rse-titre{margin-bottom:clamp(44px,5vw,72px)}

/* ── VIDÉOS TÉMOIGNAGES ─────────────────────────────────────── */
.videos{background:var(--charbon);color:var(--txt-inv)}
.videos h2,.videos .kicker{color:var(--txt-inv)}
.videos .kicker{color:var(--txt-inv-attenue)}
.vgrid,.v-longs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,2.6vw,40px);margin-top:clamp(40px,4.4vw,64px)}
.vcard,.vlong{background:none}
.vcard video,.vlong video{width:100%;aspect-ratio:16/9;background:#000;display:block;border-radius:0}
.vtitre{font-size:13px;color:var(--txt-inv-attenue);margin-top:12px}

/* ── CTA INTERMÉDIAIRE ET CLÔTURE : bandes orange ───────────── */
.cta-bloc,.cloture-v3{background:var(--orange-txt);color:#fff;
  padding:clamp(80px,9vw,140px) 0;text-align:left}
.cb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(40px,5vw,90px);align-items:end;background:none;border-radius:0}
.cb-txt{background:none!important;color:#fff;padding:0}
.cb-sur{font-size:var(--t3);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:rgba(255,255,255,.72);margin-bottom:22px}
.cb-t{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.04;letter-spacing:-.028em;color:#fff}
.cb-t span,.cloture-v3 h2 span{color:#fff!important}
.cb-p{font-size:16px;color:rgba(255,255,255,.88);margin-top:22px;max-width:46ch}
.cb-achat{background:none!important;padding:0;text-align:left;box-shadow:none}
.cb-prix{display:flex;align-items:baseline;gap:10px}
.cb-pg{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1;letter-spacing:-.03em;color:#fff}
.cb-ht{font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}
.cb-u{font-size:15px;color:rgba(255,255,255,.88);margin:10px 0 28px}
.cb-r{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.7);margin-top:20px}
.cta-bloc .btn,.cloture-v3 .btn,.cb-achat .btn{display:inline-block;background:none;
  border:1.5px solid #fff;color:#fff;padding:16px 32px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;border-radius:0;box-shadow:none;width:auto}
.cta-bloc .btn:hover,.cloture-v3 .btn:hover,.cb-achat .btn:hover{background:#fff;color:var(--orange-lisible)}
.cloture-v3 h2{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.04;letter-spacing:-.028em;color:#fff}
.cl-lead{font-size:17px;color:rgba(255,255,255,.88);margin:22px 0 32px;max-width:52ch}
.cl-coords{font-size:13px;color:rgba(255,255,255,.8);margin-top:26px}
.cl-coords a{text-decoration:underline}

/* ── TECHNIQUE ──────────────────────────────────────────────── */
.tech-sec{background:var(--creme)}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,4.4vw,72px)}
.duo-tech{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.carte-gris{background:none;padding:0;border-radius:0}
.carte-gris img{width:100%;border-radius:0}
.tech-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(30px,3.4vw,52px);margin-top:clamp(34px,4vw,56px);border-top:0}
.tl{display:block;background:none;border:0;padding:0}
.tl-ico{width:42px;height:42px}
.tl-ico svg{width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
.tl h4{font-family:var(--ft);font-weight:800;font-size:19px;letter-spacing:-.015em;
  color:var(--charbon);margin:14px 0 8px}
.tl p{font-size:14.5px;line-height:1.55;color:var(--gris)}
.bande-tuiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;
  margin-top:clamp(48px,5vw,80px)}
.bande-tuiles img{aspect-ratio:1;object-fit:cover;border-radius:0}

/* ── CHIFFRES CLÉS : le moment Farm Minerals ────────────────── */
.chiffres{background:var(--charbon);color:var(--txt-inv)}
.chiffres h2{color:var(--txt-inv)}
.chiffres .kicker{color:var(--orange)!important}
.chiffres .trait{display:none}
.grid5{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3.2vw,52px);margin-top:clamp(48px,5vw,80px);text-align:left;justify-items:stretch}
.ch{display:flex;flex-direction:column}
.ch .ico{display:none}
.ch .n{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:.94;letter-spacing:-.035em;color:var(--txt-inv);white-space:nowrap;margin:0}
.ch:last-child .n{font-size:var(--d2)}
.ch .lib{font-family:var(--ft);font-weight:800;font-size:17px;letter-spacing:-.012em;
  text-transform:none;color:var(--txt-inv);margin-top:14px;line-height:1.2}
.ch .sep{display:none}
.ch .desc{font-size:13.5px;line-height:1.55;color:var(--txt-inv-attenue);margin-top:10px;max-width:30ch}
.ex{font-size:16px;color:var(--txt-inv-attenue);max-width:62ch;margin-top:clamp(44px,5vw,72px);
  text-align:left;font-style:normal}
.cta-centre{margin-top:clamp(34px,4vw,56px);text-align:left;background:none;padding:0}
.cta-centre .txt{font-size:16px;color:var(--txt-inv);max-width:52ch;margin-bottom:26px}
.cta-centre .txt span{color:var(--orange)!important}
.chiffres .btn{display:inline-block;background:var(--orange-txt);color:#fff;padding:16px 32px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  border-radius:0;box-shadow:none;border:0}

/* ── ACCORDÉONS : 5 situations et FAQ ───────────────────────── */
.cas-tete{background:var(--creme-clair);padding-bottom:0}
.cas-tete h2{margin-bottom:0}
.cas-corps{background:var(--creme-clair);padding-top:clamp(40px,4.4vw,64px)}
.accs{max-width:1100px}
.acc+.acc{margin-top:26px}
.acc summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;
  padding-bottom:4px}
.acc summary::-webkit-details-marker{display:none}
.acc-t{flex:1;font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.15;letter-spacing:-.018em}
.acc[open] .acc-t{color:var(--orange-lisible)}
.acc summary:hover .acc-t{color:var(--orange-lisible)}
.acc-x{width:12px;height:12px;flex:none;border-right:1.5px solid var(--orange);
  border-bottom:1.5px solid var(--orange);transform:rotate(45deg);
  transition:transform .2s;margin-bottom:6px}
.acc[open] .acc-x{transform:rotate(-135deg);margin:6px 0 0}
.acc-c{padding-top:22px;display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:start}
.acc-c img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:0}
.acc-c p{font-size:15px;line-height:1.6;color:var(--gris)}
.acc-c p+p{margin-top:14px}
.acc-faq .acc-c{display:block;max-width:76ch}

/* ── TARIFS, GARANTIE ───────────────────────────────────────── */
.tarifs-sec{background:var(--creme)}
.tar-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,4.4vw,72px);align-items:start;margin-top:clamp(40px,4.4vw,64px)}
.offre{background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.offre-t{font-family:var(--ft);font-weight:800;font-size:19px;margin:10px 0 16px}
.offre-p{display:flex;align-items:baseline;gap:12px}
.offre-p .pg{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1;letter-spacing:-.03em}
.offre-p .pb{font-size:15px;color:var(--gris);text-decoration:line-through}
.offre-u{font-size:15px;color:var(--gris);margin:10px 0 32px}
.offre-l{display:grid;gap:14px;margin-bottom:34px;border:0}
.offre-l p{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--gris)}
.offre .btn,.abo-btn,.ga-txt .btn,.faq-cta .btn,.ct-card .btn,.ct-form .btn,.final .btn{
  display:inline-block;background:var(--orange-txt);color:#fff;padding:16px 32px;font-size:13px;
  font-weight:700;text-transform:uppercase;letter-spacing:.09em;border-radius:0;
  box-shadow:none;border:0;width:auto;text-align:center}
.abo{background:var(--charbon);color:var(--txt-inv);padding:clamp(28px,3vw,40px);margin-top:28px;border-radius:0}
.abo-tag{display:inline-block;background:none;color:var(--txt-inv-attenue);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;padding:0}
.abo-t{font-family:var(--ft);font-weight:800;font-size:23px;margin:14px 0 12px;color:var(--txt-inv)}
.abo-t strong,.abo .or{color:var(--orange)!important}
.abo-p{font-size:14.5px;color:var(--txt-inv-attenue);margin-bottom:26px}
.abo-btn{background:none!important;border:1.5px solid var(--txt-inv)!important;color:var(--txt-inv)!important}
.abo-btn:hover{background:var(--txt-inv)!important;color:var(--charbon)!important}
.garantie{background:var(--creme)}
.ga{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,3vw,48px);
  align-items:start;background:none;border:0;padding:0}
.ga-ico{width:58px;height:58px;background:none!important;border-radius:0!important;padding:0!important}
.ga-ico svg{width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.ga-txt h2 span{color:var(--orange)!important}
.ga-txt p{font-size:16px;line-height:1.6;color:var(--gris);margin-top:20px;max-width:64ch}
.ga-cond{font-size:14px!important}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{background:var(--creme-clair)}
.faq-cta{margin-top:clamp(48px,5vw,80px);background:none;padding:0;text-align:left}
.faq-cta .txt{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.2;margin-bottom:26px}

/* ── PREUVES, CONTACT, CONFIANCE, PIED ──────────────────────── */
.preuves{background:var(--creme)}
.pr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(40px,4.4vw,72px);align-items:center}
.pr-bloc{background:none;border:0;padding:0}
.pr-fsc{height:42px;width:auto}
.pr-fsc-txt{font-size:14px;color:var(--gris);margin-top:14px;max-width:36ch}
.pr-bloc h4{font-family:var(--ft);font-weight:800;font-size:21px;margin-bottom:10px}
.pr-bloc p{font-size:14px;color:var(--gris)}
.pr-logos{display:flex;gap:36px;align-items:center;margin-top:20px}
.pr-logos img{height:38px;width:auto;filter:grayscale(1);opacity:.6}
.pr-logos a:hover img{filter:none;opacity:1}
.contact{background:var(--creme-clair)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(40px,4.4vw,72px);margin-top:clamp(40px,4.4vw,64px);align-items:start}
.ct-form{display:grid;gap:20px}
.ct-l2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ct-form label{display:block;font-size:var(--t3);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--gris)}
.ct-form input,.ct-form textarea{margin-top:8px;padding:13px 15px;background:var(--creme);
  border:1px solid var(--filet);border-radius:0;font-size:15px;color:var(--charbon);font-family:var(--fc)}
.ct-form input:focus,.ct-form textarea:focus{outline:2px solid var(--orange);outline-offset:0}
.ct-form .btn{justify-self:start}
.ct-note{font-size:12.5px;color:var(--gris);text-transform:none;letter-spacing:0}
.ct-check{display:flex;align-items:center;gap:12px}
.ct-check input{width:80px;margin-top:0}
.ct-piege{position:absolute;left:-9999px}
.ct-side{display:grid;gap:26px}
.ct-card{background:var(--creme);border:1px solid var(--filet);border-radius:0;padding:26px}
.ct-card h4{font-family:var(--ft);font-weight:800;font-size:19px}
.ct-card p{font-size:14px;color:var(--gris);margin-top:8px}
.ct-tel{font-family:var(--ft)!important;font-weight:800;font-size:26px!important;
  color:var(--charbon)!important;letter-spacing:-.02em}
.confiance{background:var(--creme);padding:clamp(44px,5vw,72px) 0}
.confiance .in{max-width:1280px;margin:0 auto;padding:0 44px;display:flex;
  align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.confiance span{font-size:var(--t3);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--gris)}
.confiance .logos{display:flex;gap:36px;align-items:center}
.confiance .logos img{height:34px;width:auto;filter:grayscale(1);opacity:.6}
.final{background:var(--charbon);color:var(--txt-inv);padding:clamp(70px,8vw,110px) 0 40px;text-align:left}
.final .t1{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.08;letter-spacing:-.025em;color:var(--txt-inv);margin-bottom:20px}
.final .t2{font-size:16px;color:var(--txt-inv-attenue);margin:0 0 30px;max-width:54ch;font-weight:400}
.final .btn{background:var(--orange-txt)!important;border:0!important;color:#fff!important}
.final .btn-note{font-family:var(--ft);font-weight:800;font-size:24px;color:var(--txt-inv);
  margin:22px 0 0;text-align:left!important;max-width:none}
.final .foot{margin-top:clamp(64px,7vw,104px);opacity:1;
  border-top:1px solid var(--filet-inv);padding-top:26px}
.final .legal{font-size:12.5px;color:var(--txt-inv-attenue);line-height:2}
.final .legal a{text-decoration:underline}
.haut{background:var(--orange-txt);border:0;border-radius:0}
.haut:hover{background:var(--charbon)}
.sticky{background:var(--charbon);border:0;box-shadow:none}
.sticky-p strong{color:var(--txt-inv);font-family:var(--ft);font-weight:800}
.sticky-p span{color:var(--txt-inv-attenue)}
.sticky .btn{background:var(--orange-txt);color:#fff;border-radius:0;padding:13px 22px;
  font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.reveal{opacity:1!important;transform:none!important;transition:none!important}

@media(max-width:1000px){
  .split,.split--inverse,.cb,.tar-duo,.ct-grid,.pr-grid,.duo-tech,
  .cartes.g4,.cartes.g4b{grid-template-columns:minmax(0,1fr)}
  .cartes.g3,.grid5,.tech-liste,.vgrid,.v-longs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bande-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .acc-c{grid-template-columns:minmax(0,1fr)}
  .split-img img,.split-video video{min-height:56vw}
}
@media(max-width:640px){
  .w,.confiance .in,.pr-statique{padding:0 20px}
  .cartes.g3,.grid5,.tech-liste,.vgrid,.v-longs,.ct-l2{grid-template-columns:minmax(0,1fr)}
  .bande-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ga{grid-template-columns:minmax(0,1fr)}
}

/* Restes de l'ancienne feuille : l'italique des sous-titres de profil
   et la couleur d'accent sur un texte courant. */
.pq-sub{font-style:normal!important}
.faq-cta .txt,.cta-centre .txt{color:var(--charbon)}
.chiffres .cta-centre .txt{color:var(--txt-inv)}
.intro,.pourqui .intro{font-weight:400;font-style:normal}

/* Le chapeau repasse en romain : tout en gras, plus rien ne ressort.
   Le gras est réservé aux titres et aux données. */
.fort{font-weight:400!important;font-size:var(--t2);line-height:1.6;
  color:var(--gris);max-width:44ch}
.split-txt h2{max-width:19ch}
.video-p{max-width:40ch}
.sec-intro{font-weight:400;color:var(--gris)}
.phrase-conclusion,.faq-cta .txt{font-weight:800}

/* ── PRESSE : une parution se montre ─────────────────────────── */
.presse-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);margin-top:clamp(40px,4.4vw,64px)}
.parution{display:flex;flex-direction:column;text-align:left;background:none;
  border:0;padding:0;cursor:pointer}
.parution-vue{display:block;aspect-ratio:3/4;overflow:hidden;background:#fff}
.parution-vue img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
  opacity:.82;transition:filter .2s,opacity .2s,transform .3s}
.parution:hover .parution-vue img{filter:none;opacity:1;transform:scale(1.02)}
.parution-m{font-family:var(--ft);font-weight:800;font-size:17px;
  letter-spacing:-.015em;margin-top:16px}
.parution-d{font-size:12.5px;color:var(--gris);margin-top:4px}
.parutions .pr-aide{margin-top:clamp(28px,3vw,44px)}

/* ── LES CARTES S'ALIGNENT ───────────────────────────────────
   Un titre sur deux lignes décalait tout ce qui le suivait. Chaque
   bloc reçoit sa hauteur de rang : les pictos, les titres et les
   textes se répondent d'une carte à l'autre. */
.pc .ico{width:54px;height:54px;margin:24px 0 0}
.pc h4,.pc-lab{min-height:2.3em;display:flex;align-items:flex-start}
.pc.rse h4{min-height:3.5em}
.pq-sub{min-height:2.6em}

/* ── LA PHRASE DE CONCLUSION ─────────────────────────────────── */
.phrase-conclusion{text-align:left;max-width:30ch;
  padding-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--filet);
  margin-top:clamp(48px,5vw,80px)}

/* ── VIDÉOS TÉMOIGNAGES : six vignettes, pas six écrans ──────── */
.vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.v-longs{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,40px);
  margin-top:clamp(48px,5vw,80px);padding-top:clamp(40px,4.4vw,64px);
  border-top:1px solid var(--filet-inv)}
.vcard .vtitre{font-family:var(--ft);font-weight:800;font-size:14px;color:var(--txt-inv);
  letter-spacing:-.01em;margin-top:12px}
.vlong .vtitre{font-family:var(--ft);font-weight:800;font-size:17px;color:var(--txt-inv);margin-top:14px}

/* ── CTA INTERMÉDIAIRE : le carton occupe sa moitié ──────────── */
.split--cta{border-bottom:0;background:var(--orange-txt)}
.split--cta .split-txt{padding:clamp(56px,6vw,96px) clamp(32px,4.4vw,76px)}
.split--cta .split-img img{min-height:clamp(380px,38vw,560px);object-fit:cover}
.cb-ex{color:rgba(255,255,255,.72)}
.split--cta .cb-prix{margin-top:clamp(28px,3vw,44px)}
.cta-bloc{padding:0}

/* ── RSE : le picto respire, le texte redevient un texte ─────── */
.pc.rse{padding:0}
.pc.rse .ico{margin-top:26px}
.pc.rse h4{font-size:var(--d4);margin-top:16px}
.pc.rse p{font-size:14.5px!important;margin-top:12px}

@media(max-width:1000px){
  .presse-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--cta{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .presse-g,.vgrid{grid-template-columns:minmax(0,1fr)}
  .pc h4,.pc-lab,.pq-sub,.pc.rse h4{min-height:0}
}

/* L'ancienne feuille justifiait ces paragraphes : c'est ce qui créait
   les mots espacés au hasard. */
.phrase-conclusion,.pourqui .intro,.tslide p{text-align:left!important}

/* ── TÉMOIGNAGES : de la chaleur, pas une liste de citations ────
   Épuré ne veut pas dire froid. Un témoignage de boulanger doit
   avoir la matière du métier : le kraft en fond, la citation en
   grand, le nom de la maison mis en avant comme une signature. */
.temoins{position:relative;background:var(--creme-clair);isolation:isolate}
.temoins::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(fond-kraft-clair.jpg) center/cover;opacity:.5;display:block}
.temoins::after{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(242,234,220,.72);display:block}
.temoins .sur{color:var(--charbon)}
.tk{background:var(--creme-clair);padding:clamp(28px,3vw,40px);
  width:clamp(330px,31vw,460px);margin-right:clamp(18px,2vw,28px);
  display:flex;flex-direction:column;min-height:270px}
.tk+.tk{border-left:0}
.tk::before{content:"«";font-family:Georgia,serif;font-weight:700;font-size:64px;
  line-height:.8;color:var(--orange);margin-bottom:18px;display:block}
.tk blockquote{font-family:var(--ft);font-weight:800;
  font-size:var(--d4);line-height:1.24;letter-spacing:-.018em;
  color:var(--charbon);font-style:normal;border:0;padding:0;margin:0}
.tk figcaption{margin-top:auto;padding-top:22px;font-size:13px;font-weight:700;
  font-style:normal;text-transform:none;letter-spacing:0;color:var(--charbon)}
.tk figcaption::before{content:"";display:block;width:34px;height:2px;
  background:var(--orange);margin-bottom:12px}

/* ── RÉGLAGES DE MESURE ──────────────────────────────────────────
   Le nombre de lignes n'est pas un hasard : il se règle par la
   largeur de la colonne de texte. */
.split-txt h2{max-width:22ch}
.fort{font-size:15.5px;max-width:52ch}
.video-p{max-width:52ch}
.produit .split-txt,.video-sec .split-txt{padding-top:clamp(36px,4vw,60px);
  padding-bottom:clamp(36px,4vw,60px)}
.split-img img,.split-video video{min-height:clamp(380px,36vw,500px)}

/* ── PRESSE : compacte ──────────────────────────────────────────
   Une page de magazine entière en vignette ne se lit pas. On montre
   le haut de la page, format paysage, et la section se tasse. */
.parutions{padding:clamp(56px,6vw,88px) 0}
.presse-g{gap:clamp(18px,2vw,30px);margin-top:clamp(32px,3.4vw,48px)}
.parution-vue{aspect-ratio:4/3;background:var(--creme-clair)}
.parution-vue img{object-position:top center;filter:grayscale(1) contrast(1.06);opacity:.9}
.parution-m{font-size:15px;margin-top:12px}
.parution-d{font-size:11.5px}
.parutions .pr-aide{margin-top:clamp(20px,2.2vw,32px);font-size:12px}

/* ── UNE SEULE BANDE ORANGE SUR LA PAGE ─────────────────────────
   Deux relances en orange, et l'accent ne veut plus rien dire. La
   clôture passe en charbon : l'orange reste au seul CTA du milieu. */
.cloture-v3{background:var(--charbon)}
.cloture-v3 h2,.cloture-v3 h2 span{color:var(--txt-inv)!important}
.cl-lead{color:var(--txt-inv-attenue)}
.cloture-v3 .btn{background:var(--orange-txt);border:0;color:#fff}
.cloture-v3 .btn:hover{background:var(--orange-lisible);color:#fff}
.cl-coords{color:var(--txt-inv-attenue)}

/* ── TECHNIQUE : la photo produit, pas un schéma ────────────────*/
.duo-tech{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4vw,64px)}
.duo-tech .carte-gris img{width:100%;aspect-ratio:1;object-fit:cover}
.bande-tuiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  margin-top:clamp(36px,4vw,60px);max-width:900px}

/* ═══════════════════════════════════════════════════════════════
   LA MISE EN PAGE DES RÉFÉRENCES, APPLIQUÉE
   La typo validée ne bouge pas. Ce qui change, c'est la structure.

   Trois principes relevés chez eux :
   1. UNE IDÉE PAR ÉCRAN. Une section ne dit qu'une chose.
   2. DEUX TAILLES, PAS QUATRE. Un grand, un petit, rien entre les
      deux. C'est le rapport d'échelle qui crée la hiérarchie, pas
      l'empilement de niveaux intermédiaires.
   3. L'IMAGE ET L'APLAT SONT DEUX MATÉRIAUX ÉGAUX, en demi-écrans
      pleins bord à bord. L'aplat n'est pas un fond, c'est une forme.
   ═══════════════════════════════════════════════════════════════ */

/* ── Presse : demi-écran, et la liste à filets de Farm Minerals ─*/
.parutions{padding:0;background:var(--creme)}
.split--presse{border-bottom:0}
.split--presse .split-img img{object-position:top center}
.liste{margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--filet);width:100%}
.ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;
  width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--filet);
  background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;
  transition:padding-left .2s}
.ligne:hover{padding-left:8px}
.ligne-t{font-family:var(--ft);font-weight:800;font-size:19px;letter-spacing:-.015em}
.ligne:hover .ligne-t{color:var(--orange-lisible)}
.ligne-d{font-size:12.5px;color:var(--gris);text-align:right}
.parutions .pr-aide{margin-top:22px;font-size:12.5px;color:var(--gris)}

/* ── Chiffres clés : la même liste, le chiffre à gauche ─────────
   Quatre colonnes serrées obligeaient à rapetisser le chiffre. En
   liste, il retrouve sa taille et la légende reste minuscule. */
.grid5{display:block;margin-top:clamp(36px,4vw,60px);max-width:1000px}
/* La première colonne se règle sur le chiffre, pas sur une fraction :
   au pas d1, « 120-180 L » demande 300 px et une colonne en .34fr
   n'en donnait que 215. Le chiffre passait sous sa propre légende. */
.ch{display:grid;grid-template-columns:minmax(max-content,.4fr) minmax(0,.24fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:baseline;padding:26px 0;
  border-bottom:1px solid var(--filet-inv)}
.ch:first-child{border-top:1px solid var(--filet-inv)}
.ch .ico,.ch .sep{display:none}
.ch .n{font-size:var(--d1);line-height:.92;white-space:nowrap;margin:0}
.ch:last-child .n{font-size:var(--d2)}
.ch .lib{margin-top:0;font-size:16px}
.ch .desc{margin-top:0;max-width:46ch}

/* ── Une idée par écran : on retire les redites visuelles ───────
   La bande de six tuiles répétait ce que la section dit déjà, et
   ajoutait un troisième niveau de lecture. */
.bande-tuiles{display:none}

/* ── Deux tailles, pas quatre ───────────────────────────────────
   Les niveaux intermédiaires sont ramenés au petit corps. Seuls
   les titres de section et les chiffres restent grands. */
.sec-intro,.pourqui .intro,.ex,.cta-centre .txt,.cb-p,.ga-txt p,.cl-lead,
.final .t2,.abo-p,.offre-u,.pr-fsc-txt,.pr-bloc p{font-size:15px;font-weight:400}
.benef p,.pc p,.pc-txt,.tl p,.ch .desc,.parution-d,.ligne-d,.vtitre,
.encart-rassure li,.offre-l p,.acc-c p,.ct-card p{font-size:14px}

/* ── Les parutions : des lignes de liste, pas des boutons ───────
   Le décalage au survol et le texte collé aux bords faisaient un
   effet de bouton sans en être un. Une ligne de liste se signale
   par son filet et par sa couleur, pas par un déplacement. */
.ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2vw,32px);
  align-items:baseline;width:100%;text-align:left;padding:18px 2px;
  border:0;border-bottom:1px solid var(--filet);background:none;cursor:pointer;
  transition:color .18s}
.ligne:hover{padding-left:2px}
.ligne:hover .ligne-t,.ligne:hover .ligne-d{color:var(--orange-lisible)}
.ligne-d{transition:color .18s}

/* ── Les huit vidéos sont de même rang ──────────────────────────
   Six petites et deux grandes, c'était l'ancien site. Rien ne le
   justifiait : ce sont huit témoignages. */
.videos .vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2vw,30px);margin-top:clamp(40px,4.4vw,64px)}
.videos .v-longs{display:none}
.videos .vcard video{border-radius:0}

/* ── Le CTA orange : le contenu reprend la main ─────────────────
   Une image de carton n'a pas à occuper la moitié de l'écran pour
   annoncer un prix. Elle passe en vignette, à côté du prix. */
.cta-bloc{background:var(--orange-txt);color:#fff;padding:clamp(64px,7vw,110px) 0}
.cta-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(40px,5vw,88px);align-items:center}
.cta-dire .cb-t{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.06;letter-spacing:-.025em;color:#fff;max-width:18ch}
.cta-dire .cb-ex{color:rgba(255,255,255,.72)}
.cta-dire .cb-sur{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);margin-bottom:18px}
.cta-dire .cb-p{font-size:15px;color:rgba(255,255,255,.88);margin-top:20px;max-width:46ch}
.cta-cles{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;padding:0}
.cta-cles li{display:flex;align-items:center;gap:9px;font-size:13px;color:#fff}
.cta-cles .pic-s{color:#fff}
.cta-achat{text-align:left}
.cta-achat img{width:100%;max-width:280px;margin-bottom:26px}
.cta-prix{display:flex;align-items:baseline;gap:8px}
.cta-prix .cb-pg{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1;letter-spacing:-.03em;color:#fff}
.cta-prix .cb-ht{font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}
.cta-achat .cb-u{font-size:14px;color:rgba(255,255,255,.88);margin:8px 0 22px}
.cta-achat .btn{display:inline-block;background:#fff;border:0;color:var(--orange-lisible);
  padding:15px 28px;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;width:auto}
.cta-achat .btn:hover{background:var(--charbon);color:#fff}
.cta-achat .cb-r{font-size:13px;color:rgba(255,255,255,.7);margin-top:16px}
@media(max-width:1000px){
  .cta-in{grid-template-columns:minmax(0,1fr)}
  .videos .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── L'orange ne colore plus des phrases entières ───────────────
   « Que vous teniez une boutique… » était orange aux deux tiers.
   La couleur ne porte pas la hiérarchie : elle souligne un membre
   de phrase, une fois. Seule la classe .exergue colore désormais. */
.or,.or-f,.surlign{color:inherit!important;background:none;font-weight:inherit}
.exergue{color:var(--orange)!important}

/* ── Au quotidien : quatre gains de même rang ───────────────────
   Les titres d'une ligne se répondent, les textes commencent à la
   même hauteur. Une carte n'est pas une boîte : c'est une colonne. */
.cartes.g4{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3vw,44px);align-items:start}
.cartes.g4 .pc{display:grid;grid-template-rows:auto auto auto 1fr;gap:0}
.cartes.g4 .pc-bg{aspect-ratio:4/3}
.cartes.g4 .ico{margin-top:22px}
.cartes.g4 .pc-lab,.cartes.g4 h4{margin-top:14px;min-height:2.5em;display:block}
.cartes.g4 .pc-txt,.cartes.g4 p{margin-top:10px}
.phrase-conclusion{border-top:1px solid var(--filet);padding-top:clamp(32px,3.4vw,52px);
  margin-top:clamp(48px,5vw,80px);max-width:32ch}

/* ── Chiffres clés : la liste est calée, elle ne flotte plus ────*/
.chiffres .w>.kicker,.chiffres .w>h2{max-width:1000px}
.grid5{margin-left:0}
.chiffres .ex,.chiffres .cta-centre{max-width:1000px}

/* ── Cas d'usage : une structure lisible, pas des lignes vides ──
   Un numéro, un titre, une flèche. L'œil sait où il en est et ce
   qu'il peut ouvrir. */
.accs{counter-reset:cas}
.acc summary{padding:22px 0;gap:20px}
.acc .acc-t{display:flex;align-items:baseline;gap:16px}
.acc:not(.acc-faq) .acc-t::before{counter-increment:cas;content:counter(cas,decimal-leading-zero);
  font-family:var(--fc);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--gris);flex:none}
.acc[open]:not(.acc-faq) .acc-t::before{color:var(--orange-lisible)}
.acc-c{padding:4px 0 32px;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,3vw,44px)}
.acc:not(.acc-faq) .acc-c{padding-left:36px}
.acc-c img{aspect-ratio:3/2;object-fit:cover;width:100%}
.acc-c>div{max-width:60ch}

/* ── La parution se présente comme un document, pas comme une photo
   La page de Capital est un portrait 900 × 1382 : en la faisant
   remplir une demi-page en paysage, on la recadrait n'importe
   comment. Elle est désormais posée entière sur un fond teinté,
   avec de l'air, comme un document qu'on montre. */
.split--presse .split-img{background:var(--creme-clair);align-items:center;
  justify-content:center;padding:clamp(36px,4.4vw,72px)}
.split--presse .split-img img{width:auto;max-width:100%;height:auto;
  max-height:clamp(340px,40vw,560px);min-height:0;object-fit:contain}

/* ── Technique : les six caractéristiques deviennent un tableau ─
   Six blocs qui flottent dans une grille ne se lisent pas. Des
   filets, et chaque caractéristique tient sa ligne. */
.tech-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,3.4vw,52px);margin-top:clamp(30px,3.4vw,48px);
  border-top:1px solid var(--filet)}
.tl{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;
  align-items:start;padding:20px 0;border-bottom:1px solid var(--filet)}
.tl-ico{width:26px;height:26px;margin-top:2px}
.tl h4{margin:0 0 6px;font-size:17px}
.tl p{font-size:14px;line-height:1.55;color:var(--gris)}

/* ── Pour qui : quatre profils qui se répondent ─────────────────*/
.cartes.g4b{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,2.8vw,40px);align-items:start}
.cartes.g4b .pc{display:grid;grid-template-rows:auto auto auto auto 1fr}
.cartes.g4b .pc-bg{aspect-ratio:3/4}
.cartes.g4b h4{margin-top:18px;min-height:0}
.cartes.g4b .pq-sub{margin-top:6px!important;min-height:2.6em}
.cartes.g4b p{margin-top:10px}

/* ═══════════════════════════════════════════════════════════════
   LE TITRE EST UNE RÈGLE GLOBALE, PAS UNE RÈGLE DE CONTENEUR
   Ma règle ne visait que .wr. Quinze sections utilisent .w et
   retombaient sur l'ancienne feuille : titres en Switzer au lieu de
   Cabinet, graisse 700 au lieu de 800. C'est ce qui se voyait en bas
   de page. Une règle de typographie se pose sur la balise.
   ═══════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,.titre-1,.titre-2,.titre-3{font-family:var(--ft)!important;font-weight:800}
h2{font-size:var(--d3);line-height:1.05;letter-spacing:-.025em}
h3{font-size:var(--d4);line-height:1.15;letter-spacing:-.018em}
h4{font-size:var(--t1);line-height:1.2;letter-spacing:-.015em}
.tk blockquote{font-family:var(--ft)}

/* ═══════════════════════════════════════════════════════════════
   LES SECTIONS SE DISTINGUENT LES UNES DES AUTRES
   Pour qui, Cas d'usage et Engagement humain se suivaient sur le
   même fond, avec le même espacement : tout se lisait en vrac. Le
   fond alterne, et chaque section garde la même respiration.
   ═══════════════════════════════════════════════════════════════ */
section{padding:clamp(70px,7.6vw,118px) 0}
.pourqui{background:var(--creme-clair)}
.cas-tete{background:var(--creme);padding-bottom:0}
.cas-corps{background:var(--creme);padding-top:clamp(36px,4vw,56px)}
.rse-sec{background:var(--creme-clair)}
.tarifs-sec{background:var(--creme)}
.garantie{background:var(--creme-clair);padding-top:clamp(70px,7.6vw,118px)}
.faq{background:var(--creme)}
.preuves{background:var(--creme-clair)}
.contact{background:var(--creme)}

/* La tête de section prend toujours la même forme : sur-titre,
   titre, chapeau, puis 64 px avant le premier élément. */
.w>.kicker{display:block;font-size:var(--t3);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:18px}
.w>h2{max-width:24ch;margin-bottom:clamp(40px,4.4vw,64px)}
.w>.kicker+h2{margin-bottom:clamp(40px,4.4vw,64px)}
.w>h2+.sec-intro,.w>h2+.intro{margin-top:calc(-1 * clamp(28px,3vw,44px))}
.rse-titre h2{margin-bottom:0}
.rse-titre{margin-bottom:clamp(40px,4.4vw,64px)}

/* ═══════════════════════════════════════════════════════════════
   TÉMOIGNAGES — le traitement relevé sur pitch.com
   Une citation à la fois, portrait à gauche en 3/4, la parole à
   droite. Le ticker faisait défiler huit cartes : on lisait le
   mouvement, pas les phrases. Ici une seule chose se passe à
   l'écran, et la citation a la taille d'un titre.

   La place du portrait attend les vraies photos des quatre maisons
   citées. En attendant, chaque citation porte l'image de ce dont
   elle parle : aucune de ces images ne prétend montrer la personne
   qui parle. Un visage d'agence à côté d'une boulangerie nommée
   serait une attribution inventée.
   ═══════════════════════════════════════════════════════════════ */
.temoins{background:var(--creme-clair);position:relative;isolation:isolate}
.temoins::before,.temoins::after{display:none}
.tm-scene{margin-top:clamp(32px,3.6vw,52px)}
.tm{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,.52fr);
  gap:clamp(32px,5vw,88px);align-items:center;margin:0}
.tm[hidden]{display:none}
.tm-vue{aspect-ratio:3/4;overflow:hidden;background:var(--creme)}
.tm-vue img{width:100%;height:100%;object-fit:cover;display:block}
.tm-dit{display:flex;flex-direction:column;align-items:flex-start}
.tm-g{width:clamp(44px,4vw,60px);height:clamp(44px,4vw,60px);color:var(--orange);fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linejoin:round;margin-bottom:clamp(20px,2.4vw,34px)}
/* La citation est au pas d2 : c'est la parole du boulanger qui porte
   la section, pas le sur-titre. */
.tm blockquote{font-family:var(--ft);font-weight:800;font-size:var(--d2);
  line-height:1.08;letter-spacing:-.025em;color:var(--txt);
  margin:0;padding:0;border:0;font-style:normal;max-width:17ch;text-wrap:balance}
.tm blockquote::before,.tm blockquote::after{content:none}
.tm figcaption{margin-top:clamp(24px,2.8vw,40px);padding-top:18px;
  border-top:1px solid var(--filet);font-size:var(--t2);font-weight:700;
  font-style:normal;color:var(--txt);letter-spacing:0;text-transform:none}
.tm-nav{display:flex;align-items:center;gap:14px;margin-top:clamp(32px,3.6vw,52px)}
.tm-b{width:48px;height:48px;display:grid;place-items:center;background:none;
  border:1px solid var(--filet);border-radius:0;cursor:pointer;color:var(--txt);
  transition:background .18s,color .18s,border-color .18s}
.tm-b:hover{background:var(--charbon);border-color:var(--charbon);color:var(--txt-inv)}
.tm-b:focus-visible{outline:2px solid var(--orange-lisible);outline-offset:2px}
.tm-b svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.tm-b[data-pas="-1"] svg{transform:scaleX(-1)}
.tm-rang{margin-left:8px;font-size:var(--t3);font-weight:700;letter-spacing:.14em;
  color:var(--gris);font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .tm{grid-template-columns:minmax(0,1fr);gap:28px}
  .tm-vue{aspect-ratio:4/3}
  .tm blockquote{max-width:none}
}

/* Chiffres clés en mobile : trois colonnes ne tiennent pas dans 390 px
   au pas d1. Le chiffre prend sa ligne, la légende et la description
   se rangent dessous. L'ordre de lecture ne change pas. */
@media(max-width:720px){
  .ch{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .ch .lib{margin-top:6px}
  .ch .desc{max-width:none}
}

/* ═══════════════════════════════════════════════════════════════
   LA DIRECTION PHOTO, ET LES BLOCS EN ATTENTE

   Une seule famille d'images sur toute la page : lumière naturelle
   de fournil, tons chauds, le kraft et la croûte dans le cadre. Le
   produit se montre en situation, dans une manne, dans un véhicule,
   sur un étal. Jamais de fond gris de studio, jamais de texte
   incrusté dans une image : ce qui doit se lire est de la
   typographie, c'est la règle de la page.

   Trois familles sont sorties aujourd'hui : les six tuiles grises à
   texte incrusté, le comptoir où tout le monde porte un masque, et
   les deux utilitaires blancs génériques sans pain ni housse.

   Un bloc en attente n'est pas un trou. Il porte la prise de vue à
   faire, il occupe exactement la place de l'image, et il se voit :
   personne ne met une page en ligne avec ces blocs dedans.
   ═══════════════════════════════════════════════════════════════ */
.attente{width:100%;height:100%;min-height:inherit;background:var(--surface-attente,#DCD4C6);
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  padding:clamp(18px,2vw,28px);position:relative;isolation:isolate}
.attente::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,rgba(36,28,20,.055) 11px 22px)}
.attente-tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-lisible)}
.attente-txt{font-family:var(--ft);font-weight:700;font-size:15px;line-height:1.25;
  letter-spacing:-.01em;color:var(--charbon);max-width:26ch}
.attente-cadre{font-size:12px;line-height:1.4;color:var(--gris);max-width:30ch}
/* Dans les conteneurs qui imposent déjà un rapport, le bloc le suit. */
.tm-vue .attente{position:absolute;inset:0}
.tm-vue{position:relative}
.pc-bg .attente,.acc-c .attente{position:absolute;inset:0}
.pc-bg,.acc-c>.attente-hote{position:relative}
.attente-hote{position:relative;display:block}
.cartes .attente-hote{aspect-ratio:3/4}
.cartes.g4 .attente-hote{aspect-ratio:4/3}
.acc-c .attente-hote{aspect-ratio:3/2}

/* ── Le dernier arrondi tombe ────────────────────────────────────
   Quatre éléments passaient encore à travers les surcharges, tous
   hérités de la feuille inline de l'ancien site : la pastille
   d'offre, l'étiquette d'abonnement, les lignes de parution et
   l'encadré de garantie. La règle est zéro coin arrondi. */
.ligne.parution,.promo,.abo-tag,.ga,.carte-gris,.carte-gris img,
.bloc-video,.video-wrap,.bloc-blanc,.c3,.cas img,.bande-tuiles img{border-radius:0}
/* La pastille d'offre redevient une mention en capitales, posée sur
   le crème : un aplat orange arrondi autour de trois mots, c'est un
   badge, et un badge ne dit rien de plus que les mots. */
.promo{background:none;color:var(--orange-lisible);padding:0;
  font-size:var(--t3);font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ── Les packshots rejoignent le crème ───────────────────────────
   Six photos produit sont sur un fond de studio blanc ou gris clair.
   Elles montrent le vrai produit, on ne les remplace pas, mais leur
   fond froid coupait la page en deux à chaque apparition.

   Le fond du studio est un aplat quasi uniforme : en multipliant
   l'image sur le crème, cet aplat prend la couleur du fond de page
   et le produit garde ses valeurs. Aucun détourage, aucun retouche,
   la photo reste la photo.

   C'est une mesure d'attente. La bonne réponse est une série de
   prises de vue sur fond kraft, elle est dans la liste des photos
   à faire. */
.tm-vue,.carte-gris,.split--presse .split-img{background:var(--creme)}
.tm-vue img,.carte-gris img{mix-blend-mode:multiply}
@media(prefers-contrast:more){.tm-vue img,.carte-gris img{mix-blend-mode:normal}}

/* ═══════════════════════════════════════════════════════════════
   LE BAS DE PAGE REPREND UN RYTHME

   Tarifs, garantie, FAQ, clôture, preuves et contact se suivaient
   sur la même densité et le même écart. Six blocs au même rythme,
   et c'est exactement là que le boulanger décide.

   L'alternance revient : la garantie respire et se centre, la FAQ
   se resserre en liste dense, la clôture frappe sur charbon, les
   preuves passent en bande fine, le contact redevient dense.
   Inspirer, expirer, inspirer.
   ═══════════════════════════════════════════════════════════════ */

/* ── La garantie : le moment aéré ────────────────────────────────
   Tout le texte tenait dans la moitié gauche, l'autre moitié était
   vide, et le bouclier faisait 58 px à côté d'un titre de 38. En
   colonne centrée, la section occupe sa largeur et le picto reprend
   l'échelle de ce qu'il annonce. Modèle : aesop-08. */
.garantie{padding-block:clamp(90px,10vw,150px)}
.ga{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
  gap:clamp(24px,3vw,40px);max-width:64ch;margin:0 auto}
.ga-ico{width:clamp(64px,7vw,92px);height:clamp(64px,7vw,92px)}
.ga-txt{display:flex;flex-direction:column;align-items:center}
.ga-txt .kicker{margin-bottom:16px}
.ga-txt h2{max-width:18ch;margin-bottom:0}
.ga-txt p{margin-top:24px;max-width:58ch;text-align:center}
.ga-txt .ga-cond{margin-top:16px;font-size:var(--t3);text-transform:none;letter-spacing:0;
  line-height:1.6;max-width:56ch}
.ga-txt .btn{margin-top:clamp(28px,3vw,44px)}

/* ── La FAQ : le moment dense ────────────────────────────────────
   Neuf questions à 90 px d'écart, chacune sur 1 250 px de large
   avec son chevron à 900 px du texte. On lisait une échelle, pas
   une liste. La mesure se resserre, les filets ferment les lignes,
   et les neuf questions tiennent dans un écran et demi. */
.faq .accs{max-width:76ch}
.faq .acc+.acc{margin-top:0}
.faq .acc{border-bottom:1px solid var(--filet)}
.faq .acc:first-of-type{border-top:1px solid var(--filet)}
.faq .acc summary{padding:18px 0;gap:24px}
.faq .acc-t{font-size:var(--t1);line-height:1.35;letter-spacing:-.005em}
.faq .acc-c{padding:0 0 22px;max-width:70ch}
.faq .acc-c p{font-size:var(--t2)}
.faq-cta{margin-top:clamp(40px,4.4vw,64px);max-width:76ch}

/* ── Les preuves : une bande fine, pas une section ───────────────
   Deux informations de réassurance n'ont pas besoin d'un viewport.
   Les logos revendeurs sont sur tuile blanche : ils rejoignent le
   crème comme les packshots. */
.preuves{padding-block:clamp(44px,5vw,72px)}
.pr-logos img,.confiance .logos img{mix-blend-mode:multiply}
@media(prefers-contrast:more){.pr-logos img,.confiance .logos img{mix-blend-mode:normal}}

/* ── Le contact : pas de carte, pas de bordure ───────────────────
   Deux encadrés bordés au milieu d'une page qui n'a plus une seule
   bordure. Le fond suffit à séparer. */
.ct-card{background:var(--creme-clair);border:0;padding:clamp(24px,2.6vw,32px)}
.contact{background:var(--creme)}
.ct-card h4{font-size:var(--t1)}
.ct-card p{font-size:var(--t2);color:var(--gris)}
.ct-tel{font-size:var(--d4)!important;line-height:1.1;margin:6px 0 10px}

/* La garantie, réglages de mesure. Le titre cassait « une vraie /
   tournée » en deux : l'exergue perdait son sens en se coupant. Et
   un paragraphe de quatre lignes centré se lit mal, l'œil cherche
   le début de chaque ligne. Composition centrée, lecture à gauche. */
.ga-txt h2{max-width:24ch;text-wrap:balance}
.ga-txt p{text-align:left;max-width:54ch}
.ga-txt .ga-cond{text-align:left}

/* ── Les logos revendeurs n'ont plus de carré blanc ──────────────
   Le blanc ne venait pas des images mais du lien qui les porte :
   un aplat blanc de 132 × 66 avec une ombre au survol. Sur une page
   en crème sans une seule ombre, ça faisait deux timbres-poste.

   Les deux logos sont désormais détourés, fond transparent, posés
   directement sur le crème. Ils sont noirs : le gris et l'opacité
   qui servaient à les atténuer ne servent plus à rien, la taille
   suffit à les tenir à leur rang. */
.pr-logos a,.confiance .logos a{background:none;width:auto;height:auto;
  padding:0;box-shadow:none;transform:none;display:inline-flex;align-items:center}
.pr-logos a:hover,.confiance .logos a:hover{transform:none;box-shadow:none}
.pr-logos{gap:clamp(28px,3.4vw,52px);margin-top:20px;align-items:center}
.pr-logos img,.confiance .logos img{mix-blend-mode:normal;filter:none;opacity:.7;
  height:clamp(24px,2.2vw,30px);width:auto;transition:opacity .18s}
.pr-logos a:hover img,.confiance .logos a:hover img{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   PASSE COMPLÈTE SUR LES SECTIONS RESTANTES
   Même grammaire partout : la tête de section tient sa mesure, le
   contenu occupe sa largeur, et chaque section respire ou se
   resserre en alternance avec sa voisine.
   ═══════════════════════════════════════════════════════════════ */

/* ── 4. VIDÉO ────────────────────────────────────────────────────
   Le titre tenait une demi-page pour trois lignes. La colonne de
   texte se cale en bas, contre l'image, comme sur aesop-06 : le
   texte et le bord de l'image partagent la même ligne d'assise. */
.video-sec .split-txt{justify-content:flex-end;padding-bottom:clamp(44px,5vw,76px)}
.video-sec .split-txt h2{max-width:16ch}
.video-p{max-width:46ch;margin-top:20px}

/* ── 5. PRESSE ───────────────────────────────────────────────────
   Les parutions sont des lignes de liste. La mesure se resserre
   pour que le titre et sa date se répondent au lieu de se regarder
   d'un bout à l'autre de l'écran. */
.parutions .liste{max-width:60ch}
.ligne-t{font-size:var(--t1)}
.ligne{padding:16px 0}

/* ── 6. LES 4 GAINS : le cœur de la page ─────────────────────────
   Le mot-clé de chaque gain doit se lire en scrollant vite : il
   passe au pas d4 plein et gagne la place de deux lignes, pour que
   les quatre colonnes s'alignent quoi qu'il arrive.

   La phrase de conclusion laissait une demi-largeur vide à droite.
   Elle traverse désormais toute la grille, sur un filet, comme une
   ligne d'arrivée. */
.cartes.g4 .pc-lab,.cartes.g4 h4{font-size:var(--d4);line-height:1.12;
  min-height:2.24em;margin-top:18px}
.cartes.g4 .ico{width:44px;height:44px;margin-top:24px}
.phrase-conclusion{max-width:none;font-size:var(--d3);line-height:1.1;
  padding-top:clamp(36px,4vw,60px);margin-top:clamp(56px,6vw,90px);
  border-top:1px solid var(--filet);text-wrap:balance}
/* La phrase se lit d'un trait : elle occupe la largeur, pas 32
   caractères au milieu du vide. */
.phrase-conclusion{display:block;max-width:34ch}

/* ── 7. VIDÉOS TÉMOIGNAGES ───────────────────────────────────────
   Rupture sur charbon. Les vignettes gardent leur rang, le titre
   de chaque témoignage passe au corps secondaire : ce qu'on
   regarde, c'est l'image, pas la légende. */
.videos .vtitre{font-size:var(--t2);color:var(--txt-inv-attenue);margin-top:10px}
.videos .vcard .vtitre{font-family:var(--fc);font-weight:400}

/* ── 9. COMPATIBILITÉ ────────────────────────────────────────────
   Six caractéristiques en tableau à filets. La colonne de texte
   se cale au centre de l'image, et les intitulés passent au pas
   du corps : une spec se scanne, elle ne se proclame pas. */
.tech-sec .duo-tech{align-items:center}
.tl h4{font-size:var(--t1);margin:0 0 6px}
.tl p{font-size:var(--t2)}
.tech-sec .split-txt h2,.tech-sec h2{max-width:20ch}

/* ── 11. POUR QUI ────────────────────────────────────────────────
   Quatre profils de même rang. Le sous-titre en capitales tient sa
   hauteur pour que les quatre textes commencent à la même ligne. */
.cartes.g4b h4{font-size:var(--d4);line-height:1.12;min-height:1.2em}
.cartes.g4b .pq-sub{font-size:var(--t3);line-height:1.5;min-height:3em}
.cartes.g4b .ico{width:44px;height:44px;margin-top:22px}

/* ── 12. CAS D'USAGE ─────────────────────────────────────────────
   La tête et le corps se collaient. La tête reprend son air, et
   l'accordéon se resserre comme la FAQ : même composant, même
   rythme, on ne réapprend pas à lire en cours de page. */
.cas-tete{padding-bottom:0}
.cas-corps{padding-top:clamp(28px,3vw,44px)}
.cas-corps .accs{max-width:82ch}
.cas-corps .acc{border-bottom:1px solid var(--filet)}
.cas-corps .acc:first-of-type{border-top:1px solid var(--filet)}
.cas-corps .acc+.acc{margin-top:0}
.cas-corps .acc summary{padding:20px 0}
.cas-corps .acc-t{font-size:var(--d4)}

/* ── 13. RSE ─────────────────────────────────────────────────────
   Cinq blocs juste après une grille de quatre : c'était deux fois
   la même forme à la suite. Les cinq engagements passent en liste
   à filets, une ligne chacun, picto à gauche. La section change de
   forme, donc elle se distingue. */
.rse-sec .cartes{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border-top:1px solid var(--filet);max-width:88ch}
.rse-sec .pc.rse{display:grid;grid-template-columns:44px minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(18px,2.4vw,36px);align-items:start;padding:24px 0;
  border-bottom:1px solid var(--filet)}
.rse-sec .pc.rse .pc-bg{display:none}
.rse-sec .pc.rse .ico{width:32px;height:32px;margin:2px 0 0}
.rse-sec .pc.rse h4{font-size:var(--t1);min-height:0;margin:0;line-height:1.25}
.rse-sec .pc.rse p{font-size:var(--t2)!important;margin-top:0}
@media(max-width:820px){
  .rse-sec .pc.rse{grid-template-columns:32px minmax(0,1fr);gap:14px}
  .rse-sec .pc.rse p{grid-column:2}
}

/* ── 16. CLÔTURE ─────────────────────────────────────────────────
   Le dernier mot de la page. Le titre prend le pas d2 et la
   mesure courte : une phrase de clôture se lit d'un regard. */
.cloture-v3{padding-block:clamp(90px,10vw,150px)}
.cloture-v3 h2{max-width:14ch}
.cl-lead{max-width:46ch;margin:26px 0 34px}

/* ═══════════════════════════════════════════════════════════════
   LA GRILLE REDEVIENT UNE : RETOUR DE ROMAIN DU 27/09

   J'avais resserré des blocs à 1 000 px, 76ch, 82ch, 88ch pour
   gagner en lisibilité. Chacun pris seul se lisait mieux. Mis bout
   à bout, la page changeait de largeur cinq fois en quinze
   sections, et le contenu paraissait décalé à gauche.

   Une mesure de lecture se règle à l'intérieur d'une colonne, pas
   en rétrécissant le conteneur. Toutes les sections reprennent le
   même bord gauche et la même largeur : .w, 1 280 px, 44 px de
   marge. Ce qui doit être court l'est dans sa colonne.
   ═══════════════════════════════════════════════════════════════ */
.faq .accs,.cas-corps .accs,.accs{max-width:none}
.faq-cta{max-width:none}
.rse-sec .cartes{max-width:none}
.parutions .liste{max-width:none}
.grid5{max-width:none;margin-left:0}
.chiffres .w>.kicker,.chiffres .w>h2,.chiffres .ex,.chiffres .cta-centre{max-width:none}
.chiffres h2{max-width:24ch}

/* ── Les chiffres : des colonnes, vraiment ───────────────────────
   Chaque ligne était sa propre grille avec une première colonne en
   max-content : les quatre chiffres n'avaient donc aucune raison de
   s'aligner, et ils ne s'alignaient pas. Les colonnes sont
   maintenant identiques d'une ligne à l'autre, en pourcentage du
   conteneur, donc elles tombent au même endroit. */
.ch{grid-template-columns:22% 18% minmax(0,1fr);gap:clamp(20px,2.6vw,44px);
  align-items:baseline;padding:26px 0}
.ch .n{font-size:var(--d1);line-height:.9}
.ch:last-child .n{font-size:var(--d2)}
.ch .lib{font-size:var(--t2);line-height:1.3}
.ch .desc{max-width:52ch}
.chiffres .ex{max-width:64ch;margin-top:clamp(36px,4vw,56px)}
.chiffres .cta-centre{margin-top:clamp(28px,3vw,44px)}
.chiffres .cta-centre .txt{max-width:54ch;margin-bottom:22px}
@media(max-width:900px){
  .ch{grid-template-columns:30% minmax(0,1fr)}
  .ch .desc{grid-column:1/-1;max-width:none;margin-top:4px}
}
@media(max-width:720px){
  .ch{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0}
  .ch .desc{margin-top:2px}
}

/* ── Accordéons : pleine largeur, mesure dans la colonne ─────────
   La ligne va d'un bord à l'autre comme toutes les autres lignes de
   la page. C'est le texte de la question qui tient sa mesure, dans
   sa colonne, pas le conteneur qui rétrécit. */
.acc summary{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(24px,4vw,80px)}
.acc-t{max-width:56ch}
.faq .acc-c,.acc-c>div{max-width:72ch}

/* ── RSE : la liste prend la largeur, les colonnes se répondent ──*/
.rse-sec .pc.rse{grid-template-columns:44px 26% minmax(0,1fr)}
.rse-sec .pc.rse p{max-width:62ch}
@media(max-width:900px){
  .rse-sec .pc.rse{grid-template-columns:32px minmax(0,1fr)}
  .rse-sec .pc.rse p{grid-column:2;max-width:none}
}

/* ── Presse : la liste reprend la largeur de la page ─────────────*/
.parutions .ligne-t{max-width:52ch}

/* ── Le CTA orange : le carton se pose sur l'aplat ───────────────
   La photo était sur son fond blanc de studio : un rectangle blanc
   au milieu de l'orange. Le carton est détouré, son ombre refaite
   dans un brun chaud, il flotte sur la bande.

   C'est la seule ombre de la page, et elle est là pour une raison :
   sans elle, un objet détouré sur un aplat plat paraît collé. */
.cta-achat img{max-width:340px;width:100%;margin-bottom:clamp(20px,2.4vw,32px)}
.cta-rassure{list-style:none;margin:18px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:10px 26px}
.cta-rassure li{display:flex;align-items:center;gap:9px;font-size:var(--t2);
  color:rgba(255,255,255,.88)}
.cta-rassure .pic-s{width:17px;height:17px;color:#fff;flex:none}

/* ── Compatibilité : l'image se cale, les mots-clés ressortent ───
   L'image flottait au centre pendant que la liste commençait en
   haut : deux blocs côte à côte qui ne partagent aucune ligne. Ils
   partagent maintenant leur bord haut et leur bord bas.

   Et il fallait tout lire pour trouver l'information. L'intitulé de
   chaque caractéristique est le mot-clé : il passe au pas d4, la
   description passe en corps atténué derrière lui. On scanne six
   mots, on lit ce qu'on veut. */
.duo-tech{align-items:stretch}
.duo-tech .carte-gris{display:flex;align-items:stretch}
.duo-tech .carte-gris img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.tech-liste{margin-top:0;align-content:start}
.tl h4{font-size:var(--d4);line-height:1.15;margin:0 0 8px;letter-spacing:-.018em}
.tl p{font-size:var(--t2);color:var(--gris)}
.tl{padding:22px 0}
.tl-ico{width:28px;height:28px;margin-top:4px}

/* ── L'abonnement : c'est la première fois qu'on en parle ────────
   Un encart de la taille d'une note de bas de page pour une offre
   qu'on n'a jamais mentionnée. Le prix bloqué devient le visuel :
   2,90 € au pas d2, en orange sur le charbon, et le reste se range
   derrière. Un chiffre lisible de loin vaut mieux qu'une image. */
.abo{padding:clamp(32px,3.6vw,48px);margin-top:clamp(24px,3vw,36px)}
.abo-tag{font-size:var(--t3);color:var(--orange);letter-spacing:.16em}
.abo-t{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.15;margin:16px 0 0;color:var(--txt-inv);max-width:20ch}
.abo-prix{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.abo-prix b{font-family:var(--ft);font-weight:800;font-size:var(--d2);line-height:1;
  letter-spacing:-.03em;color:var(--orange)}
.abo-prix span{font-size:var(--t2);color:var(--txt-inv-attenue)}
.abo-p{font-size:var(--t2);color:var(--txt-inv-attenue);margin:16px 0 26px;max-width:46ch}
.abo-t strong,.abo .or{color:var(--orange)!important}

/* ── La garantie se scanne ───────────────────────────────────────
   Deux pavés qu'il fallait lire en entier pour savoir ce qu'on
   risque. Les mots sont les mêmes, ils se rangent : la promesse en
   une phrase, les quatre points de comparaison en pictos, la
   contrepartie en une phrase, puis les trois conditions en trois
   couples terme/valeur. On sait en trois secondes, on lit si on
   veut.

   « Trente jours » passe à « 30 jours » : un délai se lit en
   chiffres, surtout quand c'est lui qui lève le risque. */
.ga-lead{font-size:var(--t1);max-width:52ch;margin-top:0!important;text-align:left}
.ga-txt .ga-lead+.ga-quoi{margin-top:22px}
.ga-quoi{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 28px}
.ga-quoi li{display:flex;align-items:center;gap:9px;font-family:var(--ft);
  font-weight:800;font-size:var(--t1);letter-spacing:-.01em;color:var(--txt)}
.ga-quoi .pic-s{width:19px;height:19px;color:var(--orange);flex:none}
.ga-cond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,44px);margin-top:clamp(28px,3vw,42px);
  padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--filet);
  width:100%;text-align:left;font-size:inherit!important;text-transform:none;letter-spacing:0}
.ga-cond dt{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.1;letter-spacing:-.02em;color:var(--txt)}
.ga-cond dt sup{font-size:.55em;vertical-align:.5em}
.ga-cond dd{margin:6px 0 0;font-size:var(--t2);color:var(--gris);line-height:1.4}
@media(max-width:720px){
  .ga-cond{grid-template-columns:minmax(0,1fr);gap:18px}
  .ga-quoi{justify-content:flex-start}
}

/* ── Les preuves et la bande de confiance ────────────────────────
   Le logo FSC portait son carré blanc comme les revendeurs : il est
   détouré, il garde ses couleurs, c'est une certification et sa
   couleur fait partie de la marque.

   « Ils nous font confiance » était un mot posé à gauche à 11,5 px
   avec deux logos loin derrière. C'est un sur-titre : il se met
   au-dessus de ce qu'il annonce, pas à côté. */
.pr-fsc{height:38px;width:auto}
.confiance .in{display:block}
.conf-lab{font-size:var(--t3);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-bottom:20px}
.confiance .logos{display:flex;gap:clamp(28px,3.4vw,52px);align-items:center;flex-wrap:wrap}
.confiance .logos div{display:flex;align-items:center}

/* ── Nous écrire : la colonne de droite devient scannable ────────
   Deux blocs de texte suivi à côté d'un formulaire, là où le
   visiteur cherche trois choses : un numéro, des horaires, et le
   fait qu'il peut commander sans écrire. Chaque carte pose son
   terme et sa valeur, comme le tableau des caractéristiques. */
.ct-side{gap:clamp(20px,2.4vw,32px)}
.ct-card h4{font-size:var(--t3);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:14px}
.ct-tel{display:block;font-family:var(--ft)!important;font-weight:800;
  font-size:var(--d4)!important;line-height:1.05;letter-spacing:-.025em;
  color:var(--txt)!important;margin:0 0 12px}
.ct-card p{font-size:var(--t2);color:var(--gris);margin-top:0}
.ct-faits{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.ct-faits li{display:flex;align-items:flex-start;gap:10px;font-size:var(--t2);
  color:var(--gris);line-height:1.4}
.ct-faits .pic-s{width:16px;height:16px;color:var(--orange);flex:none;margin-top:3px}
.ct-faits b{color:var(--txt);font-weight:600}

/* ── Les derniers décalages, retour de Romain ────────────────────
   Trois restes de la feuille inline poussaient du contenu au
   milieu pendant que le reste de la page est aligné à gauche :
   .ex et .cta-centre .txt étaient centrés avec des marges
   automatiques, ce qui les faisait commencer 220 px plus loin que
   les chiffres au-dessus d'eux. */
.chiffres .ex,.chiffres .cta-centre,.chiffres .cta-centre .txt,
.chiffres .cta-centre .btn-note{margin-left:0;margin-right:0;text-align:left}
.chiffres .ex{font-style:normal;max-width:64ch}
.chiffres .cta-centre .txt{max-width:56ch;margin-bottom:24px}

/* Les logos de la bande de confiance portaient encore leur tuile
   blanche : elle vient du conteneur de chaque logo, pas du lien. */
.confiance .logos div,.pr-logos div{background:none;padding:0;border:0;
  box-shadow:none;width:auto;height:auto}
.confiance{background:var(--creme-clair)}

/* L'image de compatibilité remplit sa colonne : elle partage son
   bord haut et son bord bas avec le tableau d'en face. Le carré
   imposé par l'ancienne feuille sautait, c'est lui qui la faisait
   flotter au milieu. */
.duo-tech{align-items:stretch}
.duo-tech .carte-gris{display:block;padding:0;height:100%}
.duo-tech .carte-gris img{width:100%;height:100%;min-height:clamp(380px,34vw,520px);
  object-fit:cover;aspect-ratio:auto!important;display:block}

/* La garantie : les trois conditions se centrent comme le reste du
   bloc, sinon un rang aligné à gauche dans une composition centrée
   se lit comme un décalage. */
.ga-cond{text-align:center;justify-items:center}
.ga-cond dd{max-width:22ch}

/* Le bouton de la carte « pour commander » respire. */
.ct-card .ct-faits+.btn{margin-top:20px}

/* ── Les écrans partagés rejoignent la grille ────────────────────
   Trois conventions coexistaient. Un texte à gauche commençait à
   63 px du bord de l'écran, un texte à droite à 783, et le tableau
   technique à 749. Les sections pleine largeur, elles, commencent
   toutes à 124.

   Une colonne de texte d'écran partagé prend désormais la même
   marge que la page : quand elle est à gauche, son texte tombe sur
   le même bord que tous les titres de section. Quand elle est à
   droite, elle garde la même respiration depuis la coupe.

   --gouttiere est la marge de page : (1280 max, 44 de marge)
   ramenée à l'écran courant. */
:root{--gouttiere:clamp(20px,calc((100vw - 1280px) / 2 + 44px),124px)}
.split-txt{padding-left:clamp(32px,4.4vw,76px);padding-right:clamp(32px,4.4vw,76px)}
/* Texte dans la colonne de gauche : il s'aligne sur la page. */
.video-sec .split-txt,.split--inverse .split-txt{padding-left:var(--gouttiere)}
/* Le tableau technique est dans .w, il n'a pas à ajouter de marge. */
.tech-sec .duo-tech{gap:clamp(36px,4.4vw,76px)}
/* La technique est un écran partagé contenu, pas plein bord. Ses
   colonnes sont réglées pour que le texte tombe sur le même bord
   que les autres sections partagées de la page. */
.duo-tech{grid-template-columns:minmax(0,.522fr) minmax(0,.478fr)}

/* ═══════════════════════════════════════════════════════════════
   UN SEUL ORANGE VISIBLE, RETOUR DE ROMAIN

   Quatre oranges étaient peints sur la page : #EA6020 onze fois,
   #CC4E13 dix fois, #B64511 sept fois, #FA854F une fois. Les trois
   premiers venaient de moi : j'avais séparé les rôles pour tenir
   les contrastes, et j'ai obtenu trois couleurs là où la marque en
   a une.

   Il en reste deux, et on ne les voit jamais côte à côte :
   · --orange, l'orange du logo, pour tout ce qui ne porte pas de
     texte : pictos, aplats, filets, accents sur le charbon.
   · --orange-txt, un cran plus sourd, pour ce qui porte du texte
     blanc ou ce qui est du texte orange assez grand pour tenir.

   Le troisième disparaît : les deux seuls endroits qui le
   demandaient étaient du texte de 10,5 et 13 px, illisible en
   orange quelle que soit la nuance. Ils passent en charbon. Un
   accent qui ne se lit pas n'accentue rien.
   ═══════════════════════════════════════════════════════════════ */
:root{--orange-lisible:#CC4E13;--orange-clair:#EA6020}
/* Le petit corps quitte l'orange : il n'y était pas lisible. */
.encart-promo{color:var(--charbon)}
.mentions-tech span{color:var(--charbon);border-color:var(--filet)}

/* ── Presse : la parution se lit comme un document ───────────────
   La page de magazine était posée sur le crème, elle flottait sans
   support. Elle passe sur du blanc : c'est du papier, et c'est le
   seul endroit de la page où le blanc a une raison d'être.

   À droite, quatre lignes qui changeaient de couleur au survol,
   serrées les unes contre les autres, sans rien qui dise qu'elles
   s'ouvrent. Chaque ligne respire, et porte « Lire » avec sa
   flèche : on sait ce qui se passe avant de cliquer. */
.split--presse .split-img{background:#fff;padding:clamp(32px,4vw,64px)}
.split--presse .split-img img{max-height:clamp(360px,42vw,600px);
  box-shadow:0 2px 24px -14px rgba(36,28,20,.45)}
.parutions .liste{margin-top:clamp(32px,3.4vw,52px);border-top:1px solid var(--filet)}
.ligne{grid-template-columns:minmax(0,1fr) auto auto;
  gap:clamp(14px,2vw,28px);padding:22px 0;align-items:baseline}
.ligne-t{font-size:var(--d4);letter-spacing:-.018em;max-width:none}
.ligne-d{font-size:var(--t2);color:var(--gris);text-align:right}
.ligne-lire{display:inline-flex;align-items:center;gap:7px;font-size:var(--t3);
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange-txt);white-space:nowrap}
.ligne-lire .pic-s{width:15px;height:15px;color:var(--orange);flex:none}
.ligne:hover .ligne-t{color:var(--orange-txt)}
.ligne:hover .ligne-d{color:var(--gris)}
.parutions .pr-aide{margin-top:24px;font-size:var(--t2)}
@media(max-width:900px){
  .ligne{grid-template-columns:minmax(0,1fr) auto}
  .ligne-d{grid-column:1;text-align:left;margin-top:4px}
}

/* ── Cas d'usage : le titre tient sa ligne, les pictos se voient ─
   « quotidien » tombait seul sur la deuxième ligne parce que la
   mesure était réglée à 24 caractères. Le titre de cette section
   prend la largeur dont il a besoin.

   Et les pictos d'accordéon faisaient 18 px de haut à côté d'un
   titre de 26 : on ne voyait pas ce qu'ils représentent. Ils
   passent à 30 et prennent leur colonne. */
.cas-tete h2{max-width:40ch}
/* Le résumé porte trois enfants : le picto, le titre, le chevron.
   Ma grille n'en déclarait que deux, le chevron tombait à la ligne
   et le titre partait à droite. Trois colonnes, dans l'ordre. */
.cas-corps .acc summary{grid-template-columns:34px minmax(0,1fr) auto;
  gap:20px;align-items:center}
.cas-corps .acc summary .pic-s{width:30px;height:30px;stroke-width:1.35;
  color:var(--orange)}
.cas-corps .acc-t{display:flex;align-items:baseline;gap:16px;max-width:none}
.cas-corps .acc:not(.acc-faq) .acc-t::before{font-size:var(--t3);color:var(--gris)}
.acc[open]:not(.acc-faq) .acc-t::before{color:var(--orange-txt)}
.acc[open] .acc-t,.acc summary:hover .acc-t{color:var(--orange-txt)}
.acc-x{border-color:var(--orange)}

/* ── La garantie : les quatre mots portent la comparaison ────────
   Ce sont eux qui disent ce qu'on compare. Ils passent au pas d4
   avec leur picto à l'échelle. */
.ga-quoi{gap:clamp(16px,2.6vw,44px);margin-bottom:26px}
.ga-quoi li{font-size:var(--d4);gap:12px;letter-spacing:-.018em}
.ga-quoi .pic-s{width:26px;height:26px;stroke-width:1.4}

/* ── FAQ : le titre tient la colonne de gauche ───────────────────
   Pleine largeur ne suffisait pas : des questions de huit mots sur
   1 200 px laissent un désert à droite. Le titre et la relance
   passent dans une colonne de gauche, l'accordéon occupe la
   droite. La largeur est remplie par de la structure, pas par de
   l'étirement. C'est la grammaire d'écran partagé de la page,
   appliquée dans un conteneur. */
.faq .w{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(36px,5vw,90px);align-items:start}
.faq .w>.kicker,.faq .w>h2{grid-column:1;margin-bottom:0}
.faq .w>h2{max-width:16ch;position:sticky;top:24px}
.faq .accs{grid-column:2;grid-row:1/span 3}
.faq-cta{grid-column:1;margin-top:clamp(28px,3vw,44px);max-width:32ch}
.faq .acc-t{max-width:none}
.faq .acc-c{max-width:none}
@media(max-width:900px){
  .faq .w{grid-template-columns:minmax(0,1fr);gap:0}
  .faq .w>.kicker,.faq .w>h2,.faq .accs,.faq-cta{grid-column:1;grid-row:auto}
  .faq .w>h2{position:static;max-width:24ch;margin-bottom:clamp(28px,3vw,44px)}
}

/* Les quatre mots de la garantie tiennent sur une ligne : en flex
   ils cassaient en 3 + 1, ce qui donnait un mot orphelin au
   milieu. Quatre colonnes égales, deux par deux en dessous de
   720 px. */
.ga-quoi{display:grid;grid-template-columns:repeat(4,auto);
  justify-content:center;gap:clamp(14px,2.4vw,40px);margin-bottom:28px}
.ga-quoi li{justify-content:flex-start}
@media(max-width:720px){
  .ga-quoi{grid-template-columns:repeat(2,auto);justify-content:start;gap:16px 28px}
}

/* Le bloc de garantie était borné à 64 caractères : au pas d4, les
   quatre mots-clés n'y tenaient plus et cassaient à l'intérieur de
   leur propre cellule. C'est chaque paragraphe qui porte sa mesure,
   pas le bloc entier. */
.ga{max-width:none}
.ga-txt{width:100%;align-items:center}
.ga-txt h2{max-width:22ch;margin-inline:auto}
.ga-lead{max-width:56ch;margin-inline:auto;text-align:center}
.ga-quoi li{white-space:nowrap}
.ga-cond{max-width:760px;margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════
   DEUXIÈME RETOUR DE ROMAIN
   ═══════════════════════════════════════════════════════════════ */

/* ── Presse : du beige, pas du blanc, et une ligne qui ferme ─────
   Le blanc pur coupait la page. Un blanc cassé chaud donne le
   papier sans l'éclat. Et un filet ferme la section à droite :
   sans lui, la bande se confondait avec celle du dessous. */
.split--presse .split-img{background:#FBF7F0}
.split--presse{border-bottom:1px solid var(--filet)}
.split--presse .split-txt{border-left:1px solid var(--filet)}

/* ── Le carton repose au sol ─────────────────────────────────────
   L'ombre portée le faisait flotter comme un autocollant. L'ombre
   est maintenant au sol, sous la boîte : elle la pose. */
.cta-achat img{max-width:380px}

/* ── Chiffres : la ligne s'arrête où le texte s'arrête ───────────
   Les filets allaient jusqu'au bord pendant que la description
   s'arrêtait à 52 caractères : une colonne vide de 250 px à droite
   de chaque ligne. Les trois colonnes se répartissent la largeur
   entière, la description remplit la sienne. */
.ch{grid-template-columns:26% 20% minmax(0,1fr);gap:clamp(20px,2.4vw,40px)}
.ch .desc{max-width:none}

/* ── « Une housse, toutes les mannes » est une affirmation ───────
   Elle passait en italique gris de 15 px, au milieu de rien. C'est
   la conclusion de toute la section : elle prend le pas d4 et son
   premier membre porte la voix. */
.chiffres .ex{font-size:var(--d4);line-height:1.25;letter-spacing:-.018em;
  font-family:var(--ft);font-weight:800;color:var(--txt-inv);
  max-width:34ch;font-style:normal}
.chiffres .ex b{color:var(--orange);font-weight:800}

/* ── Le bas de la section est un achat, pas une phrase ───────────
   Le prix était noyé dans une phrase de trois lignes. Il devient
   l'objet : le montant en grand, l'ancien prix barré à côté, le
   reste en note. On voit la promo avant de lire quoi que ce soit. */
.offre-flash{margin-top:clamp(28px,3vw,44px)}
.of-tag{font-size:var(--t3);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.of-prix{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.of-prix b{font-family:var(--ft);font-weight:800;font-size:var(--d2);line-height:1;
  letter-spacing:-.035em;color:var(--txt-inv)}
.of-prix span{font-size:var(--t1);color:var(--txt-inv)}
.of-prix s{font-size:var(--t1);color:var(--txt-inv-attenue);text-decoration-thickness:1px}
.of-note{font-size:var(--t2);color:var(--txt-inv-attenue);margin-top:12px}
.of-note b{color:var(--txt-inv);font-weight:600}
.chiffres .cta-centre{margin-top:clamp(24px,2.6vw,36px)}

/* ── Tarifs : les pictos se voient, les mots-clés ressortent ─────
   Des pictos de 15 px et des phrases sans relief : rien
   n'accrochait l'œil, il fallait lire les cinq lignes en entier
   pour trouver l'information. Pictos à 24, mot-clé en tête de
   chaque ligne, en charbon gras sur le texte atténué. */
.offre-l{gap:16px}
.offre-l p{gap:16px;font-size:var(--t1);align-items:flex-start;line-height:1.45}
.offre-l .pic-s{width:24px;height:24px;stroke-width:1.4;margin-top:2px;color:var(--orange)}
.offre-l b{color:var(--txt);font-weight:700}
.offre-l span{color:var(--gris)}

/* ── Garantie : plus grand, et les quatre mots groupés ───────────
   « Le pain » se retrouvait seul sous les trois autres. Les quatre
   tiennent ensemble sur une ligne, au pas d3, ou deux par deux. */
.ga-quoi{grid-template-columns:repeat(4,auto);gap:clamp(18px,3vw,56px);
  margin:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px)}
.ga-quoi li{font-size:var(--d3);gap:14px;letter-spacing:-.022em}
.ga-quoi .pic-s{width:32px;height:32px;stroke-width:1.3}
.ga-lead{font-size:var(--t1);max-width:60ch}
@media(max-width:1000px){
  .ga-quoi{grid-template-columns:repeat(2,auto);gap:20px 40px;justify-content:center}
  .ga-quoi li{font-size:var(--d4)}
}

/* ── Les revendeurs se voient ────────────────────────────────────
   Deux logos de 26 px alignés à gauche d'une bande vide. Ils
   passent au centre, deux fois plus grands : c'est une preuve, pas
   une mention légale. */
.confiance{padding-block:clamp(48px,5.5vw,80px);text-align:center}
.conf-lab{margin-bottom:26px}
.confiance .logos{justify-content:center;gap:clamp(40px,5vw,80px)}
.confiance .logos img{height:clamp(38px,4vw,54px);opacity:.85}

/* ── La clôture vend, elle n'informe pas ─────────────────────────
   « Un carton de 30 à 87 € HT » était noyé dans une phrase de deux
   lignes en gris. C'est le dernier écran avant de partir : le prix
   du moment passe devant, l'ancien à côté, l'économie se voit sans
   qu'on ait à la calculer. La phrase reste, elle passe derrière le
   bouton, là où on la lit si on hésite encore. */
.cl-offre{margin-top:clamp(28px,3.4vw,48px);max-width:54ch}
.cl-offre .of-tag{color:var(--orange)}
.cl-offre .of-prix b{font-size:var(--d1);color:var(--txt-inv)}
.cl-offre .of-prix span{font-size:var(--d4);color:var(--txt-inv)}
.cl-offre .of-prix s{font-size:var(--d4);color:var(--txt-inv-attenue)}
.cl-carton{font-size:var(--t1);color:var(--txt-inv-attenue);margin:14px 0 clamp(24px,2.6vw,34px)}
.cl-carton b{color:var(--txt-inv);font-weight:700}
.cl-rassure{font-size:var(--t2);color:var(--txt-inv-attenue);margin-top:16px}
.cloture-v3 .cl-lead{font-size:var(--t2);color:var(--txt-inv-attenue);
  margin:clamp(28px,3vw,44px) 0 0;max-width:48ch}
.cloture-v3 h2{max-width:16ch}

/* ── Chiffres : la moitié droite se remplit ──────────────────────
   Sous les quatre lignes, la conclusion et l'offre s'empilaient à
   gauche sur 34 caractères : les filets traversaient toute la page
   au-dessus d'une demi-page vide. Les deux blocs se mettent côte à
   côte. La phrase dit pourquoi, l'offre dit combien, et la section
   se ferme sur toute sa largeur. */
.chiffres .bas{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,90px);align-items:start;
  margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(36px,4vw,56px);
  border-top:1px solid var(--filet-inv)}
.chiffres .bas .ex{margin-top:0;max-width:24ch}
.chiffres .bas .cta-centre{margin-top:0}
.chiffres .offre-flash{margin-top:0}
@media(max-width:900px){
  .chiffres .bas{grid-template-columns:minmax(0,1fr);gap:32px}
  .chiffres .bas .ex{max-width:32ch}
}

/* ── Tarifs : le packshot n'est plus un bandeau ──────────────────
   L'image de la gamme était écrasée dans une bande de 110 px de
   haut : la housse y était coupée en haut et en bas. Elle reprend
   son rapport et se pose sur le crème comme les autres. */
.tarifs-sec .carte-gris{background:var(--creme-clair)}
.tarifs-sec .carte-gris img{width:100%;height:auto;aspect-ratio:4/3!important;
  object-fit:contain;padding:clamp(18px,2vw,30px);mix-blend-mode:multiply}

/* ── Clôture : le prix tient sur une ligne ───────────────────────
   Au pas d1 le montant poussait l'ancien prix à la ligne suivante,
   et la comparaison ne se faisait plus d'un regard. */
.cl-offre{max-width:none}
.cl-offre .of-prix{flex-wrap:nowrap;align-items:baseline}
.cl-offre .of-prix b{font-size:var(--d2)}
.cl-offre .of-prix span,.cl-offre .of-prix s{font-size:var(--t1);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   UN SEUL ORANGE, POUR DE BON. TROISIÈME RETOUR.

   Il en restait deux : l'orange du logo pour les pictos et les
   accents, un cran plus sourd pour les fonds de bouton et les
   états ouverts. Romain les voit, et il a raison : « une seule
   réponse » et « la tournée du matin » n'étaient pas de la même
   couleur alors que ce sont deux accents du même rang.

   #EA6020 partout, y compris sur les boutons. Le libellé des
   boutons passe du blanc au charbon : blanc sur cet orange donne
   3,39, en dessous du seuil de lisibilité, alors que le charbon
   donne 4,95. Un bouton dont on ne lit pas le libellé ne sert à
   rien, et c'est le bouton de commande.
   ═══════════════════════════════════════════════════════════════ */
:root{--orange-txt:#EA6020;--orange-lisible:#EA6020}
.cta,.chiffres .btn,.offre .btn,.abo-btn,.ga-txt .btn,.faq-cta .btn,
.ct-card .btn,.ct-form .btn,.final .btn,.cloture-v3 .btn,.sticky .btn,.haut{
  background:var(--orange);color:var(--charbon)}
.cta:hover,.chiffres .btn:hover,.offre .btn:hover,.ga-txt .btn:hover,
.faq-cta .btn:hover,.ct-card .btn:hover,.ct-form .btn:hover,
.cloture-v3 .btn:hover,.sticky .btn:hover{background:var(--charbon);color:var(--creme)}
.final .btn{color:var(--charbon)!important}
.haut{color:var(--charbon)}
.haut:hover{background:var(--charbon);color:var(--creme)}
/* La bande du CTA reste sur l'orange de marque, texte blanc : sur un
   aplat de cette taille le blanc tient, c'est un titre, pas un
   libellé de 12 px. */
.cta-bloc,.split--cta{background:var(--orange)}
.cta-achat .btn{background:var(--creme);color:var(--charbon)}

/* ── Le pack artisan remplace le carton générique ────────────────
   La boîte montre « PACK ARTISAN x 30 housses » : elle dit ce
   qu'on achète, l'ancienne ne le disait pas. Elle sert aux deux
   endroits où le carton est en jeu, le CTA et les tarifs. */
.cta-achat img{max-width:420px}
.tarifs-sec .carte-gris{background:none}
.tarifs-sec .carte-gris img{aspect-ratio:auto!important;object-fit:contain;
  mix-blend-mode:normal;padding:0;max-width:440px;margin-inline:auto}

/* ── « Satisfait ou remboursé » est un mot-clé ───────────────────
   Il finissait une phrase de note. Il descend sous le bouton, avec
   son picto, là où on le cherche au moment de décider. */
.sous-btn,.cl-rassure{display:flex;align-items:center;gap:10px;
  font-size:var(--t2);font-weight:600;margin-top:16px}
.sous-btn{color:var(--txt-inv)}
.sous-btn .pic-s,.cl-rassure .pic-s{width:20px;height:20px;color:var(--orange);flex:none}
.cl-rassure{color:var(--txt-inv)}

/* ── Le corps des accordéons remonte de deux points ──────────────
   15 px pour un texte qu'on ouvre exprès pour le lire, c'était
   moins que le corps courant de la page. */
.acc-c p,.faq .acc-c p{font-size:17px;line-height:1.6}

/* ── RSE : la section prend sa place ─────────────────────────────
   Pictos de 32, titre au pas d4, texte au corps courant, et les
   colonnes se répartissent toute la largeur : le texte s'arrêtait
   à 62 caractères et laissait un quart de page vide à droite. */
.rse-sec .pc.rse{grid-template-columns:56px 30% minmax(0,1fr);
  gap:clamp(22px,3vw,44px);padding:30px 0}
.rse-sec .pc.rse .ico{width:42px;height:42px;margin-top:0}
.rse-sec .pc.rse .ico svg{stroke-width:1.2}
.rse-sec .pc.rse h4{font-size:var(--d4);line-height:1.15;letter-spacing:-.02em}
.rse-sec .pc.rse p{font-size:var(--t1)!important;line-height:1.55;max-width:none}
@media(max-width:900px){
  .rse-sec .pc.rse{grid-template-columns:42px minmax(0,1fr)}
  .rse-sec .pc.rse p{grid-column:2}
}

/* ── L'abonnement devient un bandeau ─────────────────────────────
   Il tenait dans une colonne de droite, sous un packshot. C'est la
   seule autre offre de la page : elle prend toute la largeur, en
   charbon, avec son prix bloqué en regard. */
.abo-bandeau{margin-top:clamp(48px,5vw,80px)}
/* Le bandeau se lit dans l'ordre : ce que c'est, combien, on y va.
   En grille automatique les cinq enfants se rangeaient n'importe
   comment et le titre partait à droite du prix. */
.abo-bandeau .abo{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"tag texte" "titre texte" "prix bouton";
  gap:6px clamp(32px,5vw,80px);align-items:start;margin:0;
  padding:clamp(34px,4vw,56px) clamp(32px,4vw,64px)}
.abo-bandeau .abo-tag{grid-area:tag}
.abo-bandeau .abo-t{grid-area:titre}
.abo-bandeau .abo-prix{grid-area:prix;align-self:end}
.abo-bandeau .abo-p{grid-area:texte}
.abo-bandeau .abo-btn{grid-area:bouton;align-self:end;justify-self:start}
.abo-bandeau .abo-t{font-size:var(--d3);max-width:24ch;margin-top:14px}
.abo-bandeau .abo-prix{margin-top:clamp(20px,2.4vw,32px)}
.abo-bandeau .abo-prix b{font-size:var(--d2)}
.abo-bandeau .abo-p{margin:0;max-width:46ch;font-size:var(--t1)}
.abo-bandeau .abo-btn{margin:0;white-space:nowrap}
@media(max-width:820px){
  .abo-bandeau .abo{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ── Détails de taille relevés par Romain ────────────────────────*/
.cl-coords{font-size:var(--t2);margin-top:22px}
.cl-coords a{color:var(--orange)}
.ga-ico{width:clamp(78px,8vw,110px);height:clamp(78px,8vw,110px)}
.pr-fsc{height:clamp(44px,4.4vw,58px);width:auto}
.pr-bloc .pr-fsc-txt{max-width:none;font-size:var(--t2);margin-top:0}
.pr-grid .pr-bloc:first-child{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px)}
.ct-note em{font-style:italic;font-size:var(--t2);color:var(--gris)}

@media(max-width:820px){
  .abo-bandeau .abo{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tag" "titre" "prix" "texte" "bouton";gap:14px}
  .abo-bandeau .abo-btn{margin-top:12px}
}

/* ── Presse : le papier s'éclaircit, la page s'ouvre ─────────────
   Le blanc cassé était trop proche du crème : avec le filet qui
   ferme la section au-dessus, on ne distinguait plus les deux
   fonds. Il remonte près du blanc, juste assez teinté pour rester
   du papier.

   Et la page de magazine se clique : c'est le plus gros élément de
   la section, il montrait un article sans dire qu'on pouvait le
   lire. */
.split--presse .split-img{background:#FDFBF7}
.presse-vue{border:0;cursor:pointer;position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(32px,4vw,64px);transition:background .2s}
.presse-vue:hover{background:#fff}
.presse-vue:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
.presse-vue img{transition:transform .25s}
.presse-vue:hover img{transform:scale(1.015)}
.presse-lire{position:absolute;left:clamp(32px,4vw,64px);bottom:clamp(26px,3vw,44px);
  display:inline-flex;align-items:center;gap:9px;font-size:var(--t3);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.presse-vue:hover .presse-lire,.presse-vue:focus-visible .presse-lire{opacity:1;transform:none}
.presse-lire .pic-s{width:15px;height:15px;color:var(--orange);flex:none}
@media(prefers-reduced-motion:reduce){
  .presse-vue img,.presse-lire{transition:none}
  .presse-lire{opacity:1;transform:none}
}
/* La classe .parution sert à brancher l'ouverture de la parution ;
   elle traîne aussi un rayon de 999 px de l'ancienne feuille, qui
   transformait la page de magazine en pastille. */
.presse-vue{border-radius:0;background:#FDFBF7;overflow:hidden}
.presse-vue,.presse-vue:hover{box-shadow:none;transform:none}
.split--presse .split-img.presse-vue{align-items:center;justify-content:center}

/* ── Les moyens de paiement, là où le doute se lève ──────────────
   Un boulanger qui n'a jamais commandé sur ce site hésite au
   moment de sortir sa carte, pas avant. Les marques bancaires se
   posent donc sous le bouton, dans la bande d'achat et dans la
   carte « pour commander ».

   Le visuel d'origine portait « PAIEMENT SÉCURISÉ » incrusté dans
   l'image, avec le cadenas. La règle de la page est que ce qui se
   lit est de la typographie : le libellé est composé en Switzer
   avec le picto bouclier, et l'image ne garde que les marques, que
   personne ne peut composer autrement. */
.paiement{margin-top:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;
  gap:12px;align-items:flex-start}
.paiement-lab{display:flex;align-items:center;gap:10px;font-size:var(--t3);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.paiement-lab .pic-s{width:17px;height:17px;color:var(--orange);flex:none}
.paiement img,.paiement-marques{height:clamp(17px,1.5vw,20px);width:auto;
  opacity:1;display:block}
.paiement-marques{margin-top:18px;opacity:.9}
.ct-card .paiement{margin-top:18px}
@media(max-width:640px){
  .paiement img,.paiement-marques{height:17px}
}

/* Sur la bande orange, les marques sont des objets sombres sur un
   aplat vif : elles gardent leur pleine densité. */
.cta-bloc .paiement-marques{opacity:1;margin-top:18px;height:clamp(16px,1.4vw,19px)}

/* ── L'ombre sort de l'image ─────────────────────────────────────
   Elle était cuite dans le PNG : impossible à régler section par
   section, et elle vieillit avec le fichier. Le navigateur la
   calcule maintenant sur la silhouette du carton, à la demande, et
   sans palier quelle que soit la taille d'affichage.

   Deux valeurs, une par fond : brun chaud sur l'orange, charbon
   atténué sur le crème. */
@media(max-width:640px){
}



/* ── L'ombre est dans l'image, elle y reste ──────────────────────
   Le fichier fourni porte sa propre ombre, calée sur l'éclairage de
   son rendu. J'en avais ajouté une en CSS par-dessus une version
   que j'avais détourée moi-même : deux ombres, aucune à sa place.
   Le packshot est repris tel qu'il est livré, on n'y touche pas. */
.cta-achat img,.tarifs-sec .carte-gris img{filter:none}

/* ── Corrections du 28/09 ────────────────────────────────────────

   Le survol du bouton passait au charbon. Sur une section charbon,
   il disparaissait purement et simplement : on ne savait plus où
   était le bouton au moment de cliquer. Il s'éclaircit au lieu de
   s'assombrir, ce qui marche sur les deux fonds. */
.cta:hover,.chiffres .btn:hover,.offre .btn:hover,.ga-txt .btn:hover,
.faq-cta .btn:hover,.ct-card .btn:hover,.ct-form .btn:hover,
.cloture-v3 .btn:hover,.sticky .btn:hover{
  background:#F5A06A;color:var(--charbon)}
.haut:hover{background:#F5A06A;color:var(--charbon)}

/* Les anciens prix se barrent, dans les deux sections d'offre. */
.of-note s,.cl-carton s{text-decoration:line-through;
  text-decoration-thickness:1px;color:var(--txt-inv-attenue)}

/* La phrase de synthèse tient ses deux temps sur deux lignes. */
.chiffres .ex{max-width:42ch}
.chiffres .ex br{display:block}

/* ── Preuves : le FSC entier, et une seule ligne ─────────────────
   J'avais rogné le logo sur sa marque seule pour qu'il reste net à
   petite taille. Il doit être entier : il reprend sa hauteur pour
   que « forests for all forever » se lise.

   Et la certification et les revendeurs disaient la même chose au
   même moment sur deux blocs séparés. Une seule rangée : la preuve
   à gauche, où trouver la housse à droite, sur la même ligne. */
.preuves .pr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.4vw,72px);align-items:center}
.pr-fsc{height:clamp(52px,5.4vw,72px);width:auto;flex:none}
.pr-grid .pr-bloc:first-child{display:flex;align-items:center;
  gap:clamp(18px,2.4vw,30px)}
.pr-bloc .pr-fsc-txt{max-width:30ch;font-size:var(--t2);margin-top:0}
.pr-bloc h4{font-size:var(--t1);margin-bottom:6px}
.pr-bloc p{font-size:var(--t2)}
.pr-logos{margin-top:16px}
@media(max-width:820px){
  .preuves .pr-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}

/* La règle du packshot, .cta-achat img { width:100% }, attrapait
   aussi la bande des moyens de paiement, qui vit dans le même bloc :
   elle était étirée à la largeur de la colonne, d'où la Carte Bleue
   coupée. Chacun son sélecteur. */
.cta-achat>img{max-width:420px;width:100%}
.cta-achat .paiement-marques,.paiement-marques,.paiement img{
  width:auto!important;max-width:none;flex:none;align-self:flex-start;
  object-fit:contain;aspect-ratio:1081/140}
/* Le fichier FSC fourni fait 286 px de large. Entier, il ne supporte
   pas plus de 46 px de haut : au-delà, « forests for all forever »
   part en bouillie. Un vectoriel demandé à FSC réglerait le plafond.
   La mention tient sur une ligne à côté de lui. */
.pr-fsc{height:clamp(38px,3.6vw,46px)}
.pr-bloc .pr-fsc-txt{max-width:42ch;line-height:1.5}
.pr-grid .pr-bloc:first-child{gap:clamp(16px,2vw,26px)}
/* La phrase de certification fait 58 signes : la colonne de gauche
   lui manquait d'une quinzaine de pixels, elle cassait en deux. */
.preuves .pr-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.pr-bloc .pr-fsc-txt{max-width:none;white-space:nowrap}
@media(max-width:1100px){.pr-bloc .pr-fsc-txt{white-space:normal}}

/* ── La certification se dit, elle ne se montre plus ─────────────
   Le logo FSC est retiré : sa marque est certifiée sous licence et
   doit porter le code du détenteur du certificat, de la forme
   FSC® C000000. Le fichier n'en portait aucun, et aucun fichier
   trouvé ailleurs n'en porterait non plus, puisque ce code est
   propre à Panibag. Un logo de certification sans son code n'est
   pas un usage valide, quelle que soit sa définition.

   La phrase reste, elle dit exactement la même chose. Les deux
   blocs de la section prennent la même forme : un intitulé, une
   phrase, et pour les revendeurs leurs deux marques. */
.preuves .pr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.4vw,72px);align-items:start}
.pr-grid .pr-bloc:first-child{display:block}
.pr-bloc h4{font-size:var(--t1);margin:0 0 10px;font-family:var(--ft);font-weight:800}
.pr-bloc .pr-fsc-txt{max-width:46ch;white-space:normal;font-size:var(--t2);
  color:var(--gris);font-weight:400;margin-top:0}
.pr-bloc p{font-size:var(--t2);color:var(--gris)}

/* En retirant les conteneurs laissés par les blocs d'attente, l'image
   des dépliants a perdu son cadre : elle s'étirait sur toute la
   hauteur de la ligne au lieu de tenir son rapport. Elle le reprend,
   et se cale en haut comme le texte d'en face. */
.acc-c img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;align-self:start}
.acc-c{align-items:start}

/* ═══════════════════════════════════════════════════════════════
   LE SCHÉMA D'USAGE

   Un dessin à la main qui dit en trois temps ce que la page met
   quinze sections à expliquer : la housse se pose dans la manne,
   le pain se charge dedans, la manne roule au sol. Il vient après
   la description produit, avant la vidéo : on comprend, puis on
   regarde.

   Il fait 3,37 de rapport, presque une frise. Sur une page dont
   tout le reste tient en colonnes, il prend la largeur entière et
   le fond alterné : c'est le seul objet de ce genre, il a le droit
   d'être traité comme tel.

   Ses annotations sont manuscrites et fines. Sous 900 px, le
   schéma cesse de rétrécir et défile horizontalement dans son
   propre cadre : mieux vaut un geste que du texte illisible.
   ═══════════════════════════════════════════════════════════════ */
.schema{background:var(--creme-clair)}
.schema h2{max-width:26ch;margin-bottom:clamp(36px,4.4vw,64px)}
.schema-vue{margin:0}
.schema-vue img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.schema-vue figcaption{display:none;font-size:var(--t3);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:16px}
@media(max-width:900px){
  .schema-vue{overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding-bottom:6px}
  .schema-vue img{width:auto;height:clamp(220px,46vw,300px);max-width:none}
  .schema-vue figcaption{display:block}
}
@media(prefers-contrast:more){.schema-vue img{mix-blend-mode:normal}}

/* Un filet ferme le schéma et ouvre la vidéo : les deux sections
   partagent le même fond alterné, et sans lui elles se lisaient
   comme un seul bloc de deux écrans. */
.video-sec{border-top:1px solid var(--filet)}

/* ── Le survol du bouton de la bande orange ──────────────────────
   Il passait du crème au crème atténué : l'écart ne se voyait pas
   sur un aplat aussi vif. Il s'inverse franchement, fond charbon et
   libellé crème. Sur l'orange, c'est le contraste le plus net
   disponible, et il dit sans ambiguïté que le bouton répond. */
.cta-achat .btn{transition:background .18s,color .18s}
.cta-achat .btn:hover,.cta-achat .btn:focus-visible{
  background:var(--charbon);color:var(--creme)}
/* Trois règles de survol se superposaient sur ce bouton, une par
   passe. Celle-ci est désormais la seule. */
.cta-achat .btn:focus-visible{outline:2px solid var(--creme);outline-offset:3px}

/* ── Témoignages : en pile sous 900 px ───────────────────────────
   Le carrousel demande un geste de plus sur un écran qu'on fait
   déjà défiler du pouce. Les huit témoignages s'empilent et se
   lisent d'affilée, image au-dessus, citation dessous. La
   navigation disparaît, elle n'a plus d'objet. */
@media(max-width:900px){
  .tm-scene{display:grid;gap:clamp(40px,8vw,72px)}
  .tm[hidden]{display:grid}
  .tm{grid-template-columns:minmax(0,1fr);gap:22px}
  .tm-nav{display:none}
  .tm blockquote{max-width:none}
  .tm-vue{aspect-ratio:4/3}
}

/* ═══════════════════════════════════════════════════════════════
   PASSE 29/09 — huit retours de Romain
   Le fil : rendre les sections lisibles d'un seul écran, et remettre
   au travail des éléments que la refonte avait mis de côté.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Les témoignages redeviennent un bandeau ──────────────────
   Le carrousel montrait une citation à la fois : on ne voyait pas
   qu'il y en avait huit. Le bandeau les montre toutes, il porte le
   nombre autant que le propos. La photo reste, en vignette. */
.temoins{background:var(--creme-clair);
  padding:clamp(52px,6vw,88px) 0 clamp(56px,6.4vw,92px)}
.temoins .kicker{margin-bottom:clamp(26px,3vw,40px)}
.tmo-cadre{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tmo-cadre:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.tmo-piste{display:flex;width:max-content;gap:clamp(16px,1.6vw,24px);
  animation:tmo-defile 72s linear infinite}
.tmo-cadre:hover .tmo-piste,.tmo-cadre:focus-within .tmo-piste{animation-play-state:paused}
@keyframes tmo-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tmo{flex:0 0 clamp(300px,25vw,348px);margin:0;display:grid;
  grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:start;
  background:var(--creme);border:1px solid var(--filet);padding:22px 24px}
.tmo-vue{width:76px;height:76px;object-fit:cover;display:block;align-self:start}
.tmo-g{width:22px;height:22px;color:var(--orange);fill:currentColor;stroke:none;display:block}
.tmo blockquote{margin:10px 0 0;font-family:var(--ft);font-weight:700;
  font-size:16.5px;line-height:1.35;letter-spacing:-.015em;color:var(--txt)}
.tmo figcaption{margin-top:12px;font-size:var(--t3);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);line-height:1.4}
@media(prefers-reduced-motion:reduce){
  .tmo-piste{animation:none}
  .tmo-cadre{overflow-x:auto;overscroll-behavior-x:contain}
}

/* ── 2. La bande orange perd de la hauteur ───────────────────────
   Le packshot occupait un écran à lui seul pour une information
   qui tient en un prix et un bouton. */
.cta-bloc{padding:clamp(40px,4.2vw,64px) 0}
.cta-bloc .cta-in{align-items:center;gap:clamp(28px,3.4vw,56px)}
.cta-achat>img{max-width:260px;margin-bottom:clamp(14px,1.6vw,20px)}
.cta-bloc .cb-t{margin-bottom:clamp(10px,1.2vw,16px)}
.cta-bloc .cb-p{margin-bottom:clamp(12px,1.4vw,18px)}
.cta-bloc .cta-cles{margin-top:clamp(12px,1.4vw,18px)}

/* ── 3. Compatibilité : les six vignettes reviennent ─────────────
   Elles disaient en images ce que les six entrées disent en mots.
   Les avoir masquées privait la section de sa preuve visuelle.
   Le packshot rend en échange un tiers de sa largeur. */
.tech-sec .duo-tech{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  align-items:start}
.duo-tech .carte-gris img{min-height:0;aspect-ratio:4/5;object-fit:cover}
.tech-sec .bande-tuiles{display:flex;flex-wrap:wrap;
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(34px,3.6vw,54px);max-width:none}
/* Les fichiers sources font 150 px de côté : au-delà, le lettrage
   qu'ils portent se délite. On les affiche à leur taille native. */
.tech-sec .bande-tuiles img{width:150px;height:150px;flex:none;
  object-fit:cover;display:block;border-radius:0}
/* Six vignettes de 150 px dans un cadre de 1 200 : massées à gauche,
   elles laissaient un quart de la bande vide. Elles se répartissent
   maintenant d'un bord à l'autre, séparées d'un écart égal. */
.tech-sec .bande-tuiles{justify-content:space-between;
  gap:clamp(10px,1.2vw,16px) 0}
@media(max-width:820px){
  .tech-sec .bande-tuiles{justify-content:center;gap:clamp(10px,2.4vw,18px)}
}

/* ── 4. Les chiffres tiennent sur un écran, CTA compris ──────────
   Quatre lignes de 130 px et une offre en pied : il fallait deux
   écrans pour un bloc qui se lit d'un coup d'œil. */
.chiffres{padding-block:clamp(38px,3.8vw,56px)}
.chiffres h2{margin-bottom:clamp(20px,2.2vw,32px)}
.ch{padding:clamp(11px,1.2vw,17px) 0}
.ch .n{font-size:clamp(36px,4.1vw,56px)}
.ch:last-child .n{font-size:clamp(30px,3.4vw,44px)}
.ch .desc{font-size:14px;line-height:1.5}
.chiffres .trait{margin-bottom:clamp(16px,2vw,26px)}

/* ── 5. Pour qui : l'exergue en orange, la section en un écran ───
   La photo en 3/4 mangeait la moitié de la hauteur pour un rôle
   d'illustration. En 4/3 elle tient son rôle et rend la place. */
/* Une règle « un seul orange » posée plus haut neutralise .or avec
   !important. L'exergue de cette section est une exception voulue,
   elle doit passer par la même porte. */
.pourqui h2 .or{color:var(--orange)!important}
.pourqui{padding-block:clamp(44px,4.6vw,68px)}
.pourqui .intro{margin-bottom:clamp(26px,3vw,40px)}
.cartes.g4b .pc-bg{aspect-ratio:3/2}
.cartes.g4b{gap:clamp(24px,2.6vw,40px)}
.cartes.g4b .ico{width:36px;height:36px;margin-top:18px}
.cartes.g4b h4{margin-top:12px;font-size:var(--d4)}
.cartes.g4b .pq-sub{min-height:0;margin-top:5px!important}
.cartes.g4b p{margin-top:8px;font-size:14px!important;line-height:1.5}

/* ── 6. Cas d'usage : plus d'accordéon ───────────────────────────
   Cinq situations dont on ne lisait qu'une. Elles se lisent toutes,
   en rang numéroté : l'ordre porte le parcours, du fournil au
   réseau. La vignette tient la gauche, le texte court sur deux
   colonnes pour ne pas allonger la page. */
.cas-liste{display:grid;gap:clamp(28px,3vw,46px);margin-top:clamp(24px,2.6vw,38px)}
.cas-item{display:grid;grid-template-columns:220px minmax(0,1fr);
  gap:clamp(22px,2.6vw,40px);align-items:start;
  padding-top:clamp(24px,2.6vw,38px);border-top:1px solid var(--filet)}
.cas-item:first-child{border-top:0;padding-top:0}
.cas-item>img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cas-tete-l{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.cas-num{font-size:var(--t3);letter-spacing:.14em;color:var(--gris);
  font-family:var(--fc);flex:none}
.cas-item h3{font-family:var(--ft);font-weight:800;font-size:var(--d4);
  line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--txt)}
.cas-item .cas-txt{columns:2;column-gap:clamp(24px,2.6vw,44px)}
.cas-item .cas-txt p{font-size:14.5px;line-height:1.6;color:var(--gris);
  margin:0;break-inside:avoid}
.cas-item .cas-txt p+p{margin-top:12px}
.cas-item .pic-s{width:22px;height:22px;flex:none;align-self:center}

/* ── 7. RSE : les visages reviennent ─────────────────────────────
   C'est la section qui parle des gens, et c'était la seule sans
   personne dedans. Les cinq photos existaient déjà, masquées. Elle
   reprend la carte de « Pour qui ? », dont elle partage le propos :
   à qui ça sert, et ce que ça change pour lui. */
.rse-sec .cartes.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,46px);max-width:none;margin-top:clamp(26px,3vw,42px)}
.rse-sec .pc.rse{display:flex;flex-direction:column;padding:0;background:none}
.rse-sec .pc.rse .pc-bg{display:block;order:-1;position:relative;inset:auto;
  aspect-ratio:16/9;overflow:hidden}
.rse-sec .pc.rse .pc-bg img{width:100%;height:100%;object-fit:cover}
.rse-sec .pc.rse .ico{width:36px;height:36px;margin:18px 0 0}
.rse-sec .pc.rse h4{font-size:var(--d4);line-height:1.15;letter-spacing:-.02em;
  margin-top:12px;min-height:0;display:block}
.rse-sec .pc.rse p{font-size:14px!important;line-height:1.55;margin-top:8px;
  max-width:none;color:var(--gris)!important}
.rse-sec .pc.rse .sep{display:none}

/* ── 8. Tarifs : le bouton dans un encadré ───────────────────────
   Le prix, le bouton et la réassurance se tenaient au milieu d'une
   colonne de texte. Encadrés, ils forment le bloc d'achat. Les cinq
   points forts passent dessous, au corps d'une liste. */
.tarifs-sec .offre-achat{border:1px solid var(--filet);background:var(--creme-clair);
  padding:clamp(22px,2.4vw,32px);margin-top:clamp(18px,2vw,26px)}
.tarifs-sec .offre-achat .btn{width:100%;text-align:center;margin-top:16px}
.tarifs-sec .offre-achat .paiement{margin-top:16px}
.tarifs-sec .offre-l{margin-top:clamp(20px,2.2vw,30px)}
.tarifs-sec .offre-l li{gap:10px;align-items:flex-start}
.tarifs-sec .offre-l p{font-size:13.5px!important;line-height:1.5}
.tarifs-sec .offre-l .pic-s{width:16px;height:16px;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   PASSE RESPONSIVE — 28/09/2026
   Retour de Romain sur l'affichage mobile. Plusieurs blocs plus bas
   dans ce fichier redéclaraient leur grille hors media query et
   écrasaient l'empilement posé plus haut : d'où les colonnes de
   trois caractères de large. Ce morceau ferme la cascade. Il est
   le dernier du fichier, il doit le rester.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* 1 — L'enseigne. Elle tenait le tiers de la largeur, elle en
     prend la moitié : c'est la première chose qu'on voit. */
  header .brand img{height:73px}

  /* 2 — La bande des trois atouts. Elle passait en petit corps sur
     un fond charbon : les chiffres ne portaient plus. Marge de
     gauche élargie, picto et chiffre au double. */
  .atouts{padding:clamp(34px,5vh,52px) 0 clamp(46px,6vh,74px)}
  .atouts .wr{padding-inline:28px}
  .atout .pic{width:38px;height:38px}
  .atout-n{font-size:clamp(32px,8.6vw,42px);margin-top:16px;min-height:0}
  .atout-l{font-size:14.5px;line-height:1.5;margin-top:7px}
  .atout+.atout{margin-top:26px;padding-top:26px}

  /* 4 — La légende du schéma tient sur une ligne. */
  .schema-vue figcaption{font-size:11px;letter-spacing:.1em;white-space:nowrap}

  /* 5 — La vidéo du geste. Elle était recadrée en cover : le titre
     incrusté sortait du champ. Elle se montre entière. */
  .split-video video{min-height:0;height:auto;aspect-ratio:16/9;object-fit:contain}

  /* 6 — Les parutions. Ce sont des boutons : le bleu système les
     rattrapait au toucher. */
  .ligne.parution,.ligne-t,.ligne-d{color:inherit}
  .ligne-lire{color:var(--orange)}
  .parution,.presse-vue{-webkit-tap-highlight-color:rgba(234,96,32,.18)}

  /* 7 et 11 — Les quatre gains et les quatre profils, une carte par
     ligne. Les hauteurs minimales d'alignement n'ont plus d'objet. */
  .cartes.g4,.cartes.g4b{grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(36px,7vw,56px)}
  .cartes.g4 .pc-lab,.cartes.g4 h4,.cartes.g4b h4,
  .cartes.g4b .pq-sub,.pc h4,.pc-lab,.pc.rse h4{min-height:0}
  .cartes.g4 .pc-bg,.cartes.g4b .pc-bg{aspect-ratio:3/2}

  /* 8 — Les vidéos, les unes au-dessus des autres, pleine largeur. */
  .videos .vgrid,.vgrid,.v-longs{grid-template-columns:minmax(0,1fr)!important}

  /* 9 — Compatibilité & technique. L'image et les six entrées
     tenaient chacune une demi-largeur de 390 px. */
  .duo-tech,.tech-liste{grid-template-columns:minmax(0,1fr)!important}
  .duo-tech .carte-gris{display:block;height:auto}
  .duo-tech .carte-gris img{width:100%;height:auto;min-height:0;aspect-ratio:4/3;
    object-fit:cover}
  .tech-liste{gap:26px}
  .tl{grid-template-columns:34px minmax(0,1fr)}

  /* 10 — Les chiffres. Le libellé se posait sur le nombre. */
  .grid5{display:block!important}
  .ch{grid-template-columns:minmax(0,1fr)!important;gap:0;padding:26px 0}
  .ch .n{font-size:clamp(46px,12vw,64px);line-height:1;margin:0}
  .ch:last-child .n{font-size:clamp(34px,9vw,46px)}
  .ch .lib{margin-top:10px;font-size:16px;line-height:1.25}
  .ch .desc{max-width:none;margin-top:10px}

  /* 12 — Les cas d'usage. L'intitulé et le numéro se partageaient
     la ligne en deux colonnes étroites. */
  .cas-corps .acc summary{grid-template-columns:26px minmax(0,1fr) auto;gap:12px}
  .cas-corps .acc summary .pic-s{width:24px;height:24px}
  .cas-corps .acc-t{display:block;font-size:var(--t1);line-height:1.3}
  .cas-corps .acc:not(.acc-faq) .acc-t::before{display:block;margin-bottom:4px}
  /* Le corps dépliant gardait ses deux colonnes : la photo prenait
     320 px sur 390, le texte tombait en colonne d'un mot. */
  .acc-c{grid-template-columns:minmax(0,1fr)!important;gap:20px}
  .acc:not(.acc-faq) .acc-c{padding-left:0}
  .acc-c>div{max-width:none}

  /* 14 — L'abonnement. Le signe euro passait à la ligne. */
  .abo-prix{flex-wrap:wrap}
  .abo-prix b{white-space:nowrap}

  /* 15 — L'essai sans risque. Tout se cale à gauche, sur un seul axe. */
  .ga-txt{align-items:flex-start}
  .ga-txt h2,.ga-lead,.ga-txt p{text-align:left;margin-inline:0;max-width:none}
  .ga-quoi{grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:start;gap:16px 20px}
  .ga-quoi li{white-space:normal;font-size:var(--d4)}
  .ga-cond{grid-template-columns:minmax(0,1fr)!important;text-align:left;
    justify-items:start;gap:20px;max-width:none;margin-inline:0}
  .ga-cond dd{max-width:none}
  .ga-txt .btn{align-self:stretch;text-align:center}

  /* 17 — La clôture. Le prix barré tombait seul sur sa ligne. */
  .cl-offre .of-prix{flex-wrap:wrap;row-gap:4px}
  .cl-offre .of-prix b{font-size:clamp(40px,11vw,54px);white-space:nowrap}
  .cl-offre .of-prix span,.cl-offre .of-prix s{font-size:var(--t1)}
  .cl-carton s,.of-note s{white-space:nowrap}

  /* 18 et 19 — La matière et les revendeurs, un bloc par ligne, et
     les deux enseignes au corps où on les lit. */
  .preuves .pr-grid,.pr-grid{grid-template-columns:minmax(0,1fr)!important;gap:36px}
  .pr-grid .pr-bloc:first-child{display:block}
  .pr-bloc .pr-fsc-txt{max-width:none;white-space:normal;margin-top:10px}
  /* Les deux blocs refaits le 29/09 gardent leur grille de bureau :
     le rang des cas d'usage et les trois colonnes RSE. */
  .cas-item{grid-template-columns:minmax(0,1fr);gap:16px;
    padding-top:clamp(22px,5vw,32px)}
  .cas-item>img{aspect-ratio:16/9}
  .cas-item .cas-txt{columns:1}
  .cas-item h3{font-size:var(--t1)}
  .rse-sec .cartes.g3{grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(32px,6vw,44px)}
  .rse-sec .pc.rse .pc-bg{aspect-ratio:16/9}

  .pr-logos{gap:26px;flex-wrap:wrap;align-items:flex-start}
  .pr-logos a{max-width:100%}
  .pr-logos img{height:auto;width:auto;max-height:56px;max-width:100%;
    object-fit:contain}
}

/* ═══════════════════════════════════════════════════════════════
   V3.4, 28/09/2026 — retour de Romain, sept points.

   Rien du système ne bouge : mêmes couleurs, mêmes polices, mêmes
   composants. Ce qui change, c'est ce que les composants portent.
   Les images générées qui montraient des mannes aux mauvaises
   proportions sont sorties ; une image qui ne montre pas le produit
   ne rassure pas, elle trompe. Et deux bandeaux qui demandaient un
   clic pour se lire défilent maintenant tout seuls.
   ═══════════════════════════════════════════════════════════════ */

/* ── Témoignages : la vraie housse, puis les citations ───────────
   Le split reprend le composant existant. La vignette par citation
   disparaît, la carte revient à une colonne. */
/* La photo faisait 560 px de côté affichés sur 720 : elle prenait un
   écran entier pour rendre flou. Elle revient à sa taille, dans la
   colonne de texte. */
.tmo-intro{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(28px,3.4vw,56px);align-items:center;
  margin-bottom:clamp(36px,4vw,60px)}
.tmo-photo{margin:0}
.tmo-photo img{width:100%;max-width:300px;height:auto;display:block}
.temoins .tmo-mot h2{margin-top:10px}
.tmo-p{margin-top:14px;font-size:var(--t1);line-height:1.55;color:var(--gris);max-width:52ch}
/* La vignette se cale au centre de la carte, la signature au fond.
   Les cartes s'étirent à la même hauteur, donc les huit noms tombent
   sur la même ligne : c'est ce qui rend le bandeau lisible d'un coup.
   Et il ne s'arrête plus sous la souris : un bandeau qui se fige au
   passage donne l'impression d'être cassé. */
.temoins .tmo-piste{align-items:stretch}
/* La vignette reprend sa place : la carte s'élargit d'autant, sinon
   la citation se casse en colonne de trois mots. */
.temoins .tmo{flex:0 0 clamp(332px,29vw,412px);
  grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:stretch}
.temoins .tmo-vue{width:84px;height:84px;align-self:center}
.temoins .tmo-dit{display:flex;flex-direction:column;height:100%}
.temoins .tmo blockquote{margin-top:12px}
.temoins .tmo figcaption{margin-top:auto;padding-top:16px}
.temoins .tmo-cadre:hover .tmo-piste{animation-play-state:running}
.temoins .tmo-cadre:focus-within .tmo-piste{animation-play-state:paused}

/* ── Parutions : les quatre titres passent en continu ────────────
   Même piste que les témoignages, même durée d'appui, même pause
   au survol. La phrase de chaque journal se lit sans rien ouvrir. */
.parutions{padding:clamp(56px,6vw,88px) 0 clamp(52px,5.6vw,80px)}
.parutions .sur{color:var(--gris)}
.presse-cadre{margin-top:clamp(30px,3.4vw,48px)}
.presse-piste{animation-duration:56s}
.pr-tuile{flex:0 0 clamp(300px,25vw,352px);display:grid;gap:0;text-align:left;
  background:var(--creme-clair);border:1px solid var(--filet);padding:18px 18px 22px;
  font:inherit;color:inherit;cursor:pointer;overflow:hidden;
  border-radius:0;box-shadow:none;
  transition:border-color .18s,transform .18s}
/* .parution traîne un rayon de 999 px de l'ancienne feuille : il
   transformait la tuile en pastille. */
.pr-tuile.parution{border-radius:0}
.pr-tuile:hover{border-color:var(--orange);transform:none}
.pr-tuile:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* La page de magazine se pose sous un passe‑partout, comme un article
   encadré : un liseré, une marge blanche, et le mot « Parution » en
   tête de cadre. Le scan reste lisible en vignette, le clic l'ouvre. */
.pr-cadre{display:block;position:relative;background:#FDFBF7;
  border:1px solid var(--filet);padding:26px 12px 12px;margin-bottom:18px}
.pr-cadre-lab{position:absolute;top:9px;left:12px;font-family:var(--fc);
  font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris)}
.pr-tuile-vue{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;
  display:block}
.pr-tuile-m{display:block;font-family:var(--ft);font-weight:800;
  font-size:19px;letter-spacing:-.015em;color:var(--charbon)}
.pr-tuile-d{display:block;margin-top:6px;font-size:var(--t3);
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.pr-tuile-p{display:block;margin-top:14px;font-size:15px;
  line-height:1.5;color:var(--gris)}
.pr-tuile-lire{display:flex;align-items:center;gap:8px;margin-top:16px;
  font-size:var(--t3);letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-lisible)}
.pr-tuile-lire .pic-s{width:14px;height:14px;flex:none}
.parutions .pr-aide{margin-top:clamp(24px,2.6vw,36px);font-size:12.5px;color:var(--gris)}

/* ── Cartes sans fond : le picto tient la place de l'image ───────
   Un filet en tête remplace la photo, la carte garde sa hauteur de
   colonne et la grille ne se déforme pas. */
.pc-nu{border-top:1px solid var(--filet);padding-top:0}
.pc-nu .ico{margin-top:22px}

/* ── Cas d'usage : une colonne, le numéro porte le repère ────────*/
/* Sans la photo, l'article gardait une colonne de 220 px vide et le
   texte se coupait en deux au milieu de la page. Le titre numéroté
   reprend la colonne de gauche, le propos tient la droite d'un seul
   tenant. */
.cas-item--nu{grid-template-columns:minmax(0,1fr)}
.cas-item--nu>div{display:grid;
  grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);
  gap:clamp(24px,3vw,56px);align-items:start}
.cas-item--nu .cas-tete-l{margin-bottom:0;align-items:flex-start}
.cas-item--nu .cas-num{margin-top:5px}
.cas-item--nu .pic-s{align-self:flex-start;margin-top:1px}
.cas-item--nu .cas-txt{columns:1}
@media(max-width:820px){
  .cas-item--nu>div{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ── Le bandeau quantité, jumeau du bandeau abonnement ───────────*/
/* Jumelle de la carte d'abonnement, montée à l'envers : l'appel à
   gauche, la mention de l'offre à droite. Fond crème contre le
   charbon de l'abonnement, pour qu'on voie deux choses distinctes. */
.volume-bandeau{margin-top:clamp(18px,2vw,28px)}
.volume{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:start;
  background:var(--creme-clair);border:1px solid var(--filet);
  padding:clamp(34px,4vw,56px) clamp(32px,4vw,64px)}
.volume-t{font-family:var(--ft);font-weight:800;font-size:var(--d3);
  letter-spacing:-.022em;color:var(--charbon);margin:0;max-width:24ch}
.volume-p{margin:14px 0 0;font-size:var(--t1);line-height:1.55;
  color:var(--gris);max-width:46ch}
.volume-txt .volume-btn{margin-top:clamp(20px,2.4vw,32px)}
.volume-tag{display:inline-block;font-family:var(--fc);font-weight:700;
  font-size:var(--t3);letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-lisible)}
.volume-c{margin:14px 0 0;font-size:var(--t1);line-height:1.55;color:var(--gris)}
.volume-btn{display:inline-block;white-space:nowrap;border-radius:0;
  font-family:var(--fc);font-weight:700;font-size:var(--t3);
  letter-spacing:.14em;text-transform:uppercase;padding:15px 26px}

@media(max-width:900px){
  .temoins .split{margin-bottom:clamp(28px,5vw,44px)}
  .pr-tuile{flex:0 0 min(78vw,320px)}
  .volume{grid-template-columns:minmax(0,1fr);gap:22px;text-align:left}
  .tmo-intro{grid-template-columns:minmax(0,1fr);gap:20px}
  .tmo-photo img{max-width:220px}
}

/* ═══════════════════════════════════════════════════════════════
   REPRISE DU 28/09 AU SOIR — la base est la version de Romain,
   on y remet ce qui avait été validé de notre côté, plus ses
   nouveaux retours. Ce morceau est le dernier du fichier et doit
   le rester : plusieurs blocs plus haut redéclarent leurs grilles
   hors media query, seule la position finale les couvre.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Le cartouche du hero, avec son liseré ────────────────────
   Un pixel, couleur filet, comme chaque encadré du site. Et les
   conditions d'achat repassent sous la description du produit :
   une mention de pied ne se lit pas plus gros que le texte qu'elle
   sert. Vrai ici comme dans les deux autres blocs d'achat. */
.encart{border:1px solid var(--filet)}
.encart-rassure li,.cta-rassure li,.cta-cles li{font-size:12px!important;
  line-height:1.4}
.encart-rassure li .pic-s,.cta-rassure li .pic-s,.cta-cles li .pic-s{
  width:14px;height:14px}

/* ── 2. Les témoignages ──────────────────────────────────────────
   La photo de la housse en place reste en tête, le mot à sa droite.
   Le sur-titre descend annoncer le bandeau. Dans les cartes, la
   vignette est un 4/3 debout et la signature s'efface. */
.tmo-sur{margin:clamp(30px,3.4vw,50px) 0 clamp(16px,1.8vw,24px)}
.temoins .tmo{grid-template-columns:96px minmax(0,1fr);gap:18px;
  flex:0 0 clamp(340px,29vw,408px);align-items:stretch}
.temoins .tmo-vue{width:96px;height:128px;aspect-ratio:3/4;
  object-fit:cover;align-self:center}
.temoins .tmo figcaption{font-size:10.5px;letter-spacing:.09em;
  line-height:1.35}

/* ── 3. Le geste en trois temps, un cinquième plus grand ─────────
   Le fichier d'origine fait 2 200 px : la colonne l'affichait à
   1 192, il passe à 1 430. Le « multiply » est ce qui le fait tenir
   dans le crème sans cadre ni aplat blanc, il ne bouge pas. */
.schema-vue img{width:100%;max-width:1430px;mix-blend-mode:multiply}

/* ── 4. La presse ────────────────────────────────────────────────
   L'étiquette « Parution » répétée huit fois sur les vignettes est
   partie : la section s'appelle déjà « ils en ont parlé ». La ligne
   d'aide passe en italique, sans point : c'est une indication de
   lecture, pas une phrase du discours. */
.pr-aide em{font-style:italic}
.pr-aide{font-size:12.5px;color:var(--gris)}

/* ── 5. La bande orange : le carton se rapproche du prix ─────────*/
.cta-achat>img{max-width:260px;margin-bottom:clamp(10px,1.2vw,16px)}

/* ── 6. Les cas d'usage prennent la carte de l'engagement humain ─
   Photo, picto, titre, texte. Même composant, mêmes écarts : le
   picto contre son titre, le titre contre son texte. */
.cas-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,46px);max-width:none;margin-top:clamp(26px,3vw,42px)}
.pc.cas{display:flex;flex-direction:column;padding:0;background:none;gap:0}
.pc.cas .pc-bg{display:block;order:-1;position:relative;inset:auto;
  aspect-ratio:4/3;overflow:hidden}
.pc.cas .pc-bg img{width:100%;height:100%;object-fit:cover}
.pc.cas .ico{width:30px;height:30px;margin:16px 0 0}
.pc.cas .ico svg{width:100%;height:100%;fill:none;stroke:var(--orange);
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pc.cas h4{font-size:var(--d4);line-height:1.15;letter-spacing:-.02em;
  margin-top:10px;min-height:0;display:block}
.pc.cas h4 .cas-num{display:block;font-family:var(--fc);font-weight:400;
  font-size:var(--t3);letter-spacing:.14em;color:var(--gris);
  margin-bottom:6px}
.pc.cas p{font-size:14px!important;line-height:1.55;margin-top:8px;
  max-width:none;color:var(--gris)!important}

/* ── 7. Nos tarifs : une offre, un encadré ───────────────────────
   Le carton entre dans la boîte. Posé à côté, il laissait sous lui
   un vide de la hauteur de la liste, et donnait deux objets là où
   il n'y a qu'une offre. La boîte prend la largeur, les cinq
   précisions passent dessous sur deux colonnes. */
.offre-achat--large{display:grid;
  grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(28px,3.4vw,60px);align-items:center;
  padding:clamp(30px,3.2vw,46px);margin-top:clamp(20px,2.2vw,30px);
  border:1px solid var(--filet);background:var(--creme-clair)}
.offre-pack{display:flex;align-items:center;justify-content:center}
.offre-pack img{width:100%;max-width:420px;height:auto;display:block;
  filter:none}
.offre-achat--large .offre-dire{display:flex;flex-direction:column;
  align-items:flex-start}
.offre-achat--large .btn{width:auto;display:inline-block;margin-top:20px}
.offre-l--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px clamp(28px,3vw,52px);margin-top:clamp(22px,2.4vw,32px)}
.offre-l--duo p{display:flex;align-items:flex-start;gap:10px;margin:0}
.offre-l--duo p .pic-s{margin-top:2px}

/* ── 8. Aucun bouton n'est arrondi ───────────────────────────────
   Le bouton en ligne portait un rayon de 40 px, seul de la page.
   Le système n'a pas d'angle rond : il n'y a pas d'exception. */
.btn,.cta,.btn-ligne,.abo-btn,.volume-btn,button.btn{border-radius:0}

/* ── 9. Le volume passe en orange ────────────────────────────────
   Un crème sur un crème ne ressort pas. C'est le seul endroit de la
   page qui parle aux réseaux et aux centrales : il se voit. */
.volume{background:var(--orange);color:#fff}
.volume .volume-t,.volume .volume-c,.volume .sur,.volume p{color:#fff}
.volume .volume-c,.volume .sur{color:rgba(255,255,255,.88)}
.volume .btn,.volume .btn-ligne,.volume .volume-btn{
  background:var(--creme);color:var(--charbon);border-color:var(--creme)}
.volume .btn:hover,.volume .btn-ligne:hover{background:var(--charbon);
  color:var(--creme);border-color:var(--charbon)}
.volume .ico svg,.volume .pic-s{stroke:#fff;color:#fff}

/* ── 10. Les enseignes revendeurs nettoyées ──────────────────────
   Les fichiers fournis sont des scans bruités : à 30 px, le grain
   mangeait le dessin. Reseuillés et détourés, charbon sur
   transparent, ils montent à 40 px et l'opacité qui les délavait
   saute. */
.pr-logos img{max-height:40px;height:auto;width:auto;opacity:.85;
  filter:none;mix-blend-mode:normal}
.pr-logos a:hover img{opacity:1}
.pr-logos{gap:clamp(30px,3.4vw,52px);align-items:center}

@media(max-width:900px){
  .cas-cartes{grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(32px,6vw,44px)}
  .pc.cas .pc-bg{aspect-ratio:16/9}
  .offre-achat--large{grid-template-columns:minmax(0,1fr);gap:22px;
    padding:22px}
  .offre-pack{order:-1}
  .offre-pack img{max-width:300px}
  .offre-achat--large .btn{width:100%;text-align:center}
  .offre-l--duo{grid-template-columns:minmax(0,1fr)}
  .temoins .tmo{grid-template-columns:84px minmax(0,1fr);
    flex:0 0 clamp(300px,82vw,352px)}
  .temoins .tmo-vue{width:84px;height:112px}
  .schema-vue img{width:auto;max-width:none;height:clamp(240px,52vw,320px)}
  .pr-logos img{max-height:46px}
}

/* ── Trois reprises ──────────────────────────────────────────────*/

/* Le schéma à +20 pour cent. La colonne plafonne à 1 192 px, la figure
   sort donc un peu de la grille pour atteindre 1 430.

   Elle sort par marge négative, pas par « transform » : une transform
   crée un contexte d'empilement, et le « mix-blend-mode: multiply » de
   l'image se met alors à fusionner avec le fond de la figure — vide —
   au lieu du crème de la section. C'est ce qui faisait apparaître le
   rectangle blanc du fichier source. */
.schema-vue{--large:min(1430px,calc(100vw - 40px));
  width:var(--large);max-width:none;
  margin-left:calc((100% - var(--large)) / 2);
  margin-right:calc((100% - var(--large)) / 2);
  transform:none}
.schema-vue img{width:100%;max-width:none;mix-blend-mode:multiply}

/* Le bouton de l'encadré tarifs s'étirait sur 603 px : une règle
   écrite quand l'encadré était étroit lui imposait la pleine
   largeur. Elle ne vaut plus, l'encadré fait toute la page. */
.tarifs-sec .offre-achat--large .btn{width:auto;text-align:center}

/* La croix de fermeture des parutions était le dernier arrondi. */
.pr-x{border-radius:0}

@media(max-width:900px){
  .schema-vue{--large:100vw;margin-inline:calc((100% - 100vw) / 2)}
  .tarifs-sec .offre-achat--large .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   REPRISES DU 28/09, DERNIÈRE SÉRIE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Les témoignages respirent une fois et demie plus ─────────*/
.temoins{padding-block:clamp(78px,9vw,132px)}

/* ── 2. Les deux bandeaux bouclent sans raccord ──────────────────
   La piste se translatait de la moitié de sa largeur. Cette moitié
   comprend un demi-écart de trop : à chaque tour, le raccord sautait
   de la valeur d'un gap. Elle se translate maintenant de la moitié
   plus la moitié d'un écart, ce qui est exactement la longueur d'une
   série suivie de son séparateur. */
.tmo-piste{animation-name:tmo-boucle}
@keyframes tmo-boucle{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--tmo-ecart,20px) / 2))}
}
.tmo-piste{--tmo-ecart:clamp(16px,1.6vw,24px)}

/* ── 3. La bande orange : le carton descend sur le prix ──────────*/
.cta-achat>img{max-width:250px;margin-bottom:0}
.cta-achat .cta-prix{margin-top:clamp(6px,0.8vw,12px)}

/* ── 4. Les cartes des cas d'usage s'alignent ligne à ligne ──────
   Photo, picto, titre et texte occupent chacun une rangée partagée
   par toute la ligne : un titre de deux lignes ne décale plus ses
   voisins. Même chose pour l'engagement humain, qui a le même
   composant et le même défaut. */
.pc.cas .cas-txt p+p{margin-top:10px}

/* ── 5. L'engagement humain : pictos resserrés, filets retirés ───
   Chaque carte portait un filet bas. Sur une ligne de trois cartes
   de hauteurs différentes, ces trois filets tombaient à trois
   hauteurs : trois traits en travers de la section. */
.rse-sec .pc.rse{border:0;border-bottom:0}
.rse-sec .pc.rse .ico,.pc.cas .ico{width:26px;height:26px;margin:12px 0 0}
.rse-sec .pc.rse h4,.pc.cas h4{margin-top:8px}
.rse-sec .pc.rse p,.pc.cas .cas-txt{margin-top:6px}

/* ── 6. Promo du moment : le contenu prend la largeur ────────────
   Le texte tenait 603 px dans une boîte de 1 192 et laissait le
   reste en blanc. Le prix et le bouton se posent sur une ligne, la
   réassurance sur une autre, et la colonne va au bout. */
.offre-achat--large{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr)}
.offre-achat--large .offre-dire{width:100%}
.offre-achat--large .offre-p{display:flex;align-items:baseline;gap:14px}
.offre-achat--large .offre-ligne{display:flex;align-items:center;
  justify-content:space-between;gap:clamp(20px,2.4vw,40px);width:100%;
  margin-top:22px;flex-wrap:wrap}
.offre-achat--large .offre-ligne .btn{margin-top:0;flex:none}
.offre-achat--large .paiement{margin-top:0;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap}
.offre-achat--large .paiement-lab{margin:0}

/* ── 7. L'offre distributeur : deux colonnes de même rang ────────
   Le texte de droite était plus petit et plus étroit que celui de
   gauche pour dire une chose aussi importante. Ils s'alignent, et
   le bouton se pose à droite, sous le bloc qu'il conclut. */
.volume{align-items:start}
.volume-c{font-size:var(--t1)!important;font-weight:700;color:inherit;
  line-height:1.45;max-width:38ch}
.volume-cote{display:flex;flex-direction:column;align-items:flex-start;
  height:100%}
.volume-cote .volume-btn{margin-top:auto;align-self:flex-start}
.volume-txt .volume-btn{display:none}

/* ── 8. La relance de la FAQ remplit sa ligne ────────────────────
   Elle tenait 32 caractères dans une colonne large, avec un vide à
   sa droite. Le texte grandit, le bouton passe à côté. */
.faq-cta{max-width:none;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(24px,3vw,56px);flex-wrap:wrap;
  border-top:1px solid var(--filet);padding-top:clamp(24px,2.6vw,38px)}
.faq-cta .txt{font-family:var(--ft);font-weight:800;
  font-size:var(--d4);line-height:1.2;letter-spacing:-.02em;
  color:var(--txt);max-width:34ch;margin:0}
.faq-cta .btn{flex:none;margin-top:0}

@media(max-width:900px){
  .volume-cote .volume-btn{margin-top:20px}
  .faq-cta{flex-direction:column;align-items:flex-start}
  .faq-cta .btn{width:100%;text-align:center}
  .offre-achat--large .offre-ligne{flex-direction:column;
    align-items:stretch;gap:16px}
}

/* ── Les vignettes des cartes ont toutes la même hauteur ─────────
   Trois cartes sur cinq mesuraient 298 px de haut, deux 276 : la
   photo, restée dans le flux, imposait sa propre hauteur quand une
   règle plus ancienne lui donnait un ratio différent. Elle passe en
   position absolue dans son cadre : le cadre ne tient plus que de
   son ratio, et il est le même pour tous. */
.pc.cas .pc-bg,.rse-sec .pc.rse .pc-bg{display:block;position:static;
  height:auto;min-height:0;overflow:hidden;aspect-ratio:auto;inset:auto}
.pc.cas .pc-bg img,.rse-sec .pc.rse .pc-bg img{position:static;display:block;
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Le titre tient deux lignes partout : les textes démarrent au même
   niveau d'une carte à l'autre. */
.pc.cas h4,.rse-sec .pc.rse h4{min-height:2.4em}
@media(max-width:900px){
  .pc.cas h4,.rse-sec .pc.rse h4{min-height:0}
  .pc.cas .pc-bg img,.rse-sec .pc.rse .pc-bg img{aspect-ratio:16/9}
}

/* Les cartes sont étirées à la hauteur de leur ligne, et leur contenu
   s'y centrait : la carte la plus fournie partait du haut, les autres
   descendaient de la moitié de leur écart. Tout part du haut. */
.pc.cas,.rse-sec .pc.rse{justify-content:flex-start;align-content:flex-start}

/* La relance de la FAQ tenait dans la colonne de gauche, large de
   34 pour cent, avec les deux tiers de la ligne vides à sa droite.
   Elle prend la largeur sous les questions : le texte à gauche, le
   bouton à l'autre bout. */
.faq .w>.faq-cta{grid-column:1 / -1;margin-top:clamp(30px,3.2vw,48px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,3vw,56px);flex-wrap:wrap;
  border-top:1px solid var(--filet);padding-top:clamp(24px,2.6vw,38px)}
.faq-cta .txt{font-size:var(--d3);max-width:none}
@media(max-width:900px){
  .faq-cta .txt{font-size:var(--d4)}
}

/* ── Dernier bloc du fichier : ce que les reprises ci-dessus
   défaisaient en mobile. Les règles de bureau écrites après le bloc
   responsive le battent à spécificité égale. Rien ne s'ajoute
   après. ─────────────────────────────────────────────────────── */
@media(max-width:900px){
  .offre-achat--large{grid-template-columns:minmax(0,1fr)!important;
    gap:22px;padding:22px;text-align:left}
  .offre-achat--large .offre-pack{order:-1}
  .offre-achat--large .offre-pack img{max-width:280px}
  .offre-achat--large .offre-ligne{flex-direction:column;
    align-items:stretch;gap:16px}
  .offre-achat--large .btn{width:100%;text-align:center}
  .offre-achat--large .offre-t,.offre-achat--large .offre-p,
  .offre-achat--large .offre-u,.offre-achat--large .promo{text-align:left}
  .offre-achat--large .offre-p{flex-wrap:wrap}
  .temoins{padding-block:clamp(56px,11vw,80px)}
}

/* ═══════════════════════════════════════════════════════════════
   28/09, SÉRIE SUIVANTE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Témoignages : la manne à pain grandit d'un tiers, le titre
   suit pour tenir le bloc ────────────────────────────────────── */
.tmo-intro{align-items:center;gap:clamp(34px,4vw,64px)}
.tmo-photo{width:100%;margin:0}
.tmo-photo img{width:130%;max-width:130%;height:auto;display:block}
.tmo-mot h2{font-size:var(--d2);line-height:1.08;letter-spacing:-.03em}
.tmo-mot .tmo-p{font-size:var(--t1);max-width:46ch;margin-top:14px}

/* ── 2. Le geste : plus de fond dans le fond ─────────────────────
   La section était en crème clair sur une page en crème : le dessin
   se lisait dans un rectangle plus pâle que le reste. Même fond que
   la page, plus aucune délimitation. */
.schema{background:var(--creme)}

/* ── 3. Les bandeaux ne s'arrêtent jamais ────────────────────────
   Ils se figeaient sous la souris. Une bande qui s'arrête quand on
   la regarde a l'air cassée. */
.tmo-cadre:hover .tmo-piste,.temoins .tmo-cadre:hover .tmo-piste,
.presse-cadre:hover .presse-piste{animation-play-state:running}

/* ── 4. La bande orange : le carton se pose sur le prix ──────────*/
.cta-achat>img{max-width:230px;margin:0 0 -6px}
.cta-achat .cta-prix{margin-top:0}

/* ── 5 et 6. Cas d'usage et engagement humain, même carte ────────
   Les titres font une, deux ou trois lignes selon la largeur de la
   fenêtre : les textes démarraient donc à des hauteurs différentes
   d'une carte à l'autre. Le titre occupe trois lignes partout, quel
   que soit ce qu'il porte. Et tout se resserre autour du picto :
   il était à 12 px de la photo, 8 de son titre, le texte à 6. */
.pc.cas h4,.rse-sec .pc.rse h4{min-height:3.5em;margin-top:6px}
.pc.cas .ico,.rse-sec .pc.rse .ico{width:24px;height:24px;margin:10px 0 0}
.pc.cas .cas-txt,.rse-sec .pc.rse p{margin-top:2px}
.rse-sec .cartes.g3{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,46px)}
.rse-sec .pc.rse{justify-content:flex-start}

/* ── 7. Promo du moment : le contenu se répartit dans le cadre ───
   Le texte tenait à gauche d'une colonne de 668 px. Le titre et le
   prix montent en tête, l'unité et le barré se posent au bout de la
   même ligne, le bouton et le paiement se partagent la dernière. */
.offre-achat--large{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  align-items:center}
.offre-achat--large .offre-dire{display:flex;flex-direction:column;
  align-items:stretch;width:100%}
.offre-achat--large .offre-p{display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;width:100%;flex-wrap:wrap}
.offre-achat--large .offre-u{margin-top:6px}
.offre-achat--large .offre-ligne{margin-top:clamp(20px,2.2vw,30px)}

/* ── 8. L'offre distributeur : le bouton se décolle de son texte ─*/
.volume-cote .volume-btn{margin-top:clamp(22px,2.4vw,34px)}
.volume-txt .volume-btn{margin-top:clamp(22px,2.4vw,34px)}

/* ── 9. La clôture : les coordonnées passent à droite, en plus gros
   La colonne de droite était vide sous le prix. Le moyen de nous
   joindre s'y installe, à la taille où on le lit. */
.cloture-v3 .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(30px,4vw,72px);align-items:start}
.cloture-v3 h2{grid-column:1 / -1}
.cloture-v3 .cl-coords{grid-column:2;align-self:end;justify-self:start;
  font-size:var(--d4);line-height:1.5;margin:0;
  border-left:1px solid var(--filet-inv);padding-left:clamp(20px,2.2vw,32px)}
.cloture-v3 .cl-coords a{font-weight:700}

@media(max-width:900px){
  .tmo-photo img{width:100%;max-width:100%}
  .pc.cas h4,.rse-sec .pc.rse h4{min-height:0}
  .cloture-v3 .w{grid-template-columns:minmax(0,1fr)}
  .cloture-v3 .cl-coords{grid-column:1;border-left:0;padding-left:0;
    border-top:1px solid var(--filet-inv);padding-top:22px;
    margin-top:26px;font-size:var(--t1)}
}

/* ── Reprises ────────────────────────────────────────────────────*/

/* Le titre tenait trois lignes de gabarit alors qu'aucun n'en fait
   plus de deux : ça rouvrait sous les titres courts l'écart qu'on
   venait de fermer. Deux lignes, ce qui aligne les textes sans
   ajouter de vide. */
.pc.cas h4,.rse-sec .pc.rse h4{min-height:2.35em}

/* Le prix barré était parti à l'autre bout de la ligne : il se lit
   contre le prix qu'il barre, pas à trente centimètres. C'est le
   couple prix-barré qui tient la gauche, et la mention d'unité qui
   va au bout. */
.offre-achat--large .offre-p{justify-content:flex-start;gap:14px}
.offre-achat--large .offre-dire>*{width:100%}
.offre-achat--large .offre-u{display:block;margin-top:8px}

/* La clôture : la phrase de conclusion reste sous l'offre, à gauche.
   Seules les coordonnées passent à droite. Le numéro ne se coupe
   pas en deux. */
.cloture-v3 .cl-lead,.cloture-v3 .cl-offre,.cloture-v3 .btn,
.cloture-v3 .sous-btn,.cloture-v3 .cl-carton,.cloture-v3 p:not(.cl-coords){
  grid-column:1}
.cloture-v3 .cl-coords{white-space:normal}
.cloture-v3 .cl-coords a{white-space:nowrap}
.cloture-v3 .cl-coords .cl-tel{white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   28/09, SÉRIE SUIVANTE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Témoignages : le mot ne mord plus sur la manne ───────────
   L'image débordait de sa colonne de 30 pour cent et passait 32 px
   sous le titre. Elle déborde vers la gauche, du côté de la marge,
   pas vers le texte. */
.tmo-intro{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(40px,4.4vw,72px)}
.tmo-photo{overflow:visible}
.tmo-photo img{width:130%;max-width:130%;margin-left:-30%}

/* ── 2. Les bandeaux : mouvement perpétuel, arrêt au survol ──────
   Écrit en toutes lettres, sans dépendre d'une règle posée ailleurs :
   ça tourne par défaut, ça s'arrête sous la souris, ça repart quand
   elle sort. Et deux fois plus vite : à 48 px par seconde, le
   mouvement ne se voyait pas. */
.tmo-piste,.temoins .tmo-piste,.presse-piste{
  animation-name:tmo-boucle;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-fill-mode:none;
  animation-play-state:running}
.temoins .tmo-piste{animation-duration:42s}
.presse-piste{animation-duration:34s}
.tmo-cadre:hover .tmo-piste,.temoins .tmo-cadre:hover .tmo-piste,
.presse-cadre:hover .presse-piste{animation-play-state:paused}

/* ── 3. Engagement humain : les écarts, pour de bon ──────────────
   Ils faisaient 53, 49 et 45 px. La carte est une colonne flex et
   elle portait un « gap » hérité qui s'ajoutait à chaque marge ;
   les marges que j'avais réglées ne pouvaient rien contre lui. */
.pc.cas,.rse-sec .pc.rse{gap:0!important;row-gap:0!important}
.pc.cas .ico,.rse-sec .pc.rse .ico{margin:14px 0 0!important}
.pc.cas h4,.rse-sec .pc.rse h4{margin:8px 0 0!important}
.pc.cas .cas-txt,.rse-sec .pc.rse p{margin:6px 0 0!important}

/* ── 4. Promo du moment : l'offre d'un côté, le carton de l'autre ─
   « Paiement sécurisé » était parti seul à l'autre bout de la
   boîte, comme s'il était l'offre. Il reprend sa place sous le
   bouton, avec le reste de ce qu'on lit avant de payer. */
.offre-achat--large{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.offre-achat--large .offre-ligne{display:block;margin-top:clamp(18px,2vw,26px)}
.offre-achat--large .offre-ligne .btn{display:inline-block;width:auto}
.offre-achat--large .paiement{margin-top:16px;display:flex;
  align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-start}

/* ── 5. La clôture tient sur une demi-page ───────────────────────
   Elle occupait 939 px pour une phrase, un prix et un bouton. Le
   titre et l'offre tiennent la gauche, la phrase et le contact
   répondent à droite, au corps où on les lit. */
.cloture-v3{padding-block:clamp(48px,5vw,76px)}
.cloture-v3 .w{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(34px,4vw,72px);align-items:start}
.cloture-v3 h2{grid-column:1;margin-bottom:clamp(20px,2.2vw,30px)}
.cloture-v3 .cl-offre{grid-column:1}
.cloture-v3 .cl-cote{grid-column:2;grid-row:1 / span 2;align-self:center}
.cloture-v3 .cl-lead{font-family:var(--ft);font-weight:800;
  font-size:var(--d3);line-height:1.15;letter-spacing:-.025em;
  color:var(--txt-inv);max-width:20ch;margin:0}
.cloture-v3 .cl-coords{font-size:var(--t1);margin:clamp(20px,2.2vw,30px) 0 0;
  border:0;padding:0;line-height:1.5;white-space:normal}
.cloture-v3 .cl-coords a{font-weight:700}

@media(max-width:900px){
  .tmo-intro{grid-template-columns:minmax(0,1fr)}
  .tmo-photo img{width:100%;max-width:100%;margin-left:0}
  .cloture-v3 .w{grid-template-columns:minmax(0,1fr)}
  .cloture-v3 h2,.cloture-v3 .cl-offre,.cloture-v3 .cl-cote{grid-column:1;
    grid-row:auto}
  .cloture-v3 .cl-cote{margin-top:30px}
  .offre-achat--large{grid-template-columns:minmax(0,1fr)}
}

/* ── Les bandeaux passent au défilement recyclant ─────────────────
   Plus d'animation CSS : la piste est déplacée par transform, et
   l'élément sorti par la gauche repasse à la fin. Il n'y a donc plus
   de doublon à écrire dans la page. La piste garde « width:max-content »
   pour que les cartes ne se compriment pas. */
.tmo-piste,.temoins .tmo-piste,.presse-piste{animation:none!important;
  will-change:transform}
/* Sans JavaScript, ou en « mouvement réduit », le cadre se fait
   glisser à la main : rien ne disparaît. */
.tmo-cadre{overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none}
.tmo-cadre::-webkit-scrollbar{display:none}

/* ── Les quatre chiffres au même corps ───────────────────────────
   « 120-180 L » était le seul à être réduit : il est plus long, il
   n'est pas moins important. */
.ch:last-child .n{font-size:clamp(36px,4.1vw,56px)}

/* ── « Paiement sécurisé » s'aligne sur le bouton ────────────────*/
.offre-achat--large .paiement{margin-left:0;padding-left:0;
  justify-content:flex-start}
.offre-achat--large .paiement-lab{margin:0}

@media(max-width:900px){
  .ch:last-child .n{font-size:clamp(46px,12vw,64px)}
}

/* « Paiement sécurisé » et les marques sur une même ligne, calés au
   bord gauche du bouton. La boîte était en colonne avec ses éléments
   centrés : l'intitulé partait au milieu, les marques restaient à
   gauche, et rien n'était aligné sur rien. */
.offre-achat--large .paiement{flex-direction:row!important;
  align-items:center!important;justify-content:flex-start!important;
  flex-wrap:wrap;gap:8px 18px;text-align:left}
.offre-achat--large .paiement-lab{margin:0!important;align-self:center}
.offre-achat--large .paiement>img{margin:0}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE, 28/09 AU SOIR — dernier bloc du fichier.
   Il passe après tout le reste : les règles de bureau écrites plus
   haut le battraient à spécificité égale. Rien ne s'ajoute après.
   ═══════════════════════════════════════════════════════════════ */

/* Une coupe de titre qui n'a lieu qu'en mobile. */
.br-mob{display:none}

@media(max-width:900px){

  /* ── Le geste en trois temps ───────────────────────────────────
     Le dessin était écrasé à la largeur de l'écran : 2 200 px de
     croquis ramenés à 390, plus rien ne se lisait. Il garde sa
     hauteur et c'est la bande qu'on fait glisser — ce que la
     légende annonce depuis le début. Elle reprend la gouttière de
     la page, elle était collée au bord. */
  .schema-vue{--large:100vw;width:100vw;max-width:100vw;
    margin-inline:calc((100% - 100vw) / 2);transform:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding:0 0 8px}
  .schema-vue img{width:auto!important;max-width:none!important;
    height:clamp(280px,74vw,380px);margin-inline:0;
    padding-inline:20px;box-sizing:content-box}
  .schema-vue figcaption{padding-inline:20px;margin-top:12px}

  /* ── La bande orange se centre ─────────────────────────────────
     Le carton, l'offre et le bouton tenaient la gauche sur une
     colonne unique : ils se posent dans l'axe. */
  .br-mob{display:inline}
  .cta-bloc .cta-in{text-align:center}
  .cta-bloc .cb-t,.cta-bloc .cb-p,.cta-bloc .cb-sur{text-align:center}
  .cta-bloc .cta-cles{justify-content:center}
  .cta-achat{text-align:center;display:flex;flex-direction:column;
    align-items:center}
  .cta-achat>img{margin-inline:auto}
  /* Le prix est une boîte flex : « text-align » ne l'a pas déplacé,
     il fallait centrer ses éléments. */
  .cta-achat .cta-prix{display:flex;align-items:baseline;
    justify-content:center;width:100%;text-align:center}
  .cta-achat .cb-u{text-align:center;width:100%}
  .cta-achat .btn{width:100%;text-align:center}
  .cta-achat .cta-rassure{justify-content:center;width:100%}
  .cta-achat .paiement-marques{margin-inline:auto}

  /* ── L'essai sans risque se centre aussi ──────────────────────*/
  .ga-txt{align-items:center}
  .ga-txt h2,.ga-lead,.ga-txt p{text-align:center;margin-inline:auto}
  .ga-quoi{justify-content:center;justify-items:center}
  .ga-quoi li{justify-content:center}
  /* Une règle à deux classes, posée plus haut, calait ce bloc à
     gauche : il faut au moins autant de poids pour le recentrer. */
  .ga-txt .ga-cond{text-align:center;justify-items:center;
    margin-inline:auto;justify-content:center}
  .ga-txt .ga-cond dt,.ga-txt .ga-cond dd{text-align:center;
    margin-inline:auto}
  .ga-txt .btn{width:100%;text-align:center;align-self:center}
}