/* =========================================================
   1. TOKENS
   ========================================================= */
:root{
  --vert:#0F4D3A;
  --vert-clair:#16624A;
  --orange:#FF6A1A;
  --orange-fonce:#E0550A;
  --bleu:#2F5F95;
  --encre:#1A1F24;

  --fond:#FFFFFF;
  --surface:#F1F3F2;
  --texte:#1A1F24;
  --doux:#5C666F;
  --trait:#E1E5E8;
  --tint-foot:#DCE9E2;
  --tint-muscu:#E4E7EB;
  --tint-hiver:#DCE5F0;
  --tint-pack:#FFE3D3;

  --font:"Archivo","Arial Narrow",Arial,Helvetica,sans-serif;
  --rayon:14px;
  --max:1320px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#13171A; --surface:#1C2226; --texte:#EEF2F4; --doux:#A2AEB7; --trait:#2B3339;
    --tint-foot:#1D352C; --tint-muscu:#252B31; --tint-hiver:#1E2B3B; --tint-pack:#3A2419;
  }
}
:root[data-theme="dark"]{
  --fond:#13171A; --surface:#1C2226; --texte:#EEF2F4; --doux:#A2AEB7; --trait:#2B3339;
  --tint-foot:#1D352C; --tint-muscu:#252B31; --tint-hiver:#1E2B3B; --tint-pack:#3A2419;
}

/* =========================================================
   2. BASE
   ========================================================= */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 110px)}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{max-width:var(--max);margin:0 auto;padding:0 24px}
.titre-xl,.titre-l,.titre-m{font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.titre-xl{font-size:clamp(52px,9vw,128px);line-height:.86;font-variation-settings:"wdth" 62}
.titre-l{font-size:clamp(34px,5vw,60px);line-height:.92;font-variation-settings:"wdth" 66}
.titre-m{font-size:clamp(24px,3vw,32px);line-height:1;font-variation-settings:"wdth" 72}
.texte-doux{color:var(--doux)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 26px;font-weight:800;font-size:16px;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn--plein{background:var(--texte);color:var(--fond)}
.btn--plein:hover{background:var(--orange);color:#fff}
.btn--orange{background:var(--orange);color:#fff}
.btn--orange:hover{background:var(--orange-fonce)}
.btn--clair{background:#fff;color:var(--encre)}
.btn--contour{border-color:currentColor;background:transparent}
.btn--large{width:100%;padding:17px 26px;font-size:17px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* =========================================================
   3. EN-TÊTE
   ========================================================= */
.annonce{background:var(--encre);color:#fff;font-size:14px;font-weight:600;text-align:center;padding:9px 16px;min-height:38px}
.annonce b{color:var(--orange)}
.entete{position:sticky;top:0;z-index:30;background:var(--fond);border-bottom:1px solid var(--trait)}
.entete__barre{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:24px;font-variation-settings:"wdth" 68;letter-spacing:-.01em;text-transform:uppercase}
.logo svg{width:30px;height:30px;flex:none}
.nav{display:flex;justify-content:center;gap:4px}
.nav a{padding:10px 14px;border-radius:999px;font-weight:700;font-size:15px}
.nav a:hover{background:var(--surface)}
.nav a[aria-current="page"]{background:var(--texte);color:var(--fond)}
.actions{display:flex;align-items:center;gap:4px}
.icone-btn{width:44px;height:44px;border-radius:50%;border:0;background:none;display:grid;place-items:center;position:relative}
.icone-btn:hover{background:var(--surface)}
.icone-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pastille{position:absolute;top:4px;right:2px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.pastille[hidden]{display:none}
.burger{display:none}
.menu-mobile{display:none;border-top:1px solid var(--trait);padding:8px 24px 20px}
.menu-mobile a{display:block;padding:14px 0;font-weight:800;font-size:22px;font-variation-settings:"wdth" 75;border-bottom:1px solid var(--trait)}
.menu-mobile.ouvert{display:block}

/* =========================================================
   4. ACCUEIL
   ========================================================= */
.hero{background:var(--vert);color:#F4F7F2;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 90px,rgba(255,255,255,.04) 90px 180px);pointer-events:none}
.hero__grille{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding-top:80px;padding-bottom:88px}
.hero__texte p{font-size:19px;max-width:36ch;margin:26px 0 34px;color:#D3E4DB}
.hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn--contour{color:#F4F7F2}
.hero .btn--contour:hover{background:#F4F7F2;color:var(--vert)}
.terrain{width:100%;height:auto;max-height:540px}
.terrain .ligne{fill:none;stroke:#F4F7F2;stroke-width:3;opacity:.85}
.terrain .ballon{animation:rouler 1.5s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes rouler{from{transform:translate(-170px,170px) rotate(-260deg);opacity:0}to{transform:none;opacity:1}}

.section{padding:80px 0}
.section--serre{padding-top:0}
.section__tete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.section__tete p{margin:10px 0 0;max-width:56ch}
.lien-fleche{font-weight:800;border-bottom:2px solid currentColor;padding-bottom:2px}

.univers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.univers__tuile{position:relative;border-radius:var(--rayon);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:space-between;padding:28px;color:#fff}
.univers__tuile--foot{background:var(--vert)}
.univers__tuile--muscu{background:#2A343D}
.univers__tuile--hiver{background:var(--bleu)}
.univers__tuile svg{width:78%;max-width:260px;align-self:center;margin:12px 0}
.univers__tuile p{margin:8px 0 18px;max-width:30ch;color:rgba(255,255,255,.85)}
.univers__tuile .btn{align-self:flex-start}
.univers__tuile:hover .btn{background:var(--orange);color:#fff}

/* Rail produits */
.rail{position:relative}
.rail__piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.rail__piste > *{scroll-snap-align:start}
.rail__fleches{display:flex;gap:8px}
.rail__fleches button{width:44px;height:44px;border-radius:50%;border:2px solid var(--trait);background:var(--fond);display:grid;place-items:center}
.rail__fleches button:hover{border-color:var(--texte)}
.rail__fleches svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5}

/* Carte produit */
.carte{display:flex;flex-direction:column;gap:12px}
.carte__visuel{aspect-ratio:1/1;border-radius:var(--rayon);display:grid;place-items:center;position:relative;overflow:hidden}
.carte__visuel svg{width:72%;height:72%;transition:transform .35s ease}
.carte:hover .carte__visuel svg{transform:scale(1.05)}
.carte__badge{position:absolute;top:14px;left:14px;background:var(--fond);color:var(--texte);font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px}
.carte__nom{font-weight:800;font-size:18px;line-height:1.2;margin:0}
.carte__cat{color:var(--doux);font-size:15px;margin:2px 0 0}
.carte__bas{display:flex;justify-content:space-between;align-items:center}
.carte__prix{font-weight:800;font-size:17px}
.pastilles-couleur{display:flex;gap:5px}
.pastilles-couleur span{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.tint-foot{background:var(--tint-foot)}
.tint-muscu{background:var(--tint-muscu)}
.tint-hiver{background:var(--tint-hiver)}
.tint-pack{background:var(--tint-pack)}

/* Bannière Noël */
.banniere{background:var(--orange);color:#fff;border-radius:var(--rayon);display:grid;grid-template-columns:1fr auto;align-items:center;gap:32px;padding:48px;overflow:hidden;position:relative}
.banniere p{font-size:18px;max-width:50ch;margin:14px 0 26px}
.banniere__prix{font-weight:900;font-size:clamp(64px,9vw,120px);line-height:.85;font-variation-settings:"wdth" 62;text-align:right}
.banniere__prix small{display:block;font-size:17px;font-weight:700;font-variation-settings:"wdth" 100;margin-top:10px}

/* Clubs */
.clubs{background:var(--encre);color:#fff}
.clubs__grille{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.clubs p{color:#C6CED4;font-size:18px;max-width:46ch;margin:18px 0 28px}
.clubs__chiffres{display:grid;gap:14px}
.clubs__ligne{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #333B42;padding-bottom:14px;gap:16px}
.clubs__ligne strong{font-size:20px}
.clubs__ligne span{color:#C6CED4}

/* Engagements */
.engagements{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.engagement svg{width:34px;height:34px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.engagement h3{margin:0 0 6px;font-size:19px}
.engagement p{margin:0;color:var(--doux)}

/* =========================================================
   5. CATALOGUE
   ========================================================= */
.cat-hero{padding:56px 0 32px;border-bottom:1px solid var(--trait)}
.cat-hero p{max-width:58ch;margin:14px 0 0}
.fil{font-size:14px;color:var(--doux);margin-bottom:14px}
.fil a:hover{color:var(--texte);text-decoration:underline}
.outils{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0}
.filtres{display:flex;gap:8px;flex-wrap:wrap}
.filtre{border:2px solid var(--trait);background:var(--fond);padding:8px 16px;border-radius:999px;font-weight:700;font-size:15px}
.filtre:hover{border-color:var(--texte)}
.filtre[aria-current="true"]{background:var(--texte);border-color:var(--texte);color:var(--fond)}
.tri{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--doux)}
.tri select{border:2px solid var(--trait);background:var(--fond);border-radius:999px;padding:8px 14px;font-weight:700;color:var(--texte)}
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:36px 18px;padding-bottom:80px}

/* =========================================================
   6. FICHE PRODUIT
   ========================================================= */
.fiche{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;padding:32px 0 80px;align-items:start}
.fiche__visuel{aspect-ratio:1/1;border-radius:var(--rayon);display:grid;place-items:center;position:sticky;top:100px}
.fiche__visuel svg{width:70%;height:70%}
.fiche__info h1{margin:6px 0 10px}
.fiche__prix{font-size:24px;font-weight:800;margin:0 0 18px}
.fiche__accroche{font-size:18px;margin:0 0 28px}
.option{border:0;padding:0;margin:0 0 24px}
.option legend{font-weight:800;margin-bottom:10px;padding:0}
.option legend span{font-weight:500;color:var(--doux)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{min-width:60px;text-align:center;padding:12px 16px;border:2px solid var(--trait);border-radius:10px;font-weight:700;cursor:pointer}
.choix label:hover{border-color:var(--doux)}
.choix input:checked + label{border-color:var(--texte);background:var(--texte);color:var(--fond)}
.choix input:focus-visible + label{outline:3px solid var(--orange);outline-offset:2px}
.choix--couleur label{width:46px;height:46px;min-width:0;padding:0;border-radius:50%;border:2px solid var(--trait);position:relative}
.choix--couleur label span{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.choix--couleur input:checked + label{background:transparent;border-color:var(--texte)}
.quantite{display:inline-flex;align-items:center;border:2px solid var(--trait);border-radius:999px;margin-bottom:22px}
.quantite button{width:46px;height:46px;border:0;background:none;font-size:20px}
.quantite output{min-width:34px;text-align:center;font-weight:800}
.fiche__note{font-size:14px;color:var(--doux);margin:14px 0 30px}
.fiche__erreur{color:var(--orange-fonce);font-weight:700;min-height:1.5em;margin:10px 0 0}
.accordeon{border-top:1px solid var(--trait)}
.accordeon details{border-bottom:1px solid var(--trait)}
.accordeon summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:800;font-size:18px;cursor:pointer}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:"+";font-size:26px;font-weight:400;line-height:1}
.accordeon details[open] summary::after{content:"−"}
.accordeon .contenu{padding:0 0 22px;color:var(--doux)}
.accordeon ul{margin:0;padding-left:20px}

/* =========================================================
   7. PAGES DE CONTENU ET FORMULAIRES
   ========================================================= */
.page{max-width:780px;padding:56px 0 90px}
.page h2{font-size:24px;margin:40px 0 10px}
.page p,.page li{color:var(--doux)}
.a-completer{background:var(--tint-pack);color:var(--texte);padding:1px 6px;border-radius:4px;font-weight:700}
.formulaire{display:grid;gap:16px;margin-top:28px}
.formulaire .deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:grid;gap:6px;font-weight:700;font-size:15px}
.champ input,.champ select,.champ textarea{border:2px solid var(--trait);background:var(--fond);border-radius:10px;padding:12px 14px;font-weight:500}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--texte);outline:none}
.cases{display:flex;flex-wrap:wrap;gap:8px}
.cases label{display:flex;align-items:center;gap:8px;border:2px solid var(--trait);border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.statut{min-height:1.5em;font-weight:700;color:var(--orange-fonce);margin:0}

/* =========================================================
   8. RECHERCHE
   ========================================================= */
.voile{position:fixed;inset:0;background:rgba(8,12,15,.55);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.voile.visible{opacity:1;pointer-events:auto}
.recherche{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--fond);border-bottom:1px solid var(--trait);transform:translateY(-105%);transition:transform .22s ease;padding-top:env(safe-area-inset-top,0px);max-height:85vh;overflow:auto}
.recherche.ouvert{transform:none}
.recherche__barre{display:flex;gap:12px;align-items:center;padding:18px 0}
.recherche__barre input{flex:1;border:0;border-bottom:2px solid var(--texte);background:none;font-size:clamp(22px,3vw,30px);font-weight:700;padding:8px 0;outline:none}
.recherche__resultats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:10px 0 32px}

/* =========================================================
   9. PIED DE PAGE
   ========================================================= */
.pied{background:var(--encre);color:#C6CED4;padding:64px 0 36px;font-size:15px}
.pied__grille{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.pied h2{color:#fff;font-size:16px;margin:0 0 14px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pied a:hover{color:#fff}
.pied .logo{color:#fff;margin-bottom:14px}
.pied__bas{margin-top:48px;padding-top:22px;border-top:1px solid #333B42;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#8A97A1}

/* =========================================================
   10. RESPONSIVE ET MOUVEMENT
   ========================================================= */
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:grid}
  .entete__barre{grid-template-columns:auto 1fr auto;gap:8px}
  .logo{justify-self:start}
  .univers{grid-template-columns:1fr}
  .univers__tuile{min-height:320px;display:grid;grid-template-columns:1fr auto;align-items:end}
  .univers__tuile svg{width:150px;grid-row:1 / span 3;grid-column:2}
  .fiche{grid-template-columns:1fr;gap:28px}
  .fiche__visuel{position:static}
  .clubs__grille,.hero__grille{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .conteneur{padding:0 18px}
  .hero__grille{padding-top:48px;padding-bottom:56px;gap:20px}
  .terrain{max-height:240px}
  .section{padding:56px 0}
  .banniere{grid-template-columns:1fr;padding:30px}
  .banniere__prix{text-align:left}
  .engagements{grid-template-columns:1fr}
  .univers__tuile{grid-template-columns:1fr}
  .univers__tuile svg{grid-row:auto;grid-column:auto;width:120px;justify-self:end}
  .formulaire .deux{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr}
  .grille-produits{grid-template-columns:repeat(2,1fr);gap:28px 12px}
  .carte__nom{font-size:16px}
  .rail__piste{grid-auto-columns:72%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =========================================================
   11. GALERIE, VUE 360 ET ACHAT
   ========================================================= */
.galerie{position:sticky;top:100px;display:grid;gap:12px}
.galerie .fiche__visuel{position:relative;top:auto}
.galerie__principal img{width:100%;height:100%;object-fit:contain;border-radius:var(--rayon)}
.galerie__vignettes{display:flex;gap:10px;overflow-x:auto}
.vignette{width:76px;height:76px;flex:none;border-radius:10px;border:2px solid transparent;padding:0;display:grid;place-items:center;overflow:hidden;background:var(--surface);font-weight:800;font-size:14px}
.vignette svg,.vignette img{width:80%;height:80%;object-fit:contain}
.vignette[aria-current="true"]{border-color:var(--texte)}
.vue360{width:100%;height:100%;display:grid;place-items:center;cursor:grab;touch-action:pan-y;user-select:none;position:relative}
.vue360:active{cursor:grabbing}
.vue360 img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.vue360__aide{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--fond);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;display:flex;gap:10px;align-items:center}
.vue360__aide button{border:0;background:none;font-size:18px;line-height:1;padding:2px 4px}
.reassurance{list-style:none;padding:0;margin:18px 0 30px;display:grid;gap:10px;font-size:15px}
.reassurance li{display:flex;gap:10px;align-items:center}
.reassurance svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--vert-clair);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-acheter small{font-weight:600;opacity:.8}

/* Barre d'achat collante (mobile) */
.barre-achat{display:none}

/* Barre de navigation du bas (mobile, façon appli) */
.nav-bas{display:none}

@media (max-width:1000px){
  .galerie{position:static}
}
@media (max-width:640px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.avec-achat{padding-bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  .nav-bas{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--fond);border-top:1px solid var(--trait);padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-bas a,.nav-bas button{display:grid;justify-items:center;gap:3px;padding:9px 0 8px;font-size:11px;font-weight:700;color:var(--doux);background:none;border:0}
  .nav-bas svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nav-bas [aria-current="page"]{color:var(--texte)}
  .nav-bas [aria-current="page"] svg{stroke:var(--orange)}
  .barre-achat{display:flex;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:34;background:var(--fond);border-top:1px solid var(--trait);padding:10px 18px;gap:12px;align-items:center}
  .barre-achat[hidden]{display:none}
  .barre-achat strong{font-size:20px;white-space:nowrap}
  .barre-achat .btn{flex:1;padding:14px 18px}
  .burger{display:none}
  .pied{padding-bottom:28px}
}

/* Lumière de studio derrière les produits */
.carte__visuel,.fiche__visuel,.article__visuel,.vignette{background-image:radial-gradient(circle at 50% 38%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%)}
.carte__visuel img,.fiche__visuel img{width:100%;height:100%;object-fit:cover;border-radius:var(--rayon)}
.vignette img{width:100%;height:100%;object-fit:cover}
.carte__visuel:has(img),.fiche__visuel:has(img){background:#fff}

/* 5 univers */
.univers{grid-template-columns:repeat(5,1fr)}
.univers__tuile{min-height:400px;padding:24px}
.univers__tuile h3.titre-l{font-size:clamp(26px,2.3vw,36px)}
.univers__tuile p{font-size:15px}
.univers__tuile--recup{background:#0B5563}
.univers__tuile--vetements{background:#E0550A}
@media (max-width:1180px){.univers{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.univers{grid-template-columns:1fr}}
.univers__tuile--photo{background-size:cover;background-position:center;justify-content:space-between}
.univers__tuile--photo > div{order:0}
.univers__tuile--photo .btn{margin-top:auto}
@media (max-width:1000px){.univers__tuile--photo{display:flex;flex-direction:column;justify-content:flex-end;gap:14px}}

/* =========================================================
   12. BANDEAU CONFIANCE, PANIER, FILTRES, GUIDE DES TAILLES
   ========================================================= */
.confiance{background:var(--surface);border-bottom:1px solid var(--trait);font-size:14px;font-weight:600}
.confiance__barre{display:flex;justify-content:center;gap:36px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.confiance span{display:flex;align-items:center;gap:8px}
.confiance svg{width:18px;height:18px;fill:none;stroke:var(--vert-clair);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.confiance__barre{gap:6px 16px;font-size:12.5px;justify-content:flex-start}.confiance span:nth-child(2){display:none}}

.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--fond);z-index:50;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tiroir.ouvert{transform:none}
.tiroir__tete{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--trait)}
.tiroir__corps{flex:1;overflow:auto;padding:4px 22px 16px}
.tiroir__pied{border-top:1px solid var(--trait);padding:16px 22px 20px;display:grid;gap:8px}
.seuil{padding:12px 22px 4px}
.seuil p{margin:0 0 8px;font-size:14px}
.jauge{height:6px;border-radius:99px;background:var(--trait);overflow:hidden}
.jauge span{display:block;height:100%;background:var(--vert-clair);border-radius:99px;transition:width .3s}
.article{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--trait)}
.article__visuel{width:78px;height:78px;border-radius:10px;display:grid;place-items:center;overflow:hidden}
.article__visuel svg{width:76%;height:76%}
.article__visuel img{width:100%;height:100%;object-fit:cover}
.article h3{margin:0;font-size:15.5px;line-height:1.25}
.article p{margin:3px 0 8px;font-size:13.5px;color:var(--doux)}
.article__ligne{display:flex;justify-content:space-between;align-items:center}
.mini-qte{display:inline-flex;align-items:center;border:1px solid var(--trait);border-radius:999px}
.mini-qte button{width:32px;height:32px;border:0;background:none;font-size:17px}
.mini-qte span{min-width:24px;text-align:center;font-weight:700;font-size:14px}
.ligne-total{display:flex;justify-content:space-between;font-size:15px;color:var(--doux)}
.total{display:flex;justify-content:space-between;font-weight:900;font-size:21px;margin:2px 0 6px}
.petite-note{font-size:12.5px;color:var(--doux);margin:0}
.vide{text-align:center;padding:48px 8px;color:var(--doux)}
.vide .btn{margin-top:16px}
.suggestions{margin-top:18px}
.suggestions h3{font-size:15px;margin:0 0 6px}
.suggestion{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:8px 0}
.suggestion .article__visuel{width:56px;height:56px}
.suggestion strong{display:block;font-size:14px;line-height:1.2}
.suggestion span{font-size:13px;color:var(--doux)}
.btn--mini{padding:8px 14px;font-size:13.5px;border-width:2px}

.filtres--rayons{padding-top:20px}
.filtre--petit{font-size:14px;padding:7px 14px}
.filtre[aria-pressed="true"]{background:var(--texte);border-color:var(--texte);color:var(--fond)}
.outils__droite{display:flex;gap:14px;flex-wrap:wrap}
.compte{margin:0 0 16px;font-size:14px}

.ideal{background:var(--surface);border-radius:10px;padding:10px 14px;margin:-12px 0 24px;font-size:15px}
.achat{display:flex;gap:12px;align-items:center}
.achat .quantite{margin:0;flex:none}
.achat .btn{flex:1}
.lien-guide{background:none;border:0;padding:0;margin-left:10px;font-weight:600;font-size:14px;color:var(--doux);text-decoration:underline}

.modale{position:fixed;inset:0;z-index:60;background:rgba(8,12,15,.55);display:none;place-items:center;padding:20px}
.modale.ouvert{display:grid}
.modale__boite{background:var(--fond);border-radius:16px;width:min(620px,100%);max-height:85vh;overflow:auto}
.modale__corps{padding:8px 22px 22px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;margin:10px 0 16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--trait);white-space:nowrap}
th{background:var(--surface);font-weight:800}

.univers__produit{align-self:center;width:62%;max-width:190px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;margin:14px 0;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.univers__produit img{width:100%;height:100%;object-fit:cover}
.nav-bas__panier{position:relative}
.nav-bas__panier .pastille{top:2px;right:calc(50% - 22px)}

/* Contraste renforcé (accessibilité) */
:root{--cta:#C2410C;--cta-fonce:#9A3412;--alerte:#B53F08}
.btn--orange{background:var(--cta)}
.btn--orange:hover{background:var(--cta-fonce)}
.pastille{background:var(--cta)}
.banniere{background:var(--cta)}
.univers__tuile--vetements{background:var(--cta)}
.fiche__erreur,.statut{color:var(--alerte)}
.univers__tuile:hover .btn{background:var(--cta)}
.btn--plein:hover{background:var(--cta);color:#fff}

/* Klarna, favoris, formulaires, newsletter, accessibilité */
.reassurance .klarna{align-items:flex-start}
.reassurance .klarna small{display:block;color:var(--doux);font-size:12px;margin-top:4px;line-height:1.4}
.btn-favori{width:56px;height:56px;flex:none;border:2px solid var(--trait)}
.btn-favori svg{width:24px;height:24px}
.btn-favori[aria-pressed="true"] svg{fill:var(--cta,#C2410C);stroke:var(--cta,#C2410C)}
.statut--ok{color:var(--vert-clair)!important}
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;align-items:center;margin-top:44px;padding:26px 28px;border-radius:var(--rayon);background:#232A30}
.newsletter h2{color:#fff;font-size:20px;margin:0 0 4px}
.newsletter p{margin:0}
.newsletter__champ{display:flex;gap:10px}
.newsletter__champ input{flex:1;min-width:0;border:2px solid #3A444C;background:#1A1F24;color:#fff;border-radius:999px;padding:12px 18px}
.newsletter .petite-note,.newsletter .statut{grid-column:1 / -1;color:#AEB8C0}
.newsletter a{text-decoration:underline}
@media (max-width:760px){.newsletter{grid-template-columns:1fr}.newsletter__champ{flex-direction:column}}
.evitement{position:absolute;left:12px;top:-60px;z-index:100;background:var(--texte);color:var(--fond);padding:10px 16px;border-radius:8px;font-weight:700}
.evitement:focus{top:12px}
.modele{border:2px dashed var(--trait);border-radius:12px;padding:6px 20px;margin:16px 0}
.sources{padding-left:20px}
.sources li{margin-bottom:8px;font-size:15px;color:var(--doux)}
.sources a{font-weight:500!important}

@media (max-width:640px){.achat{flex-wrap:wrap}.achat .btn-acheter{order:3;flex-basis:100%}.achat .btn-favori{margin-left:auto}}
/* Guides et textes de rayons (SEO) */
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:22px}
.carte-guide{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden;background:var(--fond)}
.carte-guide:hover{border-color:var(--texte)}
.carte-guide__visuel{aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.carte-guide__visuel img{width:100%;height:100%;object-fit:cover}
.carte-guide__visuel svg{width:40%;height:auto}
.carte-guide__texte{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.carte-guide__texte h3{margin:0;font-size:18px;line-height:1.25}
.carte-guide__texte p{margin:0;color:var(--doux);font-size:15px;flex:1}
.page--large{max-width:1100px}
.guide h2{font-size:24px;margin:34px 0 10px;color:var(--texte)}
.guide p{color:var(--texte);font-size:17px;line-height:1.65}
.guide a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.guide__resume{font-size:19px!important;color:var(--doux)!important}
.rayon-texte{max-width:820px;padding:8px 0 80px}
.rayon-texte p{color:var(--doux);font-size:16.5px;line-height:1.65}
.rayon-texte .accordeon{margin-top:18px}