/* =============================================================
   SNEAKHOUSE — Feuille de style
   Direction : nocturne. La palette de la bannière d'accueil —
   minuit bleuté, or chaud, turquoise de mer — tient désormais
   tout le site. Les photos, elles, restent posées sur une plaque
   claire : une chaussure détourée sur blanc disparaîtrait dans
   la nuit, et c'est elle qu'on vient voir.

   Pour changer l'apparence du site, il suffit le plus souvent
   de modifier les variables du bloc « Réglages » ci-dessous.
   ============================================================= */

/* ---------- Réglages ---------- */
:root {
  /* Les noms disent le rôle, pas la teinte. « --blanc » est la
     surface des blocs, « --encre » la couleur du texte : les deux
     ont changé de camp, leur rôle n'a pas bougé. Renommer aurait
     touché sept cents lignes pour rien. */

  /* Palette de l'accueil */
  --nuit-1:      #0A1320;   /* fond de toutes les pages */
  --nuit-2:      #12263F;
  --or:          #E0A85C;
  --mer:         #40C4C7;
  --clair:       #F2EFE9;

  --blanc:       #0F1E30;   /* surface des blocs posés sur la nuit */
  --gris-05:     #0C1828;
  --gris-10:     #142639;
  --gris-15:     #1C3049;
  --ligne:       rgba(242, 239, 233, .11);
  --ligne-2:     rgba(242, 239, 233, .26);
  --encre:       #F2EFE9;   /* texte principal */
  --encre-2:     rgba(242, 239, 233, .72);
  --encre-3:     rgba(242, 239, 233, .55);
  --sur-encre:   #0A1320;   /* texte posé sur un aplat --encre */
  --accent:      #E0A85C;   /* l'or du logo, remonté pour la nuit */
  --sur-accent:  #14202E;
  --accent-doux: rgba(224, 168, 92, .16);
  --promo:       #FF7A66;   /* prix réduits uniquement */
  --sur-promo:   #2B0D07;
  --dispo:       #66C08A;

  /* Fond des photos produit. Seule zone claire du site : les
     paires sont photographiées en studio sur blanc. */
  --plaque:      #EFECE6;

  /* Typographie */
  --police:       'Instrument Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --police-titre: 'Newsreader', Georgia, 'Times New Roman', serif;
  --police-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Mesures */
  --largeur:  1340px;
  --marge:    clamp(1rem, 4vw, 3rem);
  --arrondi:  10px;
  --arrondi-l: 18px;
  --ombrage:  0 22px 50px -22px rgba(0, 0, 0, .72);
  --entete-h: 68px;
  --transition: 180ms cubic-bezier(.2, .6, .3, 1);

  /* Fait basculer les éléments dessinés par le navigateur — barres
     de défilement, listes déroulantes, sélecteurs de date. Sans
     cela, ouvrir un menu « Trier par » ouvrait un rectangle blanc
     au milieu de la nuit. */
  color-scheme: dark;
}

/* ---------- Transitions entre les pages ----------
   Un simple fondu croisé, sans déplacement ni rideau : la page
   sortante s'efface, la nouvelle apparaît. L'en-tête et le pied ne
   bougent pas.

   Tout est en CSS. Aucun script n'intercepte les clics, donc la
   navigation reste immédiate : le navigateur charge la page comme
   d'habitude et se charge seul de l'animation. Les navigateurs qui
   ne connaissent pas l'API ignorent ces règles et gardent le fondu
   d'arrivée défini plus bas — sans aucun délai ajouté. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: sortiePage 140ms ease-in both; }
::view-transition-new(root) { animation: entreePage 300ms cubic-bezier(.2, .7, .3, 1) both; }

/* Un fondu d'opacité seul est invisible entre deux pages qui
   partagent l'en-tête, le pied et un fond blanc : il faut un léger
   mouvement pour que l'œil perçoive le changement. */
@keyframes sortiePage { to   { opacity: 0; } }
@keyframes entreePage { from { opacity: 0; transform: translateY(14px); } }

/* L'en-tête et le pied ne clignotent pas : ils sont désignés
   comme persistants d'une page à l'autre. */
.entete { view-transition-name: entete; }
.pied   { view-transition-name: pied; }

/* Arrivée sur les navigateurs sans View Transitions — et sur les
   pages ouvertes en file:// , où l'API ne s'applique jamais. C'est
   cette animation qui rend le changement visible dans ces cas. */
@keyframes entreeContenu { from { opacity: 0; transform: translateY(14px); } }
.pret #contenu { animation: entreeContenu 320ms cubic-bezier(.2, .7, .3, 1) both; }

/* Animations réduites : on retire le mouvement, pas la transition.
   « Reduced motion » vise les grands déplacements ; un fondu court
   reste acceptable et garde un repère visuel au changement de page.
   Supprimer toute animation rendait le site parfaitement inerte. */
@keyframes entreeSobre { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pret #contenu { animation: entreeSobre 150ms ease-out both; }
  ::view-transition-old(root) { animation: sortiePage 100ms ease-out both; }
  ::view-transition-new(root) { animation: entreeSobre 150ms ease-out both; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nuit-1);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.fige { overflow: hidden; }

img, svg { 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: 0; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
s { color: var(--encre-3); }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86em; }

h1, h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.08;
  text-transform: none;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
h3, h4 {
  margin: 0;
  font-family: var(--police);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  overflow-wrap: break-word;
}

/* Les petits titres d'interface restent en sans : le serif est
   réservé aux titres de sections, de pages et de fiches. */
.resume h2, .tiroir__tete h2, .confirmation h2, .pied__bloc h2 {
  font-family: var(--police); font-weight: 600;
  letter-spacing: 0; text-transform: none;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Texte encore entre crochets dans config.js */
.todo {
  background: #FFF8E8;
  box-shadow: inset 0 -1px 0 #E4C475;
  color: #7A5A12;
  border-radius: 2px;
  padding: 0 .08em;
}

.masque {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.evite {
  position: absolute; top: -60px; left: 12px; z-index: 300;
  background: var(--encre); color: var(--sur-encre); padding: .6rem 1rem; border-radius: var(--arrondi);
}
.evite:focus { top: 12px; }

/* ---------- Structure ---------- */
.zone { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--serree { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.section--grise { background: var(--gris-05); }

.tete-section {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .75rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.tete-section h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -.02em; }
.tete-section p { color: var(--encre-2); font-size: .95rem; margin-top: .35rem; }

.titre-page { padding-block: clamp(1.75rem, 4.5vw, 3rem) clamp(1.1rem, 2.75vw, 1.9rem); }
.titre-page h1 { font-size: clamp(2rem, 4vw, 3rem); }
.titre-page p { color: var(--encre-2); margin-top: .6rem; max-width: 62ch; }

.surlignage {
  font-size: .74rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
}

.fil {
  display: flex; flex-wrap: wrap; gap: .4rem;
  font-size: .8rem; color: var(--encre-3); padding-block: 1rem;
}
.fil a:hover { color: var(--encre); text-decoration: underline; }

/* ---------- Boutons ----------
   L'or plutôt que l'encre : sur fond de nuit, un aplat sombre ne
   se détache de rien. C'est le bouton de la bannière d'accueil,
   devenu celui de tout le site. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.6rem;
  background: var(--accent); color: var(--sur-accent);
  border: 1px solid var(--accent); border-radius: 999px;
  font-size: .84rem; font-weight: 600; text-align: center;
  text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 14px 34px -16px rgba(224, 168, 92, .65);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.bouton:hover { background: #EFBB73; border-color: #EFBB73; transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(224, 168, 92, .8); }
.bouton:active { transform: translateY(0); box-shadow: 0 8px 20px -14px rgba(224, 168, 92, .7); }
.bouton--vide { background: rgba(242, 239, 233, .05); color: var(--encre); border-color: var(--ligne-2); box-shadow: none; }
.bouton--vide:hover { background: rgba(242, 239, 233, .12); border-color: var(--encre); box-shadow: none; transform: none; }
.bouton--pleine { width: 100%; }
.bouton--petit { min-height: 38px; padding: .45rem 1.1rem; font-size: .8rem; }
.bouton[disabled] { opacity: .45; pointer-events: none; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em;
}
.lien-fleche::after { content: '→'; transition: transform var(--transition); }
.lien-fleche:hover::after { transform: translateX(3px); }

.lien-mini {
  font-size: .8rem; color: var(--encre-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.lien-mini:hover { color: var(--promo); }

/* ---------- Bandeau d'annonce ----------
   Un liseré chaud plutôt qu'un aplat : la nuit commence dès le
   premier pixel de la page, l'or ne fait que la souligner. */
.annonce {
  background: rgba(224, 168, 92, .10);
  color: var(--or);
  text-align: center; padding: .55rem var(--marge);
  font-size: .76rem; letter-spacing: .04em;
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10, 19, 32, .78);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--ligne);
  transition: background 320ms ease, border-color 320ms ease;
}
.entete.colle { box-shadow: 0 1px 20px -8px rgba(0, 0, 0, .8); }

/* Au-dessus de la bannière d'accueil, l'en-tête s'efface presque :
   le bandeau, le menu et la bannière ne font plus qu'un seul bloc.
   Il n'y a plus de couleurs à inverser — le site est nocturne de
   bout en bout —, seulement un voile à alléger. */
.entete.sur-banniere {
  background: rgba(10, 19, 32, .34);
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .entete { transition: none; }
}
.entete__in {
  display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem);
  height: var(--entete-h);
  max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge);
}

.logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--police-titre);
  font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em;
  white-space: nowrap; flex: none;
  perspective: 400px;
}
.logo__ecusson {
  width: 28px; height: 28px; flex: none;
  transition: transform 260ms cubic-bezier(.2, .6, .3, 1);
}
.logo:hover .logo__ecusson { transform: rotateY(24deg) rotateX(-8deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .logo__ecusson, .logo:hover .logo__ecusson { transform: none; transition: none; }
}
@media (max-width: 420px) { .logo__ecusson { width: 24px; height: 24px; } }

.nav { margin-inline: auto; }
.nav > ul { display: flex; gap: clamp(.75rem, 1.8vw, 1.6rem); }
.nav > ul > li > a {
  position: relative; display: block; padding: .35rem 0;
  font-size: .9rem; color: var(--encre-2);
  transition: color var(--transition);
}
.nav > ul > li > a:hover { color: var(--encre); }
.nav > ul > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--encre); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav > ul > li > a:hover::after { transform: scaleX(1); }
.nav > ul > li > a[aria-current] { color: var(--encre); font-weight: 500; }
.nav > ul > li > a[aria-current]::after { transform: scaleX(1); }

/* --- Sous-menu « Boutique » --- */
.nav__item { position: relative; }
.nav__bouton {
  display: flex; align-items: center; gap: .3rem;
  padding: .35rem 0; font-size: .9rem; color: var(--encre-2);
  transition: color var(--transition);
}
.nav__bouton { position: relative; }
.nav__bouton:hover, .nav__bouton[aria-expanded="true"], .nav__bouton.actif { color: var(--encre); }
.nav__bouton.actif { font-weight: 500; }
/* même soulignement que les liens de premier niveau */
.nav__bouton::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--encre); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.nav__bouton.actif::after, .nav__bouton:hover::after { transform: scaleX(1); }
.nav__bouton svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--transition);
}
.nav__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.sous-menu {
  position: absolute; top: calc(100% + .55rem); left: 50%;
  transform: translateX(-50%);
  min-width: 232px; padding: .35rem;
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--arrondi);
  box-shadow: 0 16px 38px -20px rgba(20, 20, 26, .5);
  z-index: 70;
}
.sous-menu[hidden] { display: none; }
.sous-menu::before {           /* rattrape l'espace entre bouton et panneau */
  content: ''; position: absolute; left: 0; right: 0; top: -.55rem; height: .55rem;
}
/* les listes du panneau s'empilent : sans cela, la règle
   d'affichage horizontale du menu principal les mettrait en ligne */
.sous-menu ul { display: block; }
.sous-menu a {
  display: block; padding: .5rem .7rem; border-radius: 3px;
  font-size: .9rem; color: var(--encre-2);
  transition: background var(--transition), color var(--transition);
}
.sous-menu a:hover { background: var(--gris-10); color: var(--encre); }
.sous-menu__suite { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--ligne); }

/* Méga-menu « Catalogue » : deux colonnes, rayons + marques */
.sous-menu--mega { min-width: 540px; width: max-content; }
.sous-menu--mega .mega {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: .1rem .85rem;
  padding: .15rem .25rem;
}
.sous-menu--mega .mega__col { min-width: 0; }
.sous-menu--mega .mega__titre {
  margin: .4rem .7rem .25rem;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--encre-3);
}
.sous-menu--mega .mega__rayons { margin: 0; }
.sous-menu--mega .mega__rayon {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem;
}
.sous-menu--mega .mega__rayon small {
  font-size: .72rem; color: var(--encre-3); white-space: nowrap;
}
.sous-menu--mega .mega__marques {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 .5rem; margin: 0; padding: 0; list-style: none;
}
.sous-menu--mega .mega__marques a {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sous-menu--mega .mega__pied { margin: .35rem .7rem .1rem; }
.sous-menu--mega .mega__pied a { font-weight: 600; }

.actions { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.icone {
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--arrondi);
  color: var(--encre); transition: background var(--transition);
}
.icone:hover { background: var(--gris-10); }
.icone svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.compteur {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--accent); color: var(--sur-accent);
  font-size: .62rem; font-weight: 600; line-height: 1;
}

.burger { display: none; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { width: 18px; height: 1.6px; background: var(--encre); transition: transform var(--transition), opacity var(--transition); }
.burger.ouvert span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.menu-mobile { display: none; border-top: 1px solid var(--ligne); padding: .5rem var(--marge) 1.25rem; }
.menu-mobile a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--gris-15); font-size: 1rem; }

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .menu-mobile { display: block; }
  .menu-mobile[hidden] { display: none; }
  .logo { margin-inline: auto 0; }
}
@media (max-width: 420px) {
  .icone { width: 36px; height: 36px; }
  .logo { font-size: 1rem; }
}

/* =============================================================
   BANNIÈRE NOCTURNE
   -------------------------------------------------------------
   Une chaussure se photographie mal sur du blanc : le cuir, les
   coutures et les reflets s'y noient. Sur un fond profond, ils
   ressortent. Le reste du site garde sa clarté ; seule l'entrée
   bascule dans la nuit, et le contraste entre les deux fait
   l'effet.

   Palette : minuit bleuté, or chaud (l'accent du logo, remonté
   pour tenir sur fond sombre) et un turquoise de mer.
   ============================================================= */
.banniere-zone {
  position: relative; overflow: hidden; isolation: isolate;
  /* Les teintes viennent de la racine : c'est cette bannière qui
     les a données au reste du site. */
  background: linear-gradient(158deg, var(--nuit-2) 0%, #16304F 55%, var(--nuit-1) 100%);
  color: var(--clair);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

/* Deux halos qui respirent. Ils dérivent sur des durées premières
   entre elles (23 s et 31 s) : la figure ne se répète jamais tout
   à fait, et l'œil n'y voit pas de boucle. */
.banniere-zone::before,
.banniere-zone::after {
  content: ''; position: absolute; z-index: -2;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.banniere-zone::before {
  top: -22%; right: -12%;
  background: radial-gradient(circle, rgba(224, 168, 92, .34), transparent 68%);
  animation: halo1 23s ease-in-out infinite alternate;
}
.banniere-zone::after {
  bottom: -30%; left: -14%;
  background: radial-gradient(circle, rgba(64, 196, 199, .26), transparent 68%);
  animation: halo2 31s ease-in-out infinite alternate;
}
@keyframes halo1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.14); }
}
@keyframes halo2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(7%, -6%, 0) scale(.94); }
}

/* Grain : une nappe sombre unie paraît plastique. Ce bruit très
   fin lui rend une matière, sans peser (il est calculé par le
   navigateur, aucun fichier n'est téléchargé). */
.banniere-zone .zone { position: relative; z-index: 1; }
.banniere-zone .zone::before {
  content: ''; position: absolute; inset: -100px; z-index: -1;
  pointer-events: none; opacity: .34; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E");
}

/* Le trait lumineux qui referme la bannière : la nuit ne s'arrête
   pas net, elle s'éteint. */
.banniere-zone::marker { content: none; }

@media (prefers-reduced-motion: reduce) {
  .banniere-zone::before, .banniere-zone::after { animation: none; }
}

/* ---------- Bannière d'accueil ---------- */
.banniere {
  display: grid; gap: clamp(2rem, 4.5vw, 3.5rem); align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (min-width: 860px) { .banniere { grid-template-columns: 1fr 1fr; } }

.banniere__texte { display: grid; gap: 1.2rem; justify-items: start; }
.banniere__texte h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.05; letter-spacing: -.02em;
  color: var(--clair);
  /* Un souffle chaud derrière le titre : il décolle du fond au
     lieu d'y être posé. */
  text-shadow: 0 0 60px rgba(224, 168, 92, .28);
}
.banniere__texte p { color: rgba(242, 239, 233, .74); font-size: 1.06rem; max-width: 50ch; }
.banniere__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.banniere__texte .banniere__surtitre {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; color: var(--or);
}
.banniere__texte .banniere__surtitre::before {
  content: ''; width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--or), var(--mer));
}

/* Les boutons de la bannière n'ont plus rien de particulier :
   l'or et le contour clair sont devenus la règle du site. */

/* Plaque de verre plutôt que carton blanc : sur fond de nuit, une
   surface translucide bordée de lumière tient bien mieux qu'un
   aplat clair, qui ferait un trou dans l'image. */
.banniere__media {
  position: relative;
  aspect-ratio: 1 / 1; border-radius: clamp(18px, 3vw, 28px);
  background: rgba(242, 239, 233, .05);
  border: 1px solid rgba(242, 239, 233, .14);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8),
              inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Un liseré chaud en haut, comme une lumière rasante. */
.banniere__media::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(224, 168, 92, .16), transparent 42%);
}
.banniere__media .visuel {
  width: 84%; height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(21, 47, 82, .22));
}
/* l'emplacement gris « photo à venir » garde son cadrage plein */
.banniere__media .visuel--vide { width: 100%; height: 100%; }

/* Montage de chaussures du catalogue : trois photos, la principale
   en avant, deux qui débordent derrière en léger déséquilibre. */
.banniere__media--produits { background: none; box-shadow: none; position: relative;
  transition: opacity 240ms ease; }
.banniere__media--produits.banniere__media--fondu { opacity: 0; }

/* Vidéo de présentation : remplit le cadre carré du bandeau. */
.banniere__media--video { background: #000; overflow: hidden; padding: 0; }
.banniere__media--video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mini-carte {
  position: absolute; display: block; overflow: hidden;
  background: var(--plaque); border-radius: clamp(14px, 2vw, 20px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .72);
  transition: transform 240ms cubic-bezier(.2, .6, .3, 1), box-shadow 240ms ease;
}
.mini-carte img { width: 100%; height: 100%; object-fit: cover; }
.mini-carte--principal { width: 70%; aspect-ratio: 4 / 5; top: 6%; right: 4%; z-index: 2; }
.mini-carte--bas {
  width: 44%; aspect-ratio: 4 / 5; bottom: -4%; left: -2%; z-index: 1;
  transform: rotate(-5deg);
}
.mini-carte--haut {
  width: 36%; aspect-ratio: 4 / 5; top: -3%; left: 4%; z-index: 3;
  transform: rotate(4deg);
}
.mini-carte:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .85); }
.mini-carte__prix {
  position: absolute; bottom: .6rem; left: .6rem;
  background: var(--sur-encre); color: var(--clair);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  padding: .32rem .6rem; border-radius: 999px;
}

/* ---------- Emplacement / photo produit ---------- */
.visuel { width: 100%; height: 100%; object-fit: cover; }

.visuel--vide {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1rem; text-align: center;
  background: var(--gris-10);
  background-image: linear-gradient(135deg, rgba(0,0,0,.016) 25%, transparent 25%,
                    transparent 50%, rgba(0,0,0,.016) 50%, rgba(0,0,0,.016) 75%, transparent 75%);
  background-size: 14px 14px;
}
.visuel--vide svg {
  width: clamp(38px, 22%, 68px); height: auto;
  fill: none; stroke: var(--ligne-2); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.visuel--vide code {
  font-size: 10px; line-height: 1.35; color: var(--encre-3);
  word-break: break-all; max-width: 100%;
}

/* ---------- Grille de produits ---------- */
.grille {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem) clamp(.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
@media (max-width: 520px) { .grille { grid-template-columns: repeat(2, 1fr); gap: 1.25rem .75rem; } }

/* Arrivée des cartes : léger décalage entre chacune, pour que la
   grille se compose sous l'œil au lieu d'apparaître d'un bloc.
   Le retard est plafonné dans le script — au-delà d'une douzaine de
   cartes, l'attente se verrait plus qu'elle ne servirait. */
@keyframes entreeCarte {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}
.carte--entre { animation: entreeCarte 420ms cubic-bezier(.2, .7, .3, 1) both; }

/* Changement de filtre : la grille sortante s'efface brièvement.
   Sans cela, le remplacement est net au point de passer inaperçu. */
.grille--change { opacity: 0; transition: opacity 110ms ease-in; }

@media (prefers-reduced-motion: reduce) {
  .carte--entre { animation: entreeSobre 180ms ease-out both; animation-delay: 0s !important; }
  .grille--change { transition: none; }
}

.carte { position: relative; display: flex; flex-direction: column; }
.carte__media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--arrondi-l); background: var(--plaque);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8);
  transition: box-shadow var(--transition);
}
.carte__media { position: relative; }
.carte__media .visuel { transition: transform 400ms cubic-bezier(.2,.6,.3,1); }

/* Deuxième photo, en fondu par-dessus la première.
   Réservée aux appareils qui savent survoler : au doigt, elle ne
   s'afficherait jamais et ne ferait que peser. */
.visuel--apercu { display: none; }

@media (hover: hover) and (pointer: fine) {
  .visuel--apercu {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 320ms ease;
  }
  /* `:not([data-apercu])` : tant que l'adresse n'a pas été posée
     dans `src`, l'image est vide — la révéler afficherait un trou. */
  .carte:hover .visuel--apercu:not([data-apercu]) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .visuel--apercu { transition: none; }
}
.carte:hover .carte__media { box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .9); }
.carte:hover .carte__media img.visuel { transform: scale(1.04); }

.carte__etiq { position: absolute; top: .6rem; left: .6rem; display: grid; gap: .3rem; justify-items: start; }
.etiq {
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--encre); color: var(--sur-encre);
  font-size: .66rem; font-weight: 600; letter-spacing: .05em;
}
.etiq--promo { background: var(--promo); color: var(--sur-promo); }

.carte__coeur {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  /* Pastille sombre : elle se pose sur la photo, qui est claire. */
  background: rgba(10, 19, 32, .72); backdrop-filter: blur(6px);
  border-radius: 50%;
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.carte:hover .carte__coeur, .carte__coeur:focus-visible, .carte__coeur.actif { opacity: 1; transform: none; }
.carte__coeur svg { width: 16px; height: 16px; fill: none; stroke: var(--encre); stroke-width: 1.6; }
.carte__coeur.actif svg { fill: var(--promo); stroke: var(--promo); }
@media (hover: none) { .carte__coeur { opacity: 1; transform: none; } }

.carte__texte { padding-top: .95rem; display: grid; gap: .18rem; }
.carte__marque { font-size: .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }
.carte__nom { font-family: var(--police-serif); font-size: 1.08rem; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.carte__nom a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.carte__prix { font-size: .92rem; font-weight: 600; margin-top: .15rem; }
.carte__prix .est-promo { color: var(--promo); }
.carte__prix s { font-weight: 400; font-size: .84rem; margin-left: .4rem; }

/* ---------- Coloris d'un même modèle ----------
   Les puces portent le rang, pas la teinte : aucune couleur n'est
   nommée dans les données, et écrire « bleu » sur une paire
   bicolore tromperait. C'est la grande photo qui montre le
   coloris — elle change à chaque choix, et elle est bien plus
   lisible qu'une vignette de vingt pixels. */
.coloris { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }

.coloris__puce, .coloris__plus {
  min-width: 23px; height: 23px; padding: 0 .32rem;
  display: inline-grid; place-items: center;
  border: 1px solid var(--ligne-2); border-radius: 999px;
  font-size: .7rem; font-weight: 600; color: var(--encre-2);
  font-variant-numeric: tabular-nums; line-height: 1;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
/* `display: inline-grid` l'emporterait sur l'attribut `hidden`. */
.coloris__puce[hidden] { display: none; }

.coloris__puce:hover, .coloris__plus:hover { border-color: var(--encre); color: var(--encre); }
.coloris__puce.actif {
  background: var(--accent); border-color: var(--accent); color: var(--sur-accent);
}
.coloris__plus { border-style: dashed; }

/* ---------- État vide ---------- */
.vide {
  grid-column: 1 / -1;
  border: 1px dashed var(--ligne-2); border-radius: var(--arrondi-l);
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; text-align: center;
  background: var(--gris-05);
}
.vide h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.vide p { color: var(--encre-2); max-width: 52ch; margin-inline: auto; font-size: .92rem; }
.vide .bouton { margin-top: 1.25rem; }
.vide code { background: var(--gris-15); padding: .1rem .3rem; border-radius: 3px; }

/* ---------- Arguments (accueil) ---------- */
/* Des cartes claires plutôt qu'une grille au filet : c'est plus
   lumineux et plus proche d'un catalogue. */
.arguments { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); background: transparent; }
@media (min-width: 700px) {
  .arguments { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.argument {
  background: var(--gris-05); border-radius: var(--arrondi-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.argument h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.argument p { color: var(--encre-2); font-size: .92rem; line-height: 1.55; }

/* ---------- Rayons ---------- */
.rayons { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; }
.rayon {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--gris-15); border-radius: var(--arrondi-l);
  background: var(--blanc);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.rayon:hover { border-color: var(--encre); background: var(--gris-05); transform: translateY(-2px); }
.rayon span { font-weight: 500; font-size: .96rem; }
.rayon small { color: var(--encre-3); font-size: .8rem; white-space: nowrap; }

/* Encadré « Baskets » avec vidéo verticale : carte au format portrait
   9/16, la vidéo remplit l'encadré (rognage object-fit: cover) avec un
   voile sombre et le nom posé en bas. */
.rayon--video {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem;
  aspect-ratio: 9/16; min-height: 320px;
  padding: 1.1rem 1.2rem; overflow: hidden;
  border: none; background: var(--nuit-2);
}
.rayon--video:hover { background: var(--nuit-2); }
.rayon--video .rayon__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.rayon--video .rayon__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 20, .8), rgba(10, 14, 20, .18) 42%, rgba(10, 14, 20, 0) 65%);
}
.rayon--video .rayon__nom { position: relative; color: var(--clair); font-weight: 600; font-size: 1.05rem; }
.rayon--video .rayon__nb { position: relative; color: rgba(255, 255, 255, .82); }

/* ---------- Pagination du catalogue ---------- */
.pagination {
  display: grid; justify-items: center; gap: .75rem;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.pagination:empty { display: none; }
.pagination__etat, .pagination__fin { font-size: .88rem; color: var(--encre-2); }
.pagination .bouton { min-width: 260px; }

/* ---------- Page Rayons ---------- */
.rayons-page {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rayon-carte {
  display: grid; align-content: start; gap: .3rem;
  min-height: 130px; padding: 1.4rem;
  border: 1px solid var(--gris-15); border-radius: var(--arrondi-l);
  background: var(--blanc); box-shadow: 0 14px 34px -28px rgba(21, 33, 48, .35);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.rayon-carte:hover { border-color: var(--encre); background: var(--gris-05); transform: translateY(-2px); }
.rayon-carte__nom { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.rayon-carte__desc { font-size: .88rem; color: var(--encre-2); }
.rayon-carte__nb {
  margin-top: auto; padding-top: .6rem;
  font-size: .82rem; color: var(--encre-3);
}
.rayon-carte::after {
  content: '→'; justify-self: end; margin-top: -1.3rem;
  color: var(--encre-3); transition: transform var(--transition), color var(--transition);
}
.rayon-carte:hover::after { transform: translateX(3px); color: var(--encre); }

/* ---------- Marques ---------- */
.marques-bande { display: flex; flex-wrap: wrap; gap: .5rem; }
.marque-pastille {
  display: grid; gap: .1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--gris-15); border-radius: var(--arrondi-l);
  background: var(--blanc);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.marque-pastille:hover { border-color: var(--encre); background: var(--gris-05); transform: translateY(-2px); }
.marque-pastille span { font-size: .92rem; font-weight: 500; }
.marque-pastille small { font-size: .76rem; color: var(--encre-3); }

.alphabet {
  display: flex; flex-wrap: wrap; gap: .3rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--ligne); margin-bottom: 1.75rem;
}
.alphabet a {
  min-width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--ligne); border-radius: var(--arrondi);
  font-size: .85rem; font-weight: 500; color: var(--encre-2);
  transition: all var(--transition);
}
.alphabet a:hover { border-color: var(--encre); color: var(--encre); background: var(--gris-05); }

.marques-groupe { padding-top: 1.5rem; scroll-margin-top: calc(var(--entete-h) + 16px); }
.marques-groupe:first-child { padding-top: 0; }
.marques-groupe__lettre {
  font-size: .9rem; font-weight: 600; color: var(--encre-3);
  padding-bottom: .6rem; margin-bottom: .8rem; border-bottom: 1px solid var(--ligne);
}

/* =============================================================
   CARROUSEL 3D
   -------------------------------------------------------------
   Cinq paires en perspective, la centrale de face, les autres
   qui s'inclinent en s'éloignant. La profondeur vient de trois
   choses combinées : l'échelle, la rotation et l'assombrissement.
   Retirez-en une et l'illusion tombe.
   ============================================================= */
.coverflow {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(16px, 2.5vw, 26px);
  background: #0A1320;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

/* La photo centrale, floutée à l'extrême, sert de décor : la
   couleur de la paire baigne tout le bloc et change avec elle. */
.coverflow__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.coverflow__fond img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.22) blur(32px); transform: scale(1.15);
  transition: opacity 900ms ease;
}
.coverflow__voile {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(10, 19, 32, .32) 0%, rgba(10, 19, 32, .94) 100%);
}

.coverflow__dedans { position: relative; display: grid; justify-items: center; gap: 1.5rem; }

.coverflow__surtitre {
  display: inline-flex; align-items: center; gap: .8rem; margin: 0;
  font-size: .74rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: #E0A85C;
}
.coverflow__surtitre i { width: 36px; height: 1px; background: currentColor; opacity: .6; }

/* ---- la scène ---- */
.coverflow__scene {
  position: relative; width: 100%; height: 500px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.coverflow__scene:focus-visible { outline: 2px solid #E0A85C; outline-offset: 6px; border-radius: 12px; }

.coverflow__carte {
  position: absolute; width: 320px; height: 460px;
  border-radius: 18px; overflow: hidden;
  background: #171311; border: 1px solid rgba(255, 255, 255, .12);
  transform-origin: center center; cursor: pointer;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
  transition: transform 800ms cubic-bezier(.25, 1, .5, 1),
              opacity 800ms cubic-bezier(.25, 1, .5, 1),
              filter 800ms cubic-bezier(.25, 1, .5, 1),
              box-shadow 800ms ease;
}
.coverflow__carte.est-centre {
  cursor: default;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .9), 0 0 35px rgba(224, 168, 92, .28);
}
.coverflow__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coverflow__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.08) 26%,
                                      rgba(0,0,0,.68) 62%, rgba(0,0,0,.96) 100%);
}

/* Le texte n'apparaît que sur la carte de face : lisible sur
   celle-là, il ne serait que du bruit sur les autres. */
.coverflow__contenu {
  position: relative; height: 100%; padding: 1.1rem 1.1rem 1.3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: center; color: #fff;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}
.est-centre .coverflow__contenu { opacity: 1; transform: none; pointer-events: auto; }

.coverflow__marque {
  align-self: flex-end; font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
.coverflow__bas { display: grid; justify-items: center; gap: .3rem; }
.coverflow__bas h3 {
  font-size: 1.35rem; font-weight: 700; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .02em; margin: 0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .95);
}
.coverflow__trait {
  width: 34px; height: 2px; background: #E0A85C; border-radius: 2px;
  margin: .35rem 0 .2rem; box-shadow: 0 0 8px rgba(224, 168, 92, .7);
}
.coverflow__prix {
  margin: 0 0 .6rem; font-size: 1rem; font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}
.coverflow__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  background: linear-gradient(135deg, #E0A85C 0%, #A48256 100%);
  color: #110D0C; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 0 15px rgba(224, 168, 92, .3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.coverflow__cta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.coverflow__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 22px rgba(224,168,92,.45); }

/* ---- flèches et points ---- */
.coverflow__fleche {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; z-index: 40;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  transition: background 200ms ease, border-color 200ms ease;
}
.coverflow__fleche:hover { background: rgba(0, 0, 0, .78); border-color: rgba(255, 255, 255, .45); }
.coverflow__fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.coverflow__fleche--g { left: clamp(8px, 2vw, 24px); }
.coverflow__fleche--d { right: clamp(8px, 2vw, 24px); }

.coverflow__points { display: flex; align-items: center; gap: .5rem; }
.coverflow__point {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  transition: width 300ms ease, background 300ms ease, box-shadow 300ms ease;
}
.coverflow__point.actif {
  width: 28px; background: #E0A85C; box-shadow: 0 0 10px rgba(224, 168, 92, .7);
}

/* Sur petit écran, les cartes de côté sortiraient du cadre :
   on rapproche l'ensemble en réduisant la scène. */
@media (max-width: 720px) {
  .coverflow__scene { height: 420px; }
  .coverflow__carte { width: 240px; height: 350px; }
  .coverflow__bas h3 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .coverflow__carte, .coverflow__contenu { transition-duration: 200ms; }
}

/* ---------- Boutique : bande de rayons ----------
   Navigation du catalogue, au-dessus des résultats. Elle défile
   horizontalement sur mobile plutôt que de se replier : on doit
   pouvoir changer de rayon sans ouvrir le panneau de filtres. */
.rayons-bande {
  display: flex; gap: .4rem; margin-bottom: 1.25rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.rayons-bande::-webkit-scrollbar { display: none; }

.rayon-onglet {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--ligne);
  background: var(--blanc); color: var(--encre-2);
  font-size: .88rem; font-weight: 500; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.rayon-onglet:hover { border-color: var(--ligne-2); color: var(--encre); }
.rayon-onglet em {
  font-style: normal; font-size: .74rem; color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.rayon-onglet[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--sur-accent);
}
.rayon-onglet[aria-current="true"] em { color: rgba(20, 32, 46, .82); }

/* ---------- Boutique : filtres ---------- */
.boutique { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 940px) { .boutique { grid-template-columns: 220px 1fr; } }
/* Sans cela, une colonne de grille prend la largeur de son contenu le
   plus large — ici la bande de rayons — et pousse toute la page en
   travers sur mobile. Le zéro rend la main aux défilements internes. */
.boutique > * { min-width: 0; }

.filtres { display: grid; gap: 0; }
@media (min-width: 940px) {
  /* Collante, mais jamais plus haute que la fenêtre : sans cela le
     bas de la colonne (bouton « Effacer ») devient inatteignable
     dès qu'un groupe est déplié. */
  .filtres {
    position: sticky; top: calc(var(--entete-h) + 12px);
    max-height: calc(100vh - var(--entete-h) - 24px);
    overflow-y: auto; padding-right: .4rem;
  }
  .filtres::-webkit-scrollbar { width: 6px; }
  .filtres::-webkit-scrollbar-thumb { background: var(--ligne-2); border-radius: 3px; }
}
.filtres[hidden] { display: none; }

.fgroupe { border-bottom: 1px solid var(--ligne); }
.fgroupe[hidden] { display: none; }
.fgroupe > h3 { font-size: .82rem; font-weight: 600; margin-bottom: .6rem; }

/* En-tête repliable : la colonne reste courte même avec
   plusieurs dizaines de marques. */
.fgroupe__tete {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 0;
  font-size: .82rem; font-weight: 600; text-align: left;
  transition: color var(--transition);
}
.fgroupe__tete:hover { color: var(--accent); }
.fgroupe__tete i {
  width: 9px; height: 9px; flex: none;
  border-right: 1.6px solid var(--encre-3); border-bottom: 1.6px solid var(--encre-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
.fgroupe__tete[aria-expanded="true"] i { transform: rotate(225deg) translate(-2px, -2px); }
.fgroupe__corps { padding-bottom: 1rem; }
.fgroupe__corps[hidden] { display: none; }
.fgroupe--action { border-bottom: 0; padding-top: 1rem; }

/* Liste défilante pour les filtres à forte cardinalité */
.cases--defilante {
  max-height: 244px; overflow-y: auto;
  padding-right: .35rem; margin-top: .5rem;
}
.cases--defilante::-webkit-scrollbar { width: 6px; }
.cases--defilante::-webkit-scrollbar-thumb { background: var(--ligne-2); border-radius: 3px; }
.case[hidden] { display: none; }   /* display:flex l'emporterait sur [hidden] */

.filtre-chercher input {
  min-height: 36px; padding: .4rem .6rem; font-size: .85rem;
}
.filtre-vide { font-size: .82rem; color: var(--encre-3); padding-top: .5rem; }
.filtre-vide[hidden] { display: none; }

.cases { display: grid; gap: .3rem; }
.case { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--encre-2); cursor: pointer; }
.case:hover { color: var(--encre); }
.case input { position: absolute; opacity: 0; width: 0; height: 0; }
.case i {
  width: 16px; height: 16px; flex: none; border-radius: 3px;
  border: 1px solid var(--ligne-2); background: rgba(242, 239, 233, .06);
  display: grid; place-items: center;
  transition: background var(--transition), border-color var(--transition);
}
.case i::after {
  content: ''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 1.8px solid var(--sur-encre); border-bottom: 1.8px solid var(--sur-encre);
  transform: rotate(-45deg) scale(0); transition: transform var(--transition);
}
.case input:checked + i { background: var(--encre); border-color: var(--encre); }
.case input:checked + i::after { transform: rotate(-45deg) scale(1); }
.case input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.case input:checked ~ span { color: var(--encre); font-weight: 500; }
.case em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--encre-3); }

.puces { display: flex; flex-wrap: wrap; gap: .3rem; }
.puce input { position: absolute; opacity: 0; width: 0; height: 0; }
.puce span {
  display: grid; place-items: center; min-width: 40px; height: 34px; padding-inline: .4rem;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  font-size: .85rem; cursor: pointer;
  transition: all var(--transition);
}
.puce span:hover { border-color: var(--encre); }
.puce input:checked + span { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }
.puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.curseur { width: 100%; accent-color: var(--accent); }
.curseur-val { display: flex; justify-content: space-between; font-size: .82rem; color: var(--encre-2); margin-top: .35rem; }

/* Barre d'outils collante.
   Sur 1 566 articles, on défile longtemps : le nombre de résultats
   et le tri doivent rester sous la main. Elle se cale sous l'en-tête
   — jamais par-dessus, sinon elle masquerait la première rangée. */
.barre-outils {
  position: sticky; top: var(--entete-h); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem 0 .8rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ligne);
  /* Le fond de page, pas celui des blocs : les cartes passent
     derrière la barre, elles ne doivent rien laisser voir. */
  background: var(--nuit-1);
}
/* Le fond déborde légèrement sur les côtés : sans cela, on verrait
   les cartes défiler dans l'interstice entre la barre et la marge. */
.barre-outils::before {
  content: ''; position: absolute; inset: 0 -1rem; z-index: -1;
  background: var(--nuit-1);
}
.barre-outils__nb { font-size: .88rem; color: var(--encre-2); }

.choix { position: relative; display: inline-flex; align-items: center; }
.choix select {
  appearance: none; padding: .5rem 2rem .5rem .75rem;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  background: var(--blanc); font-size: .88rem; cursor: pointer;
}
.choix::after { content: '⌄'; position: absolute; right: .75rem; top: .1rem; pointer-events: none; color: var(--encre-2); }
.choix select:hover { border-color: var(--encre); }

.jetons { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.jeton {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--gris-10); border: 1px solid var(--ligne);
  font-size: .82rem;
}
.jeton::after { content: '×'; color: var(--encre-3); font-size: 1rem; line-height: 1; }
.jeton:hover { border-color: var(--encre); }

.bouton-filtres { display: none; }
@media (max-width: 939px) { .bouton-filtres { display: inline-flex; } }

/* Pastille de comptage sur le bouton « Filtrer ».
   Panneau replié, rien n'indiquait qu'un filtre était actif : on
   pouvait chercher longtemps pourquoi le catalogue semblait vide. */
.bouton-filtres__nb {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 .35rem; margin-left: .1rem;
  border-radius: 999px; background: var(--accent); color: var(--sur-accent);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bouton-filtres__nb[hidden] { display: none; }

/* ---------- Fiche produit ---------- */
.fiche { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .fiche { grid-template-columns: 1.15fr .85fr; } }
/* Sans cela, la colonne prend la largeur de son contenu le plus
   large — la bande des vingt-trois coloris — et pousse toute la
   page en travers. Le zéro rend la main au défilement interne. */
.fiche > *, .fiche__infos > * { min-width: 0; }

.galerie { display: grid; gap: .6rem; }
@media (min-width: 900px) { .galerie { position: sticky; top: calc(var(--entete-h) + 12px); } }
.galerie__grande {
  aspect-ratio: 1 / 1; border-radius: var(--arrondi-l); overflow: hidden;
  background: var(--plaque); cursor: zoom-in;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .85);
}
.galerie__grande .visuel { transition: transform 320ms cubic-bezier(.2,.6,.3,1); }
.galerie__grande.zoom { cursor: zoom-out; }
.galerie__grande.zoom .visuel { transform: scale(1.9); }
@media (prefers-reduced-motion: reduce) {
  .galerie__grande .visuel { transition: none; }
}
.galerie__vignettes { display: flex; gap: .5rem; flex-wrap: wrap; }
.vignette {
  width: 72px; aspect-ratio: 1; overflow: hidden; background: var(--plaque);
  border: 1px solid transparent; border-radius: var(--arrondi);
  transition: border-color var(--transition);
}
.vignette[aria-pressed="true"] { border-color: var(--encre); }
.vignette:hover { border-color: var(--ligne-2); }

.fiche__infos { display: grid; gap: 1.2rem; }
.fiche__marque { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); font-weight: 600; }
.fiche__titre { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; }
.fiche__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; font-size: 1.35rem; font-weight: 600; }
.fiche__prix s { font-size: 1rem; font-weight: 400; }
.fiche__prix .remise { font-size: .78rem; font-weight: 600; color: var(--sur-promo); background: var(--promo); padding: .15rem .4rem; border-radius: 3px; }
.fiche__desc { color: var(--encre-2); }

.dispo { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; color: var(--encre-2); }
.dispo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--dispo); }

.etiquette-champ { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.etiquette-champ h3 { font-size: .88rem; font-weight: 600; }

.tailles { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .4rem; }
.taille {
  position: relative; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  font-size: .9rem; background: rgba(242, 239, 233, .05);
  transition: all var(--transition);
}
.taille:hover:not([disabled]) { border-color: var(--encre); }
.taille[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }

/* ---------- Coloris sur la fiche produit ----------
   Ici, contrairement à la grille du catalogue, on montre les vraies
   photos : une seule fiche est à l'écran. La bande défile
   horizontalement plutôt que de s'empiler sur six rangées — vingt-
   trois coloris repousseraient sinon le choix de la pointure et le
   bouton d'achat hors de l'écran. */
.coloris-fiche {
  display: flex; gap: .45rem;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: .2rem;
}
.coloris-fiche::-webkit-scrollbar { display: none; }

.coloris-fiche__rang {
  font-size: .8rem; color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}

.coloris-vue {
  flex: none; scroll-snap-align: start;
  width: 62px; aspect-ratio: 1; overflow: hidden;
  background: var(--plaque);
  border: 1px solid transparent; border-radius: var(--arrondi);
  transition: border-color var(--transition), transform var(--transition);
}
.coloris-vue:hover { border-color: var(--ligne-2); transform: translateY(-2px); }
.coloris-vue.actif { border-color: var(--accent); }
.coloris-vue .visuel { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .coloris-vue:hover { transform: none; }
}

.quantite {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  width: fit-content; justify-self: start;
}
.quantite button { width: 40px; height: 44px; display: grid; place-items: center; font-size: 1.05rem; color: var(--encre-2); }
.quantite button:hover { background: var(--gris-10); color: var(--encre); }
.quantite span { min-width: 34px; text-align: center; font-size: .92rem; font-weight: 500; }
.quantite--mini button { width: 28px; height: 28px; font-size: .9rem; }
.quantite--mini span { min-width: 26px; font-size: .84rem; }

.achat { display: flex; gap: .5rem; align-items: stretch; }
.achat .bouton { flex: 1; }
.coeur-grand {
  width: 48px; display: grid; place-items: center;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  transition: all var(--transition);
}
.coeur-grand:hover { border-color: var(--encre); }
.coeur-grand svg { width: 20px; height: 20px; fill: none; stroke: var(--encre); stroke-width: 1.6; }
.coeur-grand.actif { border-color: var(--promo); }
.coeur-grand.actif svg { fill: var(--promo); stroke: var(--promo); }

.services { display: grid; gap: .55rem; padding-top: .25rem; }
.services li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--encre-2); }
.services li::before { content: '—'; color: var(--accent); }

/* ---------- Accordéon ---------- */
.accordeon { border-top: 1px solid var(--ligne); }
.accordeon__item { border-bottom: 1px solid var(--ligne); }
.accordeon__bouton {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 0; text-align: left; font-size: .92rem; font-weight: 500;
}
.accordeon__bouton i { font-style: normal; font-size: 1.15rem; color: var(--encre-3); transition: transform var(--transition); }
.accordeon__bouton[aria-expanded="true"] i { transform: rotate(45deg); }
.accordeon__panneau { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms cubic-bezier(.2,.6,.3,1); }
.accordeon__panneau[data-ouvert="true"] { grid-template-rows: 1fr; }
.accordeon__panneau > div { overflow: hidden; }
.accordeon__panneau p, .accordeon__panneau ul { padding-bottom: 1rem; color: var(--encre-2); font-size: .9rem; }
.accordeon__panneau li { padding-block: .12rem; }
.accordeon__panneau li::before { content: '— '; color: var(--ligne-2); }

/* ---------- Panier ---------- */
.panier { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 920px) { .panier { grid-template-columns: 1fr 340px; } }

.lignep {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--ligne); align-items: center;
}
.lignep:first-child { border-top: 1px solid var(--ligne); }
.lignep__media { aspect-ratio: 4/5; border-radius: var(--arrondi); overflow: hidden; background: var(--plaque); }
.lignep__texte { display: grid; gap: .2rem; }
.lignep__texte h3 { font-size: 1rem; font-weight: 500; }
.lignep__marque { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.lignep__meta { font-size: .85rem; color: var(--encre-2); }
.lignep__fin { display: grid; gap: .4rem; justify-items: end; text-align: right; }
.lignep__prix { font-weight: 600; }
@media (max-width: 560px) {
  .lignep { grid-template-columns: 76px 1fr; }
  .lignep__fin { grid-column: 2; justify-items: start; text-align: left; }
}

.resume {
  border: 1px solid var(--gris-15); border-radius: var(--arrondi-l);
  padding: clamp(1.2rem, 2.5vw, 1.6rem); display: grid; gap: 1.1rem;
  background: var(--blanc); box-shadow: var(--ombrage);
}
@media (min-width: 920px) { .resume { position: sticky; top: calc(var(--entete-h) + 12px); } }
.resume h2 { font-size: 1.05rem; }

.recap { display: grid; gap: .4rem; margin: 0; font-size: .92rem; }
.recap > div { display: flex; justify-content: space-between; gap: 1rem; }
.recap dt, .recap dd { margin: 0; }
.recap dt { color: var(--encre-2); }
.recap .est-promo dt, .recap .est-promo dd { color: var(--promo); }
.recap__total { padding-top: .7rem; border-top: 1px solid var(--ligne); font-size: 1.05rem; font-weight: 600; }
.recap__total dt { color: var(--encre); }

.franco { display: grid; gap: .4rem; }
.franco__jauge { height: 4px; border-radius: 2px; background: var(--gris-15); overflow: hidden; }
.franco__jauge i { display: block; height: 100%; background: var(--dispo); transition: width 400ms; }
.franco p { font-size: .82rem; color: var(--encre-2); }
.franco__ok { color: var(--dispo); font-weight: 500; }

.promo-forme { display: flex; gap: .4rem; }
.promo-forme input { flex: 1; min-width: 0; }

/* ---------- Formulaires ---------- */
.champ { display: grid; gap: .3rem; }
.champ > label, .mini-label { font-size: .82rem; font-weight: 500; color: var(--encre-2); }

input[type=text], input[type=email], input[type=tel], input[type=search],
input[type=password], select.simple, textarea {
  width: 100%; min-height: 44px; padding: .6rem .75rem;
  background: rgba(242, 239, 233, .05); color: var(--encre);
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  font-size: .95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Remplissage automatique du navigateur. Chrome impose son propre
   fond clair et son texte noir : sans ces trois lignes, l'adresse
   e-mail enregistrée s'affichait dans un rectangle blanc au milieu
   d'un formulaire nocturne. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--encre);
  -webkit-box-shadow: 0 0 0 1000px var(--gris-10) inset;
  caret-color: var(--encre);
}
input:focus, textarea:focus, select.simple:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--promo); }
textarea { min-height: 120px; resize: vertical; }
::placeholder { color: var(--encre-3); }

.erreur { color: var(--promo); font-size: .8rem; min-height: 1em; }

/* Anti-robot. Le bloc reste dans le HTML même sans clé publique :
   il ne prend alors aucune place, et le formulaire ne bouge pas
   d'un pixel le jour où l'on active la vérification. */
.antirobot:empty { display: none; }
.antirobot { margin-top: .9rem; }

.formulaire { display: grid; gap: .9rem; }
@media (min-width: 640px) { .formulaire--2 { grid-template-columns: 1fr 1fr; } }
.formulaire .pleine { grid-column: 1 / -1; }

.radio-carte input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-carte span {
  display: grid; gap: .1rem; padding: .9rem 1rem; cursor: pointer;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  transition: border-color var(--transition), background var(--transition);
}
.radio-carte strong { font-weight: 500; font-size: .95rem; }
.radio-carte em { font-style: normal; font-size: .85rem; color: var(--encre-2); }
.radio-carte b { font-weight: 600; font-size: .9rem; }
.radio-carte input:checked + span { border-color: var(--encre); background: var(--gris-05); }
.radio-carte input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Tunnel de commande ---------- */
.etapes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.etape {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border: 1px solid var(--ligne); border-radius: 999px;
  font-size: .84rem; color: var(--encre-3);
}
.etape b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--gris-15); font-size: .7rem; }
.etape.active { border-color: var(--encre); color: var(--encre); }
.etape.active b { background: var(--encre); color: var(--sur-encre); }
.etape.faite b { background: var(--dispo); color: var(--sur-encre); }

.confirmation { max-width: 620px; margin-inline: auto; text-align: center; display: grid; gap: 1.1rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
.confirmation__coche { width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; background: var(--dispo); display: grid; place-items: center; }
.confirmation__coche svg { width: 30px; height: 30px; fill: none; stroke: var(--sur-encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.confirmation__ref { display: inline-block; padding: .55rem .9rem; border: 1px dashed var(--ligne-2); border-radius: var(--arrondi); font-size: .92rem; }
.confirmation .recap { text-align: left; border: 1px solid var(--ligne); border-radius: var(--arrondi-l); padding: 1.1rem; }

/* ---------- Tiroir panier ---------- */
.voile {
  position: fixed; inset: 0; z-index: 80; background: rgba(3, 8, 14, .66);
  opacity: 0; transition: opacity 260ms;
}
.voile.ouvert { opacity: 1; }

.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(410px, 100%); background: var(--blanc);
  border-left: 1px solid var(--ligne);
  display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform 300ms cubic-bezier(.2,.6,.3,1);
}
.tiroir.ouvert { transform: none; }
.tiroir[hidden] { display: none; }   /* display:grid l'emporterait sur [hidden] */
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem; border-bottom: 1px solid var(--ligne); }
.tiroir__tete h2 { font-size: 1rem; }
.tiroir__tete span { color: var(--encre-3); font-weight: 400; }
.tiroir__corps { overflow-y: auto; padding-inline: 1.15rem; }
.tiroir__pied { padding: 1rem 1.15rem; border-top: 1px solid var(--ligne); display: grid; gap: .6rem; }
.tiroir__pied:empty { display: none; }
.tiroir__vide { padding: 3rem 0; display: grid; gap: 1rem; justify-items: start; }
.tiroir__vide p { color: var(--encre-2); }

.mini { display: grid; grid-template-columns: 62px 1fr auto; gap: .75rem; padding-block: .9rem; border-bottom: 1px solid var(--gris-15); align-items: start; }
.mini__media { aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: var(--plaque); }
.mini__texte { display: grid; gap: .1rem; }
.mini__texte h3 { font-size: .9rem; font-weight: 500; }
.mini__marque { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.mini__meta { font-size: .8rem; color: var(--encre-2); }
.mini__texte .quantite { margin-top: .35rem; }
.mini__fin { display: grid; gap: .3rem; justify-items: end; }
.mini__prix { font-size: .88rem; font-weight: 600; }

/* ---------- Recherche ---------- */
.recherche {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(3, 8, 14, .58); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 200ms;
  padding-top: clamp(50px, 9vh, 110px);
}
.recherche.ouvert { opacity: 1; }
.recherche__boite {
  width: min(660px, calc(100% - 1.5rem)); margin-inline: auto;
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--arrondi-l);
  max-height: 76vh; display: grid; grid-template-rows: auto 1fr;
  transform: translateY(-8px); transition: transform 220ms cubic-bezier(.2,.6,.3,1);
  box-shadow: 0 26px 70px -20px rgba(0, 0, 0, .8);
}
.recherche.ouvert .recherche__boite { transform: none; }
.recherche__champ { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ligne); }
.recherche__champ svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--encre-3); stroke-width: 1.6; stroke-linecap: round; }
.recherche__champ input { border: 0; min-height: 36px; padding: 0; font-size: 1rem; }
.recherche__champ input:focus { box-shadow: none; }
.recherche__champ button { font-size: .72rem; color: var(--encre-3); border: 1px solid var(--ligne); border-radius: 3px; padding: .2rem .4rem; }
.recherche__resultats { overflow-y: auto; padding: .75rem 1rem 1rem; }
.recherche__note { font-size: .8rem; color: var(--encre-3); margin-bottom: .5rem; }
.recherche__note code { background: var(--gris-10); padding: .1rem .3rem; border-radius: 3px; }
.recherche__liste li + li { border-top: 1px solid var(--gris-15); }
.recherche__liste a { display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; padding-block: .55rem; }
.recherche__liste a:hover { opacity: .65; }
.recherche__vignette { aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: var(--plaque); }
.recherche__nom { font-size: .92rem; }
.recherche__nom em { display: block; font-style: normal; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.recherche__prix { font-size: .88rem; font-weight: 600; }

/* ---------- Notifications ---------- */
.notifs { position: fixed; left: 50%; bottom: 20px; z-index: 120; transform: translateX(-50%); display: grid; gap: .4rem; width: min(340px, calc(100% - 1.5rem)); }
.notif {
  background: var(--encre); color: var(--sur-encre); padding: .7rem 1rem;
  border-radius: var(--arrondi); font-size: .88rem;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.6);
  animation: monte 220ms cubic-bezier(.2,.6,.3,1);
}
.notif.part { animation: descend 380ms forwards; }
@keyframes monte { from { opacity: 0; transform: translateY(10px); } }
@keyframes descend { to { opacity: 0; transform: translateY(8px); } }

/* ---------- Pied de page ---------- */
/* ---------- Pied de page ----------
   Le pied ne commence plus par un trait net mais par deux vagues :
   une boutique d'archipel, et une transition douce plutôt qu'une
   coupure franche entre le contenu et les mentions. */
.pied {
  position: relative;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  background: var(--gris-05);
}

.pied__vagues {
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(48px, 7vw, 84px);
  overflow: hidden; pointer-events: none;
  line-height: 0;
}
.pied__vagues svg { display: block; width: 100%; height: 100%; }

.vague { fill: var(--gris-05); }

/* Celle du fond est plus claire et dérive plus lentement : deux
   vitesses suffisent à donner de la profondeur. */
.vague--fond {
  fill: var(--gris-10);
  animation: derive 26s linear infinite;
}
.vague--avant { animation: derive 18s linear infinite reverse; }

/* Le motif mesure deux largeurs : reculer d'une largeur ramène
   exactement au même dessin. */
@keyframes derive {
  from { transform: translateX(0); }
  to   { transform: translateX(-1440px); }
}

/* Une lueur très douce derrière le nom de la boutique — la touche
   moelleuse, sans rien coûter en lisibilité. */
.pied__haut::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 12% 0%, var(--accent-doux), transparent 70%);
  opacity: .55; pointer-events: none;
}
.pied__haut > * { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .vague--fond, .vague--avant { animation: none; }
}
.pied__haut {
  position: relative;
  max-width: var(--largeur); margin-inline: auto; padding: clamp(2.5rem, 5vw, 3.75rem) var(--marge);
  display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pied__bloc h2 {
  font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: .85rem;
}
.pied__bloc li { padding-block: .25rem; }
.pied__bloc a { font-size: .89rem; color: var(--encre-2); }
.pied__bloc a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 2px; }
.pied__nom { font-family: var(--police-titre); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; }
.pied__baseline { font-family: var(--police-serif); font-size: 1rem; color: var(--encre-2); margin-top: .5rem; max-width: 34ch; line-height: 1.45; }
.pied__reseaux { display: flex; gap: .8rem; margin-top: .9rem; }
.pied__contact { font-size: .89rem; color: var(--encre-2); }
.pied__contact + .pied__contact { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--ligne); }
.pied__bas {
  max-width: var(--largeur); margin-inline: auto; padding: 1rem var(--marge);
  border-top: 1px solid var(--ligne);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: var(--encre-3);
}
.pied__bas a:hover { color: var(--encre); }

/* ---------- Page à propos ---------- */
.texte-long { max-width: 66ch; display: grid; gap: 1.1rem; }
.texte-long p { color: var(--encre-2); font-size: 1rem; line-height: 1.6; }
.texte-long p:first-child {
  font-family: var(--police-serif); font-size: 1.3rem; line-height: 1.5; color: var(--encre);
}
@media (min-width: 640px) { .texte-long p:first-child { font-size: 1.45rem; } }
/* ---------- Page d'erreur ---------- */
.erreur-page {
  display: grid; justify-items: center; gap: .9rem; text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}
.erreur-page__code {
  font-family: var(--police-titre); font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1;
  color: var(--gris-15); letter-spacing: -.04em;
}
.erreur-page h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.erreur-page p { color: var(--encre-2); max-width: 46ch; }
.erreur-page__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }

/* ---------- Mon espace ---------- */
.commandes { display: grid; gap: .75rem; }
.commande {
  border: 1px solid var(--gris-15); border-radius: var(--arrondi-l);
  padding: 1.25rem; background: var(--blanc); box-shadow: 0 12px 32px -28px rgba(21, 33, 48, .3);
}
.commande__tete {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
  align-items: baseline; padding-bottom: .7rem; border-bottom: 1px solid var(--ligne);
}
.commande__tete strong { font-size: .95rem; }
.commande__tete span { font-size: .85rem; color: var(--encre-3); }
.commande__lignes { padding-block: .7rem; display: grid; gap: .3rem; }
.commande__lignes li {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem;
  color: var(--encre-2);
}
.commande__total {
  display: flex; justify-content: space-between; padding-top: .7rem;
  border-top: 1px solid var(--ligne); font-size: .95rem;
}

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 340px; } }
.carte-info { border: 1px solid var(--gris-15); border-radius: var(--arrondi-l); padding: 1.4rem; display: grid; gap: 1.1rem; background: var(--blanc); box-shadow: var(--ombrage); }
.carte-info h3 { font-size: 1rem; }
.info-ligne { display: grid; gap: .15rem; padding-top: .85rem; border-top: 1px solid var(--ligne); }
.info-ligne:first-of-type { padding-top: 0; border-top: 0; }
.info-ligne b { font-size: .78rem; font-weight: 600; color: var(--encre-3); }
.info-ligne p, .info-ligne a { font-size: .92rem; }
.info-ligne a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Assistance ---------- */
/* La pile flottante : WhatsApp au-dessus, aide en dessous.
   `justify-items: end` garde les deux alignés à droite quels que
   soient leurs largeurs — la bulle est ronde, le bouton allongé. */
.aide {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: grid; gap: .55rem; justify-items: end;
}

.bulle-whatsapp {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .9);
  transition: transform var(--transition), box-shadow var(--transition);
}
.bulle-whatsapp svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.bulle-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(37, 211, 102, 1);
}
.bulle-whatsapp:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* Le panneau d'aide s'ouvre au-dessus de toute la pile. */
@media (prefers-reduced-motion: reduce) {
  .bulle-whatsapp:hover { transform: none; }
}

.aide__bouton {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--encre); color: var(--sur-encre); font-size: .9rem; font-weight: 500;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .85);
  transition: background var(--transition), transform var(--transition);
}
.aide__bouton:hover { background: #FFFFFF; transform: translateY(-1px); }
.aide__bouton svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.aide__panneau {
  position: absolute; right: 0; bottom: calc(100% + .6rem);
  width: min(360px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--arrondi-l);
  box-shadow: 0 24px 60px -24px rgba(21, 47, 82, .5);
  overflow: hidden;
}
.aide__panneau[hidden] { display: none; }

.aide__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--ligne);
}
.aide__titre { font-weight: 600; }
.aide__chercher { display: block; padding: .75rem 1rem 0; }
.aide__chercher input { min-height: 38px; font-size: .9rem; }

.aide__reponses { overflow-y: auto; padding: .75rem 1rem; flex: 1; }
.aide__item { border-bottom: 1px solid var(--gris-15); }
.aide__item:last-child { border-bottom: 0; }
.aide__item summary {
  cursor: pointer; padding: .6rem 0; font-size: .88rem; font-weight: 500;
  list-style: none;
}
.aide__item summary::-webkit-details-marker { display: none; }
.aide__item summary::before { content: '+ '; color: var(--encre-3); }
.aide__item[open] summary::before { content: '– '; }
.aide__item p { padding: 0 0 .7rem .9rem; font-size: .86rem; color: var(--encre-2); }
.aide__vide { font-size: .86rem; color: var(--encre-2); padding: .5rem 0; }

.aide__contact {
  display: grid; gap: .4rem; justify-items: center;
  padding: .85rem 1rem; border-top: 1px solid var(--ligne); background: var(--gris-05);
}
.aide__sous { font-size: .84rem; color: var(--encre-2); margin-bottom: .2rem; }

@media (max-width: 620px) { .aide { right: 12px; bottom: 12px; } }

/* ---------- Retour en haut ---------- */
.haut {
  position: fixed; right: 18px; bottom: 76px; z-index: 70;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--encre); color: var(--sur-encre);
  border-radius: 50%; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { background: #FFFFFF; }
.haut svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 620px) { .haut { right: 12px; bottom: 70px; } }

/* ---------- Aide à la saisie ---------- */
.maquette { position: fixed; left: 14px; bottom: 14px; z-index: 130; font-size: .8rem; }
.maquette__pastille {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .75rem; border-radius: 999px;
  background: var(--encre); color: var(--sur-encre);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.7);
}
.maquette__point { width: 7px; height: 7px; border-radius: 50%; background: #E4C475; flex: none; }
.maquette__panneau {
  position: absolute; bottom: calc(100% + .5rem); left: 0;
  width: min(340px, calc(100vw - 28px)); max-height: 60vh; overflow: auto;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--arrondi-l);
  padding: .9rem 1rem; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
}
.maquette__titre { font-weight: 600; margin-bottom: .5rem; }
.maquette__ligne { color: var(--encre-2); margin-top: .5rem; }
.maquette__panneau ul { margin-top: .3rem; padding-left: .9rem; }
.maquette__panneau li { list-style: disc; color: var(--encre-2); font-size: .78rem; padding-block: .05rem; }
.maquette__pied { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--ligne); color: var(--encre-3); font-size: .75rem; }
.maquette code { background: var(--gris-10); padding: .05rem .25rem; border-radius: 3px; }

/* Cadre du paiement Stripe, inséré dans la page. Sa hauteur varie
   selon le moyen choisi par le client : on ne la contraint pas. */
/* Le formulaire vient de Stripe, dans un cadre d'un autre domaine :
   sa couleur ne se pilote pas d'ici. Plutôt que de subir la
   jointure, on lui pose une plaque claire — la même que celle des
   photos —, et le blanc devient une intention. */
.paiement-stripe {
  min-height: 320px;
  background: var(--plaque); color: var(--sur-encre);
  border-radius: var(--arrondi-l); padding: .35rem;
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .8);
}
.paiement-stripe__attente {
  padding: 3rem 1rem; text-align: center;
  color: rgba(10, 19, 32, .6); font-size: .9rem;
}

/* Un seul moyen de paiement : présenté comme un fait, pas comme
   un choix à faire. */
.moyen-unique {
  display: grid; gap: .15rem; padding: .9rem 1rem;
  border: 1px solid var(--ligne-2); border-radius: var(--arrondi);
  background: var(--gris-05);
}
.moyen-unique strong { font-size: .95rem; }
.moyen-unique em { font-style: normal; font-size: .85rem; color: var(--encre-2); }
.moyen-unique__note {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--ligne);
  font-size: .82rem; line-height: 1.5; color: var(--encre-2);
}

/* ---------- Gestion (commandes et messages) ----------
   Un tableau plutôt que des cartes : on y compare des lignes, on
   cherche une référence. La boîte défile seule sur petit écran
   plutôt que d'élargir la page. */
.tableau-boite { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--arrondi); }
.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau th, .tableau td {
  padding: .7rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ligne);
}
.tableau thead th {
  font-size: .78rem; font-weight: 600; color: var(--encre-2);
  background: var(--gris-05); white-space: nowrap;
}
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--gris-05); }
.tableau small { color: var(--encre-3); font-size: .78rem; }
.tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau select { font-size: .82rem; padding: .35rem 1.8rem .35rem .55rem; }

/* Filtre d'état : même pastille que les jetons, mais sans la croix
   — ce n'est pas un critère qu'on retire, c'est un onglet. */
.jeton--filtre { cursor: pointer; }
.jeton--filtre::after { content: none; }
.jeton--filtre.actif { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }

.messages { display: grid; gap: .9rem; }
.message {
  display: grid; gap: .6rem; justify-items: start;
  padding: 1rem; border: 1px solid var(--ligne); border-radius: var(--arrondi);
}
.message--traite { opacity: .6; background: var(--gris-05); }
.message__tete {
  width: 100%; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: baseline; justify-content: space-between; font-size: .9rem;
}
.message__date { font-size: .8rem; color: var(--encre-3); white-space: nowrap; }
.message__corps {
  white-space: pre-wrap; font-size: .92rem; line-height: 1.6; color: var(--encre-2);
}

/* ---------- Compte client ----------
   Connexion, création de compte et réglages, sur « Mon espace ». */
.identite { max-width: 480px; }

.identite__onglets {
  display: flex; gap: .25rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--ligne);
}
.identite__onglet {
  padding: .6rem .9rem; font-size: .92rem; font-weight: 500;
  color: var(--encre-2); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color var(--transition), border-color var(--transition);
}
.identite__onglet:hover { color: var(--encre); }
.identite__onglet.actif { color: var(--encre); border-bottom-color: var(--accent); }

.aide { font-size: .8rem; color: var(--encre-2); line-height: 1.45; }

/* Message d'erreur qui ne vise pas un champ en particulier
   (identifiants refusés, service indisponible…). */
.erreur--bloc:not(:empty) {
  margin-top: .9rem; padding: .6rem .75rem;
  background: rgba(255, 122, 102, .12); border-left: 3px solid var(--promo);
  border-radius: 0 var(--arrondi) var(--arrondi) 0;
  font-size: .86rem; min-height: 0;
}
.erreur--bloc:empty { min-height: 0; }

/* Prénom à côté de l'icône du compte, sur grand écran seulement. */
.icone__nom { display: none; }
@media (min-width: 900px) {
  .icone--connecte { width: auto; padding-inline: .5rem; gap: .4rem; grid-auto-flow: column; }
  .icone--connecte .icone__nom {
    display: inline; font-size: .85rem; font-weight: 500; max-width: 9ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

.fil__note { font-size: .82rem; color: var(--encre-3); }

/* Champ leurre du formulaire de contact : retiré de l'écran sans
   `display:none`, que certains robots savent détecter. */
.piege {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal--fondu { transform: none; }
.reveal.est-visible { opacity: 1; transform: none; }

/* ---------- Cartes inclinées à la souris (appareils précis) ---------- */
@media (hover: hover) and (pointer: fine) {
  .carte { transition: opacity .55s ease, transform 180ms cubic-bezier(.2, .6, .3, 1); }
  .carte:hover { z-index: 2; }
}

/* ---------- Saut du compteur du panier ---------- */
@keyframes rebond-panier {
  0% { transform: scale(1); }
  30% { transform: scale(1.5); }
  60% { transform: scale(.88); }
  100% { transform: scale(1); }
}
.rebond { animation: rebond-panier .45s cubic-bezier(.2, .7, .3, 1); }

/* ---------- Impression ----------
   Le site est nocturne ; le papier ne l'est pas. On repasse toute
   la palette en clair le temps de l'impression, sinon la page
   sortait vierge : du texte crème sur du blanc. */
@media print {
  :root {
    color-scheme: light;
    --blanc: #FFFFFF;
    --gris-05: #F7F5F0;
    --gris-10: #F1EEE7;
    --gris-15: #E6E1D7;
    --ligne: #DCD5C8;
    --ligne-2: #BDB3A1;
    --encre: #121A24;
    --encre-2: #3F4A57;
    --encre-3: #6B7480;
    --sur-encre: #FFFFFF;
    --accent: #8A6636;
    --sur-accent: #FFFFFF;
    --accent-doux: #F4EDE0;
    --promo: #A6301F;
    --sur-promo: #FFFFFF;
    --dispo: #4F6B45;
    --plaque: #FFFFFF;
  }
  .annonce, .entete, .pied, .tiroir, .voile, .notifs, .maquette, .recherche,
  .aide, .haut, .bulle-whatsapp, .pied__vagues { display: none !important; }
  body { background: #fff; color: var(--encre); }
  .bouton { box-shadow: none; }
}

/* ---------- Animations réduites : tout est figé ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .carte { transform: none !important; }
}