/**
 * nimo — Design System « Laste Premium » (public)
 *
 * Transporte les tokens du dashboard /gestion vers les pages publiques.
 * Fond CLAIR (contexte consumer) vs fond SOMBRE du dashboard.
 * Toute couleur d'accent vient du Personnalisateur — rien en dur.
 *
 * Chargé APRÈS bebe-nova.css pour rebrancher les variables sans casser
 * la cascade. Les anciennes variables .bn-* restent disponibles en repli
 * (backward compat) mais les composants publics utilisent --cd-*.
 */

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — copiés fidèlement du dashboard (dashboard.css:61-377)
   avec adaptation au contexte LIGHT (fonds clairs dérivés de l'accent).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Accent — 2026-09-10 : retour owner, palette calée sur sa référence
     `exemple.jpeg` (boutique "ESSENTIALS" : crème/blanc + encre quasi noire,
     UNE seule touche de couleur — un rouille/terracotta — réservée aux petits
     badges ("New", "Few Left"). Remplace le dégradé bleu→violet→rose du
     2026-09-09 (commentaire ci-dessous gardé pour l'historique des valeurs,
     ne décrit plus l'état réel). --cd-accent-strong porte désormais le rôle
     "couleur PORTEUSE" (boutons, nav, surfaces) — en ENCRE, pas en couleur. */
  --cd-accent: #C1662F;                  /* rouille/terracotta — badges only */
  --cd-accent-rgb: 193, 102, 47;
  --cd-accent-strong: #141414;           /* encre quasi noire (boutons, nav, surfaces) */
  --cd-accent-strong-ink: #ffffff;
  --cd-accent-ink: #ffffff;              /* encre sur accent (best_ink) */
  --cd-accent-soft: #F3E3D6;             /* teinte rouille pâle pour fonds */
  --cd-accent-wash: #FBF1E9;             /* survol / ligne sélectionnée */
  --cd-accent-on-dark: #E2A177;          /* accent EN TEXTE sur surfaces sombres */

  /* ── Icône de marque partagée — écho du sac + point du logo, utilisée en
     mask-image (currentColor via background-color) sur les motifs décoratifs
     qui portaient encore l'étoile de l'ancienne marque (Bébé Nova). ── */
  --bn-icon-bag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8.5%208V7a3.5%203.5%200%200%201%207%200v1'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%208h12l1%2012.3a2%202%200%200%201-2%202.2H7a2%202%200%200%201-2-2.2L6%208z'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='17.3'%20cy='14.6'%20r='1.5'%20fill='black'/%3E%3C/svg%3E");
  /* Même pictogramme, en `currentColor` — pour un usage en `background-image`
     (superposé à un fond, ex. badge « catégorie sans photo ») plutôt qu'en
     `mask-image` (silhouette pleine, ex. héro, pied de page). */
  --bn-icon-bag-cc: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8.5%208V7a3.5%203.5%200%200%201%207%200v1'%20fill='none'%20stroke='currentColor'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3Cpath%20d='M6%208h12l1%2012.3a2%202%200%200%201-2%202.2H7a2%202%200%200%201-2-2.2L6%208z'%20fill='none'%20stroke='currentColor'%20stroke-width='1.7'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='17.3'%20cy='14.6'%20r='1.5'%20fill='currentColor'/%3E%3C/svg%3E");

  /* ── Neutres — palette "Mohawk" : crème/blanc chauds, encre quasi noire.
     Remplace le navy/bleu qui pilotait fonds et textes. ── */
  --cd-white: #ffffff;
  --cd-ink: #1A1815;
  --cd-ink-2: #2B2822;
  --cd-muted: #6B6459;
  --cd-soft: #B5AC9C;                   /* DÉCOR UNIQUEMENT — 2026-09-09 : c'était #9a0a0a (rouge
     franc), incohérent avec un token « soft » de la section Neutres — corrigé en gris chaud clair. */

  /* ── Surfaces light — crème/blanc plats, plus de dérivé bleu ── */
  --cd-bg: #FAF8F4;
  --cd-page: #FAF8F4;
  --cd-page-2: #F1EDE5;
  --cd-card: #ffffff;
  --cd-field: #ffffff;
  --cd-line: #E4DFD3;
  --cd-line-2: #EDE9DF;

  /* ── Sémantiques ── */
  --cd-ok: #16A34A;
  --cd-warn: #F59E0B;
  --cd-bad: #EF4444;
  --cd-info: #3B82F6;
  --cd-ok-soft: #DCFCE7;
  --cd-warn-soft: #FEF9C3;
  --cd-bad-soft: #fbe4e2;
  --cd-info-soft: #dcf1f5;

  /* ── Typographie — échelle Barlow (identique au dashboard) ── */
  --cd-fs-xs: 11.5px;
  --cd-fs-sm: 13px;
  --cd-fs-md: 14.5px;
  --cd-fs-lg: 17px;
  --cd-fs-xl: 20px;
  --cd-fs-2xl: 26px;
  --cd-fs-3xl: 32px;
  --cd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Espacement base-4 ── */
  --cd-sp-1: 4px;
  --cd-sp-2: 8px;
  --cd-sp-3: 12px;
  --cd-sp-4: 16px;
  --cd-sp-5: 20px;
  --cd-sp-6: 24px;
  --cd-sp-8: 32px;
  --cd-sp-10: 40px;

  /* ── Rayons — quasi nuls : Mohawk n'a que des coins nets. Ramener ces
     tokens à 0-2px "dé-pilule" mécaniquement boutons/nav/inputs/cartes
     partout où ils sont consommés, sans retoucher chaque sélecteur. ── */
  --cd-r-sm: 1px;
  --cd-r-md: 2px;
  --cd-r-lg: 2px;
  --cd-r-xl: 2px;
  --cd-r-pill: 2px;

  /* ── Ombres — aplaties : Mohawk n'a pas d'ombre portée, juste des liserés. ── */
  --cd-shadow: none;
  --cd-shadow-rest: none;
  --cd-shadow-hover: none;
  --cd-shadow-elevated: 0 4px 16px rgba(24, 24, 24, .08);

  /* ── Focus ── */
  --cd-focus: 0 0 0 2px var(--cd-ink), 0 0 0 4px rgba(var(--cd-accent-rgb), .35);

  /* ── Transitions ── */
  --cd-ease-out: cubic-bezier(.23, 1, .32, 1);
  --cd-t-fast: .12s;
  --cd-t-base: .18s;

  /* ── Contrôles ── */
  --cd-ctl-h: 42px;
  --cd-ctl-h-sm: 34px;
}

/* ═══════════════════════════════════════════════════════════════════
   BARLOW — EMBARQUÉ (comme le dashboard, pas de CDN)
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../../../plugins/aod-client-dashboard/assets/fonts/barlow-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../../../plugins/aod-client-dashboard/assets/fonts/barlow-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../../../plugins/aod-client-dashboard/assets/fonts/barlow-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../../../plugins/aod-client-dashboard/assets/fonts/barlow-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../../../plugins/aod-client-dashboard/assets/fonts/barlow-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE — rebranche le corps du site sur les tokens Laste
   ═══════════════════════════════════════════════════════════════════ */

body {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--cd-fs-md);
  color: var(--cd-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fond du site — plat, façon Mohawk General Store : plus de halos animés ni
   de grain. Chaque section garde son propre fond opaque (cartes, en-tête,
   héro…) sur la couleur crème unie de `body` (cf. bebe-nova.css `body`). */

/* Gris de texte — AA garanti */
.cd-muted { color: var(--cd-muted); }
.cd-soft { color: var(--cd-soft); }

/* Sélection */
::selection {
  background: var(--cd-accent-soft);
  color: var(--cd-ink);
}

/* Focus global — identique au dashboard */
.cd-focus-ring:focus-visible {
  outline: 2px solid var(--cd-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER — verre dépoli coloré + animations (demande owner 2026-09-08 :
   header jugé "trop simple", header cette fois EXPLICITEMENT sorti de la
   charte "Mohawk" quasi monochrome du reste du site — le dégradé ci-dessous
   ne fuite donc nulle part ailleurs, il est scopé à `.site-header`.
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  /* Dégradé RÉSERVÉ à l'en-tête (custom property scopée → hérite sur tous
     les descendants : logo, nom du site, pilules de nav).
     2026-09-09 — retour owner : plus de rose (le 3ᵉ arrêt), et l'ensemble
     adouci — bleu/violet uniquement, dans des tons plus clairs/moins
     saturés. `--bn-grad-3` reprend `--bn-grad-1` : le dégradé qui défile
     boucle proprement bleu→violet→bleu sans réintroduire une 3ᵉ teinte. */
  --bn-grad-1: #141414;
  --bn-grad-2: #C1662F;
  --bn-grad-3: #141414;
  --bn-grad: linear-gradient(90deg, var(--bn-grad-1), var(--bn-grad-2), var(--bn-grad-3), var(--bn-grad-1));
}

/* Header plus large que le reste du contenu (1200px) — plus de respiration
   pour le logo et la nav, sans toucher à la largeur des pages. */
.site-header .inside-header.grid-container {
  max-width: 1400px;
}

/* 2026-09-09 — retour owner : couleurs OK, header trop haut. GeneratePress
   pose 20px de padding vertical par défaut (`.inside-header{padding:20px
   40px}`) — réduit ici, plus le logo, pour un bandeau plus fin. */
.site-header .inside-header {
  padding-block: 10px !important;
}
.site-logo img {
  max-height: var(--bn-logo-h, 34px);
}
.site-header.is-scrolled {
  --bn-logo-h: 28px;
}
@media (max-width: 544px) {
  .site-logo img { max-height: 28px; }
}

/* Fond du header — plus un aplat cream : un lavis pastel (mêmes teintes que
   le dégradé de marque, très éclairci pour ne pas manger le contraste du
   texte encre foncée) + deux halos de couleur qui dérivent lentement. Les
   halos sont posés en `radial-gradient` DANS `background-image` (pas des
   pseudo-éléments : `::before` porte déjà le filet arc-en-ciel, `::after`
   est laissé libre pour un futur usage). */
.site-header,
.inside-header {
  border-block-end: 1px solid transparent !important;
  transition: background-color .4s var(--cd-ease-out), box-shadow .4s var(--cd-ease-out);
}
/* `.inside-header` doit rester TRANSPARENT : c'est un enfant qui recouvre
   toute la zone du header — un fond opaque ici masquerait entièrement le
   dégradé posé sur `.site-header` juste en dessous. */
.inside-header {
  background-color: transparent !important;
}
/* 2026-09-09 — retour owner : "moche" après deux essais de dégradé multi-
   arrêts animé (d'abord quasi-noir, puis bleu-nuit/violet) — repli sur un
   aplat encre uni + filet arc-en-ciel. Commentaire gardé pour l'historique.
   2026-09-10 — retour owner : header trop sombre + palette recalée sur
   `exemple.jpeg` (boutique "ESSENTIALS", header CLAIR). Repasse sur
   `--cd-page` (même crème que le reste du site, cf. bebe-nova.css) — plus de
   halo, plus de fond encre : le header ne se distingue plus du contenu que
   par le liseré qui apparaît au scroll (cf. bebe-nova.css `.is-scrolled`). */
.site-header {
  background-color: var(--cd-page) !important;
  background-image: none !important;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 500;
}

/* Bandeau d'annonce noir — au-dessus du header, calé sur `exemple.jpeg`
   (« FREE SHIPPING WORLDWIDE ON ALL ORDERS »). C'est la SEULE zone noire
   volontairement conservée : fine, hors du header lui-même (qui reste clair,
   cf. retour owner "ne fais pas sombre"), et purement informative — aucune
   animation, aucun dégradé. Contenu injecté par `bn_header_announce_bar()`
   (functions.php). */
.bn-announce {
  background: var(--cd-ink);
  color: var(--bn-white, #fff);
}
.bn-announce__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-block: 0.5rem;
  padding-inline: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  text-align: center;
}
.bn-announce__item {
  font-family: "Barlow", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bn-announce__dot {
  opacity: 0.5;
  font-size: 0.7rem;
}
@media (max-width: 700px) {
  .bn-announce__dot:nth-of-type(n+2) { display: none; }
  .bn-announce__item:nth-of-type(n+3) { display: none; }
}

/* Séparation nette entre le header et le contenu — même geste que le filet
   sous la nav de `exemple.jpeg` (un simple trait, pas une ombre portée). */
.site-header {
  border-block-end: 1px solid var(--cd-ink) !important;
}

/* Filet arc-en-ciel du haut — RETIRÉ (2026-09-10) : `exemple.jpeg` n'a aucune
   ligne de couleur décorative dans son header, et un filet encre/rouille
   fixe n'aurait plus de raison d'animer. `--bn-grad` reste défini (repris par
   la pilule de nav au survol, cf. plus bas) mais n'anime plus rien ici. */

/* is-scrolled (bn-header.js) : sur un header déjà clair, le seul signal de
   profondeur au scroll est le liseré + une ombre douce — plus de verre dépoli
   sombre (pensé pour l'ancien fond encre). */
.site-header.is-scrolled {
  background-color: var(--cd-page) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px -16px rgba(20, 20, 20, .25);
}
@keyframes bn-grad-flow {
  to { background-position: 300% 0; }
}

/* Logo — icône seule (cf. bebe-nova.css pour le nom du site à côté), habillée
   d'une aura dégradée qui respire derrière elle. `isolation:isolate` +
   `z-index:-1` : l'aura reste DERRIÈRE l'icône sans sortir de la boîte du
   lien ni passer sous le header. Rotation + pulsation combinées dans UNE
   seule animation `transform` (deux animations sur la même propriété ne se
   cumulent pas en CSS — la dernière écraserait la première). */
/* 2026-09-10 — l'aura dégradée derrière le logo est retirée : sur un header
   clair, calé sur `exemple.jpeg` (logotype plat, aucun halo), elle n'a plus
   sa place — c'était un habillage pensé pour le fond encre du 2026-09-09. */
.site-logo a {
  position: relative;
  isolation: isolate;
}

.site-logo img {
  max-height: 42px;
  width: auto;
  transition: transform var(--cd-t-base) var(--cd-ease-out), filter var(--cd-t-base) var(--cd-ease-out);
}
.site-logo a:hover img {
  transform: translateY(-1px);
}

@media (max-width: 544px) {
  .site-logo img { max-height: 34px; }
}

/* Nom du site — 2026-09-10 : retour à un nom de site plat en encre, sans
   dégradé ni animation (`exemple.jpeg` a un logotype serif plein, statique).
   `!important` : nécessaire pour gagner face à `.main-title a` de
   bebe-nova.css, chargé avant nous. */
.main-title a,
.main-title a:hover {
  color: var(--cd-ink) !important;
  font-family: var(--bn-font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.main-title a::after {
  background: var(--cd-ink) !important;
}

/* 2026-09-10 — retour owner : « le design du header ne me plaît pas ». La
   pilule dégradée qui se remplissait au survol/à l'état actif (avec
   soulèvement + ombre) est retirée — nav à plat, un simple soulignement au
   survol/actif (même geste que le nom du site juste à côté et la nav du
   pied de page), plus proche de `exemple.jpeg`. */
#site-navigation .menu-item > a,
#site-navigation a.menu-link {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: var(--cd-fs-sm);
  color: var(--cd-ink) !important;
  letter-spacing: 0.04em;
}

/* 2026-09-10 — retour à un header clair : icône du menu mobile et liens de la
   barre d'icônes (tel/WhatsApp) repassés en encre foncée (le blanc du
   2026-09-09 était pensé pour le fond encre, devenu illisible sur crème). */
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a {
  color: var(--cd-ink) !important;
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus,
.main-navigation .mobile-bar-items a:hover {
  color: var(--cd-accent) !important;
}

#site-navigation .menu-item:not(.menu-item-aod-lang) > a {
  position: relative;
  padding-block: 0.5rem !important;
  padding-inline: 0.2rem !important;
  margin-inline: 0.9rem;
  transition: color .3s var(--cd-ease-out);
}

#site-navigation .menu-item:not(.menu-item-aod-lang) > a:hover,
#site-navigation .current-menu-item:not(.menu-item-aod-lang) > a,
#site-navigation .current_page_item:not(.menu-item-aod-lang) > a {
  color: var(--cd-accent) !important;
}

/* Trait sobre sous le lien actif/survolé — même geste que le nom du site et
   la nav du pied de page. */
#site-navigation .menu-item:not(.menu-item-aod-lang) > a::after {
  content: "";
  position: absolute;
  inset-inline: 0.2rem;
  inset-block-end: 0.1rem;
  block-size: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .3s var(--cd-ease-out);
}
#site-navigation .menu-item:not(.menu-item-aod-lang) > a:hover::after,
#site-navigation .current-menu-item:not(.menu-item-aod-lang) > a::after,
#site-navigation .current_page_item:not(.menu-item-aod-lang) > a::after {
  transform: scaleX(1);
}

/* Bouton du menu mobile — sobre, sans dégradé ni ombre. */
.menu-toggle {
  border-radius: 999px;
  transition: background .3s var(--cd-ease-out),
              color .3s var(--cd-ease-out);
}
.menu-toggle:hover,
.menu-toggle[aria-expanded="true"] {
  background: var(--cd-page-2) !important;
  color: var(--cd-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS — système Laste unifié
   ═══════════════════════════════════════════════════════════════════ */

/* 2026-09-09 — BUG DE CASCADE trouvé en revue : ce bloc datait de l'ancien
   rectangle noir plat "façon Mohawk" et, chargé APRÈS bebe-nova.css avec les
   MÊMES sélecteurs + `!important`, écrasait silencieusement la pilule
   dégradée (bebe-nova.css) sur TOUT le site depuis sa création — exactement
   le même piège que le header/footer (cf. commentaire plus haut dans ce
   fichier). Supprimé : bebe-nova.css porte déjà la charte bouton actuelle. */

/* ═══════════════════════════════════════════════════════════════════
   CARTES — composant .aod-cd-card du dashboard
   ═══════════════════════════════════════════════════════════════════ */

.cd-card {
  background: var(--cd-card);
  border-radius: var(--cd-r-lg);
  box-shadow: var(--cd-shadow-rest);
  padding: var(--cd-sp-5);
  transition: box-shadow var(--cd-t-base) var(--cd-ease-out),
              transform var(--cd-t-base) var(--cd-ease-out);
}
.cd-card:hover {
  box-shadow: var(--cd-shadow-hover);
}

/* ═══════════════════════════════════════════════════════════════════
   TITRES — typographie Barlow 700/800
   ═══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4,
.entry-title,
.page-title {
  font-family: var(--bn-font-serif, "Fraunces", Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}

/* Titres de section — sobres, sans trait accent coloré */
.cd-section-title {
  position: relative;
  font-size: var(--cd-fs-2xl);
  font-weight: 700;
  padding-block-end: 0.6rem;
}
.cd-section-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-block-start: 0.6rem;
  background: var(--cd-ink);
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LIENS
   ═══════════════════════════════════════════════════════════════════ */

a {
  color: var(--cd-accent-strong);
  transition: color var(--cd-t-base) var(--cd-ease-out);
}
a:hover {
  color: var(--cd-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMULAIRES — alignés sur les tokens
   ═══════════════════════════════════════════════════════════════════ */

input, textarea, select {
  font-family: "Barlow", sans-serif;
  font-size: var(--cd-fs-md);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cd-accent) !important;
  box-shadow: var(--cd-focus) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BADGES / PILLS — pastilles sémantiques
   ═══════════════════════════════════════════════════════════════════ */

.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-sp-1);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: var(--cd-fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--cd-r-pill);
}

.cd-badge--accent {
  background: var(--cd-accent-soft);
  color: var(--cd-accent-strong);
}
.cd-badge--ok {
  background: var(--cd-ok-soft);
  color: var(--cd-ok);
}
.cd-badge--warn {
  background: var(--cd-warn-soft);
  color: var(--cd-warn);
}
.cd-badge--bad {
  background: var(--cd-bad-soft);
  color: var(--cd-bad);
}

/* ═══════════════════════════════════════════════════════════════════
   COMPTEUR RÉSULTATS / TRI — aligné tokens
   ═══════════════════════════════════════════════════════════════════ */

.woocommerce-result-count {
  color: var(--cd-muted);
  font-family: "Barlow", sans-serif;
  font-size: var(--cd-fs-sm);
  font-weight: 500;
}

/* 2026-09-10 — retour owner (2 passes) : "Tri par défaut" jugé pas design.
   1ʳᵉ passe : pilule claire + flèche dessinée — jugée insuffisante, retour
   "change carrément son design". 2ᵉ passe, ci-dessous : la même pastille
   dégradée noir → rouille + lueur que les flèches du carrousel catégories et
   les badges nombre d'articles (`linear-gradient(135deg,#141414,#C1662F)`,
   `bn-arrow-breathe`) — plutôt qu'une variation de plus sur le style
   "champ clair + bordure" déjà présent partout (boutons, filtres). En plus
   dégradé animé en continu (glisse lentement), même esprit que le filet
   arc-en-ciel du header/héro/catégories (`bn-hero-divider-flow` etc.) —
   c'est CE langage-là ("bande dégradée qui vit") que l'owner appelle
   "slogans animés", pas le bandeau d'annonce du haut qui, lui, reste
   volontairement statique (cf. `.bn-announce` plus haut). */
.woocommerce-ordering {
  position: relative;
  display: inline-block;
}
.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(120deg, #141414 0%, #C1662F 25%, #141414 50%, #C1662F 75%, #141414 100%);
  background-size: 300% 100%;
  border: none !important;
  border-radius: 999px;
  padding-block: 0.65rem;
  padding-inline: 1.5rem 2.6rem;
  font-family: "Barlow", sans-serif;
  font-size: var(--cd-fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(193, 102, 47, .6);
  transition: transform var(--cd-t-base) var(--cd-ease-out),
              box-shadow var(--cd-t-base) var(--cd-ease-out);
  animation: bn-order-shimmer 9s linear infinite;
}
/* La liste déroulante native reste blanche/lisible — un `<option>` ne peut
   pas porter le dégradé du déclencheur (rendu 100% natif du navigateur, hors
   de portée du CSS), donc on lui donne juste un contraste correct plutôt que
   de laisser le blanc/gris par défaut du navigateur au hasard. */
.woocommerce-ordering select.orderby option {
  background: var(--cd-card);
  color: var(--cd-ink);
  font-weight: 600;
  text-transform: none;
}
@keyframes bn-order-shimmer {
  to { background-position: -300% 0; }
}
.woocommerce-ordering select.orderby:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 30px -10px rgba(193, 102, 47, .75);
}
.woocommerce-ordering select.orderby:focus {
  outline: none;
  box-shadow: var(--cd-focus);
}
/* Chevron blanc dessiné (deux bordures + rotation 45°) — logical properties :
   se retourne tout seul en RTL. Pivote à l'ouverture (`:focus-within`). */
.woocommerce-ordering::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.2rem;
  inset-block-start: 42%;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  transition: transform var(--cd-t-base) var(--cd-ease-out);
}
.woocommerce-ordering:focus-within::after {
  transform: translateY(-30%) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce-ordering select.orderby {
    animation: none;
    transition: none;
  }
  .woocommerce-ordering::after {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* 2026-09-09 — pied de page repris dans l'identité dégradée du reste du
   site (fond encre + filet arc-en-ciel animé). C'est CE fichier qui gagne
   la cascade (chargé après bebe-nova.css).
   2026-09-10 (1er retour) — palette recalée sur `exemple.jpeg`, filet
   encre→rouille, fond encre conservé.
   2026-09-10 (2ᵉ retour) — owner : « le footer est sombre ». Fond encre →
   crème comme le reste du site : plus aucune section sombre hors la
   bannière de clôture juste au-dessus (cf. `.bn-closing`). Filet du haut
   retiré (plus de raison d'être une fois le fond clair — même logique que
   le filet du header, déjà retiré). */
.site-footer {
  position: relative;
}

/* 2026-09-10 (3ᵉ retour) — le fond sombre PERSISTAIT malgré les deux passes
   précédentes : `.site-footer` (le `<div>` englobant) n'a jamais eu de fond
   visible — c'est `<footer class="site-info">`, l'élément réellement peint,
   qui portait encore `background-color:#222222` (réglage par défaut de
   GeneratePress, injecté en `<style>` inline dans le `<head>`). Cibler
   `.site-footer` ne pouvait donc rien changer à l'écran. `.site-info` cible
   maintenant le bon élément. */
.site-footer,
.site-info {
  background-color: var(--cd-page) !important;
  color: var(--cd-muted);
  border-block-start: 1px solid var(--cd-line);
}

.site-footer a,
.site-info a {
  color: var(--cd-ink) !important;
  transition: color var(--cd-t-base) var(--cd-ease-out);
}
.site-footer a:hover,
.site-info a:hover {
  color: var(--cd-accent) !important;
}

.generate-back-to-top {
  background: var(--cd-accent-strong) !important;
  color: var(--cd-white) !important;
  border-radius: 50%;
  box-shadow: 0 10px 24px -12px rgba(20, 20, 20, .45);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .3s var(--cd-ease-out),
              background .3s var(--cd-ease-out);
}
.generate-back-to-top:hover {
  background: var(--cd-accent) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(193, 102, 47, .5);
}

/* ═══════════════════════════════════════════════════════════════════
   RÉDUCTION DE MOUVEMENT
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}