/* Theme Variation: Olikalari */
/* ==========================================================================
   Olikalari — variation minimaliste éditoriale (Twenty Twenty-Five style)
   Fond blanc, texte noir, une seule police (Manrope), pas d'effet.
   Sur la home : carousel plein écran + menu en bandeau bas → sticky top.
   ========================================================================== */

/* Police Manrope : chargée par AssetManager (wp_enqueue_style + preconnect),
   plus de @import bloquant ici. Fallback system-ui si non chargée. */

:root {
  --c-bg:           #ffffff;
  --c-bg-soft:      #f7f7f6;
  --c-surface:      #ffffff;
  --c-surface-2:    #fafaf9;
  --c-line:         #00000014;
  --c-line-strong:  #00000028;
  --c-ink:          #111111;
  --c-ink-soft:     #333333;
  --c-ink-muted:    #6b6b6b;
  --c-accent:       #111111;
  --c-accent-2:     #111111;
  --ff-serif: 'Manrope', system-ui, sans-serif;
  --ff-sans:  'Manrope', system-ui, sans-serif;
  --ff-mono:  'Manrope', ui-monospace, monospace;
  --maxw-prose:   75ch;
  --maxw-content: 1280px;
  --maxw-wide:    1480px;
}

body::before, body::after { display: none !important; content: none !important; }

html, body {
  background: #ffffff;
  color: #111111;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  /* Body en 18px : lisible, plus modeste que 22px (l'ancien rendait
     l'ensemble massif, surtout les h1 hero qui se basaient sur rem). */
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color-scheme: only light;
  forced-color-adjust: none;
}

/* ==========================================================================
   Typographie
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  color: #111111;
  letter-spacing: -0.01em;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* Échelle typographique éditoriale cohérente — DOIT être strictement
   décroissante h1 > h2 > h3 > h4 > h5 > h6. Surcharge l'échelle générée
   par var(--font-size-h*) qui produisait une inversion (h4 > h2). */
h1 { font-size: 2rem;    line-height: 1.15; margin: 0 0 1.5rem;  letter-spacing: -0.01em; }
h2 { font-size: 1.5rem;  line-height: 1.2;  margin: 2.5rem 0 1rem;   letter-spacing: -0.005em; }
h3 { font-size: 1.2rem;  line-height: 1.3;  margin: 2rem 0 0.75rem; }
h4 { font-size: 1.05rem; line-height: 1.35; margin: 1.75rem 0 0.6rem; font-weight: 500; }
h5 { font-size: 0.92rem; line-height: 1.4;  margin: 1.5rem 0 0.5rem;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #333333; }
h6 { font-size: 0.82rem; line-height: 1.45; margin: 1.25rem 0 0.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #666666; }
p { margin: 0 0 1.25em; color: #111111; }

/* Hyperliens dans le contenu : bleu lisible (WCAG AA sur fond clair),
   conservé souligné pour l'accessibilité. Les contextes spécifiques
   (header, footer, breadcrumbs, cards) ré-overrident plus bas. */
a {
  color: #ef7c33;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 120ms ease, opacity 150ms ease;
}
a:hover { color: #ef7c33; opacity: 1; }
a:focus-visible { outline: 2px solid #ef7c33; outline-offset: 2px; border-radius: 2px; }

em, i {
  font-style: italic;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #111111;
}

/* Alignement « Justifié » (Gutenberg : option ajoutée par JustifyAlignment.php).
   Activation de la césure douce pour éviter les rivières blanches en typo web. */
.has-text-align-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* ==========================================================================
   Header — sticky top:0 par défaut. Sur la home avec carousel plein écran,
   il devient bandeau fixe en bas, puis bascule sticky-top après le scroll.
   ========================================================================== */
body > header,
.site-header,
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid #00000014;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  min-width: 0;
  /* Ombre large et subtile au-dessus ET en-dessous du menu pour le détacher
     visuellement de la page, qu'il soit en bas du hero ou collé au top. */
  box-shadow:
    0 -10px 28px -8px rgba(0, 0, 0, 0.07),
    0 10px 28px -8px rgba(0, 0, 0, 0.07);
}

.site-header > * { min-width: 0; }
.site-header .banner,
.site-header .site-branding,
.site-header__branding { flex: 0 0 auto; }
.site-header .language-switcher,
.site-header ul.lang-switcher { flex: 0 0 auto; align-self: center; }

.site-header .site-branding,
.site-header__branding {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* Slogan (tagline WP) en tout petit, sous le nom du site dans le menu. */
.site-header .banner__home {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  line-height: 1;
}
.site-header .banner__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  line-height: 1.1;
}
.site-header .banner__tagline {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b6b;
  line-height: 1.1;
  margin-top: 0.05rem;
}

.site-header a,
.site-header .banner__home,
.site-header .site-title a {
  color: #111111;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.site-header .site-title a::before {
  content: '◐';
  font-family: 'Manrope', system-ui, sans-serif;
  color: #111111;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: 1.2em;
}

.site-header .nav,
.site-header nav.nav--desktop { flex: 1 1 auto; min-width: 0; }

.site-header .nav__list,
.site-header .nav__list--root,
.site-header nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.1rem 0.25rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.site-header .nav__item,
.site-header nav li { margin: 0; list-style: none; }

.site-header .nav__link,
.site-header nav a:not(.banner__home):not([class*="language-switcher"]) {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: #333333;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.site-header .nav__link:hover,
.site-header nav a:not(.banner__home):not([class*="language-switcher"]):hover {
  color: #111111;
  background: #00000014;
  opacity: 1;
}

.site-header .nav__item--current > .nav__link,
.site-header .nav__item--ancestor > .nav__link,
.site-header nav .current-menu-item > a,
.site-header nav .current-menu-ancestor > a,
.site-header nav a[aria-current] {
  color: #111111;
  background: #f4f4f3;
  border: 1px solid #00000028;
  text-decoration: none;
}

/* ==========================================================================
   Sous-menu desktop : dropdown propre + item courant SANS encadrement,
   juste un renforcement de couleur (demande UX).
   ========================================================================== */
.site-header .nav--desktop .nav__sublist {
  background: #ffffff;
  border: 1px solid #00000014;
  border-radius: 2px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
  padding: 0;
  min-width: 11rem;
  overflow: hidden;
  margin-top: 0;
  /* Override des règles flex de `.site-header nav ul` plus haut, qui étaient
     prévues pour le menu horizontal (flex-row + center). En sublist on veut :
       - empilement vertical
       - items en pleine largeur (align-items: stretch, pas center)
       - aucun gap interne (les hovers se touchent visuellement) */
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

/* Zone-pont invisible au-dessus du sous-menu : couvre l'espace entre le
   parent et le dropdown pour que la souris puisse traverser sans perdre
   le :hover. La hauteur (8px) doit couvrir la marge visuelle souhaitée. */
.site-header .nav--desktop .nav__sublist::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
  background: transparent;
}
/* Le hover est posé sur le <li> pour que le surlignage occupe toute la
   largeur du dropdown (le <a> est calé à gauche, sans padding-left
   asymétrique qui créerait une gouttière non hoverable). */
.site-header .nav--desktop .nav__sublist .nav__item {
  margin: 0;
  padding: 0;
  background: transparent;
  transition: background 100ms ease;
}
.site-header .nav--desktop .nav__sublist .nav__item:hover,
.site-header .nav--desktop .nav__sublist .nav__item:focus-within {
  background: #f4f4f3;
}
.site-header .nav--desktop .nav__sublist .nav__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.3rem 0.55rem;
  border-radius: 0;
  font-size: 0.72rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #444444;
  background: transparent;
}
.site-header .nav--desktop .nav__sublist .nav__item:hover .nav__link,
.site-header .nav--desktop .nav__sublist .nav__item:focus-within .nav__link {
  color: #111111;
  background: transparent;
}

/* Item courant dans un sous-menu : juste couleur renforcée, pas de cadre.
   Override des règles de surface/bordure héritées du niveau racine. */
.site-header .nav--desktop .nav__sublist .nav__item--current > .nav__link,
.site-header .nav--desktop .nav__sublist .nav__item--ancestor > .nav__link,
.site-header .nav--desktop .nav__sublist .current-menu-item > a,
.site-header .nav--desktop .nav__sublist a[aria-current] {
  background: transparent;
  border-color: transparent;
  color: #000000;
  font-weight: 700;
}

/* Petit indicateur ▾ visuel à côté des items qui ont des enfants. */
.site-header .nav--desktop .nav__item--has-children > .nav__link::after {
  content: ' ▾';
  font-size: 0.75em;
  opacity: 0.55;
  margin-left: 0.15em;
}

/* Menu compact : single-line (pas de wrap), sublist peut sortir verticalement.
   Override de la règle générique flex-wrap: wrap héritée de l'en-tête. */
.site-header .nav__list {
  gap: clamp(0.1rem, 0vw + 0.15rem, 0.35rem);
  flex-wrap: nowrap;
  overflow: visible;
}
.site-header .nav--desktop .nav__list > .nav__item > .nav__link {
  padding: clamp(0.3rem, 0.2rem + 0.15vw, 0.45rem) clamp(0.35rem, 0.2rem + 0.4vw, 0.7rem);
  font-size: clamp(0.72rem, 0.5rem + 0.4vw, 0.88rem);
  letter-spacing: -0.005em;
}

/* Note : le menu bascule en burger à 1088px (67.99rem) via menu.css.
   Au-dessus, font-size et padding scalent automatiquement via clamp() →
   le menu ne passe jamais sur 2 lignes. */

/* Switcher de langue */
.language-switcher,
nav[aria-label*="langue" i],
nav[aria-label*="language" i] {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.75rem;
  background: none;
  border: none;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.language-switcher li { margin: 0; }
.language-switcher a,
.language-switcher__link {
  color: #6b6b6b;
  font-weight: 400;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.language-switcher__flag {
  font-size: 1.25rem;
  line-height: 1;
  /* Désactive l'underline du parent <a> sur l'emoji. */
  text-decoration: none;
  /* Drapeaux non-actifs : noir & blanc total. */
  filter: grayscale(1);
  transition: filter 150ms ease;
}
/* Variante SVG : 16px de haut, largeur auto (ratio 4:3 du SVG). */
.language-switcher__flag--svg {
  height: 16px;
  width: auto;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.language-switcher a:hover .language-switcher__flag,
.language-switcher a:focus-visible .language-switcher__flag,
.language-switcher__item--current .language-switcher__flag {
  filter: grayscale(0);
}
.language-switcher a:hover { opacity: 0.85; background: none; }
.language-switcher__item--current a,
.language-switcher .is-active a,
.language-switcher__link--current,
.language-switcher [aria-current] {
  color: #111111;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  background: none;
  box-shadow: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-main, main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem 0 6rem;
  background: #ffffff;
}
article, .post, .page {
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
}
.page__header, .entry-header, .post__header {
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 2rem 2rem;
}
.page__title, .entry-title, .post__title {
  /* Hero éditorial fluide : ~36 px en mobile, ~48 px en desktop large.
     Le 4rem précédent (88 px à root 22 px) écrasait toute la page. */
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #111111;
  text-align: center;
}
.page__content, .entry-content, .post__content {
  /* Colonne de lecture centrée dans le `<main>` large.
     `--maxw-content` (720px) cadre la prose ; les enfants .alignwide /
     .alignfull peuvent toujours déborder via leur propre règle. */
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 2rem;
}

.page__content .wp-block-paragraph, .page__content p{
  width:100%;
  text-align:justify;
}

/* ==========================================================================
   Hero / sections — neutralise les effets Lunar
   ========================================================================== */
.hero, .front-hero {
  position: relative;
  text-align: center;
  padding: 4rem 2rem 5rem;
  margin: 0 0 3rem;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  isolation: auto;
}
.hero::before, .hero::after,
.front-hero::before, .front-hero::after { display: none !important; content: none !important; }

.hero__eyebrow, .front-hero__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.hero h1, .front-hero h1 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: #111111;
  margin: 0 auto 1.5rem;
  max-width: 22ch;
}
.hero h1 em, .front-hero h1 em {
  font-style: italic;
  font-weight: 400;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #111111;
}
.hero__lead, .front-hero__lead {
  font-size: 1.05rem;
  color: #333333;
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.hero__cta, .front-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Boutons — style marque, orange + lift, ombre douce */
.btn, button, .wp-block-button__link, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 0;
  background: #ef7c33;
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 2px 6px rgba(239, 124, 51, 0.18);
  transition: background 180ms ease, color 180ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn:hover, button:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
  background: #d96820;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(239, 124, 51, 0.32);
}
.btn:active, button:active, .wp-block-button__link:active, input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(239, 124, 51, 0.18);
}
.btn:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, input[type="submit"]:focus-visible {
  outline: 2px solid #ef7c33;
  outline-offset: 3px;
}

/* Variante secondaire — outline orange. Utilisée via `.btn--secondary`
   ou via le bloc Gutenberg « Bouton » avec le style « Contour ». */
.btn--secondary,
.btn--outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: #ef7c33;
  border: 1.5px solid #ef7c33;
  box-shadow: none;
}
.btn--secondary:hover,
.btn--outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: #ef7c33;
  color: #ffffff;
  border-color: #ef7c33;
  box-shadow: 0 10px 22px rgba(239, 124, 51, 0.32);
}

/* Compat ancien naming `.btn--primary` (= valeur par défaut désormais). */
.btn--primary, .btn-primary {
  background: #ef7c33;
  color: #ffffff;
  border: 0;
}

/* Grille features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem 2.5rem;
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
}
.feature-card {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: visible;
}
.feature-card:hover { border: none; transform: none; box-shadow: none; }
.feature-card__icon {
  width: 32px; height: 32px;
  font-size: 1rem;
  background: none;
  border: 1px solid #00000028;
  border-radius: 999px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feature-card__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  color: #111111;
}
.feature-card__desc { font-size: 0.95rem; color: #333333; margin: 0; }
.feature-card__link {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.9rem;
  text-transform: none;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  margin-top: auto;
  padding: 0;
}
.feature-card__link::after { content: ' →'; text-decoration: none; }
/* Micro-marge latérale sur les vignettes home (~4px) pour aérer la grille. */
.feature-card__media {
  margin: 0 0.25rem 0.75rem;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  overflow: hidden;
}
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.feature-card__media::after, .feature-card__media::before { display: none !important; content: none !important; }

/* Photos / covers : pas de désaturation ni d'overlay */
.media, .media-cover, .feature-cover, .page-cover, .hero-cover, figure.post-cover {
  position: relative; margin: 0; border-radius: 0; box-shadow: none; border: none; overflow: hidden;
}
.media img, .media-cover img, .feature-cover img,
.page-cover img, .hero-cover img, figure.post-cover img {
  width: 100%; height: 100%; display: block; object-fit: cover; filter: none;
}
.media::after, .media-cover::after, .feature-cover::after,
.page-cover::after, .hero-cover::after, figure.post-cover::after {
  display: none !important; content: none !important;
}

/* Featured image avec parallaxe (sans désaturation) */
figure.page-cover.page-cover--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: none;
  min-height: clamp(280px, 38vw, 480px);
  margin-bottom: 3rem;
}
@media (max-width: 900px), (hover: none) {
  figure.page-cover.page-cover--bg { background-attachment: scroll; }
}

/* ==========================================================================
   Fil d'Ariane — discret, espacé, séparateurs « › » entre items.
   ========================================================================== */
.breadcrumbs {
  font-size: 0.78rem;
  color: #6b6b6b;
  background: none;
  border: none;
  /* Calé à gauche, collé au menu. Padding-left = padding du menu pour
     l'alignement vertical avec le branding ; vertical réduit pour rester
     proche du haut. */
  padding: 0.25rem 1rem 0.4rem;
  max-width: none;
  margin: 0;
  letter-spacing: 0.01em;
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
/* Séparateur « › » entre items, sauf après le dernier. */
.breadcrumbs__item:not(:last-child)::after {
  content: '›';
  color: #c8c8c8;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1;
}
.breadcrumbs a {
  color: #6b6b6b;
  text-decoration: none;
  transition: color 120ms ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
/* Item courant : juste plus foncé + un peu plus dense (pas d'encadrement). */
.breadcrumbs [aria-current="page"] {
  color: #111111;
  font-weight: 600;
}

/* Mobile : font légèrement réduite, padding réduit. */
@media (max-width: 640px) {
  .breadcrumbs {
    font-size: 0.72rem;
    padding: 0.2rem 0.75rem 0.3rem;
    margin: 0;
  }
}

/* Footer */
body > footer, .site-footer {
  background: transparent;
  border-top: 1px solid #00000014;
  color: #111111;
  padding: 4rem 2rem 3rem;
  margin-top: 6rem;
}
body > footer a, .site-footer a { color: #111111; text-decoration: none; }
body > footer a:hover, .site-footer a:hover { opacity: 0.55; }

/* Réseaux sociaux dans le pied de page : icônes 1.2rem, gris doux puis
   foncé au hover. Le tout centré avec un peu d'air autour. */
.site-footer .social-links {
  margin: 1.25rem auto;
  gap: 1rem;
}
.site-footer .social-links__link {
  width: 2.75rem;
  height: 2.75rem;
  color: #6b6b6b;
  background: transparent;
}
.site-footer .social-links__link:hover,
.site-footer .social-links__link:focus-visible {
  /* On ne force PAS color ici pour laisser les couleurs de marque
     (.social-links__link--facebook etc., dans base.css) reprendre la
     main au survol. Juste un léger fond gris pour signaler la zone. */
  opacity: 1;
  background: #f4f4f3;
}
.site-footer .social-links__link svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Tableaux, code */
table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid #00000014; font-size: 0.95rem; }
th { font-weight: 700; }
tbody tr:hover { background: #fafaf9; }
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f7f7f6;
  color: #111111;
  border-radius: 4px;
}
code { padding: 0.1em 0.4em; font-size: 0.85em; }
pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border: 1px solid #00000014;
  font-size: 0.85rem;
}
pre code { background: none; padding: 0; }

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 0 0.5rem 1.25rem;
  border-left: 2px solid #111111;
  color: #333333;
  font-style: italic;
}

@media (max-width: 720px) {
  html, body { font-size: 18px; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.25rem; }
  .site-header nav ul { gap: 0.75rem 1rem; }
  .features-grid { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.5rem; }
  .hero, .front-hero { padding: 2.5rem 1.25rem 3rem; }
  .page__content, .entry-content, .post__content,
  .page__header, .entry-header, .post__header { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ==========================================================================
   Carousel plein écran (home + variation Olikalari)
   Injecté côté client par le mu-plugin (oli-test-styles).
   Hauteur = viewport moins la hauteur du header, pour que le menu vienne
   naturellement se poser sous le carousel (au bas du viewport au scrollY=0).
   ========================================================================== */
.carousel-fullscreen {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h, 75px));
  height: calc(100dvh - var(--header-h, 75px));
  margin: 0;
  overflow: hidden;
  background: #000;
  z-index: 1;
}
.carousel-fullscreen__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallaxe : l'image reste ancrée au viewport pendant que la page scrolle. */
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
@media (max-width: 900px), (hover: none) {
  /* iOS et tactiles ignorent ou bug avec attachment:fixed → scroll natif. */
  .carousel-fullscreen__slide { background-attachment: scroll; }
}
.carousel-fullscreen__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Voile sombre pour lisibilité du texte */
.carousel-fullscreen__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}
.carousel-fullscreen__caption {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 0 2rem;
  text-align: center;
  color: #ffffff;
}
.carousel-fullscreen__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(2rem, 1.4rem + 3vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 1.25rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.carousel-fullscreen__excerpt {
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.carousel-fullscreen__excerpt p { color: inherit; margin: 0; }

.carousel-fullscreen__dots {
  position: absolute;
  left: 50%;
  bottom: calc(var(--header-h, 75px) + 1.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}
.carousel-fullscreen__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.carousel-fullscreen__dot.is-active {
  background: #ffffff;
  transform: scale(1.2);
}
.carousel-fullscreen__dot:hover { background: rgba(255, 255, 255, 0.6); }

/* ==========================================================================
   Header sur la home avec carousel : suit le scroll naturellement (placé
   juste après le carousel), puis se colle au top via position: sticky.
   Pas de toggle JS — le menu monte progressivement avec la page jusqu'à
   atteindre le haut du viewport, où sticky:top:0 prend le relais.
   ========================================================================== */
body.has-fullscreen-hero .site-header {
  position: sticky;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border-top: none;
  border-bottom: 1px solid #00000014;
}

/* Quand le carousel est en place, le main commence à 100vh : pas de padding-top,
   et le hero/header de page sont masqués (le carousel sert de hero). */
body.has-fullscreen-hero main.site-main {
  padding-top: 0;
}
body.has-fullscreen-hero article.page--accueil > .page__header,
body.has-fullscreen-hero article.page--accueil > .page__content > section.hero,
body.has-fullscreen-hero article.page--accueil > .page__content > .breadcrumbs,
body.has-fullscreen-hero > nav.breadcrumbs {
  display: none;
}

/* La grille de features remonte sous le carousel avec un padding-block confortable */
body.has-fullscreen-hero article.page--accueil > .page__content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Quand on est en sticky-top, on doit compenser le hauteur du header pour
   éviter un saut visuel : aucun ajustement ici car sticky se substitue au flow. */

/* Mobile : carousel un peu moins haut, dots plus visibles */
@media (max-width: 640px) {
  .carousel-fullscreen { height: 100svh; }
  .carousel-fullscreen__caption { padding: 0 1.5rem; }
  .carousel-fullscreen__title { font-size: clamp(1.6rem, 1.4rem + 2vw, 2.4rem); }
  .carousel-fullscreen__dots { bottom: calc(var(--header-h, 100px) + 1rem); }
}

/* ==========================================================================
   Galeries Photos : image principale large + bande de miniatures sous l'image
   (présentation smartphone portée sur desktop, demande Olivier #12).
   Vidéos : conservent leur layout 2 colonnes (player + liste de titres).
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 960px;
  margin: 1rem auto 4rem;
  padding: 0 1.5rem;
}

/* Override : la galerie vidéos garde son layout 2 colonnes. */
.gallery--videos {
  grid-template-columns: 1fr minmax(220px, 300px);
  max-width: 1200px;
}

/* Page Vidéos : layout inversé — player large à gauche, listes des titres
   à droite. Vignettes des vidéos masquées (l'iframe YouTube affiche déjà
   la vidéo en cours), seuls le picto ▶ et la légende restent visibles. */
.gallery--videos .gallery__main { grid-column: 1; grid-row: 1; }
.gallery--videos .gallery__thumbs {
  grid-column: 2;
  grid-row: 1;
  /* Une seule colonne : liste verticale compacte de titres. */
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 0.15rem;
}
.gallery--videos .gallery__thumb-item { width: 100%; }
.gallery--videos .gallery__thumb-button {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  background: transparent;
  border-radius: 3px;
  text-align: left;
}
.gallery--videos .gallery__thumb-button:hover {
  background: #f4f4f3;
  transform: none;
}
.gallery--videos .gallery__thumb-button.is-active {
  background: #f4f4f3;
  border-color: transparent;
  box-shadow: none;
}
/* La vignette image n'est plus rendue. */
.gallery--videos .gallery__thumb-image {
  display: none;
}
/* Le picto ▶ reste affiché en début de ligne (à la place de la vignette). */
.gallery--videos .gallery__thumb-play {
  position: static;
  inset: auto;
  width: 1rem;
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #9a9a9a;
  text-shadow: none;
  pointer-events: none;
}
.gallery--videos .gallery__thumb-button.is-active .gallery__thumb-play,
.gallery--videos .gallery__thumb-button:hover .gallery__thumb-play {
  color: #111111;
}
/* Le caption (data-caption) est en alt — on l'expose via ::after pour l'avoir
   visible. Plus simple : on injecte le titre via .gallery__thumb-image[alt]
   sera plus complexe… On va plutôt rendre directement le caption depuis le
   template, voir ci-dessous. */
.gallery--videos .gallery__thumb-title {
  flex: 1 1 auto;
  font-size: 0.75rem;
  line-height: 1.25;
  color: inherit;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gallery__main {
  align-self: start;
  background: #ffffff;
}
/* Sticky uniquement sur la galerie vidéos (layout 2 colonnes). */
.gallery--videos .gallery__main {
  position: sticky;
  top: calc(var(--header-h, 75px) + var(--oli-admin-bar-offset, 0px) + 1rem);
}
.gallery__main-figure { margin: 0; }
.gallery__main-image,
.gallery__main-iframe {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.12);
  background: #f0f0f1;
}
.gallery__main-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.12);
  background: #000;
}
.gallery__main-frame .gallery__main-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gallery__main-caption {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: #6b6b6b;
  line-height: 1.4;
  font-style: italic;
}

/* Bande horizontale de miniatures sous l'image principale (galerie photos).
   La galerie vidéos surcharge ces règles (liste verticale de titres). */
.gallery__thumbs {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
.gallery__thumb-item { scroll-snap-align: start; }
.gallery__thumb-item { margin: 0; }
.gallery__thumb-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  background: #f0f0f1;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
  transition: border-color 120ms ease, transform 120ms ease;
}
/* Note : pas d'override aspect-ratio ici pour `.gallery--videos` ; sa propre
   règle plus haut force `aspect-ratio: auto` (liste verticale compacte de
   titres). */
.gallery__thumb-button:hover {
  border-color: rgba(0, 0, 0, 0.18);
  transform: scale(1.02);
}
.gallery__thumb-button.is-active {
  border-color: #111111;
  box-shadow: 0 0 0 2px #111111 inset;
}
.gallery__thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.gallery__empty {
  text-align: center;
  color: #6b6b6b;
  font-style: italic;
  padding: 3rem 1rem;
}

/* Lien chaîne YouTube sous le titre (page vidéos). */
.page__channel {
  text-align: center;
  margin: -0.75rem 0 1.5rem;
}
.page__channel-link {
  font-size: 0.85rem;
  color: #6b6b6b;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.page__channel-link:hover { color: #111111; }

/* Mobile : layout en colonne, vignettes en ligne scrollable horizontalement. */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 1rem;
  }
  .gallery__main { position: static; }
  .gallery__thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
  }

 .wp-block-image figure img{
    float:none !important;
    width:auto;
  }
}

.wp-block-image img{
  width:100%;
}

.floatleft{
  float:left;

  margin-right:20px;
  margin-bottom:20px;
}

.floatright{
  float:right;

  margin-left:20px;
  margin-bottom:20px;
}

/* ==========================================================================
   Lightbox photo : overlay plein écran avec navigation prev/next.
   Tous les boutons sont isolés (appearance:none + reset font) pour ne pas
   hériter des styles globaux d'Olikalari (Manrope, font-size, underline,
   text-decoration sur a/button, etc.).
   ========================================================================== */
.oli-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
  animation: oli-lightbox-fade 180ms ease-out;
}
@keyframes oli-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.oli-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  max-height: 100%;
}

.oli-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  cursor: pointer;
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  display: block;
}

.oli-lightbox__caption {
  margin: 0;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  border-radius: 999px;
  max-width: 80vw;
  pointer-events: none;
}

.oli-lightbox__counter {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Boutons : reset complet, on n'hérite d'AUCUN style du thème. */
.oli-lightbox__close,
.oli-lightbox__nav {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  text-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 120ms ease, transform 120ms ease;
  user-select: none;
}
.oli-lightbox__close:hover,
.oli-lightbox__close:focus-visible,
.oli-lightbox__nav:hover,
.oli-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.oli-lightbox__close {
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
}

.oli-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}
.oli-lightbox__nav--prev { left: 1.25rem; }
.oli-lightbox__nav--next { right: 1.25rem; }
.oli-lightbox__nav:active { transform: translateY(-50%) scale(0.95); }
.oli-lightbox__close:active { transform: scale(0.95); }

@media (max-width: 640px) {
  .oli-lightbox { padding: 3rem 0.75rem; }
  .oli-lightbox__nav { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
  .oli-lightbox__nav--prev { left: 0.5rem; }
  .oli-lightbox__nav--next { right: 0.5rem; }
}

/* ==========================================================================
   Bannière Olikalari sur les pages internes (toutes les pages sauf la home,
   qui porte la classe `body.home` et affiche déjà le carousel). Le menu
   sticky vient se coller juste en dessous au chargement, puis colle au top
   du viewport en scrollant — même comportement que sur la home, mais avec
   une image fixe au lieu du carousel.
   ========================================================================== */
body:not(.home)::before {
  display: block !important;
  content: '' !important;
  width: 100%;
  height: clamp(120px, 14vw, 220px);
  background-color: #ffffff;
  /* L'URL est surchargée par l'admin via la custom-property
     --oli-internal-banner-url (Apparence > Variations CSS). */
  background-image: var(--oli-internal-banner-url, url('../../img/banner.jpg'));
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Raffinements design (menu + cartes + accessibilité) — 2026-05
   ========================================================================== */

/* --- Menu : soulignement animé au survol (remplace la pastille de fond) --- */
.site-header .nav__link,
.site-header nav a:not(.banner__home):not([class*="language-switcher"]) {
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 0.15rem bottom 0.18rem;
  background-size: 0% 2px;
  transition: background-size 200ms ease, color 150ms ease, opacity 150ms ease;
}
.site-header .nav__link:hover,
.site-header nav a:not(.banner__home):not([class*="language-switcher"]):hover {
  color: #000000;
  background-color: transparent;
  background-size: calc(100% - 0.3rem) 2px;
}

/* Item courant : soulignement permanent + accent, sans encadrement. */
.site-header .nav__item--current > .nav__link,
.site-header .nav__item--ancestor > .nav__link,
.site-header nav .current-menu-item > a,
.site-header nav .current-menu-ancestor > a,
.site-header nav a[aria-current] {
  color: #000000;
  font-weight: 700;
  background-color: transparent;
  border: none;
  background-size: calc(100% - 0.3rem) 2px;
}

/* Le sous-menu garde son style propre (pas de soulignement glissant dedans). */
.site-header .nav--desktop .nav__sublist .nav__link {
  background-image: none;
}

/* --- Cartes de contenu : hover lift + léger zoom image --- */
.feature-card {
  transition: transform 220ms ease;
}
.feature-card__media img {
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.feature-card:hover {
  transform: translateY(-4px);
}
.feature-card:hover .feature-card__media img {
  transform: scale(1.045);
}
.feature-card__title {
  letter-spacing: -0.01em;
  line-height: 1.25;
}
/* Flèche du lien qui glisse au survol de la carte. */
.feature-card__link {
  text-decoration-color: #00000040;
  transition: text-decoration-color 150ms ease;
}
.feature-card__link::after {
  content: ' →';
  text-decoration: none;
  display: inline-block;
  transition: transform 200ms ease;
}
.feature-card:hover .feature-card__link {
  text-decoration-color: currentColor;
}
.feature-card:hover .feature-card__link::after {
  transform: translateX(0.25rem);
}

/* --- Accessibilité : focus visible homogène (clavier) --- */
.site-header a:focus-visible,
.feature-card__link:focus-visible,
.carousel-fullscreen__dot:focus-visible,
a.btn:focus-visible,
.oli-lightbox__nav:focus-visible,
.oli-lightbox__close:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respecte les préférences de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .feature-card__media img,
  .feature-card__link::after,
  .site-header .nav__link {
    transition: none;
  }
  .feature-card:hover { transform: none; }
  .feature-card:hover .feature-card__media img { transform: none; }
}

/* ==========================================================================
   Lisibilité de lecture + skip-link + mode sombre auto — 2026-05
   ========================================================================== */

/* --- Largeur de lecture confortable (~60ch) sur le contenu rédactionnel ---
   Les blocs « pleine largeur » (hero, grille, carousel, figures larges)
   restent hors contrainte ; seuls les éléments de prose sont centrés. */
.page__content > p,
.page__content > ul,
.page__content > ol,
.page__content > h2,
.page__content > h3,
.page__content > h4,
.page__content > blockquote,
.page__content > pre,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > pre,
.post__content > p,
.post__content > ul,
.post__content > ol,
.post__content > h2,
.post__content > h3,
.post__content > h4,
.post__content > blockquote,
.post__content > pre {
  text-align:justify;
  /* Alignement à gauche du conteneur : avec `auto/auto`, chaque enfant
     se centrait sur sa propre max-width — qui varie selon la police
     (60ch en ADLaM ≫ 60ch en Manrope), créant des décalages visuels
     entre titres et paragraphes. */
  margin-left: 0;
  margin-right: 0;
}
.page__content > ul, .page__content > ol,
.entry-content > ul, .entry-content > ol,
.post__content > ul, .post__content > ol {
  padding-left: 1.4em;
}
.page__content blockquote,
.entry-content blockquote,
.post__content blockquote {
  border-left: 3px solid var(--c-line-strong);
  padding-left: 1em;
  font-style: italic;
  color: var(--c-ink-soft);
}

/* --- Skip-link : invisible mais focusable, devient visible au focus clavier --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  z-index: 9999;
  padding: 0.6rem 1rem;
  background: #111111;
  color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* --- Mode sombre automatique (suit la préférence système) ---------------- */
@media (prefers-color-scheme: dark) {
  html, body {
    background: #0f0f10;
    color: #e8e8e6;
    color-scheme: dark;
  }
  h1, h2, h3, h4, h5, h6,
  p, em, i { color: #f1f1ef; }
  /* Liens en bleu clair sur fond sombre (contraste AA conservé), hover
     en orange de marque pour rester cohérent avec le light mode. */
  a { color: #7fb6e6; }
  a:hover,
  a:focus-visible { color: #ef7c33; }
  a:focus-visible { outline-color: #ef7c33; }

  /* Header / bandeau */
  .site-header,
  header.site-header {
    background: rgba(18, 18, 19, 0.85);
    border-bottom-color: #ffffff1f;
  }
  .site-header a,
  .site-header .banner__title,
  .site-header .nav__link,
  .site-header nav a:not(.banner__home):not([class*="language-switcher"]) {
    color: #e8e8e6;
  }
  .site-header .banner__tagline { color: #9a9a97; }
  .site-header .nav__link:hover,
  .site-header nav a:not(.banner__home):not([class*="language-switcher"]):hover { color: #ef7c33; }
  .site-header .nav__item--current > .nav__link,
  .site-header nav a[aria-current] { color: #ffffff; }

  /* Sous-menu déroulant */
  .site-header .nav--desktop .nav__sublist {
    background: #1a1a1b;
    border-color: #ffffff1f;
  }
  .site-header .nav--desktop .nav__sublist .nav__link { color: #cfcfcc; }
  .site-header .nav--desktop .nav__sublist .nav__item:hover { background: #262627; }
  .site-header .nav--desktop .nav__sublist .nav__item:hover .nav__link { color: #ffffff; }

  /* Header sur la home (carousel plein écran) — override clair forcé hors
     dark mode → repassage en sombre pour rester lisible avec le texte
     clair défini plus haut. */
  body.has-fullscreen-hero .site-header {
    background: rgba(18, 18, 19, 0.92);
    border-bottom-color: #ffffff1f;
  }

  /* Zone de contenu principale — `.site-main` portait `background: #fff`
     hors dark, ce qui couvrait le body sombre et rendait les titres clairs
     (#f1f1ef) illisibles sur fond blanc. On repasse le fond en sombre. */
  .site-main,
  main {
    background: #0f0f10;
  }
  .gallery__main {
    background: #1a1a1b;
  }
  /* Bannière header des pages internes (rectangle sous le menu) — aussi
     forcé en blanc hors dark mode. */
  body:not(.home)::before {
    background-color: #0f0f10;
  }
  /* Titres secondaires (h5/h6) avec leurs propres couleurs grisées en
     light mode — on les rattrape pour qu'ils restent lisibles en dark. */
  h5 { color: #d1d1cd; }
  h6 { color: #b9b9b6; }
  /* Titres hero des pages/posts/entries : sélecteur plus spécifique
     que `h1` donc échappe au override générique des dark mode plus haut. */
  .page__title,
  .entry-title,
  .post__title { color: #f1f1ef; }
  /* Paragraphe : la règle générique `p { color: #111111 }` (poids
     équivalent à la règle dark `p { color: #f1f1ef }`) gagne par cascade
     (dark vient plus tard), mais on précise ici pour les cas où une
     règle plus spécifique aurait été ajoutée plus haut. */
  .page__content p,
  .post__content p { color: inherit; }

  /* Cartes de contenu */
  .feature-card__title { color: #f1f1ef; }
  .feature-card__desc { color: #b9b9b6; }
  .feature-card__link { color: #f1f1ef; }
  .feature-card__icon { border-color: #ffffff2e; }

  /* Code inline / blocs */
  code, kbd, pre, .code {
    background: #1c1c1d;
    color: #e8e8e6;
    border-color: #ffffff1f;
  }
  blockquote { color: #b9b9b6; }

  /* Lignes, séparateurs */
  hr { border-color: #ffffff1f; }
}

/* ==========================================================================
   GUTENBERG — Style éditorial cohérent pour tous les blocs natifs.
   Pensé pour être sobre, raffiné, lisible. Pas de décoration excessive.
   ========================================================================== */

/* --- Citations : block-quote standard ----------------------------------- */
.wp-block-quote,
blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid #111111;
  color: #2a2a2a;
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.55;
}
.wp-block-quote cite,
blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.78em;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6b6b;
}
.wp-block-quote cite::before,
blockquote cite::before { content: '— '; }

/* --- Pullquote : grande citation centrée façon revue --------------------- */
.wp-block-pullquote {
  margin: 3rem -0.5rem;
  padding: 2rem 1rem;
  border-top: 1px solid #00000028;
  border-bottom: 1px solid #00000028;
  text-align: center;
}
.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.wp-block-pullquote p {
  font-family: 'ADLaM Display', Georgia, serif;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
  line-height: 1.3;
  font-style: italic;
  color: #111111;
  max-width: 30ch;
  margin: 0 auto;
}
.wp-block-pullquote cite {
  display: block;
  margin-top: 1.25rem;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6b6b;
}

/* --- Code inline + blocs ------------------------------------------------- */
code, kbd, samp, .wp-block-code code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 0.9em;
  background: #f4f4f3;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  border: 1px solid #00000010;
}
.wp-block-code,
pre.wp-block-code,
.wp-block-preformatted {
  background: #1c1c1d;
  color: #f1f1ef;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  border: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  overflow-x: auto;
  margin: 1.75rem 0;
}
.wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
  font-size: inherit;
}

/* Préformaté : pour texte technique sans coloration, plus discret. */
.wp-block-preformatted {
  background: #f7f7f6;
  color: #1a1a1a;
  border-left: 3px solid #00000028;
  border-radius: 2px;
  font-size: 0.92rem;
}

/* --- Verse : poésie ----------------------------------------------------- */
.wp-block-verse {
  font-family: 'ADLaM Display', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #2a2a2a;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, transparent, rgba(239, 124, 51, 0.04));
  border-left: 2px solid #ef7c3380;
  white-space: pre-wrap;
}

/* --- Tableau : sobre, lisible ------------------------------------------- */
.wp-block-table {
  margin: 2rem 0;
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}
.wp-block-table th,
.wp-block-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #0000001a;
  vertical-align: top;
}
.wp-block-table thead th {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #444444;
  background: #fafafa;
  border-bottom: 2px solid #00000028;
}
.wp-block-table tbody tr:hover { background: #fafafa; }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }

/* --- Boutons ----------------------------------------------------------- */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.wp-block-button__link,
.wp-element-button {
  /* L'apparence par défaut (orange marque, ombre douce, lift au hover)
     est déjà définie sur le sélecteur générique `.btn, button,
     .wp-block-button__link, …` plus haut dans la feuille. On garde ici
     uniquement les marges/structure spécifiques au bloc Gutenberg. */
  display: inline-block;
  padding: 0.85rem 2rem;
}
/* Variante « Contour » : style secondaire défini plus haut via le
   sélecteur `.wp-block-button.is-style-outline > .wp-block-button__link`. */

/* --- Colonnes ---------------------------------------------------------- */
.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, auto-fit), minmax(min(100%, 14rem), 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
@media (max-width: 720px) {
  .wp-block-columns { grid-template-columns: 1fr; gap: 1.25rem; }
}
.wp-block-column { min-width: 0; }
.wp-block-column > *:first-child { margin-top: 0; }
.wp-block-column > *:last-child  { margin-bottom: 0; }

/* --- Séparateurs : 3 styles -------------------------------------------- */
.wp-block-separator,
hr.wp-block-separator {
  border: 0;
  height: 1px;
  background: #00000028;
  margin: 2.5rem auto;
  max-width: 4rem;
}
.wp-block-separator.is-style-wide,
hr.wp-block-separator.is-style-wide {
  max-width: 100%;
}
.wp-block-separator.is-style-dots,
hr.wp-block-separator.is-style-dots {
  background: none;
  height: auto;
  text-align: center;
  line-height: 1;
  border: 0;
  max-width: 100%;
}
.wp-block-separator.is-style-dots::before,
hr.wp-block-separator.is-style-dots::before {
  content: '· · ·';
  letter-spacing: 0.6em;
  font-size: 1.5rem;
  color: #00000060;
}

/* --- Details / accordéon ----------------------------------------------- */
.wp-block-details {
  margin: 1rem 0;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border: 1px solid #00000018;
  border-radius: 6px;
  background: #fafafa;
  transition: border-color 150ms ease, background 150ms ease;
}
.wp-block-details:hover { border-color: #00000028; background: #f6f6f5; }
.wp-block-details[open] {
  border-color: #ef7c3380;
  background: #fefdfb;
}
.wp-block-details summary {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 300;
  color: #ef7c33;
  transition: transform 200ms ease;
}
.wp-block-details[open] summary::after { content: '−'; transform: translateY(-50%) rotate(180deg); }
.wp-block-details > *:not(summary) {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #00000010;
}

/* --- Listes : ajustements visuels ------------------------------------- */
ul, ol {
  padding-left: 1.5rem;
  margin: 1rem 0 1.25rem;
}
ul ul, ul ol, ol ul, ol ol { margin: 0.25rem 0 0.25rem; }
li { margin-bottom: 0.25rem; }
ul li::marker { color: #ef7c33; }
ol li::marker { color: #6b6b6b; font-weight: 600; }

/* --- Listes hiérarchiques (style « Hiérarchique » sur core/list) -------
   Numérotation à la Word : 1, 1.1, 1.1.1 sur trois niveaux d'imbrication.
   Activée via le sélecteur de Style côté éditeur Gutenberg ; rendu CSS
   uniquement (front), aucun JS. Issue #22. */
.wp-block-list.is-style-hierarchical,
.wp-block-list.is-style-hierarchical ol {
  list-style: none;
  padding-left: 1.75em;
}
.wp-block-list.is-style-hierarchical {
  counter-reset: oli-lvl1;
}
.wp-block-list.is-style-hierarchical > li {
  counter-increment: oli-lvl1;
  counter-reset: oli-lvl2;
  position: relative;
}
.wp-block-list.is-style-hierarchical > li::before {
  content: counter(oli-lvl1) ". ";
  position: absolute;
  left: -1.75em;
  font-weight: 600;
  color: #333333;
}
.wp-block-list.is-style-hierarchical ol > li {
  counter-increment: oli-lvl2;
  counter-reset: oli-lvl3;
}
.wp-block-list.is-style-hierarchical ol > li::before {
  content: counter(oli-lvl1) "." counter(oli-lvl2) " ";
  position: absolute;
  left: -1.75em;
  font-weight: 600;
  color: #555555;
}
.wp-block-list.is-style-hierarchical ol ol > li {
  counter-increment: oli-lvl3;
}
.wp-block-list.is-style-hierarchical ol ol > li::before {
  content: counter(oli-lvl1) "." counter(oli-lvl2) "." counter(oli-lvl3) " ";
  position: absolute;
  left: -2em;
  font-weight: 600;
  color: #777777;
}

/* --- Marquage et exposants -------------------------------------------- */
mark {
  background: #fef4e0;
  color: #111111;
  padding: 0 0.2em;
  border-radius: 2px;
}
sub, sup { font-size: 0.72em; }

/* --- Liens dans le contenu : soulignement glissant -------------------- */
.page__content a:not(.wp-element-button):not(.wp-block-button__link),
.post__content a:not(.wp-element-button):not(.wp-block-button__link) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: #ef7c33;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 150ms ease, color 150ms ease;
}
.page__content a:hover,
.post__content a:hover {
  color: #ef7c33;
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   Filtres par dossier au-dessus de la galerie photos.
   Une rangée de boutons « Tous | <dossier> | … ». Au clic, la galerie
   principale (image + thumbs) bascule sur les photos du dossier (JS).
   ========================================================================== */
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 960px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
}
.gallery__filter {
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.gallery__filter:hover {
  border-color: #ef7c33;
  color: #ef7c33;
}
.gallery__filter.is-active {
  background: #ef7c33;
  border-color: #ef7c33;
  color: #ffffff;
}
.gallery__filter:focus-visible {
  outline: 2px solid #ef7c33;
  outline-offset: 2px;
}

/* ==========================================================================
   Mode sombre — overrides des blocs Gutenberg / éléments éditoriaux.
   Ce second bloc dark vient APRÈS les définitions Gutenberg pour gagner
   par cascade les fonds/couleurs clairs forcés plus haut (sélecteurs
   `.wp-block-*` plus spécifiques que la version générique des éléments).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* --- Code inline : passe le fond clair en gris foncé ------------------ */
  code,
  kbd,
  samp,
  .wp-block-code code {
    background: #1c1c1d;
    color: #e8e8e6;
    border-color: #ffffff1a;
  }

  /* --- Blocs <pre>, code, préformaté ----------------------------------- */
  .wp-block-code,
  pre.wp-block-code {
    background: #161617;
    color: #e8e8e6;
    border: 1px solid #ffffff14;
  }
  .wp-block-preformatted {
    background: #1c1c1d;
    color: #e8e8e6;
    border-left-color: #ffffff28;
  }

  /* --- Citations -------------------------------------------------------- */
  .wp-block-quote,
  blockquote {
    border-left-color: #ef7c33;
    color: #cfcfcc;
    background: #181819;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    border-radius: 0 4px 4px 0;
  }
  .wp-block-quote cite,
  blockquote cite { color: #9a9a97; }

  /* --- Pullquote ------------------------------------------------------- */
  .wp-block-pullquote {
    border-top-color: #ffffff28;
    border-bottom-color: #ffffff28;
  }

  /* --- Tableaux -------------------------------------------------------- */
  table th,
  table td,
  .wp-block-table th,
  .wp-block-table td {
    border-bottom-color: #ffffff14;
  }
  .wp-block-table thead th {
    background: #1c1c1d;
    color: #cfcfcc;
    border-bottom-color: #ffffff28;
  }
  tbody tr:hover,
  .wp-block-table tbody tr:hover { background: #1f1f20; }

  /* --- Details / accordéon --------------------------------------------- */
  .wp-block-details {
    background: #181819;
    border-color: #ffffff14;
    color: #e8e8e6;
  }
  .wp-block-details:hover {
    background: #1c1c1d;
    border-color: #ffffff28;
  }
  .wp-block-details[open] {
    background: #1a1a1b;
    border-color: #ef7c33b3;
  }
  .wp-block-details > *:not(summary) {
    border-top-color: #ffffff14;
  }
}

/* ==========================================================================
   Mode sombre — citations / verse / pullquote scopés au contenu éditorial.
   Les sélecteurs `.page__content blockquote` et `.wp-block-pullquote p`
   forcent des couleurs foncées (var(--c-ink-soft) = #333, #111…) qui
   écrasent les règles génériques du bloc dark — on les rattrape ici avec
   assez de spécificité pour passer devant.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .page__content blockquote,
  .entry-content blockquote,
  .post__content blockquote,
  .page__content .wp-block-quote,
  .entry-content .wp-block-quote,
  .post__content .wp-block-quote {
    color: #d6d6d3;
  }
  .page__content .wp-block-quote p,
  .entry-content .wp-block-quote p,
  .post__content .wp-block-quote p,
  .page__content blockquote p,
  .entry-content blockquote p,
  .post__content blockquote p {
    color: #e8e8e6;
  }

  /* Pullquote : grande citation centrée. */
  .wp-block-pullquote p,
  .page__content .wp-block-pullquote p,
  .entry-content .wp-block-pullquote p,
  .post__content .wp-block-pullquote p {
    color: #f1f1ef;
  }
  .wp-block-pullquote cite,
  .page__content .wp-block-pullquote cite,
  .entry-content .wp-block-pullquote cite,
  .post__content .wp-block-pullquote cite {
    color: #a8a8a5;
  }

  /* Bloc verse (poème) : italique aérien sur dégradé orange ténu. */
  .wp-block-verse,
  .page__content .wp-block-verse,
  .entry-content .wp-block-verse,
  .post__content .wp-block-verse {
    color: #e8e8e6;
    background: linear-gradient(180deg, transparent, rgba(239, 124, 51, 0.08));
    border-left-color: #ef7c33b3;
  }
}

/* ==========================================================================
   Mode sombre — séparateurs (hr) et bordures de tables Gutenberg.
   Le séparateur WP est dessiné via `background` (pas un border), donc le
   fix générique `hr { border-color: … }` n'a aucun effet. Les bordures
   inline-stylées de tables Gutenberg sont aussi en clair par défaut.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .wp-block-separator,
  hr.wp-block-separator {
    background: #ffffff28;
  }
  .wp-block-separator.is-style-dots,
  hr.wp-block-separator.is-style-dots {
    background: none;
  }
  .wp-block-separator.is-style-dots::before,
  hr.wp-block-separator.is-style-dots::before {
    color: #ffffff66;
  }

  /* Tables : on rattrape toutes les bordures (Gutenberg pose souvent des
     border-right/left inline-style en clair quand l'utilisateur active
     les bordures de cellule via l'éditeur). */
  .wp-block-table th,
  .wp-block-table td {
    border-color: #ffffff14 !important;
  }
  .wp-block-table thead th {
    border-bottom-color: #ffffff28 !important;
  }
}

/* ==========================================================================
   Mode sombre — overrides des tokens globaux (--color-bg / text / border /
   muted / accent) utilisés par les composants définis dans `base.css`,
   notamment `.post-card` (cards d'archive d'articles). Sans ce repli, les
   cards apparaissaient toutes blanches sur fond noir.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:               #181819;
    --color-text:             #e8e8e6;
    --color-muted:            #a8a8a5;
    --color-border:           #ffffff14;
    --color-accent:           #ef7c33;
    --color-accent-contrast:  #ffffff;
  }
  .post-card {
    background: #181819;
    border-color: #ffffff14;
  }
  .post-card:hover,
  .post-card:focus-within {
    border-color: #ef7c33;
    box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.55);
  }
  .post-card__thumb,
  .post-card__thumb--empty {
    background: #1c1c1d;
  }
  .post-card__title { color: #f1f1ef; }
  .post-card__meta,
  .post-card__excerpt { color: #a8a8a5; }
}

/* ==========================================================================
   MENU MOBILE — Refonte from scratch (2026-06-11).
   Placé en fin de variation pour gagner la cascade contre toutes les
   règles `.site-header .nav__*` plus haut dans le fichier. Désactive
   `nav--desktop` sous 68 rem et impose un drawer slide-in moderne.
   ========================================================================== */
@media (max-width: 67.99rem) {

    /* Disparition du menu desktop. Préfixé `.site-header` pour battre
       `.site-header nav.nav--desktop` (0,0,2,1). */
    .site-header .nav--desktop,
    .site-header nav.nav--desktop { display: none; }

    /* Header : burger + branding à gauche, langues poussées à droite.
       `flex-direction: row` explicite pour battre l'override `@media
       (max-width: 720px)` plus haut qui passe en `column`. */
    .site-header,
    header.site-header {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    .site-header .language-switcher,
    .site-header ul.lang-switcher { margin-left: auto; }

    /* Évite la barre de scroll horizontale due au drawer translaté en
       dehors du viewport (`transform: translateX(100%)` + `right: 0`). */
    html,
    body { overflow-x: hidden; }

    /* ------------------ Burger ------------------
       Pastille orange marque, ombre marquée, animation X au clic.
       Plus gros (52×52) pour pouce. */
    .site-header .nav-toggle,
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 52px;
        height: 52px;
        padding: 0;
        background: #ef7c33;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(239, 124, 51, 0.35);
        color: #ffffff;
        cursor: pointer;
        position: relative;
        z-index: 1010;
        transition: background 180ms ease, transform 180ms ease, box-shadow 200ms ease;
        margin: 0;
    }
    .site-header .nav-toggle:hover,
    .nav-toggle:hover {
        background: #d96820;
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 8px 20px rgba(239, 124, 51, 0.45);
    }
    .site-header .nav-toggle:focus-visible,
    .nav-toggle:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }
    .nav-toggle__bar {
        display: block;
        width: 26px;
        height: 3px;
        background: #ffffff;
        border-radius: 3px;
        transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1), opacity 180ms ease;
        transform-origin: center;
    }
    .nav-toggle__label {
        position: absolute;
        width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0);
        white-space: nowrap; border: 0;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
        transform: translateY(8px) 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(-8px) rotate(-45deg);
    }

    /* ------------------ Drawer ------------------
       Slide depuis la droite, fond sombre éditorial, scroll interne. */
    body .nav--mobile,
    body nav.nav--mobile {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        left: auto;
        width: min(90vw, 440px);
        height: 100vh;
        height: 100dvh; /* dynamic vh : tient compte de la barre URL mobile */
        max-width: none;
        background:
            radial-gradient(ellipse 600px 400px at 100% 0%, rgba(239, 124, 51, 0.12), transparent 60%),
            #0d0d0e;
        color: #f1f1ef;
        padding: 6rem 1.5rem 2.5rem;
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1000;
        box-shadow: -24px 0 60px -12px rgba(0, 0, 0, 0.55);
        border-left: 1px solid rgba(239, 124, 51, 0.25);
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1rem;
        transform: translateX(100%);
        transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
    }
    body .nav--mobile[hidden],
    body nav.nav--mobile[hidden] {
        display: flex !important;          /* on garde le flex pour la transition */
        transform: translateX(100%);
        pointer-events: none;
    }
    body.has-mobile-menu-open .nav--mobile,
    body.has-mobile-menu-open nav.nav--mobile {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Backdrop sombre flou cliquable. */
    body.has-mobile-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 990;
        animation: oli-mobile-fade-in 200ms ease forwards;
    }
    @keyframes oli-mobile-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    body.has-mobile-menu-open { overflow: hidden; }

    /* ------------------ Liste des items ------------------ */
    body .nav--mobile .nav__list,
    body .nav--mobile ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        flex-wrap: nowrap;
        padding: 0;
        margin: 0;
        width: 100%;
        list-style: none;
        justify-content: flex-start;
        align-items: stretch;
    }
    body .nav--mobile .nav__list--root > .nav__item + .nav__item {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    body .nav--mobile .nav__item,
    body .nav--mobile li {
        width: 100%;
        margin: 0;
        position: static;
        list-style: none;
    }

    /* Items du niveau racine — typo serif élégante, grande respiration. */
    body .nav--mobile .nav__list--root > .nav__item > .nav__link,
    body .nav--mobile .nav__list--root > li > a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1.1rem 0.5rem;
        font-family: 'ADLaM Display', 'Manrope', system-ui, serif;
        font-size: 1.3rem;
        font-weight: 400;
        line-height: 1.1;
        letter-spacing: -0.01em;
        color: #f1f1ef;
        text-decoration: none;
        background: transparent;
        background-image: none;
        border-radius: 0;
        white-space: normal;
        transition: color 160ms ease, padding-left 220ms ease, letter-spacing 220ms ease;
    }
    body .nav--mobile .nav__list--root > .nav__item > .nav__link:hover,
    body .nav--mobile .nav__list--root > .nav__item > .nav__link:focus-visible,
    body .nav--mobile .nav__list--root > li > a:hover,
    body .nav--mobile .nav__list--root > li > a:focus-visible {
        color: #ef7c33;
        padding-left: 1rem;
        background-image: none;
        background-size: auto;
        opacity: 1;
    }
    body .nav--mobile .nav__item--current > .nav__link,
    body .nav--mobile .nav__item--ancestor > .nav__link {
        color: #ef7c33;
        background: transparent;
        background-image: none;
        font-weight: 500;
    }
    body .nav--mobile .nav__item--current > .nav__link::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        background: #ef7c33;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Chevron sur les items avec sous-menu. */
    body .nav--mobile .nav__item--has-children > .nav__link::after {
        content: "";
        margin-left: auto;
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 250ms ease;
        opacity: 0.6;
    }
    body .nav--mobile .nav__item--has-children.is-open > .nav__link::after {
        transform: rotate(-135deg);
        opacity: 1;
    }

    /* ------------------ Sous-menu (accordéon) ------------------
       Caché par défaut (max-height: 0), s'ouvre quand le parent
       `.nav__item--has-children` reçoit la classe `.is-open` (JS). */
    body .nav--mobile .nav__sublist,
    body .nav--mobile ul.nav__sublist {
        display: block;
        position: static;
        list-style: none;
        margin: 0;
        padding: 0 0 0 1rem;
        border: 0;
        border-left: 2px solid rgba(239, 124, 51, 0.5);
        margin-left: 0.5rem;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 320ms cubic-bezier(0.65, 0, 0.35, 1),
                    padding 280ms ease;
    }
    body .nav--mobile .nav__item--has-children.is-open > .nav__sublist {
        max-height: 1200px;        /* assez large pour tout contenu raisonnable */
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }
    body .nav--mobile .nav__sublist > .nav__item {
        border-top: 0;
    }
    body .nav--mobile .nav__sublist .nav__link,
    body .nav--mobile .nav__link--child {
        display: block;
        padding: 0.75rem 0.5rem;
        font-family: 'Manrope', system-ui, sans-serif;
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.35;
        color: #cfcfcc;
        background: transparent;
        background-image: none;
        border-radius: 8px;
        text-decoration: none;
        white-space: normal;
        transition: color 150ms ease, background 150ms ease, padding-left 200ms ease;
    }
    body .nav--mobile .nav__sublist .nav__link:hover,
    body .nav--mobile .nav__sublist .nav__link:focus-visible,
    body .nav--mobile .nav__link--child:hover,
    body .nav--mobile .nav__link--child:focus-visible {
        color: #ffffff;
        background: rgba(239, 124, 51, 0.15);
        padding-left: 0.85rem;
    }
}