/* =========================================================================
   BAOPOTES — feuille de style unique
   Univers enfant : arrondis généreux, blanc dominant, couleurs vives-douces
   ========================================================================= */

:root{
  /* couleurs */
  --creme:#FFFBF4;
  --blanc:#FFFFFF;
  --encre:#2E2350;
  --encre-doux:#635A85;
  --fraise:#D91E5B;
  --fraise-vif:#FF5D8F;
  --fraise-ombre:#A81146;
  --mangue:#FFA92E;
  --mangue-ombre:#E08A0B;
  --ciel:#35B4E0;
  --menthe:#3FC08C;
  --myrtille:#6B46E0;

  --rose-pale:#FFE7EF;
  --jaune-pale:#FFF3D6;
  --ciel-pale:#E1F5FD;
  --menthe-pale:#DFF7EC;
  --violet-pale:#EEE9FF;

  --trait:#F0E7DC;

  /* rayons */
  --r-xs:12px; --r-sm:18px; --r-md:26px; --r-lg:34px; --r-xl:44px; --r-pill:999px;

  /* ombres douces et colorées */
  --om-1:0 10px 24px -12px rgba(46,35,80,.28);
  --om-2:0 22px 44px -22px rgba(46,35,80,.34);
  --om-rose:0 22px 40px -22px rgba(217,30,91,.45);
  --om-mangue:0 22px 40px -22px rgba(224,138,11,.45);

  --max:1180px;
  --gap:clamp(18px,3.4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--fraise);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--fraise-ombre)}

h1,h2,h3,h4,.display{
  font-family:'Baloo 2',ui-rounded,'Segoe UI',system-ui,sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--encre);
}
h1{font-size:clamp(2.1rem,6.4vw,3.7rem)}
h2{font-size:clamp(1.65rem,4.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2.6vw,1.5rem)}
p{margin:0 0 1em}
.lead{font-size:clamp(1.02rem,2.2vw,1.22rem);color:var(--encre-doux);font-weight:600}
small,.small{font-size:.86rem;line-height:1.55}
.muted{color:var(--encre-doux)}
ul{padding-left:1.15em}
li{margin:.28em 0}

/* accessibilité --------------------------------------------------------- */
:focus-visible{
  outline:4px solid var(--myrtille);
  outline-offset:3px;
  border-radius:8px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:#fff;padding:14px 20px;border-radius:0 0 var(--r-sm) 0;
  font-weight:800;
}
.skip:focus{left:0}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* structure ------------------------------------------------------------- */
.wrap{width:min(100% - 32px,var(--max));margin-inline:auto}
.section{padding:clamp(46px,7vw,86px) 0;position:relative}
.section--pale{background:var(--blanc)}
.center{text-align:center}
.stack>*+*{margin-top:14px}

/* décor : blobs CSS ----------------------------------------------------- */
.blob{position:absolute;border-radius:50%;filter:blur(2px);z-index:0;pointer-events:none}
.blob--rose{background:var(--rose-pale)}
.blob--jaune{background:var(--jaune-pale)}
.blob--ciel{background:var(--ciel-pale)}
.blob--menthe{background:var(--menthe-pale)}
.blob--violet{background:var(--violet-pale)}
.has-decor{position:relative;isolation:isolate}
.has-decor>*:not(.blob):not(.spark){position:relative;z-index:1}

/* étoile décorative 100% CSS */
.spark{
  position:absolute;width:var(--s,26px);aspect-ratio:1;z-index:0;pointer-events:none;
  background:var(--c,var(--mangue));
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
}

/* en-tête --------------------------------------------------------------- */
.topbar{
  background:linear-gradient(90deg,var(--fraise),var(--myrtille));
  color:#fff;font-weight:800;font-size:.86rem;text-align:center;
  padding:9px 16px;letter-spacing:.01em;
}
.topbar span{white-space:nowrap}
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,251,244,.94);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--trait);
}
.head-row{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.logo-mark{
  width:46px;height:46px;border-radius:16px;flex:0 0 auto;
  background:linear-gradient(160deg,var(--mangue),var(--fraise));
  display:grid;place-items:center;color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;line-height:1;
  box-shadow:var(--om-rose);
}
.logo-txt{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--encre);line-height:1;letter-spacing:-.02em;
}
.logo-txt em{font-style:normal;color:var(--fraise)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* bouton panier de l'en-tête */
.cart-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--encre);color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:var(--r-pill);font-weight:800;font-size:.95rem;
  box-shadow:0 5px 0 #1B1333;
  transition:transform .12s ease,box-shadow .12s ease;
}
.cart-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 7px 0 #1B1333}
.cart-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1B1333}
.cart-count{
  background:var(--mangue);color:var(--encre);border-radius:var(--r-pill);
  min-width:26px;height:26px;display:grid;place-items:center;padding:0 7px;
  font-size:.85rem;font-weight:800;
}

/* navigation : gros boutons tactiles, horizontale, scrollable en mobile */
.mainnav{border-bottom:3px solid var(--trait);background:var(--blanc)}
.mainnav ul{
  display:flex;gap:10px;list-style:none;margin:0;padding:12px 0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.mainnav ul::-webkit-scrollbar{display:none}
.mainnav a{
  display:block;white-space:nowrap;text-decoration:none;
  padding:14px 22px;border-radius:var(--r-pill);
  background:var(--creme);color:var(--encre);
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.02rem;
  border:3px solid var(--trait);
  min-height:56px;line-height:1.5;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.mainnav a:hover{background:var(--jaune-pale);border-color:var(--mangue);transform:translateY(-2px)}
.mainnav a[aria-current="page"]{
  background:var(--encre);border-color:var(--encre);color:#fff;
}
.mainnav li:nth-child(2) a:hover{background:var(--rose-pale);border-color:var(--fraise-vif)}
.mainnav li:nth-child(3) a:hover{background:var(--ciel-pale);border-color:var(--ciel)}
.mainnav li:nth-child(4) a:hover{background:var(--menthe-pale);border-color:var(--menthe)}
.mainnav li:nth-child(5) a:hover{background:var(--violet-pale);border-color:var(--myrtille)}

/* boutons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.12rem;
  padding:17px 30px;min-height:60px;
  border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;
  background:var(--fraise);color:#fff;
  box-shadow:0 6px 0 var(--fraise-ombre);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease;
  text-align:center;
}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 0 var(--fraise-ombre)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--fraise-ombre)}
.btn--jaune{background:var(--mangue);color:var(--encre);box-shadow:0 6px 0 var(--mangue-ombre)}
.btn--jaune:hover,.btn--jaune:active{color:var(--encre);box-shadow:0 8px 0 var(--mangue-ombre)}
.btn--jaune:active{box-shadow:0 2px 0 var(--mangue-ombre)}
.btn--ghost{
  background:var(--blanc);color:var(--encre);
  box-shadow:0 6px 0 var(--trait);border:3px solid var(--trait);
}
.btn--ghost:hover{color:var(--encre);background:var(--creme);box-shadow:0 8px 0 var(--trait)}
.btn--ghost:active{box-shadow:0 2px 0 var(--trait)}
.btn--sm{font-size:1rem;padding:12px 20px;min-height:48px}
.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* pastilles / chips ------------------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blanc);border:3px solid var(--trait);
  border-radius:var(--r-pill);padding:9px 16px;
  font-weight:800;font-size:.9rem;color:var(--encre);
}
.chip--rose{background:var(--rose-pale);border-color:#FFC9DA}
.chip--jaune{background:var(--jaune-pale);border-color:#FFE3A8}
.chip--ciel{background:var(--ciel-pale);border-color:#BCE7F8}
.chip--menthe{background:var(--menthe-pale);border-color:#B6EBD4}
.chip--violet{background:var(--violet-pale);border-color:#D6CCFF}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.chip-row li{margin:0}

.tag{
  display:inline-block;font-weight:800;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--jaune-pale);color:#7A4A00;
}
.tag--rose{background:var(--rose-pale);color:#9C1041}
.tag--violet{background:var(--violet-pale);color:#4A2BB0}
.tag--menthe{background:var(--menthe-pale);color:#0F6B4B}

/* cartes ----------------------------------------------------------------- */
.card{
  background:var(--blanc);border-radius:var(--r-lg);
  box-shadow:var(--om-2);padding:clamp(20px,3.2vw,30px);
}
.card--flat{box-shadow:var(--om-1)}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* héros ------------------------------------------------------------------ */
.hero{padding:clamp(30px,5vw,64px) 0 clamp(40px,6vw,80px);position:relative;overflow:hidden}
.hero-grid{display:grid;gap:clamp(24px,4vw,50px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:.35em}
.hero h1 .surligne{
  background:linear-gradient(180deg,transparent 62%,var(--jaune-pale) 62%,var(--jaune-pale) 94%,transparent 94%);
  padding-inline:2px;
}
.hero-art{position:relative}
.hero-art img{
  border-radius:var(--r-xl);box-shadow:var(--om-2);
  border:6px solid var(--blanc);
}
.hero-mini{
  position:absolute;width:clamp(78px,17vw,124px);aspect-ratio:1;border-radius:50%;
  border:5px solid var(--blanc);object-fit:cover;box-shadow:var(--om-2);
  background:var(--blanc);
}
.hero-mini--1{left:-10px;bottom:16%;animation:flotte 5.5s ease-in-out infinite}
.hero-mini--2{right:-8px;top:8%;animation:flotte 6.8s ease-in-out .8s infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.prix-bloc{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.prix{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(2rem,5.6vw,2.7rem);color:var(--fraise);line-height:1}
.prix-barre{font-size:1.15rem;color:var(--encre-doux);text-decoration:line-through;font-weight:700}
.prix-eco{
  background:var(--menthe-pale);color:#0F6B4B;border-radius:var(--r-pill);
  padding:5px 13px;font-weight:800;font-size:.86rem;
}

/* bandeau défilant ------------------------------------------------------- */
.ruban{
  background:var(--encre);color:#fff;overflow:hidden;padding:13px 0;
}
.ruban-piste{
  display:flex;gap:0;width:max-content;animation:defile 26s linear infinite;
}
.ruban-piste span{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;
  padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;gap:26px;
}
.ruban-piste span::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--mangue)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* étapes ----------------------------------------------------------------- */
.etape{
  background:var(--blanc);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);
  box-shadow:var(--om-2);position:relative;padding-top:44px;height:100%;
}
.etape-num{
  position:absolute;top:-24px;left:24px;
  width:56px;height:56px;border-radius:20px;display:grid;place-items:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.6rem;color:#fff;
  background:var(--fraise);box-shadow:0 5px 0 var(--fraise-ombre);
}
.etape:nth-child(2) .etape-num{background:var(--mangue);color:var(--encre);box-shadow:0 5px 0 var(--mangue-ombre)}
.etape:nth-child(3) .etape-num{background:var(--ciel);color:var(--encre);box-shadow:0 5px 0 #1387B3}
.etape:nth-child(4) .etape-num{background:var(--menthe);color:var(--encre);box-shadow:0 5px 0 #179165}
.etapes{margin-top:34px}

/* personnages ------------------------------------------------------------ */
.perso{
  background:var(--blanc);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--om-2);display:flex;flex-direction:column;height:100%;
  transition:transform .16s ease,box-shadow .16s ease;
}
.perso:hover{transform:translateY(-5px);box-shadow:0 28px 50px -24px rgba(46,35,80,.42)}
.perso-vign{aspect-ratio:1;background:var(--creme);position:relative;overflow:hidden}
.perso-vign img{width:100%;height:100%;object-fit:cover}
.perso-vign--rose{background:var(--rose-pale)}
.perso-vign--jaune{background:var(--jaune-pale)}
.perso-vign--ciel{background:var(--ciel-pale)}
.perso-vign--menthe{background:var(--menthe-pale)}
.perso-vign--violet{background:var(--violet-pale)}
.perso-corps{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.perso-nom{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.28rem;line-height:1.15}
.perso-desc{font-size:.92rem;color:var(--encre-doux);margin:0}
.perso-pastille{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--blanc);border-radius:var(--r-pill);padding:5px 12px;
  font-weight:800;font-size:.76rem;box-shadow:var(--om-1);
}

/* carte mystère (rare) : 100% CSS ---------------------------------------- */
.perso--rare .perso-vign{
  background:
    radial-gradient(120% 90% at 50% 12%,rgba(255,255,255,.35),transparent 60%),
    linear-gradient(150deg,var(--myrtille),#3C2A8C 55%,#221862);
  display:grid;place-items:center;
}
.silhouette{
  width:64%;aspect-ratio:1.22;
  background:rgba(255,255,255,.17);
  border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  position:relative;display:grid;place-items:center;
  box-shadow:inset 0 -12px 26px rgba(0,0,0,.22);
}
.silhouette::before{
  content:"";position:absolute;bottom:-13%;width:86%;height:26%;
  background:rgba(255,255,255,.13);border-radius:0 0 40% 40%/0 0 100% 100%;
}
.silhouette span{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:2.6rem;color:#fff;
  text-shadow:0 3px 12px rgba(0,0,0,.3);
}
.perso--rare .etoiles{position:absolute;inset:0;pointer-events:none}
.perso--rare .etoiles i{
  position:absolute;display:block;width:14px;aspect-ratio:1;background:#fff;opacity:.85;
  clip-path:polygon(50% 0%,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0% 50%,42% 42%);
}
.perso--rare .etoiles i:nth-child(1){top:12%;left:14%;width:18px}
.perso--rare .etoiles i:nth-child(2){top:22%;right:16%;width:12px;opacity:.65}
.perso--rare .etoiles i:nth-child(3){bottom:16%;left:22%;width:11px;opacity:.55}
.perso--rare .etoiles i:nth-child(4){bottom:24%;right:13%;width:16px;opacity:.75}
.perso--rare .perso-corps{background:linear-gradient(180deg,var(--violet-pale),var(--blanc) 70%)}

/* tableau ---------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);box-shadow:var(--om-1);background:var(--blanc)}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--blanc)}
caption{text-align:left;padding:16px 18px 0;font-weight:800;color:var(--encre-doux);font-size:.92rem}
th,td{padding:14px 18px;text-align:left;border-bottom:2px solid var(--trait);font-size:.98rem}
thead th{
  background:var(--encre);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:1rem;border-bottom:0;
}
thead th:first-child{border-top-left-radius:var(--r-md)}
thead th:last-child{border-top-right-radius:var(--r-md)}
tbody tr:last-child td{border-bottom:0}
tbody tr.est-mieux{background:var(--jaune-pale)}
td b{color:var(--fraise)}

/* FAQ -------------------------------------------------------------------- */
.faq{display:grid;gap:14px}
details.qa{
  background:var(--blanc);border-radius:var(--r-md);box-shadow:var(--om-1);
  border:3px solid var(--trait);overflow:hidden;
}
details.qa[open]{border-color:var(--mangue)}
details.qa summary{
  cursor:pointer;list-style:none;padding:20px 56px 20px 22px;position:relative;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.1rem;min-height:60px;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--jaune-pale);color:var(--encre);
  display:grid;place-items:center;font-size:1.5rem;line-height:1;font-weight:700;
}
details.qa[open] summary::after{content:"–";background:var(--mangue)}
details.qa .qa-corps{padding:0 22px 22px}
details.qa .qa-corps p:last-child{margin-bottom:0}

/* encadrés --------------------------------------------------------------- */
.encart{
  border-radius:var(--r-md);padding:20px 22px;background:var(--ciel-pale);
  border:3px solid #BCE7F8;
}
.encart--jaune{background:var(--jaune-pale);border-color:#FFE3A8}
.encart--rose{background:var(--rose-pale);border-color:#FFC9DA}
.encart--menthe{background:var(--menthe-pale);border-color:#B6EBD4}
.encart--violet{background:var(--violet-pale);border-color:#D6CCFF}
.encart h3{margin-bottom:.3em}
.encart p:last-child{margin-bottom:0}

/* produit ---------------------------------------------------------------- */
.produit-grid{display:grid;gap:clamp(24px,4vw,46px);grid-template-columns:1fr}
@media(min-width:900px){.produit-grid{grid-template-columns:1fr 1fr;align-items:start}}
.galerie-principale{
  border-radius:var(--r-xl);overflow:hidden;background:var(--blanc);
  box-shadow:var(--om-2);border:6px solid var(--blanc);
}
.galerie-principale img{width:100%;aspect-ratio:1;object-fit:cover}
.vignettes{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.vignettes button{
  width:74px;height:74px;padding:0;border-radius:var(--r-sm);overflow:hidden;
  border:4px solid var(--trait);background:var(--blanc);cursor:pointer;
}
.vignettes button[aria-current="true"]{border-color:var(--fraise)}
.vignettes img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.produit-achat{position:sticky;top:96px}}

/* quantité --------------------------------------------------------------- */
.qte{
  display:inline-flex;align-items:center;gap:6px;background:var(--blanc);
  border:3px solid var(--trait);border-radius:var(--r-pill);padding:6px;
}
.qte button{
  width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
  background:var(--creme);color:var(--encre);
  font-family:'Baloo 2',sans-serif;font-size:1.6rem;line-height:1;font-weight:700;
  display:grid;place-items:center;transition:background .15s ease;
}
.qte button:hover{background:var(--jaune-pale)}
.qte button:disabled{opacity:.4;cursor:not-allowed}
.qte output,.qte .val{
  min-width:52px;text-align:center;font-family:'Baloo 2',sans-serif;
  font-weight:800;font-size:1.4rem;
}

/* choix de lot (fiche produit) */
.lots{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.lot{
  display:flex;align-items:center;gap:14px;background:var(--blanc);
  border:3px solid var(--trait);border-radius:var(--r-md);padding:14px 16px;
  cursor:pointer;transition:border-color .14s ease,background .14s ease;
  position:relative;
}
.lot:hover{border-color:var(--mangue);background:var(--jaune-pale)}
.lot input{
  appearance:none;width:26px;height:26px;border-radius:50%;border:3px solid var(--trait);
  margin:0;flex:0 0 auto;background:var(--blanc);cursor:pointer;
}
.lot input:checked{border-color:var(--fraise);background:radial-gradient(circle,var(--fraise) 44%,#fff 46%)}
.lot:has(input:checked){border-color:var(--fraise);background:var(--rose-pale)}
.lot-txt{flex:1;min-width:0}
.lot-nom{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.08rem;display:block}
.lot-sous{font-size:.86rem;color:var(--encre-doux);display:block}
.lot-prix{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;text-align:right;white-space:nowrap}
.lot-eco{display:block;font-size:.78rem;color:#0F6B4B;font-weight:800}

/* barre de progression remise -------------------------------------------- */
.jauge{margin:18px 0}
.jauge-piste{height:16px;border-radius:var(--r-pill);background:var(--trait);overflow:hidden}
.jauge-fill{
  height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--mangue),var(--fraise));
  transition:width .35s ease;
}

/* panier ----------------------------------------------------------------- */
.panier-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:900px){.panier-grid{grid-template-columns:1.35fr .85fr;align-items:start}}
.ligne{
  display:grid;gap:16px;grid-template-columns:96px 1fr;align-items:center;
  background:var(--blanc);border-radius:var(--r-md);padding:16px;box-shadow:var(--om-1);
}
@media(min-width:620px){.ligne{grid-template-columns:110px 1fr auto}}
.ligne img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm)}
.ligne-nom{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;margin:0}
.ligne-prix{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.25rem;white-space:nowrap}
.recap{background:var(--blanc);border-radius:var(--r-lg);box-shadow:var(--om-2);padding:clamp(20px,3vw,28px)}
@media(min-width:900px){.recap{position:sticky;top:96px}}
.recap-ligne{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-weight:700}
.recap-ligne--total{
  border-top:3px solid var(--trait);margin-top:8px;padding-top:16px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.4rem;
}
.recap-ligne .vert{color:#0F6B4B}
.champ{display:block;margin-bottom:14px}
.champ span{display:block;font-weight:800;margin-bottom:6px;font-size:.95rem}
.champ input,.champ textarea,.champ select{
  width:100%;padding:15px 17px;border-radius:var(--r-sm);border:3px solid var(--trait);
  background:var(--blanc);font:inherit;font-weight:600;color:var(--encre);min-height:56px;
}
.champ input:focus,.champ textarea:focus{border-color:var(--mangue)}
.champ small{color:var(--encre-doux);display:block;margin-top:5px}
.promo-row{display:flex;gap:10px;flex-wrap:wrap}
.promo-row input{flex:1;min-width:150px;text-transform:uppercase}
.msg{
  margin-top:12px;border-radius:var(--r-sm);padding:13px 16px;font-weight:700;font-size:.94rem;
}
.msg--ok{background:var(--menthe-pale);color:#0F6B4B}
.msg--ko{background:var(--rose-pale);color:#9C1041}
.msg--info{background:var(--ciel-pale);color:#0B4E68}
.vide{text-align:center;padding:clamp(30px,6vw,60px) 20px}

/* fil d'ariane ------------------------------------------------------------ */
.fil{font-size:.88rem;font-weight:700;color:var(--encre-doux);padding:16px 0 0}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.fil li+li::before{content:"›";margin-right:8px;color:var(--trait)}

/* pied de page ------------------------------------------------------------ */
.site-foot{background:var(--encre);color:#EDE9F7;margin-top:clamp(40px,6vw,80px);padding:clamp(38px,5vw,60px) 0 26px}
.site-foot h3{color:#fff;font-size:1.15rem;margin-bottom:.55em}
.site-foot a{color:#FFD59B;font-weight:700}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{margin:.4em 0}
.foot-bas{
  border-top:2px solid rgba(255,255,255,.16);margin-top:32px;padding-top:20px;
  font-size:.84rem;color:#C6BEE0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-logo .logo-txt{color:#fff}
.foot-logo .logo-txt em{color:var(--mangue)}

/* infos légales ----------------------------------------------------------- */
.legal h2{margin-top:1.6em;scroll-margin-top:120px}
.legal h3{margin-top:1.3em;font-size:1.15rem}
.legal .card{margin-bottom:20px}
.ancres{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 30px}
.ancres a{
  display:block;text-decoration:none;background:var(--blanc);border:3px solid var(--trait);
  border-radius:var(--r-pill);padding:11px 18px;font-weight:800;color:var(--encre);font-size:.92rem;
}
.ancres a:hover{border-color:var(--mangue);background:var(--jaune-pale)}

/* utilitaires ------------------------------------------------------------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.hr{height:3px;background:var(--trait);border:0;border-radius:2px;margin:34px 0}
.nowrap{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .hero-mini{animation:none}
}