/* ==========================================================================
   WELLPUTT — feuille front (sections)

   Le design v1, sous un seul prefixe .wp-*. En v1 le meme design existait
   trois fois (.wp-* accueil, .wpp-* fiche, .wpc-* categorie) : chaque
   composant est repris ici une fois, avec le traitement le plus abouti des
   trois (cartes avec survol, video a couverture cliquable, banniere de
   categorie avec fil d'Ariane, bandeau d'arguments, colonne d'achat).

   La mise en page complete de la fiche produit et de la page categorie est
   dans product-page.css / category-page.css, chargees seulement la.

   Rien ici ne s'applique en dehors de .wp-* : aucun conflit avec le theme.
   ========================================================================== */

:root{
  --wp-accent:#F15A29;
  --wp-accent-alt:#db2626;
  --wp-ink:#1a1a1a;
  --wp-sand:#f4f2ef;
  --wp-sand-2:#e9e6e1;
  --wp-muted:#666;
  --wp-gold:#D9A521;
  --wp-line:rgba(0,0,0,.1);
  --wp-title:"Oswald",system-ui,sans-serif;
  --wp-body:"Poppins",system-ui,-apple-system,sans-serif;
}

/* ---------- Reset local -------------------------------------------------- */
.wp-scope,[class^="wp-"],[class*=" wp-"]{ box-sizing:border-box; }
.wp-scope{ font-family:var(--wp-body); color:var(--wp-ink); }
.wp-scope img{ display:block; max-width:100%; }
.wp-scope p{ margin:0; }

/* ---------- Sections ------------------------------------------------------ */
.wp-section{ padding:clamp(80px,12vh,140px) clamp(24px,5vw,64px); background:#fff; color:var(--wp-ink); }
.wp-section--tall{ padding:clamp(90px,15vh,190px) clamp(24px,5vw,64px); }
.wp-section--text{ padding:clamp(50px,7vh,90px) clamp(24px,5vw,64px); }
.wp-section--flush{ padding-left:0; padding-right:0; }
.wp-section--sand{ background:var(--wp-sand); }
.wp-section--ink{ background:var(--wp-ink); color:#fff; }
.wp-wrap{ max-width:1360px; margin:0 auto; }
.wp-wrap--narrow{ max-width:1100px; margin:0 auto; text-align:center; }
.wp-wrap--read{ max-width:900px; margin:0 auto; }
.wp-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:20px; margin-bottom:clamp(36px,5vh,64px);
}
.wp-head--center{ display:block; text-align:center; margin-bottom:clamp(44px,6vh,72px); }

@media (max-width:1024px){
  .wp-section{ padding:clamp(56px,8vh,90px) clamp(20px,4vw,40px); }
  .wp-section--tall{ padding:clamp(64px,10vh,110px) clamp(20px,4vw,40px); }
}
@media (max-width:767px){
  .wp-section{ padding:44px 20px; }
  .wp-section--tall{ padding:56px 20px; }
  .wp-section--text{ padding:40px 20px; }
  .wp-section--flush{ padding-left:0; padding-right:0; }
  .wp-head{ display:block; }
  .wp-head .wp-h2{ margin-bottom:14px; }
  /* lien « Tous les packs / Voir tous les tapis » : colle au texte d'au-dessus sinon */
  .wp-head > :last-child:not(:first-child){ margin-top:14px; }
}

/* ---------- Typographie --------------------------------------------------- */
.wp-eyebrow{
  font-family:var(--wp-title); letter-spacing:5px; text-transform:uppercase;
  font-size:13px; color:var(--wp-accent); margin:0 0 20px;
}
.wp-eyebrow--tight{ letter-spacing:4px; margin-bottom:16px; }
.wp-h1{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase; color:var(--wp-ink);
  letter-spacing:.5px; line-height:1; font-size:clamp(40px,5.4vw,72px); margin:0 0 6px;
}
.wp-h2{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase; color:var(--wp-ink);
  line-height:1.06; letter-spacing:.5px; font-size:clamp(32px,4.4vw,60px); margin:0;
}
.wp-h2--xl{ font-size:clamp(38px,6vw,84px); line-height:1.06; }
.wp-h3{
  font-family:var(--wp-title); font-weight:500; text-transform:uppercase; color:var(--wp-ink);
  letter-spacing:.5px; font-size:20px; margin:0 0 8px;
}
.wp-lead{
  font-weight:300; font-size:clamp(16px,1.5vw,20px); line-height:1.7;
  color:var(--wp-muted); margin:34px auto 0; max-width:640px;
}
/* Le theme redefinit "margin" sur les <p>, ce qui annulait le "auto" et
   collait le paragraphe a gauche : on reaffirme le centrage. */
.wp-wrap--narrow .wp-lead{
  max-width:720px !important; margin:clamp(28px,4vh,52px) auto 0 !important;
  text-align:center !important; text-wrap:pretty;
}
.wp-text{ font-weight:300; font-size:16px; line-height:1.7; color:#555; margin:0 0 28px; }
.wp-longtext{ font-weight:300; font-size:16.5px; line-height:1.85; color:#555; margin-top:24px; }
.wp-longtext p{ margin:0 0 16px; }
.wp-longtext h2,.wp-longtext h3{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--wp-ink);
}
.wp-accent{ color:var(--wp-accent); }

@media (max-width:767px){
  .wp-lead{ margin-top:20px; font-size:15.5px; }
}
@media (max-width:480px){
  .wp-h1{ font-size:clamp(30px,9vw,40px); }
  .wp-h2,.wp-h2--xl{ font-size:clamp(26px,8vw,36px); }
}

/* Section a fond noir : tout repasse en blanc (sauf l'interieur des cartes). */
.wp-section--ink .wp-h1,
.wp-section--ink .wp-h2,
.wp-section--ink .wp-h3,
.wp-section--ink .wp-list li,
.wp-section--ink .wp-longtext h2,
.wp-section--ink .wp-longtext h3{ color:#fff; }
.wp-section--ink .wp-lead,
.wp-section--ink .wp-text,
.wp-section--ink .wp-longtext,
.wp-section--ink .wp-app__text{ color:rgba(255,255,255,.78); }
.wp-section--ink .wp-link{ color:#fff; border-color:rgba(255,255,255,.35); }
.wp-section--ink .wp-link:hover{ color:var(--wp-accent); border-color:var(--wp-accent); }
.wp-section--ink .wp-stat__label{ color:rgba(255,255,255,.6); }

/* ---------- Boutons & liens ---------------------------------------------- */
.wp-btn{
  display:inline-block; background:var(--wp-accent);
  font-family:var(--wp-title); font-weight:600; font-size:15px; letter-spacing:1.8px;
  text-transform:uppercase; padding:17px 40px; border:0; border-radius:3px; cursor:pointer;
  box-shadow:0 8px 30px rgba(241,90,41,.35);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
/* Le theme force une couleur sur tout <a> : on la reprend, avec !important. */
.wp-btn,.wp-btn:link,.wp-btn:visited,.wp-btn:hover,.wp-btn:focus,.wp-btn:active,
.wp-btn span{ color:#fff !important; text-decoration:none !important; }
.wp-btn:hover,.wp-btn:focus{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(241,90,41,.5); }
.wp-btn--dark{ background:var(--wp-ink); box-shadow:none; }
.wp-btn--dark:hover{ background:var(--wp-accent); box-shadow:none; }
.wp-btn--sm{ font-size:12px; padding:12px 22px; letter-spacing:2.2px; }
.wp-link{
  display:inline-block; font-family:var(--wp-title); font-weight:500; letter-spacing:2px;
  text-transform:uppercase; font-size:14px; color:var(--wp-ink); text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.2); padding-bottom:5px;
  transition:color .3s ease, border-color .3s ease;
}
.wp-link:hover{ color:var(--wp-accent); border-color:var(--wp-accent); text-decoration:none; }

@media (max-width:767px){
  .wp-btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------- Icones (jeu du module) --------------------------------------- */
.wp-icon{
  display:block; width:34px; height:34px; flex-shrink:0;
  stroke:var(--wp-accent); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Pleine largeur (theme Warehouse) ------------------------------ *
 * Le theme enferme le contenu dans un .container. Ces marges negatives font
 * ressortir les sections sur toute la fenetre. Elles supposent un conteneur
 * centre : c'est le cas de la page d'accueil. Quand le module reprend la
 * page (fiche ou categorie), c'est la mesure JavaScript de front.js qui
 * prend le relais, en pixels.                                               */
body{ overflow-x:hidden; }
.wp-hero,.wp-catbanner,.wp-section,.wp-reassurance,.wp-announce,.wp-packband,.wp-overlay{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; max-width:100vw;
}
#wrapper > .container,#content-wrapper,#index #content,.page-content--index{ overflow:visible; }
/* Page categorie non reprise : la colonne de filtres decentre le conteneur,
   la pleine largeur CSS y serait fausse. Les sections restent dans leur colonne. */
.wp-scope--category .wp-section,
.wp-scope--category .wp-catbanner,
.wp-scope--category .wp-reassurance,
.wp-scope--category .wp-packband,
.wp-scope--category .wp-overlay{ margin-left:0; margin-right:0; width:auto; max-width:none; }

/* Accueil : le hero colle au menu, sans la bande blanche du theme. */
#index #wrapper,#index #wrapper > .container,#index #content-wrapper,#index #content,
#index .page-content--index,#index #main{ padding-top:0 !important; margin-top:0 !important; }
#index #main > .page-header,#index .breadcrumb,#index #js-product-list-header{ display:none !important; }

/* ---------- Bandeau d'annonce -------------------------------------------- */
.wp-announce{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 16px; font:500 14px/1.4 var(--wp-body); text-align:center;
}
.wp-announce a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Carte cadeau (bloc giftcard, module wpgiftcard) ---------------- */
.wp-gift__inner{ display:grid; grid-template-columns:1fr; gap:28px 48px; align-items:center; }
@media (min-width:992px){ .wp-gift__inner{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } }
.wp-gift__cta{ margin-top:26px; }
.wp-gift__cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:768px){ .wp-gift__cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:992px) and (max-width:1279px){ .wp-gift__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.wp-gift__card{ display:flex; flex-direction:column; gap:4px; color:inherit; text-decoration:none !important; }
.wp-gift__media{ position:relative; display:block; aspect-ratio:1; overflow:hidden; border-radius:6px; background:#f4f4f4; }
.wp-gift__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.wp-gift__card:hover .wp-gift__media img{ transform:scale(1.04); }
.wp-gift__badge{ position:absolute; top:8px; left:8px; padding:5px 8px; background:var(--wp-accent); color:#fff; font:700 14px/1 var(--wp-title); }
.wp-gift__name{ margin-top:6px; font:500 13px/1.3 var(--wp-body); color:inherit; }
.wp-gift__price{ font:600 15px/1.2 var(--wp-title); color:var(--wp-accent); }

/* ---------- Compte a rebours (bloc countdown) ------------------------------
 * Pleine largeur sur l'accueil ; dans la colonne d'achat ou au-dessus d'une
 * grille de categorie, un encart arrondi qui reste dans sa colonne.          */
.wp-countdown{ padding:clamp(28px,4vh,44px) clamp(24px,5vw,64px); background:#fff; color:var(--wp-ink); }
.wp-scope--home .wp-countdown{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; max-width:100vw; }
.wp-scope--product .wp-countdown,
.wp-scope--category .wp-countdown{ margin:16px 0; padding:16px 18px; border-radius:6px; }
.wp-countdown--ink{ background:var(--wp-ink); color:#fff; }
.wp-countdown--sand{ background:var(--wp-sand); }
.wp-countdown[hidden]{ display:none; }
.wp-countdown__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; }
.wp-countdown__head .wp-eyebrow{ margin-bottom:8px; }
.wp-countdown__title{
  margin:0; font:500 clamp(22px,2.6vw,34px)/1.1 var(--wp-title);
  text-transform:uppercase; letter-spacing:.5px; color:inherit;
}
.wp-countdown__clock{ display:flex; gap:8px; font-variant-numeric:tabular-nums; }
.wp-countdown__unit{
  display:flex; flex-direction:column; align-items:center; min-width:62px; padding:10px 6px 8px;
  border:1px solid rgba(127,127,127,.35); border-radius:4px;
}
.wp-countdown__num{ font:500 clamp(24px,3vw,34px)/1 var(--wp-title); }
.wp-countdown__label{ margin-top:5px; font:500 10px/1 var(--wp-body); letter-spacing:.14em; text-transform:uppercase; opacity:.65; }
.wp-scope--product .wp-countdown__inner{ gap:12px; }
.wp-scope--product .wp-countdown__title{ font-size:17px; }
.wp-scope--product .wp-countdown__unit{ min-width:46px; padding:7px 4px 6px; }
.wp-scope--product .wp-countdown__num{ font-size:20px; }
@media (max-width:767px){
  .wp-countdown__inner{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Hero ---------------------------------------------------------- */
.wp-hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; background:#000; }
.wp-hero__media{ position:absolute; inset:0; overflow:hidden; }
.wp-hero__media iframe,.wp-hero__media video,.wp-hero__media img{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0; object-fit:cover;
}
.wp-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.6) 100%);
}
.wp-hero__inner{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px;
}
.wp-hero__kicker{
  font-family:var(--wp-title); font-weight:400; letter-spacing:6px; text-transform:uppercase;
  font-size:clamp(12px,1.2vw,15px); color:rgba(255,255,255,.82); margin:0 0 22px;
}
/* Une ligne si le titre tient, sinon deux lignes equilibrees : la taille suit
   la largeur de l'ecran, donc un titre long (le francais l'est souvent) ne
   tiendrait sur une ligne a aucune largeur et serait coupe. */
.wp-hero__title{
  margin:0; font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; line-height:1.04; text-wrap:balance; font-size:clamp(28px,5.2vw,76px);
  color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.wp-hero__sub{
  position:relative; z-index:2; margin:20px 0 0; max-width:720px;
  font-weight:300; font-size:clamp(14px,1.35vw,17px); line-height:1.7; color:rgba(255,255,255,.88);
  letter-spacing:4px; text-transform:uppercase;
}
.wp-hero__cta{ margin-top:38px; }
/* Contenu centre dans la partie visible de l'ecran, au-dessus de la fleche « Scroll down » (2026-10-15) :
   le hero depasse sous l'ecran de --wp-scroll-off (en-tete au-dessus) et la fleche occupe ~130 px en bas
   du visible ; sur un ecran peu haut, elle passait sur le bouton. */
.wp-hero__inner{ padding-bottom:calc(var(--wp-scroll-off,0px) + 130px); }
/* Comme pour les mises en avant, ".wp-scope p" annulait ces marges : surtitre et sous-titre
   collaient au titre. Surtitre exactement comme le sous-titre (Poppins, meme taille et ecartement). */
.wp-scope .wp-hero__kicker{
  margin:0 0 25px; font-family:var(--wp-body); font-weight:300; font-size:clamp(14px,1.35vw,17px);
  line-height:1.7; letter-spacing:6px; color:rgba(255,255,255,.88);
}
.wp-scope .wp-hero__kicker,.wp-scope .wp-hero__sub{ text-wrap:balance; }
.wp-scope .wp-hero__sub{ margin:25px 0 0; letter-spacing:6px; }
.wp-hero__cta .wp-btn{ letter-spacing:4.5px; padding-left:46px; padding-right:42px; }
/* Petite mention sous le bouton (date de fin d'une offre). */
.wp-scope .wp-hero__note{ margin:16px 0 0; font:400 13px/1.4 var(--wp-body); color:rgba(255,255,255,.82); }
/* Invitation a descendre : un trait de lumiere glisse le long d'une ligne fine et allume la
   fleche ; le libelle est parcouru d'un reflet. Calee sur le bas de l'ecran au chargement :
   --wp-scroll-off = ce que le hero depasse sous l'ecran (mesure par front.js). */
.wp-hero__scroll{
  --wp-scroll-cycle:2.8s;
  position:absolute; left:50%; bottom:calc(var(--wp-scroll-off,150px) + 26px); z-index:3;
  transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:0; padding:8px 14px; border:0; background:none; color:#fff; cursor:pointer;
  animation:wpScrollIn .9s ease 1.1s both;
}
.wp-hero__scroll:focus-visible{ outline:1px solid rgba(255,255,255,.6); outline-offset:4px; }
.wp-hero__scroll-label{
  font-family:var(--wp-body); font-weight:300; font-size:10.5px; line-height:1.9; letter-spacing:.34em;
  text-transform:uppercase; padding-left:.34em; white-space:nowrap;
  background:linear-gradient(90deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.42) 35%,#fff 50%,rgba(255,255,255,.42) 65%,rgba(255,255,255,.42) 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wpScrollShine var(--wp-scroll-cycle) linear infinite;
}
.wp-hero__scroll-line{
  position:relative; display:block; width:1px; height:46px; overflow:hidden; background:rgba(255,255,255,.18);
}
.wp-hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 70%,var(--wp-accent,#F15A29));
  box-shadow:0 0 6px rgba(255,255,255,.9);
  animation:wpScrollRun var(--wp-scroll-cycle) cubic-bezier(.55,0,.45,1) infinite;
}
.wp-hero__scroll-arrow{
  width:20px; height:10px; margin-top:-4px; overflow:visible;
  fill:none; stroke:#fff; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  animation:wpScrollGlow var(--wp-scroll-cycle) ease-in-out infinite;
}
.wp-hero__scroll:hover .wp-hero__scroll-label{ color:#fff; }
@keyframes wpScrollIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes wpScrollShine{ from{ background-position:100% 0 } to{ background-position:-150% 0 } }
@keyframes wpScrollRun{ 0%{ top:-40% } 62%,100%{ top:100% } }
@keyframes wpScrollGlow{
  0%,45%{ opacity:.35; filter:none; transform:translateY(0) }
  62%{ opacity:1; filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgba(241,90,41,.95)); transform:translateY(3px) }
  85%,100%{ opacity:.35; filter:none; transform:translateY(0) }
}

@media (max-width:767px){
  /* 100vh saute quand la barre d'URL se replie : svh, borne en pixels. */
  .wp-hero{ height:88svh; min-height:520px; }
  /* Un <iframe> n'obeit pas a object-fit : on recadre par le ratio 16/9. */
  .wp-hero__media iframe,.wp-hero__media video{
    width:177.78svh; height:100%; min-width:100%; min-height:56.25vw; max-width:none; max-height:none;
    pointer-events:none;
  }
  .wp-hero__media img{ width:100%; height:100%; min-width:100%; min-height:100%; }
  .wp-hero__inner{ padding:0 22px calc(var(--wp-scroll-off,0px) + 84px); }
  .wp-hero__kicker{ letter-spacing:4px; margin-bottom:14px; }
  .wp-hero__title{ font-size:clamp(20px,6.4vw,34px); }
  .wp-hero__sub{ margin:14px auto 0; letter-spacing:2.5px; font-size:13px; }
  .wp-hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
  .wp-hero__cta .wp-btn{ letter-spacing:3px; padding-left:28px; padding-right:26px; }
  .wp-hero__scroll{ bottom:calc(var(--wp-scroll-off,80px) + 16px); gap:6px; }
  .wp-hero__scroll-line{ height:34px; }
  /* Pres du bouton sur telephone : trait et fleche seuls (le libelle reste pour les lecteurs d'ecran) */
  .wp-hero__scroll-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .wp-scope .wp-hero__kicker{ margin-bottom:18px; letter-spacing:3.5px; font-size:13px; }
  .wp-scope .wp-hero__sub{ margin:18px auto 0; letter-spacing:3.5px; }
}
@media (max-width:480px){
  .wp-hero__cta .wp-btn{ width:100%; }
}

/* ---------- Banniere de categorie (v1 : wpc-hero) ------------------------- */
.wp-catbanner{
  position:relative; overflow:hidden; background:var(--wp-sand); color:var(--wp-ink);
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(240px,34vh,400px);
  padding:clamp(48px,7vh,90px) clamp(24px,4vw,72px);
}
.wp-catbanner--sm{ min-height:clamp(170px,22vh,260px); }
.wp-catbanner--lg{ min-height:clamp(320px,52vh,620px); }
.wp-catbanner--white{ background:#fff; }
.wp-catbanner--ink{ background:var(--wp-ink); color:#fff; }
.wp-catbanner__bg{ position:absolute; inset:0; }
.wp-catbanner__bg img{ width:100%; height:100%; object-fit:cover; }
.wp-catbanner--media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.6));
}
.wp-catbanner__inner{ position:relative; z-index:2; max-width:900px; width:100%; text-align:left; }
.wp-catbanner--left{ justify-content:flex-start; }
.wp-catbanner--center .wp-catbanner__inner{ text-align:center; }
.wp-catbanner--media .wp-catbanner__inner{ color:#fff; }
.wp-catbanner__title{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; line-height:1; margin:0; color:inherit;
  font-size:clamp(38px,5.6vw,80px);
}
.wp-catbanner__text{
  font-weight:300; font-size:clamp(15px,1.4vw,19px); line-height:1.7;
  color:var(--wp-muted); margin-top:22px;
}
.wp-catbanner__text p{ margin:0 0 10px; }
.wp-catbanner--media .wp-catbanner__text,
.wp-catbanner--ink .wp-catbanner__text{ color:rgba(255,255,255,.88); }

/* Fil d'Ariane dans la banniere */
.wp-crumbs{ margin:0 0 14px; }
.wp-crumbs__list{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:10px;
  list-style:none; margin:0; padding:0;
}
.wp-catbanner--center .wp-crumbs__list{ justify-content:center; }
.wp-crumbs__item{
  display:flex; align-items:center; gap:10px;
  font-family:var(--wp-title); font-size:12px; font-weight:400;
  letter-spacing:2px; text-transform:uppercase; color:var(--wp-muted);
}
.wp-crumbs__item + .wp-crumbs__item::before{ content:"/"; opacity:.45; letter-spacing:0; }
.wp-crumbs__item a{ color:inherit; text-decoration:none; opacity:.75; transition:opacity .2s ease, color .2s ease; }
.wp-crumbs__item a:hover{ opacity:1; color:var(--wp-accent); }
.wp-crumbs__item span{ color:inherit; }
.wp-catbanner--media .wp-crumbs__item,
.wp-catbanner--ink .wp-crumbs__item{ color:#fff; }
.wp-catbanner--media .wp-crumbs__item a:hover,
.wp-catbanner--ink .wp-crumbs__item a:hover{ color:#fff; opacity:1; }

@media (max-width:1099px){
  .wp-catbanner{ min-height:clamp(200px,28vh,320px); }
}
@media (max-width:767px){
  .wp-catbanner{ min-height:0; padding-top:clamp(34px,6vh,54px); padding-bottom:clamp(34px,6vh,54px); }
  .wp-catbanner__title{ font-size:clamp(30px,9vw,44px); }
  .wp-catbanner__text{ font-size:15px; }
  .wp-crumbs{ margin-bottom:10px; }
  .wp-crumbs__item{ font-size:11px; letter-spacing:1.4px; gap:8px; }
  .wp-crumbs__list{ gap:8px; }
}

/* ---------- Split image + texte ------------------------------------------ */
.wp-split{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(40px,6vw,80px); }
.wp-split--reverse{ flex-direction:row-reverse; }
.wp-split--stretch{ align-items:stretch; }
.wp-split__media{
  flex:1 1 420px; min-width:280px; position:relative; overflow:hidden; border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.1); aspect-ratio:1/1;
}
.wp-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Visuel produit (tapis vertical...) : jamais rogne. */
.wp-split__media--contain{
  flex:1 1 380px; min-width:260px; aspect-ratio:4/3; max-height:520px;
  background:var(--wp-sand); box-shadow:0 24px 60px rgba(0,0,0,.09);
}
.wp-split__media--contain img{ object-fit:contain; padding:18px; }
.wp-split__body{ flex:1 1 380px; min-width:280px; }
.wp-split--stretch .wp-split__body{ display:flex; flex-direction:column; justify-content:center; }
/* Specifications : photo centree en hauteur sur le tableau (2026-10-30) */
.wp-split--stretch .wp-split__media--contain{ align-self:center; }
/* La remise a zero ".wp-scope p" l'emporte sur les marges de .wp-text et .wp-eyebrow : titre,
   texte et liste se touchaient (image a cote, image au-dessus ou texte seul ; surtitre de
   toutes les sections, bandeau des categories compris). Les blocs rendus dans le contexte
   categorie (.wp-scope--category) gardent leurs propres marges. */
.wp-scope:not(.wp-scope--category) .wp-eyebrow{ margin-bottom:12px; }
.wp-scope:not(.wp-scope--category) :is(.wp-split__body, .wp-block) .wp-h2{ margin-bottom:20px; }
.wp-scope:not(.wp-scope--category) :is(.wp-split__body, .wp-block) .wp-text{ margin-bottom:28px; }

/* ---------- Bloc libre : image au-dessus / texte seul --------------------- */
.wp-block--center{ max-width:900px; margin:0 auto; text-align:center; }
.wp-block--center .wp-btn{ margin-top:8px; }
.wp-block--full .wp-block__media{
  position:relative; overflow:hidden; border-radius:16px; margin:0 auto 44px; max-width:1360px;
  box-shadow:0 30px 70px rgba(0,0,0,.1); aspect-ratio:16/7;
}
.wp-block--full .wp-block__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Image entiere (option « fit » de la mise en avant) : comme .wp-split__media--contain */
.wp-block--full .wp-block__media--contain{ background:var(--wp-sand); }
.wp-block--full .wp-block__media--contain img{ object-fit:contain; padding:18px; }

/* Carrousel (mise en avant « image au-dessus », 2 photos et plus) : fondu avec un leger zoom lent */
.wp-carousel{ touch-action:pan-y; }
.wp-carousel__slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.1s ease; }
.wp-carousel__slide.is-active{ opacity:1; z-index:1; }
.wp-carousel__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 7s ease-out; }
.wp-carousel__slide.is-active img{ transform:scale(1.06); }
.wp-carousel__nav{
  position:absolute; top:50%; z-index:2; width:46px; height:46px; margin-top:-23px; border:0; border-radius:50%;
  background:rgba(255,255,255,.88); color:var(--wp-ink); font-size:30px; line-height:44px; text-align:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18); opacity:0; transition:opacity .3s ease, transform .3s ease;
}
.wp-carousel__nav--prev{ left:18px; }
.wp-carousel__nav--next{ right:18px; }
.wp-carousel:hover .wp-carousel__nav, .wp-carousel__nav:focus-visible{ opacity:1; }
.wp-carousel__nav:hover{ transform:scale(1.08); }
.wp-carousel__dots{ position:absolute; left:0; right:0; bottom:18px; z-index:2; display:flex; justify-content:center; gap:8px; }
.wp-carousel__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:9px; background:rgba(255,255,255,.55); cursor:pointer;
  transition:width .35s ease, background .35s ease;
}
.wp-carousel__dot.is-active{ width:28px; background:#fff; }
@media (hover:none){ .wp-carousel__nav{ display:none; } }
@media (max-width:767px){ .wp-block--full .wp-carousel{ aspect-ratio:4/3; } }
@media (prefers-reduced-motion:reduce){
  .wp-carousel__slide img, .wp-carousel__slide.is-active img{ transform:none; transition:none; }
}

/* Mise en avant « photo pleine largeur, texte par-dessus » (2026-10-22, section Wellputt Studio) :
   photo ou carrousel bord a bord, meme hauteur que l'ancienne image arrondie (16/7 sur 1360 px max),
   texte a gauche dans le style du bandeau packs (surtitre au trait orange, gros titre blanc, bouton
   orange), voile sombre pour la lisibilite. Fleches en bas a droite, points en bas au centre : le
   texte garde une marge basse pour ne jamais les recouvrir. La section grandit si le texte depasse. */
.wp-overlay{
  position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(480px,43.75vw,595px); background:#111; color:#fff;
}
.wp-overlay__media{ position:absolute; inset:0; overflow:hidden; }
.wp-overlay__media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp-overlay__media::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.18) 80%,rgba(0,0,0,0) 100%),
             linear-gradient(0deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 28%);
}
.wp-overlay__in{
  position:relative; z-index:3; width:100%; max-width:1360px; margin:0 auto; pointer-events:none;
  padding:clamp(56px,6vw,88px) clamp(24px,5vw,64px) clamp(84px,7vw,104px);
}
.wp-overlay__body{ max-width:680px; pointer-events:auto; }
.wp-scope .wp-overlay__eyebrow,.wp-overlay__eyebrow{
  margin:0 0 20px; display:flex; align-items:center; gap:14px; font-family:var(--wp-body); font-weight:400;
  font-size:11px; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.wp-overlay__eyebrow::before{ content:""; flex:0 0 36px; height:1.5px; background:var(--wp-accent); }
.wp-overlay__title{
  margin:0; font-family:var(--wp-title); font-weight:700; text-transform:uppercase;
  font-size:clamp(36px,4vw,60px); line-height:1.04; letter-spacing:.3px; color:#fff;
}
.wp-scope .wp-overlay__text,.wp-overlay__text{
  margin:20px 0 0; max-width:600px; font-weight:300; font-size:16px; line-height:1.65; color:rgba(255,255,255,.9);
}
.wp-overlay__cta{ margin-top:28px; }
.wp-overlay .wp-carousel__dots{ bottom:34px; z-index:4; }
.wp-overlay .wp-carousel__nav{ top:auto; bottom:22px; margin-top:0; z-index:4; width:40px; height:40px; font-size:26px; line-height:38px; }
.wp-overlay .wp-carousel__nav--prev{ left:auto; right:clamp(76px,calc(5vw + 52px),116px); }
.wp-overlay .wp-carousel__nav--next{ right:clamp(24px,5vw,64px); }
/* Tablette : le texte prend presque toute la largeur, voile plus uniforme */
@media (max-width:1023px){
  .wp-overlay__media::after{
    background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.4) 100%);
  }
}
@media (max-width:767px){
  .wp-overlay{ min-height:520px; align-items:flex-end; }
  .wp-overlay__media::after{
    background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.5) 100%);
  }
  .wp-overlay__in{ padding:48px 20px 80px; }
  .wp-overlay__eyebrow{ margin-bottom:14px; }
  .wp-overlay__title{ font-size:clamp(28px,8vw,36px); }
  /* Paragraphe en entier (choix du 2026-10-22) : la section grandit avec le texte */
  .wp-overlay__text{ margin-top:14px; font-size:14.5px; line-height:1.6; }
  .wp-overlay__cta{ margin-top:22px; }
  .wp-overlay .wp-carousel__dots{ bottom:28px; }
}

/* ---------- Liste numerotee 01/02/03 ------------------------------------- */
.wp-list{ list-style:none; padding:0; margin:0 0 36px; display:flex; flex-direction:column; gap:16px; }
.wp-list li{
  display:flex; gap:14px; align-items:flex-start; font-weight:300; font-size:16px; color:var(--wp-ink);
  border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:16px;
}
.wp-list li:last-child{ border-bottom:0; padding-bottom:0; }
.wp-num{ color:var(--wp-accent); font-family:var(--wp-title); font-weight:600; flex-shrink:0; }

/* ---------- Colonne d'achat (fiche produit, sous le prix) ----------------- *
 * Chaque bloc porte un data-wp-slot : quand le module reprend la fiche, le
 * template les place lui-meme ; sinon front.js les remonte a leur place dans
 * la colonne native (sous le titre / avant le panier / en pied).           */
.wp-buy{ margin:0; color:var(--wp-ink); }
.wp-buy:empty{ display:none; }
.wp-buy__tagline{
  font-family:var(--wp-title); font-weight:500; letter-spacing:2.5px; text-transform:uppercase;
  font-size:14px; color:var(--wp-accent); margin:0 0 22px !important;
}
.wp-buy__tagline[data-wp-slot]{ margin:-6px 0 22px !important; }
.wp-buy__points{ list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:14px; }
.wp-buy__points[data-wp-slot]{ margin:22px 0 26px; }
.wp-buy__points li{ display:flex; gap:14px; align-items:flex-start; font-weight:300; font-size:15px; line-height:1.6; color:#333; }
/* Puce orange a la place des numeros 01, 02... (2026-10-30), centree sur la 1re ligne (15px x 1.6) */
.wp-buy__bullet{ flex-shrink:0; width:6px; height:6px; margin-top:9px; border-radius:50%; background:var(--wp-accent); }
/* Reassurance de la colonne d'achat (.wp-buy__trust) : views/css/buy-trust.css, partagee avec la page
   d'un pack (wppacks). */

/* ---------- Grille de cartes --------------------------------------------- */
.wp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.5vw,36px); }
.wp-grid--3{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(18px,2vw,30px); }

@media (max-width:1024px){
  .wp-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
}
/* Jusqu'a 6 cartes (2026-10-15) : 5 ou 6 cartes sur 3 colonnes (3 + 3, 3 + 2), 4 cartes sur une ligne
   en grand ecran et en 2 + 2 sur tablette, au lieu de 4 + 2 ou 3 + 1 avec auto-fit. !important : la
   grille des fiches produits (product-page.css, .wp-pdp .wp-grid) l'est deja. Mobile inchange.
   5 cartes : 3 colonnes faites de 6 demi-colonnes (chaque carte en prend 2), pour centrer la derniere
   ligne quand elle n'a qu'une ou deux cartes (2026-10-15). */
@media (min-width:900px){
  .wp-grid:has(> .wp-feature:nth-child(5)){ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .wp-grid:has(> .wp-feature:nth-child(5)) > .wp-feature{ grid-column:span 2; }
  .wp-grid:has(> .wp-feature:nth-child(5)) > .wp-feature:nth-child(3n+1):last-child{ grid-column:3 / span 2; }
  .wp-grid:has(> .wp-feature:nth-child(5)) > .wp-feature:nth-child(3n+1):nth-last-child(2){ grid-column:2 / span 2; }
  .wp-grid:has(> .wp-feature:nth-child(4):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:1200px){
  .wp-grid:has(> .wp-feature:nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
/* Tablette a la verticale, 3 cartes ou plus : 2 colonnes faites de 4 demi-colonnes, la derniere carte
   seule (3 ou 5 cartes) au centre (2026-10-15). */
@media (min-width:768px) and (max-width:899px){
  .wp-grid:has(> .wp-feature:nth-child(3)){ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  .wp-grid:has(> .wp-feature:nth-child(3)) > .wp-feature{ grid-column:span 2; }
  .wp-grid:has(> .wp-feature:nth-child(3)) > .wp-feature:nth-child(odd):last-child{ grid-column:2 / span 2; }
}
@media (max-width:767px){
  .wp-grid,.wp-grid--3,.wp-prodgrid{ grid-template-columns:minmax(0,1fr); gap:16px; }
}

/* ---------- Carte editoriale (v1 : wp-feature + survol des wpp-mode) ------ */
.wp-feature{
  position:relative; isolation:isolate; display:flex; flex-direction:column;
  background:var(--wp-sand); border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;
  color:var(--wp-ink); text-decoration:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, background .4s ease, border-color .4s ease;
}
.wp-section--sand .wp-feature,
.wp-section--light .wp-feature{ background:#fff; }
.wp-feature:hover{
  transform:translateY(-6px); background:#fff; border-color:transparent;
  box-shadow:0 26px 60px rgba(0,0,0,.13); color:var(--wp-ink); text-decoration:none;
}
/* Media : zoom lent + voile qui se leve */
.wp-feature__media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--wp-sand-2); }
.wp-feature__media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%);
  opacity:0; transition:opacity .5s ease;
}
.wp-feature:hover .wp-feature__media::after{ opacity:1; }
.wp-feature__media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.01);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.wp-feature:hover .wp-feature__media img{ transform:scale(1.07); }
.wp-feature__body{ position:relative; flex:1; display:flex; flex-direction:column; padding:clamp(26px,3vw,40px); }
/* Etiquette : trait qui s'affirme au survol */
.wp-feature__index{
  position:relative; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding-bottom:2px;
  font-family:var(--wp-title); font-weight:600; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--wp-accent);
}
.wp-feature__index::after{
  content:''; display:block; width:0; height:1px;
  background:var(--wp-accent); transition:width .55s cubic-bezier(.16,1,.3,1);
}
.wp-feature:hover .wp-feature__index::after{ width:26px; }
/* Titre : soulignement qui balaie */
.wp-feature__title{
  /* align-self : dans le corps en flex, le titre s'etirait sur toute la largeur de la carte, et son
     soulignement aussi ; il garde la largeur du texte */
  position:relative; display:inline-block; align-self:flex-start;
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase; letter-spacing:.5px;
  font-size:clamp(24px,3vw,36px); margin:10px 0 14px; color:var(--wp-ink);
}
.wp-feature__title::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:var(--wp-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.wp-feature:hover .wp-feature__title::after{ transform:scaleX(1); }
.wp-feature__text{ font-weight:300; font-size:15.5px; line-height:1.7; color:var(--wp-muted); margin:0; transition:color .4s ease; }
.wp-feature:hover .wp-feature__text{ color:#3a3a3a; }
.wp-feature__cta{ align-self:flex-start; margin-top:22px; font-size:13px; padding:14px 26px; letter-spacing:2.4px; }
/* Plus de lisere d'accent en pied de carte au survol (retire le 2026-10-15) : seuls le trait de
   l'etiquette et le soulignement du titre restent. */

@media (hover:none){
  .wp-feature:hover{ transform:none; box-shadow:none; }
  .wp-feature:hover .wp-feature__media img{ transform:scale(1.01); }
}
@media (max-width:767px){
  .wp-feature__body{ padding:22px; }
  .wp-feature__title{ font-size:24px; }
  .wp-feature__cta{ align-self:stretch; width:100%; text-align:center; }
}

/* ---------- Tableau de caracteristiques ---------------------------------- */
.wp-specs{ width:100%; border-collapse:collapse; margin-top:30px; }
.wp-specs tr{ border-bottom:1px solid var(--wp-line); }
.wp-specs tr:last-child{ border-bottom:0; }
.wp-specs th,.wp-specs td{ padding:18px 0; vertical-align:top; background:none; border:0; }
.wp-specs th{
  text-align:left; font-family:var(--wp-title); font-weight:500; text-transform:uppercase;
  letter-spacing:1px; font-size:14px; color:#888;
}
.wp-specs td{ text-align:right; font-weight:300; font-size:15px; color:var(--wp-ink); }
.wp-section--ink .wp-specs td{ color:#fff; }

@media (max-width:767px){
  .wp-specs th,.wp-specs td{ display:block; padding:0; text-align:left; }
  .wp-specs tr{ display:block; padding:12px 0; }
  .wp-specs td{ margin-top:4px; }
}

/* ---------- Chiffres cles + visuel app ----------------------------------- */
.wp-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,44px) clamp(28px,5vw,64px); }
.wp-stat__num{ font-family:var(--wp-title); font-weight:600; font-size:clamp(38px,5vw,58px); color:var(--wp-accent); line-height:1; }
.wp-stat__label{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#888; margin-top:8px; }
.wp-app__text{ margin:0 0 clamp(24px,3.5vh,34px); max-width:56ch; font-weight:300; font-size:16px; line-height:1.8; color:#555; }

/* Carte sable arrondie : chiffres a gauche, visuel de l'app a droite. */
.wp-appstats{
  display:flex; flex-wrap:wrap-reverse; align-items:center; gap:clamp(30px,5vw,70px);
  background:var(--wp-sand); border-radius:16px; padding:clamp(40px,5vw,72px); color:var(--wp-ink);
}
.wp-appstats--reverse{ flex-wrap:wrap; }
.wp-appstats__body{ flex:1 1 420px; min-width:260px; }
.wp-appstats:not(.wp-appstats--split) .wp-appstats__body{ flex:1 1 100%; }
.wp-appstats__media{ flex:1 1 340px; min-width:220px; display:flex; justify-content:center; align-items:flex-end; }
.wp-appstats__media img{ display:block; height:auto; width:100%; max-width:clamp(260px,34vw,520px); }
.wp-appstats .wp-stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,50px); }
/* La carte reste sable meme dans une section noire. */
.wp-section--ink .wp-appstats .wp-h2,
.wp-section--ink .wp-appstats .wp-h3{ color:var(--wp-ink); }
.wp-section--ink .wp-appstats .wp-stat__label{ color:#888; }
.wp-section--ink .wp-appstats .wp-app__text{ color:#555; }
.wp-stores{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vh,40px); }
.wp-store{ display:block; text-decoration:none; }
.wp-store:hover{ text-decoration:none; }
.wp-stores img{ display:block; height:48px; width:auto; }
/* Sans image : bouton texte neutre. */
.wp-store__btn{
  display:inline-flex; align-items:center; height:52px; padding:0 26px;
  font-family:var(--wp-title); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; white-space:nowrap;
  border:1px solid rgba(0,0,0,.22); border-radius:4px; color:var(--wp-ink);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.wp-store__btn:hover{ background:var(--wp-ink); border-color:var(--wp-ink); color:#fff; }

@media (max-width:900px){
  .wp-appstats{ padding:clamp(28px,5vw,40px); }
  .wp-appstats__media img{ max-width:min(100%,420px); }
  .wp-stores img{ height:44px; }
  .wp-store__btn{ height:46px; padding:0 20px; font-size:13px; }
}
@media (max-width:767px){
  .wp-stats{ gap:24px 32px; }
  .wp-stat__num{ font-size:34px; }
}

/* ---------- Grille produits ---------------------------------------------- */
.wp-prodgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(18px,2vw,28px); }
/* Packs : cartes de la meme largeur que les best-sellers (4 colonnes des 900 px, 2 en dessous ;
   .wp-wrap ne depasse pas 1360 px, donc jamais 5), centrees quand il y en a moins (choix du
   2026-10-13 : 3 packs etires sur toute la ligne faisaient des cartes beaucoup trop grandes).
   Meme chose pour un bloc produits choisis par sticker (.wp-prodgrid--center). */
.wp-prodgrid.wp-packs__grid,.wp-prodgrid--center{ display:flex; flex-wrap:wrap; justify-content:center; }
.wp-packs__grid > *,.wp-prodgrid--center > *{ flex:0 0 calc((100% - 3 * clamp(18px,2vw,28px)) / 4); min-width:0; }
@media (max-width:899px){
  .wp-prodgrid--center > *{ flex-basis:calc((100% - clamp(18px,2vw,28px)) / 2); }
}
@media (max-width:767px){
  .wp-prodgrid--center > *{ flex-basis:100%; }
}
/* Packs sur tablette et mobile (2026-10-22) : une rangee qui glisse au doigt au lieu de cartes
   empilees pleine largeur (pres de 600 px de haut chacune sur mobile). 2 cartes et demie sur
   tablette, une carte et un bout de la suivante sur mobile. */
@media (max-width:899px){
  .wp-prodgrid.wp-packs__grid{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; padding-bottom:8px;
  }
  .wp-packs__grid::-webkit-scrollbar{ display:none; }
  .wp-packs__grid > *{ flex-basis:calc((100% - 2 * clamp(18px,2vw,28px)) / 2.5); scroll-snap-align:start; }
}
@media (max-width:767px){
  .wp-packs__grid > *{ flex-basis:72%; }
}
/* En-tete des packs aligne sur les cartes (2026-10-15) : avec 1 a 3 packs, les cartes sont centrees ;
   l'en-tete (surtitre, titre, phrase, lien « Tous les packs ») prend la largeur de la rangee de cartes
   et se centre aussi, au lieu de partir du bord du conteneur. */
@media (min-width:900px){
  .wp-packs .wp-wrap:has(> .wp-packs__grid > :nth-child(3):last-child) > .wp-head{
    max-width:calc((100% - 3 * clamp(18px,2vw,28px)) * .75 + 2 * clamp(18px,2vw,28px)); margin-left:auto; margin-right:auto;
  }
  .wp-packs .wp-wrap:has(> .wp-packs__grid > :nth-child(2):last-child) > .wp-head{
    max-width:calc((100% - 3 * clamp(18px,2vw,28px)) * .5 + clamp(18px,2vw,28px)); margin-left:auto; margin-right:auto;
  }
  .wp-packs .wp-wrap:has(> .wp-packs__grid > :first-child:last-child) > .wp-head{
    max-width:calc((100% - 3 * clamp(18px,2vw,28px)) * .25); margin-left:auto; margin-right:auto;
  }
}
.wp-pcard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(0,0,0,.09); border-radius:10px; overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.wp-pcard:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(0,0,0,.12); border-color:transparent; }
.wp-pcard__media{ position:relative; display:block; aspect-ratio:1/1; background:var(--wp-sand); overflow:hidden; }
.wp-pcard__media img{ width:100%; height:100%; object-fit:cover; }
/* Survol : la photo zoome doucement ; avec une 2e photo, elle s'efface et la 2e se pose en fondu */
.wp-pcard__img{ transition:opacity .45s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.wp-pcard__img--alt{ position:absolute; inset:0; opacity:0; transform:scale(1.08); }
@media (hover:hover){
  .wp-pcard:hover .wp-pcard__img{ transform:scale(1.05); }
  .wp-pcard--alt:hover .wp-pcard__img:not(.wp-pcard__img--alt){ opacity:0; }
  .wp-pcard--alt:hover .wp-pcard__img--alt{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .wp-pcard__img, .wp-pcard__img--alt{ transform:none !important; transition:opacity .3s ease; }
}
.wp-pcard__flag{
  position:absolute; top:12px; left:12px; background:var(--wp-accent); color:#fff;
  font-family:var(--wp-title); font-size:11px; letter-spacing:1px; padding:5px 10px; border-radius:2px;
}
.wp-pcard__body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
.wp-pcard__name{
  font-family:var(--wp-title); font-weight:500; font-size:15px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--wp-ink); text-decoration:none; line-height:1.35;
}
.wp-pcard__name:hover{ color:var(--wp-accent); text-decoration:none; }
.wp-pcard__foot{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.wp-pcard__price{ font-family:var(--wp-title); font-weight:600; font-size:20px; color:var(--wp-ink); }
.wp-pcard__price--sale{ color:var(--wp-accent); }
.wp-pcard__old{ font-weight:300; font-size:14px; color:#999; text-decoration:line-through; }
.wp-pcard__cta{ flex-basis:100%; margin-top:14px; align-self:flex-start; }

/* ---------- Bloc Packs (cartes du module wppacks) ------------------------ */
.wp-packs__lead{ max-width:560px; margin:12px 0 0; font-weight:300; font-size:16px; line-height:1.6; color:var(--wp-muted); }
.wp-section--ink .wp-packs__lead{ color:rgba(255,255,255,.7); }

/* ---------- Packs : bandeau photo (mise en page « band ») ------------------
   Photo sombre en fond, texte et bouton a gauche, petites cartes blanches a droite. 4 cartes
   visibles (3 jusqu'au 2026-10-22, conteneur elargi de 1360 a 1480 px pour la 4e) ; au-dela, elles
   defilent (fleches sur ordinateur, glisser au doigt), front.js packRails. Sur une colonne
   (tablette), 4 cartes en largeur des 900 px, 3 et demie en dessous, 1 et demie sur mobile. */
.wp-packband{ position:relative; background:#111 center/cover no-repeat; color:#fff; }
.wp-packband__in{
  max-width:1480px; margin:0 auto; min-height:clamp(420px,38vw,560px);
  padding:clamp(56px,7vw,96px) clamp(24px,5vw,64px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,729px); gap:clamp(32px,4vw,70px); align-items:center;
}
.wp-scope .wp-packband__eyebrow,.wp-packband__eyebrow{
  margin:0 0 20px; display:flex; align-items:center; gap:14px; font-family:var(--wp-body); font-weight:400;
  font-size:11px; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.wp-packband__eyebrow::before{ content:""; flex:0 0 36px; height:1.5px; background:var(--wp-accent); }
.wp-packband__title{
  margin:0; max-width:760px; font-family:var(--wp-title); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px,4.6vw,68px); line-height:1.02; letter-spacing:.3px; color:#fff;
}
.wp-scope .wp-packband__text,.wp-packband__text{ margin:20px 0 0; font-weight:300; font-size:17px; line-height:1.6; color:rgba(255,255,255,.9); }
.wp-packband__text .wp-accent{ color:#fff; font-weight:600; }
.wp-packband__cta{ margin-top:26px; }
.wp-packband__rail{ position:relative; min-width:0; width:100%; }
.wp-packband__track{
  display:flex; gap:15px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding:6px 2px 14px;
}
.wp-packband__track::-webkit-scrollbar{ display:none; }
.wp-packcard{
  flex:0 0 170px; scroll-snap-align:start; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:10px; color:var(--wp-ink); text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .3s ease;
}
.wp-packcard:hover{ transform:translateY(-4px); color:var(--wp-ink); text-decoration:none; }
.wp-packcard__media{ display:block; aspect-ratio:1/1; background:#f4f2ef; overflow:hidden; }
.wp-packcard__media img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Corps en colonne : nom sur 2 lignes reservees, prix et remise cales en bas, alignes d'une carte a l'autre */
.wp-packcard__body{ flex:1; display:flex; flex-direction:column; gap:3px; padding:14px 14px 16px; }
.wp-packcard__name{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.6em;
  font-family:var(--wp-body); font-weight:600; font-size:14px; letter-spacing:.3px; text-transform:uppercase; line-height:1.3;
}
.wp-packcard__count{ display:block; font-size:12.5px; line-height:1.4; color:#8a8a8a; }
.wp-packcard__prices{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:auto; padding-top:12px; line-height:1.2; }
.wp-packcard__old{ font-size:12.5px; color:#999; }
.wp-packcard__price{ font-family:var(--wp-body); font-weight:700; font-size:17px; color:var(--wp-accent); }
.wp-packcard__save{
  align-self:flex-start; margin-top:8px; padding:3px 8px; border-radius:3px;
  background:var(--wp-accent); color:#fff; font-weight:600; font-size:12.5px;
}
.wp-packband__arrow{
  position:absolute; top:calc(50% - 22px); width:40px; height:40px; padding:0; border:0; background:none; cursor:pointer;
}
.wp-packband__arrow::before{
  content:""; position:absolute; top:13px; left:12px; width:13px; height:13px;
  border-top:2.5px solid #fff; border-right:2.5px solid #fff; transform:rotate(45deg);
}
.wp-packband__arrow--next{ right:-48px; }
.wp-packband__arrow--prev{ left:-48px; }
.wp-packband__arrow--prev::before{ left:16px; transform:rotate(-135deg); }
.wp-packband__arrow[hidden]{ display:none; }
@media (max-width:1279px){
  .wp-packband__in{ grid-template-columns:minmax(0,1fr); }
  .wp-packband__rail{ width:100%; }
  .wp-packband__arrow{ display:none; }
  .wp-packcard{ flex-basis:calc((100% - 45px) / 4); }
}
@media (max-width:899px){
  .wp-packcard{ flex-basis:calc((100% - 45px) / 3.5); }
}
@media (max-width:560px){
  .wp-packcard{ flex-basis:62%; }
}

/* ---------- Bloc Articles du blog ---------------------------------------- */
.wp-blog__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(18px,2vw,28px); }
.wp-blog__card{
  display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:10px; overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.wp-blog__card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.1); border-color:transparent; }
/* Format des bandeaux du blog (899 x 350) : un article n'est pas recadre, les photos des cartes
   de complement le sont au meme format pour que la rangee reste alignee. */
.wp-blog__media{ display:block; aspect-ratio:899/350; background:var(--wp-sand); overflow:hidden; }
.wp-blog__media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.wp-blog__card:hover .wp-blog__media img{ transform:scale(1.02); }
.wp-blog__placeholder{ display:block; aspect-ratio:18/7; background:linear-gradient(135deg,var(--wp-sand),var(--wp-sand-2)); }
.wp-blog__body{ display:flex; flex-direction:column; gap:12px; flex:1; padding:22px 24px 26px; }
.wp-blog__meta{ margin:0; display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--wp-muted); }
.wp-blog__cat{ font-family:var(--wp-title); letter-spacing:2px; text-transform:uppercase; color:#c2410c; }
.wp-blog__title{ margin:0; font-family:var(--wp-title); font-weight:500; font-size:20px; line-height:1.25; text-transform:uppercase; }
.wp-blog__title a, .wp-blog__title a:link, .wp-blog__title a:visited{ color:var(--wp-ink) !important; text-decoration:none; }
.wp-blog__title a:hover{ color:var(--wp-accent) !important; }
.wp-blog__excerpt{ margin:0; font-weight:300; font-size:14.5px; line-height:1.65; color:#555; }
.wp-blog__more, .wp-blog__more:link, .wp-blog__more:visited{
  margin-top:auto; align-self:flex-start; padding-bottom:3px; border-bottom:2px solid var(--wp-accent);
  font-family:var(--wp-title); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--wp-ink) !important; text-decoration:none;
}
.wp-blog__more:hover{ color:var(--wp-accent) !important; }
/* Un seul article : toute la largeur ; sur ordinateur, bandeau a gauche, texte a droite. */
.wp-blog--single .wp-blog__grid{ grid-template-columns:1fr; }
@media (min-width:992px){
  .wp-blog--single .wp-blog__card{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center; }
  .wp-blog--single .wp-blog__media{ align-self:center; }
  .wp-blog--single .wp-blog__body{ padding:clamp(28px,3.5vw,48px); }
  .wp-blog--single .wp-blog__title{ font-size:clamp(22px,2.4vw,30px); }
}

@media (max-width:767px){
  .wp-pcard__cta{ width:100%; text-align:center; }
}

/* ---------- Temoignages -------------------------------------------------- */
.wp-quote{
  margin:0; background:#fff; border-radius:14px; padding:clamp(26px,3vw,38px);
  display:flex; flex-direction:column; gap:24px;
}
.wp-quote__text{ margin:0; font-weight:300; font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--wp-ink); }
.wp-quote__text::before{
  content:"\201C"; color:var(--wp-accent); font-family:var(--wp-title);
  font-size:34px; line-height:0; vertical-align:-6px; margin-right:4px;
}
.wp-quote__foot{ margin-top:auto; display:flex; align-items:center; gap:14px; }
.wp-quote__img{ width:44px; height:44px; object-fit:contain; border-radius:50%; background:var(--wp-sand); }
.wp-quote__author{
  font-family:var(--wp-title); font-weight:500; font-style:normal; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:#888;
}

@media (max-width:767px){
  .wp-quote{ padding:22px; }
  .wp-quote__text{ font-size:16px; }
}

/* ---------- Avis clients qui defilent (temoignages, source « avis ») ------- */
/* .wp-scope p{margin:0} l'emporterait sur un simple .wp-reviews__score */
.wp-scope .wp-reviews__score,.wp-reviews__score{
  margin:22px 0 0; display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  font-size:14px; letter-spacing:.4px; color:#6b6b6b;
}
.wp-reviews__score strong{ font-family:var(--wp-title); font-weight:600; font-size:20px; letter-spacing:.5px; color:var(--wp-ink); }
/* Etoiles : 5 grises, et par-dessus les memes en orange coupees a la note (demi-etoiles possibles) */
.wp-stars{
  position:relative; display:inline-block; font-size:15px; line-height:1; letter-spacing:3px;
  color:rgba(17,17,17,.13); white-space:nowrap;
}
.wp-stars::before,.wp-stars__fill::before{ content:"\2605\2605\2605\2605\2605"; }
.wp-stars__fill{ position:absolute; top:0; left:0; bottom:0; overflow:hidden; color:var(--wp-accent); }
.wp-stars--lg{ font-size:19px; letter-spacing:4px; }

.wp-reviews{
  --wp-rev-speed:120s; /* recalcule par front.js : vitesse constante */
  position:relative; overflow:hidden; margin:0; padding:4px 0 10px; /* l'ecart vient de .wp-head--center */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.wp-reviews__track{ display:flex; width:max-content; animation:wpReviewsRun var(--wp-rev-speed) linear infinite; }
.wp-reviews:hover .wp-reviews__track,.wp-reviews:focus-within .wp-reviews__track{ animation-play-state:paused; }
.wp-reviews__group{ display:flex; flex-shrink:0; gap:22px; margin:0; padding:0 11px; list-style:none; }
.wp-review{
  flex:0 0 auto; width:clamp(290px,25vw,370px); display:flex; flex-direction:column; gap:16px;
  margin:0; padding:30px 30px 24px; background:#fff; border-radius:14px;
  box-shadow:0 1px 2px rgba(17,17,17,.04),0 10px 30px -18px rgba(17,17,17,.18);
  transition:transform .35s ease,box-shadow .35s ease;
}
.wp-review:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(17,17,17,.05),0 18px 36px -18px rgba(17,17,17,.26); }
.wp-review__text{
  margin:0; font-weight:300; font-size:16px; line-height:1.65; color:var(--wp-ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden;
}
.wp-review__text::before{
  content:"\201C"; color:var(--wp-accent); font-family:var(--wp-title);
  font-size:30px; line-height:0; vertical-align:-6px; margin-right:3px;
}
.wp-review__foot{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(17,17,17,.07);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.wp-review__author{
  font-family:var(--wp-title); font-weight:500; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--wp-ink); white-space:nowrap;
}
.wp-review__product{
  font-size:12.5px; color:#8a8a8a; text-decoration:none; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wp-review__product:hover{ color:var(--wp-accent); }
@keyframes wpReviewsRun{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

@media (max-width:767px){
  .wp-review{ width:80vw; padding:24px 22px 20px; }
  .wp-reviews{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  }
}
/* « Reduire les animations » : pas de defilement automatique, on fait glisser a la main */
@media (prefers-reduced-motion:reduce){
  .wp-reviews{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-mask-image:none; mask-image:none; }
  .wp-reviews__track{ animation:none; }
  .wp-reviews__group[aria-hidden]{ display:none; }
  .wp-review{ scroll-snap-align:center; }
}

/* ---------- Bandeau reassurance ------------------------------------------ */
.wp-reassurance{
  background:#fff; color:var(--wp-ink); padding:clamp(56px,8vh,90px) clamp(24px,5vw,64px);
  border-top:1px solid #ececec; border-bottom:1px solid #ececec;
}
.wp-reassurance--sand{ background:var(--wp-sand); border-color:transparent; }
.wp-reassurance--ink{ background:var(--wp-ink); color:#fff; border-color:rgba(255,255,255,.14); }
.wp-reassurance__grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(28px,4vw,50px); }
/* Tablette a l'horizontale : 4 produits, 4 reassurances et 3 cartes sur une ligne au lieu de 3 + 1
   ou 2 + 1. */
@media (min-width:900px) and (max-width:1199px){
  /* auto-fill comme sur ordinateur : 1 ou 2 produits gardent une largeur de carte normale */
  .wp-prodgrid{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
  .wp-reassurance__grid:not(.wp-reassurance--bar .wp-reassurance__grid){ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  /* guide d'achat des categories : 3 cartes sur une ligne */
  .wp-scope.wp-scope--category .wp-grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
}
.wp-reassurance__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.wp-reassurance__body{ display:flex; flex-direction:column; gap:6px; }
.wp-reassurance__title{ font-family:var(--wp-title); font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size:15px; color:inherit; }
.wp-reassurance__text{ font-weight:300; font-size:13.5px; color:#777; margin:0; }
.wp-reassurance--ink .wp-reassurance__text{ color:rgba(255,255,255,.7); }

/* Variante « bandeau » (v1 categorie : wpc-bar) : icone a gauche, sur une ligne. */
.wp-reassurance--bar{ padding:0; border-top:0; border-bottom:1px solid rgba(0,0,0,.08); }
.wp-reassurance--bar.wp-reassurance--sand,
.wp-reassurance--bar.wp-reassurance--ink{ border-bottom-color:transparent; }
.wp-reassurance--bar .wp-reassurance__grid{
  max-width:1360px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.5vw,40px); padding:clamp(22px,3vh,38px) clamp(24px,4vw,72px);
}
.wp-reassurance--bar .wp-reassurance__item{ flex-direction:row; align-items:center; text-align:left; gap:16px; }
.wp-reassurance--bar .wp-icon{ width:30px; height:30px; }
.wp-reassurance--bar .wp-reassurance__body{ gap:3px; }
.wp-reassurance--bar .wp-reassurance__title{ font-weight:600; letter-spacing:1.5px; font-size:14px; }
.wp-reassurance--bar .wp-reassurance__text{ font-size:13.5px; line-height:1.5; color:var(--wp-muted); }
.wp-reassurance--bar.wp-reassurance--ink .wp-reassurance__text{ color:rgba(255,255,255,.7); }

@media (max-width:767px){
  .wp-reassurance{ padding:40px 20px; }
  .wp-reassurance__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; }
  .wp-reassurance--bar{ padding:0; }
}
@media (max-width:600px){
  .wp-reassurance--bar .wp-reassurance__grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .wp-reassurance__grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Video (Vimeo / YouTube, v1 : wpp-video) ----------------------- */
.wp-video__head{ text-align:center; margin-bottom:clamp(28px,3vw,44px); }
.wp-video__head .wp-lead{ margin-left:auto; margin-right:auto; max-width:62ch; }
.wp-video{ margin:0; }
.wp-video__frame{
  position:relative; display:block; width:100%; padding:0; border:0;
  aspect-ratio:16/9; overflow:hidden; border-radius:14px;
  background:#0f0f0f; box-shadow:0 26px 70px rgba(15,15,15,.22);
}
.wp-video__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.wp-video__play{ cursor:pointer; -webkit-appearance:none; appearance:none; }
.wp-video__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.wp-video__play:hover .wp-video__poster{ transform:scale(1.03); opacity:.88; }
.wp-video__badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:82px; height:82px; border-radius:50%;
  background:var(--wp-accent);
  box-shadow:0 14px 40px rgba(241,90,41,.45);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.wp-video__badge::before{
  content:""; position:absolute; top:50%; left:calc(50% + 3px);
  transform:translate(-50%,-50%);
  border-style:solid; border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent #fff;
}
.wp-video__play:hover .wp-video__badge{ transform:translate(-50%,-50%) scale(1.08); }
.wp-video__caption{
  margin-top:16px; text-align:center;
  font-family:var(--wp-body); font-weight:300; font-size:14px; color:var(--wp-muted);
}
.wp-section--ink .wp-video__caption{ color:rgba(255,255,255,.7); }

@media (max-width:767px){
  .wp-video__frame{ border-radius:10px; }
  .wp-video__badge{ width:62px; height:62px; }
  .wp-video__badge::before{ border-width:10px 0 10px 16px; }
}

/* ---------- Texte de bas de page ------------------------------------------ */
.wp-seo{ text-align:left; }
/* Texte long (bloc « Texte de bas de page ») : plus large et plus aere (2026-10-15) */
.wp-wrap--read.wp-seo{ max-width:1080px; }
.wp-seo .wp-longtext p{ margin:0 0 18px; }
.wp-seo .wp-longtext h3{ margin:46px 0 14px; }
.wp-seo .wp-longtext h4{ margin:30px 0 10px; }
.wp-seo .wp-longtext :is(h3, h4) + p{ margin-top:0; }
.wp-seo .wp-longtext ul{ margin:0 0 24px; padding-left:22px; }
.wp-seo .wp-longtext li{ margin-bottom:10px; }

/* ---------- Animations au scroll (front.js pose .is-in) ------------------ */
[data-wp-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
[data-wp-reveal].is-in{ opacity:1; transform:none; }
/* Haut de page (hero) : meme entree, en CSS seul, des le premier affichage */
[data-wp-intro]{ animation:wpIntro 1s cubic-bezier(.16,1,.3,1) both; }
.wp-hero__title[data-wp-intro]{ animation-delay:.1s; }
.wp-hero__sub[data-wp-intro]{ animation-delay:.3s; }
.wp-hero__cta[data-wp-intro]{ animation-delay:.46s; }
@keyframes wpIntro{ from{ opacity:0; transform:translateY(28px); } }
@keyframes wpIntroFade{ from{ opacity:0; } }
[data-wp-illuminate] [data-wp-word]{ opacity:.14; transition:opacity .25s linear; }

/* Reglage systeme « reduire les animations » : fondus et eclairage des titres gardes,
   aucun deplacement (glissement, parallaxe coupee par front.js). */
@media (prefers-reduced-motion:reduce){
  [data-wp-reveal]{ transform:none; transition:opacity .8s ease; }
  [data-wp-intro]{ animation-name:wpIntroFade; }
  .wp-hero__scroll,.wp-hero__scroll-line::after,.wp-hero__scroll-arrow{ animation:none; }
  .wp-hero__scroll-label{ animation:none; color:rgba(255,255,255,.75); background:none; }
  .wp-hero__scroll-line::after{ display:none; }
  .wp-feature,.wp-feature *{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   PAGES CATEGORIE — le rythme de la v1 (wpcategory)
   La v1 categorie avait ses propres valeurs, plus serrees que l'accueil :
   sections moins hautes, titres plus petits, cartes du guide sans effet,
   bloc libre plus compact. Toute zone posee sur une page categorie porte
   .wp-scope--category (WpRender) : on les reprend ici, a l'identique.
   ========================================================================== */
.wp-scope--category .wp-section{ padding:clamp(60px,9vh,120px) clamp(20px,3.5vw,72px); }
.wp-scope--category .wp-section--text{ padding-top:clamp(50px,7vh,90px); padding-bottom:clamp(50px,7vh,90px); }
/* En v1, « .wpc-scope p { margin:0 } » l'emportait sur la marge des surtitres
   et des paragraphes : ils etaient colles au titre. Repris tel quel. */
.wp-scope--category .wp-eyebrow,
.wp-scope--category .wp-eyebrow--tight{ letter-spacing:5px; margin:0; }
.wp-scope--category .wp-h2:not(.wp-h2--xl){ font-size:clamp(30px,3.8vw,52px); line-height:1.06; }
.wp-scope--category .wp-head--center{ margin-bottom:clamp(34px,5vh,60px); }
.wp-scope--category .wp-head .wp-h2{ margin-bottom:0; }
@media (min-width:768px){
  .wp-scope--category .wp-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(20px,2.5vw,36px); }
}

/* Cartes du guide d'achat (v1 : .wpc-card) : sable, arrondies, sans survol. */
.wp-scope--category .wp-feature{
  background:var(--wp-sand); border:0; border-radius:16px; box-shadow:none; transform:none; transition:none;
}
.wp-scope--category .wp-section--sand .wp-feature,
.wp-scope--category .wp-section--light .wp-feature{ background:#fff; }
.wp-scope--category .wp-feature:hover{ transform:none; box-shadow:none; background:var(--wp-sand); }
.wp-scope--category .wp-section--sand .wp-feature:hover{ background:#fff; }
.wp-scope--category .wp-feature::after,
.wp-scope--category .wp-feature__media::after,
.wp-scope--category .wp-feature__title::after,
.wp-scope--category .wp-feature__index::after{ content:none; }
.wp-scope--category .wp-feature__media{ aspect-ratio:16/11; background:var(--wp-sand-2); }
.wp-scope--category .wp-feature__media img,
.wp-scope--category .wp-feature:hover .wp-feature__media img{ transform:none; transition:none; }
.wp-scope--category .wp-feature__body{ padding:clamp(24px,2.6vw,36px); }
.wp-scope--category .wp-feature__title{
  display:block; font-size:clamp(21px,2.4vw,30px); margin:0 0 12px;
}
.wp-scope--category .wp-feature__index + .wp-feature__title{ margin-top:10px; }
.wp-scope--category .wp-feature__text,
.wp-scope--category .wp-feature:hover .wp-feature__text{ color:var(--wp-muted); }

/* Bloc libre (v1 : .wpc-block) : plus compact, bouton sans ombre. */
.wp-scope--category .wp-split,
.wp-scope--category .wp-block--full,
.wp-scope--category .wp-block--center{ max-width:1200px; margin-left:auto; margin-right:auto; }
.wp-scope--category .wp-block--center{ max-width:820px; }
.wp-scope--category .wp-split{ gap:clamp(32px,5vw,64px); }
.wp-scope--category .wp-split__media{
  flex:1 1 380px; min-width:260px; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.1);
}
.wp-scope--category .wp-split__body{ flex:1 1 360px; min-width:260px; }
.wp-scope--category .wp-block--full .wp-block__media{ border-radius:14px; margin-bottom:36px; box-shadow:0 24px 60px rgba(0,0,0,.1); }
.wp-scope--category .wp-text{ font-weight:400; font-size:16px; line-height:1.7; color:inherit; margin:0; }
.wp-scope--category .wp-btn{
  font-size:14px; letter-spacing:1.6px; padding:15px 34px; box-shadow:none; transition:opacity .2s ease;
}
.wp-scope--category .wp-btn:hover,
.wp-scope--category .wp-btn:focus{ transform:none; box-shadow:none; opacity:.92; }

@media (max-width:640px){
  .wp-scope--category .wp-section,
  .wp-scope--category .wp-section--text{ padding-left:20px; padding-right:20px; }
}

/* Arguments numerotes d'une mise en avant centree (disposition « texte seul » / « image au-dessus ») */
.wp-list--center{ display:inline-block; text-align:left; margin-left:auto; margin-right:auto; }

/* ---------- Ordinateur : pleine largeur gardee, titres et espacements un cran plus petits ---------- */
@media (min-width:1025px){
  .wp-section{ padding:clamp(64px,9vh,112px) clamp(24px,4vw,56px); }
  .wp-section--tall{ padding:clamp(72px,11vh,150px) clamp(24px,4vw,56px); }
  .wp-section--text{ padding:clamp(44px,6vh,72px) clamp(24px,4vw,56px); }
  .wp-h1{ font-size:clamp(36px,4.2vw,60px); }
  .wp-h2{ font-size:clamp(30px,3.4vw,48px); }
  .wp-h2--xl{ font-size:clamp(36px,4.6vw,68px); }
  .wp-lead{ font-size:clamp(15px,1.2vw,18px); }
  .wp-hero__title{ font-size:clamp(28px,4.2vw,62px); }
  .wp-catbanner__title{ font-size:clamp(36px,4.4vw,64px); }
  .wp-catbanner__text{ font-size:clamp(15px,1.2vw,17px); }
  .wp-scope--category .wp-h2:not(.wp-h2--xl){ font-size:clamp(28px,3vw,44px); }
  .wp-stat__num{ font-size:clamp(36px,4vw,50px); }
}

/* ---------- Mise en avant : cartes a la place de l'image (option « cards ») ---------------- */
/* Jusqu'a 3 cartes a cote du texte (configurateurs...). Texte au-dessus des cartes quand la
   section passe sur une colonne. */
.wp-split--cards{ flex-wrap:wrap-reverse; }
.wp-spot-cards{ flex:1.15 1 460px; min-width:280px; display:grid; grid-template-columns:repeat(var(--wp-cards, 3), minmax(0, 1fr)); gap:16px; }
.wp-spot-cards--1{ --wp-cards:1; }
.wp-spot-cards--2{ --wp-cards:2; }
.wp-spot-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.07); color:var(--wp-ink); text-decoration:none !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
a.wp-spot-card:hover, a.wp-spot-card:focus-visible{ transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,0,0,.12); }
.wp-spot-card__media{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--wp-sand); }
.wp-spot-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); }
a.wp-spot-card:hover .wp-spot-card__media img{ transform:scale(1.04); }
.wp-spot-card__body{ flex:1; display:flex; flex-direction:column; gap:6px; padding:16px 16px 18px; }
.wp-spot-card__title{ font-family:var(--wp-title); font-weight:600; text-transform:uppercase; font-size:17px; line-height:1.15; letter-spacing:.3px; }
.wp-spot-card__text{ font-weight:300; font-size:13px; line-height:1.5; color:var(--wp-muted); margin-bottom:8px; }
.wp-spot-card__cta{
  margin-top:auto; align-self:stretch; text-align:center; white-space:nowrap; padding:11px 6px; border-radius:3px; background:var(--wp-accent); color:#fff;
  font-family:var(--wp-title); text-transform:uppercase; letter-spacing:1px; font-size:12px; font-weight:600;
}
/* Mobile : cartes a faire defiler, la suivante depasse */
@media (max-width:600px){
  .wp-spot-cards{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:72%; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:4px 2px 16px; margin:0 -2px; -webkit-overflow-scrolling:touch; }
  .wp-spot-card{ scroll-snap-align:start; }
  .wp-spot-card__media{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .wp-spot-card, .wp-spot-card__media img{ transition:none; }
}