/* shop.css — webshop public : mise en page et composants, communs à TOUTES les pages du site.
   Règle : aucune classe propre à une page. Toute page réutilise ces composants
   (.site-header, .section, .product-card, .banner, .form-inline…), et les couleurs
   viennent des jetons de tokens.css / contexts.css (identité visuelle paramétrable).

   Sommaire
   1. Enveloppes et sections      5. Cartes produit et grilles
   2. Barre d'annonce et en-tête  6. Bandeaux promotionnels
   3. Navigation                  7. Avis, marques, journal
   4. Héros (diaporama)           8. Infolettre, pied de page, divers
                                  9. Compte client (connexion, tableau de bord)
                                 10. Annuaire de logos (marques)
                                 11. Pages légales et bandeau cookies
                                 12. Catalogue et filtres
*/

/* ======================================================= 1. Enveloppes */
.ctx-webshop { --shop-gutter: clamp(1rem, 4vw, 3rem); }
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--shop-gutter); }
.container-wide { max-width: 1600px; }

.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section-tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section-alt { background: var(--c-surface-2); }
.section-dark { background: var(--c-text); color: var(--c-surface); }
.section-dark .section-title, .section-dark a { color: inherit; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head-center { flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-primary); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.section-head-center .eyebrow::after { content: ""; width: 26px; height: 2px; background: currentColor; }
.section-title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: 0; line-height: 1.2; }
.section-sub { margin: .5rem 0 0; max-width: 60ch; color: var(--c-text-muted); }
.section-link { font-weight: 400; font-size: var(--fs-sm); letter-spacing: .02em; white-space: nowrap; }
.section-link i { transition: transform .15s; }
.section-link:hover i { transform: translateX(3px); }

/* ======================================================= 2. En-tête */
/* Bandeau d'annonce : discret, pas un bandeau noir. Le noir est réservé au pied de
   page — un site de mode ne commence pas par une barre sombre. */
.announce { background: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--fs-xs); letter-spacing: .06em; }
.announce .container { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); min-height: 38px; text-align: center; }
.announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.announce-side { display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 900px) { .announce-side { display: none; } .announce .container { justify-content: center; } }

.site-header { position: sticky; top: 0; z-index: 40; background: var(--c-surface); border-bottom: 1px solid var(--c-border); transition: box-shadow .2s; }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(20, 25, 40, .08); }
/* Trois colonnes de largeur égale : le logo tombe au milieu de la page, pas au milieu
   de ce qui reste une fois la recherche posée. C'est ce qui fait tenir l'axe central de
   l'en-tête, du logo à la navigation. */
.header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); min-height: 92px; }
.header-logo { justify-self: center; display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text); }
.header-logo:hover { text-decoration: none; }
.header-logo img { height: 62px; width: auto; max-width: 220px; object-fit: contain; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-4); }
/* Les actions portent leur nom à côté de l'icône : « Panier » se lit, un sac isolé se
   devine. Le libellé disparaît sous 1100 px, où la place manque vraiment. */
.header-actions .icon-btn { flex-direction: column; gap: .15rem; height: auto; padding-block: .25rem; font-size: 1.05rem; }
.header-actions .icon-label { font-size: var(--fs-xs); letter-spacing: .02em; }
.header-actions .icon-btn { width: auto; min-width: var(--control-h); gap: .45rem; padding-inline: .35rem; border-radius: 0; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--c-text); font-size: 1.2rem; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-primary); }
.icon-btn .count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
/* Colonne de gauche : le raccourci de recherche prend l'allure d'un champ à partir de
   1100 px, et se réduit à son icône en dessous — la place y va au logo. */
.header-lead { display: flex; align-items: center; gap: var(--sp-2); }
.header-search { width: auto; gap: .5rem; padding: 0; border-radius: 0; color: var(--c-text-muted); }
.header-search:hover { color: var(--c-primary); background: transparent; }
.header-search-hint { display: none; }
@media (min-width: 1100px) {
  .header-search { min-width: 15rem; justify-content: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--c-border-strong); }
  .header-search-hint { display: inline; font-size: var(--fs-sm); }
}
/* Les libellés des actions cèdent la place avant le logo : sous 1100 px, icônes seules
   (l'aria-label continue de les nommer). */
@media (max-width: 1099px) { .header-actions .icon-label { display: none; } }
/* Téléphone : le logo cède la place aux actions. À 62 px de haut il poussait le panier
   hors de l'écran — et c'est le panier qu'on cherche du pouce, pas le logo. */
@media (max-width: 720px) {
  .header-bar { min-height: 68px; gap: var(--sp-2); }
  .header-logo { font-size: 1.25rem; letter-spacing: .1em; }
  .header-logo img { height: 40px; max-width: 132px; }
  .header-actions { gap: 0; }
  .header-actions .icon-btn { width: 38px; font-size: 1rem; }
}
.header-burger { display: none; }
@media (max-width: 1000px) { .header-burger { display: inline-grid; } }

/* ======================================================= 3. Navigation */
/* flex-wrap : sans lui, une rubrique de plus au catalogue déborde de quelques pixels et
   fait apparaître une barre de défilement horizontale sur tout le site. Les rubriques
   passent à la ligne plutôt que de rogner la page. */
.main-nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(.75rem, 2.4vw, 2.4rem); border-top: 1px solid var(--c-border); }
/* Bas de casse et graisse normale : la navigation d'une boutique de mode se lit, elle
   ne crie pas. Les capitales espacées restent pour les surtitres. */
.main-nav > a, .nav-item > a { display: inline-flex; align-items: center; gap: .35rem; padding: var(--sp-4) .25rem; font-size: .95rem; font-weight: 400; letter-spacing: .02em; color: var(--c-text); }
.main-nav a:hover { color: var(--c-primary); text-decoration: none; }
.nav-item { position: relative; }
/* Dans la barre principale, le volet s'ancre sur la barre entière (pleine largeur) et non
   sur la rubrique survolée : la pastille du compte, elle, garde son propre ancrage. */
.main-nav .nav-item { position: static; }
.account-chip { position: relative; }
.nav-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-primary); transform: scaleX(0); transition: transform .18s; }
.nav-item:hover > a::after, .nav-item.active > a::after { transform: scaleX(1); }
/* Pastille sombre plutôt qu'or : du blanc sur l'or de l'enseigne tombe à 2,6:1 de
   contraste, illisible à 10 px. */
.nav-item .tag { margin-left: .3rem; padding: .1em .45em; border-radius: 2px; background: var(--c-text); color: #fff; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

/* Méga-menu : une seule mécanique pour toutes les rubriques */
/* Le volet occupe toute la largeur de la barre de navigation : le nombre de colonnes varie
   avec le catalogue, et une rubrique placée en bord d'écran ne se retrouve plus tronquée. */
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: var(--sp-5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.mega > div { flex: 0 1 190px; min-width: 0; }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mega a { font-size: var(--fs-sm); color: var(--c-text); }
.mega a:hover { color: var(--c-primary); }
.mega-promo { flex: 0 1 260px; margin-left: auto; border-radius: var(--radius); background: var(--c-primary-soft); padding: var(--sp-4); display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; }
@media (max-width: 1000px) { .main-nav, .mega { display: none; } }

/* Tiroir mobile — même contenu que la navigation */
.drawer { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(360px, 88vw); background: var(--c-surface); transform: translateX(-100%); transition: transform .25s; display: flex; flex-direction: column; overflow-y: auto; }
.drawer.open { transform: none; }
.drawer-right { inset: 0 0 0 auto; transform: translateX(100%); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--c-border); font-weight: 700; }
.drawer-body { padding: var(--sp-4); display: grid; gap: var(--sp-2); align-content: start; }
.drawer-body a { display: block; padding: var(--sp-2) 0; font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-border); }
.drawer-foot { margin-top: auto; padding: var(--sp-4); border-top: 1px solid var(--c-border); display: grid; gap: var(--sp-2); }
.overlay { position: fixed; inset: 0; z-index: 65; background: rgba(15, 20, 35, .5); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.overlay.open { opacity: 1; visibility: visible; }

/* Recherche plein écran */
.search-bar { display: none; padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.search-bar.open { display: block; }
.search-bar form { display: flex; gap: var(--sp-2); max-width: 720px; margin-inline: auto; }
.search-field { position: relative; flex: 1; }             /* ancre du panneau de suggestions */
.search-bar input { width: 100%; height: 48px; font-size: var(--fs-md); }

/* Suggestions : marques, rayons, pointures et modèles. Chaque ligne est un lien vers la
   page de résultats déjà filtrée — le panneau se pose au-dessus du contenu, jamais en poussant. */
.suggest { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 460px); overflow-y: auto; padding: var(--sp-2); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(15, 19, 32, .16); }
.suggest[hidden] { display: none; }
.suggest-group + .suggest-group { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); }
.suggest-head { margin: 0 0 .15rem; padding: .2rem .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }
.suggest-item { display: flex; align-items: center; gap: var(--sp-3); padding: .45rem .5rem; border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; cursor: pointer; }
.suggest-item:hover, .suggest-item.active { background: var(--c-primary-soft); color: var(--c-text); text-decoration: none; }
.suggest-item img { flex: 0 0 auto; width: 38px; height: 38px; object-fit: cover; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.suggest-item > span { display: grid; min-width: 0; }
.suggest-label { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.suggest-label b { font-weight: 700; color: var(--c-primary); }   /* la partie déjà tapée */
.suggest-sub { font-size: var(--fs-xs); color: var(--c-text-muted); }
.suggest-all { margin-top: .15rem; padding-top: .55rem; border-top: 1px solid var(--c-border); font-weight: 600; }
.suggest-empty { margin: 0; padding: var(--sp-3) .5rem; font-size: var(--fs-sm); color: var(--c-text-muted); }

@media (max-width: 560px) {
  .search-bar form { flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; }
  .search-bar .btn { flex: 1 1 100%; }
}

/* ======================================================= 4. Héros */
/* Le visuel d'un côté, le discours de l'autre, sur le fond crème de la page. Le texte
   posé en surimpression obligeait à assombrir la photo pour rester lisible : la chaussure
   y perdait sa matière, et c'est elle qu'on vient voir. */
.hero { position: relative; overflow: hidden; background: var(--c-bg); }
.hero-slide { position: relative; display: none; min-height: clamp(380px, 58vh, 600px); }
.hero-slide.active { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; animation: heroIn .6s ease; }
@keyframes heroIn { from { opacity: 0; } to { opacity: 1; } }
.hero-media { position: relative; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero .container { display: grid; align-content: center; justify-items: center; max-width: none; margin: 0; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem); text-align: center; }
.hero-content { display: flex; flex-direction: column; align-items: center; max-width: 34rem; color: var(--c-text); }
.hero-ghost { color: var(--c-text); border-color: var(--c-border-strong); }
.hero-ghost:hover { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.hero-content .eyebrow { color: var(--c-text-muted); }
.hero-title { margin: 0 0 var(--sp-4); font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 300; line-height: 1.12; letter-spacing: 0; }
.hero-title em { font-style: italic; }
.hero-text { margin: 0 0 var(--sp-5); max-width: 42ch; font-size: var(--fs-md); color: var(--c-text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
/* Sous 900 px la photo passe au-dessus du texte : côte à côte, ni l'une ni l'autre
   n'aurait la largeur de dire quelque chose. */
@media (max-width: 900px) {
  .hero-slide.active { grid-template-columns: 1fr; }
  .hero-media { aspect-ratio: 4 / 3; }
}
.hero-dots { display: flex; justify-content: center; gap: .5rem; padding-block: var(--sp-4); }
.hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--c-border-strong); cursor: pointer; transition: background .2s; }
.hero-dots button.active { background: var(--c-primary); }
.hero-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--c-text); font-size: 1.5rem; cursor: pointer; }
.hero-arrow:hover { color: var(--c-primary); }
.hero-prev { left: clamp(.5rem, 2vw, 1.5rem); } .hero-next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 700px) { .hero-media::after { background: linear-gradient(0deg, rgba(20,16,12,.8) 10%, rgba(20,16,12,.3) 70%); } .hero .container { align-items: flex-end; } .hero-content { max-width: none; } .hero-arrow { display: none; } }

/* Bandeau des garanties */
.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
/* Les garanties se lisent en colonne, icône au-dessus : alignées en ligne avec une
   pastille colorée, elles ressemblaient à des boutons et attiraient le clic. */
.usp { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.usp i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; background: none; color: var(--c-primary); font-size: 1.7rem; }
.usp strong { display: block; font-size: var(--fs-sm); font-weight: 400; }
.usp span { font-size: var(--fs-xs); color: var(--c-text-muted); max-width: 22ch; }

/* ======================================================= 5. Produits */
.grid-cards { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-2up { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3up { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Téléphone : deux produits par ligne (les bandeaux, avis et articles restent sur une colonne) */
@media (max-width: 620px) {
  .grid-cards:not(.grid-2up):not(.grid-3up) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .product-add { font-size: var(--fs-xs); padding-inline: var(--sp-2); }
  .product-name { font-size: var(--fs-sm); }
}

.product-card { position: relative; display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; }
.product-media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--c-surface-2); overflow: hidden; }
.product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .6s; }
.product-media img + img { opacity: 0; }                        /* 2e visuel au survol */
.product-card:hover .product-media img { transform: scale(1.04); }
.product-card:hover .product-media img + img { opacity: 1; }
.product-flags { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: grid; gap: .3rem; justify-items: start; }
.flag { padding: .25em .7em; border-radius: 0; background: var(--c-text); color: #fff; font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.flag-new { background: var(--c-success); } .flag-sale { background: var(--c-danger); } .flag-soft { background: var(--c-primary); }
/* Le cœur reste visible : mettre de côté est le geste le plus fréquent avant l'achat,
   et le cacher jusqu'au survol le rend introuvable au doigt sur un écran tactile. */
.product-tools { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: grid; gap: .35rem; }
.product-tools .icon-btn { width: 34px; height: 34px; border-radius: 0; background: transparent; color: var(--c-text); font-size: 1.05rem; }
.product-tools .icon-btn:hover { color: var(--c-primary); background: transparent; }
/* Le bouton descend sous la fiche et ne se cache plus : posé sur l'image au survol, il
   masquait le produit au moment précis où on le regardait, et n'existait pas au doigt. */
.product-add { margin-top: var(--sp-3); width: 100%; justify-content: center; }
.product-body { padding: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: .2rem; }
.product-brand { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }
.product-name { margin: 0; font-size: var(--fs-md); font-weight: 400; line-height: 1.35; }
.product-name a { color: var(--c-text); }
.product-name a:hover { color: var(--c-primary); text-decoration: none; }
.product-price { display: flex; align-items: baseline; gap: .5rem; font-weight: 400; color: var(--c-text); }
.product-price del { color: var(--c-text-muted); font-weight: 400; font-size: var(--fs-sm); }
.product-price .save { color: var(--c-danger); font-size: var(--fs-sm); }
.rating { display: inline-flex; align-items: center; gap: .15rem; color: var(--c-primary); font-size: .8rem; }
.rating span { margin-left: .35rem; color: var(--c-text-muted); }
.swatches { display: flex; gap: .3rem; margin-top: .15rem; }
.swatch { width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--c-border-strong); }

/* Rayons en vignettes : une image large, le nom posé dessus. La pastille ronde montrait
   un timbre-poste de la photo — à cette taille, une chaussure n'est plus reconnaissable.
   Les noms de classe restent (.circle-*) : ils sont employés par plusieurs pages, et les
   renommer pour un changement de dessin ferait un grand diff pour rien. */
.circle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.circle-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-2); color: #fff; }
.circle-card:hover { text-decoration: none; color: #fff; }
.circle-card .circle { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; background: var(--c-surface-2); display: grid; place-items: center; overflow: hidden; }
.circle-card .circle img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.circle-card:hover .circle img { transform: scale(1.04); }
/* Le voile part du bas : le texte doit tenir sur la photo sans l'éteindre entièrement. */
.circle-card .circle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,22,16,.72) 0%, rgba(28,22,16,.20) 45%, transparent 70%); }
.circle-card strong, .circle-card small { position: relative; z-index: 1; }
.circle-card strong { position: absolute; left: clamp(1rem, 2vw, 1.6rem); bottom: 2.6rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 400; }
.circle-card small { position: absolute; left: clamp(1rem, 2vw, 1.6rem); bottom: 1rem; color: rgba(255,255,255,.85); font-size: var(--fs-sm); }
/* La flèche « Découvrir » est ajoutée par le CSS : la même vignette sert les rayons de
   l'accueil et d'autres listes, et le gabarit n'a pas à porter un mot décoratif. */
.circle-card::after { content: "\2192"; position: absolute; right: clamp(1rem, 2vw, 1.6rem); bottom: 1rem; z-index: 1; font-size: 1.2rem; transition: transform .2s; }
.circle-card:hover::after { transform: translateX(4px); }

/* Onglets réutilisables (best-sellers, fiches produit…) */
.tabs-pill { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.tabs-pill button { padding: .55rem 1.3rem; border: 1px solid var(--c-border); border-radius: 0; background: transparent; font-size: var(--fs-sm); font-weight: 400; letter-spacing: .04em; cursor: pointer; }
.tabs-pill button.active { background: var(--c-text); border-color: var(--c-text); color: #fff; }
[data-tab-panel][hidden] { display: none; }

/* ======================================================= 6. Bandeaux */
.banner { position: relative; display: flex; align-items: center; min-height: 260px; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface-2); color: var(--c-text); }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-content { position: relative; max-width: 26ch; }
.banner-dark { color: #fff; }
.banner-dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,12,.65), rgba(20,16,12,.15)); }
.banner-dark .banner-content { z-index: 1; }
.banner h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: -.02em; }
.banner p { margin: 0 0 var(--sp-4); opacity: .9; }
.banner-tall { min-height: 420px; }

/* Compte à rebours (offres) */
.countdown { display: flex; gap: .5rem; margin-bottom: var(--sp-4); }
.countdown div { min-width: 58px; padding: .4rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.14); backdrop-filter: blur(4px); text-align: center; }
.countdown strong { display: block; font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

/* ======================================================= 7. Avis, marques, journal */
.quote-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.quote-card p { margin: 0; font-size: var(--fs-lg); line-height: 1.5; }
.quote-author { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; }
.quote-author .avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-weight: 700; }
.quote-author strong { display: block; font-size: var(--fs-sm); }
.quote-author small { color: var(--c-text-muted); }

.brand-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-4); align-items: center; }
.brand-strip a { display: grid; place-items: center; height: 64px; padding: var(--sp-2); border-radius: var(--radius-sm); color: var(--c-text-muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: color .15s, background .15s; }
.brand-strip a:hover { background: var(--c-surface-2); color: var(--c-primary); text-decoration: none; }
.brand-strip img { max-height: 44px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s; }
.brand-strip a:hover img { filter: none; opacity: 1; }

.post-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.post-card .post-media { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-surface-2); }
.post-card .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-meta { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.post-card h3 { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.post-card h3 a { color: var(--c-text); }
.post-card h3 a:hover { color: var(--c-primary); text-decoration: none; }

/* Mosaïque sociale */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.social-grid a { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--c-surface-2); display: grid; place-items: center; }
.social-grid img { width: 100%; height: 100%; object-fit: cover; }
.social-grid a::after { content: "\F437"; font-family: bootstrap-icons; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,16,12,.45); color: #fff; font-size: 1.5rem; opacity: 0; transition: opacity .2s; }
.social-grid a:hover::after { opacity: 1; }

/* ======================================================= 8. Infolettre, pied de page */
/* Bande d'inscription : centrée, sur le beige soutenu. En deux colonnes larges, le
   champ se retrouvait à un mètre du titre qui le justifie. */
.newsletter { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; }
.newsletter > div:first-child { max-width: 46ch; }
.newsletter .form-inline { justify-content: center; width: min(100%, 34rem); }
.form-inline { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.form-inline input { flex: 1 1 220px; height: 48px; background: #fff; }
.form-inline .btn { height: 48px; }
.form-note { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

.site-footer { background: var(--c-text); color: rgba(255,255,255,.75); }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer-grid h3 { margin: 0 0 var(--sp-4); color: #fff; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--fs-sm); }
.footer-logo { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: var(--sp-4); color: #fff; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.footer-logo img { height: 66px; width: auto; filter: brightness(0) invert(1); }
.footer-contact { display: grid; gap: .5rem; font-size: var(--fs-sm); }
.footer-contact i { width: 1.2em; color: var(--c-primary); }
.socials { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--c-primary); font-size: 1rem; }
.socials a:hover { background: var(--c-primary); color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-4); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); }
.pay-icons { display: flex; gap: .4rem; flex-wrap: wrap; }
.pay-icons span { padding: .3rem .6rem; border-radius: 3px; background: #fff; color: #2b2521; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Retour en haut */
.to-top { position: fixed; right: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem); z-index: 35; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--c-text); color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--c-primary); }

/* ======================================================= 9. Compte client
   Composants réutilisés par toutes les pages de /compte (connexion, inscription, code,
   mot de passe, tableau de bord) : aucune règle propre à une page. */

/* Connexion, inscription, code, mot de passe : carte centrée + colonne d'arguments */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; max-width: 1040px; margin-inline: auto; }
.auth-wrap-solo { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.auth-card { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(20, 25, 40, .06); }
.auth-card h1 { margin: 0 0 .5rem; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; }
.auth-card .form-stack { margin-top: var(--sp-5); }
.auth-sep { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.auth-providers { display: grid; gap: var(--sp-2); }
.btn-oauth { justify-content: center; gap: .6rem; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-strong); font-weight: 600; }
.btn-oauth:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn-oauth i { font-size: 1.1em; }
.auth-foot { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.auth-done { text-align: center; }
.auth-done > i { display: block; margin-bottom: var(--sp-3); font-size: 2.6rem; color: var(--c-primary); }
.auth-done .btn { margin-top: var(--sp-5); }

.auth-aside { padding-top: var(--sp-4); }
.auth-aside h2 { margin: 0 0 var(--sp-4); font-size: 1.15rem; letter-spacing: -.01em; }
.perk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.perk-list li { display: grid; grid-template-columns: 38px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-sm); color: var(--c-text-muted); }
.perk-list i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 1.05rem; }
.perk-list strong { display: block; color: var(--c-text); }

/* Champs complémentaires (mot de passe masquable, grilles, cases à cocher) */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.field-hint { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.field .opt { font-weight: 400; color: var(--c-text-muted); font-size: var(--fs-xs); }
.field-pw { position: relative; display: flex; }
.field-pw input { flex: 1; padding-right: 2.6rem; }
.pw-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem; display: grid; place-items: center; border: 0; background: none; color: var(--c-text-muted); cursor: pointer; }
.pw-toggle:hover { color: var(--c-text); }
.check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); line-height: 1.45; }
.check input { margin-top: .2em; flex: none; }
.code-input { text-align: center; font-size: 1.7rem; letter-spacing: .5em; font-variant-numeric: tabular-nums; padding-left: .5em; }

/* Tableau de bord */
.account-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.account-head h1 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.02em; }
.account-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.account-nav { display: grid; gap: 2px; position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); }
.account-nav a { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: var(--radius); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 500; }
.account-nav a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.account-nav a.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.account-main { display: grid; gap: var(--sp-5); min-width: 0; }
.panel { padding: clamp(1.1rem, 3vw, 1.75rem); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.panel > h2 { margin: 0 0 var(--sp-2); font-size: 1.05rem; letter-spacing: -.01em; }
.panel > h2 + .text-muted { margin-top: 0; }
.panel .form-stack, .panel .table-wrap, .panel .empty { margin-top: var(--sp-4); }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.pill-ok { background: var(--c-success-soft); color: var(--c-success); }
.pill-warn { background: var(--c-warning-soft); color: var(--c-warning); }

.toggle-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--c-border-strong); transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--c-primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.identity-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.identity-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius); font-size: var(--fs-sm); }
.identity-list > li > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--c-surface-2); font-size: 1.05rem; }
.identity-list strong { display: block; }

.loyalty-card { display: grid; gap: .35rem; margin-top: var(--sp-4); padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); color: #fff; }
.loyalty-card span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .16em; opacity: .85; }
.loyalty-card strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.loyalty-card code { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; opacity: .9; }

/* Messages du site (confirmations, erreurs), affichés sous l'en-tête */
.flash-stack { padding-top: var(--sp-4); }

@media (max-width: 900px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { order: -1; padding-top: 0; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .35rem; padding-bottom: .35rem; scrollbar-width: none; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a { white-space: nowrap; border: 1px solid var(--c-border); }
}
@media (max-width: 480px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .identity-list li { grid-template-columns: 36px 1fr; }
  .identity-list li form, .identity-list li .btn { grid-column: 2; justify-self: start; }
}

/* Menu du compte dans l'en-tête (réutilise .mega) */
.account-chip > .icon-btn { width: auto; gap: .4rem; padding: 0 .55rem; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.account-chip > a::after { display: none; }
.account-chip .chip-name { font-size: var(--fs-sm); font-weight: 600; max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega-menu { left: auto; right: 0; top: 100%; width: max-content; min-width: 230px; padding: var(--sp-2); display: block; border-radius: var(--radius); }
.mega-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: var(--radius); font-size: var(--fs-sm); color: var(--c-text); }
.mega-menu a:hover { background: var(--c-surface-2); text-decoration: none; }
@media (max-width: 720px) { .account-chip .chip-name { display: none; } }

/* Sélecteur de langue de l'en-tête */
/* Le choix de langue est une commodité, pas un champ à remplir : sans bordure, il se
   fond dans la barre au lieu d'y attirer l'œil comme un formulaire. */
.site-header .lang-switch select { height: 34px; padding: 0 1.3rem 0 .25rem; border: 0; border-radius: 0; background-color: transparent; color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .1em; cursor: pointer; }
.site-header .lang-switch select:hover { color: var(--c-primary); }
.site-header .lang-switch select:hover { background: var(--c-surface-2); }
@media (max-width: 560px) { .site-header .lang-switch { display: none; } }

/* ======================================================= 10. Annuaire de logos
   Grille de vignettes-logos (marques aujourd'hui, partenaires ou fournisseurs demain)
   avec index alphabétique et filtre au clavier. Rien de propre à la page /marques. */

.brand-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.search-inline { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px; }
.search-inline i { position: absolute; left: .75rem; color: var(--c-text-muted); pointer-events: none; }
.search-inline input { width: 100%; padding-left: 2.2rem; }

.az-nav { display: flex; flex-wrap: wrap; gap: .15rem; }
.az-nav a { display: grid; place-items: center; min-width: 1.85rem; height: 1.85rem; border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 700; }
.az-nav a:hover { background: var(--c-primary-soft); color: var(--c-primary); text-decoration: none; }

.brand-group + .brand-group { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.brand-letter { margin: 0 0 var(--sp-4); padding-bottom: .4rem; border-bottom: 2px solid var(--c-primary); font-size: 1.1rem; font-weight: 800; letter-spacing: .1em; color: var(--c-primary); scroll-margin-top: calc(var(--topbar-h, 64px) + 1.5rem); }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-4); }
.logo-tile { display: flex; flex-direction: column; gap: .15rem; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s; }
.logo-tile:hover { border-color: var(--c-primary); box-shadow: 0 8px 22px rgba(20, 25, 40, .08); transform: translateY(-2px); }
.logo-tile-media { display: grid; place-items: center; height: 76px; margin-bottom: var(--sp-3); }
.logo-tile-media img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .2s, opacity .2s; }
.logo-tile:hover .logo-tile-media img { filter: none; opacity: 1; }
.logo-tile-word { font-size: clamp(.95rem, 2.6vw, 1.2rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: var(--c-text); opacity: .8; overflow-wrap: anywhere; }
.logo-tile h3 { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.logo-tile p { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

@media (max-width: 480px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .logo-tile { padding: var(--sp-3); }
  .logo-tile-media { height: 58px; }
}

/* ======================================================= 11. Pages légales et cookies */

.legal-hero .legal-date { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

.legal-toc { position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); padding: var(--sp-4); background: var(--c-surface-2); border-radius: var(--radius-lg); }
.legal-toc h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.legal-toc ol { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .45rem; font-size: var(--fs-sm); }
.legal-toc a { color: var(--c-text); }
.legal-toc a:hover { color: var(--c-primary); }
.legal-toc-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); font-size: var(--fs-xs); font-weight: 600; }

.legal-body { max-width: 74ch; font-size: var(--fs-md); line-height: 1.7; }
.legal-body > section { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); scroll-margin-top: calc(var(--topbar-h, 64px) + 1.5rem); }
.legal-body > section + section { border-top: 1px solid var(--c-border); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.legal-body h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.15rem, 2.4vw, 1.4rem); letter-spacing: -.01em; }
.legal-body h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: 1rem; }
.legal-body p { margin: 0 0 var(--sp-4); }
.legal-body p:last-child { margin-bottom: 0; }

.legal-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.legal-dl dt { color: var(--c-text-muted); }
.legal-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.legal-list { margin: 0 0 var(--sp-4); padding-left: 1.2rem; display: grid; gap: .55rem; }
.legal-body ul:not(.legal-list):not(.legal-toc ol) { margin: 0 0 var(--sp-4); padding-left: 1.2rem; display: grid; gap: .4rem; }
.legal-note { font-size: var(--fs-sm); color: var(--c-text-muted); }
.legal-block { padding: var(--sp-4); background: var(--c-surface-2); border-radius: var(--radius); }
.legal-highlight { padding: var(--sp-4); border-left: 3px solid var(--c-primary); background: var(--c-primary-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.legal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.legal-table td { vertical-align: top; }
.legal-form { margin: 0; padding: var(--sp-4); background: var(--c-surface-2); border-left: 3px solid var(--c-border-strong); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); }
.legal-form ul { margin-bottom: 0; }

/* Mention pas encore renseignée : visible en clair, pour qu'elle ne passe pas inaperçue */
.legal-todo { padding: .05em .4em; border-radius: 3px; background: var(--c-warning-soft); color: var(--c-warning); font-weight: 600; font-size: .92em; }

.legal-contact { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--c-surface-2); border-radius: var(--radius-lg); }
.legal-contact h2 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.legal-contact-lines { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); }

/* ---- Bandeau et panneau de consentement ---- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: clamp(1rem, 3vw, 1.5rem) clamp(1rem, 4vw, 3rem); background: var(--c-surface); border-top: 3px solid var(--c-primary); box-shadow: 0 -8px 30px rgba(20, 25, 40, .14); }
.cookie-banner-text { flex: 1 1 380px; }
.cookie-banner-text h2 { margin: 0 0 .35rem; font-size: 1.05rem; letter-spacing: -.01em; }
.cookie-banner-text p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); max-width: 70ch; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cookie-banner-actions .btn { min-width: 8.5rem; }        /* accepter et refuser au même niveau */

.cookie-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(15, 19, 32, .5); }
.cookie-panel { position: fixed; z-index: 96; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2rem)); max-height: min(85vh, 780px); display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(15, 19, 32, .3); overflow: hidden; }
.cookie-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.cookie-panel-head h2 { margin: 0; font-size: 1.1rem; }
.cookie-panel-body { padding: var(--sp-5); overflow-y: auto; display: grid; gap: var(--sp-4); }
.cookie-panel-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.cookie-panel-link { margin: 0; font-size: var(--fs-sm); }

.cookie-cats { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cookie-cat { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius); }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: .35rem; }
.cookie-cat h3 { margin: 0; font-size: var(--fs-md); }
.cookie-cat p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

body.no-scroll { overflow: hidden; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
  .legal-toc ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 620px) {
  .legal-dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .legal-dl dd { margin-bottom: .6rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 8rem; }
  .cookie-panel-foot .btn { flex: 1 1 8rem; }
}

/* ======================================================= 12. Catalogue et filtres
   Page de liste unique : marque, catégorie, type, nouveautés, promotions, recherche.
   Rien de propre à un point d'entrée — seuls les critères changent. */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-muted); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs a { color: var(--c-text-muted); }
.crumbs a:hover { color: var(--c-primary); }

.cat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cat-brand-logo { max-height: 56px; max-width: 180px; object-fit: contain; }

.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.cat-results { min-width: 0; }

.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.cat-count { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cat-sort { margin-left: auto; }
.cat-sort select { height: 38px; padding: 0 2rem 0 .75rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-size: var(--fs-sm); }
.btn-filters { display: none; }
.btn-filters .count { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: .35rem; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; }

/* ---- Colonne de filtres ---- */
.cat-filters { position: sticky; top: calc(var(--topbar-h, 64px) + 1rem); display: grid; gap: var(--sp-2); }
.cat-filters-head { display: none; align-items: center; justify-content: space-between; }
.cat-filters-head h2 { margin: 0; font-size: 1.05rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--sp-2); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-xs); font-weight: 600; }
.chip:hover { background: var(--c-primary); color: #fff; text-decoration: none; }
.chip-clear { background: transparent; color: var(--c-text-muted); text-decoration: underline; }
.chip-clear:hover { background: transparent; color: var(--c-danger); }

.facet { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.facet > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: .7rem .85rem; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; list-style: none; }
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary::after { content: "\f282"; font-family: bootstrap-icons; font-weight: 400; font-size: .8em; color: var(--c-text-muted); transition: transform .15s; }
.facet[open] > summary::after { transform: rotate(180deg); }
.facet > summary span { margin-left: auto; margin-right: .4rem; font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-muted); }
.facet-body { padding: 0 .85rem .8rem; display: grid; gap: .15rem; }
.facet-scroll { max-height: 270px; overflow-y: auto; }

.facet-line { display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem; font-size: var(--fs-sm); color: var(--c-text); border-radius: var(--radius-sm); }
.facet-line:hover { color: var(--c-primary); text-decoration: none; }
.facet-line .box { flex: none; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--c-border-strong); border-radius: 4px; font-size: 11px; }
.facet-line.on .box { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.facet-line .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-line .n { flex: none; font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.facet-line.on { font-weight: 600; }

.swatch { display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); color: #fff; font-size: 10px; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.swatch-sm { width: 13px; height: 13px; }

.size-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .3rem; }
.size-box { display: grid; place-items: center; min-height: 34px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.size-box:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.size-box.on { background: var(--c-text); border-color: var(--c-text); color: #fff; }

.price-form { display: flex; align-items: center; gap: .35rem; }
.price-form input { width: 100%; min-width: 0; height: 34px; padding: 0 .4rem; text-align: center; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.pager-info { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Placeholder « pas de visuel » : en position absolue, il exige un parent positionné
   (.product-media, .cart-media, .drawer-cart-media, .gallery-main) — sans quoi il remonte
   jusqu'au premier ancêtre positionné et recouvre tout, clics compris. */
.product-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-text-muted); font-size: 2rem; opacity: .35; }

@media (max-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .btn-filters { display: inline-flex; }
  /* Les filtres deviennent un tiroir : même balisage, aucune duplication */
  .cat-filters { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(330px, 88vw); padding: var(--sp-4); background: var(--c-surface); box-shadow: 0 0 40px rgba(15,19,32,.25); overflow-y: auto; align-content: start; transform: translateX(-100%); transition: transform .25s ease; }
  body.filters-open .cat-filters { transform: none; }
  body.filters-open .overlay { opacity: 1; visibility: visible; }
  .cat-filters-head { display: flex; }
}

/* ======================================================= 13. Boutiques
   Liste /boutiques et fiche /boutiques/<slug>. La pastille d'état (ouvert, ferme
   bientôt, fermé) est le premier élément lu : elle garde sa couleur propre, les
   horaires détaillés viennent après. */

.section.pt-0 { padding-top: 0; }             /* une section qui prolonge la précédente, sans respiration en double */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-4); }
.shop-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); transition: border-color .15s, box-shadow .15s; }
.shop-card:hover { border-color: var(--c-primary); box-shadow: 0 8px 22px rgba(20, 25, 40, .08); }
.shop-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.shop-card-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.01em; }
.shop-card-head h3 a { color: inherit; }
.shop-card-address { margin: .15rem 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Vignette : le logo de la boutique, ou ses initiales quand il n'y en a pas. */
.shop-card-media, .shop-hero-media { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); font-weight: 800; letter-spacing: .02em; color: var(--c-text-muted); }
.shop-card-media img, .shop-hero-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.shop-hero-media { width: 74px; height: 74px; font-size: 1.35rem; }

.shop-card-hours { display: grid; gap: .2rem; margin: 0; font-size: var(--fs-sm); }
.shop-card-hours > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .2rem .4rem; border-radius: var(--radius-sm); }
.shop-card-hours > div.is-today { background: var(--c-primary-soft); font-weight: 600; }
.shop-card-hours dt { color: var(--c-text-muted); }
.shop-card-hours dd { margin: 0; }
.shop-card-hours > div.is-today dt { color: var(--c-text); }
.shop-card-hours-none { margin: 0; font-size: var(--fs-sm); }

.shop-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }

/* Pastille d'état : la couleur porte le sens, le texte aussi (jamais la couleur seule). */
.shop-status { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; margin: 0; font-size: var(--fs-sm); }
.shop-status .dot { width: .55rem; height: .55rem; margin-right: .3rem; border-radius: 999px; background: currentColor; }
.shop-status-open   { color: var(--c-success); }
.shop-status-soon   { color: var(--c-warning); }
.shop-status-closed, .shop-status-unknown { color: var(--c-text-muted); }
.shop-status .text-muted { color: var(--c-text-muted); }

.shop-hero { display: flex; align-items: center; gap: var(--sp-4); }
.shop-hero h1 { margin: 0 0 .4rem; }
.shop-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
.shop-panel .shop-note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

.shop-facts { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.shop-facts li { display: grid; grid-template-columns: 1.4rem 1fr; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); }
.shop-facts i { color: var(--c-primary); }
.shop-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.shop-hours { width: 100%; margin-top: var(--sp-4); border-collapse: collapse; font-size: var(--fs-sm); }
.shop-hours th { padding: .45rem .5rem; text-align: left; font-weight: 500; color: var(--c-text-muted); }
.shop-hours td { padding: .45rem .5rem; text-align: right; white-space: nowrap; }
.shop-hours tr + tr th, .shop-hours tr + tr td { border-top: 1px solid var(--c-border); }
.shop-hours .is-today th, .shop-hours .is-today td { background: var(--c-primary-soft); color: var(--c-text); font-weight: 700; }
.badge-today { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; }

@media (max-width: 480px) {
  .shop-card { padding: var(--sp-4); }
  .shop-hero-media { width: 56px; height: 56px; font-size: 1.1rem; }
}

/* ======================================================= 14. Fiche produit, panier, favoris
   La fiche est en deux colonnes : la galerie à gauche, le choix et l'achat à droite.
   Sous 900 px tout s'empile, la galerie en premier. */

.product-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .product-page { grid-template-columns: 1fr; } }

.gallery-main { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-noimg-lg { font-size: 3rem; color: var(--c-border-strong); }
.gallery-thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); overflow-x: auto; padding-bottom: 2px; }
.gallery-thumb { flex: 0 0 auto; width: 72px; height: 88px; padding: 0; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; }
.gallery-thumb.active { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-title { margin: .2rem 0 var(--sp-3); font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; }
.product-teaser { margin: 0 0 var(--sp-4); color: var(--c-text-muted); }
.product-price-lg { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-5); font-size: 1.35rem; }
.price-off { padding: .1rem .45rem; border-radius: 999px; background: var(--c-danger-soft); color: var(--c-danger); font-size: var(--fs-xs); font-weight: 700; }

/* Choix des options : la couleur en pastilles, la pointure en grille de cases. */
.opt-group { margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.opt-group legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); width: 100%; margin-bottom: var(--sp-3); padding: 0; font-size: var(--fs-sm); font-weight: 700; }
.opt-chosen { font-weight: 400; color: var(--c-text-muted); }
.opt-help { margin-left: auto; font-size: var(--fs-xs); font-weight: 400; color: var(--c-text-muted); text-decoration: underline; }

.opt-colors { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opt-color { position: relative; display: inline-grid; place-items: center; padding: 3px; border: 2px solid transparent; border-radius: 999px; cursor: pointer; }
.opt-color input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt-color:has(input:checked) { border-color: var(--c-primary); }
.opt-color:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.opt-color.is-off { opacity: .35; cursor: not-allowed; }
.swatch-lg { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--c-border-strong); }

.opt-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: var(--sp-2); }
.opt-size { position: relative; }
.opt-size input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt-size span { display: grid; place-items: center; height: 44px; background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; transition: border-color .15s, background .15s; }
.opt-size:has(input:checked) span { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }
.opt-size:has(input:focus-visible) span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* Épuisée dans cette couleur : barrée, mais toujours à sa place dans la grille. */
.opt-size.is-off span { background: var(--c-surface-2); border-style: dashed; color: var(--c-text-muted); text-decoration: line-through; cursor: not-allowed; }
.opt-error { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-danger); }

.buy-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.buy-actions .btn { flex: 1 1 200px; }
.buy-actions .btn.is-done { background: var(--c-success); border-color: var(--c-success); }
.fav-inline.is-on { color: var(--c-danger); border-color: var(--c-danger); }
.fav-form-bare { display: contents; }
.buy-ean { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.buy-ean code { font-size: inherit; letter-spacing: .04em; }
.buy-reassure { display: grid; gap: var(--sp-2); margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--c-border); list-style: none; font-size: var(--fs-sm); }
.buy-reassure li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.buy-reassure i { color: var(--c-primary); }

.product-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
.rich { font-size: var(--fs-sm); line-height: 1.65; }
.feature-list { display: grid; gap: .1rem; margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.feature-list > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .4rem .2rem; }
.feature-list > div + div { border-top: 1px solid var(--c-border); }
.feature-list dt { color: var(--c-text-muted); }
.feature-list dd { margin: 0; text-align: right; font-weight: 500; }

/* Cœur posé sur la vignette d'une liste. */
.product-card { position: relative; }
.fav-form { position: absolute; z-index: 2; top: .55rem; right: .55rem; margin: 0; }
.fav-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: rgba(255,255,255,.92); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text-muted); font-size: 1rem; cursor: pointer; transition: color .15s, border-color .15s, transform .15s; }
.fav-btn:hover { color: var(--c-danger); border-color: var(--c-danger); transform: scale(1.06); }
.fav-btn.is-on { color: var(--c-danger); border-color: var(--c-danger); }

/* Pastilles de l'en-tête : masquées à zéro, pour ne pas afficher un « 0 » permanent. */
.icon-btn .count.is-zero { display: none; }

/* ---- Panier ---- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: var(--sp-4); align-items: start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); }
.cart-line.is-gone { opacity: .7; }
.cart-media { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.cart-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-info h2 { margin: .1rem 0 .3rem; font-size: 1rem; }
.cart-info h2 a { color: inherit; }
.cart-options { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 .3rem; font-size: var(--fs-sm); color: var(--c-text-muted); }
.cart-option { display: inline-flex; align-items: center; gap: .35rem; }
.cart-ean { margin: 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.cart-ean code { letter-spacing: .04em; }
.cart-gone { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-danger); }
.cart-qty { display: grid; gap: var(--sp-2); justify-items: center; }
.qty-box { display: inline-flex; align-items: stretch; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.qty-inline { display: contents; }                        /* trois formulaires, une seule boîte à l'écran */
.qty-btn { width: 34px; padding: 0; background: var(--c-surface); border: 0; color: var(--c-text); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.qty-btn:hover { background: var(--c-surface-2); }
.qty-box input { width: 46px; height: 36px; padding: 0; border: 0; border-left: 1px solid var(--c-border); border-right: 1px solid var(--c-border); border-radius: 0; text-align: center; font-weight: 600; }
.cart-amount { margin: 0; text-align: right; }
.cart-amount strong { display: block; font-size: 1.05rem; }
.cart-amount span { font-size: var(--fs-xs); }
.cart-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); }
.cart-foot form { margin: 0; }

.cart-summary h2 { margin: 0 0 var(--sp-3); font-size: 1.05rem; }
.cart-totals { display: grid; gap: .45rem; margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.cart-totals > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.cart-totals dd { margin: 0; font-weight: 600; }
.cart-total { padding-top: .5rem; border-top: 1px solid var(--c-border); font-size: 1.05rem; }
.cart-free-hint { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--c-primary-soft); font-size: var(--fs-sm); }
.cart-summary .btn + .btn { margin-top: var(--sp-2); }
.cart-summary .shop-note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Tiroir : aperçu du panier */
.drawer-cart { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.drawer-cart li { display: flex; gap: var(--sp-3); align-items: start; }
.drawer-cart-media { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 56px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.drawer-cart-media img { width: 100%; height: 100%; object-fit: cover; }
.drawer-cart p { margin: .15rem 0 0; font-size: var(--fs-xs); }

@media (max-width: 640px) {
  /* Sur mobile, un visuel 4/5 en pleine largeur mange tout l'écran avant même le prix :
     on le plafonne pour que le choix des pointures reste à portée de pouce. */
  .gallery-main { aspect-ratio: auto; height: min(58vh, 420px); }
  .cart-line { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "media info" "qty amount"; }
  .cart-media { grid-area: media; width: 76px; }
  .cart-info { grid-area: info; }
  .cart-qty { grid-area: qty; justify-items: start; }
  .cart-amount { grid-area: amount; align-self: center; }
}

/* ======================================================= 15. Commande, galerie agrandie
   Le tunnel réutilise la grille du panier (.cart-layout) : mêmes proportions, même
   récapitulatif à droite — le visiteur ne change pas de repères en avançant. */

/* Fil des étapes */
.steps { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin: var(--sp-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); }
.steps .step-n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border-strong); font-size: var(--fs-xs); font-weight: 700; }
.steps .is-now { color: var(--c-text); font-weight: 600; }
.steps .is-now .step-n { background: var(--c-text); border-color: var(--c-text); color: var(--c-text-invert); }
.steps .is-done .step-n { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success); }

.order-choice { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.order-choice .btn { flex: 1 1 200px; }

/* Choix du mode de remise et de la boutique : des cartes cliquables, pas des ronds perdus
   au bout d'une ligne — la cible est tout le bloc, y compris sur un écran tactile. */
.mode-choice, .shop-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.mode-card { position: relative; display: grid; gap: .25rem; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mode-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-card:hover { border-color: var(--c-primary); }
.mode-card.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); background: var(--c-primary-soft); }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.mode-head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.mode-head i { color: var(--c-primary); }
.shop-choice { margin-top: var(--sp-2); }

/* Un bouton-lien désactivé : pas de clic, pas de curseur trompeur. */
.btn.is-disabled { opacity: .55; pointer-events: none; }

/* Confirmation de commande */
.order-done { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); background: var(--c-success-soft); border-radius: var(--radius-lg); }
.order-done > i { font-size: 2.4rem; color: var(--c-success); }
.order-done h1 { margin: 0 0 .2rem; }
.order-done p { margin: 0; }
.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.pill { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.pill-success { background: var(--c-success-soft); color: var(--c-success); }
.pill-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.pill-danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.pill-muted   { background: var(--c-surface-2);    color: var(--c-text-muted); }
.cart-line-flat { grid-template-columns: minmax(0, 1fr) auto; }
.cart-line-flat h3 { margin: .1rem 0 .3rem; font-size: 1rem; }
.cart-line-flat h3 a { color: inherit; }

/* ---- Galerie : flèches, compteur, agrandissement ---- */
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-open img { width: 100%; height: 100%; object-fit: cover; }
.gallery-zoom-hint { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--c-text); font-size: 1rem; opacity: 0; transition: opacity .15s; }
.gallery-main:hover .gallery-zoom-hint { opacity: 1; }
.gallery-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; transform: translateY(-50%); border: 1px solid var(--c-border); border-radius: 999px; background: rgba(255,255,255,.92); color: var(--c-text); font-size: 1.05rem; cursor: pointer; transition: background .15s; }
.gallery-nav:hover { background: #fff; }
.gallery-prev { left: .6rem; } .gallery-next { right: .6rem; }
.gallery-counter { position: absolute; left: .6rem; bottom: .6rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(15,19,32,.7); color: #fff; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.lightbox { width: min(96vw, 1100px); max-width: none; height: min(92vh, 900px); max-height: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: #10131c; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 10, 16, .82); }
.lightbox-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.12); }
.lightbox-title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-counter { margin-left: auto; font-size: var(--fs-xs); color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.lightbox .icon-btn { color: #fff; }
.lightbox .icon-btn:hover { background: rgba(255,255,255,.12); }
.lightbox-stage { position: relative; display: grid; place-items: center; height: calc(100% - 58px); overflow: hidden; cursor: zoom-in; }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .2s ease; }
/* Zoomé, l'image suit le pointeur : l'origine de la transformation est déplacée en JS. */
.lightbox.is-zoomed .lightbox-stage { cursor: zoom-out; }
.lightbox.is-zoomed .lightbox-stage img { transform: scale(2.4); }
.lightbox .gallery-nav { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff; }
.lightbox .gallery-nav:hover { background: rgba(255,255,255,.26); }
body.lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
  .lightbox { width: 100vw; height: 100vh; border-radius: 0; }
  .order-done { flex-direction: column; text-align: center; }
  .steps { gap: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
}