/* =============================================================================
   Minikos - styles principaux
   Univers "album illustré" (parents + enfants), chaleureux sans être criard.
   NE PAS EFFACER LES COMMENTAIRES DE CE FICHIER.

   LÉGENDE COMMENTAIRES :
   • « ÉDITABLE ADMIN » (MAJUSCULES) = valeur / contenu réglable dans WordPress.
     L’admin écrase souvent le défaut CSS (Personnaliser, ACF Accueil, Woo…).
   • Sans ce marqueur = réglage UNIQUEMENT dans ce fichier (ou le JS).

   OÙ ÉDITER DANS L’ADMIN (rappel) :
   • Apparence → Personnaliser → Minikos — Couleurs / Polices
   • Apparence → Menus (liens du header)
   • Pages → Accueil → Logo + Bannière + Bulles + Sections (nb / ordre / forme photo) + Pied produit (ACF)
   • Pages → Boutique → Boutique — Réglages (grille + panier fiche)
   • Produits WooCommerce (titre, phrase, caché oui/non, images, catégories, ACF icone_panier)

   NAVIGATION (dans ce fichier) :
   Ctrl+F puis tape @@root  /  @@header  /  @@hero  /  @@story  etc.
   Liste complète → assets/css/SOMMAIRE.md

   1. @@root ……… couleurs, --max, rayons, ombres
   2. @@header …… logo, menu, icônes panier/favoris
   3. @@hero ……… bannière accueil
   4. @@trust …… badges de réassurance
   5. @@story …… bandes Accueil (+ @@carousel ; .story--round = forme ronde admin)
   6. @@steps …… section Étapes Accueil
   7. @@cta ……… bandeau lien boutique
   7b. @@viewer3d … visionneuse GLB Accueil
   7. @@products … grille + cartes + favoris + fly-to-cart
   8. @@price …… étiquettes + bandeau offre
   9. @@shop ……… shop-hero, filtres bulles
   10. @@favorites … page favoris
   11. @@woo ……… panier, checkout, fiche, mon compte
   12. @@footer
   13. @@responsive (960 / 720)
   ============================================================================= */

/* @@fonts — polices locales */
@font-face {
  font-family: "Bryndan Write";
  src:
    url("../fonts/bryndan-write/BryndanWriteBook.woff2") format("woff2"),
    url("../fonts/bryndan-write/BryndanWriteBook.ttf") format("truetype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* @@root */
:root {
  /* -----------------------------------------------------------------------
     GUIDE RAPIDE - où modifier quoi
     • Couleurs / polices …… ÉDITABLE ADMIN (Personnaliser) - défauts ci-dessous
     • Largeur site ………… --max (CODE SEULEMENT)
     • Hauteur bandes story … .story { padding } (CODE SEULEMENT)
     • Taille images story … .story__media { width } (CODE SEULEMENT)
     • Vitesse carrousel …… main.js → INTERVAL_MS (CODE SEULEMENT)
     • Contenu story / hero … ÉDITABLE ADMIN (Pages → Accueil, ACF)
     • Colonnes grille boutique … ÉDITABLE ADMIN (Pages → Boutique → Grille produits)
     • Cartes produits ……… .product-grid + .product-card (mise en page CODE ;
                               contenu produit = WooCommerce ADMIN)
     -----------------------------------------------------------------------
     Astuce : var(--nom) = « utilise la valeur de --nom définie ici ».
     Les vars marquées ÉDITABLE ADMIN sont réinjectées après ce fichier
     par functions.php (Personnaliseur + ACF Boutique) → l’admin PRIME.
     ----------------------------------------------------------------------- */

  /* ----- Textes ----- */
  --ink: #3a342c;              /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Texte courant */
  --title: #33291f;            /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Titres */
  --muted: #8a7f70;            /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Texte secondaire */

  /* ----- Fonds & bordures ----- */
  --bg: #ffffff;               /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Fond de page */
  --surface: #ffffff;          /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Fond cartes / blocs */
  --line: rgba(58, 52, 44, 0.12); /* ÉDITABLE ADMIN : Personnaliser → Couleurs → Lignes (base hex → rgba 0.12 auto) */

  /* ----- Couleur d’action ----- */
  --accent: #e2703f;           /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Accent */
  --accent-dark: #c85a2e;      /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Accent survol */
  --accent-soft: rgba(226, 112, 63, 0.14); /* ÉDITABLE ADMIN (auto) : dérivé de Accent à 14 % d’opacité */

  /* ----- Couleur secondaire (sauge - prix, coche panier…) ----- */
  --accent-secondary: #7fa98f; /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Secondaire */
  --accent-secondary-dark: #628873; /* ÉDITABLE ADMIN : Personnaliser → Minikos - Couleurs → Secondaire foncé */

  /* ----- Formes & ombres - CODE SEULEMENT (pas dans le Personnaliseur) ----- */
  --radius: 12px;              /* coins arrondis “normaux” */
  --radius-lg: 18px;           /* coins plus ronds (cartes) */
  --shadow-soft: 0 10px 24px rgba(58, 52, 44, 0.08);  /* ombre légère */
  --shadow-hover: 0 16px 32px rgba(58, 52, 44, 0.14); /* ombre au survol */
  /* Ombre bulle panier — ÉDITABLE ADMIN : Boutique → Panier (écrasé si toggle Non → none) */
  --cart-shadow: 0 2px 4px rgba(58, 52, 44, 0.22), 0 4px 12px rgba(58, 52, 44, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* ----- Polices ----- */
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* ÉDITABLE ADMIN : Personnaliser → Minikos — Polices → --font */
  --display: "Nunito", "Segoe UI", sans-serif;             /* ÉDITABLE ADMIN : Personnaliser → Polices (Nunito / Bryndan Write) */

  /* ----- Grille boutique ----- */
  --shop-cols: 4;              /* ÉDITABLE ADMIN : Pages → Boutique → Boutique — Grille produits → grand écran */
  --shop-cols-tablet: 3;       /* ÉDITABLE ADMIN : Pages → Boutique → Boutique — Grille produits → tablette ≤960px */
  --shop-cols-mobile: 2;       /* ÉDITABLE ADMIN : Pages → Boutique → Boutique — Grille produits → mobile ≤720px */

  --max: 1120px;               /* ← largeur max du contenu centré (CODE SEULEMENT) */
  --header-h: 4rem;            /* hauteur mini de la barre du haut (CODE SEULEMENT) */
  --hero-wave-h: clamp(36px, 5.5vw, 64px); /* hauteur SVG vague bas de bannière */
  --section-pad-y: 1.5rem; /* ÉDITABLE ADMIN : Personnaliser → Minikos - Sections → Marges */

  /* Délimitation — ÉDITABLE ADMIN : Personnaliser → Minikos - Sections → Délimitation */
  --fold-color: #9a9084;
  --fold-thickness: 2px;
  --fold-dash: 8px;
  --fold-gap: 6px;
}

/* Surbrillance — ÉDITABLE ADMIN : mots + style (surligner|écriture|bryndan|souligner|encadrer|entourer|gras|italique) + couleur */
mark.minikos-hl,
.minikos-hl {
  display: inline;
  margin: 0;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/*
 * Surligner = fond coloré type marqueur.
 * Padding vertical :
 *   • max ~3 % de la taille du texte (0.03em)
 *   • borné par la moitié de l’interligne, moins une marge de sécurité
 *     (--minikos-hl-gap = 0.20em) vers lignes dessus / dessous
 *   • si line-height ≈ 1 (titres serrés) → padding vertical = 0
 * Ancien nom de classe : --surligneur (rétrocompat).
 */
.minikos-hl--surligner,
.minikos-hl--surligneur {
  --minikos-hl-gap: 0.20em; /* marge air vers lignes voisines */
  --minikos-hl-pad-y: 0.02em; /* repli navigateurs sans lh */
  background-color: #E4FF5C; /* repli ; couleur admin via style inline */
  color: inherit;
  padding: var(--minikos-hl-pad-y) 0.12em;
  border-radius: 0.2em; /* coins légèrement arrondis */
}

@supports (padding: min(1px, 1lh)) {
  .minikos-hl--surligner,
  .minikos-hl--surligneur {
    --minikos-hl-pad-y: min(
      0.03em,
      max(0em, calc((1lh - 1em) / 2 - var(--minikos-hl-gap)))
    );
    padding-block: var(--minikos-hl-pad-y);
    padding-inline: 0.12em;
  }
}

/* Écriture = seule la couleur du texte change */
.minikos-hl--ecriture {
  background: transparent;
  padding: 0;
  /* color via style inline admin */
}

/* Bryndan = police manuscrite (aussi auto sur Miniko / Minikos) */
.minikos-hl--bryndan {
  background: transparent;
  padding: 0;
  font-family: "Bryndan Write", cursive;
  font-size: 1.20em; /* +20 % par rapport à la police du texte parent */
  font-weight: 400;
  font-style: normal;
  /* color optionnelle via style inline admin */
}

/* Souligner = trait sous le mot (couleur admin via --minikos-hl-underline) */
.minikos-hl--souligner {
  background: transparent;
  padding: 0;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--minikos-hl-underline, #e2703f);
}

/* Encadrer = cadre autour du mot (couleur admin via --minikos-hl-outline) */
.minikos-hl--encadrer {
  background: transparent;
  color: inherit;
  padding: 0.04em 0.22em;
  border: 0.135em solid var(--minikos-hl-outline, #e2703f);
  border-radius: 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Entourer = ovale façon crayon (légèrement irrégulier / penché) */
.minikos-hl--entourer {
  background: transparent;
  color: inherit;
  display: inline-block;
  padding: 0.12em 0.38em;
  border-style: solid;
  border-color: var(--minikos-hl-outline, #e2703f);
  /* Épaisseurs un peu inégales = trait au crayon */
  border-width: 0.13em 0.16em 0.14em 0.12em;
  border-radius: 50% 48% 52% 49% / 48% 52% 48% 52%;
  transform: rotate(-2.5deg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Gras = texte en gras (couleur optionnelle via admin) */
.minikos-hl--gras {
  background: transparent;
  padding: 0;
  font-weight: 700;
  /* color optionnelle via style inline admin */
}

/* Italique = texte en italique (couleur optionnelle via admin) */
.minikos-hl--italique {
  background: transparent;
  padding: 0;
  font-style: italic;
  /* color optionnelle via style inline admin */
}

/* Puces inline : [puce N] → image ou emoji à la taille de la police */
img.minikos-puce {
  display: inline;
  height: 1em;
  width: auto;
  max-width: 1.35em;
  vertical-align: -0.15em;
  margin: 0 0.06em;
  object-fit: contain;
}
span.minikos-puce--emoji {
  display: inline;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.1em;
  margin: 0 0.04em;
}

/* Formes noires : moitié de la police du texte, même couleur (sauf surbrillance). */
@property --minikos-puce-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #3a342c;
}
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
td,
th,
dt,
dd,
.hero__kicker,
.hero__title,
.hero__lede,
.hero__cta,
.single-mini__summary,
.woocommerce-product-details__short-description {
  --minikos-puce-color: currentColor;
}
span.minikos-puce--shape {
  display: inline-block;
  font-size: 0.5em;
  line-height: 1;
  color: inherit;
  background: none;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
  vertical-align: 0.35em;
  margin: 0 0.25em 0 0;
}
.minikos-hl--surligner .minikos-puce--shape,
.minikos-hl--surligneur .minikos-puce--shape,
.minikos-hl--ecriture .minikos-puce--shape {
  color: var(--minikos-puce-color, var(--ink));
  background: none;
}
span.minikos-puce--arrow {
  font-size: 1em;
  width: 1.2em;
  height: 0.85em;
  vertical-align: -0.08em;
}
span.minikos-puce--arrow .minikos-puce__arrow {
  display: block;
  width: 100%;
  height: 100%;
}
/* Rond dessiné : taille contre le texte (pas 0.5em), boîte = disque */
span.minikos-puce--circle {
  font-size: 1em;
  width: 0.42em;
  height: 0.42em;
  line-height: 0;
  vertical-align: 0.12em;
  margin: 0 0.35em 0 0;
}
span.minikos-puce--circle .minikos-puce__circle {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ligne de puce : texte à la ligne aligné sous le texte, pas sous la puce.
   align-items: baseline suit la 1ʳᵉ ligne, même si un mot plus grand l’agrandit. */
.minikos-puce-item {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0.15em 0;
}
.minikos-puce-item__text {
  flex: 1;
  min-width: 0;
}
.minikos-puce-item > .minikos-puce,
.minikos-puce-item > img.minikos-puce {
  flex: 0 0 auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
  /* Emoji ~1em : milieu du glyphe déjà proche des capitales */
  top: -0.03em;
}
.minikos-puce-item > span.minikos-puce--shape {
  /* Glyphe à 0.5em : -0.23em ici = -0.115em du texte */
  top: -0.23em;
  vertical-align: baseline;
}
.minikos-puce-item > span.minikos-puce--circle {
  top: -0.11em;
}
.minikos-puce-item > span.minikos-puce--arrow {
  top: 0.11em;
}
.minikos-puce-item > img.minikos-puce {
  display: inline-block;
  top: 0.18em;
}

/* Applique un calcul de largeur plus prévisible à tous les éléments */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* défilement doux si un lien pointe vers #une-ancre */
  height: 100%;
}

/* Styles de base de toute la page */
body {
  margin: 0;                   /* enlève la marge blanche du navigateur */
  min-height: 100%;
  min-height: 100dvh;          /* pied de page collé en bas même si peu de contenu */
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;           /* interligne : 1 = serré, 1.55 = confortable */
}

/* Zone centrale : s’étire pour pousser le footer vers le bas */
.site-main {
  flex: 1 0 auto;
  width: 100%;
}

/* Images fluides : ne dépassent jamais leur conteneur */
img {
  max-width: 100%;
  height: auto;
  display: block;              /* évite un petit espace sous l’image */
}

/* Liens */
a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-dark);   /* :hover = quand la souris est dessus */
}

/* Texte caché pour lecteurs d’écran / lien “Aller au contenu” hors écran */
.screen-reader-text,
.skip-link {
  position: absolute;
  left: -9999px;
}

/* Quand on focus le skip-link au clavier (Tab), on le montre */
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  padding: 0.5rem 0.75rem;
}

/* =============================================================================
   @@header - barre du haut : logo | menu | icônes favoris + panier
   ÉDITABLE ADMIN :
   • Logo → Pages → Accueil → « Accueil - Logo en-tête » (ratio ~3:1)
   • Liens menu → Apparence → Menus (emplacement principal)
   • Icône panier (image) → Pages → Boutique → Panier
   Mise en page / tailles / animations = CODE SEULEMENT (ci-dessous).
   ============================================================================= */

/* sticky = reste collée en haut quand on scroll ; z-index = passe devant le reste */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92); /* blanc un peu transparent */
  backdrop-filter: blur(12px);           /* floute ce qui passe derrière */
  border-bottom: 1px solid var(--line);
}

/* Grille 3 colonnes : logo | menu (centre) | icônes */
.site-header__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;              /* centre le bloc horizontalement */
  min-height: var(--header-h);
  padding: 0.65rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr minmax(7rem, auto);
  align-items: center;
  gap: 1rem 1.5rem;             /* écart entre les 3 zones */
  box-sizing: border-box;
}

.site-header__brand {
  min-width: 0;                /* permet au logo de se rétrécir si besoin */
  max-height: 100%;
  display: flex;
  align-items: center;
}

/* Lien logo → accueil (image ACF ou texte de secours) */
.site-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  max-height: 100%;
}

.site-brand:hover {
  opacity: 0.88;
}

/* ÉDITABLE ADMIN : fichier = Pages → Accueil → Logo en-tête — ratio largeur:hauteur ≈ 3:1
   Spécificité haute : Woo (.woocommerce-page img { height:auto }) ne doit pas agrandir le header. */
.site-header .site-brand__img,
.woocommerce-page .site-header .site-brand__img,
.woocommerce .site-header .site-brand__img {
  display: block;
  height: 2.1rem !important;   /* ← hauteur fixe du logo (toutes pages) */
  width: auto !important;
  max-height: 2.1rem !important;
  max-width: 7.5rem;
  aspect-ratio: 3 / 1;
  object-fit: contain;
  object-position: left center;
}

/* Secours si aucune image : lockup Miniko + La Fabrique (Bryndan) */
.site-brand--text {
  align-items: flex-start;
  line-height: 1;
  color: var(--title);
}

.site-brand__lockup {
  display: flex;
  flex-direction: column;
  align-items: center; /* centre « La Fabrique » sous Miniko */
  line-height: 1;
  font-size: 1.940625rem; /* 1.6875rem + 15 % */
}

.site-brand__name {
  display: block;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-align: center;
}

.site-brand--text .site-brand__name .minikos-hl--bryndan {
  font-size: 1em;
}

/* « La Fabrique » dans le creux, centré sous Miniko */
.site-brand__tag {
  display: block;
  margin: -0.28em 0 0; /* plus proche de Miniko */
  padding: 0;
  width: max-content;
  font-family: "Bryndan Write", cursive;
  font-size: 0.33075em; /* +5 % encore */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: inherit;
  text-align: center;
  white-space: nowrap;
}

.site-brand--text:hover {
  opacity: 1;
  color: var(--accent);
}

/* ÉDITABLE ADMIN : libellés / URLs (Apparence → Menus) - styles = CODE */
.site-nav {
  justify-self: center;
}

/* Liste des liens du menu (WordPress ajoute les <li>) */
.site-nav__list {
  list-style: none;            /* enlève les puces • */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;             /* passe à la ligne si trop de liens */
  justify-content: center;
  gap: 0.35rem 1.5rem;         /* espace entre liens */
}

.site-nav__list > li {
  position: relative;          /* ancre les sous-menus en dessous */
}

.site-nav__list a {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.2rem 0;
  transition: color 0.2s ease; /* transition douce de la couleur */
}

/* Trait orange sous le lien (caché par défaut : scaleX(0)) */
.site-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);        /* largeur 0 = invisible */
  transform-origin: left;
  transition: transform 0.2s ease;
}

/* Lien survolé OU page active → couleur accent */
.site-nav__list > li > a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--accent);
}

/* Affiche le trait (scaleX(1) = pleine largeur) */
.site-nav__list > li > a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after {
  transform: scaleX(1);
}

/* Sous-menu déroulant (enfants du menu WP) - caché tant qu’on ne survole pas */
.site-nav__list .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% - 0.15rem);
  left: 0;
  min-width: 12.5rem;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  z-index: 50;
  flex-direction: column;
  gap: 0.15rem;
  box-shadow: var(--shadow-soft);
}

/* Zone invisible sous le parent : évite que le sous-menu se ferme trop vite */
.site-nav__list > li.menu-item-has-children::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem;
}

/* Affiche le sous-menu au survol ou au focus clavier */
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
  display: flex;
}

.site-nav__list .sub-menu a {
  display: block;
  width: 100%;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
}

.site-nav__list .sub-menu a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Petite flèche éventuelle d’un plugin de menu */
.site-nav__list .wcmamtx_nav_chevron {
  margin-left: 0.35rem;
  font-size: 0.7em;
}

/* Zone droite : cœur favoris + panier */
.site-header__actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Cercle cliquable autour de chaque icône */
.header-icon {
  position: relative;          /* pour positionner le badge chiffre */
  display: inline-grid;
  place-items: center;         /* centre l’icône dans le cercle */
  width: 2.4rem;               /* ← taille du cercle */
  height: 2.4rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;        /* 999px = pill / cercle parfait */
  transition: color 0.15s ease, background 0.15s ease;
}

.header-icon:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.header-icon__svg {
  display: block;
  width: 1.25rem;              /* ← taille du dessin SVG */
  height: 1.25rem;
}

/* ÉDITABLE ADMIN : image panier header (Pages → Boutique → Panier)
   Taille = même bulle / icône que sur les fiches produit (--fiche-cart-btn-size). */
.header-icon.cart-link {
  width: var(--fiche-cart-btn-size, 2.7rem);
  height: var(--fiche-cart-btn-size, 2.7rem);
}

.header-icon__img {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.cart-link__icon {
  flex-shrink: 0;              /* l’icône ne se comprime pas */
}

/* Classe ajoutée en JS juste après un ajout au panier → petit “pulse” */
.cart-link__icon--bump {
  animation: minikos-cart-bump 0.26s ease;
}

@keyframes minikos-cart-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.4); } /* grossit puis revient */
  100% { transform: scale(1); }
}

/* Badge chiffre (ex. “2”) sur favoris / panier */
.header-icon .cart-link__count,
.header-icon .favorites-link__count {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* L’attribut HTML hidden doit vraiment cacher le badge */
.cart-link__count[hidden],
.favorites-link__count[hidden] {
  display: none !important;
}

/* Bouton ☰ mobile - caché sur desktop (display:none), visible ≤720px */
.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  place-items: center;
  padding: 0;
}

/* Les 3 barres du ☰ = élément + 2 pseudo-éléments (::before / ::after) */
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before {
  top: -5px;                   /* barre du haut */
}

.nav-toggle__icon::after {
  top: 5px;                    /* barre du bas */
}

/* =============================================================================
   @@hero - bannière accueil
   1ʳᵉ vue = hero (contenu + vague + bulles) sans scroll.
   ÉDITABLE ADMIN : Pages → Accueil → Bannière + Image mise en avant.
   ============================================================================= */
.hero {
  position: relative;
}

/* ÉDITABLE ADMIN : couleur de fond (ACF) écrase ce défaut CSS */
.hero__panel {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  padding: 2rem 0 0;
  /* Toute la 1ʳᵉ vue (bulles incluses dans le panel) */
  max-height: calc(100svh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.hero__inner {
  flex: 1 1 auto;
  min-height: 0;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.5rem 2.75rem;
  align-items: center;
}

.hero__copy {
  max-width: 28rem;
}

.hero__kicker {
  margin: 0 0 0.65rem;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent-secondary-dark);
  letter-spacing: 0.02em;
}

.hero__title {
  margin: 0 0 0.85rem;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.2; /* un peu d’air entre lignes pour la surbrillance */
  color: var(--title);
}

.hero__title-line {
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.65rem);
}

.hero__title-accent {
  display: block;
  font-family: var(--display); /* même police titres que le reste */
  font-size: clamp(1.7rem, 4vw, 2.65rem); /* même taille que .hero__title-line */
  font-weight: 800;
  color: var(--title); /* plein, sans contour */
}

.hero__lede {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 26rem;
}

.hero__cta {
  --hero-cta-secondary: #ffffff; /* ÉDITABLE ADMIN : Accueil → Bannière → Couleur secondaire */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius); /* CTA bannière : rectangle (deploy check) */
  border: 2px solid transparent;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Rempli : fond = Accent (Personnaliser), texte = secondaire */
.hero__cta--filled {
  background: var(--accent);
  color: var(--hero-cta-secondary);
  border-color: var(--accent);
}

.hero__cta--filled:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--hero-cta-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Bordure : contour + texte = Accent, fond = secondaire */
.hero__cta--outline {
  background: var(--hero-cta-secondary);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

.hero__cta--outline:hover {
  background: var(--accent);
  color: var(--hero-cta-secondary);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Repli si aucune variante (autres pages) */
.hero__cta:not(.hero__cta--filled):not(.hero__cta--outline) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.hero__cta:not(.hero__cta--filled):not(.hero__cta--outline):hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.hero__visual {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-height: 100%;
}

.hero__img {
  width: min(100%, 500px);
  /* Grandit autant que possible dans la place restante du hero */
  max-height: min(400px, calc(100dvh - var(--header-h) - 14rem));
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgba(58, 52, 44, 0.16));
  animation: minikos-hero-float 5.5s ease-in-out infinite;
}

.hero__visual-placeholder {
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 4 / 3;
  max-height: min(320px, 36dvh);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(58, 52, 44, 0.2);
  color: var(--muted);
}

@keyframes minikos-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Vague hero (légèrement adaptée) vs vague boutique (taille d’origine) */
.hero__wave {
  display: block;
  width: 100%;
  height: var(--hero-wave-h);
  margin-bottom: -1px;
  flex-shrink: 0;
}

.shop-hero__wave {
  display: block;
  width: 100%;
  height: clamp(42px, 7vw, 72px);
  margin-bottom: -1px;
}

.hero__wave path,
.shop-hero__wave path {
  fill: var(--section-wave-fill, var(--bg));
}

/* =============================================================================
   @@trust - rangée de “pills” sous la vague (dans .hero__panel)
   ÉDITABLE ADMIN : Pages → Accueil → « Accueil - Bulles de confiance »
   Hauteur utile = du CREUX le plus bas de la vague (path y=70 / vb 80)
   jusqu’au bas de la bande. Padding Y égal → centrage réel des bulles.
   ============================================================================= */
.trust-badges {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  background: var(--bg);
  padding: 0.95rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style Vague : la bande remonte sur la vague (transparente sur les pics, crème sous le creux) */
.hero__wave + .trust-badges {
  /* Sync avec le creux max du path .hero__wave (y=70, viewBox h=80) */
  --wave-trough: calc(var(--hero-wave-h) * 70 / 80);
  background: transparent;
  margin-top: calc(var(--hero-wave-h) * -1);
  padding-top: calc(var(--wave-trough) + 0.45rem);
}

.hero__wave + .trust-badges::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--wave-trough);
  bottom: 0;
  background: var(--bg);
  z-index: -1;
}

.trust-badges__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--max);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 0.45rem 0.85rem;
}

/* Une pastille = icône + texte */
.trust-badges__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.trust-badges__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

/* Variante un peu plus “mise en avant” pour le badge prix */
.trust-badges__item--price {
  border-color: rgba(226, 112, 63, 0.35);
  background: var(--accent-soft);
}

/* Message “aucun produit” (boutique / favoris) */
.catalog__empty {
  text-align: center;
  color: var(--muted);
}

/* =============================================================================
   @@fold - ligne pointillée à la lisière entre sections Accueil (sans espace)
   ÉDITABLE ADMIN : Apparence → Personnaliser → Minikos - Sections → Délimitation
   ============================================================================= */
.fold-rule {
  height: var(--fold-thickness);
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  font-size: 0;
  background-color: transparent;
  /* repeating-linear-gradient = tirets contrôlables (longueur + espacement) */
  background-image: repeating-linear-gradient(
    to right,
    var(--fold-color) 0,
    var(--fold-color) var(--fold-dash),
    transparent var(--fold-dash),
    transparent calc(var(--fold-dash) + var(--fold-gap))
  );
  background-size: 100% var(--fold-thickness);
  background-repeat: repeat-x;
  background-position: center;
}

/* Vague entre sections (même path que .hero__wave) — Style = Vague */
.section-wave-wrap {
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.section-wave {
  display: block;
  width: 100%;
  height: var(--hero-wave-h);
  margin: 0 0 -1px;
}

.section-wave path {
  fill: var(--section-wave-fill, var(--bg));
}

/* Fonds identiques de part et d'autre : courbe tracée (couleur/épaisseur des pointillés) */
.section-wave path.section-wave__line {
  fill: none;
  stroke: var(--fold-color);
  stroke-width: var(--fold-thickness);
  vector-effect: non-scaling-stroke;
}

/* =============================================================================
   @@story - bandes d’accueil
   ÉDITABLE ADMIN (Pages → Accueil → Accueil - Sections) :
   • Nombre de sections, ordre (drag & drop), couleur, textes, photos 1–5
   • Forme des photos : rectangle ou rond (par section)
   Mise en page / padding / carrousel UI = CODE SEULEMENT
   → Hauteur bande : padding de .story
   → Taille image : width de .story__media
   → Photo ronde : classe .story--round (choix admin « Forme des photos »)
   ============================================================================= */

/* Commun aux bandes */
.story {
  position: relative;
  /* padding: HAUT-BAS  GAUCHE-DROITE - ← change surtout le 1er groupe pour la hauteur */
  padding: var(--section-pad-y) 1.25rem;
  overflow: hidden;
}

/* Fonds : Apparence → Personnaliser → Couleurs de fonds (sections 1–3) ; section 4 = ACF */
.story--section1,
.story--section2,
.story--section3,
.story--section4 {
  background: #ffffff;
}

/* Grille interne : texte | image (proportions fr = parts relatives) */
.story__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* texte un peu plus large que l’image */
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /*
   * La rangée prend la hauteur du bloc le plus haut (textes OU photo + forme),
   * la marge section (--section-pad-y) s’applique autour, et chaque bloc est centré en Y.
   */
  align-items: center;
}

/* Variante “image à gauche” : on inverse les proportions + order */
.story--image-left .story__inner {
  grid-template-columns: 0.95fr 1.05fr;
}

.story--image-left .story__media {
  order: -1;                   /* -1 = place l’image avant le texte dans la grille */
}

/* Petit label AU-DESSUS du titre - ÉDITABLE ADMIN : ACF « Petit titre (au-dessus) » */
.story__kicker {
  margin: 0 0 0.65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none; /* respecte la casse saisie en admin */
  color: var(--accent-secondary-dark);
}

.story--round .story__kicker {
  color: var(--accent-dark);   /* kicker un peu plus “chaud” pour la section ronde */
}

/* ÉDITABLE ADMIN : texte ACF « Titre » - taille / police = CODE */
.story__title {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.65rem, 3.4vw, 2.45rem); /* ← taille du titre de bande */
  line-height: 1.18;
  color: var(--title);
  letter-spacing: -0.01em;
  max-width: 18ch;             /* ch = largeur d’un “0” : limite ~18 caractères */
}

/* ÉDITABLE ADMIN : texte ACF « Texte » - styles = CODE */
.story__text {
  max-width: 34rem;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.65;
}

.story__text p {
  margin: 0 0 0.85rem;
}

.story__text p:last-child {
  margin-bottom: 0;            /* pas de marge sous le dernier paragraphe */
}

/* Cadre de l’image (c’est ICI que tu règles la taille - CODE)
   ÉDITABLE ADMIN : fichiers Photos 1–5 (ACF section)
   La forme (::before) et les points du carrousel débordent du cadre : les marges
   --media-bleed-* (fractions de la largeur) réservent cette place, pour que le bloc
   compte toute sa hauteur visible (marges section + centrage Y justes).
   ⚠ Si tu modifies un `inset` de forme ci-dessous, mets à jour ces fractions. */
.story__media {
  --media-w: 20rem;            /* ← taille image (essaie 18rem, 22rem…) */
  --media-bleed-top: 0;
  --media-bleed-bottom: 0.075; /* forme : -6 % de la hauteur (4/5) = 7.5 % de la largeur */
  --media-dots-space: 0rem;
  position: relative;
  width: min(100%, var(--media-w));
  justify-self: center;
  margin: calc(min(100%, var(--media-w)) * var(--media-bleed-top)) 0
    max(calc(min(100%, var(--media-w)) * var(--media-bleed-bottom)), var(--media-dots-space));
}

.story__media:has(.story-carousel__dots) {
  --media-dots-space: 1.4rem;  /* points sous le carrousel (0.65rem + pastille) */
}

/* Forme colorée DERRIÈRE l’image (décor) - ::before = pseudo-élément */
.story__media::before {
  content: "";
  position: absolute;
  inset: 8% -6% -6% 10%;       /* décale la forme (haut droite bas gauche) */
  border-radius: 2.5rem 1.25rem 2.75rem 1.5rem; /* coins irréguliers */
  background: var(--accent-soft);
  z-index: 0;                  /* derrière l’image */
  transform: rotate(-2.5deg);
}

.story--section2 .story__media {
  --media-bleed-top: 0.05;     /* forme : -4 % de la hauteur (4/5) = 5 % de la largeur */
  --media-bleed-bottom: 0;
}

.story--section2 .story__media::before {
  background: rgba(127, 169, 143, 0.22); /* sauge */
  inset: -4% 8% 10% -5%;
  transform: rotate(2deg);
  border-radius: 1.25rem 2.75rem 1.5rem 2.5rem;
}

.story--round .story__media::before {
  background: rgba(240, 185, 76, 0.22); /* moutarde */
  inset: 12% -4% -8% 14%;
  border-radius: 50% 40% 45% 55%; /* presque un blob / cercle */
  transform: rotate(0deg);
}

/* L’image elle-même (au-dessus du décor) */
.story__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;         /* format portrait (largeur / hauteur) */
  object-fit: cover;           /* remplit le cadre en croppant un peu */
  border-radius: 1.75rem 1rem 2rem 1.25rem;
  box-shadow: var(--shadow-hover);
}

.story--section2 .story__img {
  border-radius: 1rem 2rem 1.25rem 1.75rem; /* autres coins pour varier */
}

.story--round .story__media {
  --media-w: 18rem;            /* ← cadre rond un peu plus compact */
  --media-bleed-top: 0;
  --media-bleed-bottom: 0.08;  /* forme : -8 % de la hauteur (carré) */
}

.story--round .story__img {
  aspect-ratio: 1;             /* carré → rendu “portrait rond” */
  border-radius: 50% 46% 50% 48%;
}

/* -------------------------------------------------------------------------
   @@carousel - carrousel des bandes story (2 à 5 photos) - 1 photo = image normale
   ÉDITABLE ADMIN : les photos (ACF Photos 1–5) - si ≥2 photos → carrousel JS
   Vitesse / swipe / flèches = CODE (INTERVAL_MS dans assets/js/main.js)
   ------------------------------------------------------------------------- */
.story-carousel {
  position: relative;
  z-index: 1;
  width: 100%;
  touch-action: pan-y;         /* scroll vertical OK ; swipe horizontal géré en JS */
  cursor: grab;
}

.story-carousel:active {
  cursor: grabbing;
}

.story-carousel__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;         /* sections 1–3 = portrait */
  border-radius: 1.75rem 1rem 2rem 1.25rem;
  overflow: hidden;            /* coupe les slides au format du cadre */
}

/* Flèches discrètes gauche / droite */
.story-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--title);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(4px);
}

.story-carousel__arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.85);
}

.story-carousel__arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.story-carousel__arrow--prev {
  left: 0.45rem;
}

.story-carousel__arrow--next {
  right: 0.45rem;
}

.story-carousel__arrow svg {
  display: block;
}

/* Un peu plus visibles au survol du carrousel */
.story-carousel:hover .story-carousel__arrow {
  opacity: 0.8;
}

.story--section2 .story-carousel__viewport {
  border-radius: 1rem 2rem 1.25rem 1.75rem;
}

.story--round .story-carousel__viewport {
  aspect-ratio: 1;             /* section 4 = carré / “rond” */
  border-radius: 50% 46% 50% 48%;
}

.story-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.story-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.story-carousel .story__img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;          /* laisse le viewport imposer le cadre */
  object-fit: cover;
  border-radius: 0;            /* le viewport gère déjà les coins */
  box-shadow: none;
  display: block;
  pointer-events: none;        /* le swipe se gère sur le carrousel, pas l’img */
  user-select: none;
  -webkit-user-drag: none;
}

/* Points sous le carrousel - cliquables pour choisir une photo
   (hors flux : la forme reste calée sur la photo seule) */
.story-carousel__dots {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.story-carousel__dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.story-carousel__dot:hover {
  background: var(--muted);
}

.story-carousel__dot.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .story-carousel__slide {
    transition: none;
  }
}

/* Placeholder pointillé si tu n’as pas encore uploadé d’image ACF */
.story__placeholder {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.5rem;
  border-radius: 1.75rem 1rem 2rem 1.25rem;
  border: 2px dashed rgba(58, 52, 44, 0.22);
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
}

.story--round .story__placeholder {
  aspect-ratio: 1;
  border-radius: 50%;
  max-width: 26rem;
  margin-inline: auto;         /* centre horizontalement */
}

.story__placeholder small {
  font-weight: 600;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* =============================================================================
   @@steps - section « Étapes » Accueil (comment ça marche)
   ÉDITABLE ADMIN : Pages → Accueil → Accueil - Étapes
   ============================================================================= */
.home-steps {
  padding: var(--section-pad-y) 1.25rem;
  background: #ffffff; /* Personnaliser → Couleurs de fonds */
}

.home-steps__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.home-steps__list {
  --home-steps-count: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--home-steps-count), minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.home-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.35rem 1.1rem 0.15rem;
  min-width: 0;
}

.home-steps__badge {
  /* Couleurs via .home-steps (--home-steps-badge-fg / --home-steps-badge-bg)
     ÉDITABLE ADMIN : Pages → Accueil → Étapes → Pastilles numéros */
  position: absolute;
  top: 0;
  left: 50%;
  /* Plus à gauche pour moins chevaucher l’image */
  transform: translate(-220%, 0);
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  /* Léger décalage optique : les display bold montent souvent trop haut */
  padding-top: 0.08em;
  color: var(--home-steps-badge-fg, var(--title));
  background: var(--home-steps-badge-bg, #ffffff);
  border: 2px solid var(--home-steps-badge-fg, var(--title));
  box-shadow: 0 1px 3px rgba(58, 52, 44, 0.06);
}

.home-steps__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 6.4rem);
  height: 5.6rem;
  margin: 0.25rem 0 0.65rem;
}

.home-steps__icon--empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(58, 52, 44, 0.03);
}

.home-steps__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 5.4rem;
  object-fit: contain;
  margin: 0 auto;
}

.home-steps__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.25;
  color: var(--title);
  letter-spacing: -0.01em;
}

[data-reveal] .home-steps__inner {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-reveal].is-revealed .home-steps__inner {
  opacity: 1;
  transform: none;
}

@media (max-width: 960px) {
  .home-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.75rem;
  }
}

@media (max-width: 720px) {
  .home-steps__list {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }

  .home-steps__badge {
    left: 1.25rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] .home-steps__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
   @@cta - dernier bandeau “Choisis ton premier Miniko”
   Textes / bouton = ÉDITABLE ADMIN (Pages → Accueil → lien boutique).
   Couleurs via var(--accent) etc. → ÉDITABLE ADMIN (Personnaliser → Couleurs).
   ============================================================================= */
.home-cta {
  padding: var(--section-pad-y) 1.25rem;
  text-align: center;
  background: #ffffff; /* Personnaliser → Couleurs de fonds → Section lien boutique */
}

.home-cta__inner {
  max-width: 36rem;
  margin: 0 auto;
}

.home-cta__kicker {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-cta__title {
  margin: 0 0 0.65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  color: var(--title);
  line-height: 1.2;
}

.home-cta__text {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 1.05rem;
}

/* -------------------------------------------------------------------------
   Apparition au scroll (JS ajoute .is-revealed sur [data-reveal])
   Le FOND de section est immédiat ; seuls texte / image / CTA s’animent.
   ------------------------------------------------------------------------- */
[data-reveal] .story__copy,
[data-reveal] .story__media,
[data-reveal] .home-cta__inner,
[data-reveal] .viewer-3d__inner {
  opacity: 0;
  transform: translateY(1.15rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-reveal].is-revealed .story__copy,
[data-reveal].is-revealed .story__media,
[data-reveal].is-revealed .home-cta__inner,
[data-reveal].is-revealed .viewer-3d__inner {
  opacity: 1;
  transform: none;
}

/* L’image glisse un peu depuis la gauche / la droite */
.story--image-left[data-reveal]:not(.is-revealed) .story__media {
  transform: translateX(-0.75rem);
}

.story--image-right[data-reveal]:not(.is-revealed) .story__media {
  transform: translateX(0.75rem);
}

.story[data-reveal] .story__media {
  transition: transform 0.7s ease 0.08s, opacity 0.7s ease 0.08s;
}

/* Accessibilité : si l’utilisateur demande moins d’animations, on affiche tout de suite */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .story__copy,
  [data-reveal] .story__media,
  [data-reveal] .home-cta__inner,
  [data-reveal] .viewer-3d__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================================
   @@viewer3d - Visionneuse 3D (sous le CTA boutique)
   ÉDITABLE ADMIN : Pages → Accueil → Accueil - Visionneuse 3D
   ============================================================================= */
.viewer-3d {
  padding: var(--section-pad-y) 1.25rem;
  text-align: center;
  background: var(--bg); /* Personnaliser → Couleurs de fonds → Visionneuse 3D */
}

.viewer-3d__inner {
  max-width: 40rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.viewer-3d__text {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.viewer-3d__title {
  margin: 0 0 0.65rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  color: var(--title);
  line-height: 1.2;
}

.viewer-3d__stage {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.viewer-3d__model {
  display: block;
  width: 100%;
  height: min(300px, 48vw);
  min-height: 200px;
  background: transparent;
  --poster-color: transparent;
  cursor: grab;
}

.viewer-3d__model::part(default-progress-bar) {
  display: none;
}

.viewer-3d__model:active {
  cursor: grabbing;
}

.viewer-3d__poster {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* =============================================================================
   @@products — grille + cartes (boutique / favoris / liés)
   ÉDITABLE ADMIN (contenu) :
   • Titre, image, catégories, prix Woo → Produits WooCommerce
   • Mini-image fly-to-cart → ACF produit « icone_panier » (sinon image produit)
   • Icône bouton panier → Pages → Boutique → Panier
   ÉDITABLE ADMIN (grille) :
   • Nb colonnes desktop / tablette / mobile → Pages → Boutique → Boutique — Grille produits
   Mise en page (padding, tilt) = CODE SEULEMENT
   → Nombre de colonnes : var(--shop-cols) / --shop-cols-tablet / --shop-cols-mobile
   → Air dans la carte : .product-card { padding }
   → Mini-photo panier : .product-card__mini-thumb
   ============================================================================= */

/* ÉDITABLE ADMIN : nb colonnes grand écran = Pages → Boutique (--shop-cols, défaut 4) */
.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--shop-cols), minmax(0, 1fr)); /* ÉDITABLE ADMIN : --shop-cols */
  gap: 1.75rem 1.5rem;         /* écart vertical | horizontal entre cartes */
}

/* Une carte produit (= un <li>)
   container-type : la bulle panier se calcule en % de cette largeur (cqw). */
.product-card {
  position: relative;          /* pour positionner le cœur en absolu */
  isolation: isolate;          /* overflow d’une carte ne vole pas les clics de la voisine */
  container-type: inline-size; /* ÉDITABLE ADMIN : taille panier = % de cette carte */
  display: flex;
  flex-direction: column;      /* image → nom → prix/panier, de haut en bas */
  gap: 0.75rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.85rem 1rem; /* ← espace intérieur de la carte */
  box-shadow: var(--shadow-soft);
  transform: rotate(var(--tilt, 0deg)); /* légère inclinaison (voir ci-dessous) */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Alterne une petite rotation gauche / droite toutes les 3 cartes */
.product-card:nth-child(3n + 1) {
  --tilt: -0.8deg;
}

.product-card:nth-child(3n + 2) {
  --tilt: 0.6deg;
}

.product-card:hover {
  transform: rotate(0deg) translateY(-4px); /* se redresse et monte un peu */
  box-shadow: var(--shadow-hover);
}

/* Bouton cœur (favoris) - flotte en haut à droite de la carte */
.favorite-btn {
  position: absolute;
  top: 1.1rem;                 /* ← position du cœur */
  right: 1.1rem;
  z-index: 2;                  /* au-dessus de l’image */
  display: grid;
  place-items: center;
  width: 2.2rem;               /* ← taille du bouton cœur */
  height: 2.2rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.favorite-btn:hover {
  transform: scale(1.08);
}

.favorite-btn__icon {
  font-size: 1.15rem;
  line-height: 1;
}

/* Favori actif (cœur plein) - classe ajoutée par favorites.js */
.favorite-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Lien qui enveloppe image + nom */
.product-card__link {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;              /* garde la couleur du titre, pas le orange des liens */
}

/* Cadre carré de l’image produit */
.product-card__media {
  aspect-ratio: 1 / 1;         /* carré parfait */
  overflow: hidden;            /* coupe le zoom au survol */
  background: #efeae3;         /* fond si l’image charge lentement */
  border-radius: calc(var(--radius-lg) - 6px);
}

.product-card__img,
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* remplit le carré */
  transition: transform 0.35s ease;
}

/* Léger zoom de l’image au survol de la carte */
.product-card:hover .product-card__img,
.product-card:hover .product-card__media img {
  transform: scale(1.05);
}

.product-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;          /* ← taille du nom produit */
  line-height: 1.25;
  text-align: center;
  color: var(--title);
}

/* Rangée du bas : pastille prix + bouton panier + mini-photo
   Centre de la pastille (prix + sous-texte) = centre de l’icône panier. */
.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.1rem;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.product-card__meta .price-label {
  margin-top: 0.2rem; /* baisse un chouia vs le panier */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

/* =============================================================================
   @@price — pastille sur la carte + bandeau d’offre
   Montants = CODE (tarifs thème). Textes / couleurs / affichage =
   ÉDITABLE ADMIN : Pages → Boutique → Fiche produit → Prix.
   ============================================================================= */

/* Pastille prix — fond clair, bordure fine, texte lisible (sans rouge/orange) */
.price-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  text-align: center;
  background: var(--price-label-bg-1, #ffffff);
  /* ÉDITABLE ADMIN : Boutique → Prix → Couleur contour */
  border: 1px solid var(--price-label-border-1, var(--line));
  border-radius: 10px;
  padding: 0.34rem 0.82rem 0.38rem;
  line-height: 1.2;
  min-width: 4.25rem;
  box-shadow: 0 1px 4px rgba(58, 52, 44, 0.05);
}

.price-label__main {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--price-label-color-1, var(--ink));
}

/* Woo wrappe souvent le prix dans .amount / .woocommerce-Price-amount */
.price-label__main .amount,
.price-label__main .woocommerce-Price-amount {
  font-weight: 700;
}

.price-label__hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Après ≥1 article payant au panier → variante sauge très légère */
.price-label--next {
  background: var(--price-label-bg-2, #f6f9f7);
  /* ÉDITABLE ADMIN : Boutique → Prix 2 → Couleur contour */
  border-color: var(--price-label-border-2, rgba(127, 169, 143, 0.28));
}

.price-label--next .price-label__main {
  color: var(--price-label-color-2, var(--ink));
}

.price-label--next .price-label__hint {
  color: var(--accent-secondary-dark);
}

/* ÉDITABLE ADMIN : produit à 0 € → pastille « Gratuit » */
.price-label--free {
  background: #f6f9f7;
  border-color: rgba(127, 169, 143, 0.28);
}

.price-label--free .price-label__main {
  color: var(--accent-secondary-dark);
  font-size: 0.92rem;
}

.price-label--added {
  opacity: 0.85;               /* un peu atténué si déjà au panier */
}

/* Bandeau offre boutique — textes ÉDITABLE ADMIN : Boutique → Bannière
   Léger, sans « carte » : juste le titre + la phrase, intégrés au hero. */
.pricing-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.85rem auto 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  max-width: 32rem;
  text-align: center;
}

.pricing-banner__pill {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

.pricing-banner__text {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.4;
}

/* Séparateur offre : entre · (petit) et • plein (plus gros) */
.pricing-banner__text .pricing-sep {
  display: inline-block;
  font-size: 0.82em;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
  vertical-align: 0.06em;
  margin: 0 0.12em;
}

/* Variante sur la page panier */
.pricing-banner--cart {
  max-width: min(32rem, 100%);
  margin: 0 auto 1.25rem;
  padding: 0.35rem 0 0.55rem;
  border-bottom: 1px solid var(--line);
}

.shop-hero__inner .pricing-banner {
  margin-top: 0.75rem;
}

/* Mini-réassurances panier (au-dessus de Commander) — légères */
.cart-trust {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.85rem;
}

.cart-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.cart-trust__icon {
  font-size: 1rem;
  line-height: 1;
}

.cart-trust__text {
  color: var(--ink);
  font-weight: 600;
}

.single-mini__summary .price,
.single-mini__summary .price-label {
  margin: 0;
}

/* -------------------------------------------------------------------------
   Bouton panier (icône ronde) — cartes boutique + fiche
   États JS : .loading · .added
   ÉDITABLE ADMIN : Pages → Boutique → Boutique — Réglages → Panier
     (taille, fond, couleur contour, ombre on/off)
   ÉDITABLE ADMIN : image = Pages → Boutique → Panier
   ------------------------------------------------------------------------- */
.add-to-cart-btn {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  /* % carte via cqw. --cart-btn-pct vient de :root (admin) ; fallback Moyen = 10. */
  width: calc(var(--cart-btn-pct, 10) * 1cqw);
  height: calc(var(--cart-btn-pct, 10) * 1cqw);
  min-width: calc(var(--cart-btn-pct, 10) * 1cqw);
  min-height: calc(var(--cart-btn-pct, 10) * 1cqw);
  padding: 0;
  border: 2px solid var(--cart-border, #fff); /* ÉDITABLE ADMIN : couleur contour */
  border-radius: 999px;
  background: var(--accent);   /* ÉDITABLE ADMIN : Personnaliser → Accent (ou Boutique → Panier) */
  /* ÉDITABLE ADMIN : ombre on/off → Boutique → Panier (--cart-shadow) */
  box-shadow: var(--cart-shadow);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.add-to-cart-btn:hover {
  background: var(--accent-dark); /* ÉDITABLE ADMIN : Accent survol */
  color: #fff;
  transform: scale(1.14);
}

.add-to-cart-btn__icon {
  /* ~80 % de la bulle ; fichier image = Pages → Boutique → Panier */
  display: block;
  width: 80%;
  height: 80%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.add-to-cart-btn.loading {
  pointer-events: none;        /* empêche un 2ᵉ clic pendant l’AJAX */
}

/* Produit déjà au panier : même fond de bulle + petite coche noire (haut droite) */
.add-to-cart-btn.added {
  /* pas de recoloration du fond — même style qu’avant l’ajout */
  cursor: pointer;
  overflow: visible;           /* pastille peut dépasser un peu */
}

.add-to-cart-btn.added .add-to-cart-btn__icon {
  display: block;              /* garde l’icône panier */
}

.add-to-cart-btn.added::after {
  content: "";
  position: absolute;
  top: 4%;
  right: 0;
  z-index: 2;
  width: 42%;
  height: 42%;
  min-width: 0.72rem;
  min-height: 0.72rem;
  border-radius: 999px;
  /* ÉDITABLE ADMIN : Boutique → Tick ajouté au panier (couleur tick / case contour) */
  border: 1.5px solid var(--cart-tick-border, #fff);
  box-sizing: border-box;
  /* ÉDITABLE ADMIN : Boutique → Tick ajouté au panier → Couleur fond tick */
  background-color: var(--cart-tick-bg, #2a241c);
  /* SVG du V injecté aussi en PHP (couleur tick admin) ; fallback blanc */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l5 5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
  box-shadow: 0 1px 3px rgba(58, 52, 44, 0.22);
}

/* Cache le lien Woo “Voir le panier” s’il apparaît encore sur une carte */
.product-card .added_to_cart {
  display: none;
}

/* Mini-photo qui “saute” dans le panier - hors flux (n’élargit pas la rangée,
   sinon elle déborde sur la carte voisine et bloque son bouton panier).
   ÉDITABLE ADMIN : image = ACF produit « icone_panier » (sinon image produit Woo) */
.product-card__mini-thumb {
  display: block;
  position: absolute;
  left: calc(100% + 0.2rem);
  top: 50%;
  width: 2.5rem;               /* ← taille boutique */
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
  border: 2px solid #fff;
  pointer-events: none;
  z-index: 1;
}

/* Déjà au panier : mini-photo “avalée” (invisible) jusqu’au retrait */
.product-card__mini-thumb.is-in-cart {
  opacity: 0;
  transform: translate(-30px, 3px) scale(0.1);
  pointer-events: none;
}

.product-card__mini-thumb.is-hopping,
.product-card__mini-thumb.is-unhopping {
  pointer-events: none;
}

.product-card__mini-thumb.is-hopping {
  animation: minikos-hop-to-cart 0.28s ease-in forwards; /* vers le panier */
}

.product-card__mini-thumb.is-unhopping {
  animation: minikos-hop-from-cart 0.28s ease-out forwards; /* ressortie */
}

/* Keyframes = étapes de l’animation (0% début → 100% fin) */
@keyframes minikos-hop-to-cart {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  45% { transform: translate(-14px, -12px) scale(0.85); opacity: 1; }
  100% { transform: translate(-28px, 2px) scale(0.1); opacity: 0; }
}

@keyframes minikos-hop-from-cart {
  0% { transform: translate(-28px, 2px) scale(0.1); opacity: 0; }
  55% { transform: translate(-14px, -12px) scale(0.85); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* =============================================================================
   @@shop — titre + recherche + bulles de catégories + grille
   ÉDITABLE ADMIN : produits + catégories WooCommerce (filtres = ces catégories).
   ÉDITABLE ADMIN : nb colonnes → Pages → Boutique → Boutique — Grille produits.
   UI recherche / bulles = CODE.
   ============================================================================= */

/* Bandeau sous le header (titre “Boutique”) — même vague SVG que l’accueil.
   Padding / dimensions du contenu = inchangés (.shop-hero__inner).
   ÉDITABLE ADMIN : fond bannière → Personnaliser → Couleurs de fonds → Boutique ;
   textes offre → Pages → Boutique → Bannière. */
.shop-hero {
  position: relative;
  overflow: hidden;
  background: #ffffff; /* défaut ; remplacé via Personnaliser */
}

.shop-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.35rem; /* bas un peu plus serré → filtres plus hauts */
  text-align: center;
}

.shop-hero__intro {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Même style de titre pour Boutique et Favoris */
.shop-hero__title,
.favorites-page__title {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  color: var(--title);
  font-size: clamp(1.8rem, 4vw, 2.4rem); /* ← taille titre page */
}

/* Zone sous le hero : filtres + résultats (espace sous bannière / délimitation) */
.shop {
  padding: 3.4rem 1.25rem 4rem;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

/* Colonne unique : filtres en haut, grille en dessous */
.shop__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.shop-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.shop-filters__search {
  width: min(100%, 22rem);     /* ← largeur max du champ recherche */
}

.shop-filters__search-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font: inherit;               /* même police que le reste du site */
  color: var(--ink);
  background: var(--surface);
}

/* Anneau orange quand le champ a le focus (clic / Tab) */
.shop-filters__search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Rangée de bulles (fieldset sans bordure native) */
.shop-filters__categories {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

/* Une bulle = un <label> qui contient une checkbox cachée */
.shop-filters__bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.55rem 1.15rem;    /* ← taille des bulles */
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  user-select: none;           /* empêche de sélectionner le texte en cliquant */
}

/* Checkbox invisible : on clique sur le label, pas sur la case */
.shop-filters__bubble input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.shop-filters__bubble:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* :has(input:checked) = “si la case à l’intérieur est cochée…” */
.shop-filters__bubble:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.shop-filters__bubble:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shop-results__empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
}

/* =============================================================================
   @@favorites - page dédiée (cœurs localStorage)
   Liste des produits = Woo ADMIN ; sélection favoris = navigateur (pas WP admin).
   Les cartes sont dans le HTML mais cachées ; JS ajoute .is-favorite-visible
   ============================================================================= */
.favorites-page {
  padding: 0 0 4rem;
}

.favorites-page__header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  text-align: center;
}

.favorites-page__intro {
  margin: 0 auto 0.35rem;
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.favorites-page__intro p {
  margin: 0.35rem 0;
}

.favorites-page__body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.favorites-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 26rem;
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.favorites-empty[hidden] {
  display: none !important;
}

.favorites-empty__text {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

/* Par défaut : toutes les cartes cachées sur la page favoris */
.product-grid[data-favorites-grid] .product-card {
  display: none;
}

/* JS révèle seulement celles dont l’id est en favori */
.product-grid[data-favorites-grid] .product-card.is-favorite-visible {
  display: flex;
}

/* Grille plus dense que la boutique (cartes plus petites) */
.product-grid--favorites {
  /* auto-fill = autant de colonnes que possible, chaque carte ≥ 10.5rem */
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1rem 0.85rem;
  justify-content: center;
}

.product-grid--favorites .product-card {
  padding: 0.55rem 0.55rem 0.75rem;
  gap: 0.5rem;
}

.product-grid--favorites .product-card__name {
  font-size: 0.92rem;
}

.product-grid--favorites .product-card__mini-thumb {
  width: 1.35rem;              /* mini-photo plus petite sur favoris */
  height: 1.35rem;
}

/* =============================================================================
   @@woo - panier, checkout, notices, fiche, mon compte
   Contenu produits / panier / compte = WooCommerce ADMIN.
   Styles ci-dessous = CODE. Couleurs via vars → ÉDITABLE ADMIN Personnaliser.
   ============================================================================= */
.content-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Fiche produit : un peu plus d’espace horizontal (colonnes toujours 50 / 50) */
.content-wrap--product {
  max-width: min(1240px, 96vw);
}

/* Pages classiques (Contact, etc.) — contenu = éditeur WP de la page */
.content-page {
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
}

.content-page__title {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  color: var(--title);
  letter-spacing: -0.02em;
}

.content-page--contact .content-page__title,
.content-page--gift .content-page__title {
  margin-bottom: 0.75rem;
}

.content-page--contact,
.content-page--gift {
  max-width: 28rem;
  margin-inline: auto;
  text-align: center;
}

.content-page--contact .content-page__body {
  /* 1,5× la largeur du bloc → dépasse d’1/4 de chaque côté */
  width: 150%;
  max-width: 150%;
  margin-inline: -25%;
}

.content-page--gift .content-page__body {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

@media (max-width: 720px) {
  .content-page--contact .content-page__body {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}

.content-page--contact .content-page__instagram {
  justify-content: center;
}

.content-page--contact .contact-form {
  margin-top: 1.05rem;
  gap: 0.75rem;
}

/* Rétractation : même largeur de colonne que Mentions / CGV / pages classiques */
.content-page--withdrawal {
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
}

.content-page--withdrawal .content-page__body {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

.content-page--withdrawal .contact-form {
  margin-top: 1.05rem;
  gap: 0.75rem;
  width: 100%;
}

.content-page--withdrawal .contact-form__field {
  text-align: left;
}

.content-page--contact .contact-form__field textarea {
  min-height: 6rem;
}

.content-page--contact .contact-form__alt-email {
  margin-top: 0.45rem;
}

.content-page--contact .contact-form,
.content-page--gift .contact-form {
  margin-inline: auto;
  width: 100%;
}

.content-page--contact .contact-form__field,
.content-page--gift .contact-form__field {
  text-align: left;
}

.content-page--contact .contact-form__actions,
.content-page--gift .contact-form__actions {
  text-align: center;
}

.content-page--contact .contact-form__notice,
.content-page--gift .contact-form__notice {
  margin-inline: auto;
}

/* Formulaire carte cadeau (pastilles montant, style Contact) */
.gift-card-form__preview {
  display: flex;
  justify-content: center;
  margin: 0 0 1.25rem;
}

.gift-card-form__preview-img {
  display: block;
  width: min(100%, 17.5rem);
  height: auto;
  aspect-ratio: 85 / 54;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--ink) 10%, transparent);
}

.gift-card-form__amounts {
  margin: 0 0 0.25rem;
  padding: 0;
  border: 0;
  text-align: center;
}

.gift-card-form__amount-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gift-card-form__amount {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 4.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  color: var(--title);
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gift-card-form__amount:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-dark);
}

.gift-card-form__amount input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.content-page__body {
  color: var(--ink);
  line-height: 1.65;
  font-size: 1.05rem;
}

.content-page__body > *:first-child {
  margin-top: 0;
}

.content-page__body h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.content-page__body h3 {
  margin: 1.35rem 0 0.5rem;
  font-size: 1.08rem;
  line-height: 1.35;
}

.content-page__body ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

.content-page__body li {
  margin: 0.25rem 0;
}

.content-page__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 1rem 0 1.5rem;
}

.content-page__body th,
.content-page__body td {
  border: 1px solid #d8d4cc;
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.content-page__body th {
  background: #f6f3ee;
  font-weight: 700;
}

.content-page__body .legal-updated {
  color: #6b6560;
  font-size: 0.95rem;
}

.content-page__body a {
  color: var(--accent);
}

.content-page__body a:hover {
  color: var(--accent-dark);
}

.content-page__instagram {
  margin: 0.35rem 0 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
  font-weight: 600;
}

.content-page__instagram:hover {
  color: var(--accent);
}

.content-page__instagram-icon {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  color: currentColor;
}

.content-page__instagram-icon svg,
.content-page__instagram-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.content-page__instagram-handle {
  line-height: 1.2;
}

/* Formulaire Contact */
.contact-form {
  margin-top: 1.75rem;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-form__field label {
  font-weight: 700;
  color: var(--title);
  font-size: 0.95rem;
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-form__actions {
  margin: 0.25rem 0 0;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.contact-form__submit:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.contact-form__alt-email {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}

.contact-form__alt-email a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.contact-form__alt-email a:hover {
  color: var(--accent-dark);
}

.contact-form__notice {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  max-width: 28rem;
}

.contact-form__notice--ok {
  background: color-mix(in srgb, var(--accent-secondary) 18%, transparent);
  color: var(--title);
}

.contact-form__notice--err {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--title);
}

.woocommerce-cart .content-wrap,
.woocommerce-checkout .content-wrap,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

/* Panier : centrer le bloc (sans changer la largeur) */
.woocommerce-cart .content-page__title {
  text-align: center;
}

.woocommerce-cart .content-page__body {
  margin-inline: auto;
}

.woocommerce-cart-form,
.woocommerce-checkout .col2-set {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}

/* Champs ville/CP remplis par l’autocomplete (invisibles si adresse simplifiée) */
.woocommerce-checkout .form-row.minikos-address-meta,
.woocommerce-checkout .form-row-hidden.minikos-address-meta {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.woocommerce-address-suggestions {
  z-index: 20;
}

.minikos-address-branding {
  font-size: 0.75rem;
  color: #888;
}

/* Séparateur pays prioritaires / reste de la liste — trait fin horizontal */
select.country_select option.minikos-country-sep {
  color: #6a6a6a;
  font-size: 0.55em;
  letter-spacing: -0.02em;
  background: transparent;
}

.select2-results__option.minikos-country-sep,
.select2-results__option[data-minikos-country-sep="1"],
.select2-results__option--disabled.minikos-country-sep {
  display: block !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 0.5rem 0.85rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  background-color: #5a5a5a !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.select2-results__option.minikos-country-sep[aria-selected],
.select2-results__option.minikos-country-sep:hover,
.select2-results__option.minikos-country-sep:focus {
  background-color: #5a5a5a !important;
}

/* Plus de 2ᵉ cadre « totaux » */
.woocommerce-cart .cart-collaterals {
  display: none !important;
}

.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: var(--line);
  padding: 0.85rem 0.5rem;
  vertical-align: middle;
}

.woocommerce-cart table.cart img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
}

/* Quantité / sous-total ligne / actions Woo : inutiles ici */
.woocommerce-cart table.cart .product-quantity,
.woocommerce-cart table.cart .product-subtotal,
.woocommerce-cart table.cart .cart-actions-hidden {
  display: none;
}

/* Prix + croix supprimer sur une même ligne (aligné à gauche comme Produit) */
.woocommerce-cart table.cart tr.cart_item td.product-price,
.woocommerce-cart table.cart th.product-price {
  width: 1%;
  white-space: nowrap;
  padding-right: 0.5rem;
  text-align: left;
  vertical-align: middle;
}

.woocommerce-cart table.cart .cart-item-price-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  max-width: 100%;
}

.woocommerce-cart table.cart .cart-item-price-cell__amount {
  line-height: 1.2;
}

.woocommerce-cart table.cart .cart-item-price-cell .remove {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}

.woocommerce-cart table.cart .cart-item-price-cell .remove:hover {
  color: var(--accent-dark);
}

.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove {
  width: 0;
  padding: 0 !important;
  border: none !important;
  overflow: hidden;
}

.woocommerce-cart table.cart tr.cart-subtotal td,
.woocommerce-cart table.cart tr.cart-discount td,
.woocommerce-cart table.cart tr.fee td {
  border-top: 1px solid var(--line);
  padding: 1rem 0.5rem;
}

.woocommerce-cart table.cart .cart-totals__label {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  color: var(--title);
}

.woocommerce-cart table.cart {
  --cart-price-remove-gap: calc(0.5rem + 1.15rem + 0.4rem);
}

.woocommerce-cart table.cart .cart-totals__amount {
  text-align: right;
  padding-right: var(--cart-price-remove-gap);
  font-family: var(--display);
  font-weight: 700;
  color: var(--title);
}

.woocommerce-cart table.cart tr.cart-subtotal .cart-totals__label,
.woocommerce-cart table.cart tr.cart-subtotal .cart-totals__amount {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.95rem;
}

.woocommerce-cart table.cart tr.cart-discount .cart-totals__label,
.woocommerce-cart table.cart tr.cart-discount .cart-totals__amount {
  color: var(--accent-secondary-dark, var(--accent));
  font-weight: 600;
}

.woocommerce-cart table.cart tr.order-total td.cart-totals__order-cell {
  padding: 1rem var(--cart-price-remove-gap) 1rem 0.5rem;
  border-top: 2px solid var(--line);
  text-align: right;
}

.woocommerce-cart table.cart .cart-total-line--order {
  display: inline;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--title);
  white-space: nowrap;
}

.woocommerce-cart table.cart .cart-total-line--order .amount,
.woocommerce-cart table.cart .cart-total-line--order .woocommerce-Price-amount {
  font-weight: inherit;
}

.woocommerce-cart table.cart .cart-total-line__amount .amount,
.woocommerce-cart table.cart .cart-total-line__amount .woocommerce-Price-amount {
  font-weight: inherit;
}

.woocommerce-cart table.cart tr.cart-promo-row td,
.woocommerce-cart table.cart tr.cart-checkout-row td {
  border: none;
  padding: 0.55rem 0.5rem 0.15rem;
  text-align: center;
}

/* Code promo + carte cadeau (panier & facturation) */
.woocommerce-checkout #payment .form-row.place-order {
  width: 100%;
  float: none;
  max-width: none;
}

.minikos-promo-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.minikos-promo {
  width: 100%;
  box-sizing: border-box;
}

.minikos-promo__toggle .woocommerce-info {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.minikos-promo[data-applied="1"] .minikos-promo__toggle .woocommerce-info {
  cursor: default;
}

.minikos-promo__panel[hidden] {
  display: none !important;
}

.minikos-promo__panel {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minikos-promo__applied {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  max-width: 22rem;
}

.minikos-promo__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.minikos-promo__chip-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--title);
  line-height: 1.35;
}

.minikos-promo__chip-meta {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.85em;
}

.minikos-promo__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.minikos-promo__remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.minikos-promo__fields {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}

.minikos-promo__fields label {
  display: block;
  margin: 0 0 0.2rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--title);
}

.minikos-promo__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.minikos-promo__row .input-text,
.minikos-promo__row input[type="text"],
.woocommerce .minikos-promo__row .input-text,
.woocommerce .minikos-promo__row input[type="text"],
.woocommerce-checkout .minikos-promo__row .input-text,
.woocommerce-checkout .minikos-promo__row input[type="text"],
.woocommerce-page .minikos-promo__row .input-text,
.woocommerce-page .minikos-promo__row input[type="text"] {
  flex: 1 1 auto;
  width: auto !important;
  max-width: 14rem !important;
  min-width: 0;
  margin: 0 !important;
  min-height: 2.1rem !important;
  height: 2.1rem !important;
  padding: 0.35rem 0.55rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 0.85rem !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.minikos-promo__row .input-text::placeholder,
.minikos-promo__row input[type="text"]::placeholder,
.woocommerce-checkout .minikos-promo__row .input-text::placeholder,
.woocommerce-checkout .minikos-promo__row input[type="text"]::placeholder {
  color: #9a948c;
  opacity: 1;
}

.minikos-promo__row .button,
.minikos-promo__row button {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 2.1rem !important;
  height: 2.1rem;
  margin: 0 !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
}

.minikos-promo__row .button:hover,
.minikos-promo__row button:hover {
  border-color: var(--accent-dark, var(--accent)) !important;
  background: #fff !important;
  color: var(--accent-dark, var(--accent)) !important;
  transform: none !important;
}

.minikos-promo__error {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #c45c4a;
  min-height: 0;
}

.minikos-promo__error:empty {
  display: none;
}

.woocommerce-checkout .minikos-promo-stack {
  margin: 0 0 1rem;
}

.woocommerce-cart table.cart tr.cart-trust-row td {
  border: none;
  padding: 1.1rem 0.5rem 0.15rem;
  text-align: center;
}

/* Carte cadeau (PW) — label collé au champ, Appliquer à droite */
.cart-gift-card-redeem {
  max-width: none;
  margin: 0;
  text-align: left;
}

.cart-gift-card-redeem #pwgc-redeem-gift-card-form {
  margin: 0;
}

.cart-gift-card-redeem #pwgc-redeem-gift-card-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  margin: 0 !important;
}

.cart-gift-card-redeem label[for="pwgc-redeem-gift-card-number"] {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--title);
}

.cart-gift-card-redeem__row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.cart-gift-card-redeem #pwgc-redeem-error {
  margin: 0;
  font-size: 0.8rem;
  min-height: 0;
}

.cart-gift-card-redeem #pwgc-redeem-error:empty {
  display: none;
}

.cart-gift-card-redeem #pwgc-redeem-gift-card-number {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  margin: 0;
  min-height: 2.5rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  box-sizing: border-box;
}

.cart-gift-card-redeem #pwgc-redeem-button {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  min-height: 2.5rem;
  margin: 0 !important;
  padding: 0.6rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
}

.cart-gift-card-redeem #pwgc-redeem-button:hover {
  transform: none !important;
}

.woocommerce-cart table.cart .cart-trust {
  justify-content: center;
  margin: 0.35rem 0 0;
}

.woocommerce-cart table.cart .cart-trust__item {
  font-size: 0.95rem;
}

.woocommerce-cart table.cart .cart-trust__icon {
  font-size: 1.05rem;
}

.woocommerce-cart table.cart .wc-proceed-to-checkout {
  margin: 0.25rem 0 0;
  display: flex;
  justify-content: center;
}

.woocommerce-cart table.cart .wc-proceed-to-checkout .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
}

.cart_totals h2,
.woocommerce-billing-fields h3 {
  font-family: var(--display);
  color: var(--title);
}

/* Checkout : le « Sous-total » au-dessus du Total est redondant (souvent le même montant). */
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
  display: none;
}

.woocommerce-notices-wrapper {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 1rem 0;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  background: var(--surface);
  /* Reset Woo (bordure haute bleue / icône) + accent thème à gauche */
  border: none !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  line-height: 1.45;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
  content: none !important;
}

.woocommerce-info a.showcoupon,
.woocommerce-info a {
  color: var(--accent);
  font-weight: 600;
}

.woocommerce-error {
  border-left-color: #c45c4a !important;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error a.wc-forward,
.woocommerce-message a.wc-forward {
  display: none !important;
}

/* Cases légales checkout (CGV, rétractation, newsletter, RGPD) */
.checkout-legal {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.checkout-legal__privacy-block {
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.checkout-legal__privacy-title {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--title);
}

.checkout-legal__privacy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

.checkout-legal__privacy a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.checkout-legal__row {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  width: 100% !important;
}

.checkout-legal__row:last-child {
  margin-bottom: 0 !important;
}

.checkout-legal__row label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

.checkout-legal__row input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

.checkout-legal__label {
  flex: 1 1 auto;
}

.checkout-legal__label a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.checkout-legal__optional {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.92em;
}

.checkout-legal .required {
  color: var(--accent);
  text-decoration: none;
  border: 0;
}

.woocommerce-checkout #place_order {
  font-weight: 700;
}

/* Fiche produit single-mini */
.single-mini__back {
  margin: 0 0 1.25rem;
}

.single-mini__back a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

/* Même échelle que la puce flèche (1.2em / 24), viewBox 38 → tige deux fois plus longue. */
.single-mini__back .minikos-back__arrow {
  flex: 0 0 auto;
  width: 1.9em;
  height: 0.85em;
  position: relative;
  top: 0.11em;
}

.single-mini__back a .minikos-hl--bryndan {
  color: inherit;
  font-weight: 400;
}

.single-mini__back a:hover {
  color: var(--accent);
}

.single-mini__grid {
  display: grid;
  gap: 1rem 0.65rem;
}

@media (min-width: 860px) {
  .single-mini__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.65rem;
    align-items: center;
  }
}

.single-mini__gallery {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.single-mini__gallery .woocommerce-product-gallery {
  opacity: 1 !important;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

.single-mini__gallery .woocommerce-product-gallery__image,
.single-mini__gallery .woocommerce-product-gallery__wrapper {
  width: 100%;
}

.single-mini__gallery img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--radius);
  background: #efeae3;
}

.single-mini__cart .add-to-cart-btn {
  border: none !important;
}

.single-mini__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 0.55rem;
  align-self: center;
}

.single-mini__summary .product_title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  margin: 0;
  width: 100%;
}

.single-mini__buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

.single-mini__buy-row .price,
.single-mini__buy-row .price-label,
.single-mini__summary .price,
.single-mini__summary .price-label {
  margin: 0;
}

/* Le padding de la pastille décale le montant par rapport au titre. */
.single-mini__buy-row > .price {
  margin-left: -0.82rem;
}

.single-mini__buy-row .cart-toggle {
  flex-shrink: 0;
}

.single-mini__summary .woocommerce-product-details__short-description {
  margin: 1rem 0 0;
  width: 100%;
  max-width: none;
  color: var(--muted);
  font-size: 1.07rem;
  line-height: 1.55;
}

/* Desktop : bloc description 1,5× plus large (titre / prix inchangés) */
@media (min-width: 860px) {
  .single-mini__grid,
  .single-mini__summary {
    overflow: visible;
  }
  .single-mini__summary .woocommerce-product-details__short-description {
    width: 150%;
    max-width: none;
    margin-left: 0;
    flex-shrink: 0;
  }
}

.single-mini__summary .woocommerce-product-details__short-description p {
  margin: 0 0 0.35rem;
}

.single-mini__summary .woocommerce-product-details__short-description ul {
  margin: 0.15rem 0 0;
  padding: 0 0 0 1rem;
  list-style-type: disc;
  list-style-position: outside;
}

.single-mini__summary .woocommerce-product-details__short-description li {
  margin: 0 0 0.3rem;
  padding-left: 0.15rem;
}

.single-mini__summary .woocommerce-product-details__short-description li:last-child,
.single-mini__summary .woocommerce-product-details__short-description p:last-child {
  margin-bottom: 0;
}

.single-mini__summary .woocommerce-product-details__short-description p:first-child {
  margin-top: 0;
}

/* ÉDITABLE ADMIN : Produits → « Sous-titre » — même typo que Accueil .story__kicker */
.single-mini__tagline {
  margin: 0;
  width: 100%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--muted);
}

.single-mini__cart {
  margin: 0;
}

.single-mini__cart .product-card__mini-thumb {
  width: 2.75rem;
  height: 2.75rem;
}

.cart-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Code promo / carte cadeau : bouton contour (écrase le style Woo plein) */
.woocommerce .minikos-promo__row button.button,
.woocommerce .minikos-promo__row .button,
.woocommerce-page .minikos-promo__row button.button,
.woocommerce-page .minikos-promo__row .button {
  background: #fff !important;
  color: var(--accent) !important;
  border: 1.5px solid var(--accent) !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.75rem !important;
  min-height: 2.1rem !important;
  height: 2.1rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}

.woocommerce .minikos-promo__row button.button:hover,
.woocommerce .minikos-promo__row .button:hover,
.woocommerce-page .minikos-promo__row button.button:hover,
.woocommerce-page .minikos-promo__row .button:hover {
  background: #fff !important;
  color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  box-shadow: none !important;
  transform: none !important;
}

.quantity .qty {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  width: 4.25rem;
  font: inherit;
}

.single-mini__below {
  margin-top: 1.5rem;
  padding-top: 0.6rem;
}

.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--line);
}

.woocommerce-tabs ul.tabs a {
  display: inline-block;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Titre « Avis » déjà dans l’onglet au-dessus */
#reviews .woocommerce-Reviews-title,
.woocommerce-Tabs-panel--reviews > h2:first-child {
  display: none;
}

/* Mon compte - onglets horizontaux */
.woocommerce-account .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.woocommerce-MyAccount-navigation {
  margin: 0;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--accent);
  color: #fff;
}

.woocommerce-MyAccount-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.35rem;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
  font-family: var(--display);
  margin-top: 0;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font: inherit;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}

/* =============================================================================
   @@footer
   ÉDITABLE ADMIN : fond → Personnaliser → Couleurs de fonds → Pied de page
   Texte / image → Pages → Accueil → « Pied de page ».
   ============================================================================= */
.site-footer {
  flex-shrink: 0;
  margin-top: auto;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.25rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-footer__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.site-footer__brand {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--footer-text);
}

.site-footer__brand .minikos-hl--bryndan,
.site-footer__copy .minikos-hl--bryndan {
  color: inherit;
  font-weight: 400;
}

.site-footer__copy {
  margin: 0.4rem 0 0;
  color: var(--footer-text);
  opacity: 0.75;
  font-size: 0.9rem;
}

.site-footer__instagram {
  margin: 0.7rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--footer-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 0.9;
}

.site-footer__instagram:hover {
  opacity: 1;
  color: var(--footer-text);
}

.site-footer__instagram .content-page__instagram-icon {
  width: 1.2rem;
  height: 1.2rem;
  color: currentColor;
}

.site-footer__instagram-handle {
  line-height: 1.2;
}

.site-footer__legal {
  margin: 0.65rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.site-footer__legal-link {
  color: var(--footer-text);
  opacity: 0.85;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__legal-link:hover {
  opacity: 1;
  color: var(--footer-text);
}

/* Produit caché (droite) — ÉDITABLE ADMIN Pages → Accueil */
.site-footer__promo {
  flex: 0 0 auto;
  display: block;
  width: min(7.5rem, 28vw);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.site-footer__promo:hover {
  transform: translateY(-2px);
}

.site-footer__promo-swap {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.08);
}

.site-footer__promo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.site-footer__promo-img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.site-footer__promo--has-hover:hover .site-footer__promo-img--default,
.site-footer__promo--has-hover:focus-visible .site-footer__promo-img--default {
  opacity: 0;
}

.site-footer__promo--has-hover:hover .site-footer__promo-img--hover,
.site-footer__promo--has-hover:focus-visible .site-footer__promo-img--hover {
  opacity: 1;
}

/* =============================================================================
   @@responsive — adaptations selon la largeur d’écran
   @media (max-width: Xpx) = “ces règles s’appliquent si l’écran fait Xpx ou moins”
   960px ≈ tablette · 720px ≈ mobile
   ÉDITABLE ADMIN : colonnes boutique tablette/mobile → Pages → Boutique → Grille produits
   ============================================================================= */
@media (max-width: 960px) {
  /* ÉDITABLE ADMIN : Pages → Boutique → Boutique — Grille produits → tablette (--shop-cols-tablet) */
  .product-grid {
    grid-template-columns: repeat(var(--shop-cols-tablet), minmax(0, 1fr));
  }

  .site-footer__inner {
    flex-direction: column;
    text-align: center;
  }

  .site-footer__text {
    text-align: center;
  }

  .product-grid--favorites {
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.35rem;
    padding: 1rem 1.25rem 1.75rem;
  }

  .hero__copy {
    max-width: 34rem;
    margin: 0 auto;
  }

  .hero__lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__visual {
    order: -1;
    min-height: 0;
  }

  .hero__img {
    max-height: min(280px, calc(100dvh - var(--header-h) - 16rem));
    width: min(100%, 420px);
  }

  .story__inner,
  .story--image-left .story__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .story--image-left .story__media {
    order: 0;
  }

  /* Texte d’abord (pas l’image) → marge sous le pointillé = padding section seulement */
  .story__media {
    order: 0;
    margin-inline: auto;
  }

  .story__copy {
    text-align: center;
  }

  .story__title,
  .story__text {
    margin-left: auto;
    margin-right: auto;
  }

  .story__title {
    max-width: 22ch;
  }
}

@media (max-width: 720px) {
  .site-header__inner {
    grid-template-columns: 1fr auto auto;
  }

  .nav-toggle {
    display: inline-grid;
    order: 2;
  }

  .site-header__actions {
    order: 3;
  }

  .site-nav {
    order: 4;
    grid-column: 1 / -1;
    justify-self: stretch;
    display: none;
    padding: 0.25rem 0 0.5rem;
    border-top: 1px solid var(--line);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding-top: 0.85rem;
  }

  .site-nav__list .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    margin-top: 0.4rem;
    box-shadow: none;
  }

  /* ÉDITABLE ADMIN : Pages → Boutique → Boutique — Grille produits → mobile (--shop-cols-mobile) */
  .product-grid {
    grid-template-columns: repeat(var(--shop-cols-mobile), minmax(0, 1fr));
    gap: 1.25rem 0.85rem;
  }

  .product-grid--favorites {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.85rem 0.65rem;
  }

  .product-card {
    transform: none;
  }

  .product-card:hover {
    transform: translateY(-2px);
  }

  .hero__panel {
    padding-top: 1.25rem;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding: 0.75rem 1.25rem 1.35rem;
    gap: 1rem;
    text-align: center;
  }

  .hero__copy {
    max-width: none;
  }

  .hero__lede {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__visual {
    min-height: 0;
    order: -1;
  }

  .hero__img {
    max-height: min(220px, calc(100dvh - var(--header-h) - 15rem));
    width: min(100%, 320px);
    animation: none;
  }

  .hero__cta {
    padding: 0.75rem 1.3rem;
  }

  .trust-badges__item {
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
  }

  .favorite-btn {
    width: 2rem;
    height: 2rem;
    top: 0.85rem;
    right: 0.85rem;
  }
}