/* ═══════════════════════════════════════════════════════════════════════════
   ALLURE SHOP — thème « visual impact » d'après Shopify
   ═══════════════════════════════════════════════════════════════════════════

   Forme et couleurs reprises de `design.shopify.html` (bibliothèque
   awesome-design-html). Ce qui définit ce registre :

     · toile CLAIRE (blanc + crème #fbfbf5), encre noire — Shopify est une
       marque claire ; le copier en sombre serait le trahir ;
     · bandes NOIRES pleine largeur pour les moments forts — c'est là que
       vient l'impact visuel, par contraste et non par couleur ;
     · verts pâles (aloe #c1fbd4, pistache #d4f9e0) en aplats de fond, jamais
       en texte : ce sont des surfaces, pas des accents ;
     · grands titres en graisse 300. C'est le point le plus contre-intuitif et
       le plus caractéristique : le titre impose par sa TAILLE et son air, pas
       par son gras. Un display en 800 paraît crié ; en 300 il paraît assuré ;
     · boutons en gélule, noir plein ou contour de 1,5 px ;
     · rayons doux 4 / 8 / 12 / 20 px, filets #e4e4e7.

   Le thème sombre reste disponible au choix — il reprend la bande noire de
   Shopify comme toile, ce qui est sa propre déclinaison sombre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Encre et surfaces (Shopify) ── */
  --ink:        #000000;
  --fond:       #ffffff;
  --creme:      #fbfbf5;
  --surface:    #ffffff;
  --surface-2:  #fbfbf5;
  --surface-3:  #f4f4f2;
  --nuit:       #000000;
  --nuit-haut:  #0a0a0a;
  --voile:      rgba(255, 255, 255, .86);

  /* ── Texte ── */
  --texte:   #000000;
  --texte-2: #52525b;
  --texte-3: #71717a;

  /* ── Filets ── */
  --trait:   #e4e4e7;
  --trait-2: #d4d4d8;

  /* ── Verts pâles : des SURFACES, jamais du texte ── */
  --aloe:      #c1fbd4;
  --pistache:  #d4f9e0;
  --menthe:    #99b3ad;

  /* ── États ── */
  --succes: #0b7a4b;
  --alerte: #9a6700;
  --erreur: #b42318;

  /* Conservés pour le logo et l'app mobile, qui gardent leur identité. */
  --violet: #7C3AED;
  --rose:   #EC4899;
  --violet-doux: #6d28d9;
  --degrade: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);

  /* ── Formes ── */
  --r:      8px;
  --r-2:    12px;
  --r-3:    20px;
  --r-pill: 9999px;
  --ombre:    0 1px 2px rgba(0,0,0,.04);
  --ombre-xl: 0 12px 40px rgba(0,0,0,.09);
  --halo:     none;

  /* ── Rythme ── */
  --large: 1240px;
  --gouttiere: clamp(18px, 4vw, 40px);
  --entete: 68px;

  --transition: .15s ease;
}

/* Déclinaison sombre : la bande noire de Shopify devient la toile. */
:root[data-theme="dark"] {
  --fond:      #000000;
  --creme:     #0a0a0a;
  --surface:   #0a0a0a;
  --surface-2: #141414;
  --surface-3: #1e2c31;
  --voile:     rgba(0, 0, 0, .82);

  --texte:   #ffffff;
  --texte-2: #a1a1aa;
  --texte-3: #71717a;

  --trait:   #1e2c31;
  --trait-2: #3f3f46;

  --succes: #62d69f;
  --alerte: #f0c000;
  --erreur: #ff8a7a;

  --ombre:    none;
  --ombre-xl: 0 12px 40px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15.5px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

/* Verrou de défilement quand le menu mobile est ouvert. */
body.menu-ouvert { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* Le display de Shopify est en graisse 300 et en casse normale. C'est
   contre-intuitif et c'est justement ce qui fait le registre : un titre en 800
   et en capitales paraît crié, le même en 300 paraît assuré. C'est aussi ce
   qui corrige des titres qui paraissaient disproportionnés. */
h1, h2, h3, h4 {
  line-height: 1.14;
  letter-spacing: -.5px;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 300; }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; }
h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.3px; }
h4 { font-weight: 600; letter-spacing: -.2px; }
h3 { font-size: 1.05rem; font-weight: 700; }
p  { text-wrap: pretty; }

::selection { background: var(--aloe); color: #000; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: var(--texte-3); }

/* Anneau de focus visible partout — la navigation au clavier doit rester
   possible, y compris pour payer. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--texte); color: var(--fond);
  padding: 12px 20px; border-radius: 0 0 var(--r) 0;
  z-index: 400; font-weight: 600;
}
.saut:focus { left: 0; }

.muted { color: var(--texte-2); }
.petit { font-size: .82rem; }

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE
   ══════════════════════════════════════════════════════════════════════════ */

.entete {
  position: sticky; top: 0; z-index: 200;
  background: var(--voile);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.entete.colle { border-bottom-color: var(--trait); }

.entete-barre {
  height: var(--entete);
  display: flex; align-items: center; gap: 14px;
}

.marque { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
/* Le logo est désormais un tracé monochrome sans fond : plus de pastille
   colorée, plus de dégradé. Il hérite de la couleur du texte. */
.logo-marque { flex-shrink: 0; color: var(--texte); }
.marque-nom {
  font-weight: 800; font-size: 1.06rem; letter-spacing: -.03em;
  white-space: nowrap;
}
.marque-nom em { font-style: normal; font-weight: 400; color: var(--texte-3); }

.nav-principale { display: flex; gap: 2px; margin-left: 18px; }
.nav-principale a {
  padding: 8px 14px; border-radius: 9px;
  font-size: .92rem; font-weight: 500; color: var(--texte-2);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-principale a:hover { color: var(--texte); background: var(--surface-2); }
.nav-principale a[aria-current="page"] { color: var(--texte); font-weight: 600; }

.entete-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icone-btn {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--texte-2);
  border: 1px solid transparent;
  transition: all var(--transition);
  position: relative;
}
.icone-btn:hover { color: var(--texte); background: var(--surface-2); border-color: var(--trait); }
.icone-btn svg { width: 19px; height: 19px; }

.pastille {
  position: absolute; top: 3px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--texte); color: var(--fond);
  font-variant-numeric: tabular-nums;
  font-size: .66rem; font-weight: 600;
  display: grid; place-items: center;
}

/* Le soleil et la lune : un seul est visible selon le thème. */
.icone-clair { display: none; }
:root[data-theme="light"] .icone-clair { display: block; }
:root[data-theme="light"] .icone-sombre { display: none; }

.burger { display: none; }

/* Sur mobile, le panneau latéral est piloté par JavaScript. S'il est absent,
   le bouton hamburger ne ferait rien et la navigation disparaîtrait
   complètement — la boutique deviendrait un cul-de-sac. On n'échange donc la
   barre contre le bouton QUE si le script a signalé sa présence. */

/* ══════════════════════════════════════════════════════════════════════════
   MENU MOBILE — panneau latéral accessible
   ══════════════════════════════════════════════════════════════════════════ */

.voile-menu {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.voile-menu.ouvert { opacity: 1; visibility: visible; }

.menu-mobile {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 250;
  width: min(340px, 86vw);
  background: var(--surface);
  border-left: 1px solid var(--trait);
  box-shadow: var(--ombre-xl);
  transform: translateX(100%);
  transition: transform var(--transition);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 18px;
}
.menu-mobile.ouvert { transform: translateX(0); }

.menu-mobile-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--trait);
}
.menu-mobile a.lien-menu {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px; border-radius: var(--r);
  font-size: 1.02rem; font-weight: 600; color: var(--texte);
  transition: background var(--transition);
}
.menu-mobile a.lien-menu:hover { background: var(--surface-2); }
.menu-mobile a.lien-menu span { color: var(--texte-3); font-size: .8rem; font-weight: 500; }
.menu-mobile .separateur {
  height: 1px; background: var(--trait); margin: 12px 4px;
}
.menu-mobile .titre-groupe {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texte-3); font-weight: 700; padding: 8px 12px 4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 400; letter-spacing: -.2px;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  text-align: center;
}
.btn svg { width: 16px; height: 16px; }

/* Gélule noire pleine : l'action principale de Shopify. Aucun dégradé, aucune
   ombre — le contraste encre/papier suffit. */
.btn-primaire, .btn-marque {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
:root[data-theme="dark"] .btn-primaire,
:root[data-theme="dark"] .btn-marque {
  background: #fff; color: #000; border-color: #fff;
}
.btn-primaire:hover, .btn-marque:hover { opacity: .82; }

/* Contour de 1,5 px — la variante secondaire du modèle. */
.btn-fantome {
  background: transparent; color: var(--texte);
  border: 1.5px solid var(--texte); padding: 11.5px 24.5px;
}
.btn-fantome:hover { background: var(--texte); color: var(--fond); }

/* Sur une bande noire, les boutons s'inversent. */
/* ── Bande noire ──────────────────────────────────────────────────────────
   Le procédé « visual impact » du modèle : une bande pleine largeur qui
   inverse encre et papier. L'effet vient du contraste, pas d'une couleur
   supplémentaire. */
.bande-nuit {
  background: var(--nuit); color: #fff;
  padding-block: clamp(40px, 6vw, 72px);
}
.bande-nuit h2, .bande-nuit h3, .bande-nuit strong { color: #fff; }
.bande-nuit p, .bande-nuit .surtitre { color: #a1a1aa; }
.bande-nuit .bande-chiffres { border-color: #1e2c31; }
.bande-nuit .chiffre { border-color: #1e2c31; }
.bande-nuit .chiffre span { color: #71717a; }
.bande-nuit .chiffre:hover { background: var(--nuit-haut); }

.bande-nuit .btn-primaire { background: #fff; color: #000; border-color: #fff; }
.bande-nuit .btn-fantome  { color: #fff; border-color: #fff; }
.bande-nuit .btn-fantome:hover { background: #fff; color: #000; }

.btn-lien { color: var(--violet-doux); font-weight: 600; padding: 0; }
.btn-lien:hover { text-decoration: underline; }

.btn-large { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL — héros et parallaxe
   ══════════════════════════════════════════════════════════════════════════ */

.heros {
  position: relative;
  background: var(--creme);
  min-height: auto;
  display: grid; align-items: center;
  overflow: hidden;
  padding-block: clamp(60px, 10vw, 120px);
}

/* Les halos colorés, décalés au défilement. Purement décoratifs : ils sont
   en aria-hidden et disparaissent si l'utilisateur refuse les animations. */
.heros-halo {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  pointer-events: none;
  will-change: transform;
}
/* Shopify n'utilise pas de halos colorés : l'impact vient du contraste
   encre/papier et des bandes noires. On les neutralise plutôt que de les
   supprimer du balisage. */
.halo-1, .halo-2 { display: none; }

.heros-contenu { position: relative; z-index: 2; max-width: 720px; }

.pastille-info {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--trait-2);
  font-size: .8rem; font-weight: 600; color: var(--texte-2);
  margin-bottom: 24px;
}
.pastille-info .point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--succes);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .2);
}

.heros h1 { margin-bottom: 20px; }
/* Le mot souligné l'est par un aplat vert pâle passé derrière — le procédé
   de surlignage de Shopify, jamais du texte coloré. */
.heros h1 em {
  font-style: normal; font-weight: 500;
  background: linear-gradient(transparent 62%, var(--aloe) 62%);
  padding-inline: 2px;
}
:root[data-theme="dark"] .heros h1 em {
  background: linear-gradient(transparent 62%, rgba(193,251,212,.28) 62%);
}
.heros-texte {
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  color: var(--texte-2);
  max-width: 54ch;
  margin-bottom: 32px;
}
.heros-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Bande de chiffres ────────────────────────────────────────────────────
   Le motif signature du registre automobile : une grille de cellules
   séparées par des filets, chiffre en très grand et en chasse fixe. Les
   chiffres tabulaires comptent : sans eux, « 2–5 » et « 100 » ne s'alignent
   pas d'une cellule à l'autre et la grille perd sa rigueur. */
.bande-chiffres {
  border-top: 1px solid var(--trait);
  border-left: 1px solid var(--trait);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.chiffre {
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  padding: 34px 26px;
  transition: background var(--transition);
}
.chiffre:hover { background: var(--surface); }
.chiffre strong {
  display: block;
  font-size: clamp(2.4rem, 4.6vw, 3.5rem); font-weight: 700;
  letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: 14px;
}
.chiffre span {
  font-size: .72rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--texte-3);
}

.heros-preuves {
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 26px;
  border-top: 1px solid var(--trait);
}
.preuve strong {
  display: block; font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.preuve span {
  font-size: .72rem; color: var(--texte-3);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDEAU DÉFILANT — images en mouvement continu
   ══════════════════════════════════════════════════════════════════════════ */

.bandeau {
  position: relative;
  padding-block: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* 26 s plutôt que 44 : à 44 s le mouvement était si lent qu'on le prenait
   pour une image fixe — c'est ce qui a été signalé. La piste est dupliquée
   par le script pour que la translation de -50 % boucle sans saut. */
.bandeau-piste {
  display: flex; gap: 14px; width: max-content;
  animation: defile 26s linear infinite;
}
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

.bandeau-item {
  width: 232px; height: 290px; border-radius: var(--r-3);
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--trait);
  background: var(--surface-2);
  position: relative;
  display: block;
}
.bandeau-item img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 48%);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */

.section { padding-block: clamp(52px, 8vw, 92px); }
.section-mince { padding-block: clamp(34px, 5vw, 56px); }

.section-tete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 30px;
}
.section-tete p { color: var(--texte-2); margin-top: 8px; max-width: 56ch; }
.surtitre {
  font-size: .78rem; font-weight: 500; letter-spacing: -.1px;
  text-transform: none; color: var(--texte-3);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
/* Pastille de teinte pâle plutôt qu'un trait : chez Shopify les verts sont
   des surfaces, jamais du texte. */
.surtitre::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%; background: var(--aloe);
}

/* Apparition au défilement.
   L'état masqué n'est appliqué QUE si JavaScript est actif (classe `js` posée
   par le script d'amorçage). Sans cette garde, une erreur de script ou un
   navigateur sans JS rendrait TOUT le contenu sous le héros invisible — la
   boutique paraîtrait vide. Un effet décoratif ne doit jamais pouvoir cacher
   la marchandise. */
:root.js .apparait {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
:root.js .apparait.vu { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CARTES PRODUIT
   ══════════════════════════════════════════════════════════════════════════ */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.carte:hover {
  border-color: var(--trait-2);
  box-shadow: var(--ombre-xl);
}

.carte-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
}
.carte-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.carte:hover .carte-image img { transform: scale(1.07); }

.carte-vide {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 300;
  background: var(--pistache); color: var(--menthe);
}
:root[data-theme="dark"] .carte-vide { background: var(--surface-3); color: var(--menthe); }

.etiquette {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 500; letter-spacing: -.1px;
  text-transform: none;
}
.etiquette-rabais { background: var(--ink); color: #fff; }
:root[data-theme="dark"] .etiquette-rabais { background: #fff; color: #000; }
.etiquette-rayon { background: var(--aloe); color: #0b3b23; }
/* Les étiquettes se placent dans un rail : deux « position:absolute » au même
   coin se superposeraient dès qu'un produit est à la fois soldé et fait main. */
.carte-etiquettes {
  position: absolute; inset: 12px 12px auto 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
  pointer-events: none;
}
.carte-etiquettes .etiquette { position: static; inset: auto; }

.carte-media { display: block; }
.carte-corps {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.carte-categorie {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-3);
}
.carte-titre {
  font-size: .96rem; font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-titre a { color: inherit; text-decoration: none; }
.carte-titre a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* La cible cliquable couvre toute la carte, alors que seul le titre porte le
   lien : le nom du produit reste ce que lisent les lecteurs d'écran. */
.carte-titre a::after { content: ""; position: absolute; inset: 0; }
.carte { position: relative; }

.carte-prix {
  margin-top: auto; padding-top: 6px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}

/* Bouton d'ajout : discret au repos, net au survol. Sur mobile il reste
   toujours visible — il n'y a pas de survol au doigt. */
.carte-ajout {
  margin-top: 10px;
  position: relative; z-index: 1; /* passe devant la cible de la carte */
}
.carte-ajout .btn, .carte-ajout[aria-disabled] {
  width: 100%; justify-content: center; gap: 8px;
  padding: 10px 14px; font-size: .88rem;
}
.carte-ajout svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (min-width: 700px) {
  .carte-ajout { opacity: 0; transform: translateY(4px); transition: opacity var(--transition), transform var(--transition); }
  .carte:hover .carte-ajout,
  .carte:focus-within .carte-ajout { opacity: 1; transform: none; }
}

.carte-epuisee .carte-image img { filter: grayscale(1); opacity: .55; }
.carte-epuise-voile {
  position: absolute; inset: auto 0 0 0;
  padding: 8px; text-align: center;
  background: var(--voile); backdrop-filter: blur(6px);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte);
}
.prix {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em;
  /* Chiffres tabulaires : sur une grille, des prix qui ne s'alignent pas
     donnent une impression de bricolage. */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.prix-barre { font-size: .85rem; color: var(--texte-3); text-decoration: line-through; }

/* ══════════════════════════════════════════════════════════════════════════
   ARGUMENTS
   ══════════════════════════════════════════════════════════════════════════ */

.arguments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.argument {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  padding: 26px 24px;
  transition: border-color var(--transition), transform var(--transition);
}
.argument:hover { border-color: var(--texte-3); background: var(--surface-2); }
.argument-icone {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--surface-2);
  border: 1px solid var(--trait);
  display: grid; place-items: center;
  color: var(--violet-doux);
  margin-bottom: 15px;
}
.argument-icone svg { width: 21px; height: 21px; }
.argument h3 { margin-bottom: 7px; }
.argument p { font-size: .9rem; color: var(--texte-2); }

/* ══════════════════════════════════════════════════════════════════════════
   RAYONS — deux univers
   ══════════════════════════════════════════════════════════════════════════ */

.rayons { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rayon {
  position: relative; overflow: hidden;
  border-radius: 0;
  padding: clamp(30px, 4vw, 48px);
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--trait);
  isolation: isolate;
}
.rayon::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  opacity: .18; transition: opacity var(--transition), transform .6s ease;
}
/* Le bloc d'appel de l'accueil : seul usage restant depuis la
   suppression des rayons. */
.rayon-appel::before { background: var(--aloe); opacity: 1; }
.rayon { color: #0b3b23; border-color: transparent; }
.rayon h3 { color: #08301c; }
.rayon p { color: #2a5c46; }
:root[data-theme="dark"] .rayon-appel::before { opacity: .16; }
:root[data-theme="dark"] .rayon,
:root[data-theme="dark"] .rayon h3 { color: var(--texte); }
:root[data-theme="dark"] .rayon p { color: var(--texte-2); }
.rayon:hover::before { transform: scale(1.04); }
.rayon h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
.rayon p { color: var(--texte-2); margin-bottom: 20px; max-width: 40ch; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE PRODUIT
   ══════════════════════════════════════════════════════════════════════════ */

.produit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(28px, 4vw, 48px);
  align-items: start;
}
.produit-galerie { position: sticky; top: calc(var(--entete) + 20px); }
.produit-image-principale {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--trait);
}
.produit-image-principale img { width: 100%; height: 100%; object-fit: cover; }
.produit-vignettes {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.produit-vignettes button {
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: var(--r); overflow: hidden;
  border: 2px solid transparent; background: var(--surface-2);
  transition: border-color var(--transition);
  scroll-snap-align: start;
}
.produit-vignettes button[aria-current="true"] { border-color: var(--texte); }
.produit-vignettes img { width: 100%; height: 100%; object-fit: cover; }

.produit-infos h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 14px; }
.produit-prix { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.produit-prix .prix {
  font-size: clamp(2rem, 4vw, 2.7rem); letter-spacing: -1px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.produit-description {
  color: var(--texte-2); line-height: 1.75;
  padding-block: 22px; margin-block: 22px;
  border-block: 1px solid var(--trait);
}
.produit-description :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 12px; }
.produit-description ul, .produit-description ol { padding-left: 1.3em; }
.produit-description strong { color: var(--texte); }

.rassurances { display: grid; gap: 12px; margin-top: 24px; }
.rassurance {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .88rem; color: var(--texte-2);
}
.rassurance svg { width: 18px; height: 18px; color: var(--succes); flex-shrink: 0; margin-top: 2px; }

.quantite {
  display: inline-flex; align-items: center;
  border: 1px solid var(--trait-2); border-radius: 0;
  overflow: hidden; background: transparent;
}
.quantite button { width: 46px; height: 50px; color: var(--texte-2); font-size: 1.1rem; }
.quantite button:hover { color: var(--texte); background: var(--surface-3); }
.quantite input {
  width: 50px; height: 50px; text-align: center;
  background: none; border: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.quantite input::-webkit-outer-spin-button,
.quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.achat { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.achat .btn { flex: 1; min-width: 200px; }

/* ══════════════════════════════════════════════════════════════════════════
   FILTRES ET PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */

.filtres {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 20px;
}
.filtres input[type="search"], .filtres select {
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--trait-2);
  color: var(--texte); font-size: .92rem;
  min-width: 0; width: 100%;
}
.filtres input:focus, .filtres select:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--pistache);
}
.filtres .btn { padding: 12px 22px; }

/* Champ de recherche : l'icône vit dans le champ, jamais à côté. */
.champ-recherche { position: relative; flex: 1 1 240px; min-width: 200px; }
.champ-recherche svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--texte-3); pointer-events: none;
}
.champ-recherche input[type="search"] { padding-left: 42px; }

/* Sélecteurs : l'étiquette au-dessus évite le « Toutes / Nos préférés »
   sans contexte, illisible dès qu'il y a deux listes côte à côte. */
.champ-select { display: flex; flex-direction: column; gap: 5px; flex: 0 1 190px; }
.champ-etiquette {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-3); padding-left: 4px;
}
.champ-select select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
}

.resultat-compte {
  margin: -6px 0 20px; color: var(--texte-2); font-size: .92rem;
}
.resultat-compte strong { color: var(--texte); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   SECOND FACTEUR — saisie du code
   ══════════════════════════════════════════════════════════════════════════ */

.auth-icone {
  width: 52px; height: 52px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-3); color: var(--texte-2);
}
.auth-icone svg { width: 24px; height: 24px; }
.auth-intro { color: var(--texte-2); margin-bottom: 6px; }
.auth-dest { font-size: .92rem; color: var(--texte-2); margin-bottom: 18px; }
.auth-dest strong { color: var(--texte); }

.form-code { margin-top: 18px; }
/* Chiffres largement espacés : on relit un code avant de valider, et un
   « 8 » collé à un « 0 » se confond au premier coup d'oeil. */
.saisie-code {
  width: 100%; max-width: 280px; margin: 8px auto 4px; display: block;
  padding: 15px 12px; text-align: center;
  font-size: 1.9rem; font-weight: 700; letter-spacing: .42em; text-indent: .42em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--trait-2); border-radius: var(--r-2);
}
.saisie-code:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--pistache);
}
.form-code .btn { margin-top: 14px; }
.form-code .champ-etiquette { display: block; text-align: center; }

.auth-renvoi {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--trait);
}
/* Ces deux « formulaires » ne portent qu'un bouton : sans cette remise à
   plat, ils héritent du cadre et des 30 px de marge du formulaire de
   connexion, et s'affichent en deux gros blocs empilés au lieu de deux
   liens côte à côte. */
.auth-renvoi form {
  display: contents;
  border: 0; padding: 0; margin: 0; background: none; box-shadow: none;
}
.lien-bouton {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--texte-2);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--transition);
}
.lien-bouton:hover { color: var(--texte); }

.auth-avertissement { margin-top: 20px; max-width: 42ch; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   PANIER
   ══════════════════════════════════════════════════════════════════════════ */

.panier-grille {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}
@media (max-width: 900px) {
  .panier-grille { grid-template-columns: minmax(0, 1fr); }
}

.panier-lignes { display: flex; flex-direction: column; gap: 12px; }

.ligne {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ligne:hover { border-color: var(--trait-2); box-shadow: var(--ombre-l); }

.ligne-vignette {
  display: block; width: 96px; aspect-ratio: 1 / 1;
  border-radius: var(--r-1); overflow: hidden;
  background: var(--surface-2); flex: none;
}
.ligne-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ligne-vignette .carte-vide { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; }

.ligne-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ligne-titre { font-size: 1rem; font-weight: 650; line-height: 1.35; margin: 0; }
.ligne-titre a { color: inherit; text-decoration: none; }
.ligne-titre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ligne-unite { font-size: .86rem; color: var(--texte-2); }

.ligne-pied {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}

.ligne-total {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  text-align: right; white-space: nowrap; padding-top: 2px;
}

/* Le groupe de quantité est fait de trois formulaires : on les recolle
   visuellement en une seule pastille. */
.qte-groupe {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--trait-2); border-radius: var(--r-pill);
  overflow: hidden; background: var(--surface);
}
.qte-groupe form { display: flex; }
.qte-pas {
  width: 36px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--texte);
  transition: background var(--transition);
}
.qte-pas:hover:not(:disabled) { background: var(--surface-3); }
.qte-pas:disabled { opacity: .35; cursor: not-allowed; }
.qte-saisie { align-items: center; }
.qte-saisie input[type="number"] {
  width: 46px; border: 0; background: transparent; text-align: center;
  color: var(--texte); font-size: .94rem; font-weight: 650;
  padding: 9px 0; -moz-appearance: textfield;
}
.qte-saisie input[type="number"]::-webkit-outer-spin-button,
.qte-saisie input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qte-saisie input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.qte-valider {
  border: 0; background: var(--surface-3); color: var(--texte);
  padding: 0 12px; cursor: pointer; font-size: .8rem; font-weight: 700;
}
/* Avec JS, le champ s'envoie tout seul : le bouton OK devient du bruit.
   Sans JS, il reste la seule façon de valider une quantité saisie. */
:root.js .qte-valider { display: none; }

.ligne-retirer button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; padding: 4px 2px;
  /* --texte-3 tombait à 4.1:1 sur le fond sombre, sous le seuil AA. */
  font-size: .85rem; color: var(--texte-2);
  transition: color var(--transition);
}
.ligne-retirer button:hover { color: var(--erreur); }
.ligne-retirer svg { width: 15px; height: 15px; }

.panier-continuer {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 6px; padding: 8px 2px;
  font-size: .92rem; font-weight: 600; color: var(--texte-2);
  text-decoration: none; transition: color var(--transition);
}
.panier-continuer:hover { color: var(--texte); }
.panier-continuer svg { width: 16px; height: 16px; }

.panier-resume { position: sticky; top: 92px; }
@media (max-width: 900px) { .panier-resume { position: static; } }

.resume-carte {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  box-shadow: var(--ombre-l);
}
.resume-carte h2 {
  font-size: 1.02rem; font-weight: 750; margin: 0 0 14px;
  letter-spacing: -.01em;
}
.resume-carte .btn { margin-top: 16px; }

.resume-garanties {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--trait);
  display: flex; flex-direction: column; gap: 11px;
}
.resume-garanties li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .82rem; line-height: 1.45; color: var(--texte-2);
}
.resume-garanties svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--texte-3); }

/* Sur téléphone, la vignette et le total se resserrent pour que le titre
   garde une largeur lisible. */
@media (max-width: 560px) {
  .ligne { grid-template-columns: 74px minmax(0, 1fr); gap: 13px; padding: 13px; }
  .ligne-vignette { width: 74px; }
  .ligne-total { grid-column: 2; text-align: left; padding-top: 0; }
  .ligne-pied { gap: 10px; }
}

/* Suivi de colis sur la confirmation — le renseignement que le client
   revient chercher, il ne doit pas être noyé dans un paragraphe. */
.suivi-bloc {
  margin-top: 20px; padding: 18px 20px;
  background: var(--surface-2); border: 1px solid var(--trait);
  border-radius: var(--r-2); text-align: left;
}
.suivi-tete {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-3);
}
.suivi-tete svg { width: 17px; height: 17px; }
.suivi-numero {
  margin: 8px 0 0; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.suivi-bloc .btn { margin-top: 14px; }
.suivi-attente { margin-top: 18px; }

.confirm-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 24px;
}

/* Pastille d'état de la confirmation de commande. C'est la première chose
   que lit le client après avoir payé : elle doit se voir. */
.badge-state {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; margin-bottom: 14px;
}
.badge-state::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.badge-state.ok {
  background: var(--pistache); color: #0b3b23; border-color: #0b3b2333;
}
.badge-state.wait {
  background: color-mix(in srgb, var(--alerte) 14%, transparent);
  color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 34%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .badge-state.wait { background: #fdf6e3; color: #7a5200; border-color: #d9bd7a; }
}
:root[data-theme="dark"] .badge-state.wait { color: #f0c14b; }

.puces { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.puce {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--trait-2);
  font-size: .9rem; font-weight: 400; color: var(--texte-2);
  text-transform: none; letter-spacing: -.1px;
  transition: all var(--transition);
}
.puce:hover { border-color: var(--trait-2); color: var(--texte); }
.puce[aria-current="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
:root[data-theme="dark"] .puce[aria-current="true"] {
  background: #fff; color: #000; border-color: #fff;
}

.pagination {
  display: flex; gap: 7px; justify-content: center; flex-wrap: wrap;
  margin-top: 42px;
}
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); font-weight: 500; font-size: .9rem;
  background: var(--surface); border: 1px solid var(--trait);
  color: var(--texte-2);
  transition: all var(--transition);
}
.pagination a:hover { border-color: var(--texte); color: var(--texte); }
.pagination [aria-current="page"] {
  background: var(--texte); color: var(--fond); border-color: var(--texte);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULAIRES
   ══════════════════════════════════════════════════════════════════════════ */

.form-carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  padding: clamp(22px, 3vw, 34px);
}
.form-etroit { max-width: 480px; margin-inline: auto; }

label { display: block; margin-bottom: 15px; font-size: .88rem; font-weight: 600; }
label > input, label > select, label > textarea {
  display: block; width: 100%; margin-top: 7px;
  padding: 12px 15px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--trait-2);
  font-weight: 400;
  transition: border-color var(--transition), box-shadow var(--transition);
}
label > textarea { min-height: 140px; resize: vertical; }
label > input:focus, label > select:focus, label > textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--pistache);
}
.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 14px; }

.avis {
  padding: 14px 18px; border-radius: var(--r);
  border: 1px solid var(--trait-2); background: var(--surface-2);
  margin-bottom: 20px; font-size: .92rem;
}
.avis-succes { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.09); }
.avis-alerte { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.09); }
.avis-erreur { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.09); }

/* ══════════════════════════════════════════════════════════════════════════
   PANIER, COMMANDE, COMPTE
   ══════════════════════════════════════════════════════════════════════════ */

.deux-colonnes {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px); align-items: start;
}
.recap {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-2); padding: 24px;
  position: sticky; top: calc(var(--entete) + 20px);
}
.recap-ligne {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: .92rem; color: var(--texte-2);
}
.recap-total {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 12px; padding-top: 16px;
  border-top: 1px solid var(--trait);
  font-size: 1.16rem; font-weight: 800;
}

.ligne-panier {
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--trait);
}
.ligne-panier img, .ligne-panier .carte-vide {
  width: 84px; height: 84px; border-radius: var(--r); object-fit: cover;
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--texte-3); font-weight: 700;
  padding: 10px 12px; border-bottom: 1px solid var(--trait);
}
td { padding: 13px 12px; border-bottom: 1px solid var(--trait); }
.tableau-defile { overflow-x: auto; }

.jeton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 0;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px;
  background: transparent; border: 1px solid var(--trait-2);
}
.jeton-paye   { color: var(--succes); border-color: rgba(52,211,153,.35); }
.jeton-envoye { color: var(--violet-doux); border-color: rgba(144,97,249,.35); }
.jeton-attente{ color: var(--alerte); border-color: rgba(251,191,36,.35); }

.compte { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: start; }
.compte-menu { display: flex; flex-direction: column; gap: 3px; position: sticky; top: calc(var(--entete) + 20px); }
.compte-menu a {
  padding: 11px 15px; border-radius: var(--r);
  font-size: .92rem; font-weight: 600; color: var(--texte-2);
  transition: all var(--transition);
}
.compte-menu a:hover { background: var(--surface-2); color: var(--texte); }
.compte-menu a[aria-current="page"] { background: var(--surface-2); color: var(--texte); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGES DE CONTENU
   ══════════════════════════════════════════════════════════════════════════ */

.page-contenu { max-width: 74ch; padding-block: clamp(30px, 5vw, 54px); }
.page-contenu h1 { margin-bottom: 10px; }
.page-contenu .date-maj { color: var(--texte-3); font-size: .84rem; margin-bottom: 34px; }
.page-contenu h2 {
  font-size: 1.3rem; margin-top: 38px; margin-bottom: 12px;
  padding-top: 20px; border-top: 1px solid var(--trait);
}
.page-contenu h2:first-of-type { border-top: none; padding-top: 0; }
.page-contenu h3 { margin-top: 22px; margin-bottom: 8px; font-size: 1.02rem; }
.page-contenu p, .page-contenu li { color: var(--texte-2); }
.page-contenu p + p { margin-top: 13px; }
.page-contenu ul, .page-contenu ol { margin: 13px 0 13px 1.3em; }
.page-contenu li + li { margin-top: 7px; }
.page-contenu a { color: var(--violet-doux); font-weight: 600; }
.page-contenu a:hover { text-decoration: underline; }
.page-contenu strong { color: var(--texte); }

.encadre {
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 3px solid var(--texte-3);
  border-radius: var(--r); padding: 18px 22px; margin: 24px 0;
}
.encadre p { color: var(--texte-2); }

.faq details {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); margin-bottom: 10px; overflow: hidden;
}
.faq summary {
  padding: 16px 20px; cursor: pointer; font-weight: 650;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--violet-doux); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--trait); }
.faq .reponse { padding: 16px 20px; color: var(--texte-2); font-size: .93rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.pied {
  margin-top: auto;
  border-top: 1px solid var(--trait);
  background: var(--surface);
  padding-block: clamp(38px, 5vw, 58px) 26px;
}
.pied-grille {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 34px 24px;
}
.pied-marque p {
  color: var(--texte-2); font-size: .9rem; margin-top: 14px; max-width: 34ch;
}
.pied h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--texte-3); margin-bottom: 14px; font-weight: 800;
}
.pied-liens { display: flex; flex-direction: column; gap: 9px; }
.pied-liens a { font-size: .9rem; color: var(--texte-2); transition: color var(--transition); }
.pied-liens a:hover { color: var(--texte); }

.pied-bas {
  margin-top: 38px; padding-top: 22px;
  border-top: 1px solid var(--trait);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--texte-3);
}
.paiements { display: flex; gap: 8px; align-items: center; }
.paiements span {
  padding: 4px 10px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--trait);
  font-size: .7rem; font-weight: 700; color: var(--texte-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   ÉTATS VIDES ET 404
   ══════════════════════════════════════════════════════════════════════════ */

.vide {
  text-align: center; padding: clamp(50px, 9vw, 90px) 20px;
}
.vide-icone {
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--surface-2); border: 1px solid var(--trait);
  display: grid; place-items: center; margin: 0 auto 22px;
  color: var(--texte-3);
}
.vide-icone svg { width: 32px; height: 32px; }
.vide h2 { margin-bottom: 10px; }
.vide p { color: var(--texte-2); max-width: 44ch; margin: 0 auto 26px; }

/* ══════════════════════════════════════════════════════════════════════════
   ADAPTATIF
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .produit { grid-template-columns: 1fr; }
  .produit-galerie { position: static; }
  .deux-colonnes { grid-template-columns: 1fr; }
  .recap { position: static; }
  .compte { grid-template-columns: 1fr; }
  .compte-menu {
    position: static; flex-direction: row; overflow-x: auto;
    padding-bottom: 6px; border-bottom: 1px solid var(--trait);
  }
  .compte-menu a { white-space: nowrap; }
}

@media (max-width: 860px) {
  :root.js .nav-principale { display: none; }
  :root.js .burger { display: grid; }
  /* Sans JS : la barre reste, en rangée défilante. */
  .nav-principale {
    margin-left: 8px; overflow-x: auto; flex: 1;
    scrollbar-width: none;
  }
  .nav-principale::-webkit-scrollbar { display: none; }
  .heros { min-height: auto; }
  .heros-preuves { gap: 22px; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .carte-corps { padding: 12px 13px 14px; }
  .bandeau-item { width: 150px; height: 190px; }
  /* Pleine largeur plutôt que deux colonnes serrées : sur 375 px,
     « Découvrir la boutique » se cassait en deux lignes autour de sa
     flèche. */
  .heros-actions .btn { flex: 1 1 100%; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
  .ligne-panier { grid-template-columns: 64px 1fr; }
  .ligne-panier img, .ligne-panier .carte-vide { width: 64px; height: 64px; }
  .achat .btn { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — respecté sans exception
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .bandeau-piste { animation: none; }
  :root.js .apparait { opacity: 1; transform: none; }
  .heros-halo { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION — une facture doit rester lisible sur papier
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
  .entete, .pied, .menu-mobile, .voile-menu, .heros-halo, .bandeau { display: none; }
  body { background: #fff; color: #000; }
  .carte, .form-carte, .recap { border-color: #ccc; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES TRANSACTIONNELLES — panier, commande, confirmation, compte
   ═══════════════════════════════════════════════════════════════════════════

   Ces gabarits parlent un vocabulaire de classes antérieur à la refonte
   (`cart`, `checkout`, `ship`, `notice`…). Après le changement de thème, plus
   aucune de ces classes n'existait : les pages s'affichaient en HTML brut —
   y compris le tunnel d'achat, là où passe l'argent.

   Les redéfinir ici plutôt que réécrire quinze gabarits : moins de surface
   touchée, et le tunnel de paiement — le chemin le plus sensible du site —
   n'est pas réécrit à la veille d'une mise en ligne.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-standard { padding-block: clamp(26px, 4vw, 46px); }

/* ── Blocs de contenu ────────────────────────────────────────────────────── */
.page-doc { max-width: 74ch; padding-block: clamp(20px, 3vw, 34px); }
.page-doc h1 { margin-bottom: 18px; }
.page-doc p { color: var(--texte-2); }
.page-doc p + p { margin-top: 12px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 26px 0 16px;
}
.section-head h1, .section-head h2 { margin: 0; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.notice {
  padding: 14px 18px; border-radius: var(--r);
  background: var(--pistache); border: 1px solid transparent;
  color: #0b3b23; margin-bottom: 18px; font-size: .92rem;
}
.notice.warn { background: #fff4e5; border-color: #f0c48a; color: #7a4b00; }
.notice a { color: inherit; text-decoration: underline; }
:root[data-theme="dark"] .notice { background: rgba(193,251,212,.12); color: #b7f0cd; }
:root[data-theme="dark"] .notice.warn { background: rgba(240,192,0,.12); border-color: rgba(240,192,0,.35); color: #f0c000; }

.small { font-size: .84rem; color: var(--texte-3); }
.empty, .empty-page {
  text-align: center; padding: clamp(40px, 8vw, 80px) 20px;
  color: var(--texte-2);
}
.empty-page h1 { margin-bottom: 12px; }

/* ── Boutons hérités ─────────────────────────────────────────────────────── */
/* `btn wide` et `btn-primary` viennent de l'ancien vocabulaire. Le bouton de
   PAIEMENT en faisait partie : sans ces deux lignes, il s'affichait comme un
   bouton de navigateur nu au moment de payer. */
.btn.wide, .wide { width: 100%; }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
:root[data-theme="dark"] .btn-primary { background: #fff; color: #000; border-color: #fff; }
.btn-primary:hover { opacity: .82; }
.link {
  background: none; border: none; padding: 0;
  color: var(--texte-2); text-decoration: underline; cursor: pointer;
  font-size: .88rem;
}
.link:hover { color: var(--texte); }

/* ── Panier ──────────────────────────────────────────────────────────────── */
.cart { display: grid; gap: 0; }
.cart .line {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--trait);
}
.cart .line img, .cart .line .noimg {
  width: 92px; height: 92px; object-fit: cover;
  border-radius: var(--r); background: var(--surface-2);
}
.cart .line h3 { font-size: .98rem; margin-bottom: 4px; }

.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty input {
  width: 68px; padding: 9px 10px; text-align: center;
  border-radius: var(--r); border: 1px solid var(--trait-2);
  background: var(--surface); color: var(--texte);
  font-variant-numeric: tabular-nums;
}

.totals {
  margin-top: 22px; padding: 22px;
  background: var(--surface-2); border: 1px solid var(--trait);
  border-radius: var(--r-2);
}
/* Les gabarits écrivent ces lignes en <p> : ne viser que « div » laissait
   l'étiquette collée au montant — « Sous-total181,50 $ ». */
.totals .line, .totals > div, .totals > p {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; color: var(--texte-2); font-size: .94rem;
}
/* Sauf la mention des taxes, qui est une phrase, pas une ligne de compte. */
.totals > p.muted { display: block; }
.totals .grand, .grand {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--trait-2);
  font-size: 1.2rem; font-weight: 600; color: var(--texte);
  font-variant-numeric: tabular-nums;
}

/* ── Commande ────────────────────────────────────────────────────────────── */
.checkout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 44px); align-items: start;
}
.checkout > .pay {
  position: sticky; top: calc(var(--entete) + 20px);
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  padding: 24px;
}
.checkout .pay h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.checkout .pay .line,
.checkout .pay > div:not(.choice):not(.grand) {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; color: var(--texte-2); font-size: .93rem;
}

/* Le formulaire d'adresse : deux colonnes sur large écran, une sur mobile. */
.ship { display: grid; gap: 0 16px; }
.ship .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; }
.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Choix du moyen de paiement : une vraie cible cliquable, pas une case perdue. */
.choice {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--trait-2); border-radius: var(--r);
  background: var(--surface); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  font-size: .94rem;
}
.choice:hover { border-color: var(--texte-3); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--pistache); }
:root[data-theme="dark"] .choice:has(input:checked) {
  border-color: #fff; background: rgba(193,251,212,.1);
}
.choice input { accent-color: var(--ink); width: 17px; height: 17px; }
:root[data-theme="dark"] .choice input { accent-color: #fff; }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.confirm { max-width: 640px; margin-inline: auto; text-align: center; }
.confirm .cart { text-align: left; margin-top: 26px; }
.confirm .totals { text-align: left; }

/* ── Compte ──────────────────────────────────────────────────────────────── */
.account { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 32px; align-items: start; }
.account-menu { display: flex; flex-direction: column; gap: 3px; position: sticky; top: calc(var(--entete) + 20px); }
.account-menu a {
  padding: 11px 15px; border-radius: var(--r);
  font-size: .92rem; color: var(--texte-2);
  transition: background var(--transition), color var(--transition);
}
.account-menu a:hover { background: var(--surface-2); color: var(--texte); }
.account-menu a[aria-current="page"],
.account-menu a.active { background: var(--surface-2); color: var(--texte); font-weight: 600; }

.auth { max-width: 430px; margin-inline: auto; }
.auth h1 { text-align: center; margin-bottom: 8px; }
.auth > p { text-align: center; color: var(--texte-2); margin-bottom: 24px; }
.auth form {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-2); padding: clamp(22px, 3vw, 30px);
}

.addr-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 26px; }
.addr {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-2); padding: 18px;
}
.addr p { color: var(--texte-2); font-size: .9rem; margin: 8px 0 12px; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 500; margin-bottom: 8px;
  background: var(--surface-2); color: var(--texte-2);
}
.tag.paid { background: var(--aloe); color: #0b3b23; }

.right { text-align: right; font-variant-numeric: tabular-nums; }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .3em; text-align: center; font-size: 1.4rem;
}
.secret-box {
  font-family: ui-monospace, Menlo, monospace; word-break: break-all;
  background: var(--surface-2); border: 1px solid var(--trait-2);
  padding: 13px 16px; border-radius: var(--r); text-align: center;
  margin: 14px 0;
}
.otp-link { font-size: .84rem; }
.stock.ok { color: var(--succes); }
.stock.ko { color: var(--erreur); }
.ok { color: var(--succes); }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout > .pay { position: static; }
  .account { grid-template-columns: 1fr; }
  .account-menu {
    position: static; flex-direction: row; overflow-x: auto;
    padding-bottom: 6px; border-bottom: 1px solid var(--trait);
  }
  .account-menu a { white-space: nowrap; }
}
@media (max-width: 560px) {
  .cart .line { grid-template-columns: 68px 1fr; }
  .cart .line img, .cart .line .noimg { width: 68px; height: 68px; }
}

/* ── Récapitulatif de commande ───────────────────────────────────────────────
   L'ancienne version alignait des lignes de texte : à cinq articles, on ne
   reconnaissait plus ce qu'on achetait. Une vignette par article et la
   quantité en pastille suffisent à rendre le panier relisible d'un coup
   d'œil, juste avant de payer — le moment où l'on doute le plus. */
.recap {
  position: sticky; top: calc(var(--entete) + 20px);
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  padding: 24px;
}
.recap h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 18px; }

/* Le texte est forcé à gauche : la page de confirmation centre son contenu,
   et les noms d'articles se retrouvaient au milieu, désalignés de leur
   vignette comme du bloc des totaux. */
.recap-articles { display: grid; gap: 14px; padding-bottom: 18px; text-align: left; }
.recap-article {
  display: grid; grid-template-columns: 52px 1fr auto;
  gap: 13px; align-items: center;
}
.recap-nom {
  font-size: .92rem; font-weight: 600; line-height: 1.4; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recap-prix {
  font-size: .95rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* Sur la confirmation, la liste reçoit le même cadre que les totaux —
   sans cela elle flottait sur la page à côté d'un bloc encadré. */
.confirm .recap-articles {
  margin-top: 22px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-2);
}
.confirm .totals { margin-top: 14px; }
.recap-vignette {
  position: relative; width: 52px; height: 52px;
  border-radius: var(--r); overflow: visible;
}
.recap-vignette img {
  width: 52px; height: 52px; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--trait);
}
.recap-vignette > span[aria-hidden] {
  width: 52px; height: 52px; border-radius: var(--r);
  display: grid; place-items: center;
  background: var(--pistache); color: var(--menthe);
  font-size: 1.2rem; border: 1px solid var(--trait);
}
/* La quantité en pastille sur le coin : la lire dans le titre (« × 2 »)
   obligeait à la chercher au milieu du texte. */
.recap-qte {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: .72rem; font-weight: 600;
  display: grid; place-items: center;
  border: 2px solid var(--surface-2);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .recap-qte { background: #fff; color: #000; }
.recap-titre {
  font-size: .89rem; color: var(--texte-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recap-montant { font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.recap .line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; color: var(--texte-2); font-size: .93rem;
  border-top: 1px solid var(--trait);
}
.recap .line:first-of-type { border-top: 1px solid var(--trait-2); padding-top: 14px; }
.recap .line strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.recap .line.grand {
  margin-top: 6px; padding-top: 14px;
  border-top: 1px solid var(--trait-2);
  font-size: 1.16rem; font-weight: 600; color: var(--texte);
}
.recap .line.grand strong { font-size: 1.16rem; }

/* Le bouton de paiement : pleine largeur, et visiblement inerte quand aucun
   opérateur n'est branché. */
.btn.paiement { margin-top: 24px; font-size: 1.02rem; padding: 15px 26px; }
.btn.paiement[disabled] {
  opacity: .45; cursor: not-allowed;
  background: var(--surface-3); color: var(--texte-3); border-color: var(--trait-2);
}
.btn.paiement[disabled]:hover { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════════════════
   HÉROS — fond d'images produits en mouvement
   ═══════════════════════════════════════════════════════════════════════════

   Quatre colonnes qui montent à des vitesses différentes : le décalage donne
   la profondeur, une vitesse unique donnerait un bloc qui glisse.

   Le voile n'est pas un effet de style, c'est la condition de lisibilité. Du
   texte posé sur des photos quelconques devient illisible dès qu'une image
   claire passe derrière ; le dégradé garantit le contraste quelle que soit la
   photo. C'est pourquoi il est opaque du côté du texte et s'allège de l'autre.
   ═══════════════════════════════════════════════════════════════════════════ */

.heros {
  position: relative; overflow: hidden; isolation: isolate;
  /* Assez haut pour que les colonnes aient de quoi défiler : plus bas, on ne
     voit qu'une tranche d'image et le mouvement ne se lit pas. */
  min-height: min(86vh, 720px);
  display: grid; align-items: center;
}

.heros-fond {
  position: absolute; inset: 0; z-index: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; padding: 0 14px;
  pointer-events: none;
}
.heros-colonne { overflow: hidden; }
.heros-piste {
  display: flex; flex-direction: column; gap: 14px;
  animation: monte var(--vitesse, 60s) linear infinite;
  will-change: transform;
}
/* Vitesses distinctes — et une colonne qui descend, pour casser l'uniformité. */
.heros-colonne-1 .heros-piste { --vitesse: 58s; }
.heros-colonne-2 .heros-piste { --vitesse: 74s; animation-direction: reverse; }
.heros-colonne-3 .heros-piste { --vitesse: 64s; }
.heros-colonne-4 .heros-piste { --vitesse: 82s; animation-direction: reverse; }

.heros-piste img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-2);
}
@keyframes monte { to { transform: translateY(-33.333%); } }

/* Le voile : opaque à gauche où vit le texte, transparent à droite pour
   laisser voir les produits. */
.heros-voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--fond) 0%, var(--fond) 32%,
                    color-mix(in srgb, var(--fond) 70%, transparent) 54%,
                    color-mix(in srgb, var(--fond) 30%, transparent) 100%),
    linear-gradient(to bottom, var(--fond) 0%, transparent 12%,
                    transparent 84%, var(--fond) 100%);
}
/* Repli pour les navigateurs sans color-mix : un voile uni, moins subtil mais
   qui garantit la lisibilité — jamais de texte sur photo nue. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .heros-voile {
    background: linear-gradient(100deg, var(--fond) 0%, var(--fond) 40%,
                                rgba(0, 0, 0, .55) 100%);
  }
}

.heros-contenu { position: relative; z-index: 2; }

@media (max-width: 860px) {
  /* Sur téléphone le texte occupe toute la largeur : le voile devient uni,
     sinon le titre passe sur une photo. */
  .heros-fond { grid-template-columns: repeat(2, 1fr); }
  .heros-voile {
    background:
      linear-gradient(to bottom, var(--fond) 0%,
                      color-mix(in srgb, var(--fond) 88%, transparent) 40%,
                      var(--fond) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heros-piste { animation: none; }
}