/* ==========================================================================
   Accueil (chargée sur l'accueil seulement) : ambiance jour / nuit, héros,
   bandeau, catégories, L'Oreiller Aéra en coupe, produits phares, le silence,
   Les Bouchons Nocturne, pack, différence, étapes, garantie, défi, récit, journal.
   Scènes animées par accueil.js ; contenu généré par contenus/_generer.py.
   ========================================================================== */

/* ---------- Ambiance : le passage jour → nuit est un voile qui s'estompe (animé par le compositeur ;
   animer les variables héritées forçait le recalcul de tous les éléments à chaque image) ---------- */
.home .wp-site-blocks{background:var(--fond)}
.home .wp-site-blocks::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--nuit);opacity:0;transition:opacity 1s var(--courbe);will-change:opacity}
.home.fond-nuit .wp-site-blocks::before{opacity:1}
/* ciel étoilé (accueil.js) : deux couches dessinées une fois, qui scintillent en CSS (rien n'est
   redessiné pendant le défilement) */
.ciel{position:fixed;top:0;left:0;right:0;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s var(--courbe)}
.theme-nuit .ciel{opacity:1}
.ciel__couche{position:absolute;inset:0;width:100%;height:100%;animation:scintille 5s ease-in-out infinite alternate}
.ciel__couche--b{animation-duration:3.4s;animation-delay:-1.7s}
body:not(.theme-nuit) .ciel__couche{animation-play-state:paused}
@keyframes scintille{to{opacity:.3}}
/* ouverture : rien ne s'affiche avant que accueil.js ne prenne la main (classe posée dans <head>
   par inc/theme.php) ; filet de sécurité si le script ne se charge pas */
html.intro::after{content:"";position:fixed;inset:0;z-index:300;background:var(--nuit-3);animation:intro-secours .3s 4s forwards}
@keyframes intro-secours{to{opacity:0;visibility:hidden}}
/* ---------- Ouverture : à la première visite de la session seulement (accueil.js pose .avec-rideau et
   .est-ouvert) ; ensuite, au rechargement comme au retour, le héros s'affiche tel quel, sans attente.
   Tout est en animations CSS, jouées par la carte graphique : fluides même pendant le chargement de la
   page, quand le téléphone est le plus occupé. --debut : le héros entre quand le rideau se lève. */
.rideau{position:fixed;inset:0;z-index:200;background:var(--nuit-3);color:var(--sur-nuit);display:grid;place-content:center;justify-items:center;gap:28px;
  animation:rideau-part 1s cubic-bezier(.87,0,.13,1) 1.85s forwards}
.admin-bar .rideau{top:32px}
.rideau__logo{display:flex;gap:.42em;font:200 clamp(40px,8vw,96px)/1 var(--police-texte);overflow:hidden;padding-block:.1em}
.rideau__logo span{display:inline-block;background:linear-gradient(90deg,var(--lilas),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rideau-lettre-entre .9s var(--sortie) calc(var(--i,0) * .06s) backwards,rideau-lettre-sort .6s cubic-bezier(.32,0,.67,0) calc(1.3s + var(--i,0) * .04s) forwards}
.rideau__barre{width:180px;height:1px;background:var(--trait-nuit);overflow:hidden}
.rideau__barre span{display:block;height:100%;background:linear-gradient(90deg,var(--lilas),var(--rose));transform-origin:left;transform:scaleX(0);animation:rideau-barre .8s cubic-bezier(.65,0,.35,1) .1s forwards}
@keyframes rideau-lettre-entre{from{opacity:0;transform:translateY(120%)}}
@keyframes rideau-lettre-sort{to{opacity:0;transform:translateY(-120%)}}
@keyframes rideau-barre{to{transform:scaleX(1)}}
@keyframes rideau-part{to{transform:translateY(-100%)}}
.heros{--debut:2.3s}
.heros.est-ouvert .heros__titre .ligne>span{animation:ligne-monte 1.4s var(--sortie) calc(var(--debut) + var(--i,0) * .14s) backwards}
.heros.est-ouvert .heros__produit{animation:produit-pose 2.4s var(--sortie) calc(var(--debut) + .25s) backwards}
.heros.est-ouvert .puce{animation:apparait .9s cubic-bezier(.33,1,.68,1) calc(var(--debut) + 1.7s + var(--i,0) * .2s) backwards}
.heros.est-ouvert :is(.heros__haut,.heros__bas){animation:bord-monte 1.2s var(--sortie) calc(var(--debut) + 1.7s + var(--i,0) * .08s) backwards}
@keyframes produit-pose{from{opacity:0;transform:perspective(1400px) translateY(-240px) rotateX(62deg) rotateZ(-14deg) scale(.72)}}
@keyframes apparait{from{opacity:0}}
@keyframes bord-monte{from{opacity:0;transform:translateY(30px)}}
/* ordinateur : l'oreiller et les étiquettes sortent d'un flou (trop coûteux sur téléphone) */
@media (hover:hover) and (pointer:fine){
  .heros.est-ouvert .heros__produit{animation-name:produit-pose-flou}
  .heros.est-ouvert .puce{animation-name:apparait-flou}
  @keyframes produit-pose-flou{from{opacity:0;filter:blur(14px);transform:perspective(1400px) translateY(-240px) rotateX(62deg) rotateZ(-14deg) scale(.72)}}
  @keyframes apparait-flou{from{opacity:0;filter:blur(6px)}}
}
/* grands titres des scènes */
.coupe__titre,.une__titre,.recit__titre,.silence__etat{line-height:.98;letter-spacing:-.01em;font-weight:400}

/* ---------- Héros ---------- */
/* PIÈGE : la marge du premier enfant d'un flux est remise à 0 par WordPress : qualifier */
.wp-block-post-content>.heros{margin-top:calc(-1 * var(--entete-h) - 1px)!important}
.heros{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:auto auto 1fr auto;
  padding:calc(var(--entete-h) + 24px) max(var(--gouttiere),calc((100vw - var(--largeur)) / 2)) clamp(40px,7vh,88px)}
.heros::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../img/ciel-rose.jpg) center 30%/cover no-repeat}
.heros::after{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(circle min(31vw,440px) at 50% 62%,var(--surface) 0%,color-mix(in srgb,var(--surface-rose) 85%,transparent) 53%,color-mix(in srgb,var(--rose) 35%,transparent) 85%,transparent 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--fond) 60%,transparent) 0%,color-mix(in srgb,var(--fond) 15%,transparent) 40%,color-mix(in srgb,var(--fond) 40%,transparent) 75%,var(--fond) 100%)}
.heros__haut{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:8px}
.heros__surtitre{margin:0}
.heros__nouveau{font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px}
.heros__nouveau strong{padding:5px 12px;border-radius:999px;background:var(--accent);color:var(--sur-accent);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.heros__titre{position:relative;z-index:1;font-size:clamp(46px,8.4vw,138px);line-height:.9;letter-spacing:-.03em;font-weight:300}   /* Poppins fine : l’élégance d’un titre d’affiche, sans rupture avec les autres titres */
.heros__titre .ligne:first-child{text-align:left}
.heros__titre .ligne:last-child{text-align:right}
.heros__titre .ligne:last-child>span{background:linear-gradient(90deg,var(--nuit-2),var(--lilas) 55%,var(--rose-vif));-webkit-background-clip:text;background-clip:text;color:transparent}
/* le produit : centré en CSS (à l'ordinateur, GSAP reprend le centrage pour l'effet au défilement),
   posé par l'ouverture, il flotte ensuite en CSS */
.heros__objet{position:absolute;z-index:2;left:50%;top:67%;width:min(50vw,740px);aspect-ratio:1.6;translate:-50% -50%;perspective:1400px}
.heros__objet::after{content:"";position:absolute;left:18%;right:18%;bottom:2%;height:12%;border-radius:50%;z-index:-1;   /* ombre portée */
  background:radial-gradient(closest-side,color-mix(in srgb,var(--texte) 30%,transparent),transparent);filter:blur(10px)}
.heros__produit{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;will-change:transform;transform:perspective(1400px) translateY(0) rotateX(0) rotateZ(-4deg) scale(1)}
.heros__produit img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 50px 45px color-mix(in srgb,var(--texte) 24%,transparent))}
.heros__produit--autre{padding:4% 22% 10%}   /* produit choisi dans Apparence → Héros de l'accueil */
.heros--flotte .heros__produit img{animation:oreiller-flotte 3.6s ease-in-out infinite alternate;will-change:transform}
@keyframes oreiller-flotte{from{transform:translateY(0) rotate(0)}to{transform:translateY(-14px) rotate(2deg)}}
/* étiquettes posées sur le produit */
.puce{position:absolute;z-index:3;white-space:nowrap;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 30px color-mix(in srgb,var(--texte) 10%,transparent)}
.puce::after{content:"";position:absolute;top:50%;translate:0 -50%;width:80px;height:24px;
  background:radial-gradient(circle at calc(100% - 12px) 50%,var(--texte) 0 6px,color-mix(in srgb,var(--surface) 80%,transparent) 6.5px 11px,transparent 11.5px),
             repeating-linear-gradient(90deg,var(--texte) 0 4px,transparent 4px 8px) left center/62px 1px no-repeat}
.puce--gauche{left:24%;top:40%;translate:calc(-100% - 80px) -50%}
.puce--gauche::after{left:100%}
.puce--droite{left:62%;top:30%;translate:80px -50%}
.puce--droite::after{right:100%;transform:scaleX(-1)}
/* bas du héros : accroche, boutons, lien vers le test, mini-carte du produit */
.heros__bas{grid-row:4;position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:32px}
.heros__chapo{max-width:380px;font-size:16px;color:var(--ambiance-douce);margin-bottom:24px}
.heros__test{margin:14px 0 0;font-size:15px}
.heros__test a{color:var(--texte);text-decoration:none;border-bottom:1px solid var(--rose);padding-bottom:2px}
.heros__test a strong{font-weight:700}
.heros__test a::after{content:" →"}
.mini-carte{justify-self:end}
.mini-carte .wc-block-product-template{display:block;margin:0;padding:0;list-style:none}
.mini-carte .wc-block-product{position:relative;display:flex;align-items:center;gap:18px;margin:0;padding:12px 22px 12px 12px!important;border-radius:20px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--surface);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 50px color-mix(in srgb,var(--texte) 12%,transparent)}
.mini-carte .wc-block-product>*{margin:0!important}
.mini-carte-image{flex:none;display:grid!important;place-items:center;width:96px!important;height:96px!important;padding:8px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#fff,var(--surface-rose) 85%)!important}
.mini-carte-image>*,.mini-carte-image a{display:grid!important;place-items:center;width:100%;height:100%;margin:0!important}
.mini-carte-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center;transform:none!important}
.mini-carte-titre{margin:0;font:600 13px/1.3 var(--police-texte)}
.mini-carte-titre,.mini-carte-titre a{font-size:16px!important;font-weight:600}
.mini-carte-titre a{text-decoration:none}
.mini-carte-titre a::after{content:"";position:absolute;inset:0}   /* toute la carte est cliquable */
.mini-carte-prix{font:600 30px/1 var(--police-titres)}
.mini-carte-prix,.mini-carte-prix *{font-size:34px!important;line-height:1.05}
/* promotion discrète, sous le prix, jamais dans l'image (inc/heros.php) */
.mini-carte-offre{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--degrade-promo);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;line-height:1.5}

/* ---------- Bandeau d'engagements qui défile (interface.js double son contenu) ---------- */
.bandeau{overflow:hidden;background:var(--nuit);color:var(--sur-nuit);padding:16px 0;border-block:1px solid var(--trait-nuit)}
.bandeau__piste{display:flex;width:max-content;gap:0;animation:bandeau-defile 38s linear infinite}
.bandeau__piste>.bandeau__item{margin:0;padding:0 28px;white-space:nowrap;font-size:15px;letter-spacing:.04em;display:flex;align-items:center;gap:28px}
.bandeau__piste>.bandeau__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose)}
@media (hover:hover){.bandeau:hover .bandeau__piste{animation-play-state:paused}}
@keyframes bandeau-defile{to{transform:translateX(-50%)}}

/* ---------- Catégories : trois tuiles ---------- */
.categories{padding:80px 0}
.categories__grille{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding:0 var(--gouttiere);display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;align-items:end}
.tuile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:var(--rayon-grand);overflow:hidden;isolation:isolate;padding:22px;color:var(--texte);transition:transform .6s var(--courbe)}
@media (hover:hover){.tuile:hover{transform:translateY(-6px)}}
.tuile::before{content:"";position:absolute;inset:auto -20% -35% -20%;height:75%;z-index:-1;border-radius:50%;filter:blur(40px)}
.tuile--rose{height:560px;background:var(--surface)}
.tuile--rose::before{background:var(--surface-rose)}
.tuile--nuit{height:480px;background:var(--nuit);color:var(--sur-nuit)}
.tuile--nuit::before{background:var(--nuit-2)}
.tuile--lilas{height:520px;background:var(--surface-rose)}
.tuile--lilas::before{background:color-mix(in srgb,var(--lilas) 60%,transparent)}
.tuile__img{position:absolute;z-index:-1;left:8%;right:8%;top:12%}
.tuile__img img{width:100%;filter:drop-shadow(0 30px 30px color-mix(in srgb,var(--texte) 18%,transparent))}
.tuile--rose .tuile__img{top:auto;bottom:34%}
.tuile--nuit .tuile__img{left:16%;right:16%}
.tuile__pied{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tuile__nom{font:400 35px/1 var(--police-titres)}
.tuile__compte{margin-top:6px;font-size:14px;font-weight:500;opacity:.75}
.tuile__lien a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:0;background:var(--accent);color:var(--sur-accent);transition:transform .4s var(--courbe)}
.tuile__lien a::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-diagonale) center/contain no-repeat;mask:var(--i-diagonale) center/contain no-repeat}
.tuile__lien a::after{content:"";position:absolute;inset:0}   /* toute la tuile est cliquable */
@media (hover:hover){.tuile:hover .tuile__lien a{transform:rotate(45deg)}}
.tuile--nuit .tuile__lien a{background:var(--rose);color:var(--nuit)}
.tuile--lilas .tuile__lien a{background:var(--surface);color:var(--texte)}

/* ---------- L'Oreiller Aéra en coupe (scène collante) ----------
   accueil.js choisit l'étape (data-etape : −1 avant la scène, 0 la forme, 1 le soutien, 2 l'intérieur) ;
   chaque étape est un état CSS ci-dessous, et les transitions sont jouées par la carte graphique.
   Sans attribut (animations réduites) : l'oreiller et ses deux premières étiquettes, immobiles. */
.coupe{height:300vh;--format:1.35;--progression:33.4%}
.coupe[data-etape="-1"]{--progression:0%}
.coupe[data-etape="1"]{--progression:66.7%}
.coupe[data-etape="2"]{--progression:100%}
.coupe__scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;
  padding:110px var(--gouttiere) 48px;display:grid;grid-template-columns:.8fr 2.2fr .9fr;grid-template-rows:auto minmax(0,1fr);align-items:center;gap:24px}
.coupe__scene>*{min-width:0}
.coupe__tete{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center}
.coupe__tete .surtitre{color:var(--rose)}
.coupe__titre{font-size:clamp(37px,5vw,79px);color:var(--ambiance-encre)}
.coupe__titre .ligne:last-child>span{background:linear-gradient(90deg,var(--lilas),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.coupe__chapo{margin:14px auto 0;max-width:520px;text-align:center;font-size:16.5px;line-height:1.6;color:var(--ambiance-douce)}
/* à gauche : les trois étapes et leur récit */
.coupe__guide{grid-column:1;display:grid;grid-template-columns:2px minmax(0,1fr);gap:20px;align-items:stretch}
.coupe__guide::before{content:"";grid-column:1;grid-row:1;width:2px;border-radius:2px;transition:background-size .8s var(--courbe);
  background:linear-gradient(180deg,var(--lilas),var(--rose)) top/100% var(--progression) no-repeat,var(--trait-nuit)}
.coupe__etapes{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;counter-reset:etape}
.coupe__etapes li{counter-increment:etape;display:flex;align-items:center;gap:14px;font-size:16px;color:var(--ambiance-douce);transition:color .4s}
.coupe__etapes li::before{content:"0" counter(etape);font-size:13px;font-weight:700;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--trait-nuit);transition:background-color .4s,color .4s,border-color .4s}
.coupe__etapes li.est-active{color:var(--ambiance-encre)}
.coupe__etapes li.est-active::before{background:var(--rose);color:var(--nuit);border-color:var(--rose)}
.coupe__recits{grid-column:1/-1;grid-row:2}
.coupe__compteur{display:none}   /* mobile et tablette : « 01 / 03 » à la place des étapes */
/* au centre : le plateau garde son format et tient dans la place libre de la scène (requête de
   conteneur) : l'achat reste visible quelle que soit la hauteur de l'écran du téléphone */
.coupe__objet{grid-column:2;align-self:stretch;min-height:0;container-type:size;display:grid;place-items:center}
.coupe__plateau{position:relative;width:min(100cqw,100cqh * var(--format));aspect-ratio:var(--format)}
.coupe__plateau::before{content:"";position:absolute;inset:-6% 4%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lilas) 45%,transparent),color-mix(in srgb,var(--nuit-2) 30%,transparent) 60%,transparent)}
.coupe__plateau::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--trait-nuit) 1px,transparent 1px),linear-gradient(90deg,var(--trait-nuit) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(closest-side,var(--texte) 30%,transparent);mask-image:radial-gradient(closest-side,var(--texte) 30%,transparent)}
.coupe__lueur{position:absolute;inset:8% 14%;border-radius:50%;z-index:0;opacity:0;pointer-events:none;transition:opacity 1s var(--courbe),transform 1.2s var(--courbe);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rose) 70%,transparent),color-mix(in srgb,var(--lilas) 35%,transparent) 55%,transparent);filter:blur(30px)}
.coupe__housse,.coupe__mousse{position:absolute;inset:0;margin:0;display:grid;place-items:center;z-index:1;filter:drop-shadow(0 40px 50px color-mix(in srgb,var(--nuit-3) 90%,transparent));
  transition:opacity .8s var(--courbe),transform 1.1s var(--courbe)}
.coupe__housse img{width:92%}
.coupe__mousse img{width:64%;max-width:var(--mousse-max)}
/* Source 571 × 443 : au plus 285 px affichés sur écran dense, sans agrandir le fichier. */
.coupe{--mousse-max:285px}
@media(min-resolution:2.5dppx){.coupe{--mousse-max:190px}}
/* étiquettes : le point est posé sur l'oreiller, l'étiquette part vers la droite.
   --u, --v : position du point dans l'image (0 à 1, mesurée sur l'image) ; --l : largeur de l'image
   dans le plateau ; --r : format de l'image. Les étiquettes n'ont jamais de transform posé par script. */
.etiquette{--l:.92;--r:1.953;--pad:14px;--point:12px;position:absolute;z-index:3;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:8px var(--pad);border-radius:999px;
  font-size:14px;font-weight:500;line-height:1.3;color:var(--sur-nuit);background:color-mix(in srgb,var(--nuit-2) 70%,transparent);border:1px solid var(--trait-nuit);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  left:calc((1 - var(--l)) * 50% + var(--l) * var(--u) * 100%);top:calc(50% + (var(--v) - .5) * var(--l) * var(--format) / var(--r) * 100%);
  translate:calc(-1px - var(--pad) - var(--point) / 2) -50%;transform-origin:calc(1px + var(--pad) + var(--point) / 2) 50%;
  transition:opacity .45s var(--courbe),transform .6s var(--courbe)}
.etiquette strong{color:var(--rose);font-weight:700}
.etiquette::before{content:"";flex:none;width:var(--point);height:var(--point);border-radius:50%;background:var(--rose);box-shadow:0 0 0 5px color-mix(in srgb,var(--rose) 25%,transparent),0 0 24px var(--rose)}
.etiquette--1{--u:.13;--v:.1}    /* la courbe haute, à gauche */
.etiquette--2{--u:.5;--v:.42}    /* le creux, au centre de l'oreiller */
.etiquette--3{--l:.64;--r:1.289;--u:.5;--v:.62;
  top:calc(50% + min(.12 * .64 * var(--format) / 1.289 * 100%, .12 * var(--mousse-max) / 1.289))}   /* suit la hauteur réelle de la mousse */
/* à droite : chiffres clés et achat */
.coupe__achat{grid-column:3;display:flex;flex-direction:column;align-items:flex-start;gap:20px;color:var(--ambiance-encre);transition:opacity .8s var(--courbe),transform .9s var(--courbe)}
.coupe__achat a:not(.wp-element-button):not(.wc-block-components-product-button__button){color:var(--ambiance-encre)}
.coupe__atouts{display:grid;gap:10px;width:100%;margin-bottom:6px}
.coupe__atout{margin:0;display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:16px;
  background:color-mix(in srgb,var(--nuit-2) 55%,transparent);border:1px solid var(--trait-nuit);color:var(--ambiance-encre)}
.coupe__atout strong{flex:none;min-width:44px;font:400 34px/1 var(--police-titres);background:linear-gradient(120deg,var(--lilas),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.coupe__atout span{font-size:14.5px;font-weight:600;line-height:1.3}
.coupe__atout em{font-style:normal;font-weight:400;font-size:13px;color:var(--ambiance-douce)}
.coupe-produit .wc-block-product-template{display:block;margin:0;padding:0;list-style:none}
.coupe-produit .wc-block-product{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin:0;padding:0;background:none}
.coupe-produit .carte-prix{font:600 47px/1 var(--police-titres)}
.coupe-produit .carte-bouton .wc-block-components-product-button__button{min-height:52px;padding:0 30px;background:var(--rose);color:var(--nuit);border:0}
@media (hover:hover){.coupe-produit .carte-bouton .wc-block-components-product-button__button:hover{background:var(--surface-rose)}}
/* les étapes : avant la scène, la forme (0), le soutien (1), l'intérieur (2) */
.coupe[data-etape="-1"] .coupe__housse{opacity:0;transform:translateY(60px) scale(.6) rotate(-14deg)}
.coupe:is([data-etape="1"],[data-etape="2"]) .coupe__housse{opacity:0;transform:translateY(-90px) scale(1.08)}
.coupe__mousse{opacity:0;transform:translateY(70px) scale(.9)}
.coupe[data-etape="1"] .coupe__mousse{opacity:1;transform:none;transition-delay:.15s}
.coupe[data-etape="2"] .coupe__mousse{opacity:1;transform:none}
.coupe[data-etape="1"] .coupe__lueur{opacity:1;transform:scale(1.15)}
.coupe[data-etape="2"] .coupe__lueur{opacity:.35}
.etiquette--3,.coupe:is([data-etape="-1"],[data-etape="1"],[data-etape="2"]) :is(.etiquette--1,.etiquette--2){opacity:0;transform:scale(.6)}
.coupe[data-etape="0"] .etiquette--1{transition-delay:.55s}
.coupe[data-etape="0"] .etiquette--2{transition-delay:.8s}
.coupe[data-etape="2"] .etiquette--3{opacity:1;transform:none;transition-delay:.7s}
.coupe[data-etape="-1"] .coupe__achat{opacity:0;transform:translateY(40px)}

/* récits qui se relaient (coupe et silence) : l'ancien s'efface, puis le nouveau apparaît, jamais superposés */
.coupe__recits,.silence__recits{display:grid;margin-top:26px;max-width:340px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--rose) 60%,transparent)}
.silence__recits{max-width:380px}
.coupe__recit,.silence__recit{grid-area:1/1;margin:0;font-size:15.5px;line-height:1.6;color:var(--ambiance-douce);
  opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.coupe__recit strong,.silence__recit strong{display:block;margin-bottom:6px;font:400 20px/1.25 var(--police-titres);color:var(--ambiance-encre)}
.coupe__recit.est-actif,.silence__recit.est-actif{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s var(--courbe) .3s,transform .7s var(--courbe) .3s}
/* prix lisibles sur fond nuit comme sur fond jour */
.coupe-produit .carte-prix,.coupe-produit .wc-block-components-product-price,.coupe-produit .wc-block-components-product-price *,
.une .carte-prix,.une .wc-block-components-product-price,.une .wc-block-components-product-price *,
.une-prix .wc-block-formatted-money-amount{color:var(--ambiance-encre)!important;opacity:1!important}

/* ---------- Produits phares ---------- */
.phares{padding:80px 0}
.collection-phares{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding:0 var(--gouttiere)}

/* ---------- Le silence (scène collante) : le bruit (étape 0), il s'atténue (1), le calme (2) ----------
   Même principe que la coupe : accueil.js choisit l'étape, tout le reste est en CSS. */
.silence{height:280vh}
.silence__scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr .7fr;grid-template-rows:minmax(0,1fr);align-items:center;gap:32px;
  padding:100px max(var(--gouttiere),calc((100vw - var(--largeur)) / 2)) 48px}
.silence__texte,.silence__mesure{position:relative;z-index:2;transition:opacity .9s var(--courbe),transform 1s var(--courbe)}
.silence .surtitre{color:var(--rose)}
.silence__titre{display:grid;margin-bottom:24px}
.silence__etat{grid-area:1/1;font-size:clamp(35px,3.9vw,62px);color:var(--ambiance-encre);transition:opacity .4s ease}
.silence__etat--calme{opacity:0;background:linear-gradient(90deg,var(--lilas),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.silence__etat--calme .ligne>span{background:inherit;-webkit-background-clip:text;background-clip:text}
.silence__chapo{max-width:380px;color:var(--ambiance-douce);margin-bottom:28px}
/* au centre : le plateau carré tient dans la place libre ; les ondes passent derrière les bouchons */
.silence__centre{align-self:stretch;min-height:0;container-type:size;display:grid;place-items:center}
.silence__plateau{position:relative;width:min(100cqw,100cqh);aspect-ratio:1;display:grid;place-items:center}
.silence__plateau::before{content:"";position:absolute;inset:14%;border-radius:50%;opacity:.2;transition:opacity 1.2s var(--courbe);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lilas) 50%,transparent),transparent)}
/* ondes : canevas dessinés une fois (accueil.js), deux largeurs d'écran, qui glissent en boucle */
.silence__onde{position:absolute;left:50%;top:20%;width:100vw;height:60%;translate:-50% 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.onde-jeu{position:absolute;inset:0;transition:opacity 1.2s var(--courbe)}
.onde-jeu--calme{opacity:0}
.onde{position:absolute;left:0;top:0;width:200%;height:100%;animation:onde-defile var(--duree,10s) linear infinite}
.onde--inverse{animation-direction:reverse}
@keyframes onde-defile{to{transform:translateX(-50%)}}
.silence__ondes{position:absolute;inset:0;display:grid;place-items:center;transition:opacity 1s var(--courbe)}
.silence__ondes span{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--rose) 40%,transparent);animation:onde 6s cubic-bezier(.25,.5,.3,1) infinite}
.silence__ondes span:nth-child(2){animation-delay:1.5s;border-color:color-mix(in srgb,var(--lilas) 40%,transparent)}
.silence__ondes span:nth-child(3){animation-delay:3s}
.silence__ondes span:nth-child(4){animation-delay:4.5s;border-color:color-mix(in srgb,var(--lilas) 40%,transparent)}
@keyframes onde{from{transform:scale(.7);opacity:.8}to{transform:scale(1.9);opacity:0}}
.silence__bouchon{position:relative;z-index:1;width:62%;margin:0;transition:opacity .9s var(--courbe),transform 1.2s var(--courbe)}
.silence__bouchon img{width:100%;filter:drop-shadow(0 40px 50px color-mix(in srgb,var(--nuit-3) 90%,transparent))}
/* les bruits s'effacent quand le calme revient */
.bruit{position:absolute;z-index:2;margin:0;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;color:var(--sur-nuit-sourdine);
  background:color-mix(in srgb,var(--nuit-2) 80%,transparent);border:1px solid var(--trait-nuit);opacity:.9;transition:opacity .9s var(--courbe);animation:flotte 7s ease-in-out infinite}
.bruit::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--lilas);vertical-align:1px}
.bruit--1{left:-6%;top:14%}
.bruit--2{right:-4%;top:6%;animation-delay:-1.5s}
.bruit--3{right:-10%;top:58%;animation-delay:-3s}
.bruit--4{left:2%;bottom:10%;animation-delay:-4.5s}
.bruit--5{left:40%;bottom:-2%;animation-delay:-6s}
@keyframes flotte{50%{transform:translateY(-8px)}}
/* vumètre (hauteur de chaque barre : --h ; oscillation en CSS) et décibels */
.silence__mesure{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.vumetre{display:flex;align-items:flex-end;gap:5px;height:120px;margin-bottom:18px}
.vumetre span{width:6px;height:100%;transform-origin:bottom;transform:scaleY(var(--h,1));transition:transform .7s var(--courbe),opacity .7s}
.vumetre i{display:block;height:100%;border-radius:3px;transform-origin:bottom;background:linear-gradient(0deg,color-mix(in srgb,var(--lilas) 80%,transparent),var(--rose));
  animation:vumetre .9s ease-in-out calc(var(--k,0) * -.17s) infinite alternate}
@keyframes vumetre{from{transform:scaleY(.6)}}
.silence__db{font:400 clamp(60px,6.7vw,108px)/.85 var(--police-titres);font-variant-numeric:tabular-nums;color:var(--ambiance-encre)}
.silence__db strong{font-weight:400}
.db-valeur{display:inline-block;width:1.24em;text-align:right;font-variant-numeric:tabular-nums}   /* largeur fixe : « dB » ne bouge pas quand les chiffres changent (accueil.js) */
.silence__legende{margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-nuit-sourdine)}
.silence__note{margin-top:18px;max-width:200px;font-size:13px;color:var(--sur-nuit-sourdine);opacity:.7}
/* les étapes */
.silence[data-etape="-1"] :is(.silence__texte,.silence__mesure){opacity:0;transform:translateY(30px)}
.silence[data-etape="-1"] .silence__bouchon{opacity:0;transform:translate(160px,-60px) rotate(-40deg) scale(.7)}
.silence[data-etape="2"] .silence__bouchon{transform:rotate(6deg) scale(1.06)}
.silence[data-etape="1"] .silence__plateau::before{opacity:.6}
.silence[data-etape="2"] .silence__plateau::before{opacity:1}
.silence[data-etape="1"] .onde-jeu--fort{opacity:.45}
.silence[data-etape="1"] .onde-jeu--calme{opacity:.6}
.silence[data-etape="2"] .onde-jeu--fort{opacity:0}
.silence[data-etape="2"] .onde-jeu--calme{opacity:1}
.silence[data-etape="1"] .silence__ondes{opacity:.5}
.silence[data-etape="2"] .silence__ondes{opacity:0}
.silence[data-etape="1"] .bruit{opacity:.4}
.silence[data-etape="2"] .bruit{opacity:0}
.silence[data-etape="1"] .vumetre span:nth-child(n+7),.silence[data-etape="2"] .vumetre span:nth-child(n+2){transform:scaleY(.08);opacity:.25}
.silence[data-etape="2"] .silence__etat--bruit{opacity:0}
.silence[data-etape="2"] .silence__etat--calme{opacity:1;transition:opacity .9s var(--courbe) .35s}

/* ---------- Les Bouchons Nocturne : trois coloris (accueil.js bascule data-coloris) ---------- */
.une{padding:40px var(--gouttiere) 40px;--lueur-coloris:var(--rose)}
.une[data-coloris="nuit"]{--lueur-coloris:var(--nuit-2)}
.une[data-coloris="sauge"]{--lueur-coloris:var(--coloris-sauge)}
.une__panneau{max-width:var(--largeur);margin:0 auto;position:relative;color:var(--ambiance-encre);display:grid;grid-template-columns:1.1fr 1fr;min-height:640px;align-items:center}
.une__visuel{position:relative;aspect-ratio:1;display:grid;place-items:center}
.une__visuel::before{content:"";position:absolute;inset:4%;border-radius:50%;filter:blur(10px);transition:background .8s var(--courbe);
  background:radial-gradient(closest-side,var(--lueur-coloris),color-mix(in srgb,var(--lilas) 35%,transparent) 55%,transparent)}
.une__visuel::after{content:"";position:absolute;inset:10%;z-index:0;border-radius:50%;border:1px dashed var(--trait-nuit);animation:tourne 40s linear infinite}   /* derrière les bouchons */
@keyframes tourne{to{transform:rotate(360deg)}}
.une__img{position:absolute;inset:11%;z-index:2;display:grid;place-items:center;opacity:0;transform:scale(.85) rotate(-14deg);transition:opacity .6s var(--courbe),transform .9s var(--courbe)}
.une__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 50px color-mix(in srgb,var(--nuit-3) 85%,transparent))}
.une[data-coloris="ivoire"] .une__img--ivoire,.une[data-coloris="nuit"] .une__img--nuit,.une[data-coloris="sauge"] .une__img--sauge{opacity:1;transform:none}
.une__texte{padding:40px 0 40px 32px}
.une .surtitre{color:var(--rose)}
.une__titre{font-size:clamp(40px,5vw,78px);margin-bottom:24px}
.une__chapo{color:var(--ambiance-douce);max-width:420px}
.une-prix .wc-block-product-template{display:block;margin:22px 0 24px;margin-top:22px!important;padding:0;list-style:none}   /* WooCommerce remet la marge haute à zéro */
.une-prix .wc-block-product{margin:0;padding:0;background:none}
.une-prix .carte-prix{font:600 44px/1 var(--police-titres)}
.coloris{margin-bottom:32px}
.coloris__titre{font-size:14px;color:var(--ambiance-douce);margin-bottom:12px}
.coloris__titre strong{color:var(--ambiance-encre);font-weight:600}
.coloris__pastilles{display:flex;gap:14px}
.pastille{width:44px;height:44px;border-radius:50%;font-size:0;cursor:pointer;outline:1px solid var(--ambiance-trait);outline-offset:4px;transition:outline-color .3s,transform .3s var(--courbe)}
@media (hover:hover){.pastille:hover{transform:scale(1.08)}}
.pastille.est-choisie{outline:2px solid var(--rose)}
.pastille--ivoire{background:var(--coloris-ivoire)}
.pastille--nuit{background:var(--coloris-nuit)}
.pastille--sauge{background:var(--coloris-sauge)}

/* ---------- Pack Nuit complète ---------- */
.packs{padding:80px 0 0}
.pack{max-width:1040px;margin:0 auto;padding:10px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px;background:var(--surface);color:var(--texte);
  border-radius:var(--rayon-grand);transition:transform .6s var(--courbe)}
.packs .pack{margin-inline:max(var(--gouttiere),calc((100% - 1040px) / 2))}
@media (hover:hover){.pack:hover{transform:translateY(-6px)}}
.pack__image{position:relative;border-radius:var(--rayon);min-height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:3%;padding:40px 18px 24px;background:var(--surface)}
/* pastille « −15 % » qui flotte */
.packs .pack__image::after{content:"−15 %";position:absolute;top:18px;right:18px;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--degrade-promo);color:#fff;font:700 18px/1 var(--police-texte);transform:rotate(-12deg);
  box-shadow:0 14px 30px -12px var(--rose-vif);animation:pastille-flotte 4s ease-in-out infinite}
@keyframes pastille-flotte{50%{transform:rotate(-6deg) translateY(-6px)}}
.pack__img{min-width:0;margin:0}
.pack__img img{filter:drop-shadow(0 20px 20px color-mix(in srgb,var(--texte) 18%,transparent));transition:transform .7s var(--courbe)}
.pack__img:first-child{width:50%}
.pack__img:last-child{width:36%}
.plus{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface);color:var(--texte);
  font:300 20px/1 var(--police-texte);box-shadow:0 8px 20px color-mix(in srgb,var(--texte) 12%,transparent)}
.pack-infos{display:flex;flex-direction:column;gap:10px;flex:1}
.packs .pack-infos{padding:28px 22px;justify-content:center;gap:14px}
.pack-titre{font:400 40px/1 var(--police-titres);margin:0}
.pack-titre a{text-decoration:none}
.pack-resume{color:var(--sourdine);font-size:15px}
.pack-resume p{margin:0}
.pack-infos .carte-prix{margin-top:auto;font-size:18px}
.pack-remise{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--promo);color:var(--sur-accent);font-size:14px}
.pack-remise strong{font-weight:700}
/* prix barré, prix du pack, économie (inc/boutique.php) et atouts */
.pack-prix{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.pack-prix ins{text-decoration:none;font:600 34px/1 var(--police-titres);color:var(--texte)}
.pack-prix del{font-size:16px;color:var(--sourdine)}
.pack-prix__eco{padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--rose) 35%,#fff);color:var(--promo);font-size:14px;font-weight:700}
.pack-atouts{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.pack-atouts span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--fond);font-size:13.5px;font-weight:600}
.pack-atouts span::before{content:"✓";color:var(--promo);font-weight:800}

/* ---------- La différence, les étapes, la garantie, le journal ---------- */
.difference,.etapes,.journal{padding:80px 0 0}
.etapes{padding-top:40px}
.journal{padding-bottom:80px}
.difference__grille,.etapes__grille{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding-inline:var(--gouttiere);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.atout,.etape{background:var(--surface);border-radius:var(--rayon-grand);padding:36px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.atout--tenue{background:var(--surface-rose)}
.atout__numero,.etape__numero{margin:0;font-size:14px;letter-spacing:.14em;color:var(--sourdine)}
.etape__numero{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--nuit);color:var(--sur-nuit);font-size:18px;letter-spacing:0}
.atout__titre,.etape__titre{margin:0;font-size:22px;line-height:1.2;font-weight:500}
.atout p:last-child,.etape p:last-child{margin:0;color:var(--sourdine);max-width:32ch}
.difference__boutons{justify-content:center;margin-top:40px}
.garantie{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:80px auto 0;padding-inline:var(--gouttiere);text-align:center}
.garantie>*{margin-inline:auto}
.garantie::before{content:"";display:block;width:84px;height:84px;margin:0 auto 24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--rose),var(--lilas) 70%);box-shadow:0 18px 50px -18px var(--rose-vif)}
.garantie__titre{font-size:clamp(36px,4.6vw,64px);line-height:1;font-weight:400;margin:8px auto 18px}
.garantie__texte{max-width:52ch;color:var(--sourdine);margin:0 auto 28px}
.garantie .boutons{justify-content:center;align-items:center;gap:20px}
.journal__liste{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding-inline:var(--gouttiere)}
/* trois articles égaux, sans extrait */
.forum-liste--accueil .forum-articles>li:first-child{grid-column:auto}
.forum-liste--accueil .forum-articles>li:first-child .article-carte__titre{font-size:30px}
.forum-liste--accueil .article-carte__extrait{display:none}

/* ---------- Le défi 7 nuits ---------- */
.defi-une{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding:0 var(--gouttiere) 40px}
.defi-une__carte{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:30px;padding:48px 52px;border-radius:32px;color:var(--sur-nuit);overflow:hidden;
  background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--lilas) 50%,transparent),transparent 55%),radial-gradient(80% 90% at 0% 100%,color-mix(in srgb,var(--rose-vif) 35%,transparent),transparent 60%),var(--nuit)}
.defi-une .surtitre{color:var(--rose)}
.defi-une__titre{margin:4px 0 12px;font:400 clamp(38px,4.4vw,64px)/1 var(--police-titres);color:var(--sur-nuit)}
.defi-une__chapo{margin:0 0 22px;color:var(--sur-nuit-sourdine);font-size:16px;line-height:1.6;max-width:46ch}

/* ---------- Récit ---------- */
.recit{max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin:0 auto;padding:80px var(--gouttiere) 0;display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.recit__photo{grid-column:1/8;grid-row:1;width:100%;border-radius:var(--rayon-grand);overflow:hidden;aspect-ratio:4/5;max-height:760px}   /* toute la largeur de sa colonne, même bornée en hauteur : la carte la chevauche toujours */
.recit__photo img{width:100%;height:118%;object-fit:cover}
.recit__carte{grid-column:7/13;grid-row:1;z-index:1;background:var(--nuit);color:var(--sur-nuit);border-radius:var(--rayon-grand);padding:56px;
  box-shadow:0 40px 80px color-mix(in srgb,var(--texte) 22%,transparent)}
.recit__carte .surtitre{color:var(--rose)}
.recit__titre{font-size:clamp(29px,3vw,43px);margin-bottom:24px;color:var(--sur-nuit)}
.recit__carte p:not(.surtitre):not(.lien-fleche){color:var(--sur-nuit-sourdine);margin-bottom:16px}
.recit__carte .lien-fleche{margin-top:16px}

/* ---------- Adaptatif ---------- */
@media (max-width:1024px){
  .heros{grid-template-rows:auto auto minmax(46vw,1fr) auto;min-height:calc(100svh - 38px)}   /* sous la barre d'annonce */
  .heros__objet{top:52%;width:78vw}
  .heros::after{background:radial-gradient(circle 46vw at 50% 52%,var(--surface) 0%,color-mix(in srgb,var(--surface-rose) 85%,transparent) 53%,color-mix(in srgb,var(--rose) 35%,transparent) 85%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--fond) 60%,transparent) 0%,color-mix(in srgb,var(--fond) 15%,transparent) 40%,color-mix(in srgb,var(--fond) 40%,transparent) 75%,var(--fond) 100%)}
  .puce{display:none}
  .categories__grille{grid-template-columns:1fr 1fr}
  .tuile--rose{grid-column:1/-1;height:440px}
  .tuile--rose .tuile__img{left:20%;right:20%}
  /* une colonne : titre, compteur, oreiller (la place qui reste), récit, achat */
  .coupe__scene{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;align-items:stretch;padding-top:96px;gap:10px}
  .coupe__tete{grid-row:1}
  .coupe__chapo{font-size:15px;max-width:420px;margin-top:10px}
  .coupe__compteur{grid-row:2;display:flex;align-items:center;gap:10px;justify-self:center;margin:0;font-size:14px;font-weight:600;color:var(--sur-nuit-sourdine)}
  .coupe__compteur b{font:400 26px/1 var(--police-titres);color:var(--sur-nuit)}
  .coupe__compteur i{width:64px;height:2px;border-radius:2px;transition:background-size .8s var(--courbe);
    background:linear-gradient(90deg,var(--lilas),var(--rose)) left/var(--progression) 100% no-repeat,var(--trait-nuit)}
  .coupe__compteur em{font-style:normal;color:var(--sur-nuit)}
  .coupe__objet{grid-row:3;grid-column:1}
  .coupe__guide{grid-row:4;grid-column:1;display:block}
  .coupe__guide::before,.coupe__etapes{display:none}
  .coupe__recits{margin:0 auto;width:100%;max-width:520px;text-align:left}
  .coupe__achat{grid-row:5;grid-column:1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}
  .coupe__atouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .coupe__atout{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px}
  .coupe__atout strong{font-size:28px;min-width:0}
  .coupe__atout em{display:none}
  .coupe__atout span{font-size:13px}
  .coupe-produit .wc-block-product{flex-direction:row;align-items:center}
  .coupe-produit .carte-prix{font-size:37px}
  .silence__scene{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);padding-top:90px;gap:16px}
  .silence__texte{grid-column:1/-1}
  .silence__centre{grid-column:1}
  .silence__mesure{grid-column:2}
  .une__panneau{grid-template-columns:1fr}
  .une__visuel{max-width:520px;width:100%;justify-self:center}
  .une__texte{padding:0 0 20px}
  .pack{grid-template-columns:1fr 1fr}
  .difference__grille,.etapes__grille{grid-template-columns:1fr;max-width:560px}
  .difference,.etapes,.journal{padding-top:56px}
  .etapes{padding-top:28px}
  .journal{padding-bottom:56px}
  .garantie{margin-top:56px}
  .recit__photo{grid-column:1/10}
  .recit__carte{grid-column:4/13;grid-row:2;margin-top:-120px}
}
@media (max-width:860px){
  .defi-une{padding-bottom:32px}
  .defi-une__carte{grid-template-columns:1fr;padding:30px 24px;text-align:left}
}
/* téléphone : le héros entier tient dans le premier écran */
@media (max-width:781px){
  .heros{grid-template-rows:auto auto minmax(140px,1fr) auto;gap:6px;padding-top:calc(var(--entete-h) - 6px);padding-bottom:18px}
  .heros__surtitre{margin-bottom:8px}
  .heros__titre{font-size:min(12.4vw,50px)}
  .heros__objet{top:var(--objet-top,47%)!important;width:var(--objet-l,86vw)!important}   /* posés par accueil.js */
  .heros__produit--autre{padding:2% 16% 18%}
  .heros__bas{gap:10px}
  .heros__chapo{margin:0 0 10px;font-size:14.5px;line-height:1.5}
  .heros .boutons{flex-wrap:nowrap;gap:8px}
  .heros .boutons .wp-block-button{flex:0 1 auto}
  .heros .boutons .wp-block-button__link{min-height:46px;padding:0 16px;font-size:14px;white-space:nowrap}
  .heros__test{margin:2px 0 0;font-size:14px;white-space:nowrap}
  .heros__test-question{display:none}
  .mini-carte .wc-block-product{gap:12px;padding:8px 16px 8px 8px!important;border-radius:16px}
  .mini-carte-image{width:58px!important;height:58px!important;padding:4px;border-radius:12px}
  .mini-carte-titre,.mini-carte-titre a{font-size:14px!important}
  .mini-carte-prix,.mini-carte-prix *{font-size:24px!important}
  .mini-carte-offre{margin-top:3px;padding:2px 8px}
  /* scènes : tout tient dans la hauteur réelle du téléphone (barres du navigateur déduites : 100svh) */
  .coupe{--format:1.45}
  .coupe__scene,.silence__scene{padding:76px var(--gouttiere) 18px}
  .coupe__scene{gap:8px}
  .coupe__tete .surtitre{margin-bottom:6px}
  .coupe__titre{font-size:clamp(34px,10.5vw,44px)}
  .coupe__titre .ligne{display:inline-block;vertical-align:top}   /* « L'Oreiller Aéra » sur une ligne */
  .coupe__titre .ligne:first-child{margin-right:.22em}
  .coupe__atouts,.coupe__chapo{display:none}
  .coupe__recits{margin-top:0}
  .coupe__recit,.silence__recit{font-size:14.5px;line-height:1.55}
  .coupe__recit strong,.silence__recit strong{font-size:18px;margin-bottom:4px}
  .silence__recits{max-width:none;margin-top:12px}
  .etiquette{--pad:10px;--point:10px;gap:7px;padding:6px var(--pad);font-size:13px;white-space:normal;max-width:46vw;border-radius:16px}
}
/* téléphone et tablette : Les Bouchons Nocturne arrivent en tournant, quand le bloc entre dans l'écran (accueil.js) */
.une--a-entrer .une__visuel{transition:opacity 1s var(--courbe),transform 1.6s var(--sortie)}
.une--a-entrer:not(.une--entree) .une__visuel{opacity:0;transform:translateY(80px) rotate(-18deg) scale(.86)}
/* téléphone : Les Bouchons Nocturne, le titre d'abord, puis l'image, puis le reste */
@media (max-width:781px){
  .une__panneau{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .une__texte{display:contents}
  .une__texte>*{order:3}
  .une .surtitre{order:0;align-self:flex-start}
  .une__titre{order:1;margin-bottom:6px}
  .une__visuel{order:2;max-width:360px;margin:0 auto}
}
/* téléphone et tablette : scènes allégées. Les flous et les ombres floues recalculés à chaque image
   faisaient trembler la coupe de l'oreiller et le silence pendant le défilement. */
@media (max-width:781px),(pointer:coarse){
  .etiquette,.puce,.bruit{-webkit-backdrop-filter:none;backdrop-filter:none}
  .coupe__housse,.coupe__mousse,.coupe__lueur,.silence__bouchon img,.une__img img{filter:none}
  .coupe__housse,.coupe__mousse,.coupe__lueur,.silence__bouchon{will-change:transform,opacity}
}
/* téléphone court (iPhone SE, mini, barres du navigateur visibles) : l'essentiel des scènes */
@media (max-width:781px) and (max-height:640px){
  .coupe__tete .surtitre,.silence .surtitre{display:none}
  .coupe__scene,.silence__scene{padding-top:64px}
  .coupe__recit,.silence__recit{font-size:13.5px;line-height:1.5}
  .coupe__recit strong,.silence__recit strong{font-size:16px;margin-bottom:2px}
}
@media (max-width:781px) and (max-height:760px){
  .heros__chapo{display:none}
  .heros__titre{font-size:min(11.2vw,44px)}
}
@media (max-width:640px){
  .heros__nouveau{display:none}
  .heros::after{background:radial-gradient(circle 60vw at 50% 47%,var(--surface) 0%,color-mix(in srgb,var(--surface-rose) 85%,transparent) 53%,color-mix(in srgb,var(--rose) 35%,transparent) 85%,transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--fond) 60%,transparent) 0%,color-mix(in srgb,var(--fond) 15%,transparent) 40%,color-mix(in srgb,var(--fond) 40%,transparent) 75%,var(--fond) 100%)}
  .heros__bas{grid-template-columns:1fr}
  .mini-carte{justify-self:stretch}
  .categories{padding:56px 0}
  .categories__grille{grid-template-columns:1fr;gap:12px}
  .tuile--rose,.tuile--nuit,.tuile--lilas{height:360px;grid-column:auto}
  .tuile--rose .tuile__img{left:10%;right:10%}
  .tuile__nom{font-size:29px}
  .coupe{height:250vh}
  .coupe-produit .carte-prix{font-size:38px}
  .coupe__achat .lien-fleche{display:none}
  .phares{padding:56px 0}
  .silence{height:240vh}
  .silence__scene{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
  .silence__etat{font-size:clamp(32px,9.6vw,42px)}
  .silence__titre{margin-bottom:0}
  .silence__chapo,.silence .lien-fleche{display:none}
  .silence__centre{grid-column:1}
  .silence__mesure{grid-column:1;flex-direction:row;align-items:flex-end;justify-self:stretch;justify-content:space-between;text-align:left;gap:12px}
  .vumetre{height:48px;margin:0;gap:4px}
  .silence__db{font-size:44px}
  .silence__legende,.silence__note{display:none}
  .bruit{font-size:13px;padding:6px 10px}
  .bruit--1{left:-4%}
  .bruit--3{right:-4%}
  .une{padding-bottom:28px}
  .une-prix .carte-prix{font-size:35px}
  .packs{padding:56px 0 0}
  .pack{grid-template-columns:1fr}
  .pack__image{min-height:220px;padding:36px 14px 18px}
  .packs .pack__image::after{width:auto;height:auto;top:12px;right:12px;padding:5px 11px;border-radius:999px;font-size:14px}   /* pastille discrète, hors des produits */
  .plus{width:28px;height:28px;font-size:17px}
  .pack-titre{font-size:29px}
  .recit{padding-top:56px;padding-bottom:0}
  .recit__photo{grid-column:1/-1}
  .recit__carte{grid-column:1/-1;margin:-80px 12px 0;padding:32px 24px}
}
@media (max-width:600px){
  .atout,.etape{padding:28px 22px}
  .bandeau{padding:12px 0}
  .bandeau__piste>.bandeau__item{font-size:14px;padding:0 18px;gap:18px}
  .forum-liste--accueil .forum-articles>li:first-child .article-carte__titre{font-size:26px}
}
@media (max-width:520px){
  .heros{min-height:calc(100svh - 34px)}
}
@media (max-width:360px){
  .heros .boutons .wp-block-button__link{padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .coupe,.silence{height:auto}
  .coupe__scene,.silence__scene{position:relative;height:auto}
  .coupe__objet,.silence__centre{container-type:normal}
  .coupe__plateau{width:min(100%,720px)}
  .silence__plateau{width:min(100%,420px)}
  .bandeau__piste{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .coupe__recit,.silence__recit{transition:none}
  .heros--flotte .heros__produit img,.packs .pack__image::after{animation:none}
}


/* Premier écran : la hauteur disponible compte autant que la largeur. */
.heros{min-height:100svh}
.admin-bar .heros{min-height:calc(100svh - 32px)}
@media(min-width:782px){
 .heros{--titre-heros:clamp(58px,min(7.5vw,10svh),110px);grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;padding-top:calc(var(--entete-h) + 4px);padding-bottom:18px}
 .heros__haut{margin:0}
 .heros__titre{font-size:var(--titre-heros);line-height:.98;width:min(100%,10.6em);justify-self:center}
 .heros__objet{position:relative;grid-row:3;justify-self:center;align-self:center;left:auto;top:auto;translate:none;width:min(58vw,calc(var(--titre-heros) * 7.4),760px);margin-block:24px;aspect-ratio:1.6}
 .heros__bas{gap:24px}
 .heros__chapo{font-size:15px;line-height:1.5;max-width:50ch;margin-bottom:10px}
 .heros .boutons{gap:10px}
 .heros .boutons .wp-block-button__link{min-height:48px;padding-inline:24px;font-size:15px}
 .heros__test{font-size:14px;margin-top:8px}
 .mini-carte .wc-block-product{gap:12px;padding:10px 16px 10px 10px!important}
 .mini-carte-image{width:76px!important;height:76px!important}
 .mini-carte-prix,.mini-carte-prix *{font-size:28px!important}
}
@media(max-width:781px){
 .admin-bar .heros{min-height:calc(100svh - 46px)}
}
@media(max-width:781px){
 .heros{grid-template-rows:auto auto minmax(80px,1fr) auto;gap:4px;padding-bottom:12px}
 .heros__haut{margin-bottom:0}
 .heros__surtitre{margin-bottom:2px}
}
@media(max-width:781px) and (max-height:640px){
 .heros__surtitre{display:none}
 .heros{grid-template-rows:auto auto minmax(90px,1fr) auto;padding-top:calc(var(--entete-h) - 16px)}
}

/* La barre d’annonce reste au-dessus du héros ; sa place est déduite de l’écran. */
.wp-site-blocks:has(>header .annonce) .heros{--reserve-annonce:var(--annonce-h)}
.heros{min-height:calc(100svh - var(--reserve-annonce,0px))}
.admin-bar .heros{min-height:calc(100svh - var(--reserve-annonce,0px) - 32px)}
@media(max-width:781px){.admin-bar .heros{min-height:calc(100svh - var(--reserve-annonce,0px) - 46px)}}


/* Au téléphone aussi, la photo occupe sa rangée : changement de hauteur sans mesure par script. */
@media(max-width:781px){
 .heros__objet{position:relative;grid-row:3;justify-self:center;align-self:stretch;left:auto;top:auto!important;translate:none;width:86vw!important;height:auto;aspect-ratio:auto;margin-block:16px}
 .heros__produit{transform:none}
 .heros--flotte .heros__produit img{animation:oreiller-flotte-mobile 3.6s ease-in-out infinite alternate}
 @keyframes oreiller-flotte-mobile{to{transform:translateY(-6px)}}
}

/* Même composition sur les petits ordinateurs : pas de réduction isolée de la photo.
   Le flux réserve naturellement la place du titre, de la photo et des actions. */

/* Le léger flottement ne déforme pas la composition et reste dans sa place réservée. */
@media(min-width:782px){.heros__produit{transform:none}}
@media(min-width:782px) and (prefers-reduced-motion:no-preference){.heros--flotte .heros__produit img{animation:oreiller-repose 4.5s ease-in-out infinite alternate}}
@keyframes oreiller-repose{to{transform:translateY(-8px)}}

/* Tablettes : conserver la présentation déjà vérifiée au toucher. */
@media(min-width:782px) and (max-width:1024px){
 .heros{--admin-heros:0px;--titre-heros:clamp(50px,min(7.5vw,9svh),104px);--photo-heros-h:calc(100svh - var(--reserve-annonce,0px) - var(--admin-heros) - var(--entete-h) - 100px - var(--titre-heros) * 2.1);height:calc(100svh - var(--reserve-annonce,0px) - var(--admin-heros));min-height:0!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:32px auto minmax(0,1fr);column-gap:clamp(36px,5vw,80px);row-gap:8px;padding-top:calc(var(--entete-h) + 4px);padding-bottom:16px}
 .admin-bar .heros{--admin-heros:32px}
 .heros__haut{grid-column:1/-1;grid-row:1}
 .heros__titre{grid-column:1/-1;grid-row:2;margin:0}
 .heros__objet{grid-column:2;grid-row:3;width:min(100%,calc(var(--photo-heros-h) * 1.6),760px);max-height:calc(100% - 32px);margin-block:16px;aspect-ratio:1.6}
 .heros__bas{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-width:0;align-self:stretch}
 .heros__gauche{width:100%}
 .heros__chapo{font-size:14px;line-height:1.5;max-width:none;margin-bottom:8px}
 .heros .boutons{gap:8px;flex-wrap:wrap}
 .heros .boutons .wp-block-button__link{min-height:44px;font-size:14px;padding-inline:18px}
 .heros__test{font-size:14px;line-height:1.45;margin-top:8px}
 .heros .mini-carte{align-self:flex-start;max-width:100%}
 .heros .mini-carte .wc-block-product{gap:10px;padding:8px 12px 8px 8px!important}
 .heros .mini-carte-image{width:58px!important;height:58px!important}
 .heros .mini-carte-prix,.heros .mini-carte-prix *{font-size:24px!important}
 .heros .mini-carte-titre,.heros .mini-carte-titre a{font-size:14px!important}
 .heros .mini-carte-offre{margin-top:4px;padding:2px 8px}
 .heros .puce{font-size:13px;padding:6px 10px}
 .heros .puce::after{width:36px;background:radial-gradient(circle at calc(100% - 10px) 50%,var(--texte) 0 5px,color-mix(in srgb,var(--surface) 80%,transparent) 5.5px 9px,transparent 9.5px),repeating-linear-gradient(90deg,var(--texte) 0 4px,transparent 4px 8px) left center/22px 1px no-repeat}
 .heros .puce--gauche{left:24%;top:48%;translate:calc(-100% - 36px) -50%}
 .heros .puce--droite{left:62%;top:28%;translate:36px -50%}
}
/* Tablette étroite et basse : garder les deux actions sur une seule ligne. */
@media(min-width:782px) and (max-width:900px) and (max-height:700px){
 .heros{--titre-heros:50px}
 .heros__bas{gap:10px}
 .heros__chapo{margin-bottom:6px}
 .heros__test{margin-top:6px}
 .heros .boutons .wp-block-button__link{font-size:13px;padding-inline:14px}
}
/* WordPress utilise encore une barre de 46 px à la largeur exacte de 782 px. */
@media(min-width:782px) and (max-width:782px){.admin-bar .heros{--admin-heros:46px}}
/* Ordinateur : composition d'origine, titre en haut, oreiller central,
   texte en bas à gauche et prix en bas à droite. Les proportions dépendent
   de la hauteur visible aussi : les commandes restent dans le premier écran. */
@media(min-width:1025px){
 .heros{--admin-heros:0px;--titre-heros:clamp(50px,min(8.4vw,calc(23svh - 84px)),138px);--heros-l:min(calc(100vw - 2 * var(--gouttiere)),var(--largeur));--bas-l:clamp(280px,calc(var(--heros-l) * .27),335px);height:calc(100svh - var(--reserve-annonce,0px) - var(--admin-heros));min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:32px auto minmax(0,1fr);gap:8px;padding-top:calc(var(--entete-h) + 4px);padding-bottom:16px}
 .admin-bar .heros{--admin-heros:32px;min-height:0}
 .heros__haut{grid-column:1;grid-row:1;margin:0}
 .heros__titre{grid-column:1;grid-row:2;width:min(100%,9em);font-size:var(--titre-heros);line-height:.98;margin:0}
 .heros__objet{grid-column:1;grid-row:3;align-self:center;justify-self:center;position:relative;left:auto;top:auto;translate:none;aspect-ratio:auto;width:min(calc(var(--heros-l) - 2 * var(--bas-l) - 48px),calc((100svh - var(--reserve-annonce,0px) - var(--admin-heros) - var(--entete-h) - 100px - var(--titre-heros) * 2.1) * 1.6),740px);height:auto;max-height:100%;margin:20px 0;aspect-ratio:1.6}
 .heros__bas{grid-column:1;grid-row:3;align-self:end;display:grid;grid-template-columns:var(--bas-l) minmax(0,1fr);align-items:end;gap:24px;pointer-events:none}
 .heros__gauche,.heros .mini-carte{pointer-events:auto}
 .heros__chapo{font-size:14px;line-height:1.5;max-width:none;margin-bottom:10px}
 .heros .boutons{gap:8px;flex-wrap:nowrap}
 .heros .boutons .wp-block-button__link{font-size:14px;min-height:44px;padding-inline:16px}
 .heros__test{font-size:14px;line-height:1.45;margin-top:8px}
 .heros .mini-carte{justify-self:end;align-self:end;max-width:100%}
 .heros .mini-carte .wc-block-product{gap:12px;padding:10px 16px 10px 10px!important}
 .heros .mini-carte-image{width:76px!important;height:76px!important}
 .heros .mini-carte-prix,.heros .mini-carte-prix *{font-size:28px!important}
 .heros .mini-carte-titre,.heros .mini-carte-titre a{font-size:15px!important}
 .heros .puce{font-size:13px;padding:6px 10px}
 .heros .puce::after{width:36px;background:radial-gradient(circle at calc(100% - 10px) 50%,var(--texte) 0 5px,color-mix(in srgb,var(--surface) 80%,transparent) 5.5px 9px,transparent 9.5px),repeating-linear-gradient(90deg,var(--texte) 0 4px,transparent 4px 8px) left center/22px 1px no-repeat}
 .heros .puce--gauche{left:24%;top:25%;translate:calc(-100% - 36px) -50%}
 /* Point rouge de la capture client : 51 % / 28,5 % de la photo encadrée.
    Les 10 px compensent son placement dans le trait de liaison. */
 .heros .puce--droite{left:calc(51% - 10px);top:28.5%;translate:36px -50%}
}
@media(min-width:1025px) and (max-width:1199px){
 .home .entete-rangee{gap:16px}
 .home :is(.menu-catalogue,.menu-pages) .wp-block-navigation__container{gap:16px;flex-wrap:nowrap}
 .heros .boutons .wp-block-button__link{font-size:13px;padding-inline:12px}
 .heros .puce--gauche{top:16%}
 .heros__objet{width:min(calc(var(--heros-l) - 2 * var(--bas-l) - 28px),calc((100svh - var(--reserve-annonce,0px) - var(--admin-heros) - var(--entete-h) - 100px - var(--titre-heros) * 2.1) * 1.6))}
}
/* Une grande hauteur rend à la photo son ampleur d'origine. La marge basse
   réserve les textes et les actions avant d'élargir l'oreiller central. */
@media(min-width:1025px) and (min-height:1000px){
 .heros__objet{width:min(50vw,740px,calc((100svh - var(--reserve-annonce,0px) - var(--admin-heros) - var(--entete-h) - 260px - var(--titre-heros) * 2.1) * 1.6));margin:20px 0 180px}
}
/* Un seul flottement porte la photo et ses repères, même après redimensionnement.
   translate reste indépendant des rotations et du défilement pilotés par GSAP. */
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
 .heros--flotte .heros__produit img{animation:none}
 .heros.heros--flotte .heros__objet{animation:oreiller-ensemble 4.5s ease-in-out infinite alternate}
 @keyframes oreiller-ensemble{to{translate:0 -8px}}
}

/* ---------- Lisibilité pendant le changement d'ambiance (1.8.21) ----------
   Le fond de l'accueil peut repasser au rosé alors qu'une scène de nuit est encore à l'écran (fin de la
   coupe, sortie du silence) : ces éléments suivent l'ambiance au lieu d'une couleur de nuit fixe. */
.coupe__atout{transition:background-color .9s var(--courbe),border-color .9s var(--courbe)}
body:not(.theme-nuit) .coupe__atout{background:color-mix(in srgb,#fff 78%,transparent);border-color:var(--trait)}
.silence__legende,.silence__note{color:var(--ambiance-douce)}
.coupe__compteur{color:var(--ambiance-douce)}
.coupe__compteur b,.coupe__compteur em{color:var(--ambiance-encre)}

/* ---------- Ordinateurs à faible hauteur visible : portables 13 à 15 pouces (1.8.21) ----------
   Même composition (titre en haut, étapes à gauche, oreiller au centre, achat à droite) ; seules les
   proportions suivent la hauteur : titre, marges, encadrés et prix se resserrent pour que l'oreiller garde
   de la place et que le prix et le bouton restent dans l'écran. Contrôle : verif-scenes.js (portables). */
@media (min-width:1025px) and (max-height:820px){
  .coupe__scene{padding:clamp(64px,11vh,96px) var(--gouttiere) clamp(16px,3vh,32px);gap:clamp(10px,2vh,20px)}
  .coupe__titre{font-size:min(5vw,8.6vh,79px)}
  .coupe__chapo{margin-top:8px;font-size:15px;line-height:1.5}
  .coupe__etapes{gap:clamp(12px,2.4vh,24px)}
  .coupe__recits{margin-top:clamp(10px,2vh,20px)}
  .coupe__recit{font-size:14.5px;line-height:1.5}
  .coupe__recit strong{font-size:18px;margin-bottom:4px}
  .coupe__achat{gap:clamp(10px,2vh,18px)}
  .coupe__atouts{gap:6px;margin-bottom:0}
  .coupe__atout{padding:7px 12px;gap:12px}
  .coupe__atout strong{font-size:28px;min-width:36px}
  .coupe-produit .wc-block-product{gap:clamp(10px,2vh,16px)}
  .coupe-produit .carte-prix{font-size:clamp(34px,6vh,47px)}
  .coupe-produit .carte-bouton .wc-block-components-product-button__button{min-height:46px}
}
@media (min-width:1025px) and (max-height:640px){
  .home .packs .tete-section{margin-bottom:14px}
  .packs .pack-infos{padding-block:10px;gap:6px}
  .packs .pack-resume{font-size:14px;line-height:1.45}
  .coupe__chapo,.coupe__atout em{display:none}
  .coupe__tete .surtitre{margin-bottom:4px}
  .coupe__recit{font-size:14px}
}

/* ---------- Ordinateur : chaque section de présentation tient dans la hauteur visible (1.8.21) ----------
   --vue = hauteur visible, barre d'administration déduite (base.css). Chaque image garde sa taille d'origine sur un
   grand écran (min(taille d'origine, …)) et se réduit d'elle-même sur un portable pour que titre, image,
   texte et bouton d'une section se voient ensemble. Contrôle : outils/recette/sections-hauteur.js. */
@media (min-width:1025px){
  .home .tete-section{margin-bottom:clamp(24px,5.5vh,56px)}
  .categories,.packs{padding-top:clamp(36px,8vh,80px)}
  .categories{padding-bottom:clamp(36px,8vh,80px);--tuile:min(560px,calc(var(--vue) - 230px))}
  .tuile--rose{height:var(--tuile)}
  .tuile--lilas{height:calc(var(--tuile) - 40px)}
  .tuile--nuit{height:calc(var(--tuile) - 80px)}
  .tuile__nom{font-size:clamp(26px,4.4vh,35px)}
  .une{padding-block:clamp(16px,4vh,40px)}
  .une__panneau{min-height:min(640px,calc(var(--vue) - 32px))}
  .une__visuel{width:min(100%,calc(var(--vue) - 64px));justify-self:center}
  .une__texte{padding-block:clamp(12px,3vh,40px)}
  .une__titre{font-size:clamp(36px,min(5vw,9vh),78px);margin-bottom:clamp(12px,2.6vh,24px)}
  .une-prix .wc-block-product-template{margin:clamp(12px,2.4vh,22px) 0!important}
  .une-prix .carte-prix{font-size:clamp(34px,6.4vh,44px)}
  .pack__image{min-height:min(420px,calc(var(--vue) - 290px))}
  .packs .pack-infos{padding-block:clamp(14px,3vh,28px);gap:clamp(8px,1.6vh,14px)}
  .pack-titre{font-size:clamp(28px,5.6vh,40px)}
  .recit{padding-top:clamp(36px,8vh,80px)}
  .recit__photo{max-height:min(760px,calc(var(--vue) - 48px))}
  .recit__carte{padding:clamp(28px,6vh,56px)}
  .journal .forum-liste--accueil .article-carte__image img{max-height:max(140px,calc(var(--vue) - 360px))}
}

/* ---------- Haut de l'accueil sur ordinateur (1.8.21) : étiquettes plus légères, l'oreiller reste visible ---------- */
@media (min-width:1025px){
  .heros .puce{background:color-mix(in srgb,var(--surface) 52%,transparent);border-color:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 6px 18px color-mix(in srgb,var(--texte) 7%,transparent)}
}
@media (min-width:1025px) and (max-height:760px){
  .heros .puce{padding:4px 9px}
}

/* PIÈGE iPhone (capture du client, 16-10) : pendant l'apparition (transform), Safari ne rogne plus le halo flou
   des tuiles par leurs coins arrondis ; des coins carrés plus foncés apparaissent. La découpe explicite tient. */
.tuile{clip-path:inset(0 round var(--rayon-grand))}