/*
 * Thème Blondeau — CSS Principal
 * Design léger, moderne, accessible WCAG 2.1 AA
 * Organisation : Design Tokens → Reset → Base → Layout → Composants → Pages → Utilitaires → Responsive
 *
 * @package Blondeau
 * @version 1.3.3 — logos des marques entiers, jamais coupés ni déformés (contain) — 2026-11-02
 * @version 1.3.2 — logos des marques : zone fixe 130 × 62, logo qui la remplit, sans vide — 2026-10-27
 * @version 1.3.1 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 1.3.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 1.2.3 — code mort retiré : .header-actions* (ancien header, DETTE-218), rendu identique — 2026-10-23
 * @version 1.2.2 — limite 70ch réservée au contenu rédactionnel (DETTE-384) — 2026-10-19
 * @version 1.2.1 — pastille de tri allégée : 36px, contour 1px, texte 0.72rem semi-gras — 2026-10-18
 * @version 1.2.0 — pastille de tri commune (.blondeau-sort) : catalogue, avis clients, tissus du calculateur — 2026-10-17
 * @version 1.1.10 — token --color-slate (barre de composition) — 2026-10-16
 * @version 1.1.9 — footer : bloc confiance sur 2 colonnes quand aucun avis n'est affichable — 2026-10-16
 * @version 1.1.8 — header : icône du compte, rebond au survol (accountJump / accountSquash) à la place de la main — 2026-10-15
 * @version 1.1.7 — header : main du compte creuse (contour, intérieur couleur du fond) — 2026-10-15
 * @version 1.1.6 — header : pose finale de la main du compte inclinée et décalée à droite — 2026-10-15
 * @version 1.1.5 — header : main du compte redessinée ; loupe de recherche animée (searchLook) — 2026-10-15
 * @version 1.1.4 — header : le personnage du compte salue au survol (accountWave) — 2026-10-15
 * @version 1.1.3 — header : le panier « arrive » au survol (cartArrive) — 2026-10-15
 * @version 1.1.2 — vignettes de la visionneuse agrandies (80 px, 64 px en mobile) — 2026-10-15
 * @version 1.1.1 — vignettes de la visionneuse : encadré doré seul — 2026-10-15
 * @version 1.1.0 — pastille X / Y commune (.blondeau-pager) et visionneuse unique (.blondeau-viewer) — 2026-10-15
 * @version 1.0.1 — code mort retiré (règles sans aucun élément ciblé, dont .hero__breadcrumb), rendu identique — 2026-10-14
 */


/* ============================================================
   1. DESIGN TOKENS — VARIABLES CSS
   ============================================================ */

:root {
  /* --- Couleurs principales --- */
  --color-primary:       #1C1F3B;
  --color-primary-dark:  #111426;
  --color-primary-light: #2A2F58;
  /* Bleu ardoise, entre le bleu marine et le grège : 4e couleur de la barre
     de composition (fiche produit, fiche tissu du calculateur — 2026-10-16) */
  --color-slate:         #6E7399;

  /* --- Couleurs accent (or) --- */
  --color-accent:        #CCA63B;
  --color-accent-dark:   #A8842C;
  --color-accent-light:  #E0C470;
  /* DETTE-91 [OK] — corrigé le 2026-08-06 : --color-accent (2.31:1) et même
     --color-accent-dark (3.50:1) échouent le seuil WCAG AA texte normal
     (4.5:1). Variante dédiée aux usages texte uniquement (prix, etc.) —
     4.55:1 sur blanc, calculé (formule WCAG relative luminance). Les usages
     décoratifs (fonds, bordures, composants non-texte, seuil 3:1) gardent
     --color-accent tel quel — pas de changement de charte graphique globale.
     DETTE-199 [OK] — corrigé le 2026-08-22 : 4.55:1 ne couvrait que le fond
     blanc pur (--color-bg) ; sur --color-bg-alt (#F8F7F5, legèrement plus
     sombre), le même token retombait à 4.25:1, sous le seuil AA. Assombri
     à teinte/saturation égales (hue ~44°, sat ~64%, lightness 34.5% → 32%)
     — 4.79:1 sur --color-bg-alt, 5.13:1 sur --color-bg blanc : les deux
     fonds passent désormais avec marge, sans changement de charte globale. */
  --color-accent-text:   #866A1E;

  /* --- Couleurs de texte --- */
  --color-text:          #1E1E1E;
  --color-text-muted:    #6B7280;
  --color-text-inverse:  #FFFFFF;

  /* --- Couleurs de fond --- */
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F8F7F5;
  --color-bg-dark:       #1C1F3B;

  /* --- Couleurs de bordure --- */
  --color-border:        #E5E1D8;
  --color-border-dark:   #C8C3BA;

  /* --- Champs de formulaire (DETTE-391, 2026-10-23) ---
     Contour : gris chaud des séparateurs foncé jusqu'au seuil 3:1 sur blanc
     (WCAG 1.4.11). Focus : contour or foncé (3,5:1) qui porte le contraste,
     halo or de charte purement décoratif. Réservés aux champs : séparateurs
     et cartes gardent --color-border. */
  --color-field-border:  #9B9489;
  --color-field-focus:   var(--color-accent-dark);
  --color-field-halo:    rgba(204, 166, 59, 0.18);

  /* --- Couleurs d'état --- */
  --color-error:         #DC2626;
  --color-success:       #16A34A;
  --color-warning:       #D97706;
  /* Focus clavier : or foncé (3,5:1 sur blanc, 4,6:1 sur marine) au lieu du
     bleu #2563EB, hors charte (DETTE-398, 2026-10-23) */
  --color-focus:         var(--color-accent-dark);
  --color-heart:         #ee0055; /* favoris — hover/actif cœur */

  /* --- Couleurs sémantiques / normes --- */
  --color-norme-m1-bg:           #fff8ec; /* fond badge résistance au feu */
  --color-norme-m1-text:         #92400e; /* texte badge résistance au feu */
  --color-norme-m1-border:       #fbbf24; /* bordure badge résistance au feu */
  /* accent résistance au feu → --color-warning (#D97706) */
  --color-norme-ok-bg:           #f0fdf4; /* fond badge tissu acoustique */
  --color-norme-ok-text:         #166534; /* texte badge tissu acoustique */
  --color-norme-ok-border:       #86efac; /* bordure badge tissu acoustique */
  /* accent acoustique → --color-success (#16A34A) */

  /* --- Overlay / lightbox --- */
  --color-overlay:               rgba(8, 8, 10, 0.95);    /* fond lightbox */
  --color-overlay-controls:      rgba(255, 255, 255, 0.10); /* boutons nav lightbox */
  --color-overlay-controls-bd:   rgba(255, 255, 255, 0.25); /* bordure boutons lightbox */
  --color-overlay-controls-hvr:  rgba(255, 255, 255, 0.22); /* hover boutons lightbox */
  --color-overlay-text-muted:    rgba(255, 255, 255, 0.55); /* compteur lightbox */
  --color-bg-translucent:        rgba(255, 255, 255, 0.90); /* bg semi-transparent (zoom) */

  /* --- Typographie --- */
  --font-family-base:    'Montserrat', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: 'Montserrat', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:    "Courier New", Courier, monospace;

  /* Tailles de police — échelle modérée */
  --font-size-xs:    0.75rem;   /* 12px */
  --font-size-sm:    0.875rem;  /* 14px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-md:    1.125rem;  /* 18px */
  --font-size-lg:    1.25rem;   /* 20px */
  --font-size-xl:    1.5rem;    /* 24px */
  --font-size-2xl:   1.875rem;  /* 30px */
  --font-size-3xl:   2.25rem;   /* 36px */
  --font-size-4xl:   3rem;      /* 48px */
  --font-size-5xl:   3.75rem;   /* 60px */

  /* Poids de police */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Hauteurs de ligne */
  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-base:   1.6;
  --line-height-loose:  1.75;

  /* --- Espacement — échelle de 4px --- */
  --space-1:   0.25rem;  /* 4px */
  --space-2:   0.5rem;   /* 8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* --- Rayons de bordure --- */
  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:       0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-dropdown: 0 4px 16px rgb(0 0 0 / 0.10); /* dropdown variant picker */

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-index scale --- */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* --- Conteneurs --- */
  --container-max:     1440px;
  --container-narrow:  800px;
  --container-wide:    1600px;
  --container-px:      2rem;
  --container-padding: var(--container-px); /* alias */

  /* --- Header --- */
  --header-topbar-height:   68px;
  --header-nav-height:      52px;
  --header-accent-height:   3px;
  --header-total-height:    calc(var(--header-topbar-height) + var(--header-nav-height) + var(--header-accent-height));
  --header-scrolled-topbar: 46px;
  --header-height:          var(--header-total-height); /* alias rétrocompat */

  /* --- Transitions nommées --- */
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}


/* ============================================================
   2. RESET CSS MODERNE
   ============================================================ */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  /* BUG-190 [OK] — corrigé le 2026-08-14 : les panneaux .mega-menu restent en
   * position:absolute hors-écran quand masqués (display:block !important
   * volontaire pour l'animation), ce qui élargissait le scroll horizontal
   * de toute la page en dessous de ~1024px. Clippé ici sans impact visuel.
   * BUG-191 [OK] — corrigé le 2026-08-14 : `overflow-x: hidden` forçait
   * `overflow-y` à passer de `visible` à `auto` (règle CSS Overflow §3.9
   * dès qu'un axe n'est pas `visible`), transformant html/body en conteneur
   * de scroll explicite et cassant position:sticky du header (#site-header
   * ne s'accrochait plus, restait scrollé hors écran). `overflow-x: clip`
   * bloque le débordement horizontal sans déclencher cette promotion. */
  overflow-x: clip;
}

/* Désactiver le scroll smooth si l'utilisateur préfère moins d'animations */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Titres ancrés du contenu (ancres HTML posées dans l'éditeur) : compenser
   le header sticky lors des sauts d'ancre — liens du mega menu Guide d'achat
   et liens internes. Restreint aux titres pour ne pas écraser les offsets
   spécifiques du calculateur (.blc-step, calculator.css). */
/* Focus jamais masqué par le header collant (WCAG 2.4.11, AA — 2026-10-01) :
   au défilement provoqué par le focus clavier (Tab / Maj+Tab), le navigateur
   réserve en haut de fenêtre la hauteur RÉELLE du header (--blc-sticky-offset,
   mesurée par initStickyHeader() dans main.js) + 16px. Sans cela, en
   remontant au clavier, les éléments s'arrêtaient sous le header.
   Pages calculateur : + barre d'étapes collante (48px), cf. calculator.css. */
html {
  scroll-padding-top: calc(var(--blc-sticky-offset, var(--header-total-height, 123px)) + 16px);
}

.site-main :is(h1, h2, h3, h4, h5, h6)[id] {
  /* Le header est déjà compensé par scroll-padding-top (html, ci-dessus) :
     seul l'écart visuel restant est ajouté ici (16 + 4 = 20px, comme avant). */
  scroll-margin-top: 4px;
}

body {
  min-height: 100vh;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* BUG-190/191 [OK] — voir html{overflow-x:clip} ci-dessus : nécessaire
   * aussi sur body pour bloquer le scroll horizontal programmatique/tactile,
   * avec `clip` (et non `hidden`) pour ne pas casser position:sticky. */
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ol,
ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

table {
  border-collapse: collapse;
}

/* Améliore la lisibilité des textes longs — contenu rédactionnel seulement
   (DETTE-384, 2026-10-19) : textes des pages et articles (.entry-content),
   jamais les éléments d'interface (compte, panier, WooCommerce, calculateur).
   :where() = spécificité nulle, comme l'ancienne règle p, li, figcaption :
   toute règle de composant qui fixe sa largeur garde la main. */
:where(.entry-content :is(p, li, figcaption):not(.woocommerce *, [class*="wp-block-woocommerce"] *)) {
  max-width: 70ch;
}

/* Pages légales (CGV, mentions légales, politique de confidentialité) :
   contenu pleine largeur voulu (texte réglementaire consulté en
   diagonale, pas en lecture continue) — pas de limite de longueur de
   ligne comme sur le reste du site. */
.entry-content--legal p,
.entry-content--legal li,
.entry-content--legal figcaption {
  max-width: none;
}


/* ============================================================
   3. BASE & TYPOGRAPHIE
   ============================================================ */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-base);
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

/* --- Paragraphes et texte courant --- */
p {
  margin-bottom: var(--space-4);
  line-height: var(--line-height-base);
}

p:last-child {
  margin-bottom: 0;
}

/* --- Liens --- */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* --- Listes --- */
.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.entry-content ul li,
.entry-content ol li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-base);
}

/* --- Blockquote --- */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-muted);
}

blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* --- Code --- */
code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono);
}

code {
  font-size: 0.9em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-primary);
}

pre {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: var(--font-size-sm);
}

/* --- Séparateur horizontal --- */
hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* --- Images dans le contenu --- */
.entry-content img {
  height: auto;
  border-radius: var(--radius-md);
}

figure {
  margin: var(--space-8) 0;
}

figcaption {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  font-style: italic;
}

/* --- Texte sélectionné --- */
::selection {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}


/* ============================================================
   4. LAYOUT — CONTENEURS ET GRILLES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.container--wide {
  max-width: var(--container-wide);
}

/* Grilles utilitaires */
.grid {
  display: grid;
  gap: var(--space-6);
}

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }


/* ============================================================
   5. SKIP LINK (ACCESSIBILITÉ)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: var(--color-text-inverse) !important;
  text-decoration: none !important;
  font-weight: var(--font-weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}


/* ============================================================
   6. EN-TÊTE DU SITE
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

/* IMPORTANT : ne pas forcer de hauteur sur les containers du header — chaque zone gère sa propre hauteur */

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
}

/* --- Branding : logo + titre --- */
.site-branding {
  flex-shrink: 0;
}

.site-branding__logo img {
  max-height: 60px;
  width: auto;
}

.site-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
  line-height: 1;
}

.site-title a {
  color: inherit;
  text-decoration: none;
}

.site-title a:hover {
  color: var(--color-accent);
}

.site-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.2;
}

/* --- Zone droite du header --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  justify-content: flex-end;
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ============================================================
   7. NAVIGATION PRINCIPALE
   ============================================================ */

.nav-primary {
  display: flex;
  align-items: center;
}

.nav-primary__list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-primary__item {
  position: relative;
}

.nav-primary__link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
  white-space: nowrap;
}

.nav-primary__link:hover,
.nav-primary__item.current-menu-item > .nav-primary__link,
.nav-primary__item.current-menu-ancestor > .nav-primary__link {
  color: var(--color-primary);
  background-color: var(--color-bg-alt);
}

.nav-primary__item.current-menu-item > .nav-primary__link {
  /* --color-accent-text (et non --color-accent, 2.04:1 sur le dégradé du
     menu) : 4.53:1 au point le plus foncé du dégradé — WCAG 1.4.3,
     2026-10-01. Le soulignement or (::after) reste décoratif en --color-accent. */
  color: var(--color-accent-text);
  font-weight: var(--font-weight-semibold);
}

/* --- Sous-menus desktop --- */
.sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 220px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  list-style: none;
  margin: 0;
}

.sub-menu.is-open,
.nav-primary__item:hover > .sub-menu {
  display: block;
}

/* Accessibilité : éviter que le sous-menu soit visible mais invisible */
.sub-menu[aria-hidden="true"] {
  display: none;
}

.sub-menu[aria-hidden="false"] {
  display: block;
}

/* --- Bouton hamburger mobile --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-colors);
}

.nav-toggle:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-dark);
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animation hamburger → croix */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   8. CONTENU PRINCIPAL
   ============================================================ */

#main-content {
  min-height: calc(100vh - var(--header-height) - 200px);
  outline: none;
}

.site-content {
  display: grid;
  gap: var(--space-10);
  padding: 20px 0;
}

.site-content--with-sidebar {
  grid-template-columns: 1fr 300px;
}

.site-content--full {
  grid-template-columns: 1fr;
}

/* Sans min-width:0, un enfant direct d'une grille CSS ne peut jamais
   descendre sous la taille min-content de son propre contenu ("grid
   blowout") — repéré sur mobile (390px) via .fav-page__header : ses 3
   enfants flex (titre + 2 boutons de partage) ne pouvaient pas passer
   à la ligne car .content-area s'élargissait plutôt que de contraindre
   sa largeur à celle de .site-content, poussant toute la page en scroll
   horizontal. Correctif générique au niveau de la grille plutôt qu'un
   correctif ponctuel sur .fav-page__header, qui n'aurait pas suffi
   (le débordement se produit une grille au-dessus, pas dans l'en-tête
   lui-même). */
.content-area {
  min-width: 0;
}

/* --- En-tête de page/archive --- */
.page-header,
.archive-header {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.page-title,
.archive-title {
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.archive-description {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* --- Contenu d'article/page --- */
.entry {
  background: var(--color-bg);
}

.entry-header {
  margin-bottom: var(--space-6);
}

.entry-title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-snug);
}

.entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.entry-title a:hover {
  color: var(--color-accent);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.entry-meta a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

.entry-meta a:hover {
  color: var(--color-primary);
}

.entry-meta__separator {
  color: var(--color-border-dark);
}

/* --- Image à la une --- */
.entry-thumbnail {
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry-thumbnail__image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.entry--card .entry-thumbnail__image:hover {
  transform: scale(1.03);
}

/* --- Carte d'article dans les listes --- */
.entry--card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.entry--card:hover {
  box-shadow: var(--shadow-lg);
}

.entry--card .entry-body {
  padding: var(--space-6);
}

.entry-category {
  margin-bottom: var(--space-3);
}

/* --- Contenu richtext --- */
.entry-content {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.entry-content > * + * {
  margin-top: var(--space-4);
}

.entry-content h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.entry-content h3 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.entry-content h4 {
  font-size: var(--font-size-base);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.entry-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --- Grille de posts --- */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
}


/* ============================================================
   9. SIDEBAR
   ============================================================ */

.site-sidebar {
  min-width: 0;
}

.widget {
  margin-bottom: var(--space-8);
}

.widget:last-child {
  margin-bottom: 0;
}

.widget-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-accent);
}

.widget ul {
  list-style: none;
}

.widget ul li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.widget ul li a:hover {
  color: var(--color-primary);
}


/* ============================================================
   10. PIED DE PAGE
   ============================================================ */

.site-footer {
  background: var(--color-bg);
  color: var(--color-text);
  margin-top: auto;
}

/* --- Bas du footer : navigation + copyright (legacy fallback) --- */
.footer-bottom {
  background: var(--color-bg-alt);
  border-top: 2px solid var(--color-accent);
  padding: var(--space-5) 0;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.footer-bottom__copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}

.footer-bottom__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom__nav li a {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom__nav li a:hover {
  color: var(--color-primary);
}

/* Copyright (alias rétrocompat) */
.footer-bottom__copyright p {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.footer-site-name {
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom__credit {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
}

.footer-bottom__credit a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
}


/* ============================================================
   11. COMPOSANTS
   ============================================================ */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  /* Cibles tactiles minimum 44x44px (WCAG 2.5.8) */
  min-height: 44px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.btn--secondary {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.btn--secondary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-primary);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.btn--small {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-md);
  min-height: 52px;
}

/* ============================================================
   SELECTS — Style global cohérent avec les boutons
   ============================================================ */

select {
  border: 1px solid var(--color-field-border);
  border-radius: 0; /* coins carrés — cohérence avec les boutons */
  background: var(--color-bg, #fff);
  color: var(--color-text, #333);
  cursor: pointer;
  padding: 0.45rem 0.75rem;
  /* font: inherit est déjà appliqué par le reset global au-dessus */
  transition: border-color 0.2s ease, color 0.2s ease;
}

select:hover {
  border-color: var(--color-primary, #1C1F3B);
  color: var(--color-primary, #1C1F3B);
}

select:focus {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

/* ============================================================
   BOUTONS — Effets premium (shimmer, ripple, magnétique)
   ============================================================ */

/* Shimmer : liseré lumineux qui traverse le bouton au hover */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.btn:hover::before {
  opacity: 1;
  animation: btnShimmer 0.55s ease forwards;
}

@keyframes btnShimmer {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%;  opacity: 0; }
}

/* Ripple : cercle qui s'étend depuis le point de clic */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: btnRipple 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

@keyframes btnRipple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0; }
}

/* Variante outline : ripple en couleur primaire */
.btn--outline .btn-ripple {
  background: rgba(26, 43, 76, 0.08);
}

/* Variante ghost */
.btn--ghost .btn-ripple {
  background: rgba(26, 43, 76, 0.06);
}

/* Magnétique : transition douce de retour */
.btn--magnetic {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Améliorations hover sur btn--primary */
.btn--primary {
  box-shadow: 0 2px 8px rgba(26, 43, 76, 0.18);
}

.btn--primary:hover {
  box-shadow: 0 6px 20px rgba(26, 43, 76, 0.28);
}

.btn--primary:active {
  box-shadow: 0 2px 8px rgba(26, 43, 76, 0.18);
}

/* Améliorations hover sur btn--secondary */
.btn--secondary {
  box-shadow: 0 2px 8px rgba(204, 166, 59, 0.2);
}

.btn--secondary:hover {
  box-shadow: 0 6px 20px rgba(204, 166, 59, 0.35);
}

/* Améliorations hover sur btn--outline */
.btn--outline:hover {
  box-shadow: 0 4px 14px rgba(26, 43, 76, 0.15);
}


/* ============================================================
   TRANSITIONS DE PAGES
   Première visite : animation cinématique (fade + lift)
   Navigation interne : fade rapide
   ============================================================ */

/* Première visite */
/* fill "backwards" (et non "both") : le transform de fin d'animation ne doit
 * pas persister sur #page une fois terminée — un transform (même identité,
 * translateY(0)) crée un nouveau référentiel de positionnement pour tous
 * les descendants en position:fixed (.blc-sticky-bar, .back-to-top, bandeau
 * RGPD...), qui ne sont alors plus fixés à la fenêtre mais à #page — lequel
 * défile normalement. Ce référentiel décalé produisait des positions fausses
 * dès que la page avait scrollé, avec ou sans JS de repositionnement. */
.page-first #page {
  animation: pageEnterFirst 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Navigation interne (retour ou clic de lien) */
.page-return #page {
  animation: pageEnterReturn 0.28s ease both;
}

/* Sortie : page qui disparaît avant navigation */
.page-exiting #page {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

@keyframes pageEnterFirst {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pageEnterReturn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Pas de transition avec prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .page-first #page,
  .page-return #page {
    animation: none;
  }
  .page-exiting #page {
    transition: none;
  }
}


/* ============================================================
   EXIT INTENT MODAL
   ============================================================ */

.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.exit-modal[hidden] {
  display: none;
}

/* Backdrop — verre dépoli subtil, non agressif */
.exit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.exit-modal.is-open .exit-modal__backdrop {
  opacity: 1;
}

/* Boîte — entrée douce sans scale */
.exit-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-bg, #fff);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-10) var(--space-10);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  /* Liseré or 1 px (rgba 204,166,59 / 14 %) retiré le 2026-10-03 : sur fond
     blanc il se lisait comme un filet blanc autour de la photo (demande atelier). */
  transform: translateY(22px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.45s ease;
}

.exit-modal.is-open .exit-modal__box {
  transform: translateY(0);
  opacity: 1;
}

/* Bouton fermer — pas de fond par défaut, juste l'icône */
.exit-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #6B7280);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.exit-modal__close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}

/* Icône — palette or, cohérente avec le thème */
.exit-modal__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(204, 166, 59, 0.08), rgba(204, 166, 59, 0.16));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin: 0 auto var(--space-6);
}

/* Titre */
.exit-modal__title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin-bottom: var(--space-3);
}

/* Texte */
.exit-modal__text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

/* Actions — alignées bas-droite, cohérent avec toutes les modales du site */
.exit-modal__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.exit-modal__cta {
  justify-content: center;
}

.exit-modal__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--space-1) var(--space-2);
  transition: color var(--transition-fast);
}

.exit-modal__dismiss:hover {
  color: var(--color-primary, #1C1F3B);
}

@media (prefers-reduced-motion: reduce) {
  .exit-modal__backdrop,
  .exit-modal__box {
    transition: none;
  }
}


/* ============================================================
   FAVORITES LOGIN MODAL (9.3)
   ============================================================ */

.fav-login-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.fav-login-modal[hidden] {
  display: none;
}

.fav-login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fav-login-modal.is-open .fav-login-modal__backdrop {
  opacity: 1;
}

.fav-login-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-bg, #fff);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-10) var(--space-8);
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  /* Liseré or 1 px (rgba 204,166,59 / 14 %) retiré le 2026-10-03 : sur fond
     blanc il se lisait comme un filet blanc autour de la photo (demande atelier). */
  transform: translateY(22px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   0.45s ease;
}

.fav-login-modal.is-open .fav-login-modal__box {
  transform: translateY(0);
  opacity: 1;
}

.fav-login-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #6B7280);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fav-login-modal__close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}

.fav-login-modal__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(238, 0, 85, 0.08), rgba(238, 0, 85, 0.16));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-heart);
  margin: 0 auto var(--space-5);
}

.fav-login-modal__title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin-bottom: var(--space-2);
}

.fav-login-modal__text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

/* Formulaire connexion WP */
.fav-login-modal__form {
  text-align: left;
  margin-bottom: var(--space-4);
}

.fav-login-modal__form .login-username,
.fav-login-modal__form .login-password {
  margin-bottom: var(--space-4);
}

.fav-login-modal__form label {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-primary, #1C1F3B);
  margin-bottom: var(--space-1);
}

.fav-login-modal__form input[type="text"],
.fav-login-modal__form input[type="password"] {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-field-border);
  border-radius: 8px;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-primary, #1C1F3B);
  background: var(--color-bg, #fff);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.fav-login-modal__form input[type="text"]:focus,
.fav-login-modal__form input[type="password"]:focus {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.fav-login-modal__form .login-submit {
  margin-top: var(--space-5);
}

.fav-login-modal__form input[type="submit"] {
  width: 100%;
  padding: 11px 20px;
  background: var(--color-primary, #1C1F3B);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.fav-login-modal__form input[type="submit"]:hover {
  background: var(--color-primary-dark, #0F1C38);
}

/* Lien inscription */
.fav-login-modal__register {
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #6B7280);
  text-align: center;
  margin: 0;
}

.fav-login-modal__register a {
  /* Or de texte (≥ 4,5:1 sur blanc) — l'or de charte est décoratif (BUG-386) */
  color: var(--color-accent-text, #866A1E);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fav-login-modal__backdrop,
  .fav-login-modal__box {
    transition: none;
  }
}


/* ============================================================
   FAVORITES DROPDOWN HEADER (9.4)
   ============================================================ */

.header-favorites-wrapper {
  position: relative;
}

/* Badge compteur générique — géométrie et police communes au panier, au compte
   et aux favoris (DETTE-201, source unique pour éviter toute divergence future). */
.header-action__count,
.header-account-badge,
.header-favorites-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  color: #fff;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Badge favoris — seuls la couleur (rouge cœur) et le comportement d'apparition
   sont personnalisés, la géométrie reste celle du badge générique ci-dessus */
.header-favorites-badge {
  /* Chiffre blanc sur --color-heart (#EE0055) = 4.41:1, sous le seuil AA de
     4.5:1 pour ce texte de 9.6px : teinte légèrement plus soutenue réservée
     à la pastille (5.09:1). Le cœur garde --color-heart. WCAG 1.4.3, 2026-10-01. */
  background: #DB004E;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Visible après toggle favori */
.header-favorites-badge.is-visible {
  opacity: 1;
}

/* Pas d'animation au chargement initial (même pattern que is-init des cœurs) */
.header-favorites-badge.is-init {
  transition: none;
}

/* Badge compte (Phase 11.7) — même palette dorée foncée que le badge panier */
.header-account-badge {
  /* --color-accent-text (5.13:1 avec le chiffre blanc) au lieu de
     --color-accent-dark (3.50:1) — WCAG 1.4.3, 2026-10-01 */
  background: var(--color-accent-text);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.header-account-badge.is-visible {
  opacity: 1;
}

.header-account-badge.is-init {
  transition: none;
}

/* Dropdown */
.favorites-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: -12px;
  width: 320px;
  background: var(--color-bg, #fff);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.12),
    0 2px 8px rgba(15, 28, 53, 0.06);
  border: 1px solid rgba(229, 225, 216, 0.8);
  z-index: 9000;
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.favorites-dropdown[hidden] {
  display: none;
}

.favorites-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Petite flèche décorative */
.favorites-dropdown__arrow {
  position: absolute;
  top: -7px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: var(--color-bg, #fff);
  border-left: 1px solid rgba(229, 225, 216, 0.8);
  border-top: 1px solid rgba(229, 225, 216, 0.8);
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}

/* Bandeau titre : même gabarit que .account-dropdown__greeting-row
   (dropdown compte) — pastille navy/or + libellé, filet séparateur */
.favorites-dropdown__title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border, #E5E1D8);
}

.favorites-dropdown__title-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary, #1C1F3B);
  color: var(--color-accent, #CCA63B);
}

.favorites-dropdown__title-text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary, #1C1F3B);
}

.favorites-dropdown__count {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted, #6B7280);
}

/* Spinner */
.favorites-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  color: var(--color-accent);
}

.favorites-dropdown__loading[hidden] {
  display: none;
}

.fav-spinner {
  transform-origin: center;
  animation: fav-spin 0.9s linear infinite;
}

@keyframes fav-spin {
  from { stroke-dasharray: 1, 60; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 42, 60; stroke-dashoffset: -16; }
  to   { stroke-dasharray: 42, 60; stroke-dashoffset: -58; }
}

/* Liste */
.favorites-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}

.favorites-dropdown__list[hidden] {
  display: none;
}

.favorites-dropdown__item + .favorites-dropdown__item {
  margin-top: 0.25rem;
}

/* Lien englobant toute la ligne (image + infos) — même gabarit que
   .account-dropdown__links a : la carte porte le padding uniforme
   (var(--space-5), cf. .favorites-dropdown), le lien n'ajoute que son
   propre padding interne, sans marge négative — le survol s'aligne donc
   exactement sur les mêmes bords que le bandeau titre au-dessus. */
.favorites-dropdown__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.favorites-dropdown__link:hover {
  background: var(--color-bg-alt, #f5f5f3);
}

.favorites-dropdown__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-bg-alt, #f5f5f3);
}

.favorites-dropdown__info {
  flex: 1;
  min-width: 0;
}

.favorites-dropdown__name {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-primary, #1C1F3B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 2px;
}

.favorites-dropdown__link:hover .favorites-dropdown__name {
  color: var(--color-accent, #CCA63B);
}

.favorites-dropdown__sku {
  display: block;
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.favorites-dropdown__price {
  display: block;
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-accent, #CCA63B);
}

.favorites-dropdown__price del {
  font-size: 0.85em;
  opacity: 0.6;
}

.favorites-dropdown__price ins {
  text-decoration: none;
}

/* État vide */
.favorites-dropdown__empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  margin: 0;
}

.favorites-dropdown__empty[hidden] {
  display: none;
}

/* Repère "+ N autres favoris" au-delà des previewCount affichés */
.favorites-dropdown__more {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #6B7280);
}

.favorites-dropdown__more[hidden] {
  display: none;
}

/* Séparateur pleine largeur — même gabarit que .account-dropdown__links-sep */
.favorites-dropdown__cta-wrap {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #E5E1D8);
}

/* CTA en ligne de nav (icône + texte), même gabarit que
   .account-dropdown__logout (qui hérite de .account-dropdown__links a) —
   plus un bouton doré centré à part */
.favorites-dropdown__cta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text-muted, #6B7280);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.favorites-dropdown__cta svg {
  flex-shrink: 0;
  color: var(--color-text-muted, #6B7280);
  transition: color var(--transition-fast);
}

.favorites-dropdown__cta:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}

.favorites-dropdown__cta:hover svg {
  color: var(--color-primary, #1C1F3B);
}

@media (prefers-reduced-motion: reduce) {
  .favorites-dropdown {
    transition: none;
  }
  .fav-spinner {
    animation: none;
  }
}


/* ============================================================
   SELECT BLONDEAU-TEXTILE — Cohérence avec le thème
   ============================================================ */

.blondeau-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-bg, #fff) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A2B4C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  padding: 8px 36px 8px 14px !important;
  font-size: var(--font-size-sm, 0.875rem) !important;
  font-family: var(--font-family-body, inherit) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  color: var(--color-primary, #1C1F3B) !important;
  border: 1.5px solid var(--color-field-border) !important;
  border-radius: var(--radius-md, 6px) !important;
  cursor: pointer;
  min-height: 40px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.blondeau-sort-select:hover {
  border-color: var(--color-primary, #1C1F3B) !important;
}

.blondeau-sort-select:focus {
  outline: none !important;
  border-color: var(--color-field-focus) !important;
  box-shadow: 0 0 0 3px var(--color-field-halo) !important;
}

.blondeau-catalog-toolbar__count {
  font-size: var(--font-size-sm, 0.875rem) !important;
  color: var(--color-text-muted, #6B7280) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
}


/* --- Formulaires --- */
.form-field {
  margin-bottom: var(--space-5);
}

label,
.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Hauteur minimum pour cibles tactiles */
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}

/* Survol : marine (le gris clair d'avant était plus pâle que le contour au repos) */
input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
  outline: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-error);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* --- Cartes --- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-6);
}

.card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.badge--category {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.badge--sale {
  background: var(--color-error);
  color: white;
}

.badge--new {
  background: var(--color-accent);
  color: var(--color-primary);
}

.badge--featured {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* --- Fil d'Ariane --- */
.breadcrumb {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.1em;
  transition: color var(--transition-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-primary);
}

.breadcrumb__separator {
  margin: 0 var(--space-2);
  color: var(--color-border-dark);
}

/* --- Fil d'Ariane unifié ---
   Référence unique pour TOUTES les pages :
   blondeau_render_breadcrumb(), blondeau_catalog_breadcrumb(), WooCommerce.
   Espacement interne (.padding) → identique avec ou sans hero au-dessus. */

.blondeau-breadcrumb {
  padding: var(--space-5) 0 6px 0;
  margin: 0;
  font-size: var(--font-size-sm, 0.8rem);
}

/* Quand un hero de page est présent, le titre WordPress est redondant.
   On masque .entry-header en entier (pas juste .entry-title) : sinon son
   margin-bottom (--space-6) reste dans le flux et crée un espace fantôme
   avant le contenu qui suit — visible notamment sur le breadcrumb du
   catalogue, rendu à l'intérieur de .entry-content. */
body:has(.hero--page) .entry-header {
  display: none;
}

.blondeau-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0 !important; /* .entry-content ol { padding-left } à spécificité plus haute */
  margin: 0 !important;
  color: var(--color-text-muted);
}

.blondeau-breadcrumb__item {
  display: flex;
  align-items: center;
}

/* Séparateur > entre chaque item */
.blondeau-breadcrumb__item + .blondeau-breadcrumb__item::before {
  content: ">";
  margin: 0 0.4em;
  color: var(--color-border-dark);
  font-size: 0.7em;
  line-height: 1;
}

.blondeau-breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blondeau-breadcrumb__item a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Dernier item = page courante : gras, non-cliquable */
.blondeau-breadcrumb__item:last-child,
.blondeau-breadcrumb__item--active {
  font-weight: 600;
  pointer-events: none;
  color: var(--color-text);
}

.blondeau-breadcrumb__item:last-child a,
.blondeau-breadcrumb__item:last-child span,
.blondeau-breadcrumb__item--active a,
.blondeau-breadcrumb__item--active span {
  color: var(--color-text);
  pointer-events: none;
}

/* --- Pagination accessible --- */
.pagination,
.navigation {
  margin: var(--space-10) 0;
}

.pagination .nav-links,
.navigation .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-colors);
}

.page-numbers:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-dark);
  color: var(--color-primary);
}

.page-numbers.current {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
}

/* --- Navigation inter-articles --- */
.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: var(--space-10) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.post-navigation a:hover {
  background: var(--color-border);
}

.post-navigation__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.post-navigation__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

/* --- Formulaire de recherche --- */
.search-form__inner {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--color-field-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-form__inner:focus-within {
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

.search-form__input {
  flex: 1;
  border: none;
  border-radius: 0;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
}

.search-form__input:focus {
  box-shadow: none;
  outline: none;
}

.search-form__submit {
  border-radius: 0;
  flex-shrink: 0;
  min-height: 44px;
}

/* --- Bouton retour en haut ---
   L'apparition/disparition est gérée via .is-visible (jamais via [hidden]).
   opacity + visibility + transform permettent une transition fluide (pas de display:none). */
.back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  /* État initial : invisible et décalé vers le bas */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-base),
    background-color var(--transition-fast);
}

/* État visible — ajouté par JS */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Quand visible ET hover : décalage depuis la position finale */
.back-to-top.is-visible:hover {
  transform: translateY(-4px);
}

/* Supprimé en mobile (≤768px, même seuil que le header mobile) — décision
   atelier du 2026-10-01 : le bouton flottant masquait du contenu (valeurs des
   caractéristiques produit, boutons « Infos » des cartes tissu, mention de
   copyright en bas de page) et pouvait cacher l'élément focalisé (WCAG
   2.4.11) ; le geste natif du navigateur remplit déjà ce rôle sur mobile.
   display:none le retire aussi de la tabulation et des lecteurs d'écran. */
@media (max-width: 768px) {
  .back-to-top {
    display: none;
  }
}

/* Sections de la homepage */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.section-header__title {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.section-header__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* --- Page 404 --- */
.error-404-section {
  padding: var(--space-20) 0;
}

.error-404 {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.error-404__code {
  font-size: 8rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-4);
  letter-spacing: -0.05em;
}

.error-404__title {
  font-size: var(--font-size-3xl);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.error-404__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  max-width: none;
}

.error-404__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.error-404__search {
  margin-bottom: var(--space-8);
}

.error-404__search p {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-width: none;
}

.error-404__suggestions {
  text-align: left;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.error-404__suggestions-title {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}

.error-404__suggestions-list {
  list-style: disc;
  padding-left: var(--space-6);
}

.error-404__suggestions-list li {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.error-404__suggestions-list a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --- Résultats de recherche --- */
.search-header {
  margin-bottom: var(--space-8);
}

.search-title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
}

.search-term {
  color: var(--color-accent);
}

.search-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* BUG-269 [OK] — corrigé le 2026-09-18 : sélecteur générique `.search-no-results`
 * collisionnait avec la classe de même nom que WordPress ajoute nativement sur
 * <body> quand une recherche ne retourne aucun résultat (body_class() core,
 * pas une classe du thème) — le padding de 64px (var(--space-16)) s'appliquait
 * donc aussi au <body> lui-même, décalant toute la page (bande blanche
 * au-dessus du header). Scopé à `div.search-no-results` (le wrapper réel dans
 * search.php) pour ne plus matcher <body>. */
div.search-no-results {
  text-align: center;
  padding: var(--space-16) 0;
}

.search-no-results__message {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: none;
}

.search-no-results__form {
  max-width: 480px;
  margin: 0 auto var(--space-6);
}

.search-no-results__links {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Aucun résultat --- */
.no-results {
  text-align: center;
  padding: var(--space-16) 0;
}

.no-results__icon {
  margin-bottom: var(--space-6);
  color: var(--color-border-dark);
}

.no-results__icon svg {
  margin: 0 auto;
}

.no-results__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
}

.no-results__content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.no-results__links {
  margin-top: var(--space-6);
}


/* ============================================================
   13. UTILITAIRES
   ============================================================ */

/* --- Texte pour lecteurs d'écran uniquement --- */
.sr-only,
.screen-reader-text,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Version focusable (pour les skip links) */
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --- Alignements --- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.align-left   { float: left; margin-right: var(--space-6); margin-bottom: var(--space-4); }
.align-right  { float: right; margin-left: var(--space-6); margin-bottom: var(--space-4); }
.align-center { display: block; margin-left: auto; margin-right: auto; }

/* --- Espacement --- */
.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-8  { margin-bottom: var(--space-8); }
.pt-0  { padding-top: 0; }
.pt-8  { padding-top: var(--space-8); }
.pb-0  { padding-bottom: 0; }
.pb-8  { padding-bottom: var(--space-8); }

/* --- Couleurs de texte utilitaires --- */
.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-error   { color: var(--color-error); }
.text-success { color: var(--color-success); }

/* --- Affichage --- */
.hidden         { display: none; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ============================================================
   14. RESPONSIVE — MOBILE FIRST (breakpoints progressifs)
   ============================================================ */

/* --- 480px et moins : petits mobiles --- */
@media (max-width: 480px) {
  :root {
    --container-padding: var(--container-px);
    --container-px:      1rem;
  }

  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }

  .footer-widgets__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }
}

/* --- Très petits mobiles : iPhone SE (375px) et Galaxy Fold (344px) --- */
@media (max-width: 374px) {
  /* Icônes encore plus petites pour éviter tout débordement */
  .header-action {
    min-width: 30px;
    height: 30px;
  }

  .header-topbar__actions {
    gap: 0;
  }

  /* Badge FF minimaliste sur très petit écran */
  .header-topbar__badge .badge-full {
    height: 26px;
  }

  /* Réduire le burger pour laisser de la place à la recherche */
  .nav-toggle--topbar {
    width: 30px;
    height: 30px;
    padding: 4px;
  }
}

/* --- 768px et moins : tablette portrait / mobile --- */
@media (max-width: 768px) {

  /* Burger nav bar : masqué sur mobile (remplacé par nav-toggle--topbar) */
  .nav-toggle:not(.nav-toggle--topbar) {
    display: none;
  }

  /* Burger topbar : affiché sur mobile, aligné avec le champ de recherche */
  .nav-toggle--topbar {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: calc(var(--z-overlay) + 10);
    width: 36px;
    height: 36px;
    padding: 6px;
    transition: width var(--transition-base), height var(--transition-base), padding var(--transition-base);
  }

  /* Barre de navigation : masquée visuellement — le panel fixed reste accessible */
  .site-navigation {
    height: 0 !important;
    min-height: 0 !important;
    border-top: none !important;
    overflow: visible;
  }

  .site-navigation__inner {
    height: 0 !important;
    overflow: hidden;
  }

  /* Fix sticky mobile : topbar reste à hauteur auto (2 lignes : logo, puis
   * recherche + burger) — la hauteur de la ligne recherche/burger suit ses
   * enfants, d'où le rétrécissement du formulaire ET du burger ci-dessous
   * (sans quoi la ligne ne réduit quasiment pas : 42→40px était imperceptible). */
  .site-header.is-scrolled .header-topbar__inner {
    height: auto !important;
  }

  .site-header.is-scrolled .header-topbar__search .search-form {
    height: 34px;
  }

  /* min-width/min-height (accessibility.css, cible tactile 44x44 WCAG) priment
   * toujours sur width/height dans le calcul de boîte — sans les redéfinir ici,
   * le bouton restait figé à 44x44px quel que soit le width/height demandé,
   * seules les barres internes (.nav-toggle__bar) semblaient bouger. */
  .site-header.is-scrolled .nav-toggle--topbar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 4px;
  }

  .site-header.is-scrolled .badge-full {
    height: 30px;
  }

  /* Icônes mobile : gap serré — les vraies valeurs sont dans le second bloc 768px */
  .header-topbar__actions {
    gap: 4px;
  }

  /* Panel de navigation : dropdown sous le header (position absolute dans site-navigation)
     #site-navigation a position:relative et height:0, donc top:0 = juste sous la topbar. */
  .nav-primary__list {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: 75vh;
    background: var(--color-bg);
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start;
    padding: var(--space-4) var(--container-px) var(--space-6) !important;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-xl);
    border-top: 2px solid var(--color-accent);
    gap: 0 !important;
    height: auto !important;
  }

  /* Panel ouvert */
  #site-navigation.is-open .nav-primary__list,
  .site-navigation.is-open .nav-primary__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Items verticaux : flex-wrap pour que le mega menu passe sous le lien+toggle */
  .nav-primary__item {
    flex: none !important;
    height: auto !important;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: center;
  }

  /* Liens verticaux : prend la place disponible sur la ligne du toggle */
  .nav-primary__link {
    flex: 1;
    justify-content: flex-start !important;
    height: auto;
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-base) !important;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    min-width: 0;
  }

  /* Enlever le underline animé en mobile */
  .nav-primary__link::after {
    display: none;
  }

  .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--color-accent);
    margin-left: var(--space-4);
    padding: var(--space-2) 0;
    border-radius: 0;
    min-width: 0;
  }

  .site-content--with-sidebar {
    grid-template-columns: 1fr;
  }

  .posts-grid {
    grid-template-columns: 1fr;
  }

  .footer-widgets__grid {
    grid-template-columns: 1fr;
  }
}

/* --- 1024px : tablette paysage --- */
@media (max-width: 1024px) {
  .footer-widgets__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 1280px et plus : grands écrans --- */
@media (min-width: 1280px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Print --- */
@media print {
  .site-header,
  .site-footer,
  .nav-primary,
  .sidebar,
  .skip-link,
  .back-to-top {
    display: none;
  }

  .site-content--with-sidebar {
    grid-template-columns: 1fr;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-text-muted);
  }

  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}


/* ============================================================
   15. HEADER TOPBAR — LAYOUT 3 COLONNES
   [Logo + Tél.] | [Recherche centrée] | [Actions + Badge]
   ============================================================ */

.header-topbar {
  position: relative;     /* crée un contexte d'empilement */
  z-index: 1;             /* peint l'ombre PAR-DESSUS la nav (.site-navigation) */
  background: #ffffff;
  /* Pas de border-bottom : l'ombre elle-même fait le séparateur visuel */
  box-shadow:
    0 3px 0   rgba(26, 43, 76, 0.04),   /* trait doux collé au bas */
    0 6px 20px rgba(26, 43, 76, 0.18);  /* halo de profondeur sur le menu */
  /* height géré via --header-topbar-height dans .header-topbar__inner */
}

/* PHP : class="container header-topbar__inner"
   .container gère max-width + padding-inline + margin auto.
   On ajoute uniquement le layout grid 3 colonnes. */
.header-topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-topbar-height);
}

/* Groupe gauche : logo + téléphone */
.header-topbar__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Logo */
.header-topbar__logo {
  flex-shrink: 0;
  line-height: 0;
}

.header-topbar__logo .custom-logo,
.header-topbar__logo img {
  height: 44px;
  width: auto;
  display: block;
  transition: height var(--transition-base);
}

.header-topbar__logo .site-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  transition: font-size var(--transition-base);
}

.header-topbar__logo .site-title a {
  color: inherit;
  text-decoration: none;
}

/* Téléphone : margin auto le centre entre le logo et la barre de recherche */
.header-topbar__phone {
  flex-shrink: 0;
  overflow: hidden;
  transition: max-width var(--transition-base), opacity var(--transition-base);
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

.header-phone__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.header-phone__link:hover {
  color: var(--color-accent);
  background-color: var(--color-bg-alt);
}

.header-phone__link svg {
  flex-shrink: 0;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}

/* Animation téléphone — sonne, pause, re-sonne, pause... en boucle pendant le hover.
   Durée totale : 2.8s. Sonnerie à 0% et à 50%, pause entre les deux. */
@keyframes phoneRingLoop {
  /* Sonnerie 1 : 0% → 24% (~0.65s) */
  0%   { transform: translateX(0)    rotate(0deg);   }
  4%   { transform: translateX(-3px) rotate(-18deg); }
  8%   { transform: translateX(3px)  rotate(14deg);  }
  12%  { transform: translateX(-3px) rotate(-11deg); }
  16%  { transform: translateX(3px)  rotate(8deg);   }
  20%  { transform: translateX(-2px) rotate(-5deg);  }
  22%  { transform: translateX(2px)  rotate(3deg);   }
  24%  { transform: translateX(0)    rotate(0deg);   }
  /* Pause 1 : 24% → 50% */
  50%  { transform: translateX(0)    rotate(0deg);   }
  /* Sonnerie 2 : 50% → 74% */
  54%  { transform: translateX(-3px) rotate(-18deg); }
  58%  { transform: translateX(3px)  rotate(14deg);  }
  62%  { transform: translateX(-3px) rotate(-11deg); }
  66%  { transform: translateX(3px)  rotate(8deg);   }
  70%  { transform: translateX(-2px) rotate(-5deg);  }
  72%  { transform: translateX(2px)  rotate(3deg);   }
  74%  { transform: translateX(0)    rotate(0deg);   }
  /* Pause 2 : 74% → 100% */
  100% { transform: translateX(0)    rotate(0deg);   }
}

/* Desktop : lien avec texte du téléphone */
.header-phone__link:hover svg {
  animation: phoneRingLoop 2.8s ease-in-out infinite;
}

/* Mobile : icône téléphone (header-action--tel-mobile) — même animation */
.header-action--tel-mobile:hover svg,
.header-action--tel-mobile:focus svg {
  animation: phoneRingLoop 2.8s ease-in-out infinite;
}

/* Colonne centrale : barre de recherche (parfaitement centrée) */
.header-topbar__search {
  width: clamp(240px, 30vw, 460px);
  transition: width var(--transition-base);
}

/* Barre de recherche — conteneur arrondi avec overflow:hidden
   overflow:hidden est LA clé : il clip le bouton pour qu'il
   respecte le border-radius du formulaire, sans aucun hack de marge.
   height transition : permet à la loupe (aspect-ratio:1, height:100%) de se
   redimensionner en douceur lors du passage en mode sticky (42→34px). */
.header-topbar__search .search-form {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1.5px solid var(--color-field-border);
  border-radius: 8px;
  height: 42px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(26, 43, 76, 0.08);
  transition: height var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.header-topbar__search .search-form:focus-within {
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}
/* Focus clavier : contour standard du site (accessibility.css,
   input:focus-visible — 2px --color-focus). La seule bordure or (#CCA63B,
   2.31:1 sur blanc) n'atteignait pas 3:1 (WCAG 1.4.11 / RGAA 3.3) ; le
   champ lui-même a outline:none (le formulaire porte le cadre) — 2026-10-01. */
/* Le contour or foncé du focus-within (3,5:1) porte l'indicateur (DETTE-391) */
.header-topbar__search .search-form:has(.search-form__input:focus-visible) {
  outline: none;
}
.header-topbar__search .search-form__input:focus-visible {
  box-shadow: none;
}

.header-topbar__search .search-form__input {
  flex: 1;
  min-width: 0;
  /* Annule le min-height:44px de la règle générique */
  min-height: 0;
  height: 100%;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  outline: none;
}

.header-topbar__search .search-form__input::placeholder {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

/* Bouton loupe — carré via aspect-ratio:1 + align-self:stretch.
   IMPORTANT :
   - align-self:stretch est plus fiable que height:100% pendant les transitions CSS
     (le parent change de height 42→34px via transition, le child stretch suit en temps réel).
   - min-height:0 !important annule tout override global (WCAG 44px, WooCommerce, etc.)
     qui empêcherait le bouton de se réduire et décalerait l'icône vers le bas. */
.header-topbar__search .search-form__btn {
  flex-shrink: 0;
  align-self: stretch;   /* suit la hauteur du formulaire via flexbox */
  aspect-ratio: 1;       /* width = height → toujours carré */
  height: auto;          /* laisse align-self gérer la hauteur */
  min-height: 0 !important;
  min-width:  0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: var(--color-primary);
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.header-topbar__search .search-form__btn:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

/* Groupe droit : actions + badge */
.header-topbar__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Actions WooCommerce : centré dans la colonne droite, icônes resserrées */
.header-topbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: auto;
}

.header-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

/* Reset natif navigateur quand .header-action est un <button> */
button.header-action {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.header-action:hover {
  /* --color-accent-text (4.79:1 sur --color-bg-alt) au lieu de --color-accent
     (2.16:1) : l'icône survolée garde un contraste ≥ 3:1 (WCAG 1.4.11 /
     RGAA 3.3), même teinte dorée — 2026-10-01. */
  color: var(--color-accent-text);
  background-color: var(--color-bg-alt);
}

.header-action svg {
  display: block;
}

/* Animation tremblement au hover — uniquement déclenché par le hover */
@keyframes iconWiggle {
  0%   { transform: rotate(0deg)   scale(1);    }
  15%  { transform: rotate(-14deg) scale(1.1);  }
  30%  { transform: rotate(12deg)  scale(1.1);  }
  45%  { transform: rotate(-9deg)  scale(1.05); }
  60%  { transform: rotate(7deg)   scale(1.05); }
  75%  { transform: rotate(-4deg)  scale(1.02); }
  90%  { transform: rotate(3deg)   scale(1.02); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* Pas d'animation générique sur les icônes — chaque icône a sa propre animation ciblée */
/* phone → phoneRingLoop | wishlist → heartIdle + heartFillUp | cart → cartArrive | account → accountJump + accountSquash (survol) */

/* Favoris : battement de cœur (lub-dub) en permanence sur le SVG entier */
.header-action--wishlist svg {
  animation: heartIdle 3.8s ease-in-out 1s infinite;
}

.header-action--wishlist {
  color: var(--color-primary);
}

.header-action--wishlist:hover {
  background-color: rgba(238, 0, 85, 0.06);
  color: var(--color-heart);
}

/* ─── Couche de remplissage : cachée par défaut, révélée au clic ─── */
.header-action--wishlist .heart-fill {
  fill: var(--color-heart);        /* surpasse l'attribut de présentation SVG */
  clip-path: inset(100% 0 0 0);   /* caché depuis le bas */
}

/* ─── Contour : hérite la couleur du parent ─── */
.header-action--wishlist .heart-stroke {
  transition: stroke var(--transition-fast);
}

/* Au hover : contour devient rouge (via parent .header-action--wishlist:hover) */
.header-action--wishlist:hover .heart-stroke {
  stroke: var(--color-heart);
}

/* heartBounce — rebond scale au moment du clic */
@keyframes heartBounce {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.35); }
  58%  { transform: scale(0.88); }
  78%  { transform: scale(1.14); }
  100% { transform: scale(1);    }
}

/* heartFillUp — remplissage progressif du bas vers le haut */
@keyframes heartFillUp {
  0%   { clip-path: inset(100% 0 0 0); }
  55%  { clip-path: inset(0%   0 0 0); }
  100% { clip-path: inset(0%   0 0 0); }
}

/* heartIdle — double battement (lub-dub) suivi d'une longue pause — clairement perceptible */
@keyframes heartIdle {
  0%         { transform: scale(1); }
  7%         { transform: scale(1.20); }   /* 1er battement */
  14%        { transform: scale(0.94); }
  21%        { transform: scale(1.13); }   /* 2e battement (léger) */
  30%        { transform: scale(1); }
  100%       { transform: scale(1); }      /* longue pause ~3s */
}

/* heartNudge — variante catalogue : invite à cliquer */
@keyframes heartNudge {
  0%, 100% { transform: scale(1)    rotate(0deg);  }
  20%      { transform: scale(1.20) rotate(-6deg); }
  40%      { transform: scale(0.90) rotate(4deg);  }
  60%      { transform: scale(1.10) rotate(-2deg); }
  80%      { transform: scale(1);   }
}

/* ─── État actif (clic) ─── */

/* Fill se révèle du bas vers le haut */
.header-action--wishlist.is-active .heart-fill {
  animation: heartFillUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Contour passe au rouge dès le clic */
.header-action--wishlist.is-active .heart-stroke {
  stroke: var(--color-heart);
}

/* SVG entier : rebond d'entrée, puis battement idle en boucle */
.header-action--wishlist.is-active svg {
  animation:
    heartBounce 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    heartIdle   3.8s ease-in-out 1.0s infinite;
}

/* Hover sur cœur actif : suspendre les animations, garder le rouge */
.header-action--wishlist.is-active:hover svg {
  animation: none;
}
.header-action--wishlist.is-active:hover .heart-fill {
  clip-path: inset(0 0 0 0);
  animation: none;
}
.header-action--wishlist.is-active:hover .heart-stroke {
  stroke: var(--color-heart);
}

/* Classe utilitaire pour le catalogue : invite aléatoire JS → .is-nudging */
.header-action--wishlist.is-nudging:not(.is-active) svg {
  animation: heartNudge 0.7s ease-in-out;
}

/* Compte : au survol (ou au focus clavier), la tête saute deux fois comme
   une balle et les épaules s'écrasent légèrement à chaque retombée — joué
   une fois (2026-10-15, choix atelier parmi 8 propositions ; remplace la
   main qui salue). Le dessin de l'icône est inchangé. */
.header-account-head,
.header-account-body {
  transform-box: view-box;
}
.header-account-head { transform-origin: 12px 7px; }
.header-account-body { transform-origin: 12px 21px; } /* bas du buste */

/* La tête peut dépasser du carré de l'icône pendant le saut */
.header-action--account svg {
  overflow: visible;
}

@keyframes accountJump {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-4px); }
  50%  { transform: translateY(0); }
  68%  { transform: translateY(-1.6px); }
  82%, 100% { transform: translateY(0); }
}

@keyframes accountSquash {
  0%, 10%   { transform: scaleY(1); }
  18%       { transform: scaleY(0.88); }
  30%, 44%  { transform: scaleY(1.04); }
  52%       { transform: scaleY(0.92); }
  64%, 100% { transform: scaleY(1); }
}

.header-action--account:hover .header-account-head,
.header-action--account:focus-visible .header-account-head {
  animation: accountJump 0.9s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.header-action--account:hover .header-account-body,
.header-action--account:focus-visible .header-account-body {
  animation: accountSquash 0.9s ease;
}

@media (prefers-reduced-motion: reduce) {
  .header-action--account:hover .header-account-head,
  .header-action--account:focus-visible .header-account-head,
  .header-action--account:hover .header-account-body,
  .header-action--account:focus-visible .header-account-body {
    animation: none;
  }
}

/* Loupe de la recherche : au survol du bouton, au focus clavier, ou quand
   le champ prend le focus, la loupe « cherche » — balaye à gauche puis à
   droite en s'inclinant et revient en grossissant légèrement (2026-10-15,
   demande atelier). Jouée une fois. */
@keyframes searchLook {
  0%   { transform: translate(0, 0)       rotate(0deg)   scale(1);    }
  22%  { transform: translate(-2px, -1px) rotate(-12deg) scale(1);    }
  48%  { transform: translate(2px, -1px)  rotate(10deg)  scale(1);    }
  72%  { transform: translate(0, 0)       rotate(0deg)   scale(1.18); }
  100% { transform: translate(0, 0)       rotate(0deg)   scale(1);    }
}

.header-topbar__search .search-form__btn svg {
  transform-origin: 46% 46%; /* centre de la lentille */
}

.header-topbar__search .search-form__btn:hover svg,
.header-topbar__search .search-form__btn:focus-visible svg,
.header-topbar__search .search-form:has(.search-form__input:focus) .search-form__btn svg {
  animation: searchLook 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .header-topbar__search .search-form__btn:hover svg,
  .header-topbar__search .search-form__btn:focus-visible svg,
  .header-topbar__search .search-form:has(.search-form__input:focus) .search-form__btn svg {
    animation: none;
  }
}

/* Panier : au survol (ou au focus clavier), le chariot file vers la droite
   puis « arrive » par la gauche, freine en basculant sur ses roues et se
   pose — joué une fois par survol, dans l'esprit du téléphone qui sonne et
   du cœur qui bat (2026-10-15, demande atelier). Le chariot s'efface en
   sortant : rien ne déborde du rond, le badge reste fixe. */
@keyframes cartArrive {
  0%   { transform: translateX(0)     rotate(0deg);  opacity: 1; }
  28%  { transform: translateX(14px)  rotate(0deg);  opacity: 0; }
  29%  { transform: translateX(-16px) rotate(0deg);  opacity: 0; }
  62%  { transform: translateX(3px)   rotate(0deg);  opacity: 1; }
  74%  { transform: translateX(1px)   rotate(9deg);  opacity: 1; }
  87%  { transform: translateX(0)     rotate(-3deg); opacity: 1; }
  100% { transform: translateX(0)     rotate(0deg);  opacity: 1; }
}

.header-action--cart svg {
  transform-origin: 50% 90%; /* bascule sur les roues */
}

.header-action--cart:hover svg,
.header-action--cart:focus-visible svg {
  animation: cartArrive 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .header-action--cart:hover svg,
  .header-action--cart:focus-visible svg {
    animation: none;
  }
}

/* Badge panier — toujours visible, même palette dorée foncée que le badge compte
   (géométrie mutualisée avec .header-account-badge / .header-favorites-badge, voir plus haut) */
.header-action__count {
  /* Même correction que .header-account-badge (3.50:1 → 5.13:1) — WCAG 1.4.3, 2026-10-01 */
  background: var(--color-accent-text);
}

/* Badge Fabrication Française — image unique, transition de taille au scroll */
.header-topbar__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Image unique — réduit doucement en sticky */
.badge-full {
  display: block;
  height: 52px;
  width: auto;
  transition: height var(--transition-base);
}


/* ============================================================
   16. NAVIGATION PRINCIPALE — STRUCTURE FLEX
   ============================================================ */

.site-navigation {
  background: linear-gradient(180deg, #eef1f7 0%, #ffffff 100%);
  height: var(--header-nav-height);
  position: relative;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 6px 22px rgba(26, 43, 76, 0.16);
}

/* PHP : class="container site-navigation__inner"
   .container gère max-width + padding-inline + margin auto. */
.site-navigation__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Menu : occupe toute la largeur du conteneur */
.site-navigation__inner > #primary-menu,
.site-navigation__inner > .nav-primary__list {
  flex: 1;
  height: 100%;
}

.nav-primary__list {
  height: 100%;
}

/* Espacement égal entre items via space-evenly sur la liste */
.nav-primary__item {
  flex: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Lien niveau 0 : centré dans son item, hauteur complète */
.nav-primary__link {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  overflow: visible;
}

/* Underline or animé (expand depuis le centre) */
.nav-primary__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background: var(--color-accent);
  transition: left var(--transition-base), right var(--transition-base);
  border-radius: var(--radius-full) var(--radius-full) 0 0;
}

.nav-primary__link:hover::after,
.nav-primary__item.current-menu-item > .nav-primary__link::after,
.nav-primary__item.current-menu-ancestor > .nav-primary__link::after,
.nav-primary__item.is-open > .nav-primary__link::after {
  left: var(--space-2);
  right: var(--space-2);
}

.nav-primary__link:hover,
.nav-primary__item.current-menu-item > .nav-primary__link,
.nav-primary__item.current-menu-ancestor > .nav-primary__link,
.nav-primary__item.is-open > .nav-primary__link {
  color: var(--color-primary);
  background-color: transparent;
}

.nav-primary__item.current-menu-item > .nav-primary__link {
  /* --color-accent-text (et non --color-accent, 2.04:1 sur le dégradé du
     menu) : 4.53:1 au point le plus foncé du dégradé — WCAG 1.4.3,
     2026-10-01. Le soulignement or (::after) reste décoratif en --color-accent. */
  color: var(--color-accent-text);
  font-weight: var(--font-weight-semibold);
}

/* Bouton chevron toggle mega menu */
.nav-primary__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
  height: 100%;
  flex-shrink: 0;
}

.nav-primary__toggle svg {
  transition: transform var(--transition-base);
  width: 14px;
  height: 14px;
  display: block;
}

.nav-primary__item.is-open > .nav-primary__toggle svg,
.nav-primary__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Séparateur visuel entre items (optionnel) */
.nav-primary__item + .nav-primary__item {
  border-left: none;
}

/* ── Compact nav : petits écrans desktop avant le breakpoint tablette ─── */
/* Réduit les paddings pour éviter le débordement horizontal du menu. */
@media (max-width: 1100px) and (min-width: 769px) {
  .nav-primary__link {
    padding: 0 6px;
    font-size: 13px;
    gap: 3px;
  }
  .nav-primary__link:hover::after,
  .nav-primary__item.current-menu-item > .nav-primary__link::after,
  .nav-primary__item.current-menu-ancestor > .nav-primary__link::after,
  .nav-primary__item.is-open > .nav-primary__link::after {
    left: 6px;
    right: 6px;
  }
  .nav-primary__toggle {
    padding: 0 2px;
  }
}


/* ============================================================
   17. SÉPARATEUR OR — BORDER-BOTTOM FIXE SOUS LE HEADER
   ============================================================ */

.header-accent-bar {
  height: 2px;
  background: var(--color-accent); /* pleine largeur — pas de fondu aux bords */
}

/* La barre de lecture (#reading-progress) est désactivée ici.
   La progression basée sur le temps est gérée par le carrousel. */
#reading-progress {
  display: none;
}


/* ============================================================
   18. HEADER STICKY — ÉTAT .is-scrolled
   Comportement : topbar se compacte, logo et badge rétrécissent.
   Transitions sur : box-shadow, background-color, border, height, opacity.
   ============================================================ */

/* Transition sur le header global */
.site-header {
  transition:
    box-shadow var(--transition-base),
    background-color var(--transition-base);
}

/* Sticky : ombre très visible + fond légèrement teinté = confirmation visuelle immédiate */
.site-header.is-scrolled {
  box-shadow: 0 4px 24px -4px rgba(28, 31, 59, 0.18), 0 2px 8px -2px rgba(28, 31, 59, 0.10);
  background-color: #fefdf8;
}

/* Topbar outer : transition sur height + fond + bordure */
.header-topbar {
  transition:
    height var(--transition-base),
    border-bottom-color var(--transition-base),
    background-color var(--transition-base);
}

/* Sticky : topbar réduit + bordure dorée en bas (très visible) */
.site-header.is-scrolled .header-topbar {
  border-bottom-color: var(--color-accent);
  background-color: #fefdf8;
}

/* Topbar inner : suit la hauteur du topbar */
.site-header.is-scrolled .header-topbar__inner {
  height: var(--header-scrolled-topbar);
}

/* Logo plus petit */
.site-header.is-scrolled .header-topbar__logo .custom-logo,
.site-header.is-scrolled .header-topbar__logo img {
  height: 28px;
}

.site-header.is-scrolled .header-topbar__logo .site-title {
  font-size: var(--font-size-base);
}

/* Badge : réduit doucement en sticky */
.site-header.is-scrolled .badge-full {
  height: 30px;
}

/* Recherche : réduire la hauteur, pas la largeur */
.site-header.is-scrolled .header-topbar__search .search-form {
  height: 34px;
}

/* Panier + compte + favoris : TOUJOURS visibles — aucune règle hide */


/* ============================================================
   19. MEGA MENU
   ============================================================ */

/* Container positionné sous le nav-item parent */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  width: 720px;
  background: var(--color-bg);
  border: none;
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-xl);
  /* État masqué par défaut (animation) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility var(--transition-base);
  pointer-events: none;
}

/* [hidden] utilisé par le Walker — on conserve le display:block pour l'animation */
.mega-menu[hidden] {
  display: block !important;
}

/* Ouvert via JS (.is-open) */
.nav-primary__item.is-open > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* À l'ouverture, visibility bascule immédiatement (le fondu opacity/transform
     est inchangé) : les liens sont atteignables dès la touche Tab suivant
     Entrée — sans quoi un Tab rapide sautait le panneau encore « hidden »
     (WCAG 2.1.1, 2026-10-01). La fermeture garde le délai de la règle de base. */
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s;
}

/* Structure interne : 2 colonnes */
.mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 0;
  min-height: 280px;
}

/* Colonne gauche : liste de liens */
.mega-menu__links {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  border-right: 1px solid var(--color-border);
}

/* Variante sans panneau d'aperçu (option backoffice par item parent) :
   la colonne preview est absente du markup, la grille passe en pleine largeur. */
.mega-menu--no-preview .mega-menu__inner {
  grid-template-columns: 1fr;
}

.mega-menu--no-preview .mega-menu__links {
  border-right: none;
}

.mega-menu__links li {
  margin: 0;
}

.mega-menu__link {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast), padding-left var(--transition-fast);
  position: relative;
}

/* Barre accent gauche sur hover */
.mega-menu__link::before {
  content: '';
  position: absolute;
  left: var(--space-2);
  top: 50%;
  width: 3px;
  height: 14px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--transition-fast);
  transform-origin: center;
}

.mega-menu__link:hover,
.mega-menu__link:focus,
.mega-menu__link[aria-current="page"] {
  color: var(--color-primary);
  background-color: var(--color-bg-alt);
  padding-left: calc(var(--space-4) + var(--space-3));
  outline: none;
}

.mega-menu__link:hover::before,
.mega-menu__link:focus::before,
.mega-menu__link[aria-current="page"]::before {
  transform: translateY(-50%) scaleY(1);
}

.mega-menu__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Colonne droite : panneau preview */
.mega-menu__preview {
  position: relative;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-bg-alt);
  border-radius: 0 0 var(--radius-xl) 0;
  overflow: hidden;
}

/* Image de fond — couvre tout le panneau */
.mega-menu__preview-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform var(--transition-slow);
  z-index: 0;
}

.mega-menu__preview:hover .mega-menu__preview-bg {
  transform: scale(1.05);
}

/* Voile dégradé pour la lisibilité du texte quand une image est présente */
.mega-menu__preview.has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Contenu texte au premier plan */
.mega-menu__preview-content {
  position: relative;
  z-index: 2;
}

.mega-menu__preview-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.mega-menu__preview-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  max-width: none;
  margin: 0;
}

/* Texte blanc quand une image de fond est active */
.mega-menu__preview.has-bg .mega-menu__preview-title {
  color: #ffffff;
}

.mega-menu__preview.has-bg .mega-menu__preview-desc {
  color: rgba(255, 255, 255, 0.80);
}


/* ============================================================
   20. FOOTER RESTRUCTURÉ
   Section 1 (confiance) + Section 2 (nav) sur fond blanc
   Section 3 (copyright) à peine présente
   ============================================================ */

/* --- Séparateurs de section footer --- */
.footer-separator {
  width: 100%;
  height: 3px;
  margin: 0;
  padding: 0;
  border: none;
}

.footer-separator--primary {
  background: var(--color-primary);
}

.footer-separator--accent {
  background: linear-gradient(to right, var(--color-accent-dark), var(--color-accent), var(--color-accent-dark));
}

/* --- Section 1 : Confiance — 3 colonnes centrées, sans carte --- */
.footer-trust {
  background: var(--color-bg);
  padding: var(--space-12) 0;
}

.footer-trust__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  text-align: center;
}

/* Colonne Avis masquée (aucun avis publié, pas de lien Google — footer.php,
 * 2026-10-16) : les deux colonnes restantes se partagent la largeur. Spécificité
 * renforcée pour passer devant la règle tablette (3 colonnes). */
@media (min-width: 769px) {
  .footer-trust__inner.footer-trust__inner--duo { grid-template-columns: repeat(2, 1fr); }
}

/* Colonne confiance : icône + label + contenu centré */
.footer-trust__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Étoiles de notation */
.footer-trust__stars {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.footer-trust__col-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-trust__col-score {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.footer-trust__col-score strong {
  color: #8B6A1E; /* ratio 4.5:1 sur blanc — WCAG AA — var(--color-accent) (#CCA63B) était 2.31:1, non conforme */
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

/* Lien vers la fiche Google de l'atelier (colonne Avis clients, 2026-10-16) */
.footer-trust__google {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-trust__google:hover { color: var(--color-accent-text, #866A1E); }

/* Grille d'icônes paiement et transporteurs */
.footer-trust__icons-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
}

/* Icônes paiement / transporteurs — monochrome bleu par défaut, couleur réelle au hover */
.payment-icon {
  display: block;
  height: 32px;
  width: auto;
  overflow: visible;
  color: var(--color-primary);
  transition: color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.75;
}

.payment-icon:hover {
  opacity: 1;
}

/* Couleurs de marque au hover */
.pay-icon--visa:hover          { color: #1A1F71; }
.pay-icon--paypal:hover        { color: #003087; }
.pay-icon--applepay:hover      { color: #1d1d1f; }

/* Mastercard — deux cercles, opacité différente pour simuler l'overlap */
.pay-icon--mc .mc-left  { fill: var(--color-primary); transition: fill var(--transition-fast); }
.pay-icon--mc .mc-right { fill: var(--color-primary); opacity: 0.55; transition: fill var(--transition-fast), opacity var(--transition-fast); }

.pay-icon--mc:hover .mc-left  { fill: #EB001B; }
.pay-icon--mc:hover .mc-right { fill: #F79E1B; opacity: 1; }

/* --- Section 2 : Navigation par colonnes --- */
.footer-nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-12) 0;
}

.footer-nav__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Chaque colonne centre son contenu sans l'étirer */
.footer-nav__col {
  display: flex;
  justify-content: center;
}

.footer-nav__col-inner {
  width: fit-content;
}

/* Colonne brand (logo + coordonnées) */
.footer-nav__col--brand {
  justify-content: flex-start;
}

.footer-nav__col--brand .footer-nav__col-inner {
  width: 100%;
}

.footer-brand__logo {
  margin-bottom: var(--space-5);
}

.footer-brand__logo img {
  max-width: 120px;
  height: auto;
  display: block;
}

.footer-brand__name a {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: var(--space-4);
  display: block;
}

.footer-brand__address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-brand__address p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.footer-brand__tel,
.footer-brand__email {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-brand__tel:hover,
.footer-brand__email:hover {
  color: var(--color-accent);
}

.footer-nav__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
}

.footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Flèche or qui glisse sur hover */
.footer-nav__list a::before {
  content: '›';
  font-size: 1em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  display: inline-block;
}

.footer-nav__list a:hover {
  color: var(--color-primary);
}

.footer-nav__list a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* --- Section 3 : Copyright — fond bleu nuit, centré, très discret --- */
.site-footer .footer-bottom {
  background: var(--color-primary-dark);
  border-top: none;
  padding: var(--space-2) 0;
}

.site-footer .footer-bottom__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* DETTE-91 [OK] — corrigé le 2026-08-06 : rgba(255,255,255,0.25) sur fond
   #111426 = ratio 2.24:1 (calculé), sous le seuil WCAG AA 4.5:1. Opacité
   portée à 0.45 (≈4.50:1) — même teinte, juste plus lisible. */
.site-footer .footer-bottom__copy,
.site-footer .footer-bottom__credit {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.site-footer .footer-bottom__credit a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer .footer-bottom__credit a:hover {
  color: rgba(255, 255, 255, 0.5);
}


/* ============================================================
   21. HERO — COMPOSANT PAGE
   Collé au header, image d'arrière-plan, texte overlay
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Fond sombre neutre — jamais le bleu primaire qui couvrirait la vidéo */
  background: #0d1420;
}

/* Variante page intérieure (compact) */
.hero--page {
  min-height: 280px;
  padding: var(--space-16) 0;
}

/* Image ou vidéo d'arrière-plan
   z-index : 1 pour être certain d'être au-dessus du background CSS */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero__bg img,
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  /* Ken Burns : zoom in lent (1.0 → 1.08) — masque les bords et crée le mouvement */
  animation: heroKenBurns 18s ease-in-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img,
  .hero__bg video {
    animation: none;
    transform: scale(1.06); /* légèrement zoomé, fixe */
  }
}

/* Overlay gradient — lisibilité du texte */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(28, 31, 59, 0.78) 0%,
    rgba(28, 31, 59, 0.40) 55%,
    rgba(28, 31, 59, 0.15) 100%
  );
}

.hero--page .hero__overlay {
  background: rgba(28, 31, 59, 0.58);
}

/* Contenu textuel */
.hero__content {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.hero__inner {
  max-width: 620px;
}

/* Titre principal */
.hero__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
  animation: heroFadeUp 0.55s ease-out both;
}

/* Sous-titre */
.hero__subtitle {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--line-height-base);
  margin-bottom: var(--space-8);
  max-width: 520px;
  animation: heroFadeUp 0.55s 0.1s ease-out both;
}

.hero__subtitle p {
  max-width: none;
  color: inherit;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__subtitle {
    animation: none;
  }
}

/* ── Carte centrale homepage ─────────────────────────────────────────────── */

/* Image de secours (poster) — masquée quand la vidéo est présente */
.hero__bg-img--fallback {
  display: none;
}

/* Tablette : réduire la hauteur et adapter la carte */
@media (max-width: 768px) {

  .hero__bg-img--fallback {
    display: block;
  }
}

/* Mobile : version compacte */

/* Hero sans image de fond : texte sur fond primary */
.hero:not(.hero--has-bg) .hero__bg,
.hero:not(.hero--has-bg) .hero__overlay {
  display: none;
}


/* ============================================================
   22. CARROUSEL HOMEPAGE
   ============================================================ */

/* Conteneur principal */
.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  background: #0d1420;
}

/* Track — empile les slides les unes sur les autres */
.hero-carousel__track {
  position: absolute;
  inset: 0;
}

/* ── Slide ──────────────────────────────────────────────────── */
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  will-change: opacity;
}

.hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Transitions directionnelles.
   IMPORTANT : visibility: visible est obligatoire ici.
   Sans lui, quand is-active est retiré, la règle de base (.hero-carousel__slide)
   applique visibility:hidden instantanément (override de la transition), et la slide
   disparaît en un flash au lieu de fondre en 0.7s. */
.hero-carousel__slide.is-leaving-left,
.hero-carousel__slide.is-leaving-right {
  visibility: visible;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.7s ease;
}

/* ── Fond ───────────────────────────────────────────────────── */
.hero-carousel__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-carousel__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-carousel__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Image de fallback : masquée si vidéo présente (sauf mobile) */
.hero-carousel__bg-img.is-fallback {
  display: none;
}

/* ── Barre de contrôles bas (dots + prev/décompte/next) ─────── */
.hero-carousel__bar {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center; /* pour centrer les dots */
  padding: 0 var(--space-6);
}

/* Pastilles — centrées absolument dans la barre */
.hero-carousel__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Groupe prev / décompte / next — poussé à droite */
.hero-carousel__ctrls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 40px;
  padding: 2px;
}

/* Bouton générique dans les contrôles */
.hero-carousel__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px   !important;
  height: 22px  !important;
  min-width: 0  !important;
  min-height: 0 !important;
  padding: 0    !important;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.hero-carousel__ctrl:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Bouton décompte : légèrement plus grand pour l'anneau + chiffre */
.hero-carousel__ctrl--count {
  position: relative;
  width: 26px  !important;
  height: 26px !important;
}

/* ── Anneau de décompte SVG ──────────────────────────────────── */
.countdown-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.countdown-ring__bg {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 2.5;
}

/* r=14 → circumference ≈ 87.96 — stroke-dashoffset animé par JS */
.countdown-ring__fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.5;
  stroke-dasharray: 87.96;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke 0.3s ease;
}

/* ── Décompte numérique (secondes restantes) ─────────────────── */
.countdown-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.80);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.03em;
}

/* Masqué quand l'icône pause/play prend la place */
.hero-carousel__ctrl--count:hover .countdown-num,
.hero-carousel__ctrl--count.is-paused .countdown-num {
  opacity: 0;
}

/* ── Icônes pause / play dans l'anneau ───────────────────────── */
.countdown-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.countdown-icon .icon-pause,
.countdown-icon .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

/* Lecture en cours : pause s'affiche au survol (hint) */
.hero-carousel__ctrl--count:hover .countdown-icon .icon-pause {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* État pause actif : ring grisé + play visible */
.hero-carousel__ctrl--count.is-paused .countdown-ring__fill {
  stroke: rgba(255,255,255,0.30);
}

.hero-carousel__ctrl--count.is-paused .countdown-icon .icon-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* En pause : supprimer l'icône pause au survol, agrandir play */
.hero-carousel__ctrl--count.is-paused .countdown-icon .icon-pause {
  opacity: 0 !important;
}

.hero-carousel__ctrl--count.is-paused:hover .countdown-icon .icon-play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* ── Animations Ken Burns — 10 effets vidéo continus ────────────────────
   Chaque animation dure exactement --slide-duration (défini inline sur le
   div .hero-carousel__slide par PHP). Pas de garde prefers-reduced-motion :
   ces effets sont lents et non agressifs (18–20 s sur une slide de 18 s,
   ou 6 s sur une slide de 6 s). ─────────────────────────────────────── */

/* — Zoom avant */
@keyframes heroKBZoomIn {
  from { transform: scale(1.00); }
  to   { transform: scale(1.10); }
}
/* — Zoom arrière */
@keyframes heroKBZoomOut {
  from { transform: scale(1.10); }
  to   { transform: scale(1.00); }
}
/* — Dérive gauche (scale 1.12 → overflow 5.6 % chaque côté, tx 4 % ✓) */
@keyframes heroKBLeft {
  from { transform: scale(1.12) translate(4%,    0%); }
  to   { transform: scale(1.12) translate(-4%,   0%); }
}
/* — Dérive droite */
@keyframes heroKBRight {
  from { transform: scale(1.12) translate(-4%,   0%); }
  to   { transform: scale(1.12) translate(4%,    0%); }
}
/* — Dérive haut */
@keyframes heroKBUp {
  from { transform: scale(1.12) translate(0%,    4%); }
  to   { transform: scale(1.12) translate(0%,   -4%); }
}
/* — Dérive bas */
@keyframes heroKBDown {
  from { transform: scale(1.12) translate(0%,   -4%); }
  to   { transform: scale(1.12) translate(0%,    4%); }
}
/* — Zoom avant + dérive gauche (Ken Burns classique) */
/* scale 1.08 → overflow 3.8 % > tx 3 % ✓ ; scale 1.18 → overflow 7.6 % ✓ */
@keyframes heroKBZoomInLeft {
  from { transform: scale(1.08) translate(3%,  1%); }
  to   { transform: scale(1.18) translate(-3%, -1%); }
}
/* — Zoom avant + dérive droite */
@keyframes heroKBZoomInRight {
  from { transform: scale(1.08) translate(-3%, 1%); }
  to   { transform: scale(1.18) translate(3%,  -1%); }
}
/* — Zoom arrière + dérive gauche (to scale 1.08 > tx 3 % ✓) */
@keyframes heroKBZoomOutLeft {
  from { transform: scale(1.18) translate(3%,  0%); }
  to   { transform: scale(1.08) translate(-3%, 0%); }
}
/* — Zoom arrière + dérive droite */
@keyframes heroKBZoomOutRight {
  from { transform: scale(1.18) translate(-3%, 0%); }
  to   { transform: scale(1.08) translate(3%,  0%); }
}

/* ── Application des animations sur l'image active ─────────────────── */
/* La durée est fournie par --slide-duration (inline style PHP), fallback 6s */

.hero-carousel__slide.is-active[data-animation="zoom-in"]
.hero-carousel__bg-img:not(.is-fallback),
.hero-carousel__slide.is-active:not([data-animation])
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomIn var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="zoom-out"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomOut var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="pan-left"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBLeft var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="pan-right"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBRight var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="pan-up"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBUp var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="pan-down"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBDown var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="zoom-in-left"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomInLeft var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="zoom-in-right"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomInRight var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="zoom-out-left"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomOutLeft var(--slide-duration, 6s) ease-in-out forwards;
}

.hero-carousel__slide.is-active[data-animation="zoom-out-right"]
.hero-carousel__bg-img:not(.is-fallback) {
  animation: heroKBZoomOutRight var(--slide-duration, 6s) ease-in-out forwards;
}

/* Aucune animation — image fixe */
.hero-carousel__slide.is-active[data-animation="none"]
.hero-carousel__bg-img {
  animation: none;
  transform: none;
}

/* ── Overlay ────────────────────────────────────────────────── */
.hero-carousel__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ── Contenu ────────────────────────────────────────────────── */
.hero-carousel__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--container-px);
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.hero-carousel__inner {
  max-width: 620px;
  animation: heroFadeUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-carousel__slide:not(.is-active) .hero-carousel__inner {
  animation: none;
}

.hero-carousel__title {
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
  font-weight: var(--font-weight-bold);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

.hero-carousel__subtitle {
  font-size: clamp(var(--font-size-base), 2vw, var(--font-size-lg));
  color: rgba(255,255,255,0.88);
  margin: 0 0 var(--space-8);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.hero-carousel__cta {
  font-size: var(--font-size-sm);
}

/* .hero-carousel__nav supprimé — remplacé par .hero-carousel__ctrl dans la barre */

/* ── Pastilles ──────────────────────────────────────────────── */
.hero-carousel__dots {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--space-2);
}

/* FIX TAILLE : les dots sont des <button> qui peuvent hériter de min-height:44px
   provenant de WooCommerce, du reset ou d'autres composants. On surcharge avec
   !important sur toutes les propriétés de dimensionnement. */
.hero-carousel__dot {
  width: 6px    !important;
  height: 3px   !important;
  min-width: 0  !important;
  min-height: 0 !important;
  border-radius: 2px;
  background: rgba(255,255,255,0.40);
  border: none;
  cursor: pointer;
  padding: 10px 9px !important; /* zone tactile ≥ 24×24px — background-clip préserve le visuel */
  background-clip: content-box !important;
  transition: background var(--transition-fast), width var(--transition-base);
}

.hero-carousel__dot.is-active {
  background: var(--color-accent);
  background-clip: content-box !important;
  width: 20px !important;
  height: 3px !important;
  border-radius: 2px;
}

/* ── Séparateur or fixe (bas du carrousel) ──────────────────── */
.hero-carousel__accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: 2px;
  background: var(--color-accent);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-carousel {
    min-height: 420px;
  }

  /* Masquer vidéos sur mobile */
  .hero-carousel__bg-video {
    display: none !important;
  }
  .hero-carousel__bg-img.is-fallback {
    display: block;
  }

  .hero-carousel__content {
    align-items: flex-end;
    /* BUG-XX [OK] : --space-14 n'existe pas dans l'échelle d'espacement
       (var() invalide → padding-bottom retombait à 0), ce qui plaquait
       le texte et le CTA contre la barre de pastilles/contrôles en bas.
       --space-20 (80px) dégage la hauteur de la barre (~55-60px) + marge. */
    padding-bottom: var(--space-20);
  }
}

@media (max-width: 480px) {
  .hero-carousel {
    min-height: 340px;
  }
}


/* ============================================================
   23. BANDEAU DE RÉASSURANCE
   Sous le carousel — animation verticale CSS-only (ticker)
   ============================================================ */

/* ── Conteneur ──────────────────────────────────────────────── */
.reassurance-bar {
  position: relative;
  height: 36px;
  background: var(--color-primary-dark);   /* #111426 — très sombre */
  overflow: hidden;
  /* Séparation visuelle nette avec le séparateur or du carousel */
  border-top: 1px solid rgba(204, 166, 59, 0.4);
}

/* ── Ticker : position relative pour empiler les items ─────── */
.reassurance-bar__ticker {
  position: relative;
  height: 100%;
}

/* ── Chaque item : centré, positionné en absolu ─────────────── */
.reassurance-bar__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-accent);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  /* Position initiale : en-dessous (invisible) */
  transform: translateY(100%);
  opacity: 0;

  /* animation-duration et animation-delay par item : générés en inline
     \3c style> par template-parts/reassurance-bar.php selon le nombre réel de
     messages (configurable en back-office depuis l'audit UX 2026-08) —
     valeurs impossibles à exprimer en calc() dans une @keyframes statique.
     Le nom/timing-function/itération restent fixes ici. */
  animation-name: rbarTick;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* @keyframes rbarTick : générée en inline \3c style> par reassurance-bar.php
   (mêmes raisons que ci-dessus — les pourcentages d'entrée/sortie dépendent
   du nombre de messages). */

/* ── Icône inline SVG ────────────────────────────────────────── */
.reassurance-bar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.reassurance-bar__icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

/* ── Texte ───────────────────────────────────────────────────── */
.reassurance-bar__label {
  white-space: nowrap;
}

/* ── Responsive mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
  .reassurance-bar__label {
    font-size: 10.5px;
    letter-spacing: 0.03em;
  }
  .reassurance-bar__icon svg {
    width: 14px;
    height: 14px;
  }
}


/* ============================================================
   24. MESSAGES D'ÉTAT — COMPOSANT MULTI-USAGE
   Formulaires, WooCommerce, calculateur de prix
   ============================================================ */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid currentColor;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  animation: noticeFadeIn 0.2s ease-out;
  margin-bottom: var(--space-4);
}

@keyframes noticeFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notice__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.notice__body {
  flex: 1;
  min-width: 0;
}

.notice__body p,
.notice__body ul {
  margin: 0;
  max-width: none;
}

.notice__body p + p,
.notice__body p + ul {
  margin-top: var(--space-2);
}

.notice strong {
  font-weight: var(--font-weight-semibold);
}

/* Variantes */
.notice--error {
  background: rgba(220, 38, 38, 0.06);
  color: var(--color-error);
  border-color: var(--color-error);
}

.notice--success {
  background: rgba(22, 163, 74, 0.06);
  color: var(--color-success);
  border-color: var(--color-success);
}

.notice--warning {
  background: rgba(217, 119, 6, 0.06);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.notice--info {
  background: rgba(37, 99, 235, 0.06);
  color: var(--color-focus);
  border-color: var(--color-focus);
}

.notice--error p,
.notice--success p,
.notice--warning p,
.notice--info p {
  color: inherit;
  max-width: none;
}

/* Compatibilité classes WooCommerce */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-left: 4px solid;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  list-style: none;
}

.woocommerce-error {
  background: rgba(220, 38, 38, 0.06);
  border-color: var(--color-error);
  color: var(--color-error);
}

.woocommerce-message {
  background: rgba(22, 163, 74, 0.06);
  border-color: var(--color-success);
  color: var(--color-success);
}

.woocommerce-info {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--color-focus);
  color: var(--color-focus);
}


/* ============================================================
   24bis. SYSTÈME UNIFIÉ DE NOTIFICATIONS — TOAST + MODALE
   Point d'entrée unique : window.blondeauTheme.notify() /
   window.blondeauTheme.confirmDialog() (voir main.js).
   ============================================================ */

/* --- Toast (coin haut-droit, sous le header, aligné sur la colonne du site) --- */
.blondeau-toast-region {
  position: fixed;
  /* --blc-sticky-offset (main.js) suit le bas réel du header, y compris pendant
     sa transition de rétrécissement au scroll — fallback statique si le script
     n'a pas encore tourné. Décalage négatif = --radius-md : le toast remonte
     sous le liseré doré du header d'exactement la valeur de son propre rayon,
     comme si la ligne dorée se « cassait » pour laisser apparaître le toast. */
  top: calc(var(--blc-sticky-offset, var(--header-total-height)) - var(--radius-md));
  /* Aligné sur le bord droit du .container (site), pas sur le bord de la fenêtre :
     distance = demi-débord du viewport par rapport au conteneur + son padding interne. */
  right: max(var(--space-4), calc((100vw - var(--container-max)) / 2 + var(--container-px)));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 380px;
  width: calc(100% - var(--space-8));
  pointer-events: none;
}

.blondeau-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* Fond opaque aux couleurs du thème : le fond teinté transparent de .notice--*
     (pensé pour une notice intégrée à la page) devient illisible en superposition
     flottante sur une image (carrousel héro, etc.). Liseré doré en tête de carte :
     signature déjà utilisée sur le header et le carrousel héro. */
  background: var(--color-bg, #fff);
  border: 1px solid rgba(28, 31, 59, 0.08);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  box-shadow:
    0 8px 24px rgba(15, 28, 53, 0.12),
    0 2px 6px rgba(15, 28, 53, 0.08);
  opacity: 0;
  /* Le toast « tombe » légèrement depuis le haut avant de se stabiliser, pour
     attirer l'œil sans être agressif (léger rebond via cubic-bezier). */
  transform: translateY(-28px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.blondeau-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .blondeau-toast {
    transform: none;
    transition: opacity 0.2s ease;
  }
}

.blondeau-toast__icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
}

/* --- Vignette produit (remplace l'icône de statut quand fournie, ex.
   notifications favoris) --- */
.blondeau-toast__thumb {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--color-bg-alt, #f4f4f6);
}

.blondeau-toast__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blondeau-toast__icon svg {
  width: 100%;
  height: 100%;
}

.blondeau-toast--success .blondeau-toast__icon { color: var(--color-success); }
.blondeau-toast--error   .blondeau-toast__icon { color: var(--color-error); }
.blondeau-toast--warning .blondeau-toast__icon { color: var(--color-warning); }
.blondeau-toast--info    .blondeau-toast__icon { color: var(--color-focus); }

.blondeau-toast__body {
  flex: 1;
  min-width: 0;
}

.blondeau-toast__title {
  margin: 0 0 var(--space-1);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Toujours neutre (pas la couleur sémantique) : le statut est déjà porté par
     l'icône ET par le mot lui-même ("Erreur", "Succès"...), jamais par la
     couleur seule (WCAG 1.4.1). */
  color: var(--color-text-muted);
}

.blondeau-toast__msg {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.blondeau-toast__msg p {
  margin: 0;
}

.blondeau-toast__msg p + p {
  margin-top: var(--space-2);
}

.blondeau-toast__msg strong {
  font-weight: var(--font-weight-semibold);
}

/* --- Actions (liens/boutons) : ancrées en bas à droite du toast --- */
.blondeau-toast__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.blondeau-toast__action {
  appearance: none;
  border: 1px solid rgba(28, 31, 59, 0.16);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold, 600);
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-base);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.blondeau-toast__action:hover {
  background: rgba(28, 31, 59, 0.05);
}

.blondeau-toast__action--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.blondeau-toast__action--primary:hover {
  background: #12142a;
}

.blondeau-toast__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.7;
  cursor: pointer;
  border-radius: var(--radius-base);
}

.blondeau-toast__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 480px) {
  .blondeau-toast-region {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
    width: auto;
  }
}

/* --- Modale de confirmation (remplace window.confirm()) --- */
.blondeau-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.blondeau-confirm-modal[hidden] {
  display: none;
}

.blondeau-confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 28, 53, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.blondeau-confirm-modal.is-open .blondeau-confirm-modal__backdrop {
  opacity: 1;
}

.blondeau-confirm-modal__box {
  position: relative;
  z-index: 1;
  background: var(--color-bg, #fff);
  border-radius: var(--radius-lg, 8px);
  max-width: 560px;
  width: 100%;
  box-shadow:
    0 8px 32px rgba(15, 28, 53, 0.10),
    0 2px 8px rgba(15, 28, 53, 0.06);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.blondeau-confirm-modal.is-open .blondeau-confirm-modal__box {
  transform: translateY(0);
  opacity: 1;
}

.blondeau-confirm-modal__title {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: 0 0 var(--space-3);
  /* Place du bouton × (.exit-modal__close, ajouté le 2026-10-03) */
  padding-right: var(--space-8);
}

.blondeau-confirm-modal__message {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}

.blondeau-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.blondeau-confirm-modal .btn.blondeau-confirm-modal__btn--danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #fff;
}

.blondeau-confirm-modal .btn.blondeau-confirm-modal__btn--danger:hover {
  background: #991B1B;
  border-color: #991B1B;
}


/* ============================================================
   SYSTÈME DE MODALES — PANNEAU IMAGE (uniformisation UX)
   Classes génériques partagées par les modales du thème avec un
   panneau latéral (image ou pictogramme) : exit-intent, connexion
   favoris, échantillon, confirmation. Appliquées via la classe
   modificatrice .has-media sur la boîte existante de chaque modale ;
   sans .has-media, la modale garde sa mise en page mono-colonne
   actuelle (aucune régression si l'image n'est pas renseignée).
   ============================================================ */

.exit-modal__box.has-media,
.fav-login-modal__box.has-media,
.bp-sample-modal__panel.has-media,
.blondeau-confirm-modal__box {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 680px;
  padding: 0;
  overflow: hidden;
  text-align: left;
}

/* `body img.` : sur les pages WooCommerce, `.woocommerce img { height: auto }`
   (woocommerce-layout.css, plus spécifique) annulait ces hauteurs — photo
   carrée de 321 px en mobile dans les modales échantillon et « Avant de
   partir » des fiches produit (2026-10-02). */
body img.blondeau-modal-media {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  display: block;
}

.blondeau-modal-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 640px) {
  .exit-modal__box.has-media,
  .fav-login-modal__box.has-media,
  .bp-sample-modal__panel.has-media,
  .blondeau-confirm-modal__box {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  body img.blondeau-modal-media,
  .blondeau-confirm-modal__media {
    height: 160px;
    min-height: 160px;
  }

  /* Petits écrans / zoom 200 % (WCAG 1.4.10) : la boîte défile au lieu
     d'être coupée, et le contenu gagne un peu de largeur (boutons sur une
     ligne). */
  .exit-modal__box.has-media,
  .fav-login-modal__box.has-media,
  .bp-sample-modal__panel.has-media {
    max-height: 100%;
    overflow-y: auto;
  }

  .blondeau-modal-content {
    padding: var(--space-6);
  }

  /* Actions en une colonne : bouton principal pleine largeur, lien
     d'abandon centré dessous (au lieu de deux éléments alignés à droite
     qui passent à la ligne). Modales « Avant de partir » et échantillon. */
  .has-media .exit-modal__actions,
  .blondeau-confirm-modal__box .exit-modal__actions {
    justify-content: center;
  }

  .has-media .exit-modal__cta,
  .blondeau-confirm-modal__box .exit-modal__cta {
    width: 100%;
  }

  /* Bouton × posé sur la photo en une colonne : pastille claire pour rester
     lisible (contraste ≥ 3:1 quel que soit le visuel) — même traitement
     pour toutes les modales à photo. */
  .exit-modal__box.has-media .exit-modal__close,
  .fav-login-modal__box.has-media .fav-login-modal__close,
  .bp-sample-modal__panel.has-media .bp-sample-modal__close,
  .blondeau-confirm-modal__box .blondeau-confirm-modal__close {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
  }
}

/* --- Panneau pictogramme (modale de confirmation, pas de vraie photo) --- */
.blondeau-confirm-modal__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(204, 166, 59, 0.10), rgba(204, 166, 59, 0.18));
  color: var(--color-accent);
}

.blondeau-confirm-modal__media--danger {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(220, 38, 38, 0.16));
  color: var(--color-error);
}

.blondeau-confirm-modal__media svg {
  width: 56px;
  height: 56px;
}

/* ============================================================
   AGRANDISSEMENT D'IMAGE DANS UNE MODALE (2026-10-03)
   main.js — attachMediaZoom(). Loupe en haut à droite du panneau
   image ; l'image s'agrandit jusqu'à couvrir toute la boîte, sans
   seconde modale. Même pastille blanche ronde que la loupe des
   cartes du calculateur (.blc-choice__zoom-btn, calculator.css) et
   que la fermeture de la visionneuse — toute évolution est à
   répercuter aux trois. Utilisé par : aide Guide d'achat, fiche
   tissu, « Votre configuration ».
   ============================================================ */
.blondeau-media-zoom__btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary, #1C1F3B);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 28, 53, 0.18);
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.blondeau-media-zoom__btn:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

.blondeau-media-zoom__btn[hidden] {
  display: none;
}

/* Image agrandie : sortie du flux, posée sur toute la boîte (la case
   .blondeau-media-zoom__placeholder garde sa place dans la grille). */
/* Le fond reste celui du panneau d'origine (clair) : même rendu dans toutes
   les modales, et les illustrations sur fond blanc restent lisibles. */
.blondeau-media-zoom.is-zoomed {
  position: absolute !important;
  z-index: 6;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Pas de changement de cadrage (object-fit) pendant l'agrandissement
   (2026-10-03, retour atelier) : la bascule cover → contain laissait des
   bandes vides à l'ouverture (image qui ne remplit pas la modale) et
   provoquait un sursaut à la fermeture (retour brutal de contain à cover
   en fin d'animation). Chaque image garde son propre cadrage — photo de
   tissu recadrée (cover), schéma d'aide entier (contain) — et seule la
   taille de la zone s'anime. */

.blondeau-media-zoom.is-animating {
  transition:
    left   0.45s cubic-bezier(0.16, 1, 0.3, 1),
    top    0.45s cubic-bezier(0.16, 1, 0.3, 1),
    width  0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .blondeau-media-zoom.is-animating {
    transition: none;
  }
}

/* ============================================================
   PASTILLE « ‹ X / Y › » — modèle commun (2026-10-15)
   Reprise de la pastille de l'aide du calculateur
   (.blc-info-modal-media__pager, calculator.css), au bleu du site.
   Utilisée par : galerie de la fiche produit, visionneuse.
   ============================================================ */
.blondeau-pager {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(28, 31, 59, 0.85); /* --color-primary à 85 % */
  color: #fff;
}

.blondeau-pager[hidden] {
  display: none;
}

.blondeau-pager__step {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background var(--transition-fast);
}

.blondeau-pager__step:hover {
  background: rgba(255, 255, 255, 0.18);
}

.blondeau-pager__step:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.blondeau-pager__count {
  min-width: 40px;
  text-align: center;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* ============================================================
   PASTILLE DE TRI « Trier par » — modèle commun (2026-10-17)
   Une seule pastille pour tous les tris du site :
   - catalogue : .blondeau-catalog-toolbar__sort (catalog-shortcode.php)
   - avis clients : .blr-sort (reviews-display.php, plugin)
   - tissus du calculateur : .blc-filters-sort (calculator.js, plugin)
   Gabarit partagé avec « Nouveautés » (catalogue), à l'identique :
   hauteur 36px, contour 1px, capitales légères (réduits le 2026-10-18 :
   « trop voyant » à 44px / 2px / gras), contour et survol de
   « Nouveautés » (.blondeau-new-toggle, catalog.css). Toute évolution de
   ces boutons doit être répercutée ici, et inversement.
   Le <select> couvre toute la pastille (icône et chevron posés dessus,
   sans capter le clic) : un clic n'importe où l'ouvre.
   Balisage : <span class="blondeau-sort">[icône tri]<select>…</select></span>
   + libellé associé (label masqué ou aria-label).
   ============================================================ */
.blondeau-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px; /* cible ≥ 24px (WCAG 2.5.8) ; 44px jugé trop voyant, 2026-10-18 */
  max-width: 100%;
  border: 1px solid var(--color-primary, #1C1F3B);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg, #fff);
  color: var(--color-primary, #1C1F3B);
  overflow: hidden;
  transition: background-color var(--transition-fast, 0.15s ease), color var(--transition-fast, 0.15s ease);
}

/* Balayage lumineux au survol — même effet que « Nouveautés » */
.blondeau-sort::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}

/* Chevron : même tracé que les autres listes déroulantes du thème
   (.blondeau-sort-select, plus haut), dessiné en currentColor pour suivre
   le passage en blanc au survol */
.blondeau-sort::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}

.blondeau-sort > svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  pointer-events: none;
  z-index: 1;
}

/* Le select porte le texte et la zone de clic ; les valeurs écrasent la
   règle générique select{} (bordure, largeur 100 %, padding, focus) */
.blondeau-sort select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 26px 0 29px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Liste ouverte : options lisibles quel que soit l'état de la pastille */
.blondeau-sort option {
  background: var(--color-bg, #fff);
  color: var(--color-text, #1E1E1E);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.blondeau-sort select:hover,
.blondeau-sort select:focus {
  border: none;
  box-shadow: none;
  outline: none;
  color: inherit;
}

.blondeau-sort:hover {
  background: var(--color-primary, #1C1F3B);
  color: var(--color-text-inverse, #fff);
}

.blondeau-sort:hover::before {
  opacity: 1;
  animation: btnShimmer 0.55s ease forwards;
}

/* Focus clavier sur la pastille entière (le select est rogné par
   overflow:hidden) — contour standard de accessibility.css */
/* Focus identique aux champs : contour or foncé + halo or (DETTE-391) */
.blondeau-sort:has(select:focus-visible) {
  outline: none;
  border-color: var(--color-field-focus);
  box-shadow: 0 0 0 3px var(--color-field-halo);
}

@media (prefers-reduced-motion: reduce) {
  .blondeau-sort {
    transition: none;
  }
  .blondeau-sort:hover::before {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   VISIONNEUSE UNIQUE — fiche produit + calculateur (2026-10-15)
   main.js, blondeauTheme.openViewer(). Reprend les boutons de la
   visionneuse produit (× blanc sur le coin de l'image, .bp-lightbox__close)
   et la pastille X / Y ; vignettes au cadre des coloris (.bp-swatch).
   ============================================================ */
.blondeau-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000; /* au-dessus de la visionneuse et des fiches du calculateur (9999) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 16px;
  background: rgba(10, 12, 28, 0.88);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.blondeau-viewer[hidden] {
  display: none;
}

.blondeau-viewer.is-open {
  opacity: 1;
}

.blondeau-viewer__stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blondeau-viewer__frame {
  position: relative;
  transform: scale(0.97);
  transition: transform 0.25s ease;
}

.blondeau-viewer.is-open .blondeau-viewer__frame {
  transform: scale(1);
}

body img.blondeau-viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, calc(100vw - 48px));
  max-height: calc(100vh - 180px); /* place de la bande de vignettes de 80 px */
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  transition: opacity 0.18s ease;
}

.blondeau-viewer.is-single img.blondeau-viewer__img {
  max-height: calc(100vh - 80px);
}

body img.blondeau-viewer__img.is-fading {
  opacity: 0;
}

/* × : valeurs de .bp-lightbox__close (product.css) / .blc-calc-lightbox__close */
.blondeau-viewer__close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary, #1C1F3B);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  min-width: 0 !important;
  min-height: 0 !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.blondeau-viewer__close:hover {
  background: var(--color-primary, #1C1F3B);
  color: #fff;
}

.blondeau-viewer__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.blondeau-viewer__pager {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
}

.blondeau-viewer__bar {
  flex-shrink: 0;
  display: flex;
  justify-content: safe center;
  gap: var(--space-2, 8px);
  max-width: 100%;
  padding: 14px 3px 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.blondeau-viewer__bar::-webkit-scrollbar {
  display: none;
}

.blondeau-viewer__bar[hidden] {
  display: none;
}

/* Cadre des coloris (.bp-swatch, product.css) — valeurs exactes. 80 px
   (64 px en mobile) au lieu de 52 px : vignettes trop petites en grand
   (demande atelier 2026-10-15). */
.blondeau-viewer__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  padding: 2px;
  background: var(--color-bg-alt, #F8F7F5);
  cursor: pointer;
  min-width: 0 !important;
  min-height: 0 !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body .blondeau-viewer__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.blondeau-viewer__thumb:hover {
  border-color: var(--color-border-dark, #C8C3BA);
}

.blondeau-viewer__thumb[aria-current="true"] {
  border-color: var(--color-accent, #CCA63B);
  box-shadow: 0 0 0 1px var(--color-accent, #CCA63B);
}

.blondeau-viewer__thumb:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .blondeau-viewer {
    padding: 32px 16px 12px;
  }

  body img.blondeau-viewer__img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 164px);
  }

  .blondeau-viewer__thumb {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blondeau-viewer,
  .blondeau-viewer__frame,
  body img.blondeau-viewer__img,
  .blondeau-viewer__thumb,
  .blondeau-pager__step {
    transition: none;
  }

  .blondeau-viewer__frame {
    transform: none;
  }
}


/* ============================================================
   23. BANDEAU MARQUES — HOMEPAGE
   Défilement horizontal des marques WooCommerce (product_brand)
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.brands-strip {
  padding: var(--space-12) 0 var(--space-10);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* Sur la page d'accueil, les suggestions précèdent le bandeau → pas de double séparateur */
.home .brands-strip {
  border-top: none;
}

.brands-strip__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Track + flèches ─────────────────────────────────────────── */
.brands-strip__wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.brands-strip__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-2) 0 var(--space-3);
  flex: 1;
}

.brands-strip__track::-webkit-scrollbar {
  display: none;
}

/* ── Boutons flèches ─────────────────────────────────────────── */
.brands-strip__arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}

.brands-strip__arrow:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(204, 166, 59, 0.06);
}

.brands-strip__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.brands-strip__arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ── Carte marque ────────────────────────────────────────────── */
.brand-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

/* DETTE-94 [OK] — le lien vit désormais à l'intérieur de .brand-item (role="listitem")
   plutôt que d'être la carte elle-même — il occupe tout l'espace disponible. */
.brand-item__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.brand-item--logo {
  padding: var(--space-3) var(--space-5);
  min-width: 150px;
  min-height: 72px;
}

.brand-item--text {
  padding: var(--space-3) var(--space-6);
  min-height: 52px;
}

.brand-item:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(204, 166, 59, 0.14);
}

/* Zone fixe 130 × 62, logo entier centré (contain) — demande atelier
   2026-11-02, remplace le cover du 2026-10-27 : un logo n'est jamais coupé
   ni déformé. Même règle sur la fiche produit (product.css,
   .bp-product__brand-img). */
.brand-item__img {
  width: 130px;
  height: 62px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(25%) opacity(0.85);
  transition: filter var(--transition-base);
  display: block;
}

.brand-item:hover .brand-item__img {
  filter: grayscale(0%) opacity(1);
}

.brand-item__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .brands-strip__wrapper {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .brands-strip__arrow {
    width: 30px;
    height: 30px;
  }

  .brand-item--logo {
    min-width: 120px;
    min-height: 58px;
    padding: var(--space-2) var(--space-3);
  }
}


/* ============================================================
   24. SECTION SERVICES — BLOCK PATTERN GUTENBERG
   Grille de 6 cartes d'icônes (pattern blondeau/homepage-services)
   ============================================================ */

/* ── Section wrapper ─────────────────────────────────────────── */
.blondeau-services {
  padding: var(--space-16) 0;
  background: var(--color-bg-alt);
}

/* Titres dans le contexte Gutenberg */
.blondeau-services .wp-block-heading {
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.blondeau-services__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  margin-top: 0;
  margin-bottom: 0;
}

/* Espacement entre le header Gutenberg et la grille HTML */
.blondeau-services .wp-block-heading + p.blondeau-services__subtitle {
  margin-bottom: var(--space-8);
}

/* ── Grille de cartes ────────────────────────────────────────── */
.blondeau-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1100px;
  margin: var(--space-8) auto 0;
  padding: 0 var(--space-6);
}

/* ── Carte individuelle ──────────────────────────────────────── */
.service-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

.service-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 36px rgba(204, 166, 59, 0.13);
  transform: translateY(-4px);
}

/* ── Cercle icône ────────────────────────────────────────────── */
.service-card__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(204, 166, 59, 0.08);
  border-radius: 50%;
  transition: background var(--transition-base);
}

.service-card:hover .service-card__icon {
  background: rgba(204, 166, 59, 0.16);
}

.service-card__icon svg {
  width: 38px;
  height: 38px;
  stroke: var(--color-accent);
  display: block;
}

/* ── Texte ───────────────────────────────────────────────────── */
.service-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
}

.service-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Responsive grille services ──────────────────────────────── */
@media (max-width: 768px) {
  .blondeau-services {
    padding: var(--space-10) 0;
  }

  .blondeau-services__grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-4);
    gap: var(--space-4);
  }

  .service-card {
    padding: var(--space-6) var(--space-5);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .blondeau-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   25. RESPONSIVE — HEADER / MEGA MENU / FOOTER / HERO
   ============================================================ */

/* Mobile et tablette portrait (≤ 768px) */
@media (max-width: 768px) {

  /* Topbar : logo auto (prend son espace naturel) | droite 1fr (reste de l'écran)
     Évite que le logo soit écrasé par les icônes sur petits écrans (iPhone SE). */
  .header-topbar__inner {
    grid-template-columns: auto 1fr;
    height: auto;
    padding-block: var(--space-2);
    row-gap: var(--space-2);
    column-gap: var(--space-2);
  }

  /* Recherche + burger : pleine largeur, sur la 2e rangée */
  .header-topbar__search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding-bottom: var(--space-3);
    padding-inline: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-bg);
  }

  /* Téléphone texte masqué sur mobile (icône dans les actions) */
  .header-topbar__phone {
    display: none;
  }

  /* Badge : conservé, légèrement réduit */
  .header-topbar__badge .badge-full {
    height: 36px;
  }

  /* Formulaire de recherche : prend toute la place disponible (face au burger) */
  .header-topbar__search .search-form {
    flex: 1;
  }

  /* Icône téléphone mobile : visible seulement sur mobile */
  .header-action--tel-mobile {
    display: flex;
  }

  /* Conteneur gauche : juste le logo */
  .header-topbar__left {
    gap: 0;
  }

  /* Colonne droite : icônes + badge — alignés à droite, espacés modérément */
  .header-topbar__right {
    justify-content: flex-end;
    gap: var(--space-2);   /* 8px entre le groupe d'icônes et le badge FF */
    min-width: 0;
  }

  /* Icônes : réduites à 36×36px, gap serré — évite le débordement sur petits écrans */
  .header-topbar__actions {
    gap: 2px;
    margin-left: 0;
    margin-right: 0;
  }

  .header-action {
    min-width: 36px;
    height: 36px;
  }

  /* Badge compteur (panier/compte/favoris) : recalé pour rester à la même
   * position visuelle par rapport à l'icône (fixe 20x20px, cf. header.php)
   * qu'en desktop — le top:4px/right:2px de base est calculé pour un bouton
   * de 44px ; réappliqué tel quel sur un bouton de 36px, le badge "rentrait"
   * dans l'icône au lieu de rester à son coin comme sur PC. */
  .header-action__count,
  .header-account-badge,
  .header-favorites-badge {
    top: 0;
    right: -2px;
  }

  /* Badge FF : légèrement réduit sur mobile */
  .header-topbar__badge .badge-full {
    height: 32px;
  }

  /* Mega menu → flat mobile, pleine largeur pour passer sous le lien+toggle */
  .mega-menu {
    position: static;
    flex: 0 0 100%;      /* force le wrap vers la ligne suivante */
    width: 100%;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--color-accent);
    border-radius: 0;
    border-top: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    background: var(--color-bg-alt);
    margin-left: 0;
    margin-top: 0;
    padding-left: var(--space-4);
  }

  /* Annuler le display:block!important du desktop pour les [hidden] */
  .mega-menu[hidden] {
    display: none !important;
  }

  .nav-primary__item.is-open > .mega-menu {
    display: block;
  }

  /* Réaffirmer l'ouverture même avec [hidden] */
  .nav-primary__item.is-open > .mega-menu[hidden] {
    display: block !important;
  }

  .mega-menu__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mega-menu__links {
    border-right: none;
  }

  .mega-menu__preview {
    display: none;
  }

  /* Footer trust : 1 colonne sur mobile */
  .footer-trust__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Footer nav : 1 colonne, aligné à gauche */
  .footer-nav__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-nav__col {
    justify-content: flex-start;
  }

  .footer-nav__col-inner {
    width: 100%;
  }

  .site-footer .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .footer-bottom__nav {
    justify-content: center;
  }

  /* Hero responsive */
  .hero--page {
    min-height: 200px;
    padding: var(--space-10) 0;
  }

  .hero__overlay {
    background: rgba(28, 31, 59, 0.65);
  }

  .hero__title {
    font-size: var(--font-size-2xl);
  }

  .hero__subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-6);
  }

  .hero__inner {
    max-width: none;
  }
}

/* Tablette paysage (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

  .footer-trust__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .footer-nav__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .header-topbar__search {
    max-width: 280px;
  }

  .mega-menu {
    width: 580px;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
  }
}


/* ============================================================
   28. WORDPRESS ADMIN BAR — COMPENSATION STICKY HEADER
   ============================================================ */

/* La barre d'admin WP fait 32px en desktop, 46px sur mobile ≤782px.
   Le header sticky doit en tenir compte pour ne pas masquer le contenu. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
    /* JS ajuste dynamiquement via style.top quand la barre admin se masque au scroll */
    transition: top 0.25s ease;
  }
}


/* ============================================================
   29. TRANSITIONS GLOBALES HEADER — FLUIDITÉ
   ============================================================ */

/* Transitions sur tous les éléments du topbar qui changent en sticky.
   will-change indique au navigateur de préparer un layer GPU → transitions fluides garanties. */
.header-topbar__logo .custom-logo,
.header-topbar__logo img {
  transition: height var(--transition-base);
  will-change: height;
}

.header-topbar__logo .site-title {
  transition: font-size var(--transition-base);
}

.header-topbar__phone {
  transition: opacity var(--transition-base);
}

.badge-full {
  transition: height var(--transition-base);
  will-change: height;
}

.header-topbar__inner {
  will-change: height;
}

/* Éléments uniquement desktop — placés dans min-width pour ne pas écraser le mobile */
@media (min-width: 769px) {
  .nav-toggle--topbar {
    display: none;
  }

  .header-action--tel-mobile {
    display: none;
  }
}

.header-topbar__inner {
  transition: height var(--transition-base);
}

/* Transitions sur les changements d'état du header en general */
.header-topbar {
  transition: box-shadow var(--transition-base);
}

.site-navigation {
  transition: box-shadow var(--transition-base);
}


/* ============================================================
   30. MEGA MENU — POSITIONNEMENT RELATIF AU CONTENEUR
   ============================================================ */

/* Le mega menu est position:absolute dans le li (position:relative).
   Le JS calcule le décalage pour rester dans le conteneur nav.
   On s'assure que la nav est le contexte de positionnement. */
.site-navigation {
  overflow: visible; /* nécessaire pour que le mega menu déborde correctement */
}

.nav-primary__list {
  position: static; /* le contexte est le li individuel (position:relative via nav-primary__item) */
}

/* Le mega menu part strictement du bas du nav-item qui l'émet */
.mega-menu {
  margin-top: 0;
}

/* ============================================================
   31. COMPOSANT SECTION — conteneur pleine largeur
   ============================================================ */

.section {
  width: 100%;
  padding: var(--space-16) 0;
}

.section--flush {
  padding: 0;
}

.section--sm {
  padding: var(--space-8) 0;
}

.section--lg {
  padding: var(--space-24) 0;
}

.section__inner {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .section__inner {
    padding-inline: var(--space-8);
  }
}

/* ============================================================
   32. ANIMATIONS D'ENTRÉE AU SCROLL (Intersection Observer)
   ============================================================ */

/* État initial : invisible, décalé vers le bas */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.55s ease,
    transform 0.55s ease;
}

/* Délais échelonnés pour les groupes d'éléments */
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal[data-delay="3"] { transition-delay: 0.3s; }
.js-reveal[data-delay="4"] { transition-delay: 0.4s; }

/* État activé par JS quand l'élément entre dans le viewport */
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect du réglage utilisateur */
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   PAGE FAVORIS (9.5)
   ============================================================ */

/* En-tête */
.fav-page__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.fav-page__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex: 1;
}

.fav-page__title {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: 0;
}

.fav-page__count {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  white-space: nowrap;
}

.fav-page__count[hidden] { display: none; }

/* Bouton partage */
.fav-page__share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-md, 8px);
  background: none;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-primary, #1C1F3B);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.fav-page__share-btn:hover {
  border-color: var(--color-accent, #CCA63B);
  background: rgba(204, 166, 59, 0.05);
}

.fav-page__share-btn--ghost {
  border-color: transparent;
  color: var(--color-text-muted);
  padding: 8px 4px;
}

.fav-page__share-btn--ghost:hover {
  border-color: transparent;
  background: none;
  color: var(--color-primary, #1C1F3B);
  text-decoration: underline;
}

.fav-page__share-confirm {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-accent, #CCA63B);
  font-weight: 600;
}

.fav-page__share-confirm[hidden] { display: none; }

/* Spinner chargement */
.fav-page__loading {
  display: flex;
  justify-content: center;
  padding: var(--space-16) 0;
  color: var(--color-accent, #CCA63B);
}

/* Grille */
.fav-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fav-page__grid[hidden] { display: none; }

/* Bandeau invitation compte — visiteur non connecté consultant un lien partagé */
.fav-page__guest-notice {
  background: var(--color-bg-alt, #F7F5F0);
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
}

.fav-page__guest-notice a {
  color: var(--color-primary, #1C1F3B);
  font-weight: var(--font-weight-bold, 700);
  text-decoration: underline;
}

/* État vide / invité */
.fav-page__empty,
.fav-page__guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  gap: var(--space-4);
}

.fav-page__empty[hidden] { display: none; }

.fav-page__empty-icon {
  color: var(--color-border, #E5E1D8);
  margin-bottom: var(--space-2);
}

.fav-page__empty-title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-primary, #1C1F3B);
  margin: 0;
}

.fav-page__empty-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #6B7280);
  max-width: 400px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 600px) {
  .fav-page__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}