/* =============================================================
   FROM ARUSHA — Système de design
   Artisanal chaleureux : crème, rose magenta, vert sapin, blobs.
   ============================================================= */

/* Polices achetées par le client (celles de la maquette) */
@font-face {
  font-family: "Dolcissimo Script";
  src: url("/fonts/Dolcissimo-Script.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dolcissimo";
  src: url("/fonts/Dolcissimo.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --cream:        #F7F0E0;   /* fond de page */
  --cream-deep:   #F3EAD6;   /* fond hero */
  --paper:        #FDFAF2;   /* cartes / sections claires */
  --ink:          #2E2823;   /* texte principal */
  --muted:        #7C7266;   /* texte secondaire */

  --pink:         #E5397F;   /* accent principal */
  --pink-dark:    #C92E6C;
  --pink-soft:    #F9DCE7;   /* bandeaux doux */
  --teal:         #0F7C6C;   /* vert sapin (footer) */
  --teal-deep:    #12776A;   /* cartes UMOJA */
  --yellow:       #F3C23B;   /* boutons secondaires */
  --yellow-dark:  #E0A81E;

  --c-pink:   #E5397F;
  --c-lime:   #7FB539;
  --c-blue:   #2F7DB5;
  --c-yellow: #F3C23B;
  --c-orange: #EE7B33;
  --c-purple: #7E57C2;
  --c-black:  #2E2823;
  --c-white:  #F4EFE6;

  /* ── Surfaces ───────────────────────────────────────────
     --surface   = le « blanc » des cartes, panneaux, champs.
     --surface-* = déclinaisons plus chaudes (badges neutres, blocs). */
  --surface:      #fff;
  --surface-alt:  #F0E9DA;   /* badge neutre, filets épais */
  --surface-2:    #FBF5E9;   /* bloc adresse (admin) */
  --row-hover:    #FCF9F2;   /* ligne de tableau survolée */
  --row-selected: #FDF1F6;   /* ligne de tableau cochée */

  /* ── Filets & bordures, du plus foncé au plus clair ───── */
  --border-strong: #CBBFA8;  /* puces radio, pointillés du checkout */
  --border-dashed: #D9CEB8;  /* zone « ajouter une photo » */
  --line-dash:     #d8cdb6;  /* tirets des frises (timeline / étapes) */
  --switch-off:    #D9CFBE;  /* interrupteur éteint */
  --border-input:  #E7DFCF;  /* contour des champs de formulaire */
  --line:          #EADFC8;  /* filet standard */
  --border-soft:   #EDE4D2;  /* contour des cartes légères */
  --line-2:        #EFE7D6;
  --line-3:        #F1EADB;
  --line-4:        #F5EFE2;  /* filet le plus discret (tableaux) */

  /* ── Textes ─────────────────────────────────────────────
     --on-accent = texte posé sur un aplat coloré (accent, vert, rouge…). */
  --ink-deep:         #1d1a16;  /* survol du bouton « acheter maintenant » */
  --ink-soft:         #4a423a;  /* paragraphes longs (légal, avis) */
  --on-accent:        #fff;
  --on-teal:          #EAF3EF;  /* texte du pied de page */
  --on-teal-soft:     #F4EFE6;  /* texte de la carte UMOJA */
  --accent-ink-muted: #9a5a72;  /* texte courant sur bandeau rose doux */
  --sidebar-link:     #5a5248;  /* liens de la barre latérale admin */
  --soon-ink:         #8a8070;  /* badge « bientôt » */
  --offre-ink:        #4a3a06;  /* pastille « offre » sur fond jaune */
  --star-off:         #d9cfbe;  /* étoile non remplie */

  /* ── Déclinaisons d'accent ──────────────────────────────
     --accent-dark-alt : survol du bouton de suivi (nuance historique,
     volontairement distincte de --pink-dark pour ne rien déplacer). */
  --accent-dark-alt:   #c72e6c;
  --accent-soft-hover: #F6CFDF;  /* survol du mini-bouton rose */
  --accent-light:      #F5A9C7;  /* dégradé du graphique admin */
  --teal-light:        #4FC2A6;  /* dégradé des barres « top produits » */

  /* ── Composantes RVB (pour les rgba() dérivées) ─────────
     Toujours écrites « r, g, b » et consommées via rgba(var(--x), .5). */
  --accent-rgb:    229, 57, 127;
  --teal-rgb:      15, 124, 108;
  --yellow-rgb:    243, 194, 59;
  --cream-rgb:     247, 240, 224;
  --ink-rgb:       46, 40, 35;
  --surface-rgb:   255, 255, 255;
  --on-accent-rgb: 255, 255, 255;
  --err-rgb:       192, 57, 43;
  --shadow-rgb:    60, 45, 20;

  /* ── Voiles (fonds de modale) ───────────────────────────── */
  --scrim:       rgba(46, 40, 35, .55);
  --scrim-admin: rgba(30, 25, 18, .45);

  /* ── États : succès ─────────────────────────────────────── */
  --ok:            #2E8B57;
  --ok-bg:         #E3F4E4;
  --ok-border:     #C5E8C8;
  --ok-bg-soft:    #E3F1EC;   /* « copié ! » */
  --ok-deep:       #12836B;   /* statut « livrée » */
  --ok-bg-alt:     #DFF3EC;
  --ok-border-alt: #C2E7DB;

  /* ── États : erreur ─────────────────────────────────────── */
  --err:            #C0392B;
  --err-strong:     #A93226;
  --err-bg:         #FBE6E3;
  --err-bg-strong:  #F5CFC9;
  --err-border:     #F3CFC9;

  /* ── États : alerte / attente ───────────────────────────── */
  --warn:             #B45309;
  --warn-bg:          #FFF3D6;
  --warn-deep:        #9A6300;
  --warn-bg-soft:     #FBEECB;
  --warn-bg-strong:   #F5E1A8;
  --warn-ink:         #8a6d1a;
  --warn-ink-strong:  #6f5713;
  --warn-ink-alt:     #9A7B1A;
  --warn-bg-notice:   #FFF6D9;
  --warn-border:      #F0E4B4;
  --warn-border-alt:  #E3D6B4;

  /* ── États : information / en préparation ───────────────── */
  --info:         #2F7DB5;
  --info-bg:      #E0EEF9;
  --info-border:  #C6DEF2;
  --info-bg-soft: #E7EEF2;
  --info-ink:     #4a6572;
  --prep:         #6D4FC0;
  --prep-bg:      #EDE7FB;
  --prep-border:  #DBD0F3;

  /* ── Habillage des sections (pilotable par le thème) ─────
     Ces tokens portent les FONDS de section et les textes posés
     dessus. Le thème « sobre » leur donne EXACTEMENT ses aplats
     actuels : il ne bouge pas d'un pixel. Le thème « vif » les
     remplace par des dégradés (bloc en fin de fichier). Aucune
     règle de mise en page n'est dupliquée, seule la valeur change. */
  --page-bg:       none;   /* voile posé SUR --cream (cf. body) */
  --nav-rule:      transparent;
  --hero-bg:       var(--teal);
  --hero-title:    #FFC078;   /* titre du hero — orange clair, lisible sur le vert clair (sobre) */
  --split-bg:      var(--teal);
  --footer-bg:     var(--teal);
  --impact-bg:     var(--pink);
  --steps-bg:      var(--pink);
  --cats-bg:       var(--paper);
  --cats-rule:     transparent;
  --cat-hover-bg:  transparent;
  --shop-bg:       var(--paper);
  --help-bg:       var(--paper);
  --help-card-bg:  var(--pink-soft);
  --umoja-bg:      var(--teal-deep);
  /* Halo chaud très diffus en haut des sections claires (aucun en sobre) */
  --pad-glow:      none;

  /* Textes posés sur un aplat coloré (déclinaisons douces) */
  --txt-on-teal-soft:  rgba(var(--on-accent-rgb), .82);
  --txt-on-teal-dim:   rgba(var(--on-accent-rgb), .75);
  --txt-on-teal-faint: rgba(var(--on-accent-rgb), .6);
  /* ⚠️ Sur le rose #E5397F du thème sobre, le blanc translucide et l'or de
     marque tombent sous les seuils WCAG (2,41:1 pour l'or, 3,14:1 pour le
     blanc à 82 %). On utilise donc des teintes opaques éclaircies, mesurées :
     rose très pâle = 4,5:1 et or pâle = 3,5:1 sur ce fond. */
  --txt-on-pink-soft:  #FBE2EC;
  --icon-on-accent:    #F8DFA8;   /* pictos sur le bloc « avec chaque achat » */

  /* Section « comment ça marche » (le seul bloc entièrement re-teinté) */
  --steps-ink:      var(--on-accent);
  --steps-ink-soft: #FBE2EC;
  --steps-eyebrow:  var(--on-accent);
  --steps-num-bg:   var(--teal);
  --steps-num-ink:  var(--on-accent);
  --steps-dash:     rgba(var(--on-accent-rgb), .35);

  /* Boutons & cartes */
  --btn-pink-bg:     var(--pink);
  --btn-yellow-bg:   var(--yellow);
  --card-ring:       transparent;   /* filet de contour des vignettes */
  --card-ring-hover: transparent;
  --faq-open-shadow: var(--shadow);

  /* Teintes secondaires (réservées au thème vif, cf. fin de fichier) :
     elles ne servent qu'à des accents, jamais à du texte courant. */
  --terra:       #C4632E;
  --lagoon:      #0F7C6C;
  --meta-accent: var(--pink);   /* métadonnée en script (rôle d'artisan…) */
  --filter-icon: var(--teal);   /* picto de l'encart des filtres */
  /* Accents de texte — le thème vif les repasse en orange (fin de fichier) */
  --txt-accent-on-teal: var(--yellow);
  --txt-accent:         var(--pink);
  /* Haut de fiche produit (thème sobre : reste clair, comme avant) */
  --pdp-bg:       transparent;
  --pdp-ink:      var(--ink);
  --pdp-ink-soft: var(--muted);
  --pdp-price:    var(--pink);

  --radius:    18px;
  --radius-lg: 32px;
  --shadow:    0 10px 30px rgba(var(--shadow-rgb), .08);
  --shadow-lg: 0 20px 50px rgba(var(--shadow-rgb), .12);

  --font-display: "Fraunces", Georgia, serif;
  --font-script:  "Dolcissimo Script", "Caveat", cursive;
  --font-body:    "Nunito Sans", system-ui, sans-serif;

  --wrap: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  /* Couleur d'abord, voile ensuite : si le dégradé n'était pas compris,
     le fond resterait la couleur pleine (jamais un fond transparent). */
  background-color: var(--cream);
  background-image: var(--page-bg);
  /* ⚠️ PAS de background-attachment: fixed — mal rendu et coûteux en repaint
     sur iOS Safari, surtout combiné à overflow-x: clip juste en dessous. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* les blobs débordent sans créer de scroll horizontal */
  min-height: 100vh;             /* le body remplit toujours l'écran… */
  display: flex;
  flex-direction: column;        /* …et le footer (.trust margin-top:auto) colle en bas */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; }

/* ── Typographie ────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--ink); }
.script { font-family: var(--font-script); color: var(--pink); font-weight: 600; }

.section-title { font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* Phrase d'introduction sous un titre de section (centrée, largeur de lecture) */
.section-lead { color: var(--muted); max-width: 58ch; margin: .8rem auto 0; }
.eyebrow { font-family: var(--font-script); font-size: 1.5rem; color: var(--txt-accent); }

/* Grands titres : serif Fraunces (comme la maquette d'origine) */
.hero__title { margin-bottom: .5rem; line-height: 1.12; }

/* ── Boutons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.8rem; border-radius: 999px;
  font-weight: 700; font-size: .98rem;
  /* ⚠️ NE JAMAIS mettre `background` en transition : quand le fond est un
     dégradé (thème vif) et l'état survolé une couleur plate, le navigateur
     ne sait pas interpoler et le bouton clignote (il « disparaît » puis
     revient). On anime uniquement transform / box-shadow / filter, et le
     survol assombrit via filter — ce qui marche pour un aplat COMME pour
     un dégradé, sans jamais changer la nature du fond. */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--pink   { background: var(--btn-pink-bg); color: var(--on-accent); box-shadow: 0 8px 20px rgba(var(--accent-rgb), .28); }
.btn--pink:hover { filter: brightness(.92); }
.btn--yellow { background: var(--btn-yellow-bg); color: var(--ink); box-shadow: 0 8px 20px rgba(var(--yellow-rgb), .32); }
.btn--yellow:hover { filter: brightness(.94); }
.btn--ghost  { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.btn--outline{ border: 2px solid var(--pink); color: var(--pink); }
.btn--outline:hover { background: var(--pink); color: var(--on-accent); }

/* ── Navigation ─────────────────────────────────────────── */
/* box-shadow (et non border-bottom) : aucun pixel de hauteur ajouté, donc
   le calage du menu déroulant mobile (top: 84px) reste exact. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--cream); box-shadow: 0 1px 0 var(--nav-rule); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand__icon { width: 48px; height: 34px; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.brand__logo { height: 44px; width: auto; display: block; }
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a { font-weight: 600; font-size: .98rem; color: var(--ink); position: relative; padding: .3rem 0; transition: color .2s; }
.nav__links a:hover { color: var(--pink); }
.nav__links a.is-active { color: var(--pink); }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--pink); border-radius: 2px;
}
.nav__actions { display: flex; align-items: center; gap: .6rem; }
/* Bouton hamburger (mobile uniquement) */
.nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; background: none; border: none; cursor: pointer; border-radius: 10px; }
.nav__toggle span { display: block; height: 2.4px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
/* ── Sélecteur de langue (menu déroulant drapeau + code) ──── */
.flag { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); display: block; }
.lang-dd { position: relative; margin-right: .2rem; }
.lang-dd__btn { display: flex; align-items: center; gap: .4rem; background: none; border: 1px solid var(--border-light, #e6ddc9); border-radius: 999px; padding: .32rem .5rem .32rem .4rem; cursor: pointer; color: var(--ink); font: inherit; }
.lang-dd__btn:hover { background: var(--paper); }
.lang-dd__code { font-weight: 800; font-size: .82rem; letter-spacing: .3px; white-space: nowrap; }
.lang-dd__chev { opacity: .55; transition: transform .2s; }
.lang-dd.is-open .lang-dd__chev { transform: rotate(180deg); }
.lang-dd__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; min-width: 190px;
  background: #fff; border-radius: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  padding: .4rem; margin: 0; list-style: none; z-index: 60; display: none;
}
.lang-dd.is-open .lang-dd__menu { display: block; animation: langDdIn .16s ease; }
@keyframes langDdIn { from { transform: translateY(-7px); } to { transform: none; } }
.lang-dd__menu li { margin: 0; }
.lang-dd__menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 11px; color: var(--ink); text-decoration: none; }
.lang-dd__menu a:hover { background: var(--paper); }
.lang-dd__menu a.is-active { background: rgba(var(--accent-rgb, 200, 30, 95), .08); }
.lang-dd__menu .lang-dd__code { min-width: 22px; }
.lang-dd__name { color: var(--muted); font-weight: 500; font-size: .88rem; margin-left: auto; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); transition: background .2s; }
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 24px; height: 24px; }
.cart-badge { position: absolute; top: 4px; right: 3px; background: var(--pink); color: var(--on-accent); font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }

/* ── Visuel de hero (photo organique + formes liquides) ─── */
.hero-visual { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 32px rgba(var(--shadow-rgb), .12)); }
/* Image de template toute prête (formes déjà intégrées), collée au bord droit */
.hero__topimg { display: block; width: 100%; height: auto; }

/* ── Décor « blobs » colorés (grappes organiques) ───────── */
/* Couche décorative posée dans une section relative. Ne gêne ni les
   clics ni les lecteurs d'écran. Les blobs qui dépassent sont clippés
   par la section (overflow hidden/clip). Purement esthétique. */
.blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.blob  { position: absolute; border-radius: 46% 54% 63% 37% / 45% 42% 58% 55%; opacity: .92; }
.blob:nth-child(2n)   { border-radius: 58% 42% 38% 62% / 52% 58% 42% 48%; }
.blob:nth-child(3n)   { border-radius: 63% 37% 52% 48% / 42% 55% 45% 58%; }
@media (max-width: 720px) { .blob--sm-hide { display: none; } }

/* ── Décor « nuages » (formes découpées, PNG transparents) ── */
/* Section qui accueille un décor : elle clippe ce qui dépasse et
   garde le contenu au-dessus. */
.sec-deco { position: relative; overflow: hidden; }
.sec-deco > :not(.deco):not(.deco-band) { position: relative; z-index: 1; }
.deco {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(140px, 18vw, 240px); height: auto; user-select: none;
}
/* Formes à bas plat / bosses vers le haut. On les pose en bas SANS flip
   horizontal (le flip cassait le dégradé de couleurs). Pour un coin haut,
   on retourne seulement verticalement (scaleY). Choisir la bonne forme :
   coin gauche → forme « tall-left » (1,7) ; coin droite → « tall-right » (3,6,9). */
.deco--bl { bottom: -1px; left: -1px; }
.deco--br { bottom: -1px; right: -1px; }
.deco--tl { top: -1px; left: -1px;  transform: scaleY(-1); }
.deco--tr { top: -1px; right: -1px; transform: scaleY(-1); }
/* Monticules (formes basses et larges) posés au centre d'un bord */
.deco--bc { bottom: -1px; left: 50%; transform: translateX(-50%); }
.deco--tc { top: -1px; left: 50%; transform: translateX(-50%) scaleY(-1); }
.deco--wide { width: clamp(240px, 38vw, 480px); }
.deco--hero { width: clamp(120px, 13vw, 165px); opacity: .96; }

/* Bande « horizon » pleine largeur (un monticule étiré bord à bord).
   Bas plat collé au bord de section (propre, pas de couture). Le bord
   organique fait face au contenu. object-fit:fill = étirement horizontal
   assumé (collines plus larges), aucune découpe droite. */
.deco-band { position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none; display: block; object-fit: fill; }
.deco-band--bottom { bottom: -1px; }
.deco-band--top { top: -1px; transform: scaleY(-1); }
/* Réserve de place pour que le contenu ne passe pas sous la bande */
.has-band-bottom { padding-bottom: 150px !important; }
.has-band-top { padding-top: 130px !important; }
@media (max-width: 720px) {
  .deco-band { height: 68px !important; }
  .has-band-bottom { padding-bottom: 84px !important; }
  .has-band-top { padding-top: 74px !important; }
}
@media (max-width: 720px) { .deco { width: 120px; } .deco--sm-hide { display: none; } }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; background: var(--hero-bg); border-bottom-left-radius: 46px; border-bottom-right-radius: 46px; overflow: hidden; }
.hero .eyebrow, .hero .hero__script { color: var(--txt-accent-on-teal); }
.hero .hero__title { color: var(--hero-title); }
.hero .hero__text { color: var(--txt-on-teal-soft); }
.hero .hero__text strong, .hero .accent { color: var(--txt-accent-on-teal); }
/* Les DEUX colonnes restent DANS le conteneur (la photo ne file plus jusqu'au
   bord de l'écran) : padding gauche/droite symétrique, largeur = --wrap. */
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 3rem; align-items: center;
  min-height: 520px;
  width: min(100%, var(--wrap)); margin: 0 auto;
  padding: 3.5rem 32px 3rem;
}
.hero__media { position: relative; align-self: center; }
/* Photo détourée (forme organique + fond transparent) : nette, sans cadre. */
.hero__cutout {
  position: relative; z-index: 2;
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28));
}
/* Blobs colorés derrière la photo — formes organiques, aplats de marque. */
.hero__blob { position: absolute; z-index: 1; border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%; filter: blur(2px); opacity: .92; }
.hero__blob--1 { width: 190px; height: 190px; background: var(--c-pink);   top: -26px; right: 4%; }
.hero__blob--2 { width: 150px; height: 150px; background: var(--yellow);   bottom: -18px; right: 24%; border-radius: 58% 42% 38% 62% / 52% 58% 42% 48%; }
.hero__blob--3 { width: 120px; height: 120px; background: var(--c-lime);   bottom: 10%; left: -18px; border-radius: 63% 37% 52% 48% / 42% 55% 45% 58%; }
@media (max-width: 620px) { .hero__blob { display: none; } }
.hero__title { font-size: clamp(2.9rem, 5.6vw, 4.8rem); font-weight: 600; letter-spacing: -.5px; }
.hero__script { font-family: var(--font-script); color: var(--pink); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; margin: .4rem 0 1.4rem; display: block; }
.hero__text { color: var(--muted); font-size: 1.08rem; max-width: 42ch; margin-bottom: 1.6rem; }
.hero__text strong { color: var(--pink); font-weight: 700; }
.hero__media { position: relative; }
.hero__photo { position: relative; z-index: 2; border-radius: 46px 46px 46px 96px; aspect-ratio: 4/3.4; box-shadow: var(--shadow-lg); overflow: hidden; background: var(--cream-deep); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Carrousel du hero : photos qui défilent (slide horizontal) */
.hero-carousel { z-index: 3; width: 100%; }
.hero-carousel__track { display: flex; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.65, .05, .36, 1); will-change: transform; }
.hero-carousel__img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.hero-carousel__dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: 14px; display: flex; gap: 8px; justify-content: center; }
.hero-carousel__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .25s ease, background .25s ease; }
.hero-carousel__dot:hover { background: rgba(255,255,255,.85); }
.hero-carousel__dot.is-active { background: #fff; transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .hero-carousel__track { transition: none; } }

/* ── Placeholders photo (gradients chaleureux) ──────────── */
.ph { display: grid; place-items: center; color: #fff; text-align: center; font-weight: 700; }
.ph span { font-size: 3rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.ph small { display: block; font-size: .78rem; opacity: .85; font-weight: 600; margin-top: .4rem; letter-spacing: .3px; }
.ph--savanna { background: linear-gradient(140deg, #E8A15A, #C4632E 55%, #7a3d84); }
.ph--field   { background: linear-gradient(140deg, #2E8B65, #004C38); }
.ph--warm    { background: linear-gradient(140deg, #EFA35B, #D2542F); }
.ph--rose    { background: linear-gradient(140deg, #F19AB8, #E5397F); }
.ph--teal    { background: linear-gradient(140deg, #17654A, #003A2A); }
.ph--sky     { background: linear-gradient(140deg, #6Fb2d8, #2F7DB5); }
.ph--sun     { background: linear-gradient(140deg, #F6D06B, #EE7B33); }
.ph--violet  { background: linear-gradient(140deg, #A98BD0, #7E57C2); }

/* ── Barre de catégories ────────────────────────────────── */
/* inset : le filet est peint DANS la section, il n'ajoute pas de hauteur. */
.cats { background: var(--cats-bg); box-shadow: inset 0 -1px 0 var(--cats-rule); }
.cats__row { display: flex; gap: 1.8rem; justify-content: space-between; padding: 2.4rem 0; overflow-x: auto; }
.cat { flex: 1; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.4rem .4rem; border-radius: 22px; transition: background .2s, transform .2s; }
.cat:hover { transform: translateY(-4px); background: var(--cat-hover-bg); }
.cat__icon { height: 58px; display: flex; align-items: center; justify-content: center; }
.cat__icon img { height: 58px; width: auto; object-fit: contain; }
.cat span { font-weight: 700; font-size: 1rem; text-align: center; line-height: 1.25; }
.cat.is-active { background: var(--pink-soft); }
.cat.is-active span { color: var(--pink); }

/* ── Layout boutique (sidebar + grille) ─────────────────── */
.shop { background: var(--shop-bg); padding: 1rem 0 4rem; }
.shop__grid { display: grid; grid-template-columns: 250px 1fr; gap: 2.4rem; }

.filters { background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow); align-self: start; position: sticky; top: 100px; }
.filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.4rem; }
.filters__head h3 { font-size: 1.4rem; color: var(--pink); }
.filters__reset { font-size: .82rem; font-weight: 700; color: var(--muted); }
.filters__reset:hover { color: var(--pink); }
.filter-block { margin-bottom: 1.6rem; }
.filter-block > label, .filter-legend { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); margin-bottom: .8rem; }
.size-row { display: flex; gap: .5rem; }
.size-pill { width: 40px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1.5px solid var(--border-input); background: var(--surface); font-weight: 700; font-size: .85rem; transition: all .18s; }
.size-pill:hover { border-color: var(--pink); }
.size-pill.is-active { background: var(--pink); color: var(--on-accent); border-color: var(--pink); }
.check-list { display: flex; flex-direction: column; gap: .6rem; }
.check-list label { display: flex; align-items: center; gap: .6rem; font-size: .92rem; cursor: pointer; }
.check-list input { width: 17px; height: 17px; accent-color: var(--pink); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--border-input); cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.15); }
.price-row { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; margin-top: .8rem; }
.range { width: 100%; accent-color: var(--pink); }
.filter-card { margin-top: 1.4rem; background: var(--cream); border-radius: var(--radius); padding: 1rem; display: flex; gap: .7rem; align-items: flex-start; }
.filter-card svg { width: 26px; height: 26px; color: var(--filter-icon); flex-shrink: 0; }
.filter-card strong { display: block; font-size: .9rem; }
.filter-card p { font-size: .8rem; color: var(--muted); }

/* ── Barre résultats ────────────────────────────────────── */
.shop__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.shop__count { color: var(--muted); font-weight: 600; }
.sort { background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 999px; padding: .6rem 1.1rem; font-weight: 600; font-family: inherit; color: var(--ink); }

/* ── Grille produits ────────────────────────────────────── */
/* 3 colonnes : les cartes respirent (6 tailles + 8 couleurs tiennent sans déborder) */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
/* Le filet de contour est un box-shadow (pas un border) : il ne mange aucun
   pixel de contenu et ne décale donc jamais la grille produits. */
.card { background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--card-ring); transition: transform .2s, box-shadow .2s; position: relative; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--card-ring-hover); }
.card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.card__media .ph { height: 100%; }
/* Mini-carrousel d'images sur la vignette produit (flèches + points) */
.card__slider { position: absolute; inset: 0; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.card__img.is-active { opacity: 1; }
.card__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; padding: 0 0 3px; border: none; border-radius: 50%; background: rgba(var(--surface-rgb), .9); color: var(--ink); font-size: 1.35rem; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s ease, background .15s ease, transform .15s ease; }
.card:hover .card__arrow { opacity: 1; }
.card__arrow:hover { background: var(--surface); transform: translateY(-50%) scale(1.1); }
.card__arrow--prev { left: 8px; }
.card__arrow--next { right: 8px; }
.card__imgdots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 5px; pointer-events: none; }
.card__imgdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: background .2s ease; }
.card__imgdots i.on { background: #fff; }
/* Écrans tactiles : pas de survol → flèches visibles en permanence */
@media (hover: none) { .card__arrow { opacity: .9; } }
.card__fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--surface-rgb), .92); display: grid; place-items: center; color: var(--pink); transition: transform .15s, background .15s; }
.card__fav:hover { transform: scale(1.12); background: var(--surface); }
.card__fav svg { width: 18px; height: 18px; }
/* Lien "étiré" : toute la carte est cliquable, le bouton favori passe au-dessus */
.card__stretch { position: absolute; inset: 0; z-index: 1; }
.card__fav-form { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }
.card__fav-form .card__fav { position: static; border: none; cursor: pointer; padding: 0; font: inherit; }
.card__fav.is-fav { color: var(--pink); }
.card__fav.is-fav svg path { fill: var(--pink); }
.card__body { padding: 1rem 1.1rem 1.2rem; }
.card__name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin-bottom: .7rem; }
/* wrap : au-delà de 4-5 tailles, la liste passe à la ligne au lieu de déborder */
.card__sizes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.card__sizes span, .card__tag { font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 7px; background: var(--cream); color: var(--muted); }
.card__tag { background: var(--pink-soft); color: var(--pink); }
/* Pastilles et prix ne se chevauchent plus : les pastilles peuvent passer à la
   ligne, le prix garde toujours sa place et ne se fait jamais écraser. */
.card__foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card__dots { display: flex; flex-wrap: wrap; gap: .28rem; min-width: 0; }
.dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.08); flex-shrink: 0; }
.card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); white-space: nowrap; margin-left: auto; }
.card__price-from { font-weight: 500; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-right: .1rem; }

/* ── Bandeau aide (guide des tailles) ───────────────────── */
.help { background: var(--help-bg); padding: 0 0 3rem; }
.help__inner { background: var(--help-card-bg); border-radius: var(--radius-lg); padding: 2rem 2.4rem; display: flex; align-items: center; gap: 1.6rem; overflow: hidden; position: relative; }
.help__heart { width: 60px; height: 60px; flex-shrink: 0; color: var(--pink); }
.help__text { flex: 1; }
.help__text h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.help__text p { color: var(--accent-ink-muted); font-size: .95rem; max-width: 46ch; }
.help__media { width: 180px; height: 120px; border-radius: 18px; overflow: hidden; flex-shrink: 0; }

/* ── Section impact (4 / 3 colonnes) ────────────────────── */
/* « Avec chaque achat » : bloc ROSE (l'autre couleur forte de la marque) */
.impact { padding: 4rem 0; position: relative; background: var(--impact-bg); }
.impact__head { text-align: center; margin-bottom: 2.6rem; }
.impact .impact__head .section-title { color: var(--on-accent); }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; align-items: start; }
.features--3 { grid-template-columns: repeat(3, 1fr); }
.feature { text-align: left; }
.feature__icon { width: 46px; height: 46px; margin-bottom: .9rem; }
.feature h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: .4rem; color: var(--on-accent); }
.feature p { color: var(--txt-on-pink-soft); font-size: .92rem; }
/* Pictos posés sur le bloc rose : or et blanc uniquement (le rose et le
   bleu d'origine seraient illisibles sur ce fond). */
.feature--pink   .feature__icon { color: var(--icon-on-accent); }
.feature--lime   .feature__icon { color: var(--on-accent); }
.feature--teal   .feature__icon { color: var(--icon-on-accent); }
.feature--orange .feature__icon { color: var(--on-accent); }
.feature--blue   .feature__icon { color: var(--icon-on-accent); }

/* ── Section deux colonnes (texte + image) ──────────────── */
.split { padding: 3.5rem 0; background: var(--split-bg); position: relative; overflow: hidden; }
.split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split--reverse .split__media { order: -1; }
.split .eyebrow { color: var(--txt-accent-on-teal); }
.split__title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1rem; color: var(--on-teal); }
.split p { color: var(--txt-on-teal-soft); margin-bottom: 1rem; }
.split .accent { font-family: var(--font-script); color: var(--txt-accent-on-teal); font-size: 1.5rem; line-height: 1.2; display: block; margin: 1rem 0 1.4rem; }
.split__photo { border-radius: 34px 34px 34px 80px; aspect-ratio: 4/3; overflow: hidden; box-shadow: var(--shadow-lg); }
.split__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* « Comment ça marche » (accueil) : même vert de marque que le hero/pied de page. */
/* « Comment ça marche » : bloc ROSE, pastilles de numéro en VERT (les deux
   couleurs de marque se répondent). */
.steps-section { background: var(--steps-bg); }
.steps-section .eyebrow { color: var(--steps-eyebrow); }
.steps-section .section-title { color: var(--steps-ink); }
.steps-section .step h4 { color: var(--steps-ink); }
.steps-section .step p { color: var(--steps-ink-soft); }
.steps-section .step__num { background: var(--steps-num-bg); color: var(--steps-num-ink); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.steps-section .steps::before { background: repeating-linear-gradient(90deg, var(--steps-dash) 0 8px, transparent 8px 16px); }

/* ── Timeline (parcours) ────────────────────────────────── */
.timeline-sec { padding: 3.5rem 0; }
.timeline-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.timeline-sec__head h2 { font-size: clamp(1.8rem,3vw,2.5rem); }
.timeline-sec__head h2 small { font-family: var(--font-script); color: var(--muted); font-size: 1.3rem; font-weight: 500; }
/* auto-fit : la frise s'adapte au nombre d'étapes (5, 6, 7…) sans être retouchée */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem; position: relative; }
.timeline::before { content: ""; position: absolute; top: 7px; left: 4%; right: 4%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-dash) 0 8px, transparent 8px 16px); }
.tl { position: relative; }
.tl__dot { width: 16px; height: 16px; border-radius: 50%; margin-bottom: 1rem; position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--cream); }
.tl__date { font-family: var(--font-script); font-size: 1.3rem; font-weight: 700; }
.tl__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: .2rem 0 .5rem; }
.tl__text { font-size: .84rem; color: var(--muted); margin-bottom: .9rem; }
.tl__img { border-radius: 14px; aspect-ratio: 3/2; overflow: hidden; }
.tl__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Les textes d'étape n'ont pas tous la même longueur : on colle la photo en bas
   pour que la frise reste alignée d'une colonne à l'autre. */
.tl { display: flex; flex-direction: column; }
.tl__text { flex-grow: 1; }
.tl--pink   .tl__dot { background: var(--c-pink); }
.tl--lime   .tl__dot { background: var(--c-lime); }
.tl--orange .tl__dot { background: var(--c-orange); }
.tl--blue   .tl__dot { background: var(--c-blue); }
.tl--purple .tl__dot { background: var(--c-purple); }
.timeline-sec__note { text-align: center; color: var(--muted); margin-top: 2.4rem; }


/* ── Carte UMOJA (teal) ─────────────────────────────────── */
.umoja { padding: 2rem 0 4rem; }
.umoja__card { background: var(--umoja-bg); color: var(--on-teal-soft); border-radius: var(--radius-lg); display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; box-shadow: var(--shadow-lg); }
.umoja__media { min-height: 320px; }
.umoja__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.umoja__body { padding: 2.6rem; }
.umoja__body h2 { color: var(--on-accent); font-size: 2rem; margin-bottom: 1rem; }
.umoja__body p { color: rgba(var(--on-accent-rgb), .86); margin-bottom: 1.2rem; }
.umoja__list { list-style: none; margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.umoja__list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.umoja__list .k { color: var(--yellow); font-weight: 800; }

/* ── CTA générique ──────────────────────────────────────── */
.cta-band { text-align: center; padding: 4rem 0; }
.cta-band h2 { font-size: clamp(1.9rem,3vw,2.6rem); margin-bottom: .6rem; }
.cta-band p { color: var(--muted); max-width: 50ch; margin: 0 auto 1.6rem; }

/* ── Comment ça marche (étapes) ─────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; position: relative; }
.steps::before {
  content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-dash) 0 8px, transparent 8px 16px); z-index: 0;
}
.step { position: relative; text-align: center; z-index: 1; }
.step__num {
  width: 52px; height: 52px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--pink); color: var(--on-accent);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .28);
}
.step h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .92rem; }

/* ── FAQ (accordéon natif <details>, sans JS) ───────────── */
.faq { display: flex; flex-direction: column; gap: .9rem; }
.faq__item { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* Le +/× est dessiné par DEUX BARRES en dégradé, pas par le caractère « + » :
   un glyphe n'est jamais optiquement centré dans son cercle, deux barres
   positionnées en `center` le sont toujours, à tous les zooms. */
.faq__item summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(var(--pink), var(--pink)) center / 2px 12px no-repeat,
    linear-gradient(var(--pink), var(--pink)) center / 12px 2px no-repeat,
    var(--cream);
  transition: transform .28s cubic-bezier(.22,.68,0,1), background-color .2s;
}
/* 135° : la croix retombe parfaitement d'aplomb (45° donnerait un × penché) */
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__item[open] summary { color: var(--pink); }
/* Question ouverte : liseré d'accent à gauche (inset → aucun décalage) */
.faq__item[open] { box-shadow: var(--faq-open-shadow); }
/* Conteneur animé : sa hauteur passe de 0 à sa valeur réelle (pilotée en JS,
   toujours en pixels concrets — jamais `auto`, qui casserait la transition). */
.faq__body { overflow: hidden; height: 0; transition: height .32s cubic-bezier(.22,.68,0,1); }
.faq__item p { padding: 0 1.4rem 1.2rem; color: var(--muted); font-size: .93rem; margin: 0; }
/* Ouverture animée : <details> ne sait pas animer sa hauteur partout, on anime
   donc l'apparition du contenu (fondu + léger glissement). */
.faq__item[open] p { animation: faq-open .3s cubic-bezier(.22,.68,0,1) both; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] p { animation: none; }
  .faq__item summary::after { transition: none; }
  .faq__body { transition: none; }
}

/* ── Grille artisans / articles ─────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.tile { background: var(--surface); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--card-ring); transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--card-ring-hover); }
.tile__media { aspect-ratio: 4/3; }
.tile__body { padding: 1.3rem 1.4rem 1.6rem; }
.tile__meta { font-family: var(--font-script); color: var(--meta-accent); font-size: 1.15rem; }
.tile__body h3 { font-size: 1.2rem; margin: .1rem 0 .5rem; }
.tile__body p { color: var(--muted); font-size: .92rem; }
.tile--link { display: block; color: inherit; text-decoration: none; }
.tile--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Page article (actualité dédiée) ────────────────────── */
.art { padding: 2.5rem 0 1rem; }
.art__head.container { max-width: 760px; }
.art__back { display: inline-block; color: var(--pink); font-weight: 700; text-decoration: none; margin-bottom: 1rem; }
.art__back:hover { text-decoration: underline; }
.art__date { display: block; font-family: var(--font-script); color: var(--meta-accent); font-size: 1.2rem; }
.art__title { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; margin: .2rem 0 .8rem; }
.art__lead { font-size: 1.15rem; color: var(--muted); }
.art__lead p { margin: 0 0 .8rem; }
.art__lead p:last-child { margin-bottom: 0; }
.art__cover.container { max-width: 900px; margin-top: 1.6rem; margin-bottom: 1.6rem; }
.art__cover img { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); display: block; }
.art__body.container { max-width: 760px; margin-bottom: 3rem; }
.art__body p { margin: 0 0 1.1rem; line-height: 1.75; font-size: 1.05rem; color: var(--ink); }
/* Galerie de photos supplémentaires en bas d'un article */
.art__gallery.container { max-width: 900px; margin-bottom: 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.art__gallery-item { display: block; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.art__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.art__gallery-item:hover img { transform: scale(1.05); }

/* ── Formulaire contact ─────────────────────────────────── */
.form-card { background: var(--surface); border-radius: var(--radius-lg); padding: 2.4rem; box-shadow: var(--shadow); max-width: 620px; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .4rem; }
.field input, .field textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--border-input); border-radius: 14px; font-family: inherit; font-size: .95rem; background: var(--paper); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); }
.field textarea { min-height: 140px; resize: vertical; }

/* ── Trust / footer ─────────────────────────────────────── */
.trust { background: var(--footer-bg); color: var(--on-teal); margin-top: auto; }
.trust__inner { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 32px; flex-wrap: wrap; }
.trust__item { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .92rem; }
.trust__item svg { width: 22px; height: 22px; color: var(--yellow); flex-shrink: 0; }
.trust__base { display: flex; justify-content: space-between; align-items: center; padding: 1rem 32px; border-top: 1px solid rgba(var(--on-accent-rgb), .14); font-size: .84rem; color: var(--txt-on-teal-dim); flex-wrap: wrap; gap: .6rem; }
.trust__links { display: flex; gap: 1.2rem; }
.trust__links a:hover { color: var(--on-accent); }

/* ── Utilitaires ────────────────────────────────────────── */
.page { min-height: 60vh; flex: 1 0 auto; display: flex; flex-direction: column; }   /* remplit la hauteur → footer en bas sur les grands écrans */
/* Sur une page courte, la DERNIÈRE section remplit l'espace restant avec son
   propre fond (sinon le crème du body apparaît en bande vide avant le footer). */
.page > section:last-of-type { flex-grow: 1; }
/* Halo chaud très diffus en haut de section (inset : peint sur le fond, sous
   le contenu — aucun élément positionné, donc aucun contexte d'empilement
   créé, les modales et les colonnes `sticky` ne bougent pas). */
.pad { padding-block: 4rem; box-shadow: var(--pad-glow); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; }

/* ── Apparition au chargement ───────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.rise-2 { animation-delay: .1s; } .rise-3 { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .rise, .rise-2, .rise-3 { animation: none; opacity: 1; } }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav__toggle { display: flex; }
  /* Liens de nav = panneau déroulant sous le header */
  .nav__links {
    display: none; position: absolute; top: 84px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--cream);
    padding: .5rem 24px 1rem; box-shadow: 0 12px 24px rgba(0,0,0,.08);
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a { padding: .9rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(0,0,0,.05); }
  .nav__links a.is-active::after { display: none; }
  .hero__inner, .split__inner, .umoja__card { grid-template-columns: 1fr; }
  /* Hero empilé : texte centré, photo dans le conteneur (plus de débordement) */
  .hero__inner { min-height: 0; gap: 1.8rem; padding: 2.6rem 24px 2.4rem; text-align: center; }
  .hero__inner .rise > div { justify-content: center; }
  .hero__text { margin-left: auto; margin-right: auto; }
  .hero__media { align-self: auto; margin: 0; width: 100%; max-width: 460px; justify-self: center; }
  .shop__grid { grid-template-columns: 1fr; }
  .filters { position: static; }
  .products { grid-template-columns: repeat(2, 1fr); }
  .features, .features--3, .tiles { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.8rem; }
  .steps::before { display: none; }
  .split--reverse .split__media { order: 0; }
  .umoja__media { min-height: 220px; }
}
@media (max-width: 560px) {
  .container { padding-inline: 20px; }
  .products, .features, .features--3, .tiles, .timeline, .help__inner { grid-template-columns: 1fr; }
  .help__inner { flex-direction: column; text-align: center; }
  .trust__inner { flex-direction: column; }
}

/* =============================================================
   ADMINISTRATION
   ============================================================= */
.admin { min-height: 100vh; background: var(--cream); display: flex; flex-direction: column; }
.admin__bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 32px; background: var(--surface); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; }
.admin__brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.admin__link { font-weight: 700; color: var(--pink); font-size: .9rem; }
.admin__main { padding-block: 2.4rem; width: 100%; }
.admin__main--narrow { max-width: 780px; }
.admin__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; gap: 1rem; flex-wrap: wrap; }
.admin__head h1 { font-size: 2rem; }
.admin__sub { color: var(--muted); font-weight: 600; }
.admin__back { display: inline-block; color: var(--muted); font-weight: 700; margin-bottom: 1rem; }
.admin__back:hover { color: var(--pink); }
.admin__empty { background: var(--surface); border-radius: var(--radius); padding: 3rem; text-align: center; color: var(--muted); box-shadow: var(--shadow); }

.admin__tablewrap { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow-x: auto; }
.admin__table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin__table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 1rem 1.2rem; border-bottom: 2px solid var(--cream); }
.admin__table td { padding: .8rem 1.2rem; border-bottom: 1px solid var(--cream); vertical-align: middle; }
.admin__table tr:last-child td { border-bottom: none; }
.admin__thumb { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.badge { font-size: .74rem; font-weight: 800; padding: .25rem .6rem; border-radius: 999px; }
.badge--on { background: var(--ok-bg); color: var(--ok); }
.badge--off { background: var(--surface-alt); color: var(--muted); }
.admin__actions { display: flex; gap: .5rem; align-items: center; }
.admin__actions form { display: inline; }
.mini-btn { font-size: .8rem; font-weight: 700; padding: .4rem .8rem; border-radius: 999px; background: var(--cream); color: var(--ink); transition: background .15s; }
.mini-btn:hover { background: var(--border-soft); }
.mini-btn--danger { color: var(--err); background: var(--err-bg); }
.mini-btn--danger:hover { background: var(--err-bg-strong); }
.mini-btn--warn { color: var(--warn-deep); background: var(--warn-bg-soft); border: none; font-family: inherit; cursor: pointer; }
.mini-btn--warn:hover { background: var(--warn-bg-strong); }

.admin__form { background: var(--surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); margin-top: 1rem; }
.admin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.admin__form .field { margin-bottom: 1.4rem; }
.admin__form label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .45rem; }
.admin__form input[type=text], .admin__form input[type=number], .admin__form select, .admin__form textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--border-input); border-radius: 14px; font-family: inherit; font-size: .95rem; background: var(--paper); color: var(--ink);
}
.admin__form input:focus, .admin__form select:focus, .admin__form textarea:focus { outline: none; border-color: var(--pink); }
.admin__form textarea { min-height: 110px; resize: vertical; }
.inline-check { display: flex !important; align-items: center; gap: .5rem; font-weight: 600 !important; margin-bottom: .7rem; cursor: pointer; }
.inline-check input { width: 17px; height: 17px; accent-color: var(--pink); }
.pill-checks { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill-check { display: flex !important; align-items: center; gap: .4rem; background: var(--paper); border: 1.5px solid var(--border-input); border-radius: 12px; padding: .5rem .9rem; margin: 0 !important; font-weight: 700 !important; cursor: pointer; }
.pill-check input { accent-color: var(--pink); }
.color-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.color-check { display: flex !important; align-items: center; gap: .5rem; margin: 0 !important; font-weight: 600 !important; font-size: .9rem; cursor: pointer; }
.color-check input { accent-color: var(--pink); }
.admin__formfoot { display: flex; gap: .8rem; align-items: center; }
@media (max-width: 640px) { .admin__grid { grid-template-columns: 1fr; } }

/* =============================================================
   AUTHENTIFICATION (connexion / inscription / compte)
   ============================================================= */
.auth-page { display: flex; }
.auth-wrap { flex: 1; display: grid; place-items: center; padding: 3.5rem 32px 5rem; }
.auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 2.6rem; box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 2rem; margin: .2rem 0 1.4rem; }
.auth-card .field { margin-bottom: 1.1rem; }
.auth-submit { width: 100%; justify-content: center; }
.auth-alt { text-align: center; margin-top: 1.3rem; color: var(--muted); font-size: .92rem; }
.auth-alt a { color: var(--pink); font-weight: 700; }
.alert { background: var(--err-bg); color: var(--err); padding: .8rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 600; margin-bottom: 1.2rem; }
.icon-btn.is-connected { color: var(--pink); }
.account-info { list-style: none; margin: 0 0 1.6rem; border: 1.5px solid var(--cream); border-radius: 16px; overflow: hidden; }
.account-info li { display: flex; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid var(--cream); }
.account-info li:last-child { border-bottom: none; }
.account-info span { color: var(--muted); font-weight: 600; }

/* =============================================================
   BOUTIQUE — page produit, panier, commande
   ============================================================= */
.muted-txt { color: var(--muted); font-size: .88rem; }

/* ── Page produit (détail) ──────────────────────────────── */
/* Haut de fiche produit sur fond VERT (couleur dominante de la marque) :
   la page était entièrement claire, seul le pied de page portait le vert. */
.pdp { padding: 2.4rem 0 3.5rem; background: var(--pdp-bg); }
.pdp .pdp__back { color: var(--pdp-ink-soft); font-weight: 700; display: inline-block; margin-bottom: 1.4rem; }
.pdp .pdp__back:hover { color: var(--txt-accent-on-teal); }
.pdp .eyebrow { color: var(--txt-accent-on-teal); }
.pdp .pdp__title { color: var(--pdp-ink); }
.pdp .pdp__price { color: var(--pdp-price); }
.pdp .pdp__gallery-hint, .pdp .pdp__badges { color: var(--pdp-ink-soft); }
.pdp .pdp__rating { color: var(--pdp-ink-soft); }
/* Suffixe de taille (« XS ») et « (1 avis) » : sur le vert, le gris d'origine
   disparaissait — on force un vert clair lisible. */
.pdp .pdp__price-size { color: var(--pdp-ink-soft); }
.pdp .pdp__rating .muted-txt { color: var(--pdp-ink-soft); }
/* Réassurance (fait main / paiement / livraison) : idem, en clair sur le vert. */
.pdp .pdp__reassure { color: var(--pdp-ink-soft); }
/* Couleurs proposées : pastille + nom donné par l'admin */
.pdp__colors { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.pdp__color { display: inline-flex; align-items: center; gap: .4rem; }
.pdp__color-nom { font-size: .82rem; color: var(--muted); }
.pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.pdp__media { position: relative; }
.pdp__photo { position: relative; z-index: 2; border-radius: 40px 40px 40px 90px; aspect-ratio: 1/1; overflow: hidden; box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.pdp__photo img { width: 100%; height: 100%; object-fit: cover; }
.pdp__photo span { font-size: 5rem; }
.pdp__title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: .3rem 0 .5rem; }
.pdp__price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--pink); margin-bottom: 1.2rem; }
.pdp__desc { color: var(--muted); margin-bottom: 1.6rem; }
/* margin-top : respire toujours après le bouton favoris, que le produit ait
   une description ou non (elle est désormais affichée plus bas). */
.pdp__form { background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow); margin-top: 1.9rem; }
.pdp__field { margin-bottom: 1.2rem; }
.pdp__field > label { display: block; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .6rem; }
.size-radio { position: relative; }
.size-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.size-radio span { display: grid; place-items: center; width: 44px; height: 42px; border: 1.5px solid var(--border-input); border-radius: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.size-radio input:checked + span { background: var(--pink); color: var(--on-accent); border-color: var(--pink); }
.size-radio span:hover { border-color: var(--pink); }
/* Tailles épuisées : d'apparence normale et cliquables — un clic affiche le
   message « rupture de stock » (pas de barré ni d'aspect désactivé). */
.size-radio.is-out span { cursor: pointer; }
.pdp__qty { width: 100px; padding: .7rem 1rem; border: 1.5px solid var(--border-input); border-radius: 12px; font-family: inherit; font-size: 1rem; background: var(--paper); }
.pdp__add { width: 100%; justify-content: center; margin-top: .4rem; }
/* Bascule achat / rupture sur le bouton (taille épuisée sélectionnée) */
.pdp__add .pdp__add-out { display: none; }
.pdp__add.is-out .pdp__add-in { display: none; }
.pdp__add.is-out .pdp__add-out { display: inline; }
.pdp__add.is-out, .pdp__buynow.is-out { background: var(--muted, #b9b0a2); border-color: var(--muted, #b9b0a2); cursor: not-allowed; box-shadow: none; transform: none; opacity: 1; }
.pdp__add.is-out:hover, .pdp__buynow.is-out:hover { background: var(--muted, #b9b0a2); transform: none; }
/* Achat en 1 clic (bouton distinct sous l'ajout au panier) */
.pdp__buynow-form { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.pdp__buynow { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  background: var(--ink); color: var(--on-accent); border: none; border-radius: 999px; padding: .95rem 1.4rem; font: inherit; font-weight: 800; font-size: 1rem;
  transition: transform .12s ease, background .2s ease; }
.pdp__buynow:hover { background: var(--ink-deep); transform: translateY(-1px); }
.pdp__buynow:active { transform: translateY(0); }
.pdp__buynow-hint { font-size: .8rem; color: var(--muted); text-align: center; margin: .5rem 0 0; }
.pdp__stock { font-size: .85rem; margin-top: .7rem; text-align: center; }
.pdp__stock.in { color: var(--ok); }
.pdp__reassure { list-style: none; margin-top: 1.6rem; display: flex; flex-direction: column; gap: .5rem; color: var(--muted); font-weight: 600; font-size: .92rem; }
.pdp__stock.low { color: var(--warn); font-weight: 700; }
.pdp__stock.out { color: var(--err); font-weight: 700; }
.pdp__restock { margin-top: .7rem; text-align: center; font-size: .9rem; color: var(--ink); background: var(--cream); border-radius: 12px; padding: .55rem .8rem; }
.pdp__restock strong { color: var(--teal, #2a8a7a); }
.pdp__handmade { margin-top: .6rem; text-align: center; font-size: .86rem; line-height: 1.5; color: var(--muted); font-style: italic; }
/* Message « rupture » affiché par-dessus l'image quand on clique une taille épuisée */
.pdp__rupture { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 1.1rem; text-align: center; cursor: pointer; background: rgba(20, 18, 16, .6); }
.pdp__rupture[hidden] { display: none; }
.pdp__rupture-box { position: relative; background: rgba(255, 255, 255, .97); border-radius: 16px; padding: 1.1rem 1.3rem; max-width: 90%; box-shadow: 0 14px 34px rgba(0, 0, 0, .32); display: flex; flex-direction: column; gap: .4rem; }
/* .pdp__rupture prefixe : bat `.pdp__photo span { font-size: 5rem }` (emoji de repli) */
.pdp__rupture .pdp__rupture-size { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; line-height: 1.3; color: var(--pink); }
.pdp__rupture .pdp__rupture-title { font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: var(--ink, #2E2823); }
.pdp__rupture .pdp__rupture-eta { font-size: .92rem; line-height: 1.4; color: var(--ink, #2E2823); }
.pdp__rupture .pdp__rupture-eta strong { color: var(--teal, #2a8a7a); }
.pdp__rupture .pdp__rupture-hand { font-size: .85rem; line-height: 1.5; color: var(--muted); font-style: italic; }
.pdp__rupture .pdp__rupture-close { position: absolute; top: 8px; right: 11px; font-size: .8rem; color: var(--muted); }

/* Message flash côté public (ex : rupture de stock au panier) */
.site-toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 14px); background: var(--ink); color: var(--on-accent); padding: 11px 20px; border-radius: 12px; font-weight: 700; font-size: .9rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; transition: all .25s ease; z-index: 200; pointer-events: none; max-width: 90vw; text-align: center; }
.site-toast.show { opacity: 1; transform: translate(-50%, 0); }
.site-toast--error { background: var(--err); }
.site-toast--ok { background: var(--teal); }

/* ── Galerie photos (miniatures en dessous) ─────────────── */
.pdp__gallery { position: sticky; top: 100px; }
.pdp__thumbs { display: flex; gap: .7rem; margin-top: .9rem; flex-wrap: wrap; }
.pdp__thumb { width: 74px; height: 74px; border-radius: 14px; overflow: hidden; border: 2px solid transparent; box-shadow: 0 0 0 1.5px var(--border-input); cursor: pointer; padding: 0; transition: border-color .15s; background: none; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb:hover { box-shadow: 0 0 0 1.5px var(--pink); }
.pdp__thumb.is-active { border-color: var(--pink); box-shadow: 0 0 0 1.5px var(--pink); }
/* Photo affichée : la vignette active ressort, les autres s'effacent un peu */
.pdp__thumb { opacity: .72; transition: border-color .15s, opacity .15s; }
.pdp__thumb:hover,
.pdp__thumb.is-active { opacity: 1; }
.pdp__thumb:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; opacity: 1; }
.pdp__gallery-hint { margin-top: .6rem; font-size: .8rem; color: var(--muted); }

/* Navigation dans la galerie (flèches sur la photo + compteur).
   Sélecteur `.pdp__photo .pdp__photocount` : sans lui, la règle
   `.pdp__photo span { font-size: 5rem }` (emoji de repli) l'emporterait. */
.pdp__photo .pdp__photocount { position: absolute; right: 14px; bottom: 14px; z-index: 3; font-size: .76rem; font-weight: 700; letter-spacing: .02em; padding: .22rem .6rem; border-radius: 999px; background: rgba(var(--ink-rgb), .55); color: var(--on-accent); }
.pdp__navphoto { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; padding: 0 0 .16em; border: 0; border-radius: 50%; background: rgba(var(--surface-rgb), .88); color: var(--ink); font-size: 1.7rem; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; transition: opacity .18s, color .18s; }
.pdp__navphoto--prev { left: 14px; }
.pdp__navphoto--next { right: 14px; }
.pdp__photo:hover .pdp__navphoto,
.pdp__navphoto:focus-visible { opacity: 1; }
.pdp__navphoto:hover { color: var(--pink); }
/* Écrans tactiles : pas de survol, les flèches restent visibles */
@media (hover: none) { .pdp__navphoto { opacity: 1; } }

/* ── Détails & caractéristiques ─────────────────────────── */
/* Toute la fiche produit reste sur le vert (couleur dominante) : plus de bande
   claire insérée au milieu. Les textes passent donc en clair pour rester
   lisibles, et le filet de séparation devient un blanc translucide. */
.pdp__details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem;
  margin-top: 3rem; padding-top: 2.4rem;
  border-top: 1.5px solid rgba(var(--on-accent-rgb), .18);
}
.pdp .pdp__detailtitle { font-size: 1.4rem; margin-bottom: 1rem; color: var(--pdp-ink); }
.pdp .pdp__detailcol p { color: var(--pdp-ink-soft); line-height: 1.7; }
/* Description : respecte les retours à la ligne et les paragraphes saisis en admin */
.pdp .pdp__desc { white-space: pre-line; }
.pdp__specs { display: flex; flex-direction: column; gap: 0; }
.pdp__spec { display: grid; grid-template-columns: 40% 60%; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(var(--on-accent-rgb), .14); }
.pdp__spec:last-child { border-bottom: none; }
.pdp .pdp__spec dt { font-weight: 700; color: var(--pdp-ink); }
.pdp .pdp__spec dd { color: var(--pdp-ink-soft); }
@media (max-width: 900px) {
  .pdp__gallery { position: static; }
  .pdp__details { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ── Panier ─────────────────────────────────────────────── */
.cart-empty { background: var(--surface); border-radius: var(--radius-lg); padding: 3.5rem; text-align: center; box-shadow: var(--shadow); }
.cart-empty__icon { font-size: 3rem; margin-bottom: .6rem; }
.cart-empty p { color: var(--muted); margin-bottom: 1.4rem; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 1rem; }
.cart-item { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; }
.cart-item__media { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; flex-shrink: 0; }
.cart-item__info { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cart-item__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.cart-item__name:hover { color: var(--pink); }
.cart-item__meta { font-size: .82rem; color: var(--muted); }
.cart-item__qty input { width: 62px; padding: .5rem; border: 1.5px solid var(--border-input); border-radius: 10px; font-family: inherit; text-align: center; }
.cart-item__total { font-family: var(--font-display); font-weight: 700; min-width: 62px; text-align: right; }
.cart-item__remove { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); color: var(--muted); font-weight: 700; }
.cart-item__remove:hover { background: var(--err-bg); color: var(--err); }
.cart-summary { background: var(--surface); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow); position: sticky; top: 100px; }
.cart-summary h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.cart-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .95rem; }
.cart-summary__total { display: flex; justify-content: space-between; padding: .9rem 0; margin: .5rem 0 1rem; border-top: 2px solid var(--cream); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.cart-summary__continue { display: block; text-align: center; margin-top: .9rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
.cart-summary__continue:hover { color: var(--pink); }
.cart-promo { display: flex; gap: 8px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cream); }
.cart-promo input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1.5px solid var(--border-input); border-radius: 10px; font-family: inherit; font-size: .88rem; }
.cart-promo input:focus { outline: none; border-color: var(--pink); }
.cart-promo--active { align-items: center; justify-content: space-between; color: var(--teal); font-weight: 700; font-size: .92rem; }
.cart-promo--active form { display: inline; }
.cart-promo__remove { background: none; border: none; color: var(--muted); font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.cart-promo__remove:hover { color: var(--err); }
.promo-code { letter-spacing: .04em; }

/* ── Confirmation de commande ───────────────────────────── */
.confirm { background: var(--surface); border-radius: var(--radius-lg); padding: 3rem 2.4rem; box-shadow: var(--shadow); text-align: center; }
.confirm__check { width: 70px; height: 70px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 2.2rem; display: grid; place-items: center; margin: 0 auto 1.2rem; font-weight: 800; }
.confirm h1 { font-size: 2rem; margin-bottom: .6rem; }
.confirm p { color: var(--muted); margin-bottom: 1.4rem; }
.confirm__recap { text-align: left; background: var(--paper); border-radius: 16px; padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; }

/* ── Admin : navigation + statuts commandes ─────────────── */
.admin__nav { display: flex; gap: 1.4rem; }
.admin__nav a { font-weight: 700; color: var(--muted); padding: .3rem 0; }
.admin__nav a:hover, .admin__nav a.is-active { color: var(--pink); }
.statut-select { border: 1.5px solid var(--border-input); border-radius: 999px; padding: .4rem .8rem; font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.statut--payee         { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-border); }
.statut--en_preparation{ background: var(--prep-bg); color: var(--prep); border-color: var(--prep-border); }
.statut--expediee      { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.statut--livree        { background: var(--ok-bg-alt); color: var(--ok-deep); border-color: var(--ok-border-alt); }
.statut--annulee       { background: var(--err-bg); color: var(--err); border-color: var(--err-border); }
.statut--rembourse     { background: var(--surface-alt); color: var(--warn-ink); border-color: var(--warn-border-alt); }
.statut--en_attente    { background: var(--warn-bg-notice); color: var(--warn-ink-alt); border-color: var(--warn-border); }

@media (max-width: 900px) {
  .pdp__grid, .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

/* ── Pages légales ────────────────────────────────────────────── */
.legal-wrap { max-width: 760px; }
.legal-maj { color: var(--muted); font-size: .85rem; margin: .3rem 0 2rem; }
.legal h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 1.8rem 0 .6rem; color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-soft); line-height: 1.7; margin-bottom: .8rem; font-size: .96rem; }
.legal a { color: var(--pink); font-weight: 600; text-decoration: underline; }

/* Liens légaux dans le pied de page */
.trust__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .3rem 32px 1.2rem; font-size: .8rem; }
.trust__legal a { color: var(--txt-on-teal-faint); }
.trust__legal a:hover { color: var(--on-accent); }

/* Bannière cookies */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 720px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 16px; padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1.2rem; z-index: 200; }
.cookie-banner p { font-size: .9rem; color: var(--ink); margin: 0; flex: 1; line-height: 1.5; }
.cookie-banner p a { color: var(--pink); font-weight: 600; text-decoration: underline; }
.cookie-banner .btn { flex: none; padding: .6rem 1.3rem; }
.cookie-banner[hidden] { display: none; }
@media (max-width: 560px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } }

/* ── Espace client ────────────────────────────────────────────── */
.alert--ok { background: var(--ok-bg); color: var(--ok); }

/* Pages auth (mot de passe oublié / réinit / vérif) */
.auth-text { color: var(--muted); font-size: .95rem; margin-bottom: 1.3rem; line-height: 1.55; }
.auth-forgot { text-align: right; margin: 1rem 0 .2rem; }
.pw-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pw-forgot { color: var(--muted); font-size: .88rem; font-weight: 600; }
.pw-forgot:hover { color: var(--pink); }
.auth-forgot a { color: var(--muted); font-size: .85rem; font-weight: 600; }
.auth-forgot a:hover { color: var(--pink); }

/* Boutons complémentaires */
.mini-btn--pink { background: var(--pink-soft); color: var(--pink); border: none; font-family: inherit; cursor: pointer; }
.mini-btn--pink:hover { background: var(--accent-soft-hover); }
button.mini-btn { border: none; font-family: inherit; cursor: pointer; }
.btn--danger { background: var(--err); color: var(--on-accent); box-shadow: 0 8px 20px rgba(var(--err-rgb), .24); }
.btn--danger:hover { filter: brightness(.92); }

/* Actions sur le détail de commande client */
.order-detail__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.order-detail__actions form { margin: 0; }

/* Zone dangereuse (suppression de compte) */
.account-danger { border: 1.5px solid var(--err-border); }
.account-danger .account-block__head h2 { color: var(--err); }

/* Carnet d'adresses */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.addr-card { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .18rem; font-size: .92rem; }
.addr-card.is-default { border-color: var(--pink); }
.addr-card__badge { position: absolute; top: -9px; right: 12px; background: var(--pink); color: var(--on-accent); font-size: .68rem; font-weight: 800; padding: .18rem .55rem; border-radius: 999px; }
.addr-card__label { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); }
.addr-card strong { font-size: 1rem; }
.addr-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.addr-card__actions form { margin: 0; }
/* Cartes de paiement (réutilise la grille .addr-grid) */
.pay-card { position: relative; background: linear-gradient(135deg, var(--ink), var(--ink-soft)); color: var(--on-accent); border-radius: 14px; padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; min-height: 130px; }
.pay-card.is-default { box-shadow: 0 0 0 2px var(--pink); }
.pay-card__brand { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; letter-spacing: .04em; }
.pay-card__ico { font-size: 1.3rem; }
.pay-card__num { font-family: 'Courier New', monospace; font-size: 1.05rem; letter-spacing: .12em; margin-top: .3rem; }
.pay-card .muted-txt { color: rgba(var(--on-accent-rgb), .7); }
.pay-card .addr-card__actions { margin-top: auto; }
.pay-card .mini-btn { background: rgba(var(--on-accent-rgb), .14); border-color: rgba(var(--on-accent-rgb), .25); color: var(--on-accent); }
.pay-card .mini-btn:hover { background: rgba(var(--on-accent-rgb), .24); }
.addr-default-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--muted); margin-bottom: 1rem; cursor: pointer; }
.addr-default-check input { width: 17px; height: 17px; accent-color: var(--pink); }
.addr-form-actions { display: flex; gap: .7rem; align-items: center; }

/* Grille des favoris (dans l'espace compte) */
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.4rem; }

/* Sélecteur d'adresses au checkout */
.addr-choice { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.addr-choice__opt { text-align: left; background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 12px; padding: .7rem .9rem; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: .15rem; transition: border-color .15s; }
.addr-choice__opt:hover { border-color: var(--pink); }
.addr-choice__opt.is-selected { border-color: var(--pink); background: var(--pink-soft); }
.addr-choice__opt strong { font-size: .95rem; }
.addr-choice__opt span { font-size: .84rem; color: var(--muted); }
.addr-choice__new { text-align: center; align-items: center; color: var(--pink); font-weight: 700; }

/* Formulaire de commande épuré : titres de section + grille 2 colonnes */
.checkout-login { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--pink-soft); border-radius: 12px; padding: .8rem 1.1rem; margin-bottom: 1.2rem; font-size: .92rem; }
.checkout-login span { color: var(--muted); font-weight: 600; }
.checkout-login a { color: var(--pink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.checkout-form__h { font-size: 1.05rem; margin: 1.8rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-2); }
.checkout-form__h:first-of-type { margin-top: 0; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.checkout-grid__full { grid-column: 1 / -1; }
.field-hint { font-size: .78rem; color: var(--muted); margin: .35rem 0 0; }
@media (max-width: 560px) { .checkout-grid { grid-template-columns: 1fr; } }

/* Autocomplétion d'adresse (liste de suggestions sous le champ Rue) */
.addr-ac { position: relative; }
.addr-ac__list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - .8rem); background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; max-height: 260px; overflow-y: auto; }
.addr-ac__item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line-3); padding: .7rem .95rem; font-family: inherit; font-size: .9rem; cursor: pointer; color: var(--ink); }
.addr-ac__item:last-child { border-bottom: none; }
.addr-ac__item:hover { background: var(--pink-soft); color: var(--pink); }
.addr-ac__status { font-size: .82rem; font-weight: 600; color: var(--muted); margin: .35rem 0 0; min-height: 1em; }
.addr-ac__status.is-ok { color: var(--teal); }

/* Listes de sélection (adresses / cartes) sur le checkout fluide */
.pick-list { display: grid; gap: .6rem; margin-bottom: .8rem; }
.pick { display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%; background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 14px; padding: .85rem 1rem; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.pick:hover { border-color: var(--pink); }
.pick.is-selected { border-color: var(--pink); background: var(--pink-soft); }
.pick__radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); position: relative; }
.pick.is-selected .pick__radio { border-color: var(--pink); }
.pick.is-selected .pick__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--pink); }
.pick__body { display: flex; flex-direction: column; gap: .12rem; }
.pick__body strong { font-size: .95rem; }
.pick__body span { font-size: .84rem; color: var(--muted); }
.pick__brand { font-weight: 800; letter-spacing: .03em; }
.pick-add { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 1.5px dashed var(--border-strong); color: var(--pink); font-family: inherit; font-weight: 700; font-size: .9rem; border-radius: 12px; padding: .7rem 1rem; width: 100%; justify-content: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pick-add:hover { border-color: var(--pink); background: var(--pink-soft); }
.checkout-err { color: var(--err); font-weight: 600; font-size: .88rem; margin: 1rem 0 0; }

/* Popups (modales) */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity .2s ease; }
/* Une modale FERMÉE (attribut hidden) ne doit pas recouvrir la page ni capter
   les clics. Sans ça, display:flex écrase `hidden` → overlay invisible bloquant. */
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
.modal__backdrop { position: absolute; inset: 0; background: var(--scrim); }
.modal__box { position: relative; background: var(--surface); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; transform: translateY(12px) scale(.98); transition: transform .2s ease; }
.modal.is-open .modal__box { transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.4rem .6rem; }
.modal__title { font-size: 1.15rem; margin: 0; }
.modal__close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--muted); line-height: 1; padding: .3rem; }
.modal__close:hover { color: var(--pink); }
.modal__body { padding: .4rem 1.4rem 1.4rem; }
.modal__foot { display: flex; gap: .7rem; justify-content: flex-end; margin-top: 1.2rem; }
.modal-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; font-weight: 600; color: var(--muted); margin-top: .8rem; cursor: pointer; line-height: 1.4; }
.modal-check input { margin-top: .15rem; }
.modal-err { color: var(--err); font-weight: 600; font-size: .86rem; margin: .8rem 0 0; }

/* Bannière "email non confirmé" */
.verify-banner { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; background: var(--warn-bg-notice); color: var(--warn-ink); border: 1px solid var(--warn-border); border-radius: 12px; padding: .8rem 1.1rem; font-size: .9rem; font-weight: 600; margin-bottom: 1.4rem; }
.verify-banner span { flex: 1; min-width: 200px; }
.verify-banner a, .verify-banner button { background: var(--warn-ink); color: var(--on-accent); border: none; font-family: inherit; font-weight: 700; font-size: .82rem; padding: .5rem .9rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.verify-banner a:hover, .verify-banner button:hover { background: var(--warn-ink-strong); }

.account-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.6rem; align-items: start; }

.account-side { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; position: sticky; top: 90px; }
.account-side__head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cream); margin-bottom: .8rem; }
.account-side__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; flex-shrink: 0; }
.account-side__name { display: block; font-size: .98rem; line-height: 1.2; }
.account-side__email { display: block; font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 150px; white-space: nowrap; }
.account-side__nav { display: flex; flex-direction: column; gap: .2rem; }
.account-side__nav a { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 12px; font-weight: 700; color: var(--ink); font-size: .92rem; }
.account-side__nav a:hover { background: var(--cream); }
.account-side__nav a.is-active { background: var(--pink-soft); color: var(--pink); }
.account-side__ico { width: 20px; text-align: center; font-size: 1rem; }
.account-side__logout { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--cream); }
.account-side__logout button { width: 100%; background: none; border: none; color: var(--muted); font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; padding: .5rem; border-radius: 10px; }
.account-side__logout button:hover { color: var(--pink); background: var(--cream); }

.account-main { min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }

.account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.account-stat { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
.account-stat__num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--pink); line-height: 1; }
.account-stat__label { display: block; margin-top: .35rem; color: var(--muted); font-weight: 700; font-size: .85rem; }

.account-block { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.5rem; }
.account-block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.account-block__head h2 { font-family: var(--font-display); font-size: 1.2rem; }
.account-block__link { color: var(--pink); font-weight: 700; font-size: .88rem; }
.account-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; align-items: start; }

.account-empty { text-align: center; padding: 2.4rem 1rem; }
.account-empty__icon { font-size: 2.4rem; margin-bottom: .6rem; }
.account-empty p { color: var(--muted); margin-bottom: 1.2rem; }

.order-list { display: flex; flex-direction: column; gap: .6rem; }
.order-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border: 1.5px solid var(--cream); border-radius: 14px; transition: border-color .15s, transform .15s; }
.order-row:hover { border-color: var(--pink); transform: translateY(-1px); }
.order-row__main { display: flex; flex-direction: column; }
.order-row__id { font-size: 1rem; }
.order-row__date { color: var(--muted); font-size: .82rem; }
.order-row__items { color: var(--muted); font-size: .85rem; font-weight: 600; }
.order-row__total { font-size: 1.05rem; min-width: 62px; text-align: right; }

.st-badge { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.st-badge--lg { padding: .45rem 1rem; font-size: .9rem; }

.order-detail__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.order-detail__title { font-family: var(--font-display); font-size: 1.7rem; }
.order-detail__date { color: var(--muted); font-weight: 600; }

.order-note { background: var(--cream); border-radius: 14px; padding: .9rem 1.1rem; font-weight: 600; font-size: .9rem; }
.order-note--cancel { background: var(--err-bg); color: var(--err); }
.order-note--track { background: var(--pink-soft); display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; }
.order-note--track span { color: var(--muted); }
.track-btn { display: inline-flex; align-items: center; gap: .3rem; background: var(--pink); color: var(--on-accent); font-weight: 700; font-size: .85rem; padding: .5rem .9rem; border-radius: 999px; white-space: nowrap; }
.track-btn:hover { background: var(--accent-dark-alt); }

.order-track { display: flex; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.order-track__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; text-align: center; }
.order-track__step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; background: var(--cream); z-index: 0; }
.order-track__step:first-child::before { display: none; }
.order-track__step.is-done::before { background: var(--teal); }
.order-track__dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); border: 3px solid var(--cream); color: var(--muted); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.order-track__step.is-done .order-track__dot { background: var(--teal); border-color: var(--teal); color: var(--on-accent); }
.order-track__step.is-current .order-track__dot { box-shadow: 0 0 0 4px rgba(var(--teal-rgb), .18); }
.order-track__label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.order-track__step.is-done .order-track__label { color: var(--ink); }

.order-detail__items { display: flex; flex-direction: column; gap: .55rem; }
.order-detail__addr { display: flex; flex-direction: column; gap: .3rem; line-height: 1.5; }

.account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.account-form .field:nth-child(4) { grid-column: 1 / -1; }
.account-form .field { margin: 0; }

@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-side { position: static; }
  .account-side__nav { flex-direction: row; flex-wrap: wrap; }
  .account-side__nav a { flex: 1; justify-content: center; }
  .account-cols, .account-form { grid-template-columns: 1fr; }
  .order-track__label { font-size: .72rem; }
}
@media (max-width: 560px) {
  .account-stats { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .order-row__items { display: none; }
}

/* ── Filtres boutique fonctionnels ──────────────────────────── */
.filter-search { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--border-input); border-radius: 10px; font-family: inherit; font-size: .9rem; background: var(--surface); }
.filter-search:focus { outline: none; border-color: var(--pink); }
.filter-check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.filter-check input { width: 17px; height: 17px; accent-color: var(--pink); }
.filters .btn { margin-top: .4rem; }
.shop__sortform { display: flex; align-items: center; gap: .5rem; }
.sort-label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.shop-empty { text-align: center; padding: 3rem 1rem; }
.shop-empty__icon { font-size: 2.6rem; margin-bottom: .6rem; }
.shop-empty h3 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: .4rem; }
.shop-empty p { color: var(--muted); margin-bottom: 1.4rem; }

/* ── Avis clients ───────────────────────────────────────────── */
.reviews__head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.reviews__avg { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }

/* Étoiles (partial views/partials/stars.ejs) — `.on` = pleine, `.half` = demie */
.stars { color: var(--star-off); letter-spacing: 1px; font-size: 1.1rem; white-space: nowrap; }
.stars .on { color: var(--yellow); }
.stars .star { position: relative; display: inline-block; }
/* Demi-étoile : on superpose une étoile jaune rognée à 50 % de largeur */
.stars .half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--yellow); }
.stars--sm { font-size: .9rem; }
.stars--xs { font-size: .78rem; letter-spacing: 0; }
.stars__value { margin-left: .35rem; }
.stars__count { margin-left: .3rem; color: var(--muted); font-size: .82em; }

/* Note compacte sur les vignettes produit */
.card__rating { display: inline-flex; align-items: center; margin: -.45rem 0 .55rem; }
.card__rating .stars__count { font-size: .72rem; }

/* Récapitulatif : moyenne + répartition par nombre d'étoiles */
.reviews__summary { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px; padding: 1.1rem 1.4rem; margin-bottom: 1.4rem; }
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 120px; }
.reviews__score-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 700; }
.reviews__score-meta { font-size: .82rem; }
.reviews__bars { list-style: none; flex: 1 1 240px; display: flex; flex-direction: column; gap: .3rem; }
.reviews__bar { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); }
.reviews__bar-label { width: 2.1rem; flex: none; text-align: right; }
.reviews__bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--border-soft); overflow: hidden; }
.reviews__bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--yellow); }
.reviews__bar-n { width: 1.6rem; flex: none; text-align: right; font-variant-numeric: tabular-nums; }

/* Badge « Achat vérifié » */
.review__verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 800; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 999px; padding: .16rem .5rem; }

.reviews__list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.review { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 1rem 1.2rem; }
.review__top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.review__top strong { font-size: .98rem; }
.review__date { color: var(--muted); font-size: .8rem; margin-left: auto; }
.review__text { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.review-form { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px; padding: 1.4rem 1.6rem; }
.review-form h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 1rem; }
.review-form .field { margin-bottom: 1rem; }
.review-form label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .4rem; }
.review-form textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border-input); border-radius: 10px; font-family: inherit; font-size: .92rem; resize: vertical; }
.star-input { display: inline-flex; flex-direction: row-reverse; }
.star-input input { display: none; }
.star-input label { font-size: 1.9rem; line-height: 1; color: var(--star-off); cursor: pointer; padding: 0 .06rem; transition: color .1s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: var(--yellow); }

/* Sélecteur de pays (checkout) */
.field-select { width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border-input); border-radius: 12px; font-family: inherit; font-size: .95rem; background: var(--surface); cursor: pointer; }
.field-select:focus { outline: none; border-color: var(--pink); }

/* Bouton favori sur la page produit */
.pdp__fav { display: inline-flex; align-items: center; gap: .45rem; background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 999px; padding: .5rem 1.1rem; font-family: inherit; font-weight: 700; font-size: .88rem; color: var(--muted); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pdp__fav:hover { border-color: var(--pink); color: var(--pink); }
.pdp__fav svg { width: 18px; height: 18px; }
.pdp__fav.is-fav { border-color: var(--pink); color: var(--pink); background: var(--pink-soft); }
.pdp__fav.is-fav svg path { fill: var(--pink); }

/* Note moyenne près du titre produit */
.pdp__rating { display: inline-flex; align-items: center; gap: .4rem; margin: .3rem 0; font-size: .95rem; }
.pdp__rating:hover { text-decoration: underline; }
/* Badge "Épuisé" sur les cartes */
.card__soldout { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(var(--ink-rgb), .85); color: var(--on-accent); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 999px; }
/* Pastille « offre » sur la vignette produit */
.card__offre { position: absolute; bottom: 12px; left: 12px; z-index: 2; background: var(--yellow); color: var(--offre-ink); font-size: .72rem; font-weight: 800; padding: .28rem .6rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
/* Ligne « offre » dans les récapitulatifs (panier, checkout, confirmation) */
.cart-summary__row--offre span { color: var(--teal); font-weight: 700; }
.cart-summary__row--offre strong { color: var(--teal); }
.cart-qte-hint { margin: 0 0 1rem; padding: .7rem .9rem; background: rgba(var(--yellow-rgb), .16); border: 1px solid rgba(var(--yellow-rgb), .5); border-radius: 12px; font-size: .86rem; font-weight: 600; color: var(--ink); text-align: center; }

/* Favori en cours d'envoi (AJAX) + petit "pop" quand on aime */
.card__fav.is-loading, .pdp__fav.is-loading { opacity: .5; pointer-events: none; }
.card__fav svg, .pdp__fav svg { transition: transform .18s ease; }
.card__fav.fav-pop svg, .pdp__fav.fav-pop svg { animation: favPop .32s ease; }
@keyframes favPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ── Guide des tailles ─────────────────────────────────────── */
.guide-wrap { max-width: 860px; }
.guide-intro { color: var(--muted); max-width: 62ch; margin-bottom: 1.8rem; }
.guide-safety { display: flex; gap: 1rem; align-items: flex-start; background: var(--pink-soft); border-radius: 16px; padding: 1.2rem 1.4rem; margin-bottom: 2rem; }
.guide-safety__icon { font-size: 1.6rem; line-height: 1; flex: none; }
.guide-safety strong { display: block; margin-bottom: .3rem; color: var(--pink); }
.guide-safety p { margin: 0; font-size: .95rem; line-height: 1.6; }
.guide-table-wrap { overflow-x: auto; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 2.6rem; }
.guide-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.guide-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 1rem 1.2rem; border-bottom: 1.5px solid var(--cream); }
.guide-table td { padding: .9rem 1.2rem; border-bottom: 1px solid var(--line-4); font-size: .95rem; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-size { display: inline-block; min-width: 46px; text-align: center; background: var(--cream); border-radius: 999px; padding: .25rem .7rem; font-weight: 800; }
.guide-cm { font-weight: 700; white-space: nowrap; }
.guide-ideal { color: var(--muted); }
.guide-h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1.2rem; }
.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 2.6rem; }
.guide-step { background: var(--surface); border-radius: 16px; padding: 1.3rem; box-shadow: var(--shadow); }
.guide-step__num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pink); color: var(--on-accent); font-weight: 800; margin-bottom: .7rem; }
.guide-step strong { display: block; margin-bottom: .3rem; }
.guide-step p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.55; }
.guide-special { background: var(--cream); border-radius: 18px; padding: 1.6rem 1.8rem; margin-bottom: 2rem; }
.guide-special h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 .5rem; }
.guide-special p { color: var(--muted); max-width: 60ch; margin-bottom: 1.1rem; }
.guide-cta { text-align: center; }
@media (max-width: 700px) { .guide-steps { grid-template-columns: 1fr; } }

/* Lien « guide des tailles » sur la fiche produit */
.pdp__guide { float: right; font-size: .82rem; font-weight: 700; color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.pdp__guide:hover { color: var(--pink-dark); }

/* Champ piège à robots (invisible pour les humains) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =============================================================
   THÈME "VIF" — vert forêt, magenta, or (les couleurs du packaging)
   -------------------------------------------------------------
   Bloc ADDITIF : il ne redéfinit QUE des tokens, jamais une règle.
   Rien ne s'applique tant que <html> ne porte pas data-theme="vif"
   (posé côté serveur, cf. lib/theme.js). Le thème « sobre » lit les
   mêmes règles avec les valeurs de :root : il reste le retour arrière.

   Trois couleurs de marque, une par temps fort :
     · vert forêt #004C38 — hero, notre histoire, pied de page
     · magenta    #C81E5F — boutons, « avec chaque achat »
     · or         #E3A23A — « comment ça marche », filets, pictos
   Plus deux teintes secondaires réservées aux accents (jamais du
   texte courant sur fond coloré) : terre cuite #B94A24, lagon #0E7A72.

   CONTRASTE — 101 paires texte/fond mesurées (luminance relative
   WCAG 2.1), bornes intermédiaires des dégradés comprises, ainsi
   que les composites des voiles et des survols. Zéro échec.
   Minimum constaté : 4.52:1 pour le texte courant (norme 4.5) et
   3.24:1 pour les gros titres, boutons et pictos (norme 3).
   Deux corrections d'accessibilité au passage :
     · l'or de marque sur le magenta ne faisait que 2.50:1 (pictos
       de « avec chaque achat ») → or éclairci dédié, 3.81:1 ;
     · le blanc à 82 % d'opacité sur le magenta tombait à 4.11:1
       (paragraphes de la même section) → blanc teinté solide, 4.52:1.

   NB : --c-pink … --c-purple ne servent QUE de pastilles décoratives
   (frise du parcours) ; elles sont donc redéclinées ici. Les dégradés
   .ph--*, les pastilles produit `.dot` (vraies couleurs des articles,
   posées en style inline) et la facture PDF restent hors thème.
   ============================================================= */
:root[data-theme="vif"] {
  /* ── Neutres RÉCHAUFFÉS ───────────────────────────────────
     Le blanc pur donnait une impression de vide, et surtout les
     cartes (--surface) se confondaient avec le fond des sections
     (--paper) : rien ne « décollait ». On creuse donc l'écart :
     le fond de page part sur un sable chaud, les sections claires
     sur un ivoire, et les cartes restent le seul vrai blanc. */
  --cream:        #FAF2E4;   /* sable chaud : fond de page, pastilles, admin */
  --cream-deep:   #F5E9D6;
  --paper:        #FFFCF5;   /* ivoire : fond des sections claires */
  --ink:          #221E19;   /* encre chaude, plus douce qu'un noir froid */
  --muted:        #6A6055;   /* gris-brun, texte secondaire */

  --pink:         #C81E5F;   /* accent principal (boutons) : magenta/framboise (packaging) */
  --pink-dark:    #A5184C;
  --pink-soft:    #FCE8F0;   /* bandeaux doux (éclairci : le magenta y passe AA) */
  --teal:         #004C38;   /* vert forêt EXACT du packaging — pied de page, blocs forts */
  --teal-deep:    #003527;
  --yellow:       #E3A23A;   /* or/moutarde (packaging) */
  --yellow-dark:  #C0821F;

  /* Teintes secondaires tirées des feuillages du packaging. Elles
     n'entrent JAMAIS en concurrence avec les trois couleurs de marque :
     elles ne servent que d'accents (pastilles, pictos, métadonnées). */
  --terra:   #B94A24;   /* terre cuite */
  --lagoon:  #0E7A72;   /* lagon, en écho au vert forêt */

  --c-pink:   #C81E5F;
  --c-lime:   #55913A;
  --c-blue:   #1C7DA0;
  --c-yellow: #E3A23A;
  --c-orange: #B94A24;   /* terre cuite (pastille de frise) */
  --c-purple: #9147A8;
  --c-black:  #221E19;
  --c-white:  #F6EFE3;

  /* Surfaces : les cartes sont le point le plus clair de la page — posées
     sur l'ivoire des sections, elles ressortent enfin sans avoir besoin
     d'une ombre plus lourde. */
  --surface:      #FFFFFF;
  --surface-alt:  #F3EADA;
  --surface-2:    #FBF6EC;
  --row-hover:    #FBF5EA;
  --row-selected: #FDEFF4;

  --border-strong: #D8D2C4;
  --border-dashed: #E1DCCF;
  --line-dash:     #E3DFD3;
  --switch-off:    #DAD4C6;
  --border-input:  #E6E0D2;
  --line:          #ECE7DA;
  --border-soft:   #EFEAE0;
  --line-2:        #F1EDE3;
  --line-3:        #F4F1E9;
  --line-4:        #F7F5EF;

  --ink-deep:         #14110D;
  --ink-soft:         #453D33;   /* paragraphes longs, accordé à l'encre chaude */
  --on-accent:        #fff;
  --on-teal:          #FFFFFF;   /* texte BLANC sur le vert foncé — seule combinaison lisible */
  --on-teal-soft:     #FFFFFF;
  --hero-title:       #FF9F45;   /* titre du hero — orange vif, lisible sur le vert foncé (ratio ~4.9) */
  --accent-ink-muted: #8C2050;
  --sidebar-link:     #4C5248;
  --soon-ink:         #5E645B;
  --offre-ink:        #4A3106;
  --star-off:         #DAD4C6;

  --accent-dark-alt:   #8C3617;
  --accent-soft-hover: #F7D8C2;
  --accent-light:      #EE9E72;
  --teal-light:        #8CB964;

  --accent-rgb:    200, 30, 95;
  --teal-rgb:      0, 76, 56;
  --yellow-rgb:    227, 162, 58;
  --cream-rgb:     250, 242, 228;
  --ink-rgb:       34, 30, 25;
  --surface-rgb:   255, 255, 255;
  --on-accent-rgb: 255, 255, 255;
  --err-rgb:       192, 57, 43;
  --shadow-rgb:    74, 46, 20;

  --scrim:       rgba(42, 33, 26, .55);
  --scrim-admin: rgba(28, 20, 12, .45);

  --ok:            #276B4E;
  --ok-bg:         #E4F2E6;
  --ok-border:     #CBE6CE;
  --ok-bg-soft:    #E2F0E8;
  --ok-deep:       #0E7058;
  --ok-bg-alt:     #DEF0E8;
  --ok-border-alt: #C4E4D4;

  --err:            #C0392B;
  --err-strong:     #A93226;
  --err-bg:         #FBE6E1;
  --err-bg-strong:  #F5CFC9;
  --err-border:     #F3CFC9;

  --warn:             #B45309;
  --warn-bg:          #FEF4E1;
  --warn-deep:        #9A6300;
  --warn-bg-soft:     #FDF3D9;
  --warn-bg-strong:   #F5E3AE;
  --warn-ink:         #8A6D1A;
  --warn-ink-strong:  #6F5713;
  --warn-ink-alt:     #7E6413;
  --warn-bg-notice:   #FFF6D9;
  --warn-border:      #F0E4B4;
  --warn-border-alt:  #E3D6B4;

  --info:         #2A6296;
  --info-bg:      #E5EEF7;
  --info-border:  #C6DCF0;
  --info-bg-soft: #E9EDF0;
  --info-ink:     #4A6572;
  --prep:         #6D4FC0;
  --prep-bg:      #EDE7FB;
  --prep-border:  #DBD0F3;

  /* ═══════════════════════════════════════════════════════════
     HABILLAGE DES SECTIONS — le rythme de la page
     ───────────────────────────────────────────────────────────
     Principe : la page alterne désormais QUATRE temps au lieu de
     trois (vert / rose / blanc), et aucun n'est un aplat mort.

       hero .............. vert forêt, éclairé en haut à gauche
       catégories ........ ivoire → sable, filet or
       produits vedettes . ivoire (cartes blanches qui décollent)
       comment ça marche . OR, texte encre  ← le bloc qui manquait
       notre histoire .... vert forêt, éclairé en diagonale
       artisans .......... ivoire
       avec chaque achat . magenta, éclairé en haut à droite
       FAQ ............... ivoire
       pied de page ...... vert forêt, assombri vers le bas

     Les dégradés sont volontairement COURTS en amplitude : ils
     donnent du volume sans jamais tirer une borne vers une valeur
     où le texte décrocherait. CHAQUE borne (y compris les stops
     intermédiaires) a été mesurée au ratio WCAG — cf. le tableau
     en tête de ce bloc de thème.

     Pas de « blobs » : les formes libres étaient rognées par les
     `overflow: hidden` des sections. Ici tout est une couche de
     fond, donc rien ne peut être coupé.
     ═══════════════════════════════════════════════════════════ */

  /* Fond de page : voile sable très légèrement dégradé, posé sur --cream. */
  --page-bg: linear-gradient(180deg, #FCF6EA 0%, #F8EFDE 100%);

  /* Filet or sous la barre de navigation et sous les catégories :
     c'est lui qui rappelle la dorure du packaging sur les zones claires. */
  --nav-rule:  rgba(227, 162, 58, .42);
  --cats-rule: rgba(227, 162, 58, .45);

  /* Blocs verts — une source de lumière par bloc, jamais la même :
     le hero est éclairé en haut à gauche (là où arrive le regard),
     l'histoire en diagonale, le pied de page s'enfonce vers le bas. */
  --hero-bg:   radial-gradient(115% 95% at 10% -5%, #0A6449 0%, #005B43 38%, #004C38 66%, #00301F 100%);
  --split-bg:  linear-gradient(150deg, #065C44 0%, #004C38 48%, #003526 100%);
  --footer-bg: linear-gradient(180deg, #004C38 0%, #003527 60%, #002E22 100%);
  --umoja-bg:  linear-gradient(140deg, #005B43 0%, #003527 100%);

  /* Bloc magenta « avec chaque achat » */
  --impact-bg: radial-gradient(120% 115% at 88% -10%, #C81E5F 0%, #B01A53 46%, #8E1140 100%);

  /* Bloc ROSE « comment ça marche ». La marque tient sur DEUX couleurs :
     vert (dominante) et rose (secondaire) — l'or reste un accent, jamais
     un aplat de section. Nuance légèrement plus claire que « avec chaque
     achat » pour que les deux blocs roses de la page ne soient pas jumeaux.
     Pastilles de numéro en VERT : les deux couleurs de marque se répondent. */
  --steps-bg:       linear-gradient(158deg, #D8256B 0%, #C81E5F 52%, #A81851 100%);
  --steps-ink:      #FFFFFF;
  --steps-ink-soft: #FBE2EC;
  --steps-eyebrow:  #F8D3AE;   /* pêche : 3,92:1 sur le rose (surtitre = gros texte) */
  --steps-num-bg:   #004C38;
  --steps-num-ink:  #FFFFFF;
  --steps-dash:     rgba(255, 255, 255, .38);

  /* Sections claires : une bande sable en haut qui fond vers l'ivoire.
     C'est ce qui remplace le blanc plat sans rien assombrir. */
  --cats-bg: linear-gradient(180deg, #FFFCF5 0%, #FAF1E1 100%);
  --shop-bg: linear-gradient(180deg, #FAF1E1 0%, #FFFCF5 340px);
  --help-bg: #FFFCF5;
  /* Bandeau « guide des tailles » : or → rose, les deux accents se parlent */
  --help-card-bg: linear-gradient(115deg, #FDE7CE 0%, #FBE0DC 48%, #F9D9E6 100%);

  /* Halo chaud diffus en haut des sections `.pad`. Alpha plafonné à .22 :
     au-delà, le magenta des surtitres passait sous 4.5:1 au pic du halo. */
  --pad-glow: inset 0 130px 90px -120px rgba(227, 162, 58, .22);
  --cat-hover-bg: #FFF3DF;

  /* Textes posés sur les aplats colorés : des blancs TEINTÉS plutôt que du
     blanc à 82 % d'opacité. Le blanc translucide sur magenta tombait à
     4.11:1 (échec AA) ; ces valeurs sont solides et mesurées. */
  --txt-on-teal-soft:  #E4EFE8;
  --txt-on-teal-dim:   #C6D8CE;
  --txt-on-teal-faint: #A9C2B6;
  --txt-on-pink-soft:  #FBE2EC;
  /* L'or de marque ne fait que 2.50:1 sur le magenta : illisible en picto.
     Version éclaircie, réservée à ce fond (3.81:1 minimum). */
  --icon-on-accent:    #F6D28A;

  /* Boutons : un dégradé très court donne du relief au bouton sans
     changer sa couleur perçue (les survols restent des aplats). */
  --btn-pink-bg:   linear-gradient(135deg, #D8256B 0%, #C81E5F 55%, #B01A53 100%);
  --btn-yellow-bg: linear-gradient(135deg, #EFB752 0%, #E3A23A 60%, #D8942A 100%);

  /* Cartes : filet chaud au repos, liseré magenta au survol. */
  --card-ring:       rgba(120, 86, 40, .14);
  --card-ring-hover: rgba(200, 30, 95, .34);
  --faq-open-shadow: var(--shadow), inset 3px 0 0 var(--pink);

  /* Où respirent les teintes secondaires */
  --meta-accent: var(--terra);    /* rôle d'artisan, en script */
  --filter-icon: var(--lagoon);   /* picto de l'encart des filtres */

  /* ── Accents de texte : ORANGE (et non plus or) ──────────────────
     Deux valeurs, parce qu'un même orange ne peut pas être lisible sur
     le vert foncé ET sur l'ivoire. Mesuré : 4,96:1 sur #004C38 et
     5,04:1 sur #FFFCF5. */
  --txt-accent-on-teal: #F2A65A;   /* surtitres/accents sur les blocs verts */
  --txt-accent:         var(--terra);  /* surtitres sur les sections claires */

  /* Haut de fiche produit en vert : le bloc d'achat (carte blanche) et la
     galerie ressortent dessus, et la page cesse d'être un grand aplat clair. */
  --pdp-bg:       linear-gradient(168deg, #065C44 0%, #004C38 45%, #003A2B 100%);
  --pdp-ink:      #FFFFFF;
  --pdp-ink-soft: #C6D8CE;
  --pdp-price:    #FFA94D;   /* orange vif « perle du collier » — 4,21:1 mini sur le vert */
}

/* ─────────────────────────────────────────────────────────────
   Blobs organiques décoratifs (formes aléatoires façon Blobmaker)
   ───────────────────────────────────────────────────────────── */
.blob, .blob-deco { position: absolute; pointer-events: none; }
.blob svg, .blob-deco svg { display: block; width: 100%; height: 100%; }
@keyframes blobFloat { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0, -12px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .blob, .blob-deco { animation: none !important; } }

/* Blobs nets éparpillés sur TOUTE la page (façon Blobmaker), derrière le contenu. */
.blob-deco { z-index: 0; opacity: .92; }
/* Dans .sec-deco, la règle `.sec-deco > :not(.deco):not(.deco-band)` (spécificité
   0,0,3,0) forcerait position:relative (→ blob étiré en pleine largeur).
   On réimpose absolute avec une spécificité au moins égale (0,0,3,0). */
.sec-deco > .blob-deco:not(.deco) { position: absolute; z-index: 0; }
@media (max-width: 760px) { .blob-deco { opacity: .82; } }

/* Blobs colorés nets derrière la photo du hero (débordent pour être bien visibles). */
.hero__pblobs { position: absolute; inset: -16% -13% -16% -13%; z-index: 1; pointer-events: none; }
.hero .hero__cutout { position: relative; z-index: 3; }
@media (max-width: 620px) { .hero__pblobs { inset: -10% -8% -10% -8%; } }