/* ══════════════════════════════════════════════════════════════════
   Otaku Discount — feuille du theme.

   Genere par build/mktheme.py depuis les feuilles de maquette :
   ne pas modifier a la main, la prochaine generation ecraserait tout.

   Ce que cette feuille NE contient PAS : le blog, qui appartient au
   module odblog et apporte sa propre feuille.
   ══════════════════════════════════════════════════════════════════ */


/* ══ jetons, remise a zero, polices, icones ══ */
@font-face{font-family:"Play";src:url("../fonts/titan.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"UI";src:url("../fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --paper:#FBF9F5; --card:#FFFFFF; --soft:#F5F2EC; --ink:#1C1A17; --ink2:#6E685E; --line:#E7E2D8;
  --brand:#F0A000; --brandTx:#A56600; --act:#D62828; --actTx:#C2201C; --actHv:#9E1A1A; --green:#227A4E; --deep:#191713;
  --plate:#FFFFFF; --onPlate:#1C1A17; --onPlate2:#6E685E; --plateLine:#E2DDD3; --hdr:#FFFFFF; --hdrLine:#E8E6E1; --hdrField:#F7F6F4;
  --onDeep:#B6AFA2; --onDeepS:#FCFAF5; --onDeepLine:#544E45;
  --r:16px; --rs:10px;
  --lift:0 2px 4px rgba(28,26,23,.05), 0 14px 30px -20px rgba(28,26,23,.35);
}

*,*::before,*::after{box-sizing:border-box}
/* L'attribut `hidden` doit gagner contre toute regle d'affichage.
   Sans ce !important, un element pose en display:grid ou flex ignore
   purement et simplement `hidden` : le panneau de detail du bandeau de
   consentement (.cb__d, en display:grid) restait ouvert en permanence. */
[hidden]{display:none!important}

/* Le contenu doit respirer avant le pied de page, qui est sombre et massif.
   `main` n'avait AUCUNE regle : les pages batties sans section (connexion,
   contact, pages de contenu) collaient leur dernier bloc au pied.
   Une page faite de .sec apporte deja son propre espace (.sec{padding:2.9rem 0}) :
   on ne l'additionne pas, sinon l'accueil se termine sur un trou. */
main{padding-bottom:3.5rem}
main:has(> .sec:last-child){padding-bottom:.6rem}
/* La fiche produit termine par <div class="wrap">{hook displayFooterProduct}</div>,
   emis sans condition. Quand ce hook ne rend qu'un <script> de suivi, le <div>
   fait 0 px de haut mais reste le dernier ENFANT : la compensation ne se
   declenchait plus et la page se terminait sur 6,4 rem de vide. On tolere donc
   une enveloppe finale qui ne contient rien d'autre que des scripts — si le
   hook se met un jour a rendre un vrai bloc, la regle cesse de s'appliquer et
   la marge pleine revient d'elle-meme. */
main:has(> .sec + .wrap:last-child:not(:has(*:not(script)))){padding-bottom:.6rem}
html{scrollbar-color:var(--brand) var(--soft)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"UI",ui-rounded,system-ui,sans-serif;
  font-size:.96rem;line-height:1.6;-webkit-font-smoothing:antialiased;caret-color:var(--act)}
::selection{background:var(--brand);color:#1C1A17}
h1,h2,h3,h4,p,ul,figure{margin:0;padding:0}ul{list-style:none}
a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
/* <picture> est « inline » par defaut : sans cette regle, l'intercaler autour
   d'un <img> ajoute l'espace de ligne de base sous l'image et decale les
   cartes produit de quelques pixels. */
picture{display:block}
/* Le coeur seme des <hr/> que les maquettes n'avaient pas prevus : entre le
   formulaire de connexion et « Pas de compte ? », entre deux adresses au
   tunnel, sous le recapitulatif de commande. Sans regle, le navigateur les
   dessine en relief 3D grisatre sur toute la largeur du conteneur. Un filet
   fin, a la couleur des autres filets du site. (.an hr, plus specifique,
   garde son propre reglage dans le rail des pages d'information.) */
hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:var(--soft)}
::-webkit-scrollbar-thumb{background:var(--brand);border:3px solid var(--soft);border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ico--f{fill:currentColor;stroke:none}
.wrap{width:100%;max-width:1300px;margin-inline:auto;padding-inline:1.1rem}
.play{font-family:"Play",ui-rounded,sans-serif;font-weight:400;letter-spacing:.002em;line-height:1.02}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--brand);color:#1C1A17;padding:.6rem 1rem;font-weight:600;border-radius:var(--rs)}

/* ══ en-tete, heros, sections, rail, carte produit ══ */
/* ── en-tête du site, conservé en blanc ── */
.hdr{background:var(--hdr);color:#1C1A17;border-bottom:1px solid var(--hdrLine)}
.hdr__t{display:flex;align-items:center;gap:1.4rem;padding:.8rem 0}
.logo img{height:44px;width:auto}
.srch{flex:1;max-width:640px;display:flex;align-items:stretch;background:var(--hdrField);
  border:1px solid #E2E0DA;border-radius:999px;overflow:hidden;transition:border-color .16s}
.srch:focus-within{border-color:var(--brand)}
.srch input{flex:1;min-width:0;background:transparent;border:0;padding:.58rem 1.15rem;font-size:.95rem;color:#1C1A17}
.srch input::placeholder{color:#8E8A82}
.srch button{background:var(--brand);border:0;width:62px;flex:none;display:grid;place-items:center;
  cursor:pointer;color:var(--onPlate);font-size:1.2rem;transition:background .16s}
.srch button:hover{background:#FFB42E}
.hact{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
/* Le lien du panier est enveloppe dans un <span class="mcw"> (l'accroche du
   mini-panier au survol) : le combinateur enfant de la maquette ne l'atteignait
   plus. Dans la meme barre, « Mon compte » sortait en flex/gras/.92rem et
   « Panier » en texte courant, icone posee sur la ligne de base. */
.hact>a,.hact>.mcw>a{display:flex;align-items:center;gap:.48rem;font-weight:600;font-size:.92rem;color:#1C1A17;white-space:nowrap}
.hact>a .ico,.hact>.mcw>a .ico{font-size:1.32rem}
.hact>a:hover,.hact>.mcw>a:hover{color:var(--brandTx)}
.hact .b{position:relative}
/* .b>.n et non « .hact .n » : le compteur du mini-panier deroulant porte lui
   aussi la classe .n, et il HERITE de cette pastille — fond rouge, position
   absolue a top:-6px — pendant que .mc__h .n, plus loin dans la feuille, lui
   remet une couleur grise. « 0 article » sortait donc en gris sur rouge,
   decale hors du panneau. La pastille n'appartient qu'au lien du panier. */
.hact .b>.n{position:absolute;top:-6px;left:14px;background:var(--act);color:#fff;font-size:.72rem;font-weight:700;
  min-width:19px;height:19px;display:grid;place-items:center;border-radius:10px;padding:0 5px;line-height:1}
@media (max-width:860px){/* :not(.n) — la pastille du compteur est elle aussi un <span>
     enfant direct du lien : sans exclusion, elle disparaissait sur mobile. */
  .hact>a span,.hact>.mcw>a>span:not(.n){display:none}}

/* EN-TETE MOBILE, sous 1024px — refait le 2026-09-27 (reference : la barre
   mobile du Vapoteur Discount, choisie par le client).

     rangee 1 :  [ burger ]      [ logo, centre ]      [ compte ][ panier ]
     rangee 2 :  [ recherche, pleine largeur, loupe a gauche              ]

   UNE GRILLE, et non plus une rangee flex reordonnee : c'est la seule facon
   de centrer VRAIMENT le logo sur l'ecran quand il y a un bouton a gauche et
   deux a droite. En flex, le logo se centre entre ses voisins, donc se
   decale d'une demi-icone vers la gauche. Ici les deux colonnes laterales
   ont la MEME largeur, quel que soit leur contenu.

   Aucune modification du gabarit : le balisage reste burger, logo, recherche,
   icones — grid-template-areas les place. L'ancien ::after qui forcait la
   cassure de ligne a disparu : dans une grille il serait devenu une case de
   plus.

   Marges : padding-inline et padding-block SEPARES, jamais le raccourci
   « padding » — il ecraserait le padding-inline de .wrap et les elements se
   colleraient aux bords (defaut paye le 23/09). */
@media (max-width:1024px){
  .hdr__t{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"brg logo act" "srch srch srch";align-items:center;
    column-gap:.75rem;row-gap:.85rem;padding-block:.9rem 1rem;padding-inline:1.35rem}
  /* Placement seul : l'habillage du burger (rond, taille) vit dans odV_css,
     assemblee APRES cette feuille — a specificite egale, ses regles de base
     ecraseraient tout ce qu'on ecrirait ici. « .hdr__t>.brg » et non « .brg » :
     le detecteur de collisions signale un meme selecteur ecrit dans deux
     feuilles sources, et il a raison — c'est ainsi qu'on perd la trace de qui
     gagne. */
  .hdr__t>.brg{grid-area:brg;justify-self:start}
  .logo{grid-area:logo;justify-self:center}
  .hact{grid-area:act;justify-self:end;margin-left:0;gap:1.4rem}

  /* La recherche en pilule, LOUPE A GAUCHE et sans aplat orange : le bouton
     d'envoi reste le meme element, « order:-1 » le fait passer devant le
     champ. Il envoie toujours le formulaire — seule sa place change. */
  .srch{grid-area:srch;max-width:none}
  .srch button{order:-1;width:auto;background:transparent;color:var(--onPlate);
    padding:0 .15rem 0 1.05rem;font-size:1.15rem}
  /* #935B00 fixe, et non var(--brandTx) : l'ambre de la marque (#A56600) passe
     sur le blanc de l'en-tete (4,6:1) mais PAS sur le gris du champ (4,32:1 —
     36 signalements du detecteur de survols, sur les 18 maquettes et les deux
     modes). Meme teinte, un cran plus sombre : 5,2:1. (Le mode sombre, qui
     justifiait aussi de ne pas passer par un jeton, a ete retire le soir
     meme ; la valeur reste juste.) */
  .srch button:hover{background:transparent;color:#935B00}
  .srch input{padding:.78rem 1.05rem .78rem .6rem}
}

/* TELEPHONE, sous 860px : les libelles « Mon compte » et « Panier » sont
   masques, les icones deviennent des BOUTONS RONDS du meme diametre que le
   burger — c'est la signature de la reference.

   Colonnes laterales FIXES a 86px, soit exactement deux boutons de 40px et
   leur ecart de 6px : sur 360px de large il reste ~140px au logo. Le logo
   est FLUIDE (plafonne a 196px, soit 36px de haut) : l'image fait 5,4 fois
   sa hauteur en largeur, a hauteur fixe elle ne tiendrait pas entre les
   boutons sur un petit telephone. */
@media (max-width:860px){
  .hdr__t{grid-template-columns:86px minmax(0,1fr) 86px;column-gap:.5rem;padding-inline:1rem}
  .logo{width:100%;display:flex;justify-content:center;min-width:0}
  .logo img{width:100%;max-width:196px;height:auto}
  .hact{gap:6px}
  .hact>a,.hact>.mcw>a{width:40px;height:40px;justify-content:center;gap:0;
    border:1.5px solid #E2E0DA;border-radius:50%}
  .hact>a:hover,.hact>.mcw>a:hover{border-color:var(--brand)}
  .hact>a .ico,.hact>.mcw>a .ico{font-size:1.15rem}
  /* la pastille du panier se pose a cheval sur le bord du rond, en haut a
     droite, au lieu de flotter a 14px du bord gauche de l'icone */
  .hact .b>.n{top:-6px;left:auto;right:-7px}
}

/* méga-menu pleine largeur : ancré sur la barre, il ne peut plus déborder de l'écran */
.nav{position:relative;background:var(--hdr);border-bottom:1px solid var(--hdrLine)}
.nav>ul{display:flex;justify-content:center;flex-wrap:wrap}
.nav>ul>li{position:static}
.nav>ul>li>a{display:flex;align-items:center;gap:.3rem;padding:.72rem 1.05rem;font-weight:600;font-size:.95rem;color:#1C1A17}
.nav>ul>li>a:hover,.nav>ul>li:focus-within>a{color:var(--brandTx)}
.nav>ul>li>a .ico{font-size:.72rem;opacity:.55;stroke-width:2.6}
.mega{position:absolute;left:0;right:0;top:100%;z-index:40;display:none;background:#fff;
  border-top:1px solid var(--hdrLine);box-shadow:0 18px 34px -18px rgba(28,26,23,.36)}
.nav>ul>li:hover .mega,.nav>ul>li:focus-within .mega{display:block}
.mega__g{display:grid;gap:1.4rem 2.2rem;padding-block:1.5rem 1.7rem;
  grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.95fr);align-items:start}
.mega__t{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6E685E;
  margin-bottom:.55rem;padding-bottom:.4rem;border-bottom:1px solid #EFEDE8}
.mega__c ul{display:grid;gap:.08rem}
.mega a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.34rem .45rem;
  font-size:.91rem;color:#1C1A17;border-radius:6px}
.mega a:hover{background:#F3F0EA;color:#C2201C}
.mega a b{font-weight:700}
.mega .c{font-size:.82rem;color:#6E685E}
.mega__b{display:grid;gap:.6rem;align-content:start}
.mega__b a{padding:0;border-radius:8px;overflow:hidden;display:block}
.mega__b a:hover{background:transparent}
.mega__b img{width:100%;height:auto;display:block;transition:transform .35s cubic-bezier(.25,1,.5,1)}
.mega__b a:hover img{transform:scale(1.03)}
@media (max-width:1000px){.mega__g{grid-template-columns:repeat(2,minmax(0,1fr))}.mega__b{grid-column:1/-1;grid-template-columns:1fr 1fr}}
/* LE MENU DE BUREAU DISPARAIT SOUS 1024px. Il ne l'etait PAS jusqu'au
   23/09 : seul .mega etait masque, et .nav>ul devenait une barre a defilement
   horizontal — pendant que .brg apparaissait de son cote (odV_css.html).
   L'ecran montrait donc DEUX menus a la fois sous 860px, le burger et la
   barre de rubriques. C'est le defaut signale par le client.
   Le seuil passe de 860 a 1024 px pour couvrir les tablettes : le mega-menu
   s'ouvre au survol (« .nav>ul>li:hover .mega »), or il n'y a pas de survol
   sur un ecran tactile — sur tablette il etait donc inatteignable. Sous
   1024px, c'est le tiroir qui sert, et lui fonctionne au toucher. */
@media (max-width:1024px){.nav{display:none}.mega{display:none!important}}

/* ── ouverture ── */
.hero{position:relative;background:var(--deep);overflow:hidden}
.hero__v{position:relative;min-height:clamp(370px,53vw,560px)}
.sl{position:absolute;inset:0;opacity:0;transition:opacity .7s cubic-bezier(.25,1,.5,1);pointer-events:none}
.sl[data-on]{opacity:1;pointer-events:auto}
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sl::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(13,12,10,.93) 6%,rgba(13,12,10,.7) 40%,rgba(13,12,10,.06) 74%)}
.sl__c{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:.95rem;max-width:42rem;padding:2.6rem 0}
.sl__h{font-family:"Play",sans-serif;font-size:clamp(3rem,1.7rem+5.9vw,5.8rem);line-height:.98;color:#FCFAF5;
  text-shadow:0 2px 18px rgba(8,7,6,.55)}
.sl__p{color:#E2DCCF;font-size:clamp(1rem,.94rem+.3vw,1.15rem);max-width:40ch}
.sl__a{margin-top:.5rem;display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;
  background:var(--act);color:#fff;font-weight:700;padding:.78rem 1.4rem;border-radius:999px;
  transition:transform .18s cubic-bezier(.25,1,.5,1),background .18s}
.sl__a:hover{background:#B81F1F;transform:translateY(-2px)}
.hero__n{position:absolute;left:0;right:0;bottom:1.1rem;z-index:5}
.hero__n .wrap{display:flex;align-items:center;gap:.5rem}
.dot{width:32px;height:5px;border-radius:3px;background:rgba(252,250,245,.32);border:0;padding:0;cursor:pointer;transition:background .2s}
.dot[aria-current="true"]{background:var(--brand)}
.arw{margin-left:auto;display:flex;gap:.45rem}
.arw button{width:40px;height:40px;border-radius:50%;background:rgba(13,12,10,.5);
  border:1px solid rgba(252,250,245,.3);color:#FCFAF5;cursor:pointer;display:grid;place-items:center;
  font-size:1.05rem;transition:.18s}
.arw button:hover{background:var(--brand);color:#1C1A17;border-color:var(--brand)}
@media (max-width:640px){.arw{display:none}}

/* ── mosaique d'ouverture : trois blocs, le premier sur deux rangees ──
   Remplace le carrousel sur l'accueil (2026-09-22). Les regles .hero
   ci-dessus restent : le fragment existe toujours et peut resservir.

   Le bloc de gauche est HAUT (deux rangees) et les deux autres larges : une
   meme image ne peut pas convenir aux deux formes, d'ou object-fit:cover et
   un sujet qu'on demande centre au back-office. */
.mo{padding:1.1rem 0 .2rem}
.mo__g{display:grid;gap:10px;grid-template-columns:1.72fr 1fr;grid-template-rows:1fr 1fr;
  min-height:clamp(340px,42vw,520px)}
.mo__t{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--deep);text-decoration:none;isolation:isolate}
.mo__t--g{grid-row:span 2}
.mo__t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.25,1,.5,1)}
.mo__t:hover img{transform:scale(1.04)}
/* Le degrade part de transparent : le haut de l'image reste lisible, le bas
   porte le titre. Sans lui, un visuel clair rendrait le titre blanc illisible. */
.mo__t::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(transparent 34%,rgba(13,12,10,.55) 62%,rgba(13,12,10,.92))}
.mo__e{position:absolute;top:.85rem;left:.85rem;z-index:2;display:flex;flex-wrap:wrap;gap:.35rem}
/* .72rem = 11,52 px : le plancher du projet est a 11 px, et une etiquette
   en capitales est deja plus dure a lire qu'un mot en bas de casse. */
.mo__e span{background:rgba(13,12,10,.72);color:#FCFAF5;font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:.3rem .55rem;border-radius:6px}
.mo__e span:first-child{background:var(--act);color:#fff}
.mo__x{position:absolute;left:1rem;right:1rem;bottom:.95rem;z-index:2}
.mo__h{font-family:"Play",sans-serif;font-weight:400;color:#FCFAF5;margin:0;line-height:1.04;
  font-size:clamp(1.15rem,.95rem+.7vw,1.6rem);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.mo__p{margin:.45rem 0 0;color:#E2DCCF;font-size:.92rem;line-height:1.45}
.mo__t--g .mo__x{left:1.6rem;right:1.6rem;bottom:1.5rem}
.mo__t--g .mo__h{font-size:clamp(1.8rem,1.1rem+2.6vw,3.2rem)}
.mo__t--g .mo__p{font-size:1.02rem;max-width:44ch}
.mo__t:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.mo__t img{transition:none}.mo__t:hover img{transform:none}}
/* Sous 860px la grille devient un RAIL A DEFILEMENT HORIZONTAL (demande du
   client le 23/09, reference : le bandeau mobile de La Redoute). Elle tombait
   jusque-la en colonne : les trois blocs empiles poussaient le contenu de la
   page tres bas, et le troisieme n'etait jamais vu.

   Pourquoi 88% et pas 100% : la tuile suivante depasse volontairement du bord
   droit. C'est la SEULE indication qu'il y a autre chose a voir — sans ce
   debord, un rail ressemble a une image fixe et personne ne fait glisser.
   Le scroll-padding aligne la premiere tuile sur la marge du .wrap, sinon
   elle se cale au ras de l'ecran et rompt l'alignement de la page.
   Pas de pastilles de pagination : elles demanderaient du JavaScript. Le
   debord suffit a dire que ca defile. */
@media (max-width:860px){
  .mo__g{display:flex;grid-template-columns:none;grid-template-rows:none;min-height:0;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mo__g::-webkit-scrollbar{display:none}
  .mo__t{flex:0 0 88%;scroll-snap-align:start;aspect-ratio:4/5}
  .mo__t--g{grid-row:auto;aspect-ratio:4/5}
  /* les libelles du grand bloc reviennent a la taille des autres : a 88% de
     large, le clamp de 3,2rem du bloc principal debordait de sa tuile. */
  .mo__t--g .mo__x{left:1rem;right:1rem;bottom:.95rem}
  .mo__t--g .mo__h{font-size:clamp(1.3rem,1rem+1.6vw,1.9rem)}
  .mo__t--g .mo__p{font-size:.92rem}
  /* Pastilles de pagination. Posees par le script (odG_body2.html) et non par
     le gabarit : le rail defile sans JavaScript, un indicateur ecrit en dur
     serait mort alors que le rail, lui, continuerait de glisser.
     .mo__d[hidden] est explicite : « display:flex » ci-dessous l'emporterait
     sinon sur l'attribut hidden que le script pose quand rien ne defile. */
  .mo__d{display:flex;justify-content:center;gap:.4rem;padding:.75rem 0 .15rem}
  .mo__d[hidden]{display:none}
  .mo__dot{width:22px;height:4px;padding:0;border:0;border-radius:999px;
    background:var(--line);cursor:pointer;transition:background .2s,width .2s}
  .mo__dot[aria-current="true"]{background:var(--ink);width:30px}
  .mo__dot:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
}
/* Au-dessus du seuil .mo__g redevient une grille : plus rien ne defile, les
   pastilles n'ont plus de sens. Le script les masque aussi de son cote. */
.mo__d{display:none}

/* ── bandeau ── */
/* Le bandeau est le PREMIER element de la page, au-dessus de l'en-tete —
   la bande d'annonce classique d'une boutique. Sur telephone il repasse
   SOUS le menu : la premiere chose qu'on doit voir sur un petit ecran, c'est
   le logo et la recherche, pas une promesse qui defile.

   Le reordonnancement se fait en CSS et non dans le gabarit : le balisage
   reste unique, donc le texte n'est lu qu'une fois par un lecteur d'ecran, et
   l'ordre de tabulation ne change pas. .skip, le sprite, .ov et .dw sont en
   position absolue ou fixe : ils ne comptent pas comme elements de la
   colonne flex. */
@media (max-width:860px){body{display:flex;flex-direction:column}header.hdr{order:-1}}
/* « header.hdr » et non « .hdr » : le detecteur de collisions signale, a juste
   titre, un meme selecteur declare dans deux feuilles sources — .hdr appartient
   a odG_head. Le selecteur reste unique, et rien ne se dispute « order ». */
.mq{background:var(--brand);color:#1C1A17;overflow:hidden;padding:.45rem 0}
.mq__t{display:flex;width:max-content;align-items:center;animation:slide 40s linear infinite}
.mq:hover .mq__t{animation-play-state:paused}
.mq span{font-weight:600;font-size:.87rem;padding-inline:1rem;white-space:nowrap;display:flex;align-items:center;gap:.45rem}
.mq .ico{font-size:1.05rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq__t{animation:none;width:100%;justify-content:center}
  .mq__t>span:nth-child(n+4){display:none}}

/* ── sections ── */
.sec{padding:2.9rem 0;color:var(--ink)}
.sec--soft{background:var(--soft);color:var(--ink)}
.shd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.4rem 1.6rem;margin-bottom:1.5rem}
.sttl{display:flex;align-items:center;gap:.72rem}
.sti{font-size:1.85rem;color:var(--brand);flex:none}
.st{position:relative;display:inline-block;padding-bottom:.16rem}
.st b{font-family:"Play",sans-serif;font-weight:400;display:block;
  font-size:clamp(1.35rem,1.05rem+1.35vw,2.1rem);line-height:1.06}
.st svg.brush{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.28em}
.st svg.brush path{fill:var(--brand)}
.shd .m{font-size:.88rem;color:var(--ink2);display:flex;align-items:center;gap:.4rem}
.shd .m a{font-weight:600;color:var(--actTx)}
.shd .m a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── rail ── */
.rail{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.rc{position:relative;aspect-ratio:5/3;overflow:hidden;display:block;border-radius:var(--r)}
.rc img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.25,1,.5,1)}
.rc:hover img{transform:scale(1.06)}
.rc::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 32%,rgba(13,12,10,.86))}
.rc b{position:absolute;left:.85rem;right:.85rem;bottom:1.5rem;z-index:2;color:#FCFAF5;font-weight:600;
  font-size:1.02rem;line-height:1.15;text-shadow:0 1px 6px rgba(10,9,8,.75)}
.rc span{position:absolute;left:.85rem;bottom:.6rem;z-index:2;font-size:.8rem;color:var(--brand);font-weight:600}

/* ── carte produit ── */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
/* Sous 860px les sections produits deviennent des RAILS A DEFILEMENT
   HORIZONTAL (demande du client le 23/09, reference La Redoute).
   Elles tombaient jusque-la a UNE SEULE colonne : avec minmax(224px,1fr) sur
   340 px de contenu, un telephone n'affichait qu'un produit par ecran et il
   fallait derouler toute la page pour en voir quatre. Deux par ecran plus un
   debord, c'est quatre fois plus de catalogue vu pour le meme geste.
   46 % : deux cartes entieres et un bout de la troisieme. Ce debord est la
   seule indication qu'il y a autre chose a voir. */
@media (max-width:860px){
  /* « .sec .grid » ET PAS « .grid » : le MEME selecteur que le script.
     La classe .grid sert aussi au listing d'une page categorie
     (catalog/_partials/productlist.tpl), qui n'est PAS dans une .sec.
     Les rails de section sont : .sec .grid, .sec .rail, .sec .bl, .sec .stp. Ecrite
     sans restriction, cette regle transformait la liste entiere d'une
     categorie en rail horizontal — 847 produits a faire defiler au doigt, une
     page sans fin de haut en bas devenue une page sans fin de gauche a
     droite. Les deux selecteurs doivent rester identiques. */
  .sec .grid{display:flex;grid-template-columns:none;gap:.7rem;
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1.1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sec .grid::-webkit-scrollbar{display:none}
  .sec .grid>*{flex:0 0 46%;min-width:148px;scroll-snap-align:start}

  /* « Par univers » : meme rail, mais CENTRE, avec un debord des DEUX cotes
     (demande du client le 23/09). Les cartes sont plus larges que celles des
     produits — une vignette de marque n'a ni prix ni bouton, elle peut donc
     occuper l'ecran — et scroll-snap-align:center les cale au milieu, ce qui
     laisse voir un bout de la precedente ET de la suivante.
     La premiere carte, elle, se cale a gauche : a scrollLeft 0 il n'y a rien
     a sa gauche a montrer. C'est le comportement normal d'un rail centre.

     LE RAPPORT RESTE EN 5/3. Les vignettes d'univers sont des medium_default
     de 300x180 : une carte portrait comme celle de la capture les recouperait
     aux deux tiers. Mieux vaut une carte paysage nette qu'une carte haute
     remplie d'un fragment d'image. */
  .sec .rail{display:flex;grid-template-columns:none;gap:.7rem;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sec .rail::-webkit-scrollbar{display:none}
  .sec .rail>*{flex:0 0 78%;min-width:210px;scroll-snap-align:center}

  /* Articles du blog : meme rail. Ils tombaient a UNE colonne sous 860px
     (odG_css2.html ne pose ses trois colonnes qu'au-dessus), donc trois
     cartes hautes empilees que personne ne deroulait jusqu'au bout.
     76 % et non 46 % comme les produits : une carte d'article porte un titre
     de deux a trois lignes, une date et un lien — a moitie d'ecran le titre
     partait sur cinq lignes. Cale a gauche et non au centre, comme les
     produits : on lit une liste d'articles, on ne contemple pas une
     diapositive. */
  .sec .bl{display:flex;grid-template-columns:none;gap:.7rem;
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1.1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sec .bl::-webkit-scrollbar{display:none}
  .sec .bl>*{flex:0 0 76%;min-width:230px;scroll-snap-align:start}

  /* « Comment ca marche » : meme rail, mais cartes plus ETROITES (72 %).
     Ce n'est pas une liste ou l'on pioche, c'est une sequence numerotee de
     trois etapes qu'il faut lire jusqu'au bout — la boutique ne vend qu'en
     precommande, et comprendre le principe est le premier obstacle a lever.
     Un debord plus franc est donc ici une necessite et pas une coquetterie :
     c'est lui qui dit qu'il reste des etapes apres la premiere.
     Les cartes portent un fond et une bordure (.stp>div) : align-items
     stretch par defaut leur donne la meme hauteur, ce qui vaut mieux que
     trois cartes de hauteurs differentes cote a cote. */
  .sec .stp{display:flex;grid-template-columns:none;gap:.7rem;
    overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:1.1rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sec .stp::-webkit-scrollbar{display:none}
  .sec .stp>*{flex:0 0 72%;min-width:215px;scroll-snap-align:start}
  /* Barre de progression, posee par le script. Une section porte jusqu'a
     douze produits : douze pastilles ne se visent pas au doigt et ne disent
     rien. Une barre dit ou l'on est ET combien il reste.
     [hidden] explicite, sinon le display:block ci-dessus l'emporte sur
     l'attribut que le script pose quand rien ne defile. */
  .gr__p{display:block;height:3px;margin:.95rem 1.1rem .1rem;border-radius:999px;
    background:var(--line);overflow:hidden}
  .gr__p[hidden]{display:none}
  .gr__p i{display:block;height:100%;border-radius:999px;background:var(--ink);
    transition:transform .12s linear}
}
/* Au-dessus du seuil la grille reprend ses colonnes : plus rien ne defile. */
.gr__p{display:none}

/* Rangee de pied de section : le bouton « voir tout » a gauche, les fleches a
   droite (reference La Redoute). Le bouton EXISTAIT deja sous la grille
   (a.cta) ; le script le deplace dans cette rangee au lieu d'en creer un
   second. D'ou « margin-top:0 » : sa marge de 1,5rem est reprise par .gr__f.

   Deux etats, parce que les deux contenus n'ont pas la meme duree de vie :
   une rangee AVEC bouton existe a toutes les largeurs (le bouton est utile
   sur grand ecran aussi) ; une rangee qui ne porterait QUE des fleches n'a
   de sens que la ou ca defile — sinon elle laisserait 1,5rem de vide. */
.gr__f{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.gr__f .cta{margin-top:0}
.gr__f--nu{display:none;margin-top:.9rem}
.gr__n{display:none;margin-left:auto;gap:.6rem}
.gr__b{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;
  border:1.5px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink);cursor:pointer;transition:border-color .16s,background .16s}
.gr__b:hover:not(:disabled){border-color:var(--brand)}
.gr__b:disabled{opacity:.35;cursor:default}
/* #i-chev pointe vers le BAS au repos : -90deg le couche vers la droite,
   +90deg vers la gauche. Meme rotation que le fil d'Ariane (.bc .ico). */
.gr__b .ico{font-size:.9rem;stroke-width:2.6}
.gr__b--prec .ico{transform:rotate(90deg)}
.gr__b--suiv .ico{transform:rotate(-90deg)}
@media (max-width:860px){
  .gr__n{display:flex}
  .gr__f--nu{display:flex}
  .gr__n[hidden]{display:none}
}
.pc{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .2s cubic-bezier(.25,1,.5,1),border-color .2s}
.pc:hover{transform:translateY(-4px);border-color:var(--brand)}
.pc__i{position:relative;background:var(--plate);padding:5%;overflow:hidden}
/* height:auto — SANS LUI, aspect-ratio reste sans effet. Les <img> du theme
   portent width= et height= (image.tpl les pose pour reserver la place) ; le
   navigateur en fait des width/height CSS. La feuille ecrasait la largeur et
   pas la hauteur, donc la vignette sortait a 452 px de haut sur une carte de
   239 px de large. Meme correction partout ailleurs dans le theme. */
/* aspect-ratio:4/5 et non 1 — c'est la VRAIE forme des visuels. La
   configuration annonce medium_default en 452x452, mais les fichiers sur le
   disque font tous 600x745 (40 sur 40 preleves au hasard sur 527) : dans une
   boite carree, object-fit:contain laissait du blanc a gauche et a droite, et
   la figurine ne faisait que 80 % de la largeur de la carte. A 4/5 (0,800
   contre 0,805 reel) l'image remplit la carte et la vignette gagne un quart
   de hauteur. Les maquettes, elles, portent des images carrees : le blanc
   lateral qu'on y voit est normal, il n'existe pas sur le site. */
.pc__i img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .42s cubic-bezier(.25,1,.5,1)}
.pc:hover .pc__i img{transform:scale(1.05)}
.pc__f{position:absolute;top:.65rem;left:.65rem;z-index:2;display:inline-flex;align-items:center;gap:.32rem;
  font-size:.76rem;font-weight:700;padding:.22rem .58rem .22rem .48rem;border-radius:999px;
  background:var(--onPlate);color:#fff}
.pc__f .ico{font-size:.92rem}
.pc__f--n{background:var(--brand);color:#1C1A17}
.pc__f--l{background:var(--act);color:#fff}
.pc__w{position:absolute;top:.6rem;right:.6rem;z-index:2;width:34px;height:34px;border-radius:50%;
  background:var(--plate);border:1px solid var(--plateLine);color:var(--onPlate2);display:grid;place-items:center;
  cursor:pointer;font-size:1.05rem;transition:.16s}
.pc__w:hover{background:var(--act);border-color:var(--act);color:#fff}
/* Le coeur d'une piece deja dans la liste d'envies. Sans cet etat, le bouton
   repondait au clic sans que rien ne se voie : le client cliquait deux fois,
   et retirait ce qu'il venait d'ajouter. */
.pc__w[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:#fff}
.pc__w[aria-busy="true"]{opacity:.55;pointer-events:none}
/* Memes etats pour le coeur de la fiche produit, qui partage l'ecouteur. */
.wish[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:#fff}
.wish[aria-busy="true"]{opacity:.55;pointer-events:none}
/* blockwishlist rend son propre bouton par displayProductActions. Il est
   masque : son glyphe est une ligature Material Icons que la feuille cache
   deja, et notre coeur remplit la meme fonction en parlant au meme
   controleur. */
.product-actions .wishlist-button,.product-actions .wishlist-button-product{display:none}
.pc__b{padding:.9rem .9rem 1rem;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.pc__brand{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--actTx)}
.pc__n{margin-top:.42rem;font-weight:500;font-size:.9rem;line-height:1.36;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.pc__n a::after{content:"";position:absolute;inset:0;z-index:1}
.pc__p{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line);width:100%;
  font-family:"Play",sans-serif;font-size:1.4rem;font-variant-numeric:tabular-nums}
.pc__a{position:relative;z-index:2;margin-top:.75rem;width:100%;display:flex;align-items:center;
  justify-content:center;gap:.5rem;background:var(--act);color:#fff;border:0;border-radius:999px;
  padding:.62rem .8rem;font-weight:700;font-size:.85rem;cursor:pointer;
  transition:background .16s,transform .16s cubic-bezier(.25,1,.5,1)}
.pc__a .ico{font-size:1.05rem}
.pc__a:hover{background:#B81F1F;transform:translateY(-1px)}
.cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.5rem;background:var(--ink);color:var(--paper);
  border-radius:999px;padding:.72rem 1.35rem;font-weight:700;font-size:.9rem;transition:.18s}
.cta:hover{background:var(--act);border-color:var(--act);color:#fff}

/* ══ licences, reassurance, actualite, infolettre, etapes, pied ══ */
/* ── réassurance ── */
.rs{background:var(--deep);color:var(--onDeepS);padding:1.8rem 0}
.rs ul{display:grid;gap:1.2rem}
@media (min-width:760px){.rs ul{grid-template-columns:repeat(4,1fr);gap:1.9rem}}
.rs li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start}
.rs .ico{font-size:1.55rem;color:var(--brand);margin-top:1px}
.rs b{display:block;font-weight:600;font-size:.92rem;margin-bottom:.1rem}
.rs p{font-size:.86rem;color:var(--onDeep);line-height:1.5}

.nt{margin-top:1.2rem;padding:.85rem 1rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rs);font-size:.86rem;color:var(--ink2);line-height:1.6;max-width:84ch}
.nt b{color:var(--ink);font-weight:600}

/* ── actualité ── */
.bl{display:grid;gap:1rem}
@media (min-width:860px){.bl{grid-template-columns:repeat(3,1fr)}}
.ba{position:relative;display:flex;flex-direction:column;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .2s cubic-bezier(.25,1,.5,1),border-color .2s}
.ba:hover{transform:translateY(-4px);border-color:var(--brand)}
.ba__i{position:relative;overflow:hidden;background:var(--soft)}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.ba__i img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;transition:transform .42s cubic-bezier(.25,1,.5,1)}
.ba:hover .ba__i img{transform:scale(1.05)}
.ba__b{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.ba__d{display:flex;align-items:center;gap:.42rem;font-size:.82rem;font-weight:600;color:var(--actTx)}
.ba__d .ico{font-size:1.02rem}
.ba__t{font-weight:600;font-size:1.02rem;line-height:1.34;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ba__t a::after{content:"";position:absolute;inset:0;z-index:1}
.ba__a{position:relative;z-index:2;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  gap:.5rem;background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;
  padding:.5rem 1.05rem;font-weight:700;font-size:.85rem;cursor:pointer;transition:.16s}
.ba:hover .ba__a,.ba__a:hover{background:var(--act);border-color:var(--act);color:#fff}

/* ── lettre + avis ── */
.duo{display:grid;gap:1rem}
@media (min-width:900px){.duo{grid-template-columns:1.15fr 1fr;gap:1.3rem}}
.nl{background:var(--deep);color:var(--onDeepS);padding:1.8rem 1.7rem;border-radius:var(--r)}
.nl h3{font-family:"Play",sans-serif;font-weight:400;font-size:1.4rem;line-height:1.12;margin-bottom:.5rem;
  display:flex;align-items:center;gap:.6rem}
.nl h3 .ico{color:var(--brand);font-size:1.5rem}
.nl p{color:var(--onDeep);font-size:.9rem;max-width:44ch}
.nl form{display:flex;gap:.5rem;margin-top:1.05rem;flex-wrap:wrap}
.nl input{flex:1;min-width:200px;background:transparent;border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.62rem 1rem;font-size:.9rem}
.nl input::placeholder{color:rgba(255,255,255,.45)}
.nl button{background:var(--brand);color:#1C1A17;border:0;border-radius:999px;padding:.62rem 1.3rem;
  font-weight:700;cursor:pointer;transition:.16s}
.nl button:hover{background:#FFB42E}
.nl small{display:block;margin-top:.7rem;font-size:.82rem;color:var(--onDeep)}
.av{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:1.8rem 1.7rem;display:flex;flex-direction:column}
.av h3{font-family:"Play",sans-serif;font-weight:400;font-size:1.4rem;line-height:1.12;margin-bottom:.5rem;
  display:flex;align-items:center;gap:.6rem}
.av h3 .ico{color:var(--brand);font-size:1.5rem}
.av__e{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.55rem;padding:1rem 0}
/* Le code d'un service d'avis (Google, Trustpilot) colle depuis le
   back-office. On ne met en forme QUE le conteneur : le service fournit
   sa propre presentation. L'iframe est forcee a la largeur du bloc, sans
   quoi elle deborde sur mobile. */
.av__x{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.5rem 0;overflow:hidden}
.av__x iframe{max-width:100%;width:100%;border:0;display:block}
.av__x img{max-width:100%;height:auto}
.av__e p{color:var(--ink2);font-size:.9rem;max-width:46ch;line-height:1.55}
.av__e b{font-weight:600;color:var(--ink)}
/* Avis reellement collectes. Ces regles manquaient : le jour ou une source
   (Trustpilot, Avis Verifies, le module d'avis de PrestaShop) serait branchee,
   le bloc serait sorti en balises nues au milieu du .duo — et aucun audit de
   classes ne l'aurait vu, ces balises n'en portant aucune. */
.av ul{flex:1;display:grid;gap:.9rem;padding:1rem 0 0;margin:0;list-style:none}
.av li{display:grid;gap:.3rem;padding:.85rem 1rem;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--rs)}
.av li b{font-weight:600;color:var(--ink);font-size:.92rem}
.av li p{color:var(--ink2);font-size:.9rem;line-height:1.55}

/* ── étapes ── */
.stp{display:grid;gap:1rem}
@media (min-width:860px){.stp{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.stp>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.35rem}
.stp .h{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.stp .h b{font-family:"Play",sans-serif;font-size:1.6rem;color:var(--brand);line-height:1}
.stp h3{font-weight:600;font-size:1.02rem}
.stp p{font-size:.89rem;color:var(--ink2);line-height:1.58}

/* ── pied ── */
.ft{background:var(--deep);color:var(--onDeep);padding:2.5rem 0 2.9rem}
.ft__g{display:grid;gap:1.7rem}
@media (min-width:820px){.ft__g{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.3rem}}
.ft h2{font-weight:600;font-size:.92rem;color:var(--onDeepS);margin-bottom:.6rem}
.ft li{margin:.3rem 0;font-size:.89rem}
.ft a:hover{color:var(--brand)}
.ft__l img{height:36px;width:auto;background:#fff;padding:.4rem .55rem;border-radius:var(--rs);margin-bottom:.8rem}
.ft__l p{font-size:.88rem;line-height:1.6;max-width:38ch}
.ft__b{margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(242,239,232,.14);
  font-size:.82rem;line-height:1.75;color:var(--onDeep)}
.ft__b b{color:var(--onDeepS);font-weight:600}

/* ══ partages : fil d'Ariane, etapes, formulaires, pagination, accordeon ══ */
/* ── fil d'Ariane ── */
.bc{padding:.9rem 0;border-bottom:1px solid var(--line)}
.bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem;list-style:none;margin:0;padding:0;
  font-size:.86rem;color:var(--ink2)}
.bc a:hover{color:var(--actTx)}
.bc .ico{font-size:.72rem;opacity:.5;stroke-width:2.6;transform:rotate(-90deg)}
.bc [aria-current]{color:var(--ink);font-weight:600}

/* ── styles partagés par le panier et le tunnel ── */
.st5{padding:1.4rem 0 .2rem;color:var(--ink)}
.st5 ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;list-style:none;margin:0;padding:0}
.st5 li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink2)}
.st5 li .n{width:26px;height:26px;border-radius:50%;background:var(--soft);border:1px solid var(--line);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;flex:none}
.st5 li[aria-current]{color:var(--ink);font-weight:700}
.st5 li[aria-current] .n{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.st5 .sep{color:var(--line);font-size:1rem}

.kh{padding:.6rem 0 1.4rem;color:var(--ink)}
.kh h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.7rem,1.3rem+1.9vw,2.6rem);line-height:1.05}
.kh p{color:var(--ink2);margin-top:.35rem;font-size:.95rem}

/* ── rappel précommande ── */
.pw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;padding:.9rem 1rem;border-radius:12px;
  background:#FBF1DD;color:#5A3B00;font-size:.9rem;line-height:1.55;margin-top:1.1rem}
.pw .ico{font-size:1.3rem;flex:none;margin-top:1px}
.pw b{font-weight:700}

/* ── frise d'avancement ── */
.tl{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.3rem 1.4rem 1.4rem;margin-bottom:1.2rem}
.tl h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.25rem;margin-bottom:1.2rem}
.tl__l{display:grid;gap:1.15rem}
/* Le gabarit rend AUTANT d'etapes que la commande a d'etats reels (mesure :
   de 2 a 7 selon les commandes). Quatre colonnes figees laissaient la moitie
   du cadre vide a 2 etats, et faisaient deborder le trait de liaison a 7.
   grid-auto-flow:column donne toujours UNE rangee de N colonnes egales. */
@media (min-width:820px){.tl__l{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.9rem}}
.tl__i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;position:relative}
@media (min-width:820px){.tl__i{grid-template-columns:1fr;gap:.55rem;padding-top:2.6rem}
  .tl__i::before{content:"";position:absolute;top:17px;left:0;right:0;height:2px;background:var(--line)}
  .tl__i:first-child::before{left:50%}
  .tl__i:last-child::before{right:50%}
  .tl__i .dot{position:absolute;top:6px;left:50%;transform:translateX(-50%)}}
.tl__i .dot{width:24px;height:24px;border-radius:50%;background:var(--card);border:2px solid var(--line);
  display:grid;place-items:center;font-size:.78rem;font-weight:700;color:var(--ink2);flex:none;z-index:1}
.tl__i[data-ok] .dot{background:var(--green);border-color:var(--green);color:#fff}
.tl__i[data-now] .dot{background:var(--brand);border-color:var(--brand);color:#1C1A17}
.tl__i b{font-weight:700;font-size:.94rem;line-height:1.3;display:block}
.tl__i p{font-size:.86rem;color:var(--ink2);line-height:1.5;margin-top:.2rem}
.tl__i[data-now] b{color:var(--ink)}
@media (min-width:820px){.tl__i{text-align:center}.tl__i p{max-width:26ch;margin-inline:auto}}

/* ── boîte et ligne d'article (partagées) ── */
.bx{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);overflow:hidden}
.bx__h{display:flex;align-items:center;gap:.65rem;padding:.85rem 1.1rem;background:var(--soft);
  border-bottom:1px solid var(--line)}
.bx__h .ico{font-size:1.3rem;color:var(--brand);flex:none}
.bx__h b{font-weight:700;font-size:.98rem}
.bx__h .d{margin-left:auto;font-size:.85rem;color:var(--ink2);font-weight:600}
.bx__b{padding:1rem 1.1rem 1.15rem}
.bx__b dl{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;margin:0;font-size:.93rem}
.bx__b dt{color:var(--ink2)}
.bx__b dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.bx__b dd.free{color:var(--green)}
.bx__t{border-top:1px solid var(--line);margin-top:.85rem;padding-top:.85rem;display:flex;
  align-items:baseline;justify-content:space-between;gap:1rem}
.bx__t span{font-weight:700}
.bx__t b{font-family:"Play",sans-serif;font-weight:400;font-size:1.8rem;font-variant-numeric:tabular-nums;line-height:1}
.bx address{font-style:normal;font-size:.93rem;line-height:1.65;color:var(--ink)}
.bx .sub{font-size:.86rem;color:var(--ink2);margin-top:.5rem;line-height:1.5}

.ln{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:.8rem;align-items:center;
  padding:.8rem 1.1rem;border-bottom:1px solid var(--line)}
.ln:last-child{border-bottom:0}
.ln .im{background:var(--plate);border:1px solid var(--plateLine);border-radius:8px;padding:4%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.ln .im img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.ln .nm{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.ln .q{font-size:.82rem;color:var(--ink2);margin-top:.1rem}
.ln .p{font-weight:700;font-size:.94rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── pagination ── */
.pg{color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;margin-top:2.2rem}
.pg a,.pg span{min-width:42px;height:42px;display:grid;place-items:center;padding:0 .7rem;border-radius:999px;
  border:1px solid var(--line);font-weight:600;font-size:.92rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.pg a:hover{background:var(--act);border-color:var(--act);color:#fff}
.pg [aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pg .e{border:0;color:var(--ink2)}
/* margin-top:0 : la règle autonome .nx (bouton « article suivant » du blog,
   plus bas dans cette feuille) pose margin-top:1.15rem. .pg centre ses
   enfants ; sans cette remise à zéro « Page suivante » descend de 1,15 rem
   sous la ligne des pastilles. */
.pg .nx{margin-top:0;display:inline-flex;gap:.5rem;align-items:center;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pg .nx:hover{background:var(--act);border-color:var(--act);color:#fff}
.pg .nx .ico{font-size:1rem}

/* ── formulaire ── */
.fr{display:grid;gap:.9rem}
@media (min-width:620px){.fr--2{grid-template-columns:1fr 1fr}}
.fd{display:flex;flex-direction:column;gap:.32rem}
.fd label{font-size:.86rem;font-weight:600;color:var(--ink2)}
.fd label .req{color:var(--actTx)}
.fd input,.fd select,.fd textarea{background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  border-radius:10px;padding:.62rem .85rem;font-size:.95rem;width:100%}
.fd input:focus,.fd select:focus,.fd textarea:focus{border-color:var(--brand);outline:none}
.fd textarea{min-height:80px;resize:vertical;line-height:1.55}
.fd .hint{font-size:.82rem;color:var(--ink2)}
.ck{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:start;cursor:pointer;
  font-size:.92rem;line-height:1.55}
.ck input{appearance:none;width:20px;height:20px;flex:none;border:1.5px solid var(--line);border-radius:6px;
  background:var(--card);cursor:pointer;position:relative;margin-top:1px;transition:.14s}
.ck input:checked{background:var(--ink);border-color:var(--ink)}
.ck input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:2px solid var(--paper);border-top:0;border-left:0;transform:rotate(42deg)}
.ck input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.ck b{font-weight:700}
.ck a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* Les libelles RGPD / newsletter arrivent du coeur avec un <em> de mention
   legale — parfois un <p> a l'interieur. Rien ne le visait : deux pavés en
   italique a la taille du libelle, colles a la case. */
.ck em{display:block;margin-top:.3rem;font-style:normal;font-size:.82rem;color:var(--ink2);line-height:1.5}
.ck em p{margin:0}
.ck em p+p{margin-top:.4rem}
.nx{margin-top:1.15rem;display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);
  border:0;border-radius:999px;padding:.75rem 1.5rem;font-weight:700;font-size:.95rem;cursor:pointer}
.nx:hover{background:var(--act);color:#fff}

/* ── en-tête de rubrique ── */
.mh{padding:1.7rem 0 1.3rem;color:var(--ink)}
.mh__t{display:flex;align-items:center;gap:.85rem}
.mh__t .ico{font-size:2.2rem;color:var(--brand);flex:none}
.mh h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.8rem,1.3rem+2.1vw,2.9rem);line-height:1.04}
.mh__x{margin-top:.75rem;font-size:1.02rem;line-height:1.65;max-width:74ch;color:var(--ink)}
.mh__n{margin-top:.5rem;font-size:.95rem;color:var(--ink2)}
.mh__n b{color:var(--ink);font-weight:600}

/* ── accordeon de questions (categorie + article) ── */
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .18s}
.qa[open]{border-color:var(--brand)}
.qa summary{display:flex;align-items:center;gap:.85rem;padding:1rem 1.15rem;cursor:pointer;
  font-weight:600;font-size:1.02rem;line-height:1.4;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--actTx)}
.qa summary .ico{flex:none;font-size:1.35rem;color:var(--brand)}
.qa summary .cv{margin-left:auto;flex:none;width:26px;height:26px;display:grid;place-items:center;
  font-size:.9rem;color:var(--ink2);transition:transform .22s cubic-bezier(.25,1,.5,1),color .18s}
.qa summary:hover .cv{color:inherit}
.qa[open] summary .cv{transform:rotate(180deg);color:var(--ink)}
.qa__b{padding:0 1.15rem 1.15rem 3.35rem;font-size:.95rem;line-height:1.65;color:var(--ink2);max-width:68ch}
.qa__b b{color:var(--ink);font-weight:600}
.qa__b p+p{margin-top:.6rem}
@media (max-width:560px){.qa__b{padding-left:1.15rem}}

/* bouton « suivant » de la pagination (blog, catalogue, compte) */
.pg .nx2{display:inline-flex;gap:.5rem;align-items:center;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pg .nx2:hover{background:var(--act);border-color:var(--act);color:#fff}
.pg .nx2 .ico{font-size:1rem}

/* ═══════════════════════════════════════════════════════════════════════
   COMPATIBILITE PRESTASHOP — le balisage du coeur qu'on ne reecrit PAS.

   Trois etapes du tunnel (« Vos coordonnees », « Adresses ») et le rendu des
   champs de formulaire viennent de PrestaShop lui-meme. On ne peut pas les
   remplacer sans surcharger leur bloc `step_content`, ce qui ferait disparaitre
   en silence la connexion en cours de tunnel, la commande en tant qu'invite,
   l'ajout/modification/suppression d'adresse, l'adresse de facturation
   distincte et le RGPD. On les HABILLE donc, au lieu de les reecrire.

   Sans ces regles, ces elements sortent au style natif du navigateur :
   ce theme ne charge pas Bootstrap (theme.yml : use_parent_assets: false).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── grille de formulaire ──
   _partials/form-fields.tpl emet nos .fd ; le coeur et classic les enveloppent
   dans .form-fields. Deux colonnes a partir de 620 px, comme .fr--2 de la
   maquette. Tout ce qui n'est PAS un champ (une liste de transporteurs, un
   bloc d'options) prend la largeur entiere : c'est ce qui protege le corps de
   l'etape « Mode de livraison », dont .form-fields enveloppe le .ch2. */
.form-fields{display:grid;gap:.9rem}
@media (min-width:620px){
  .form-fields{grid-template-columns:1fr 1fr}
  .form-fields>*:not(.fd),.form-fields>.fd--l{grid-column:1/-1}
}
.form-footer{margin-top:1.15rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ── page « Nous contacter » ──────────────────────────────────────────
   Le formulaire vient du module contactform, surcharge dans le theme pour
   que ses champs utilisent .fd. La page s'appuyait auparavant sur la grille
   Bootstrap (col-md-4, col-lg-3) que ce theme ne definit pas : elle sortait
   sans mise en forme. */
/* Les pages qui ne sont QU'un formulaire — connexion, creation de compte,
   contact — partagent la meme carte centree. classic emet .login-form et
   .register-form sans qu'aucune regle ne les vise : les champs, eux stylises
   par #login-form, flottaient dans une page nue sur toute la largeur. */
.ctf,.login-form,.register-form,.forgotten-password{max-width:46rem;margin:0 auto 2.5rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem}
.login-form header,.register-form header,.forgotten-password header{margin-bottom:1.2rem}
.login-form header h1,.register-form header h1,
.login-form header .h3,.register-form header .h3{font-family:"Play",sans-serif;font-weight:400;font-size:1.5rem;margin:0 0 .35rem}
.login-form header p,.register-form header p,.forgotten-password header p{color:var(--ink2);font-size:.94rem;line-height:1.6;margin:0}

/* classic intercale un <hr/> entre la carte du formulaire et ce lien. Sous une
   carte qui porte deja une bordure, ca fait deux traits paralleles a un rem
   d'ecart — et la marge negative que portait .no-account tirait le texte PAR
   DESSUS le filet. La carte separe deja : on retire le filet, et le lien
   reprend une marge normale. */
.login-form+hr,.register-form+hr,.forgotten-password+hr{display:none}

/* « Pas encore de compte ? » : classic le pose juste apres le formulaire,
   sans style. Sans regle il se confondait avec le pied de la carte. */
.no-account{max-width:46rem;margin:0 auto;text-align:center;font-size:.94rem}

/* « Vous avez deja un compte ? Connectez-vous ! » — classic pose ce <p>
   DIRECTEMENT dans la <section class="register-form">, pas dans un <header> :
   « .register-form header p » ne l'atteignait pas. Il ne recevait donc que la
   remise a zero, dont a{color:inherit;text-decoration:none} : le seul lien de
   sortie de la page etait typographiquement indiscernable du texte autour. */
.register-form>p{margin:0 0 1.2rem;color:var(--ink2);font-size:.94rem;line-height:1.6}
.register-form>p a{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.register-form>p a:hover{color:var(--ink)}
/* Les pages « mot de passe oublie » n'ont pas de carte dans le meme .wrap que
   le lien de retour : il lui faut sa propre respiration. */
.forgotten-password+*,.forgotten-password~.no-account{margin-top:0}
.no-account a{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.no-account a:hover{color:var(--ink)}

/* ══ etats des messages ══
   Les trois familles sortaient avec la meme apparence : un encadre gris.
   « Votre compte a bien ete cree » et « Cette adresse e-mail est deja
   utilisee » se ressemblaient trait pour trait. */
.nt--err{border-color:#E2AFAF;background:#FBEDED;color:#8E2020}
.nt--err b{color:#8E2020}
.nt--warn{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--card))}

/* ── le bandeau de confirmation ──
   Un succes annonce qu'une ACTION a abouti, pas un etat de la page : il ne
   doit pas dependre de l'endroit ou la page s'ouvre. Il flotte donc en haut
   a droite, se ferme d'un clic et s'efface seul au bout de huit secondes
   (assets/js/theme.js). */
.tst{position:fixed;top:1rem;right:1rem;z-index:80;max-width:min(26rem,calc(100vw - 2rem));
  display:flex;align-items:flex-start;gap:.6rem;padding:.9rem 1rem;border-radius:var(--r);
  background:var(--card);border:1px solid var(--green);box-shadow:var(--lift);
  animation:tst-entree .32s cubic-bezier(.25,1,.5,1) both}
@keyframes tst-entree{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tst{animation:none}}
.tst__m{display:flex;align-items:flex-start;gap:.55rem;margin:0;font-size:.94rem;line-height:1.5;color:var(--ink)}
.tst__m+.tst__m{margin-top:.4rem}
.tst__m .ico{flex:none;margin-top:.15rem;font-size:1.15rem;color:var(--green)}
.tst__x{flex:none;margin-left:auto;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:none;color:var(--ink2);display:grid;place-items:center;font-size:1rem}
.tst__x:hover{background:var(--soft);color:var(--ink)}
.tst[hidden]{display:none}

/* ══ listes d'envies (module blockwishlist) ══
   Le module rend ses pages avec une application Vue et ne livre AUCUN style
   pour elle : sa feuille ne contient que ses fenetres modales, et le theme
   classic n'habille pas davantage ces classes. Tout ce qui suit est donc a
   nous. Le balisage vient de _dev/front/js/components — on ne l'invente pas.

   Les boutons d'action du module sont des <i class="material-icons"> dont la
   ligature est masquee par la feuille : ils sortaient VIDES. On redessine
   leur icone en masque CSS, seule facon d'en poser une sans toucher au
   balisage d'un module. */
.wishlist-container-header{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem;margin-bottom:1rem}
/* Le titre fait doublon avec celui de l'espace client, juste au-dessus. */
.wishlist-container-header h1{display:none}
.wishlist-add-to-new{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-weight:600;font-size:.9rem;color:var(--actTx)}
.wishlist-add-to-new:hover{color:var(--ink)}
.wishlist-add-to-new::before{content:"";width:1.15em;height:1.15em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-add-to-new .material-icons{display:none}

.wishlist-container .page-content,.wishlist-container .card,.wishlist-container .card-block{
  background:none;border:0;padding:0;box-shadow:none}
.wishlist-list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.wishlist-list-item{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  transition:border-color .16s}
.wishlist-list-item:hover{border-color:var(--brand)}
.wishlist-list-item-link{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;cursor:pointer}
.wishlist-list-item-title{margin:0;font-weight:600;font-size:.98rem;color:var(--ink);min-width:0;
  overflow-wrap:anywhere}
.wishlist-list-item-title span{color:var(--ink2);font-weight:400;font-variant-numeric:tabular-nums}
.wishlist-list-item-default .wishlist-list-item-title::after{content:" · par defaut";
  color:var(--ink2);font-weight:400;font-size:.84rem}
.wishlist-list-item-right{position:relative;margin-left:auto;display:flex;align-items:center;gap:.25rem}
.wishlist-list-item-right button{width:34px;height:34px;border:1px solid transparent;border-radius:50%;
  background:none;cursor:pointer;color:var(--ink2);display:grid;place-items:center;padding:0}
.wishlist-list-item-right button:hover{background:var(--soft);border-color:var(--line);color:var(--ink)}
.wishlist-list-item-right button .material-icons{display:none}
.wishlist-list-item-right button::before{content:"";width:1.2em;height:1.2em;background:currentColor}
/* Liste par defaut : un seul bouton, le partage. Liste creee par le client :
   le menu (trois points) puis la corbeille. */
.wishlist-list-item-default .wishlist-list-item-right>button::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.3 10.8 15.7 6.6M8.3 13.2l7.4 4.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.6'/%3E%3Ccircle cx='6' cy='12' r='2.6'/%3E%3Ccircle cx='18' cy='19' r='2.6'/%3E%3Cpath d='M8.3 10.8 15.7 6.6M8.3 13.2l7.4 4.2'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-list-item-actions::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='19' r='1.9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='19' r='1.9'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-list-item:not(.wishlist-list-item-default) .wishlist-list-item-right>button:last-child::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.2h14.4M9.4 7.2V5.4h5.2v1.8M6.6 7.2 7.6 19.8h8.8l1-12.6M10.4 10.6v6M13.6 10.6v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.2h14.4M9.4 7.2V5.4h5.2v1.8M6.6 7.2 7.6 19.8h8.8l1-12.6M10.4 10.6v6M13.6 10.6v6'/%3E%3C/svg%3E") center/contain no-repeat}

.wishlist-list-item-right .dropdown-menu{position:absolute;top:calc(100% + .3rem);right:0;z-index:5;
  min-width:11rem;display:none;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rs);box-shadow:var(--lift);padding:.3rem;gap:.1rem}
.wishlist-list-item-right .dropdown-menu.show{display:flex}
.wishlist-list-item-right .dropdown-menu button{width:auto;height:auto;border-radius:var(--rs);
  padding:.5rem .65rem;text-align:left;font-size:.9rem;color:var(--ink);place-items:stretch}
.wishlist-list-item-right .dropdown-menu button::before{content:none}
.wishlist-list-item-right .dropdown-menu button:hover{background:var(--soft);border-color:transparent}

.wishlist-list-empty{padding:2rem 1rem;text-align:center;color:var(--ink2);font-size:.95rem;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--soft)}
.wishlist-list-loader{display:block;width:100%;color:var(--line)}

/* ── l'en-tete de la page d'une liste, et son tri ──
   Le titre du composant fait doublon avec celui de l'espace client, juste
   au-dessus : on ne garde que le notre.

   LE TRI : le module ecrit son menu en Bootstrap — un bouton
   `data-toggle="dropdown"` et un `.dropdown-menu`. Le JavaScript de Bootstrap
   n'est pas charge par ce theme, et sans regle `display:none`, TOUTES les
   options sortaient a la suite sur la meme ligne — « Pertinence Nom, A a Z
   Nom, Z a A Prix, croissant… » — en debordant de l'ecran.
   On l'ouvre en CSS, au focus : le meme procede que le mega-menu et le
   mini-panier du site, qui fonctionnent sans script. */
.wishlist-products-container-header{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.7rem 1rem;margin-bottom:1.1rem}
.wishlist-products-container-header h1{display:none}
.wishlist-products-container .sort-by-row{display:flex;align-items:center;gap:.55rem;
  margin-left:auto;min-width:0}
.wishlist-products-container .sort-by{font-size:.86rem;color:var(--ink2);white-space:nowrap}
.wishlist-products-container .products-sort-order{position:relative}
.wishlist-products-container .select-title{display:inline-flex;align-items:center;gap:.45rem;
  cursor:pointer;background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:.45rem .95rem;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink)}
.wishlist-products-container .select-title:hover{border-color:var(--ink2)}
.wishlist-products-container .select-title .material-icons{display:none}
.wishlist-products-container .select-title::after{content:"";width:.9em;height:.9em;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-products-container .dropdown-menu{position:absolute;top:calc(100% + .35rem);right:0;
  z-index:20;min-width:13rem;display:none;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rs);box-shadow:var(--lift);padding:.3rem}
.wishlist-products-container .products-sort-order:focus-within .dropdown-menu,
.wishlist-products-container .dropdown-menu.show{display:flex}
.wishlist-products-container .select-list{padding:.5rem .7rem;border-radius:var(--rs);
  cursor:pointer;font-size:.9rem;color:var(--ink);white-space:nowrap}
.wishlist-products-container .select-list:hover{background:var(--soft)}

/* La pagination du module, elle aussi en grille Bootstrap. */
.wishlist-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1rem;margin-top:1.4rem;font-size:.88rem;color:var(--ink2)}
.wishlist-pagination .page-list{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;
  list-style:none}
.wishlist-pagination .page-list a{display:grid;place-items:center;min-width:34px;height:34px;
  padding:0 .5rem;border-radius:var(--rs);border:1px solid var(--line);cursor:pointer;
  font-weight:600;color:var(--ink)}
.wishlist-pagination .page-list a:hover{border-color:var(--ink2)}
.wishlist-pagination .page-list .current a,.wishlist-pagination .page-list a.disabled{
  background:var(--ink);border-color:var(--ink);color:var(--paper);cursor:default}
.wishlist-pagination .material-icons{display:none}

/* ── les pieces d'une liste ──
   CE QU'IL NE FAUT PAS REFAIRE ICI : la mise en page.
   Le module EMPAQUETTE ses styles DANS son JavaScript (productslist.bundle.js
   les injecte au chargement) — ils n'apparaissent dans aucun fichier .css, ce
   qui m'a fait croire pendant deux jours que la page n'etait pas habillee.
   Elle l'est : cartes de 250 px en grille souple au bureau, lignes sous
   768 px, et tout le detail.

   J'avais donc ecrit une mise en page concurrente. Resultat a l'ecran : mon
   `.wishlist-product-link{grid-template-columns:82px 1fr}` imposait une
   colonne de 82 px pendant que le module gardait son image a 250 px —
   l'image debordait et RECOUVRAIT le titre et le prix. Les fiches
   n'affichaient plus que la photo et le bouton.

   On ne garde donc que ce qui nous revient vraiment :
    · les icones, que NOTRE feuille masque (.material-icons{display:none}) ;
    · les couleurs, codees en dur par le module (#232323, #737373, le bleu
      PrestaShop #2fb5d2) et etrangeres a la palette du site. */

/* La carte et la vignette prennent l'aspect du reste du site. Aucune
   dimension : c'est le module qui les decide, a chaque largeur d'ecran. */
/* LA VIGNETTE DEBORDAIT DE SA CARTE. Le module melange deux unites de
   mesure qui ne peuvent pas s'accorder :

     .wishlist-product      { max-width:15.625rem; width:100% }   <- elastique
     .wishlist-product-image{ width:15.625rem; height:15.625rem }  <- EN DUR

   La carte fait « 100 % de son emplacement », la vignette « 250 px, point ».
   Tant que la rangee est large, les deux coincident. Des qu'elle se resserre
   — deux cartes au lieu de trois, une fenetre plus etroite, ou simplement la
   marge interieure que nous ajoutons — l'emplacement retrecit, la carte avec
   lui, et la vignette reste a 250 px : elle sort par la droite.

   On rend donc la vignette elastique elle aussi. `aspect-ratio` garde le
   carre sans avoir a fixer la hauteur.

   La regle est portee par `.wishlist-products-list .wishlist-product-image`
   et non par la classe seule : les styles du module sont INJECTES PAR SON
   JAVASCRIPT, donc charges apres notre feuille — a specificite egale, c'est
   lui qui l'emporte. Il faut un selecteur plus precis que le sien.

   Et seulement au-dessus de 768 px : en dessous, le module passe en lignes
   avec une vignette de 100 px, qui lui convient tres bien. */
@media (min-width:769px){
  .wishlist-products-list .wishlist-product-image{width:100%;height:auto;aspect-ratio:1}
}
.wishlist-product{border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);padding:.9rem}
/* La vignette respire, comme partout ailleurs sur le site (.pv__ph, .pc__i). */
.wishlist-products-list .wishlist-product-image{background:var(--plate);
  border:1px solid var(--plateLine);border-radius:var(--rs);padding:6px}
.wishlist-product-image img{mix-blend-mode:multiply}
.wishlist-product-title{color:var(--ink);font-weight:600}
.wishlist-product-link:hover .wishlist-product-title{color:var(--actTx)}
.wishlist-product-price{color:var(--ink);font-variant-numeric:tabular-nums}
.wishlist-product-price-promo{color:var(--ink2)}
.wishlist-product-combinations-text{color:var(--ink2)}
.wishlist-product-combinations a{color:var(--ink2)}
.wishlist-product-combinations a:hover{color:var(--actTx)}
.wishlist-product-availability{color:var(--actTx)}

/* Les trois icones du module sont des ligatures Material, que la feuille du
   theme masque : les boutons sortaient VIDES. On les redessine en masque CSS,
   seule facon d'en poser une sans toucher au balisage d'un module. */
.wishlist-product-combinations a .material-icons,
.wishlist-product-addtocart .material-icons,
.wishlist-button-add .material-icons{display:none}
.wishlist-product-combinations a::before,
.wishlist-product-addtocart::before,
.wishlist-button-add::before{content:"";width:1.15em;height:1.15em;background:currentColor;
  display:inline-block;flex:none}
.wishlist-product-combinations a::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h4l10-10a2.1 2.1 0 0 0-3-3l-10 10z'/%3E%3Cpath d='m14.2 6.2 3.6 3.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 19.4h4l10-10a2.1 2.1 0 0 0-3-3l-10 10z'/%3E%3Cpath d='m14.2 6.2 3.6 3.6'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-product-addtocart::before{margin-right:.5rem;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 4.6h2.3l2.4 9.9h9.4l2.1-7.2H7.3'/%3E%3Ccircle cx='10.2' cy='19' r='1.7'/%3E%3Ccircle cx='17.2' cy='19' r='1.7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 4.6h2.3l2.4 9.9h9.4l2.1-7.2H7.3'/%3E%3Ccircle cx='10.2' cy='19' r='1.7'/%3E%3Ccircle cx='17.2' cy='19' r='1.7'/%3E%3C/svg%3E") center/contain no-repeat}
.wishlist-button-add::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.2h14.4M9.4 7.2V5.4h5.2v1.8M6.6 7.2 7.6 19.8h8.8l1-12.6M10.4 10.6v6M13.6 10.6v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 7.2h14.4M9.4 7.2V5.4h5.2v1.8M6.6 7.2 7.6 19.8h8.8l1-12.6M10.4 10.6v6M13.6 10.6v6'/%3E%3C/svg%3E") center/contain no-repeat}
/* La corbeille : ronde, comme les autres boutons d'action du site. Ni sa
   position ni sa taille ne sont touchees — le module les gere. */
.wishlist-button-add{border:1.5px solid var(--line);border-radius:50%;background:var(--card);
  color:var(--ink2);cursor:pointer}
.wishlist-button-add:hover{background:var(--act);border-color:var(--act);color:#fff;opacity:1}

/* ── les fenetres du module ──
   Leur interieur est habille par le module (public/wishlist.css : en-tete,
   corps, pied, champ, fond). Ce qui manque, c'est la BASE Bootstrap que ce
   theme ne definit pas : sans .modal ni .modal-dialog, la fenetre s'ouvrait
   au fil du document, tout en bas de la page — d'ou « le bouton ne fait
   rien ». */
.wishlist-modal.modal{position:fixed;inset:0;z-index:1050;overflow-y:auto;padding:1rem}
.wishlist-modal .modal-dialog{position:relative;width:auto;max-width:34.375rem;
  margin:1.75rem auto;pointer-events:none}
.wishlist-modal .modal-dialog-centered{display:flex;align-items:center;
  min-height:calc(100% - 3.5rem)}
.wishlist-modal .modal-dialog>*{width:100%}

/* ── LE PIEGE QUI RENDAIT LA PAGE MORTE AU SURVOL ──────────────────────
   Sur la page d'une liste, et LA SEULEMENT, productslist.bundle.js injecte :

     .wishlist-delete .wishlist-modal{display:BLOCK;opacity:0;pointer-events:none}

   La fenetre de suppression n'est donc plus retiree du flux (display:none,
   comme sur les autres pages) : elle est AFFICHEE et rendue transparente.
   Le module s'en sort avec pointer-events:none.

   Or j'avais ecrit « .modal-dialog>*{pointer-events:auto} », pour que le
   contenu reste cliquable a l'interieur d'une fenetre ouverte. Cette regle
   ne distinguait pas l'ouvert du ferme : elle REDONNAIT la capture des clics
   au panneau invisible. Combine a mon « .modal{position:fixed;inset:0} »,
   cela posait une vitre transparente de 550 px au milieu de l'ecran —
   pile sur les cartes. Rien ne reagissait plus au survol, et aucune erreur
   n'apparaissait en console : il n'y avait pas de bug, juste une vitre.

   Le contenu ne redevient cliquable que sur une fenetre REELLEMENT ouverte,
   et un filet met hors d'atteinte tout ce qui ne l'est pas. */
.wishlist-modal.show .modal-dialog>*{pointer-events:auto}
.wishlist-modal.modal:not(.show){pointer-events:none}
/* Le module ne donne a .modal-content que « width:100% » : ni fond, ni
   rayon, ni marge interieure — Bootstrap est cense les fournir. Sans eux, le
   contenu de la fenetre flottait a meme la page assombrie, sans carte
   blanche : c'est ce qu'on voyait a l'ecran. */
.wishlist-modal .modal-content{background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--lift);
  padding:1.2rem 1.4rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.wishlist-modal .modal-header{padding:0 0 .3rem}
/* Le titre sortait enorme : le module impose `font-weight:bold` et
   `font-size:1.375rem` depuis wishlist.css, chargee APRES notre feuille. Or
   « Play » est la police d'affichage du site (titan.woff2) et n'existe qu'en
   graisse 400 — le navigateur en fabriquait donc une fausse graisse grasse,
   epaisse et baveuse, a 22 px. Selecteur plus precis que le sien
   (h5.modal-title) pour reprendre la main. */
.wishlist-modal .modal-header h5.modal-title{color:var(--ink);font-family:"Play",sans-serif;
  font-weight:400;font-size:1.15rem;line-height:1.3;margin:0;letter-spacing:0}
.wishlist-modal .modal-content .modal-text{color:var(--ink2);font-size:.93rem;line-height:1.6;
  margin:0}
.wishlist-modal .modal-body{padding:.6rem 0}
.wishlist-modal .modal-footer{padding:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:flex-end}
.wishlist-modal .modal-footer .btn{margin:0}
.wishlist-modal .close{background:none;border:0;line-height:1;cursor:pointer;padding:0 .2rem;
  color:var(--ink2)}
.wishlist-modal .close:hover{color:var(--ink);opacity:1}
.wishlist-modal .modal-body label{display:block;margin-bottom:.35rem;font-size:.86rem;
  font-weight:600;color:var(--ink2)}
.wishlist-modal .modal-body .form-control{width:100%;background:var(--card);color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;padding:.62rem .85rem;font-size:.95rem;
  font-family:inherit}
.wishlist-modal .modal-body .form-control:focus{border-color:var(--brand);outline:none}
.wishlist-create,.wishlist-rename,.wishlist-delete,.wishlist-add-to-list,.wishlist-login{
  position:relative;z-index:1050}
/* Le fond sombre : le module ne lui donne que pointer-events, rien d'autre.
   Sans position ni couleur, c'etait un <div> vide au fil du document. */
.wishlist-modal+.modal-backdrop{position:fixed;inset:0;z-index:1040;background:#0C0B09;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.wishlist-modal+.modal-backdrop.in{opacity:.72;visibility:visible}
@media (prefers-reduced-motion:reduce){.wishlist-modal+.modal-backdrop{transition:none}}

/* ── le bandeau du module (« liste creee », « piece ajoutee ») ──
   LE MODULE LE PLACE ET L'ANIME LUI-MEME : position:fixed, en haut a droite,
   `transform:translateY(-10px)` au repos et `.isActive{transform:translateY(0)}`
   a l'apparition. Ma version le recentrait en bas avec un
   `transform:translateX(-50%)` — que `.isActive` ecrasait aussitot. Le
   bandeau partait donc de travers, a moitie hors de l'ecran.
   On ne touche plus qu'a l'habillage : ni position, ni transform. */
.wishlist-toast{border-radius:var(--rs);border-color:var(--line);box-shadow:var(--lift)}
.wishlist-toast.success{background-color:var(--green);border-color:var(--green)}
.wishlist-toast.error{background-color:var(--actTx);border-color:var(--actTx)}
.wishlist-toast-text{color:var(--ink);font-size:.9rem;margin:0}

/* Dans la colonne de contenu d'une page d'information, la carte du formulaire
   ferait une boite dans une boite : la colonne EST deja le cadre. On neutralise
   l'habillage, on garde la mise en forme des champs. */
.cms__c .ctf{max-width:none;margin:0;background:none;border:0;border-radius:0;padding:0}
/* Meme raison dans une carte de l'espace client (page « Mes donnees
   personnelles ») : la carte EST deja le cadre. */
.bx__b .ctf{max-width:none;margin:0;background:none;border:0;border-radius:0;padding:0}
.bx__b .ctf__h{margin-bottom:.9rem}
.bx__a{display:flex;flex-wrap:wrap;gap:.6rem;margin:.9rem 0 0}
.ctf__h{margin-bottom:1.3rem}
.ctf__h h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.5rem;margin:0 0 .4rem}
.ctf__h p{color:var(--ink2);font-size:.94rem;line-height:1.6;margin:0;max-width:60ch}
/* Pot de miel : invisible a l'oeil ET au lecteur d'ecran, mais rempli par
   les robots. display:none suffirait a le masquer, mais certains robots
   l'ignorent justement pour cette raison. */
.ctf__hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Retours du formulaire — le module les emet, aucune regle n'existait. */
.notification{margin:0 0 1.2rem;padding:.85rem 1rem;border-radius:var(--r);border:1px solid var(--line);background:var(--soft);font-size:.94rem}
.notification ul{margin:0;padding-left:1.1rem}
/* .cms__c ul a la meme specificite et arrive plus loin dans la feuille : dans
   la colonne d'une page de contenu (le formulaire de contact), elle reprenait
   la main et rajoutait 1,15rem de vide sous le dernier message. */
.cms__c .notification ul{margin:0;padding-left:1.1rem;display:block}
.notification li+li{margin-top:.3rem}
.notification-success{border-color:var(--ok,#46a74e);background:color-mix(in srgb,var(--ok,#46a74e) 10%,var(--card))}
.notification-error{border-color:var(--actTx);background:color-mix(in srgb,var(--actTx) 10%,var(--card))}
.form-informations{grid-column:1/-1;margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink2);line-height:1.55}
.form-informations-title{font-weight:700;color:var(--ink)}
.form-informations-option{font-style:italic}
.form-informations-subtitle{font-size:.87rem}

/* ── boutons du coeur : la meme pilule que .nx ──
   personal-information.tpl et addresses.tpl de classic ecrivent
   « btn btn-primary float-xs-right ». Ces trois classes n'avaient aucune regle :
   deux des quatre boutons « Continuer » du tunnel sortaient en bouton gris du
   navigateur, a cote des etapes 3 et 4 qui, elles, ont .nx. */
.btn-primary{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);
  border:0;border-radius:999px;padding:.75rem 1.5rem;font-weight:700;font-size:.95rem;cursor:pointer;
  font-family:inherit;line-height:1.2}
.btn-primary:hover{background:var(--act);color:#fff}
.btn-primary:disabled,.btn-primary.disabled{background:var(--line);color:var(--ink2);cursor:not-allowed}
.btn-primary:disabled:hover,.btn-primary.disabled:hover{background:var(--line);color:var(--ink2)}
.btn:not(.btn-primary){display:inline-flex;align-items:center;gap:.45rem;background:var(--card);color:var(--ink);
  border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:600;font-size:.88rem;
  cursor:pointer;font-family:inherit;line-height:1.2}
.btn:not(.btn-primary):hover{border-color:var(--ink)}
.float-xs-right{float:right}
.float-xs-left{float:left}
.clearfix{margin-top:1.15rem}
.clearfix::after{content:"";display:table;clear:both}
/* classic ecrit « form-footer clearfix » sur le meme element. Dans un
   conteneur flex, ::after devient un ENFANT flex : son clear:both ne vaut
   plus rien, mais il occupe une place dans la ligne et consomme le gap. */
.form-footer.clearfix::after{content:none}

/* ── onglets « Commander en tant qu'invite | Connexion » (etape 1) ──
   BLOCAGE CORRIGE : .tab-pane n'avait aucune regle et rien ne gerait
   data-toggle="tab". Les DEUX panneaux s'affichaient en meme temps — deux
   champs e-mail et deux champs mot de passe a l'ecran, avec des <label for>
   ambigus. Le panneau est desormais masque par defaut ; :has(:target) sert de
   secours entierement CSS quand le script ne demarre pas (les onglets sont des
   ancres : #checkout-login-form). */
.nav-inline{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem;list-style:none;margin:0 0 1.2rem;
  padding:0;border-bottom:1px solid var(--line)}
.nav-item{display:inline-flex}
.nav-link{display:inline-block;padding:.62rem 1rem;font-weight:700;font-size:.95rem;color:var(--ink2);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink);border-bottom-color:var(--act)}
.nav-separator{display:none}
.tab-content>.tab-pane{display:none}
.tab-content>.tab-pane.active{display:block}
.tab-content:has(>.tab-pane:target)>.tab-pane{display:none}
.tab-content>.tab-pane:target{display:block}

/* ── alertes et messages d'erreur du coeur ── */
.alert{border-radius:10px;padding:.75rem .9rem;font-size:.9rem;line-height:1.5;
  border:1px solid var(--line);background:var(--soft);color:var(--ink)}
.alert-danger{border-color:#E2AFAF;background:#FBEDED;color:#8E2020}
.help-block{grid-column:1/-1}
.help-block ul{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
.has-error input,.has-error select,.has-error textarea{border-color:#C25252}

/* ── glyphes Material Icons ──
   Le coeur et quelques modules ecrivent <i class="material-icons">&#xE145;</i>.
   AUCUNE police Material n'est chargee par ce theme : le navigateur affichait
   le caractere brut (carre « tofu ») ou le nom litteral (« check_circle »),
   en clair, dans la page. Ces glyphes sont decoratifs : on les retire. */
.material-icons{display:none}

/* ── divers du coeur ── */
.identity{font-size:.98rem;line-height:1.6}
.identity a,.text-info{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.h4{font-family:"Play",sans-serif;font-weight:400;font-size:1.15rem;margin:1.2rem 0 .7rem}
.text-muted{color:var(--ink2)}
.ps-hidden{display:none}

/* ── pieces du champ emises par _partials/form-fields.tpl ──
   .js-input-column est l'accroche de classic conservee autour de la saisie ;
   .fd__r porte la rangee de boutons radio (civilite), .fd__d les trois listes
   de la date de naissance. Sans elles, « .fd select{width:100%} » empilait
   jour / mois / annee sur trois lignes. */
.fd .js-input-column{display:block}
.fd .ck{font-weight:400;font-size:.92rem;color:var(--ink)}
.fd__r{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;align-items:center;padding-top:.15rem}
.radio-inline{display:inline-flex;align-items:center;gap:.5rem;font-size:.94rem;font-weight:400;
  color:var(--ink);cursor:pointer}
.custom-radio{display:inline-flex}
.radio-inline input[type="radio"]{appearance:none;width:18px;height:18px;flex:none;margin:0;padding:0;
  border:2px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer;position:relative;
  transition:.14s}
.radio-inline input[type="radio"]:checked{border-color:var(--ink)}
.radio-inline input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--ink)}
.radio-inline input[type="radio"]:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.fd__d{display:flex;flex-wrap:wrap;gap:.5rem}
.fd__d select{width:auto;flex:1 1 30%;min-width:0}

/* ── espacement des champs, quel que soit leur conteneur ──
   Le coeur enveloppe les champs de trois facons differentes : <div
   class="form-fields"> (adresse), un <div> NU dans #customer-form et
   #login-form, ou rien du tout. Le .fd de la maquette ne porte aucune marge :
   dans les deux derniers cas, les champs se touchaient. */
.fd+.fd,.fd+.field-password-policy,.field-password-policy+.fd{margin-top:.9rem}
.form-fields>.fd,.fr>.fd{margin-top:0}

/* Les formulaires « creation de compte » et « connexion » de l'etape 1 posent
   leurs champs dans un <div> sans classe : on ne peut les viser que par l'id du
   formulaire, qui est celui du coeur (#customer-form, #login-form) et sert deja
   d'accroche a ses propres scripts. Meme grille que .form-fields. */
#customer-form>div,#login-form>div{display:grid;gap:.9rem;align-content:start}
#customer-form>div>.fd,#login-form>div>.fd{margin-top:0}
@media (min-width:620px){
  /* Deux colonnes pour la creation de compte, qui aligne prenom/nom,
     e-mail/mot de passe. PAS pour la connexion : elle n'a que deux champs,
     l'e-mail sur toute la largeur et le mot de passe — qui se retrouvait
     a mi-largeur, une case vide a cote. Une colonne, les deux champs alignes. */
  #customer-form>div{grid-template-columns:1fr 1fr}
  #customer-form>div>*:not(.fd),#customer-form>div>.fd--l{grid-column:1/-1}
  #customer-form>div>.field-password-policy{grid-column:auto}
}
.field-password-policy{display:grid;gap:.9rem}
/* Ce conteneur enveloppe le champ « Mot de passe » sur la page d'inscription.
   Ce n'est pas un .fd : la remise a zero « #customer-form>div>.fd{margin-top:0} »
   ne l'atteignait pas, il gardait donc le margin-top:.9rem de la regle
   d'espacement EN PLUS du gap de la grille — une rangee deux fois plus aeree
   que les autres. Et la garde « >*:not(.fd){grid-column:1/-1} » le prenait
   pour un bloc etranger et lui donnait les deux colonnes : le mot de passe
   faisait toute la largeur pendant que Prenom et Nom, juste au-dessus,
   tenaient chacun la moitie. */
#customer-form>div>.field-password-policy,#login-form>div>.field-password-policy{margin-top:0}
.forgot-password{font-size:.9rem}
.forgot-password a{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.font-weight-bold{font-weight:700}
.font-italic{font-style:italic}
.text-sm-center{text-align:left}
.form-control-submit{margin-left:auto}

/* ── rangees en grille Bootstrap que le coeur emet encore ──
   classic/checkout/_partials/address-form.tpl ajoute la case « Utiliser cette
   adresse pour la facturation » dans un <div class="form-group row"><div
   class="col-md-9 col-md-offset-3">. Ce bloc est ajoute par {block append} :
   le surcharger imposerait de reecrire toute la boucle des champs, et donc de
   risquer la moitie du formulaire d'adresse. On l'habille. */
.form-group.row{grid-column:1/-1;display:block;margin-top:.2rem}
.col-md-9,.col-md-offset-3{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.92rem;
  line-height:1.5}
.col-md-9 label,.col-md-offset-3 label{margin:0;cursor:pointer;font-weight:400;color:var(--ink)}
.col-md-9 input[type="checkbox"],.col-md-offset-3 input[type="checkbox"]{appearance:none;width:20px;height:20px;
  flex:none;margin:0;padding:0;border:1.5px solid var(--line);border-radius:6px;background:var(--card);
  cursor:pointer;position:relative;transition:.14s}
.col-md-9 input[type="checkbox"]:checked,.col-md-offset-3 input[type="checkbox"]:checked{
  background:var(--ink);border-color:var(--ink)}
.col-md-9 input[type="checkbox"]:checked::after,.col-md-offset-3 input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;border:2px solid var(--paper);
  border-top:0;border-left:0;transform:rotate(42deg)}
.col-md-9 input[type="checkbox"]:focus-visible,.col-md-offset-3 input[type="checkbox"]:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px}

/* ══ fiche produit ══ */
/* ── bloc principal ── */
.pv{padding:2rem 0 2.6rem;color:var(--ink)}
.pv__g{display:grid;gap:1.6rem}
@media (min-width:940px){.pv__g{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.6rem}}

.pv__ph{position:relative;background:var(--plate);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;padding:4%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.pv__ph img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.pv__fl{position:absolute;top:.9rem;left:.9rem;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:.45rem}
.pv__f{display:inline-flex;align-items:center;gap:.38rem;font-size:.82rem;font-weight:700;
  padding:.3rem .78rem .3rem .62rem;border-radius:999px;background:var(--onPlate);color:#fff}
.pv__f .ico{font-size:1.05rem}
.pv__f--off{background:#1B6B45;color:#fff}
.pv__one{margin-top:.7rem;display:flex;align-items:flex-start;gap:.5rem;font-size:.84rem;color:var(--ink2);
  line-height:1.5}
.pv__one .ico{font-size:1.05rem;flex:none;margin-top:1px;color:var(--ink2)}

.pv__i{display:flex;flex-direction:column}
.pv__lic{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--actTx)}
.pv__h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.6rem,1.2rem+1.7vw,2.5rem);
  line-height:1.08;margin:.45rem 0 .5rem}
.pv__meta{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.86rem;color:var(--ink2)}
.pv__meta b{color:var(--ink);font-weight:600}

.pv__price{display:flex;align-items:baseline;gap:.75rem;margin:1.1rem 0 .1rem;flex-wrap:wrap}
.pv__price .v{font-family:"Play",sans-serif;font-size:clamp(3.2rem,2.2rem+3.6vw,4.8rem);line-height:.9;
  font-variant-numeric:tabular-nums}
.pv__price .t{font-size:.88rem;color:var(--ink2)}
.pv__x4{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .85rem;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);font-size:.92rem;align-self:flex-start;margin-top:.55rem}
.pv__x4 .ico{font-size:1.2rem;color:var(--ink2);flex:none}
.pv__x4 b{font-weight:700;font-variant-numeric:tabular-nums}
.pv__x4 span{color:var(--ink2)}

/* panneau de précommande */
.po{margin-top:1.3rem;border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden}
.po__h{display:flex;align-items:center;gap:.85rem;background:var(--ink);color:var(--paper);padding:.85rem 1rem}
.po__h .ico{font-size:1.9rem;color:var(--brand);flex:none}
.po__h .tx{display:flex;flex-direction:column;line-height:1.15}
.po__h .k{font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.po__h .d{font-family:"Play",sans-serif;font-size:clamp(1.35rem,1.05rem+1.15vw,1.9rem);color:var(--brand);line-height:1.06}
.po__b{padding:.95rem 1rem 1.1rem;background:var(--card)}
.po__l{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.po__l li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;font-size:.89rem;line-height:1.5}
.po__l .ico{font-size:1.1rem;color:var(--green);flex:none;margin-top:1px}
.po__l li.warn .ico{color:var(--actTx)}
.po__l b{font-weight:600}

.pv__buy{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;align-items:stretch}
.qty{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.qty button{width:44px;background:transparent;border:0;cursor:pointer;font-size:1.1rem;color:var(--ink);
  display:grid;place-items:center;transition:.14s}
.qty button:hover{background:var(--soft)}
.qty input{width:48px;border:0;background:transparent;text-align:center;font-weight:700;font-size:1rem;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy{flex:1;min-width:220px;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--act);color:#fff;border:0;border-radius:999px;padding:.85rem 1.5rem;
  font-weight:700;font-size:1rem;cursor:pointer;transition:background .16s,transform .16s cubic-bezier(.25,1,.5,1)}
.buy .ico{font-size:1.2rem}
.buy:hover:not(:disabled){background:#B81F1F;transform:translateY(-2px)}
/* Bouton desactive (rupture ferme, vente hors stock refusee) : il doit se
   LIRE comme inactif. Sans cette regle il restait rouge et se soulevait au
   survol tout en ne faisant rien — le pire des deux mondes. */
.buy:disabled{background:var(--line);color:var(--ink2);cursor:not-allowed;transform:none}
.wish{flex:none;width:52px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);
  color:var(--ink2);cursor:pointer;display:grid;place-items:center;font-size:1.2rem;transition:.16s}
.wish:hover{background:var(--act);border-color:var(--act);color:#fff}

/* ── agrandissement de la photo ──
   Le bouton couvre toute la photo : c'est la photo qu'on clique. La loupe en
   bas a droite ne sert qu'a l'annoncer — sans elle, rien ne dit que l'image
   est cliquable. z-index:1, donc sous les pastilles (.pv__fl, z-index:2). */
/* La pile : une photo visible, les autres masquees par [hidden]. */
.pv__st{display:block}

/* ── les vignettes ──
   Elles ne sortent que sur les fiches a plusieurs photos. Carrees, sur la
   meme assiette claire que la grande photo pour que le fond des visuels
   detoures se confonde. L'active porte aria-current : l'etat est dans le
   balisage, pas dans une classe — un lecteur d'ecran l'annonce. */
.pv__th{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem;padding:0;list-style:none}
.pv__t{width:72px;height:72px;padding:5px;border:1.5px solid var(--line);border-radius:var(--rs);
  background:var(--plate);cursor:pointer;display:block;transition:border-color .16s}
.pv__t img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.pv__t:hover{border-color:var(--ink2)}
.pv__t[aria-current="true"]{border-color:var(--act)}
.pv__t:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.pv__zm{position:absolute;inset:0;z-index:1;width:100%;border:0;background:none;padding:0;
  cursor:zoom-in;display:block}
.pv__zm__b{position:absolute;right:.9rem;bottom:.9rem;width:36px;height:36px;border-radius:50%;
  background:var(--plate);border:1px solid var(--plateLine);color:var(--onPlate2);
  display:grid;place-items:center;font-size:1.05rem;transition:background .16s,color .16s,border-color .16s}
.pv__zm:hover .pv__zm__b{background:var(--act);border-color:var(--act);color:#fff}
.pv__zm:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;border-radius:var(--r)}

.zm{border:0;padding:0;background:none;max-width:min(94vw,860px);max-height:94vh;overflow:visible}
.zm::backdrop{background:rgba(12,11,9,.82)}
.zm__v{background:var(--plate);border-radius:var(--r);padding:2.5%;display:grid;place-items:center}
.zm__v img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;
  mix-blend-mode:multiply;border-radius:calc(var(--r) - 6px)}
.zm__x,.zm__b{position:absolute;z-index:2;width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:var(--plate);border:1px solid var(--plateLine);color:var(--onPlate);
  display:grid;place-items:center;font-size:1.15rem;transition:background .16s,color .16s,border-color .16s}
.zm__x:hover,.zm__b:hover{background:var(--act);border-color:var(--act);color:#fff}
.zm__x{top:-14px;right:-14px}
.zm__b--p{left:-14px;top:50%;transform:translateY(-50%)}
.zm__b--n{right:-14px;top:50%;transform:translateY(-50%)}
.zm__c{margin-top:.6rem;text-align:center;font-size:.85rem;color:var(--onDeep);
  font-variant-numeric:tabular-nums}
/* Sur un ecran etroit les boutons deborderaient de la fenetre : on les
   ramene a l'interieur de l'image. */
@media (max-width:640px){
  .zm{max-width:94vw}
  .zm__x{top:.6rem;right:.6rem}
  .zm__b--p{left:.6rem}
  .zm__b--n{right:.6rem}
}

/* ── les garanties, a cote du bouton d'achat ──
   Deux etapes. D'abord six phrases entieres dans une grille de 280 px :
   chacune revenait a la ligne deux ou trois fois, douze lignes de gris.
   Ensuite un panneau a filets horizontaux — lisible, mais il avait l'allure
   d'un accordeon : des lignes separees dans un cadre, ca se clique.
   Troisieme etat, le bon : de petites cartes autonomes. Rien n'est separe
   par un filet, donc rien ne suggere qu'on puisse l'ouvrir. */
.pv__rs{margin-top:1.3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:.6rem;padding:0}
.pv__rs li{display:grid;gap:.1rem;justify-items:start;align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rs);padding:.75rem .8rem}
.pv__rs .ico{font-size:1.3rem;color:var(--brand);margin-bottom:.3rem}
.pv__rs b{color:var(--ink);font-weight:600;font-size:.85rem;line-height:1.3}
.pv__rs span{color:var(--ink2);font-size:.79rem;line-height:1.35}

/* Le contact n'est pas une garantie : il sort du panneau. */
.pv__ask{margin-top:.8rem;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.84rem;color:var(--ink2)}
.pv__ask .ico{font-size:1.05rem;color:var(--brand)}
.pv__ask a{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pv__ask a:hover{color:var(--ink)}

/* ── description + caractéristiques ── */
.pd__g{display:grid;gap:1.6rem}
@media (min-width:880px){.pd__g{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.6rem}}
.pd__t{font-size:1rem;line-height:1.7;max-width:62ch}
.pd__t p+p{margin-top:.8rem}
.spec{width:100%;border-collapse:collapse;font-size:.92rem}
.spec caption{text-align:left;font-weight:600;font-size:1rem;margin-bottom:.7rem}
.spec th,.spec td{padding:.62rem .2rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{text-align:left;font-weight:400;color:var(--ink2);width:44%}
.spec td{font-weight:600;font-variant-numeric:tabular-nums}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* ── barre d'achat collee en bas de la fiche ──────────────────────────────
   Posee par le script, jamais par le gabarit : sans JavaScript elle ne
   saurait ni suivre le defilement ni relayer le clic vers le vrai bouton,
   et une barre d'achat inerte est pire que pas de barre du tout.

   visibility:hidden au repos, comme le tiroir : sans cela ses trois elements
   restent dans l'ordre de tabulation alors qu'ils sont hors de l'ecran, et
   une navigation au clavier tombe dedans sans rien voir.

   z-index 70 : sous le tiroir (81) et son voile (80), au-dessus du reste. */
.sbb{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -14px rgba(28,26,23,.45);
  transform:translateY(100%);visibility:hidden;
  transition:transform .22s cubic-bezier(.25,1,.5,1),visibility .22s}
.sbb[data-on]{transform:none;visibility:visible}
.sbb__w{display:flex;align-items:center;gap:.9rem;padding-block:.65rem}
.sbb__i{flex:1;min-width:0}
.sbb__n{display:block;font-weight:600;font-size:.9rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* white-space:nowrap N'EST PAS DECORATIF. Sans lui, « 37,90 € » se laissait
   comprimer par le flex jusqu'a n'afficher qu'un « 3 » — un chiffre rouge
   isole que personne ne pouvait interpreter. Un prix ne se tronque pas. */
.sbb__p{font-size:1.06rem;font-weight:700;color:var(--actTx);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sbb .qty{flex:none}
.sbb__a{flex:none}
/* Sous 640px : DEUX RANGEES. Prix et quantite en haut, bouton pleine largeur
   en dessous. Sur une rangee unique les trois elements ne tenaient pas — le
   bouton debordait a droite, hors de l'ecran, et le prix etait rabote.
   Le titre s'efface : il n'y a plus la place pour lui, et c'est le bouton qui
   compte. Le prix, lui, reste : il est la raison d'etre de cette boutique. */
@media (max-width:640px){
  .sbb__w{flex-wrap:wrap;row-gap:.55rem;gap:.6rem}
  .sbb__n{display:none}
  .sbb__i{flex:0 0 auto;order:1}
  .sbb .qty{order:2;margin-left:auto}
  .sbb__a{order:3;flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.sbb{transition:none}}

/* ══ categorie ══ */
/* ── en-tête de catégorie ── */
.ch{padding:1.7rem 0 1.3rem;color:var(--ink)}
.ch__t{display:flex;align-items:center;gap:.85rem}
.ch__t .ico{font-size:2.2rem;color:var(--brand);flex:none}
.ch h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.8rem,1.3rem+2.1vw,2.9rem);line-height:1.04}
.ch__n{margin-top:.5rem;font-size:.95rem;color:var(--ink2)}
.ch__n b{color:var(--ink);font-weight:600}

/* ── barre d'outils ── */
.tb{color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;padding:.85rem 0;
  border-block:1px solid var(--line);margin-bottom:1.4rem}
.tb__f{display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:var(--paper);border:0;
  border-radius:999px;padding:.55rem 1.05rem;font-weight:700;font-size:.88rem;cursor:pointer}
.tb__f .ico{font-size:1.1rem}
@media (min-width:940px){.tb__f{display:none}}
.tb__c{font-size:.88rem;color:var(--ink2)}
.tb__c b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.tb__s{margin-left:auto;display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--ink2)}
.tb__s select{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1rem;font-weight:600;font-size:.88rem;cursor:pointer}
.tb__s select:hover{border-color:var(--brand)}

/* ── filtres actifs ── */
.act{color:var(--ink);display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.act__c{display:inline-flex;align-items:center;gap:.45rem;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:.32rem .5rem .32rem .85rem;font-size:.86rem;font-weight:600;color:var(--ink)}
.act__c button{width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);
  cursor:pointer;display:grid;place-items:center;font-size:.72rem;line-height:1;flex:none}
.act__c button:hover{background:var(--act);color:#fff}
.act__r{font-size:.86rem;font-weight:600;color:var(--actTx);align-self:center;margin-left:.3rem}
.act__r:hover{text-decoration:underline;text-underline-offset:3px}

/* ── colonnes ── */
.cl{color:var(--ink);display:grid;gap:1.6rem;padding-bottom:3rem}
@media (min-width:940px){.cl{grid-template-columns:246px minmax(0,1fr);gap:2.2rem;align-items:start}}
/* Une rubrique peut n'avoir aucune facette exploitable : le gabarit rend
   alors <div id="search_filters" hidden> pour garder la cible ajax, ou rien
   du tout quand le module ne renvoie aucune facette. .cl n'aurait plus qu'un
   enfant visible, que l'auto-placement rangerait dans la colonne de 246 px.
   Les deux cas mesures : /nouveaux-produits et /labubu-51. */
@media (min-width:940px){.cl>:only-child,.cl>[hidden]+*{grid-column:1/-1}}

/* ── panneau de filtres ── */
.fl{color:var(--ink);display:grid;gap:.2rem}
.fl__x{display:none}

/* Sous 940 px la colonne devient un tiroir, ouvert par le bouton « Filtrer »
   de la barre d'outils (.tb__f, masque au-dessus de 940 px).
   AVANT : @media (max-width:939px){.fl{display:none}} — la colonne
   disparaissait exactement sur la plage ou le bouton apparait, et aucun etat
   ouvert n'existait dans la feuille. Sur mobile il n'y avait donc AUCUN
   filtre, et un bouton qui n'ouvrait rien.
   Memes valeurs que le tiroir de navigation .dw (z-index 81, meme courbe,
   meme voile #ov partage) : un seul voile, un seul comportement a retenir.
   visibility:hidden au repos est indispensable — sans lui les ~44 cases du
   panneau restent dans l'ordre de tabulation derriere le voile. */
@media (max-width:939px){
  .fl{position:fixed;top:0;left:0;bottom:0;z-index:81;width:min(340px,88vw);
    background:var(--card);overflow-y:auto;overscroll-behavior:contain;
    padding:.9rem 1rem 2rem;box-shadow:0 20px 60px rgba(13,12,10,.3);
    align-content:start;transform:translateX(-100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.25,1,.5,1),visibility .26s}
  .fl[data-on]{transform:none;visibility:visible}
  .fl__x{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem auto;
    background:transparent;border:1.5px solid var(--line);border-radius:999px;
    padding:.4rem .9rem;font-weight:700;font-size:.85rem;color:var(--ink);cursor:pointer}
  .fl__x:hover{background:var(--act);border-color:var(--act);color:#fff}
  .fl__x .ico{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.fl{transition:none}}
.fg{border-bottom:1px solid var(--line);padding:.15rem 0 .9rem;margin-bottom:.9rem}
/* :last-child ne s'appliquait jamais : le gabarit des facettes termine la
   colonne par un <script>, qui est bien le dernier enfant. Le dernier groupe
   gardait donc son filet et sa marge, en bas d'une colonne qui s'arrete la. */
.fg:last-of-type{border-bottom:0;margin-bottom:0}
.fg>h2{color:var(--ink);font-weight:700;font-size:.95rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.fg>h2 .ico{font-size:1.15rem;color:var(--brand)}
.fg ul{display:grid;gap:.1rem}
.fo{color:var(--ink);display:flex;align-items:center;gap:.6rem;padding:.34rem .45rem;border-radius:8px;
  cursor:pointer;font-size:.9rem;transition:background .14s}
.fo:hover{background:var(--soft)}
.fo input{appearance:none;width:18px;height:18px;flex:none;border:1.5px solid var(--line);border-radius:5px;
  background:var(--card);cursor:pointer;position:relative;transition:.14s}
.fo input:checked{background:var(--ink);border-color:var(--ink)}
.fo input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;
  border:2px solid var(--paper);border-top:0;border-left:0;transform:rotate(42deg)}
.fo input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.fo .n{margin-left:auto;font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.fo.off{opacity:.42}
.fg__more{margin-top:.35rem;font-size:.85rem;font-weight:600;color:var(--actTx);background:none;border:0;
  padding:.3rem .45rem;cursor:pointer}
.fg__more:hover{text-decoration:underline;text-underline-offset:3px}

/* curseur de prix */
.pr__v{color:var(--ink);display:flex;justify-content:space-between;font-size:.88rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin-bottom:.55rem}
.pr__t{position:relative;height:6px;background:var(--soft);border-radius:999px;margin:.5rem .3rem 1.1rem}
/* Les pourcentages de la maquette (left:8%, right:26%, poignees a 8 % et
   74 %) etaient du decor fige : sur une vraie page ils ne correspondaient a
   rien tant que le script n'avait pas tourne. Le repos est desormais la
   fourchette ENTIERE, et c'est le gabarit qui ecrit la position reelle en
   style en ligne — une position n'est pas une regle de feuille. */
.pr__t i{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--brand);border-radius:999px}
.pr__t b{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--card);
  border:2.5px solid var(--ink);transform:translate(-50%,-50%)}
.pr__t b:first-of-type{left:0}
.pr__t b:last-of-type{left:100%}

/* ══ chapo de categorie, bande de questions ══ */
/* ── chapô de catégorie ── */
.ch__x{margin-top:.9rem;font-size:1.02rem;line-height:1.65;max-width:74ch;color:var(--ink)}
.ch__x b{font-weight:600}
/* le chapô vient d'une zone de texte riche du back-office : son contenu
   arrive en <p>, que la remise à zéro met à margin:0. Sans cette règle,
   deux paragraphes de fiche catégorie se collent (cas mesuré : rubriques
   « Attaque des Titans » et « Jujutsu Kaisen »). */
.ch__x p+p{margin-top:.8rem}
/* les éditeurs WYSIWYG laissent des <p></p> en fin de champ (cas mesuré :
   « Figurines Jujutsu Kaisen ») ; sans ceci ils creusent un blanc. */
.ch__x p:empty{display:none}

/* ── questions fréquentes ── */
.fq{background:var(--soft);color:var(--ink);padding:2.6rem 0 3rem}
/* Les cartes prennent toute la largeur du contenu, comme la grille de
   produits juste au-dessus : une bande de questions a moitie large sous une
   grille pleine largeur donnait l'impression d'un bas de page inacheve.
   Le TEXTE des reponses, lui, garde une longueur de ligne lisible — plus de
   100 signes par ligne et l'oeil perd le debut de la ligne suivante. */
.fq__l{display:grid;gap:.6rem;max-width:none}
.fq .qa__b{max-width:94ch}
.fq .qa summary{font-size:1.06rem}

/* ══ panier ══ */
/* ── deux colonnes ── */
.kg{display:grid;gap:1.5rem;padding-bottom:3rem;color:var(--ink)}
@media (min-width:960px){.kg{grid-template-columns:minmax(0,1fr) 350px;gap:2.2rem;align-items:start}}

/* ── groupe d'articles ── */
.gr{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1.1rem;background:var(--card)}
.gr__h{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.05rem;background:var(--soft);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.gr__h .ico{font-size:1.35rem;color:var(--brand);flex:none}
.gr__h b{font-weight:700;font-size:.98rem}
.gr__h .d{margin-left:auto;font-size:.86rem;font-weight:600;color:var(--ink2)}
.gr--pre .gr__h{background:#FBF1DD}
.gr--pre .gr__h .d{color:#8A5A00}

.li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:.9rem 1rem;padding:1rem 1.05rem;
  border-bottom:1px solid var(--line);align-items:start}
.li:last-child{border-bottom:0}
.li__i{background:var(--plate);border:1px solid var(--plateLine);border-radius:8px;padding:5%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.li__i img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.li__brand{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--actTx)}
.li__n{font-weight:600;font-size:.96rem;line-height:1.35;margin-top:.2rem}
.li__m{font-size:.84rem;color:var(--ink2);margin-top:.2rem}
.li__r{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:.7rem}
.li__p{font-family:"Play",sans-serif;font-size:1.3rem;font-variant-numeric:tabular-nums;margin-left:auto}
.li__u{font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.qty{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.li .qty button{width:36px;background:transparent;border:0;cursor:pointer;font-size:1.05rem;color:var(--ink);
  display:grid;place-items:center;transition:.14s}
.qty button:hover{background:var(--soft)}
.li .qty input{width:42px;border:0;background:transparent;text-align:center;font-weight:700;font-size:.95rem;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.li__x{background:none;border:0;color:var(--ink2);cursor:pointer;font-size:.86rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .1rem}
.li__x:hover{color:var(--actTx)}
.li__x .ico{font-size:1rem}

/* ── choix d'expédition ── */
.sh{border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--card);margin-bottom:1.1rem}
.sh__h{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.05rem;background:var(--ink);color:var(--paper)}
.sh__h .ico{font-size:1.35rem;color:var(--brand);flex:none}
.sh__h b{font-weight:700;font-size:.98rem}
.op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem .8rem;padding:.95rem 1.05rem;
  border-bottom:1px solid var(--line);cursor:pointer;align-items:start;transition:background .14s}
.op:last-child{border-bottom:0}
.op:hover{background:var(--soft)}
.op input{appearance:none;width:20px;height:20px;flex:none;border:2px solid var(--line);border-radius:50%;
  background:var(--card);cursor:pointer;position:relative;margin-top:1px;transition:.14s}
.op input:checked{border-color:var(--ink)}
.op input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.op input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.op b{font-weight:700;font-size:.95rem}
.op p{grid-column:2;font-size:.86rem;color:var(--ink2);line-height:1.5;margin-top:.15rem}
.op .c{font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.op .c.free{color:var(--green)}

/* ── récapitulatif ── */
.sm{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1.2rem 1.25rem 1.35rem;
  color:var(--ink)}
@media (min-width:960px){.sm{position:sticky;top:1rem}}
.sm h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.35rem;margin-bottom:.9rem}
.sm dl{display:grid;grid-template-columns:1fr auto;gap:.55rem 1rem;margin:0;font-size:.94rem}
.sm dt{color:var(--ink2)}
.sm dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sm dd.free{color:var(--green)}
.sm .tot{border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sm .tot span{font-weight:700;font-size:1rem}
.sm .tot b{font-family:"Play",sans-serif;font-weight:400;font-size:2rem;font-variant-numeric:tabular-nums;line-height:1}
.sm .tva{font-size:.82rem;color:var(--ink2);text-align:right;margin-top:.2rem}
.x4{display:flex;align-items:center;gap:.55rem;margin-top:.85rem;padding:.55rem .8rem;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);font-size:.88rem}
.x4 .ico{font-size:1.15rem;color:var(--ink2);flex:none}
.x4 b{font-weight:700;font-variant-numeric:tabular-nums}
.go{width:100%;margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--act);color:#fff;border:0;border-radius:999px;padding:.9rem 1.4rem;font-weight:700;
  font-size:1rem;cursor:pointer;transition:background .16s,transform .16s cubic-bezier(.25,1,.5,1)}
.go .ico{font-size:1.2rem}
.go:hover{background:#B81F1F;transform:translateY(-2px)}
.back{display:block;text-align:center;margin-top:.7rem;font-size:.9rem;font-weight:600;color:var(--ink2)}
.back:hover{color:var(--actTx);text-decoration:underline;text-underline-offset:3px}
.sm__free{display:flex;align-items:flex-start;gap:.55rem;margin-top:.9rem;padding:.65rem .8rem;border-radius:8px;
  background:#E8F3EC;color:#14532D;font-size:.86rem;line-height:1.45}
.sm__free .ico{font-size:1.1rem;flex:none;margin-top:1px}

details.promo{margin-top:.95rem;border-top:1px solid var(--line);padding-top:.85rem}
details.promo summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink2);list-style:none;
  display:flex;align-items:center;gap:.5rem}
details.promo summary::-webkit-details-marker{display:none}
details.promo summary:hover{color:var(--ink)}
details.promo summary .ico{font-size:1.05rem}
.promo form{display:flex;gap:.45rem;margin-top:.7rem}
.promo input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:.55rem .9rem;font-size:.9rem}
.promo input:focus{border-color:var(--brand);outline:none}
.promo button{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:.55rem 1.05rem;
  font-weight:700;font-size:.88rem;cursor:pointer}
.promo button:hover{background:var(--act);color:#fff}

/* Le bouton « Commander » est desactive quand le panier n'atteint pas le
   montant minimum de commande. Sans regle, .go gardait son rouge plein :
   un bouton mort qui avait l'air vivant. */
.go:disabled,.go.disabled,.go[aria-disabled="true"]{background:var(--line);color:var(--ink2);
  cursor:not-allowed;transform:none}
.go:disabled:hover,.go.disabled:hover,.go[aria-disabled="true"]:hover{background:var(--line);
  color:var(--ink2);transform:none}

/* ══ commande ══ */
/* ── tunnel : deux colonnes ── */
.tg{display:grid;gap:1.5rem;padding:1.4rem 0 3rem;color:var(--ink)}
@media (min-width:980px){.tg{grid-template-columns:minmax(0,1fr) 358px;gap:2.2rem;align-items:start}}

/* ── étapes ── */
.ep{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;margin-bottom:.9rem}
.ep[open]{border-color:var(--ink)}
.ep summary{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:.85rem;align-items:center;
  padding:1rem 1.15rem;cursor:pointer;list-style:none}
.ep summary::-webkit-details-marker{display:none}
.ep summary:hover .ttl{color:var(--actTx)}
.ep__n{width:34px;height:34px;border-radius:50%;background:var(--soft);border:1.5px solid var(--line);
  display:grid;place-items:center;font-weight:700;font-size:.92rem;color:var(--ink2)}
.ep[open] .ep__n{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ep--ok .ep__n{background:var(--green);border-color:var(--green);color:#fff}
.ep--ok .ep__n .ico{font-size:1.05rem}
.ttl{font-weight:700;font-size:1.02rem;line-height:1.3}
.ep__s{grid-column:2;font-size:.88rem;color:var(--ink2);margin-top:.15rem;line-height:1.45}
.ep__e{font-size:.88rem;font-weight:600;color:var(--actTx);white-space:nowrap}
.ep[open] .ep__e{visibility:hidden}
.ep__b{padding:.2rem 1.15rem 1.3rem;border-top:1px solid var(--line);margin-top:.2rem}
.ep__b>*:first-child{margin-top:1.1rem}

/* ── choix (transporteur, paiement) ── */
.ch2{display:grid;gap:.55rem}
.ro{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem .85rem;padding:.9rem 1rem;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;align-items:center;transition:.15s}
.ro:hover{border-color:var(--ink2)}
.ro:has(input:checked){border-color:var(--ink);background:var(--soft)}
.ro input{appearance:none;width:20px;height:20px;flex:none;border:2px solid var(--line);border-radius:50%;
  background:var(--card);cursor:pointer;position:relative;transition:.14s}
.ro input:checked{border-color:var(--ink)}
.ro input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.ro input:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.ro b{font-weight:700;font-size:.96rem;display:flex;align-items:center;gap:.5rem}
.ro b .ico{font-size:1.3rem;color:var(--ink2)}
.ro p{grid-column:2;font-size:.86rem;color:var(--ink2);line-height:1.5}
.ro .c{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ro .c.free{color:var(--green)}

/* échéancier du 4× */
.ec{grid-column:2;margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.6rem;display:grid;gap:.3rem}
.ec div{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:var(--ink2)}
.ec div b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.ec div:first-child b{color:var(--actTx)}

/* ── récapitulatif ── */
.osum{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:1.2rem 1.25rem 1.35rem;
  color:var(--ink)}
@media (min-width:980px){.osum{position:sticky;top:1rem}}
.osum h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.3rem;margin-bottom:.9rem}
.osum__l{display:grid;gap:.75rem;margin-bottom:1rem}
.osum__i{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:.75rem;align-items:center}
.osum__i .im{background:var(--plate);border:1px solid var(--plateLine);border-radius:8px;padding:4%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.osum__i .im img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.osum__i .nm{font-size:.87rem;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.osum__i .q{font-size:.8rem;color:var(--ink2)}
.osum__i .p{font-weight:700;font-size:.92rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.osum dl{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;margin:0;font-size:.93rem;
  border-top:1px solid var(--line);padding-top:.9rem}
.osum dt{color:var(--ink2)}
.osum dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.osum dd.free{color:var(--green)}
.osum .tot{border-top:1px solid var(--line);margin-top:.85rem;padding-top:.85rem;display:flex;
  align-items:baseline;justify-content:space-between;gap:1rem}
.osum .tot span{font-weight:700}
.osum .tot b{font-family:"Play",sans-serif;font-weight:400;font-size:1.95rem;font-variant-numeric:tabular-nums;line-height:1}
.osum .tva{font-size:.82rem;color:var(--ink2);text-align:right;margin-top:.2rem}
.pay{width:100%;margin-top:1.1rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--act);color:#fff;border:0;border-radius:999px;padding:.95rem 1.4rem;font-weight:700;
  font-size:1rem;cursor:pointer;transition:background .16s,transform .16s cubic-bezier(.25,1,.5,1)}
.pay .ico{font-size:1.2rem}
.pay:hover{background:#B81F1F;transform:translateY(-2px)}
.osum__s{display:flex;align-items:center;justify-content:center;gap:.45rem;margin-top:.7rem;
  font-size:.84rem;color:var(--ink2)}
.osum__s .ico{font-size:1rem}

/* ═══ etats poses par le coeur sur les etapes, et cartes d'adresse ═══ */

/* Une etape INJOIGNABLE avait l'air cliquable : « .ep summary{cursor:pointer} »
   s'applique a toutes les etapes, et les deux classes que core.js pose pour
   distinguer l'etat — -clickable et not-allowed — n'avaient aucune regle.
   Mesure : un <details class="checkout-step -unreachable ep"> avec un <summary>
   et AUCUN corps ; le clic ne faisait rien, sans le moindre retour visuel. */
.checkout-step.-unreachable>summary,.step-title.not-allowed,summary.not-allowed{cursor:not-allowed;opacity:.5}
.checkout-step.-unreachable>summary:hover .ttl{color:inherit}
.checkout-step.-clickable>summary{cursor:pointer}

/* Une etape terminee qu'on ROUVRE pour la corriger affichait la pastille verte
   « termine » : .ep--ok .ep__n l'emportait sur .ep[open] .ep__n, ecrite avant.
   L'etape en cours de correction reprend donc la pastille sombre de l'etape
   ouverte, et garde sa coche. */
.ep--ok[open] .ep__n{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Le bouton « Commander » desactive par le coeur (conditions non acceptees,
   montant minimum) doit AVOIR l'air mort : .pay peint son propre fond, ce qui
   masquait le rendu natif du navigateur. */
.pay:disabled,.pay.disabled{background:var(--line);color:var(--ink2);cursor:not-allowed;transform:none}
.pay:disabled:hover,.pay.disabled:hover{background:var(--line);color:var(--ink2);transform:none}

/* ── cartes d'adresse (etape 2) ──
   L'etat coche vient de .ro:has(input:checked) ; il manquait l'habillage des
   deux liens « Modifier » / « Supprimer », qui heritaient de
   « a{color:inherit;text-decoration:none} » et se lisaient comme du texte. */
.address-item{margin:0}
.address-item+.address-item{margin-top:.55rem}
.address-footer{display:flex;flex-wrap:wrap;gap:1.1rem;margin:.4rem 0 0 1rem;font-size:.87rem}
.address-footer a,.add-address a{color:var(--actTx);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.address-footer a:hover,.add-address a:hover{color:var(--ink)}
.add-address{margin-top:.9rem;font-size:.93rem}
.address-item-invalid,.address-item-invalid a{color:var(--act)}
.js-address-error{margin-top:.8rem}

/* ── formulaires des modules de paiement ──
   ps_checkout emet sa grille Bootstrap (row / col-xs-6 / col-6) dans
   #pay-with-…-form : sans regle, la date d'expiration et le CVC s'empilaient
   au lieu de se partager la ligne. On ne rehabille pas le module — on lui rend
   seulement sa grille et l'aspect de nos champs. */
.js-payment-option-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.9rem}
.js-payment-option-form .row>[class*="col-md-12"],
.js-payment-option-form .row>[class*="col-xs-12"]{grid-column:1/-1}
.js-payment-option-form .form-control-label{display:block;font-size:.86rem;font-weight:600;
  color:var(--ink2);margin-bottom:.32rem}
.js-payment-option-form .form-control{background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  border-radius:10px;padding:.62rem .85rem;font-size:.95rem;width:100%}
.js-additional-information{font-size:.9rem;color:var(--ink2);line-height:1.55;padding:.2rem 0 .6rem}

/* ══ confirmation ══ */
/* ── bandeau de confirmation ── */
.cfb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.2rem;align-items:start;
  border:1.5px solid var(--green);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.4rem 1.5rem;margin:.4rem 0 1.2rem}
.cfb__k{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;display:grid;
  place-items:center;font-size:1.7rem;flex:none}
.cfb h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.5rem,1.2rem+1.5vw,2.2rem);line-height:1.1}
.cfb p{color:var(--ink2);margin-top:.4rem;font-size:.96rem;line-height:1.55;max-width:64ch}
.cfb b{color:var(--ink);font-weight:700}
.cfb__r{grid-column:2;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.cfb__r span{display:inline-flex;align-items:center;gap:.45rem;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:.34rem .85rem;font-size:.87rem;color:var(--ink2)}
.cfb__r span b{font-weight:700;font-variant-numeric:tabular-nums}
.cfb__r .ico{font-size:1.05rem}
@media (max-width:560px){.cfb{grid-template-columns:1fr}.cfb__r{grid-column:1}}

/* ── récapitulatif de confirmation ── */
.rcp{display:grid;gap:1.2rem}
@media (min-width:900px){.rcp{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.6rem;align-items:start}}
/* ── et maintenant ── */
.nxt{display:grid;gap:.9rem;margin-top:1.4rem}
@media (min-width:820px){.nxt{grid-template-columns:repeat(3,1fr)}}
.nxt>div{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.15rem 1.2rem 1.25rem}
.nxt .ico{font-size:1.6rem;color:var(--brand)}
.nxt b{display:block;font-weight:700;font-size:1rem;margin:.5rem 0 .3rem}
.nxt p{font-size:.89rem;color:var(--ink2);line-height:1.55}

/* ── créer un compte ── */
.acc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem 1.2rem;align-items:center;
  background:var(--deep);color:var(--onDeepS);border-radius:var(--r);padding:1.3rem 1.5rem;margin-top:1.4rem}
.acc .ico{font-size:2rem;color:var(--brand);flex:none}
.acc b{font-family:"Play",sans-serif;font-weight:400;font-size:1.3rem;line-height:1.15;display:block}
.acc p{color:var(--onDeep);font-size:.92rem;margin-top:.3rem;max-width:56ch;line-height:1.55}
.acc a{background:var(--brand);color:#1C1A17;border-radius:999px;padding:.72rem 1.35rem;font-weight:700;
  font-size:.93rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.acc a:hover{background:#FFB42E}
@media (max-width:760px){.acc{grid-template-columns:auto minmax(0,1fr)}.acc a{grid-column:1/-1;justify-content:center}}

/* Le bloc « invite -> compte client » est un <form> : sa troisieme cellule est
   un <button> (la transformation est un POST), la ou la maquette montre un
   lien. Sans cette regle, le bouton sortait en pilule sombre au lieu de la
   pilule jaune de la maquette. */
.acc button{background:var(--brand);color:#1C1A17;border:0;border-radius:999px;padding:.72rem 1.35rem;
  font-weight:700;font-size:.93rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;
  cursor:pointer;font-family:inherit}
.acc button:hover{background:#FFB42E}
@media (max-width:760px){.acc button{grid-column:1/-1;justify-content:center}}

/* ── pave « informations de la passerelle » du module de paiement ──
   ps_checkout rend son retour de paiement en Bootstrap brut, sur la page de
   confirmation : card-block / row / col-md-12 / h3 card-title / definition-list
   / contact-us — six classes sans aucune regle, mesurees sur une commande payee
   par carte. Ce n'est pas le theme, mais c'est visible par le client. On ne
   reecrit pas le module : on lui donne de quoi tenir dans la page.
   (Ses TEXTES restent en anglais : c'est la traduction du module.) */
.card-block{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.2rem 1.3rem;margin-top:1.4rem}
.card-block .row{display:grid;gap:1rem}
.card-block .col-md-12{grid-column:1/-1}
.card-title,.card-block .h3{font-family:"Play",sans-serif;font-weight:400;font-size:1.2rem;margin-bottom:.85rem}
.definition-list dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.1rem;margin:0;
  font-size:.92rem}
.definition-list dt{color:var(--ink2)}
.definition-list dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.contact-us{color:var(--actTx);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.card-block p{margin-top:.9rem;font-size:.92rem}

/* ══ espace client ══ */
/* ── espace client : deux colonnes ── */
.ag{display:grid;gap:1.5rem;padding:.4rem 0 3rem;color:var(--ink)}
@media (min-width:920px){.ag{grid-template-columns:236px minmax(0,1fr);gap:2.2rem;align-items:start}}

/* ── en-tête du compte ── */
.ah{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;padding:1.5rem 0 .3rem;color:var(--ink)}
.ah h1{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.6rem,1.25rem+1.7vw,2.4rem);line-height:1.08}
.ah p{color:var(--ink2);font-size:.92rem}

/* ── navigation latérale ── */
.an{display:grid;gap:.15rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:.55rem;color:var(--ink)}
@media (min-width:920px){.an{position:sticky;top:1rem}}
.an a{display:flex;align-items:center;gap:.65rem;padding:.6rem .75rem;border-radius:10px;font-size:.93rem;
  font-weight:600;color:var(--ink);transition:background .14s}
.an a:hover{background:var(--soft)}
.an a[aria-current]{background:var(--ink);color:var(--paper)}
.an a[aria-current] .ico{color:var(--paper);opacity:.8}
.an .ico{font-size:1.2rem;color:var(--ink2);flex:none}
.an a:hover .ico{color:var(--ink)}
.an .cnt{margin-left:auto;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--brand);color:#1C1A17;border-radius:999px;min-width:22px;height:22px;
  display:grid;place-items:center;padding:0 6px}
.an hr{border:0;border-top:1px solid var(--line);margin:.4rem .25rem}
@media (max-width:919px){.an{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
  .an .cnt,.an hr{display:none}}

/* ── prochaine arrivée ── */
.na{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem 1rem;align-items:center;
  border:1.5px solid var(--ink);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.1rem 1.25rem;margin-bottom:1.2rem}
.na .ico{font-size:2rem;color:var(--brand);flex:none}
.na b{font-family:"Play",sans-serif;font-weight:400;font-size:1.35rem;line-height:1.15;display:block}
.na p{color:var(--ink2);font-size:.92rem;margin-top:.25rem;line-height:1.5;max-width:62ch}
.na p em{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── carte de précommande ── */
.po2{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  overflow:hidden;margin-bottom:1.1rem}
.po2__h{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:.9rem 1rem;align-items:center;
  padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
.po2__i{background:var(--plate);border:1px solid var(--plateLine);border-radius:8px;padding:5%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.po2__i img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.po2__b{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--actTx)}
.po2__n{font-weight:600;font-size:1rem;line-height:1.35;margin-top:.15rem}
.po2__m{font-size:.85rem;color:var(--ink2);margin-top:.2rem}
.po2__p{text-align:right;white-space:nowrap}
.po2__p .v{font-family:"Play",sans-serif;font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1;display:block}
.po2__p .l{font-size:.78rem;color:var(--ink2);display:block;margin-top:.25rem}
.po2__s{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  padding:.22rem .6rem;border-radius:999px;background:var(--soft);border:1px solid var(--line);
  color:var(--ink2);margin-top:.4rem}
.po2__s .ico{font-size:.95rem}
.po2__s--go{background:var(--brand);border-color:var(--brand);color:#1C1A17}
.po2__s--wait{color:var(--ink2)}
.po2__f{display:flex;flex-wrap:wrap;gap:.5rem;padding:.85rem 1.15rem;background:var(--soft);
  border-top:1px solid var(--line)}
.po2__f a,.po2__f button{display:inline-flex;align-items:center;gap:.45rem;background:transparent;
  border:1.5px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-size:.88rem;font-weight:600;
  color:var(--ink);cursor:pointer;transition:.15s}
.po2__f a:hover,.po2__f button:hover{background:var(--act);border-color:var(--act);color:#fff}
.po2__f .warn:hover{background:var(--act);border-color:var(--act);color:#fff}
.po2__f .ico{font-size:1.05rem}
.po2 .tl{border:0;border-radius:0;margin:0;padding:1.15rem 1.15rem 1.25rem}
.po2 .tl h2{font-family:"UI",sans-serif;font-size:.86rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:1rem}

/* ── commandes passées ── */
.ph{width:100%;border-collapse:collapse;font-size:.93rem;color:var(--ink)}
.ph caption{text-align:left;font-family:"Play",sans-serif;font-weight:400;font-size:1.25rem;
  margin-bottom:.8rem;color:var(--ink)}
.ph th,.ph td{padding:.75rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ph th{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.ph td.r{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ph tbody tr:last-child td{border-bottom:0}
.ph .ok{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:700;color:var(--green)}
.ph .ok .ico{font-size:1rem}
.ph a{font-weight:600;color:var(--actTx);white-space:nowrap}
.ph a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){.ph thead{position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);white-space:nowrap}
  .ph tr{display:grid;gap:.2rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .ph td{border:0;padding:.1rem .2rem}
  .ph td.r{text-align:left}}

/* ══ sous-pages du compte ══ */
/* ── tableau de bord : raccourcis ── */
.qk{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-bottom:1.3rem}
.qk a{display:grid;gap:.4rem;padding:1.05rem 1.15rem 1.15rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--ink);transition:transform .18s cubic-bezier(.25,1,.5,1),border-color .18s}
.qk a:hover{transform:translateY(-3px);border-color:var(--brand)}
.qk .ico{font-size:1.7rem;color:var(--brand)}
.qk b{font-weight:700;font-size:.98rem;display:flex;align-items:baseline;gap:.5rem}
.qk b .v{margin-left:auto;font-family:"Play",sans-serif;font-weight:400;font-size:1.5rem;line-height:1;
  font-variant-numeric:tabular-nums}
.qk p{font-size:.86rem;color:var(--ink2);line-height:1.5}

/* ── liste d'envies ── */
.wl{position:relative}
.wl__x{position:absolute;top:.6rem;right:.6rem;z-index:3;width:34px;height:34px;border-radius:50%;
  background:var(--plate);border:1px solid var(--plateLine);color:var(--onPlate2);display:grid;
  place-items:center;cursor:pointer;font-size:1.05rem;transition:.16s}
.wl__x:hover{background:var(--act);border-color:var(--act);color:#fff}
.wl__bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.wl__bar p{font-size:.92rem;color:var(--ink2)}
.wl__bar p b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.wl__bar .all{margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;background:var(--act);
  color:#fff;border:0;border-radius:999px;padding:.62rem 1.2rem;font-weight:700;font-size:.9rem;cursor:pointer}
.wl__bar .all:hover{background:#B81F1F}
.wl__bar .all .ico{font-size:1.1rem}

/* ── adresses ── */
.adg{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.adr{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.15rem 1.2rem 1.25rem;display:flex;flex-direction:column}
.adr--main{border-color:var(--ink);border-width:1.5px}
.adr__t{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.adr__t .ico{font-size:1.25rem;color:var(--brand)}
.adr__t b{font-weight:700;font-size:.98rem}
.adr__t .tag{margin-left:auto;font-size:.76rem;font-weight:700;padding:.18rem .6rem;border-radius:999px;
  background:var(--ink);color:var(--paper)}
.adr address{font-style:normal;font-size:.94rem;line-height:1.6;color:var(--ink)}
.adr .tel{font-size:.88rem;color:var(--ink2);margin-top:.5rem}
.adr__f{margin-top:auto;padding-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.adr__f a,.adr__f button{display:inline-flex;align-items:center;gap:.4rem;background:transparent;border:1.5px solid var(--line);
  border-radius:999px;padding:.45rem .95rem;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s}
.adr__f a:hover,.adr__f button:hover{background:var(--act);border-color:var(--act);color:#fff}
.adr__f .warn:hover{background:var(--act);border-color:var(--act);color:#fff}
.adr__f .ico{font-size:1rem}
.adr--new{border-style:dashed;align-items:center;justify-content:center;text-align:center;gap:.5rem;
  min-height:190px;color:var(--ink2)}
.adr--new:hover{border-color:var(--brand);color:var(--ink)}
.adr--new .ico{font-size:2rem;color:var(--brand)}
.adr--new b{font-weight:700;font-size:.98rem;color:var(--ink)}
.adr--new span{font-size:.88rem}

/* ── formulaire d'informations ── */
/* Les champs longs prennent la rangee entiere DANS une rangee .fr, comme
   ils le font deja dans .form-fields. Sans cette regle, « Adresse e-mail »
   ou une case a cocher restaient sur une demi-colonne. */
.fr>.fd--l{grid-column:1/-1}
.frm{display:grid;gap:1.1rem}
.frm section{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:1.2rem 1.25rem 1.35rem}
.frm h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.25rem;margin-bottom:.3rem}
.frm .sub{font-size:.9rem;color:var(--ink2);margin-bottom:1.1rem;max-width:66ch;line-height:1.55}
.frm .save{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);
  color:var(--paper);border:0;border-radius:999px;padding:.7rem 1.35rem;font-weight:700;font-size:.92rem;cursor:pointer}
.frm .save:hover{background:var(--act);color:#fff}
.frm .save .ico{font-size:1.05rem}
.danger{border-color:var(--act)}
.danger h2{color:var(--actTx)}
.danger .kill{background:transparent;border:1.5px solid var(--act);color:var(--actTx)}
.danger .kill:hover{background:var(--act);color:#fff;border-color:var(--act)}

/* ── état vide ── */
.empty{border:1px dashed var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  padding:2.4rem 1.5rem;text-align:center;display:grid;gap:.6rem;justify-items:center}
.empty .ico{font-size:2.6rem;color:var(--ink2)}
.empty b{font-family:"Play",sans-serif;font-weight:400;font-size:1.3rem}
.empty p{color:var(--ink2);font-size:.94rem;max-width:46ch;line-height:1.6}
.empty a{margin-top:.5rem;display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--paper);
  border-radius:999px;padding:.68rem 1.3rem;font-weight:700;font-size:.9rem}
.empty a:hover{background:var(--act);color:#fff}

/* ══ composants : tiroir, mini-panier, cookies, 404, etats vides ══ */
/* ══ bouton d'ouverture mobile ══ */
/* Rond depuis le 2026-09-27, comme les boutons compte et panier de l'en-tete
   mobile (reference Vapoteur Discount). Le burger n'existe que sous 1024px :
   la forme de base est donc sa seule forme. */
.brg{display:none;width:42px;height:42px;flex:none;background:transparent;border:1.5px solid #E2E0DA;
  border-radius:50%;color:#1C1A17;cursor:pointer;place-items:center;font-size:1.35rem}
.brg:hover{border-color:var(--brand)}
/* MEME SEUIL QUE LE MENU DE BUREAU (odG_css.html) : le burger apparait
   exactement la ou .nav disparait. Les deux valeurs doivent rester egales —
   quand elles ont diverge, l'ecran a montre les deux menus a la fois. */
@media (max-width:1024px){.brg{display:grid}}
/* Sur telephone, meme diametre que les boutons ronds compte et panier (40px) :
   les colonnes laterales de l'en-tete sont calibrees sur cette valeur. */
@media (max-width:860px){.brg{width:40px;height:40px;font-size:1.25rem}}

/* ══ tiroir de navigation ══ */
.ov{position:fixed;inset:0;z-index:80;background:rgba(13,12,10,.55);opacity:0;visibility:hidden;
  transition:opacity .25s cubic-bezier(.25,1,.5,1),visibility .25s}
.ov[data-on]{opacity:1;visibility:visible}
.dw{position:fixed;top:0;left:0;bottom:0;z-index:81;width:min(340px,88vw);background:var(--card);
  color:var(--ink);display:flex;flex-direction:column;transform:translateX(-102%);visibility:hidden;
  transition:transform .3s cubic-bezier(.25,1,.5,1),visibility .3s;box-shadow:0 0 40px -8px rgba(13,12,10,.5)}
.dw[data-on]{transform:none;visibility:visible}
.dw__h{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;background:var(--hdr);
  border-bottom:1px solid var(--hdrLine)}
.dw__h img{height:32px;width:auto}
.dw__x{margin-left:auto;width:40px;height:40px;flex:none;background:transparent;border:1.5px solid #E2E0DA;
  border-radius:10px;color:#1C1A17;cursor:pointer;display:grid;place-items:center;font-size:1.2rem}
.dw__x:hover{background:var(--act);border-color:var(--act);color:#fff}
.dw__s{padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.dw__b{flex:1;overflow-y:auto;padding:.5rem .6rem 1rem}
.dw details{border-bottom:1px solid var(--line)}
.dw details summary{display:flex;align-items:center;gap:.65rem;padding:.85rem .7rem;cursor:pointer;
  font-weight:700;font-size:1rem;list-style:none}
.dw details summary::-webkit-details-marker{display:none}
.dw details summary .ico{font-size:1.25rem;color:var(--brand);flex:none}
.dw details summary .cv{margin-left:auto;font-size:.8rem;transition:transform .22s cubic-bezier(.25,1,.5,1)}
.dw details[open] summary .cv{transform:rotate(180deg)}
.dw details ul{display:grid;gap:.05rem;padding:0 .7rem .8rem 2.6rem;margin:0;list-style:none}
.dw details a{display:flex;justify-content:space-between;gap:1rem;padding:.42rem .4rem;border-radius:8px;
  font-size:.93rem;color:var(--ink)}
.dw details a:hover{background:var(--soft);color:var(--actTx)}
.dw details .c{font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.dw__l{display:flex;align-items:center;gap:.65rem;padding:.85rem .7rem;font-weight:700;font-size:1rem;
  color:var(--ink);border-bottom:1px solid var(--line)}
.dw__l .ico{font-size:1.25rem;color:var(--brand);flex:none}
.dw__l:hover{color:var(--actTx)}
.dw__f{border-top:1px solid var(--line);padding:.9rem 1rem;display:grid;gap:.55rem;background:var(--soft)}
.dw__f a{display:flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;color:var(--ink)}
.dw__f a .ico{font-size:1.15rem;color:var(--ink2)}
.dw__f a:hover{color:var(--actTx)}

/* ══ mini-panier ══ */
.mcw{position:relative}
.mc{position:absolute;top:calc(100% + .6rem);right:0;z-index:60;width:min(360px,92vw);background:var(--card);
  color:var(--ink);border-radius:var(--r);box-shadow:0 2px 8px rgba(28,26,23,.1),0 22px 44px -18px rgba(28,26,23,.4);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s cubic-bezier(.25,1,.5,1),transform .2s cubic-bezier(.25,1,.5,1),visibility .2s}
.mcw:hover .mc,.mcw:focus-within .mc,.mc[data-on]{opacity:1;visibility:visible;transform:none}
.mc__h{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);
  font-weight:700;font-size:.95rem}
.mc__h .ico{font-size:1.2rem;color:var(--brand)}
.mc__h .n{margin-left:auto;font-size:.85rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.mc__l{max-height:min(46vh,300px);overflow-y:auto}
.mc__i{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.7rem;padding:.75rem 1rem;
  border-bottom:1px solid var(--line);align-items:center}
.mc__i .im{background:var(--plate);border:1px solid var(--plateLine);border-radius:7px;padding:4%}
/* height:auto : sans lui l'attribut height= de l'image l'emporte et aspect-ratio ne s'applique pas. Voir .pc__i img. */
.mc__i .im img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.mc__i .nm{font-size:.86rem;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc__i .q{font-size:.79rem;color:var(--ink2);margin-top:.1rem}
.mc__i .q .pre{color:var(--actTx);font-weight:700}
.mc__i .p{font-weight:700;font-size:.9rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc__f{padding:.9rem 1rem 1rem}
.mc__t{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.mc__t span{font-weight:700;font-size:.94rem}
.mc__t b{font-family:"Play",sans-serif;font-weight:400;font-size:1.5rem;font-variant-numeric:tabular-nums;line-height:1}
.mc__g{height:7px;background:var(--soft);border-radius:999px;overflow:hidden;margin-bottom:.4rem}
.mc__g i{display:block;height:100%;border-radius:999px;background:var(--green)}
.mc__s{font-size:.83rem;color:var(--ink2);line-height:1.45;margin-bottom:.9rem}
.mc__s b{color:var(--green);font-weight:700}
.mc__a{display:grid;gap:.5rem}
.mc__a a{display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;
  padding:.66rem 1rem;font-weight:700;font-size:.9rem}
.mc__a .go3{background:var(--act);color:#fff}
.mc__a .go3:hover{background:#B81F1F}
.mc__a .sec2{border:1.5px solid var(--line);color:var(--ink)}
.mc__a .sec2:hover{background:var(--act);border-color:var(--act);color:#fff}

/* ══ bandeau de consentement ══ */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--deep);color:var(--onDeepS);
  padding:1.1rem 0 1.2rem;box-shadow:0 -12px 30px -18px rgba(0,0,0,.7)}
.cb__g{display:grid;gap:.9rem 1.6rem}
@media (min-width:900px){.cb__g{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.cb b{font-family:"Play",sans-serif;font-weight:400;font-size:1.2rem;display:block;margin-bottom:.35rem}
.cb p{color:var(--onDeep);font-size:.9rem;line-height:1.55;max-width:72ch}
.cb p a{text-decoration:underline;text-underline-offset:3px;color:var(--onDeepS)}
.cb__a{display:flex;flex-wrap:wrap;gap:.5rem}
.cb__a button{border-radius:999px;padding:.68rem 1.25rem;font-weight:700;font-size:.9rem;cursor:pointer;
  border:1.5px solid transparent;white-space:nowrap}
.cb__a .ok2{background:var(--brand);color:#1C1A17}
.cb__a .ok2:hover{background:#FFB42E}
.cb__a .no{background:transparent;border-color:var(--onDeep);color:var(--onDeepS)}
.cb__a .no:hover{background:var(--act);border-color:var(--act);color:#fff}
.cb__a .cfg{background:transparent;border-color:transparent;color:var(--onDeep);
  text-decoration:underline;text-underline-offset:3px}
.cb__a .cfg:hover{color:var(--onDeepS)}
.cb__d{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--onDeepLine);display:grid;gap:.75rem}
@media (min-width:760px){.cb__d{grid-template-columns:repeat(3,1fr)}}
.cb__d label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;cursor:pointer}
.cb__d input{appearance:none;width:19px;height:19px;flex:none;border:1.5px solid var(--onDeep);
  border-radius:6px;background:transparent;cursor:pointer;position:relative;margin-top:1px}
.cb__d input:checked{background:var(--brand);border-color:var(--brand)}
.cb__d input:checked::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;
  border:2px solid #1C1A17;border-top:0;border-left:0;transform:rotate(42deg)}
.cb__d input:disabled{opacity:.5;cursor:not-allowed}
.cb__d strong{font-weight:700;font-size:.9rem;display:block}
.cb__d span{font-size:.84rem;color:var(--onDeep);line-height:1.5}

/* ══ page 404 ══ */
.e4{padding:3rem 0 3.5rem;color:var(--ink);text-align:center}
.e4__n{font-family:"Play",sans-serif;font-size:clamp(4.5rem,3rem+9vw,9rem);line-height:.85;
  color:var(--brand);letter-spacing:-.02em}
/* h2 aussi : le fragment errors/not-found.tpl est incorpore dans des pages
   qui ont deja leur <h1> (rubrique sans produit), et deux titres de premier
   niveau dans un document, c'est un titre de trop. */
.e4 h1,.e4 h2{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.5rem,1.2rem+1.6vw,2.3rem);
  line-height:1.12;margin:.9rem auto .6rem;max-width:20ch}
.e4 p{color:var(--ink2);font-size:1rem;line-height:1.6;max-width:56ch;margin-inline:auto}
.e4__s{max-width:520px;margin:1.5rem auto 0;display:flex;background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;overflow:hidden}
.e4__s:focus-within{border-color:var(--brand)}
.e4__s input{flex:1;min-width:0;background:transparent;border:0;padding:.72rem 1.2rem;font-size:.98rem;color:var(--ink)}
.e4__s button{background:var(--brand);border:0;width:62px;flex:none;display:grid;place-items:center;
  cursor:pointer;color:var(--onPlate);font-size:1.2rem}
.e4__s button:hover{background:#FFB42E}
.e4__k{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.4rem}
.e4__k a{display:inline-flex;align-items:baseline;gap:.45rem;padding:.5rem 1.05rem;border-radius:999px;
  border:1.5px solid var(--line);font-size:.92rem;font-weight:600;color:var(--ink)}
.e4__k a:hover{background:var(--act);border-color:var(--act);color:#fff}
.e4__k em{font-style:normal;font-size:.82rem;color:var(--ink2);font-variant-numeric:tabular-nums}

/* ══ états vides ══ */
.demo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1.3rem;
  background:var(--card);color:var(--ink)}
.demo__h{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--soft);
  border-bottom:1px solid var(--line);font-size:.85rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink2)}
.demo__h .ico{font-size:1.1rem;color:var(--brand)}
.demo__b{padding:1.6rem 1.4rem}
.es{display:grid;gap:.65rem;justify-items:center;text-align:center;padding:1.4rem 1rem}
.es .ico{font-size:2.8rem;color:var(--ink2)}
/* Le titre d'un etat vide est un <h2> dans les gabarits (panier vide,
   recherche sans resultat) : c'est bien un titre, pas une graisse, et on ne
   va pas le degrader en <b> pour coller a la maquette de composants. On
   habille les deux — sinon le titre du panier vide retombait au style par
   defaut du navigateur, seul « .es b » existant. */
.es b,.es h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.35rem;line-height:1.15}
.es p{color:var(--ink2);font-size:.94rem;line-height:1.6;max-width:52ch}
.es .act2{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.es .act2 a,.es .act2 button{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;
  padding:.66rem 1.25rem;font-weight:700;font-size:.9rem;cursor:pointer;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink)}
.es .act2 .p1{background:var(--ink);color:var(--paper)}
.es .act2 .p1:hover{background:var(--act);border-color:var(--act);color:#fff}
.es .act2 a:hover,.es .act2 button:hover{background:var(--act);border-color:var(--act);color:#fff}
.es--bad .ico{color:var(--actTx)}
.es--bad b{color:var(--actTx)}

/* ══ page de contenu ══ */
/* ── page CMS ── */
.cms{display:grid;gap:1.8rem;padding-bottom:2.5rem;color:var(--ink)}
@media (min-width:960px){.cms{grid-template-columns:250px minmax(0,1fr);gap:2.6rem;align-items:start}}
/* overflow-wrap:anywhere — les pages d'information portent des ADRESSES WEB
   ecrites en toutes lettres, sans espace : 68 signes d'un seul tenant dans les
   CGV (le lien vers la plateforme europeenne de reglement des litiges), 112
   dans le reglement du jeu concours. Un navigateur ne coupe jamais une adresse
   de lui-meme : sur un telephone, elle poussait la colonne hors de l'ecran et
   toute la page defilait de cote (signale par le client le 2026-09-27).
   « anywhere » et non « break-word » : seul le premier reduit aussi la largeur
   minimale du bloc, ce qui compte dans une grille. Il ne coupe un mot QUE
   s'il ne tient pas seul sur une ligne — le texte courant n'est pas touche.
   min-width:0 pour la meme raison : un element de grille refuse sinon de
   devenir plus etroit que son contenu. */
.cms__c{font-size:1.02rem;line-height:1.75;max-width:72ch;min-width:0;overflow-wrap:anywhere}
/* Colonne unique — la regle de TOUTES les pages d'information depuis le
   2026-09-27 (le client a retire la colonne de liens de gauche).
   Le texte part du MEME BORD que le titre : centre, il flottait a 260 px du
   <h1> sur un ecran de bureau, et la page semblait mal alignee.
   100ch et non toute la largeur : c'est le choix du client, entre les deux.
   Pleine largeur, une ligne de CGV ferait ~130 signes et l'oeil perd le debut
   de la ligne suivante ; a 100 elle remplit l'essentiel de la page et reste
   lisible. Si l'on veut plus large, c'est cette valeur, et elle seule. */
.cms--seul{grid-template-columns:minmax(0,1fr)}
.cms--seul .cms__c{max-width:100ch}
.cms__c h2{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.25rem,1.05rem+.9vw,1.65rem);
  line-height:1.2;margin:2rem 0 .8rem}
.cms__c h2:first-child{margin-top:0}
.cms__c p{margin-bottom:1.05rem}
.cms__c ul{display:grid;gap:.5rem;margin:0 0 1.15rem;padding:0;list-style:none}
.cms__c li{position:relative;padding-left:1.2rem}
.cms__c li::before{content:"";position:absolute;left:0;top:.62rem;width:7px;height:7px;
  border-radius:2px;background:var(--brand)}

/* Le contenu des pages est ecrit dans l'editeur du back-office : il peut
   contenir autre chose que des titres, des paragraphes et des listes a puces.
   Les CGV et les mentions legales portent deja 2 <ol> et 8 <h3> que rien ne
   visait — la remise a zero ne cite pas non plus `ol`, qui gardait donc le
   retrait de 40px du navigateur pendant que les <ul> voisines sont a fleur de
   colonne. Pire : la puce carree maison s'ajoutait au numero, chaque ligne
   commencant par « 1. [carre orange] ». */
.cms__c ol{display:grid;gap:.5rem;margin:0 0 1.15rem;padding-left:1.5rem;list-style:decimal}
.cms__c ol>li{padding-left:.3rem}
.cms__c ol>li::before{content:none}
.cms__c ol>li::marker{color:var(--brandTx);font-weight:700}
.cms__c h3{font-family:"Play",sans-serif;font-weight:400;font-size:clamp(1.08rem,.98rem+.45vw,1.3rem);
  line-height:1.25;margin:1.6rem 0 .6rem}
.cms__c h4{font-weight:700;font-size:1rem;margin:1.3rem 0 .5rem}
/* Le contenu d'une page peut porter des IMAGES — « Notre histoire » en a
   deux. Sans regle, elles sortaient a leur taille naturelle (plus de 1000 px
   de large dans une colonne de 700) et debordaient de la colonne. height:auto
   pour la meme raison que partout ailleurs : l'attribut height= pose par
   l'editeur l'emporterait sinon sur le calcul du navigateur. */
.cms__c img{display:block;max-width:100%;height:auto;border-radius:var(--r);margin:1.6rem 0}
.cms__c figure{margin:1.6rem 0}
.cms__c figcaption{margin-top:.55rem;font-size:.9rem;color:var(--ink2)}
.cms__c h3:first-child,.cms__c h4:first-child{margin-top:0}
/* ── plan du site ──
   Quatre groupes, cinq niveaux d'imbrication, 52 liens. La hierarchie est la
   seule information de cette page : elle se lit au retrait et au filet, pas a
   la puce (ul{list-style:none} vaut pour tout le site). */
.pls{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2.2rem 1.8rem;
  align-items:start;margin-bottom:.5rem}
.pls__g{min-width:0}
.pls h2{font-family:"Play",sans-serif;font-weight:400;font-size:1.18rem;line-height:1.2;
  margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.pls ul{display:grid;gap:.32rem;margin:0;padding:0}
.pls li{min-width:0}
.pls a{color:var(--ink2);font-size:.92rem;line-height:1.5}
.pls a:hover{color:var(--actTx);text-decoration:underline;text-underline-offset:3px}
.pls>.pls__g>ul>li>a{color:var(--ink);font-weight:600}
.pls ul.nested{gap:.25rem;margin:.3rem 0 .6rem;padding-left:.9rem;border-left:1px solid var(--line)}

.cms__u{font-size:.88rem;color:var(--ink2);border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem}