/*
 * GEIQ56 — Components CSS
 * Child theme Ollie (labernik-geiq56)
 *
 * Styles des composants réutilisables : navigation pill, boutons, badges,
 * cards, hero, footer. Basé sur le prototype HTML finalisé.
 *
 * Dépend de global.css pour les custom properties.
 */


/* ═══════════════════════════════════════════════════════════════════
   HEADER — Floating pill
   Cible les vraies classes WordPress générées par wp:navigation
   ═══════════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: transparent;
  padding: 16px 24px;
  transition: padding .45s var(--ease-out);
}

.site-header.is-scrolled {
  padding: 10px 20px;
}

/* Neutraliser le padding Gutenberg sur le header */
.site-header.has-global-padding {
  padding-inline: 24px !important;
}
.site-header.is-scrolled.has-global-padding {
  padding-inline: 20px !important;
}

/* Inner pill
   v10.14 — Largeur resserrée. En mode burger universel (pas de menu
   horizontal à afficher), le header contient seulement : logo + social
   + CTA + burger = 4 éléments. 720px suffit largement, effet pill
   plus moderne / compact. */
.site-header__inner.wp-block-group {
  max-width: 720px !important;
  margin-inline: auto !important;
  padding: 0 24px !important;
  height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
  background: rgba(255,255,255,.32) !important; /* v10.14.2 : .55 → .32 (encore plus transparent) */
  backdrop-filter: blur(28px) saturate(1.9) !important; /* blur renforcé pour lisibilité */
  -webkit-backdrop-filter: blur(28px) saturate(1.9) !important;
  border-radius: var(--radius-full) !important;
  box-shadow:
    0 2px 16px rgba(26,23,27,.05),
    0 0 0 1px rgba(255,255,255,.28),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  transition:
    height        .45s var(--ease-out),
    background    .35s ease,
    box-shadow    .35s ease,
    padding       .45s var(--ease-out),
    max-width     .45s var(--ease-out) !important;
}

.site-header.is-scrolled .site-header__inner.wp-block-group {
  height: 50px !important;
  padding: 0 18px !important;
  max-width: 620px !important; /* v10.14 : 920→620 pour rester proportionnel au mode normal */
  background: rgba(255,255,255,.26) !important; /* v10.14.2 : .48 → .26 (scroll) */
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  box-shadow:
    0 4px 24px rgba(26,23,27,.06),
    0 0 0 1px rgba(26,23,27,.04),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ── Logo ── */
.site-logo.wp-block-group {
  flex-shrink: 0 !important;
  gap: 0 !important;
}

/* Image logo */
.site-logo .wp-block-site-logo {
  margin: 0 !important;
  flex-shrink: 0;
}
.site-logo .wp-block-site-logo img,
.site-logo .wp-block-site-logo a img {
  height: 32px !important;
  width: auto !important;
  display: block !important;
  transition: height .45s var(--ease-out);
}
.site-header.is-scrolled .site-logo .wp-block-site-logo img { height: 26px !important; }

/* Texte logo (fallback si pas d'image) */
.site-logo__text.wp-block-site-title,
.site-logo .wp-block-site-title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  color: var(--color-neutral-900) !important;
  text-decoration: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.site-logo .wp-block-site-title a {
  color: var(--color-neutral-900) !important;
  text-decoration: none !important;
}

/* Masquer le titre si l'image logo est présente */
.site-logo .wp-block-site-logo:not(:empty) + .wp-block-site-title {
  display: none;
}

/* ── Navigation WP — reset des styles Ollie/Gutenberg ── */

/* Cluster de droite (v5.5) : nav + social + CTA */
.site-header__right.wp-block-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  justify-content: flex-end !important;
}
.header-cta-wrap.wp-block-group {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Supprimer les styles par défaut du bloc navigation */
.site-header__inner .wp-block-navigation {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  /* Reset des styles Gutenberg */
  margin: 0 !important;
  padding: 0 !important;
}

/* Liste principale */
.site-header__inner .wp-block-navigation__container {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* Items de navigation */
.site-header__inner .wp-block-navigation-item {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
}

/* Liens */
.site-header__inner .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--color-neutral-600) !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-full) !important;
  transition: color .15s, background .15s !important;
  white-space: nowrap !important;
}

.site-header__inner .wp-block-navigation-item__content:hover {
  color: var(--color-neutral-900) !important;
  background: rgba(26,23,27,.06) !important;
}

/* Label seul (span à l'intérieur du lien) */
.site-header__inner .wp-block-navigation-item__label {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Description masquée */
.site-header__inner .wp-block-navigation-item__description {
  display: none !important;
}

/* Lien actif */
.site-header__inner .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.site-header__inner .wp-block-navigation-item[aria-current="page"] .wp-block-navigation-item__content {
  color: var(--color-neutral-900) !important;
  font-weight: var(--fw-semibold) !important;
}

/* ── CTA button "Voir les offres" ── */
.site-header__inner .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: 7px 16px !important;
  margin-left: 4px !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--fw-semibold) !important;
}

.site-header__inner .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content:hover {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
}

/* ── Icône chevron du sous-menu ── */
.site-header__inner .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 2px !important;
  opacity: .5 !important;
  transition: transform .15s !important;
}
.site-header__inner .wp-block-navigation__submenu-icon svg {
  width: 10px; height: 10px;
}

/* ── Dropdown submenu ── */
.site-header__inner .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 220px !important;
  background: var(--color-neutral-0) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px rgba(26,23,27,.12) !important;
  padding: 6px !important;
  list-style: none !important;
  z-index: 201 !important;
  /* Hidden par défaut — WP gère via classes open-on-hover-click */
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity .15s, transform .15s !important;
  /* Reset les styles Gutenberg */
  margin: 0 !important;
  flex-direction: column !important;
  min-height: unset !important;
}

/* WP ajoute .is-dropdown-open quand hover/focus */
.site-header__inner .wp-block-navigation-item.open-on-hover-click:hover .wp-block-navigation__submenu-container,
.site-header__inner .wp-block-navigation-item.open-on-hover-click:focus-within .wp-block-navigation__submenu-container,
.site-header__inner .wp-block-navigation__submenu-container.is-dropdown-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Liens dans le dropdown */
.site-header__inner .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 12px !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-neutral-600) !important;
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--fw-medium) !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.site-header__inner .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--color-neutral-100) !important;
  color: var(--color-neutral-900) !important;
}

/* ── Bouton hamburger mobile ── */
.wp-block-navigation__responsive-container-open {
  display: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px !important;
  color: var(--color-neutral-900) !important;
}

/* ── Conteneur responsive — masqué sur desktop ── */
.site-header__inner .wp-block-navigation__responsive-container:not(.is-menu-open) {
  /* Sur desktop, on montre directement */
  display: contents !important;
}

/* ── Dark mode — header ── */
[data-theme="dark"] .site-header__inner.wp-block-group {
  background: rgba(28, 24, 32, .82) !important;
  box-shadow:
    0 2px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

[data-theme="dark"] .site-header.is-scrolled .site-header__inner.wp-block-group {
  background: rgba(22, 18, 26, .88) !important;
  box-shadow:
    0 4px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

[data-theme="dark"] .site-logo .wp-block-site-title a { color: #f0eef1 !important; }

[data-theme="dark"] .site-header__inner .wp-block-navigation-item__content {
  color: rgba(255,255,255,.5) !important;
}
[data-theme="dark"] .site-header__inner .wp-block-navigation-item__content:hover {
  color: #f0eef1 !important;
  background: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .site-header__inner .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
  color: #fff !important;
}

[data-theme="dark"] .site-header__inner .wp-block-navigation__submenu-container {
  background: #1e1a24 !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .site-header__inner .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255,255,255,.5) !important;
}
[data-theme="dark"] .site-header__inner .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255,255,255,.07) !important;
  color: #f0eef1 !important;
}

/* ── Responsive mobile ── */
@media (max-width: 767px) {
  .site-header { padding: 12px 16px; }

  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .site-header__inner .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .site-header__inner .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(24px) !important;
    padding: var(--space-5) var(--space-4) !important;
  }

  .site-header__inner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  [data-theme="dark"] .site-header__inner .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(26,23,27,.96) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.badge--btp   { background: var(--color-primary); color: #fff; }
.badge--multi { background: var(--color-neutral-900); color: #fff; }
.badge--new   { background: var(--color-primary-soft); color: var(--color-primary); }


/* ═══════════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════════ */

.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 13px 24px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

/* Primary */
.btn-primary,
.wp-block-button__link.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.wp-block-button__link.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.btn-primary:hover::after,
.wp-block-button__link.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:hover,
.wp-block-button__link.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* Outline */
.btn-outline,
.wp-block-button__link.btn-outline {
  background: transparent;
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-300, #c4cdd4);
}
.btn-outline:hover,
.wp-block-button__link.btn-outline:hover {
  background: var(--color-neutral-50);
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-900);
}

/* Large */
.btn-lg { padding: 16px 32px; font-size: 1.0625rem; border-radius: 8px; }

/* Pill */
.btn-pill { border-radius: var(--radius-full); }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding-inline: 8px;
}
.btn-ghost:hover {
  background: var(--color-primary-soft);
}


/* ═══════════════════════════════════════════════════════════════════
   HERO — section principale
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow-x: clip;      /* clip horizontal seulement — bg-edge-light peut déborder verticalement */
  overflow-y: visible;
  background: var(--color-neutral-0);
  /* v7.1.1 : padding top condensé (134 → clamp 92-118) + bottom aligné sur --section-gap.
     Le header sticky reste à 72 px, on garde ~20 px d'air avant le persona-switch. */
  padding: clamp(92px, 8vw, 118px) 0 var(--section-gap);
  width: 100%;
}

/* Force la section hero à occuper toute la largeur même en FSE */
.hero.wp-block-group,
section.hero {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  text-align: center;
}

/* hero__content en FSE : on contrôle la width nous-mêmes */
.hero__content.wp-block-group {
  max-width: var(--wide-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--space-4) !important;
}

/* Eyebrow pill */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  margin-bottom: var(--space-4);
  background: var(--color-neutral-50);
}

/* Dot animé avant l'eyebrow */
.hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(227,0,67,.7);
  animation: blink 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* Title */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: var(--fw-regular);
  color: var(--color-neutral-900);
  line-height: var(--lh-display);
  margin-bottom: var(--space-3);
}

/* Italique signature carmin (Sprint A action #1 — gradient text shimmer retiré) */
.hero__title em {
  font-style: italic;
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow::before { animation: none; }
}

.hero__subtitle {
  font-size: var(--font-body-lg-size);
  color: var(--color-neutral-500);
  line-height: var(--lh-body);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

/* Boutons hero en FSE */
.hero__actions.wp-block-buttons {
  justify-content: center !important;
}

@media (max-width: 767px) {
  .hero { padding-top: 104px; }
  .hero__actions { flex-direction: column; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   SECTIONS — layout helpers FSE
   Gutenberg ajoute des classes is-layout-* qui peuvent contraindre
   nos sections. On neutralise ça proprement.
   ═══════════════════════════════════════════════════════════════════ */

/* Toutes les sections doivent être full-width */
.section.wp-block-group {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   v7.5.4 — Neutralisation du blockGap FSE sur les .section
   WordPress FSE injecte automatiquement
     :where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--4); }
     :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--4); }
   = 32 px de marge top sur chaque enfant racine, qui s'empilent
   sur notre padding-block et gonflent les espaces entre blocs.
   Le rythme vertical du design system est piloté UNIQUEMENT par
   le padding-block des .section--* (voir global.css §--section-gap).
   ─────────────────────────────────────────────────────────────── */
:root :where(.wp-site-blocks) > .section,
:root :where(.is-layout-flow) > .section,
:root :where(.is-layout-constrained) > .section,
.site-main .section,
main .section {
  margin-block: 0;
}

/* Le container interne gère la width max */
.container.wp-block-group {
  max-width: var(--wide-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--space-4) !important;
  width: 100% !important;
}

/* Section-header centré */
.section-header.wp-block-group {
  text-align: center !important;
  margin-inline: auto !important;
}

/* Section eyebrow — pill générique (toutes sections hors hero) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  margin-bottom: var(--space-3);
  background: var(--color-neutral-50);
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  opacity: .7;
}

/* Section title — style affiché + split text target */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: var(--fw-regular);
  color: var(--color-neutral-900);
  line-height: var(--lh-display);
  margin-bottom: var(--space-3);
}
.section-title em {
  font-style: italic;
  color: var(--color-primary);
}

/* Section subtitle */
.section-subtitle {
  font-size: var(--font-body-lg-size);
  color: var(--color-neutral-500);
  line-height: var(--lh-body);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

[data-theme="dark"] .section-eyebrow { color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
[data-theme="dark"] .section-title   { color: #f0eef1; }
[data-theme="dark"] .section-subtitle{ color: rgba(255,255,255,.5); }


/* ═══════════════════════════════════════════════════════════════════
   FEATURES GRID
   ═══════════════════════════════════════════════════════════════════ */

/* Forcer le wp:columns en CSS grid (3 colonnes comme le prototype) */
.features-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-3) !important;
  flex-wrap: unset !important;
  margin-top: var(--space-6) !important;
}

/* Feature card — style prototype (radius-xl, padding-5/4) */
.feature-card.wp-block-column {
  position: relative;
  background:
    radial-gradient(circle 120px at var(--mx,50%) var(--my,50%), rgba(227,0,67,.07) 0%, transparent 100%),
    var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  transition: border-color .2s, box-shadow .2s, transform .22s cubic-bezier(.4,0,.2,1), background .05s;
  will-change: transform;
}

.feature-card.wp-block-column:hover {
  border-color: rgba(227,0,67,.25);
  box-shadow: 0 6px 28px rgba(227,0,67,.08), 0 2px 8px rgba(26,23,27,.06);
  transform: translateY(-5px);
}

.feature-card__inner {
  gap: var(--space-3) !important;
}

.feature-card__icon {
  width: 40px; height: 40px;
  line-height: 1 !important;
  margin-bottom: var(--space-3) !important;
  font-size: 1.25rem !important;
  background: rgba(227,0,67,.08);
  border-radius: var(--radius-sm);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  transition: background .2s, transform .22s;
}
.feature-card.wp-block-column:hover .feature-card__icon {
  background: rgba(227,0,67,.14);
  transform: scale(1.1) rotate(-3deg);
}

/* Title : Instrument Serif, léger, comme le prototype */
.feature-card__title.wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--color-neutral-900) !important;
  margin-bottom: var(--space-2) !important;
  line-height: 1.3 !important;
}

.feature-card__desc {
  font-size: .9375rem !important;
  color: var(--color-neutral-600) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

[data-theme="dark"] .feature-card.wp-block-column {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

@media (max-width: 767px) {
  .features-grid.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid.wp-block-columns {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   GEIQ SWITCHER
   ═══════════════════════════════════════════════════════════════════ */

.geiq-switcher.wp-block-group {
  padding: 0;
}

/* Onglets navigation */
.geiq-switcher__tabs.wp-block-group {
  display: flex !important;
  gap: 0 !important;
  justify-content: center !important;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  padding: 4px !important;
  margin-bottom: var(--space-6) !important;
  width: fit-content;
  margin-inline: auto !important;
}

.geiq-tab {
  flex: none;
  text-align: center;
  padding: 10px 28px;
  font-size: var(--font-body-sm-size);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-600);
  border-radius: var(--radius-full);
  cursor: pointer;
  margin: 0 !important;
  transition: background .2s, color .2s, box-shadow .2s;
  user-select: none;
  white-space: nowrap;
}

.geiq-tab:hover { color: var(--color-neutral-900); }

.geiq-tab--active,
.geiq-tab.is-active {
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 4px rgba(26,23,27,.12);
}

[data-theme="dark"] .geiq-switcher__tabs.wp-block-group {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.09);
}
[data-theme="dark"] .geiq-tab { color: rgba(255,255,255,.4); }
[data-theme="dark"] .geiq-tab--active,
[data-theme="dark"] .geiq-tab.is-active {
  background: rgba(255,255,255,.12);
  color: #f0eef1;
  box-shadow: none;
}

/* Panels */
.geiq-panel {
  display: none !important;
  gap: var(--space-7) !important;
  align-items: center !important;
  border-radius: var(--radius-lg);
}

.geiq-panel--active,
.geiq-panel.is-active {
  display: flex !important;
}

.geiq-panel__content {
  flex: 1 1 0;
  min-width: 0;
  gap: var(--space-3) !important;
}

.geiq-panel__visual {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geiq-panel__badge-wrap {
  background: var(--color-neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  flex-direction: column !important;
  gap: var(--space-2) !important;
}

.geiq-panel__stat {
  font-size: 1rem !important;
  color: var(--color-neutral-600);
  line-height: 1.4 !important;
}

/* ── Steps — style prototype ── */
.geiq-steps.wp-block-group {
  gap: 0 !important;
  margin-top: var(--space-3) !important;
  flex-direction: column !important;
}

.geiq-step.wp-block-group {
  gap: 14px !important;
  align-items: flex-start !important;
  /* Animation d'entrée — état initial caché */
  opacity: 0;
  transform: translateX(18px);
}

/* Animation déclenchée quand le panel est actif */
.geiq-panel--active .geiq-step:nth-child(1),
.geiq-panel.is-active .geiq-step:nth-child(1) {
  animation: geiq-step-in .52s cubic-bezier(.22,1,.36,1) .05s both;
}
.geiq-panel--active .geiq-step:nth-child(2),
.geiq-panel.is-active .geiq-step:nth-child(2) {
  animation: geiq-step-in .52s cubic-bezier(.22,1,.36,1) .19s both;
}
.geiq-panel--active .geiq-step:nth-child(3),
.geiq-panel.is-active .geiq-step:nth-child(3) {
  animation: geiq-step-in .52s cubic-bezier(.22,1,.36,1) .33s both;
}

@keyframes geiq-step-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* Ping sur le numéro */
.geiq-panel--active .geiq-step__num,
.geiq-panel.is-active .geiq-step__num {
  animation: step-num-ping 2.6s ease-out infinite;
}
.geiq-panel--active .geiq-step:nth-child(2) .geiq-step__num,
.geiq-panel.is-active .geiq-step:nth-child(2) .geiq-step__num { animation-delay: .85s; }
.geiq-panel--active .geiq-step:nth-child(3) .geiq-step__num,
.geiq-panel.is-active .geiq-step:nth-child(3) .geiq-step__num { animation-delay: 1.7s; }

@keyframes step-num-ping {
  0%   { box-shadow: 0 0 0 0   rgba(227,0,67,.35); }
  60%  { box-shadow: 0 0 0 9px rgba(227,0,67,0); }
  100% { box-shadow: 0 0 0 0   rgba(227,0,67,0); }
}

@media (prefers-reduced-motion: reduce) {
  .geiq-step { opacity: 1; transform: none; }
  .geiq-panel--active .geiq-step,
  .geiq-panel.is-active .geiq-step { animation: none; }
  .geiq-panel--active .geiq-step__num,
  .geiq-panel.is-active .geiq-step__num { animation: none; }
}

/* Numéro — cercle avec dégradé + border rouge */
.geiq-step__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #fef0f3 100%);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  line-height: 1 !important;
}

/* Corps du step — glassmorphism */
.geiq-step__body.wp-block-group {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(227,0,67,.12);
  border-radius: var(--radius-md);
  padding: 10px 14px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex: 1;
  gap: 2px !important;
  margin-bottom: var(--space-3) !important;
}

.geiq-step:last-child .geiq-step__body.wp-block-group {
  margin-bottom: 0 !important;
}

.geiq-step__title {
  font-size: .875rem !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-neutral-900) !important;
  margin: 0 0 2px !important;
  line-height: 1.4 !important;
}

.geiq-step__desc {
  font-size: .8125rem !important;
  color: var(--color-neutral-500) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Dark mode steps */
[data-theme="dark"] .geiq-step__num {
  background: linear-gradient(135deg, #2a1e25 0%, #311520 100%);
}
[data-theme="dark"] .geiq-step__body.wp-block-group {
  background: rgba(255,255,255,.06);
  border-color: rgba(227,0,67,.2);
}
[data-theme="dark"] .geiq-step__title { color: #f0eef1 !important; }
[data-theme="dark"] .geiq-step__desc  { color: rgba(255,255,255,.42) !important; }

@media (max-width: 767px) {
  .geiq-panel { flex-direction: column !important; }
  .geiq-panel__visual { flex: none; width: 100%; }
  .geiq-switcher__tabs.wp-block-group { width: 100%; max-width: 100%; }
  .geiq-tab { padding: 8px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   JOBS PREVIEW — structure prototype (shortcode geiq56_jobs)
   ═══════════════════════════════════════════════════════════════════ */

.jobs-preview { margin-top: var(--space-5) !important; }

/* Grid — 2 cols comme le prototype (3 sur grands écrans) */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.jobs-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Job Card ── */
.job-card {
  background: var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(227,0,67,.08), 0 0 0 1.5px rgba(227,0,67,.2);
  border-color: rgba(227,0,67,.25);
}
.job-card:hover .link-arrow { gap: 10px; }

/* Head : badges + date relative */
.job-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.job-card__badges { display: flex; gap: 5px; flex-wrap: wrap; }
.job-card__ago {
  font-size: .75rem;
  color: var(--color-neutral-400);
  white-space: nowrap;
}

/* Title */
.job-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-neutral-900);
  margin: 4px 0;
  line-height: 1.35;
}
.job-card:hover .job-card__title { color: var(--color-primary); }

/* Meta items : icône + texte */
.job-card__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 2px;
}
.job-card__meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  color: var(--color-neutral-600);
}
.job-card__meta-item svg { flex-shrink: 0; }

/* Footer : statut + lien */
.job-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-neutral-100);
  margin-top: auto;
}
.job-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--color-neutral-600);
}

/* ── Badges ── */
.badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  line-height: 1.5;
}
.badge-btp    { background: var(--color-primary); color: #fff; }
.badge-multi  { background: var(--color-neutral-900); color: #fff; }
.badge-neutral { background: var(--color-neutral-100); color: var(--color-neutral-700); }

/* Dot de statut */
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.badge-dot--green  { background: var(--color-success); }
.badge-dot--orange { background: var(--color-warning); }
.badge-dot--red    { background: var(--color-primary); }

/* Link arrow */
.link-arrow {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: .875rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .15s;
}
.link-arrow:hover { gap: 8px; color: var(--color-primary-dark); }

/* Jobs empty state */
.jobs-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--color-neutral-500);
}

/* Dark mode */
[data-theme="dark"] .job-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .job-card__title { color: #f0eef1; }
[data-theme="dark"] .job-card__footer { border-top-color: rgba(255,255,255,.06); }
[data-theme="dark"] .badge-neutral { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); }

/* Responsive */
@media (max-width: 1023px) {
  .jobs-grid, .jobs-grid--cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .jobs-grid, .jobs-grid--cols-3 { grid-template-columns: 1fr !important; }
  .job-card { padding: var(--space-3) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   PARTNERS MARQUEE
   ═══════════════════════════════════════════════════════════════════ */

.partners-marquee__track.wp-block-group {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-5) !important;
}

.partner-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  font-size: var(--font-body-sm-size);
  color: var(--color-neutral-400);
  font-weight: var(--fw-medium);
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CTA BLOCK
   ═══════════════════════════════════════════════════════════════════ */

.cta-section.wp-block-group {
  background: var(--color-neutral-900) !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.cta-block {
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.cta-block__title {
  color: var(--color-neutral-0) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.875rem, 4vw, var(--font-h1-size)) !important;
  font-weight: var(--fw-regular) !important;
}

.cta-block__desc {
  color: rgba(255,255,255,.65) !important;
  font-size: var(--font-body-lg-size) !important;
  margin-bottom: var(--space-5) !important;
}

.cta-section .section-eyebrow {
  color: rgba(255,255,255,.5) !important;
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.06) !important;
}

.cta-section .wp-block-button__link.btn-outline {
  color: rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.cta-section .wp-block-button__link.btn-outline:hover {
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: rgba(249, 250, 251, .92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(227, 0, 67, .10);
  /* v6.3.6 : padding-top réduit (--space-7 → clamp 48-72) pour supprimer
     la bande vide au-dessus du footer sur les pages Spoke qui finissent
     sur une section sans CTA (ex. /le-dispositif/ qui clôt par le switcher).
     Sur la homepage le CTA-final garde son propre padding 80px, le total
     reste confortable. */
  padding: clamp(48px, 5vw, 72px) 0 var(--space-4);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-6);
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  margin-bottom: var(--space-6);
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-regular);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
  text-decoration: none;
}

.footer__tagline {
  font-size: var(--font-body-sm-size);
  color: var(--color-neutral-600);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}

.footer__col-title {
  font-size: var(--font-body-sm-size);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  font-size: var(--font-body-sm-size);
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color .15s;
}

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

.footer__bottom {
  max-width: var(--wide-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(227,0,67,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__legal {
  font-size: .8125rem;
  color: var(--color-neutral-400);
}

.footer__legal a {
  color: var(--color-neutral-400);
  text-decoration: none;
}
.footer__legal a:hover { color: var(--color-primary); }

.footer__socials {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer__social-link {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

.footer__social-link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: rgba(227,0,67,.25);
}

/* Dark mode footer */
[data-theme="dark"] .site-footer {
  background: rgba(26, 23, 27, .92);
  border-top-color: rgba(227, 0, 67, .15);
}
[data-theme="dark"] .footer__col-title   { color: #f0eef1; }
[data-theme="dark"] .footer__brand-name  { color: #f0eef1; }
[data-theme="dark"] .footer__tagline     { color: rgba(255,255,255,.5); }
[data-theme="dark"] .footer__links a     { color: rgba(255,255,255,.5); }
[data-theme="dark"] .footer__bottom      { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .footer__legal       { color: rgba(255,255,255,.3); }
[data-theme="dark"] .footer__legal a     { color: rgba(255,255,255,.3); }
[data-theme="dark"] .footer__social-link {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.09);
  color: rgba(255,255,255,.5);
}
[data-theme="dark"] .footer__social-link:hover {
  background: rgba(227,0,67,.2);
  color: var(--color-primary);
  border-color: rgba(227,0,67,.3);
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE TOGGLE (sticky bas de page)
   ═══════════════════════════════════════════════════════════════════ */

.theme-toggle-sticky {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 300;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-900);
  color: var(--color-neutral-0);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background .2s, transform .2s;
}

.theme-toggle-sticky:hover {
  background: var(--color-primary);
  transform: scale(1.08);
}

.icon-sun { display: none; }

[data-theme="dark"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle-sticky {
  background: rgba(255,255,255,.12);
  color: #f0eef1;
}


/* ═══════════════════════════════════════════════════════════════════
   NEUTRALISATION CSS GUTENBERG
   Gutenberg injecte automatiquement des styles pour is-layout-flow,
   is-layout-constrained, etc. On neutralise tout ce qui peut nuire.
   ═══════════════════════════════════════════════════════════════════ */

/* Supprimer les marges auto forcées par Gutenberg sur les blocs enfants */
.site-main > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sections : pas de contrainte de width depuis le parent */
.site-main .wp-block-group.section,
.site-main .wp-block-group.hero {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}


/* ═══ METRIC CARDS ═══ */
/* v10.15 — refonte : suppression complète des rotate(), cartes droites,
   alignées, respirant mieux. Le wrapper .hero__metrics-wrap porte le gap
   vertical avec les boutons du hero. Les 2 grilles (candidat / entreprise)
   sont gérées par le même toggle persona que les feature-cards. */
.hero__metrics-wrap {
  position: relative; z-index: 1;
  width: 100%;
  margin-top: var(--space-7); /* vraie respiration vs. les CTA au-dessus */
  padding-top: var(--space-4);
}
/* v10.18.1 → v10.18.3 — variante standalone (page /entreprises/ section--stats) :
   pas de CTA au-dessus → on supprime le gap vertical pour coller au
   sous-titre de section, comme la cohérence visuelle des autres sections
   chiffres du site. v10.18.3 : surcharge la règle clamp(72px,10vw,140px)
   posée plus loin dans le fichier (L6486) qui forçait un padding énorme. */
.hero__metrics-wrap--standalone,
.section--stats .hero__metrics-wrap.hero__metrics-wrap--standalone,
.hero__metrics-wrap.hero__metrics-wrap--standalone {
  margin-top: var(--space-2, 12px) !important;
  padding-top: 0 !important;
  padding-block-start: 0 !important;
  margin-block-start: var(--space-2, 12px) !important;
}
/* v10.18.2 — sur /entreprises/ tous les pictos sont en carmin (uniforme,
   cohérent avec la home actuelle). Plus de mix red/green/dark/blue. */
.section--stats .metric-card__icon,
.section--stats .metric-card__icon--red,
.section--stats .metric-card__icon--dark,
.section--stats .metric-card__icon--green,
.section--stats .metric-card__icon--blue {
  background: rgba(var(--primary-rgb, 227, 0, 67), .08) !important;
  color: var(--primary, #e30043) !important;
}
.hero__metrics {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: stretch;
  gap: var(--space-3); flex-wrap: wrap;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.metric-card.wp-block-group {
  position: relative;
  background:
    radial-gradient(circle 90px at var(--mx,50%) var(--my,50%), rgba(196,30,58,.08) 0%, transparent 100%),
    var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(26,23,27,.05), 0 1px 2px rgba(26,23,27,.03);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 158px;
  overflow: visible !important;
  transform: none; /* v10.15 — plus de rotate décoratif */
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  will-change: transform;
}
.metric-card.wp-block-group:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(26,23,27,.09), 0 0 0 1.5px rgba(196,30,58,.16);
  border-color: rgba(196,30,58,.26);
}
/* v10.15 — reset explicite des anciennes rotations (au cas où du post_content
   historique les réactiverait via cascade) */
.metric-card--1,
.metric-card--2,
.metric-card--3,
.metric-card--4 { transform: none; }
.metric-card__icon {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px; font-size: 1rem; line-height: 1;
}
.metric-card__icon--red   { background: rgba(227,0,67,.08); color: var(--color-primary); }
.metric-card__icon--dark  { background: var(--color-neutral-100); color: var(--color-neutral-900); }
.metric-card__icon--green { background: rgba(5,139,79,.08); color: var(--color-success); }
.metric-card__icon--blue  { background: rgba(59,130,246,.08); color: #3b82f6; }
.metric-card__val {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  color: var(--color-neutral-900) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.metric-card__label {
  font-size: .75rem !important; font-weight: 500 !important;
  color: var(--color-neutral-400) !important;
  line-height: 1.35 !important; margin-top: 2px !important;
  margin-bottom: 0 !important;
}
/* Dark mode metric cards */
[data-theme="dark"] .metric-card.wp-block-group {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}

/* ═══ STATS BAND ═══ */
.stats-band.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  gap: 1px !important;
  background: var(--color-neutral-200) !important;
}
.stats-band__item.wp-block-group {
  background: var(--color-neutral-0) !important;
  padding: var(--space-5) var(--space-4) !important;
  text-align: center !important;
  transition: transform .2s ease !important;
  align-items: center !important;
  gap: 4px !important;
}
.stats-band__item.wp-block-group:hover { transform: translateY(-3px); }
.stats-band__val {
  font-family: var(--font-display) !important;
  font-size: 2.75rem !important;
  color: var(--color-primary) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.stats-band__label {
  font-size: .8125rem !important;
  color: var(--color-neutral-600) !important;
  margin-top: 6px !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}
[data-theme="dark"] .stats-band.wp-block-group { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .stats-band__item.wp-block-group { background: #1a171b !important; }
@media (max-width:767px) { .stats-band.wp-block-group { grid-template-columns: 1fr 1fr !important; } }

/* ═══ TESTIMONIALS ═══ */
.testimonials-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-3) !important;
}
.testimonial.wp-block-column {
  background: var(--color-neutral-0) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  will-change: transform !important;
}
.testimonial.wp-block-column:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(26,23,27,.09);
}
.testimonial__quote.wp-block-quote {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--color-neutral-900) !important;
  flex: 1 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.testimonial__quote.wp-block-quote p { margin: 0; }
.testimonial__quote.wp-block-quote::before { content: '\201C'; color: var(--color-primary); }
.testimonial__quote.wp-block-quote::after  { content: '\201D'; color: var(--color-primary); }
.testimonial__author.wp-block-group { gap: var(--space-2) !important; align-items: center !important; }
.testimonial__avatar.wp-block-image { flex-shrink: 0 !important; }
.testimonial__avatar.wp-block-image img { width: 44px !important; height: 44px !important; border-radius: 50% !important; object-fit: cover !important; }
.testimonial__name { font-weight: var(--fw-semibold) !important; font-size: .9375rem !important; margin: 0 !important; }
.testimonial__role { font-size: var(--font-body-sm-size) !important; color: var(--color-neutral-600) !important; margin: 0 !important; }
[data-theme="dark"] .testimonial.wp-block-column { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .testimonial__quote.wp-block-quote { color: #f0eef1 !important; }
@media (max-width: 767px) { .testimonials-grid.wp-block-columns { grid-template-columns: 1fr !important; } }

/* ═══ PARTNERS MARQUEE ═══ */
.marquee-wrap.wp-block-group {
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
  margin-top: var(--space-5) !important;
}
.marquee-track.wp-block-group {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: marquee-scroll 60s linear infinite !important;
}
.marquee-wrap.wp-block-group:hover .marquee-track.wp-block-group { animation-play-state: paused !important; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-logo-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 32px !important;
  border-right: 1px solid var(--color-neutral-200) !important;
  flex-shrink: 0 !important;
  filter: grayscale(1) opacity(.45) !important;
  transition: filter .3s ease, transform .25s ease !important;
  cursor: default !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--color-neutral-900) !important;
}
.partner-logo-item:hover { filter: grayscale(0) opacity(1) !important; transform: translateY(-2px) !important; }
.partner-logo-item__icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

/* ═══ CTA GLASSMORPHISM (cta-dark) ═══ */
.cta-section.wp-block-group {
  background: var(--color-neutral-50) !important;
}
.cta-dark {
  background: rgba(45,42,50,.055);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(45,42,50,.14);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta-dark::after {
  content: '';
  position: absolute; bottom: -20%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(227,0,67,.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.cta-dark__inner.wp-block-group {
  position: relative; z-index: 1;
  gap: var(--space-3) !important;
  align-items: center !important;
}
.cta-dark__title.wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--color-neutral-900) !important;
  margin: 0 !important;
}
.cta-dark__sub {
  font-size: 1.0625rem !important;
  color: var(--color-neutral-600) !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}
.cta-dark__actions.wp-block-buttons { justify-content: center !important; }
.cta-dark .section-eyebrow { color: rgba(227,0,67,.7) !important; }
[data-theme="dark"] .cta-dark {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}
[data-theme="dark"] .cta-dark__title.wp-block-heading { color: #f0eef1 !important; }
[data-theme="dark"] .cta-dark__sub { color: rgba(255,255,255,.55) !important; }

/* ═══ SWITCHER AMÉLIORÉ — thumb animé ═══ */
.geiq-switcher.wp-block-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto var(--space-6) !important;
  background: var(--color-neutral-100) !important;
  border: 1px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px !important;
  width: fit-content !important;
  position: relative !important;
  gap: 0 !important;
}
.geiq-switcher__thumb {
  position: absolute !important;
  top: 4px !important; left: 4px !important;
  height: calc(100% - 8px) !important;
  border-radius: var(--radius-full) !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(26,23,27,.12) !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), background .2s !important;
  pointer-events: none !important;
  z-index: 0 !important;
  margin: 0 !important;
}
.geiq-switcher__btn {
  position: relative !important;
  z-index: 1 !important;
  font-family: var(--font-body) !important;
  font-size: .875rem !important;
  font-weight: var(--fw-semibold) !important;
  padding: 10px 28px !important;
  border-radius: var(--radius-full) !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-neutral-600) !important;
  cursor: pointer !important;
  transition: color .2s !important;
  white-space: nowrap !important;
  margin: 0 !important;
  user-select: none !important;
}
.geiq-switcher__btn.is-active,
.geiq-switcher__btn[data-active="true"] {
  color: var(--color-neutral-900) !important;
}
.geiq-switcher__btn[data-val="btp"].is-active { color: var(--color-primary) !important; }
.geiq-switcher[data-active="btp"] .geiq-switcher__thumb { background: var(--color-primary-soft) !important; }
.geiq-switcher[data-active="multi"] .geiq-switcher__thumb { background: #2d2a32 !important; box-shadow: none !important; }
/* Panel BTP */
.geiq-panel--btp.wp-block-group {
  background: rgba(227,0,67,.055) !important;
  border: 1.5px solid rgba(227,0,67,.18) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
}
/* Panel Multi */
.geiq-panel--multi.wp-block-group {
  background: rgba(45,42,50,.055) !important;
  border: 1.5px solid rgba(45,42,50,.14) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-6) !important;
}
/* Panel stats glassmorphism */
.panel-btp__stats.wp-block-group,
.panel-multi__stats.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-3) !important;
}
.panel-stat.wp-block-group {
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(227,0,67,.13) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) !important;
  gap: 0 !important;
}
.panel-stat--multi.wp-block-group { border-color: rgba(45,42,50,.10) !important; }
.panel-stat__val {
  font-family: var(--font-display) !important;
  font-size: 2.25rem !important;
  color: var(--color-neutral-900) !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  font-weight: 400 !important;
}
.panel-stat__label {
  font-size: .8125rem !important; font-weight: var(--fw-semibold) !important;
  color: var(--color-neutral-700) !important;
  margin: 0 !important;
}
.panel-stat__sub {
  font-size: .72rem !important;
  color: var(--color-neutral-400) !important;
  font-style: italic !important;
  margin: 0 !important;
}
[data-theme="dark"] .panel-stat.wp-block-group { background: rgba(255,255,255,.08) !important; }


/* ═══════════════════════════════════════════════════════════════════
   SPLIT TEXT REVEAL
   Injecté par JS sur .section-title et .section-eyebrow
   ═══════════════════════════════════════════════════════════════════ */

.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-inner {
  display: inline-block;
  transform: translateY(108%);
  opacity: 0;
  /* v10.17.3 — safety net : si l'IntersectionObserver du splitReveal
     ne trigger pas pour une raison quelconque (race condition, timing
     avec shortcodes, etc.), cette animation déclenchée après 2.5 s
     garantit que le texte finit par apparaître. Les cas nominaux
     (IO trigger + .is-visible posé) ne sont pas impactés — la classe
     .is-visible override cette animation. */
  animation: split-safety-fallback 0.001s linear 2.5s forwards;
}
@keyframes split-safety-fallback {
  to { transform: translateY(0); opacity: 1; }
}
.split-inner.is-visible {
  transform: translateY(0);
  opacity: 1;
  animation: none;                    /* coupe le fallback si l'IO a bien posé .is-visible */
  transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}

/* v10.17.4 — Fix brutal supprimé en v10.17.7 :
   avec le pattern legacy Spoke retiré, plus besoin de forcer
   l'affichage des eyebrows/titres des sections nouvelles.
   Elles sont visibles par défaut comme toutes les sections de la home. */

@media (prefers-reduced-motion: reduce) {
  .split-inner { transform: none; opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════
   BORDER GLOW — ReactBits vanilla
   Injecté par JS sur .feature-card, .metric-card
   ═══════════════════════════════════════════════════════════════════ */

.bg-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 28;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: var(--radius-lg);
  --glow-padding: 32px;
  --cone-spread: 22;
  --fill-opacity: 0.35;
  --card-bg: #ffffff;

  /* glow color rouge */
  --glow-color:    hsl(348deg 100% 55% / 100%);
  --glow-color-60: hsl(348deg 100% 55% / 60%);
  --glow-color-50: hsl(348deg 100% 55% / 50%);
  --glow-color-40: hsl(348deg 100% 55% / 40%);
  --glow-color-30: hsl(348deg 100% 55% / 30%);
  --glow-color-20: hsl(348deg 100% 55% / 20%);
  --glow-color-10: hsl(348deg 100% 55% / 10%);

  /* gradient mesh rouge */
  --gradient-one:   radial-gradient(at 80% 55%, #e30043 0px, transparent 50%);
  --gradient-two:   radial-gradient(at 69% 34%, #ff1a5c 0px, transparent 50%);
  --gradient-three: radial-gradient(at  8%  6%, #b8002f 0px, transparent 50%);
  --gradient-four:  radial-gradient(at 41% 38%, #e30043 0px, transparent 50%);
  --gradient-five:  radial-gradient(at 86% 85%, #ff1a5c 0px, transparent 50%);
  --gradient-six:   radial-gradient(at 82% 18%, #b8002f 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51%  4%, #ff1a5c 0px, transparent 50%);
  --gradient-base:  linear-gradient(#e30043 0 100%);

  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  overflow: visible !important;
}

/* Couche 1 — border gradient mesh */
.bg-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one)   border-box,
    var(--gradient-two)   border-box,
    var(--gradient-three) border-box,
    var(--gradient-four)  border-box,
    var(--gradient-five)  border-box,
    var(--gradient-six)   border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base)  border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
  transition: opacity 0.25s ease-out;
  pointer-events: none; z-index: -1;
}
.bg-card:not(:hover)::before { transition: opacity 0.75s ease-in-out; }

/* Couche 2 — fill soft */
.bg-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    var(--gradient-one)   padding-box,
    var(--gradient-two)   padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four)  padding-box,
    var(--gradient-five)  padding-box,
    var(--gradient-six)   padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base)  padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-size: 100% 100%;
  transition: opacity 0.25s ease-out;
  pointer-events: none; z-index: -1;
}
.bg-card:not(:hover)::after { transition: opacity 0.75s ease-in-out; }

/* Couche 3 — edge light (span injecté par JS) */
.bg-card > .bg-edge-light {
  position: absolute;
  inset: calc(var(--glow-padding) * -1);
  border-radius: inherit;
  pointer-events: none; z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  transition: opacity 0.25s ease-out;
}
.bg-card:not(:hover) > .bg-edge-light { transition: opacity 0.75s ease-in-out; }
.bg-card > .bg-edge-light::before {
  content: '';
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px    var(--glow-color),
    inset 0 0 1px  0   var(--glow-color-60),
    inset 0 0 3px  0   var(--glow-color-50),
    inset 0 0 6px  0   var(--glow-color-40),
    inset 0 0 15px 0   var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
          0 0 1px  0   var(--glow-color-60),
          0 0 3px  0   var(--glow-color-50),
          0 0 6px  0   var(--glow-color-40),
          0 0 15px 0   var(--glow-color-30),
          0 0 25px 2px var(--glow-color-20),
          0 0 50px 2px var(--glow-color-10);
}

/* Les enfants directs passent au-dessus de la couche glow */
.metric-card > *,
.feature-card > * { position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Passe complète
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablette (768px → 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container.wp-block-group { padding-inline: var(--space-5) !important; }
  .hero { padding-top: 120px; }
  .hero__content { max-width: 100% !important; }
  .features-grid.wp-block-columns { grid-template-columns: 1fr 1fr !important; }
  .jobs-grid.wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
  .footer__grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-5); }
  .cta-dark { padding: var(--space-6) var(--space-4) !important; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {

  /* ── Layout global ── */
  body { overflow-x: hidden; }
  .container.wp-block-group { padding-inline: var(--space-3) !important; }
  .section.wp-block-group { overflow-x: hidden; }

  /* ── Header ── */
  .site-header { padding: 10px 12px; }
  .site-header__inner.wp-block-group {
    padding: 0 14px !important;
    height: 52px !important;
    border-radius: var(--radius-xl) !important;
    gap: var(--space-2) !important;
  }

  /* Navigation mobile — réduire l'espace */
  .site-header__inner .wp-block-navigation { flex-shrink: 1; min-width: 0; }
  .site-header__inner .wp-block-navigation-item__content {
    padding-inline: 6px !important;
    font-size: .8rem !important;
  }

  /* Dropdown mobile */
  .wp-block-navigation__submenu-container {
    min-width: 180px !important;
  }

  /* ── Hero ── */
  .hero {
    padding-top: 96px !important;
    padding-bottom: var(--space-5) !important;
    text-align: center;
  }
  .hero__content { padding-inline: 0 !important; }
  .hero__eyebrow { font-size: .75rem; padding: 5px 12px; }
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; }
  .hero__subtitle {
    font-size: .9375rem !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .hero__actions.wp-block-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero__actions .wp-block-button { width: 100% !important; }
  .hero__actions .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Metric cards — v10.15.3 : 1 COLONNE en mobile (géré par le bloc
     de vérité en fin de fichier, pas ici). On conserve seulement
     les ajustements de taille des labels/icônes pour petit écran. */
  .metric-card__val { font-size: 1.7rem !important; }
  .metric-card__label { font-size: .75rem !important; }
  .metric-card__icon { width: 28px; height: 28px; font-size: .9rem; margin-bottom: 4px; }

  /* ── Sections (v7.1 : token unifié, plus compact en mobile) ── */
  .section { padding-block: var(--section-gap-sm) !important; }
  .section-eyebrow { font-size: .75rem; }
  .section-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
  .section-subtitle { font-size: .9375rem !important; }

  /* ── Features ── */
  .features-grid.wp-block-columns { grid-template-columns: 1fr !important; gap: var(--space-3) !important; }
  .feature-card.wp-block-column { padding: var(--space-4) var(--space-3) !important; }

  /* ── Switcher ── */
  .geiq-switcher.wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
  }
  .geiq-switcher__btn {
    flex: 1 !important;
    text-align: center !important;
    padding: 9px 10px !important;
    font-size: .8125rem !important;
  }
  .geiq-panel { flex-direction: column !important; gap: var(--space-4) !important; }
  .geiq-panel__visual { flex: none !important; width: 100% !important; }
  .geiq-panel__badge-wrap { padding: var(--space-4) !important; }
  .geiq-panel--btp.wp-block-group,
  .geiq-panel--multi.wp-block-group { padding: var(--space-4) var(--space-3) !important; }
  .panel-btp__stats.wp-block-group,
  .panel-multi__stats.wp-block-group { grid-template-columns: 1fr 1fr !important; gap: var(--space-2) !important; }
  .panel-stat__val { font-size: 1.75rem !important; }

  /* ── Jobs ── */
  .jobs-grid.wp-block-post-template { grid-template-columns: 1fr !important; }
  .job-card.wp-block-group { padding: var(--space-3) !important; }

  /* ── Stats band ── */
  .stats-band.wp-block-group { grid-template-columns: 1fr 1fr !important; }
  .stats-band__val { font-size: 2.25rem !important; }
  .stats-band__item.wp-block-group { padding: var(--space-4) var(--space-3) !important; }

  /* ── Testimonials ── */
  .testimonials-grid.wp-block-columns { grid-template-columns: 1fr !important; }
  .testimonial.wp-block-column { padding: var(--space-4) !important; }
  .testimonial__quote.wp-block-quote { font-size: 1.0625rem !important; }

  /* ── Partners marquee ── */
  .marquee-wrap { overflow: hidden !important; }

  /* ── CTA ── */
  .cta-dark { padding: var(--space-5) var(--space-3) !important; border-radius: var(--radius-lg) !important; }
  .cta-dark__title.wp-block-heading { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .cta-dark__sub { font-size: .9375rem !important; }
  .cta-dark__actions.wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .cta-dark__actions .wp-block-button { width: 100% !important; }
  .cta-dark__actions .wp-block-button__link { width: 100% !important; text-align: center !important; }

  /* ── Footer ── */
  .footer__grid { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
  .footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-3) !important;
  }
  .footer__socials { justify-content: center; }

  /* ── Désactiver effets 3D + magnétisme sur tactile ── */
  @media (hover: none) {
    .metric-card, .feature-card { transform: none !important; }
    .btn-primary, .btn-outline, .wp-block-button__link { transform: none !important; }
  }
}

/* ── Très petit (≤ 479px) ── */
@media (max-width: 479px) {
  /* .hero__metrics : géré par le bloc v10.15.3 (1 colonne) */
  .stats-band.wp-block-group { grid-template-columns: 1fr 1fr !important; }
  .panel-btp__stats.wp-block-group,
  .panel-multi__stats.wp-block-group { grid-template-columns: 1fr !important; }
  .geiq-switcher__btn { padding: 8px 6px !important; font-size: .75rem !important; }
}

/* Scrollbar custom (repris du prototype) */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(227,0,67,.55);
}

/* ═══════════════════════════════════════════════════════════════
   PATCH PIXEL-PERFECT v1.1 — Ajout classes utilisées par
   la page Accueil (wp:html blocks) manquantes dans v1.0
   Source : prototype/index.html (référence validée)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero pill ── */
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 500; color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-200); border-radius: var(--radius-full);
  padding: 6px 16px; margin: 0 auto var(--space-4);
  background: var(--color-neutral-50);
  width: fit-content;
}
.hero__pill-dot,
.hero__pill::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(227,0,67,.7);
  animation: blink 2.5s ease-in-out infinite;
  display: inline-block;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* ── Feature icon (encadré SVG) ── */
.feature-icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.feature-card:hover .feature-icon { transform: scale(1.2) rotate(-6deg); }

/* ── Switcher section wrapper ── */
.switcher-section { padding: var(--space-7) 0; background: var(--color-neutral-0); }
[data-theme="dark"] .switcher-section { background: #1a171b; }

/* ── Switcher logo (bouton central) ── */
.geiq-switcher__logo {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1rem; font-weight: 400; letter-spacing: -.01em;
  color: var(--color-neutral-600);
}
.geiq-switcher__logo em { font-style: normal; color: var(--color-primary); }
.geiq-switcher__btn--center[aria-selected="true"] .geiq-switcher__logo { color: var(--color-neutral-900); }

/* ── Panels wrapper ── */
.geiq-panels { position: relative; }

/* ── Panel BTP : titres et stats ── */
.panel-btp__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: 20px;
}
.panel-btp__kicker-line {
  width: 24px; height: 1px; background: rgba(227,0,67,.4);
  display: inline-block;
}
.panel-btp__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-neutral-900); font-weight: 400;
  line-height: 1.15; margin-bottom: var(--space-3);
}
.panel-btp__title em { font-style: italic; color: var(--color-primary); }
.panel-btp__sub {
  font-size: 1rem; color: var(--color-neutral-600);
  line-height: 1.7; margin-bottom: var(--space-4);
}
.panel-btp__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-btp__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3); position: relative; z-index: 1;
}

/* ── Panel Multi : titres et stats ── */
.panel-multi__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-neutral-500);
  margin-bottom: 20px;
}
.panel-multi__kicker-line {
  width: 24px; height: 1px; background: var(--color-neutral-300);
  display: inline-block;
}
.panel-multi__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-neutral-900); font-weight: 400;
  line-height: 1.15; margin-bottom: var(--space-3);
}
.panel-multi__title em { font-style: italic; color: var(--color-primary); }
.panel-multi__sub {
  font-size: 1rem; color: var(--color-neutral-600);
  line-height: 1.7; margin-bottom: var(--space-4);
}
.panel-multi__stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-3); position: relative; z-index: 1;
}

/* ── Panel Général : grille intro + steps
   ─ Le background/border/blur sont maintenant pilotés par les tokens
     --panel-gen-bg/border/blur (voir bloc v10.15.18 en fin de fichier).
     Ici on ne garde que la géométrie (padding, border-width, radius). */
.geiq-panel--gen .panel-inner--gen {
  display: block; padding: var(--space-5) var(--space-6);
  border-width: 1.5px;
  border-style: solid;
  border-radius: var(--radius-lg);
}
.panel-gen__grid {
  display: flex; gap: var(--space-7); align-items: center;
  flex-wrap: wrap;
}
.panel-gen__intro { flex: 1; min-width: 0; }
.panel-gen__kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.panel-gen__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400; color: var(--color-neutral-900);
  line-height: 1.2; margin-bottom: var(--space-3);
}
.panel-gen__desc {
  font-size: .9375rem; color: var(--color-neutral-600);
  line-height: 1.7; max-width: 440px;
}
.panel-gen__desc strong { color: var(--color-neutral-900); }
.panel-gen__footer {
  border-top: 1px solid var(--color-neutral-200);
  margin-top: var(--space-4); padding-top: var(--space-4);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
}
.panel-gen__footer p { font-size: .875rem; color: var(--color-neutral-400); margin: 0; }
.panel-gen__footer-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Dark mode du panel général : géré par les tokens --panel-gen-*
   dans le bloc v10.15.18 (fin de fichier). */
[data-theme="dark"] .panel-gen__title { color: #f0eef1; }
[data-theme="dark"] .panel-gen__desc { color: rgba(255,255,255,.5); }
[data-theme="dark"] .panel-gen__desc strong { color: #f0eef1; }

/* ── Boutons CTA (petits, on-red, on-dark) ── */
.btn-on-red {
  background: var(--color-primary); color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 6px; padding: 11px 22px;
  font-family: var(--font-body); font-weight: 600;
  font-size: .9375rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn-on-red:hover { background: var(--color-primary-dark, #b8002f); border-color: var(--color-primary-dark, #b8002f); }

.btn-outline-white-sm {
  background: transparent; color: var(--color-primary);
  border: 2px solid rgba(227,0,67,.32);
  border-radius: 6px; padding: 11px 22px;
  font-family: var(--font-body); font-weight: 600;
  font-size: .9375rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn-outline-white-sm:hover { background: rgba(227,0,67,.06); border-color: var(--color-primary); }

.btn-multi-primary {
  background: var(--color-primary); color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 6px; padding: 11px 22px;
  font-family: var(--font-body); font-weight: 600;
  font-size: .9375rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn-multi-primary:hover { background: var(--color-primary-dark, #b8002f); border-color: var(--color-primary-dark, #b8002f); }

.btn-link-primary {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 8px 16px; border-radius: 6px;
  text-decoration: none; transition: background .15s;
}
.btn-link-primary:hover { background: #fce7ed; }

.btn-link-neutral {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .875rem; font-weight: 600; color: var(--color-neutral-900);
  border: 1.5px solid var(--color-neutral-200);
  padding: 8px 16px; border-radius: 6px;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.btn-link-neutral:hover { border-color: var(--color-neutral-900); }

/* ── Step connector (ligne verticale entre numéros 1-2-3) ── */
.geiq-step__connector {
  width: 1.5px; min-height: 16px; flex: 1; margin: 5px 0;
  background: linear-gradient(to bottom, rgba(227,0,67,.38), rgba(227,0,67,.04));
}
.geiq-step:last-child .geiq-step__connector { display: none; }

/* ── Partner marquee : logos ── */
.partner-logo__icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
  color: #fff;
}
.partner-logo__name {
  font-size: .8125rem; font-weight: 600;
  color: var(--color-neutral-900); white-space: nowrap;
}
[data-theme="dark"] .partner-logo__name { color: #f0eef1; }

/* ── CTA dark : eyebrow + responsive ── */
.cta-dark__eyebrow {
  display: block; color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* ── Responsive override pour le panel-gen (mobile stack) ── */
@media (max-width: 767px) {
  .panel-gen__grid { flex-direction: column; gap: var(--space-4); align-items: stretch; }
  .panel-gen__footer { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH PIXEL-PERFECT v1.2 — Surcharge finale
   Les blocs wp:html ne génèrent PAS les classes .wp-block-group
   ni .wp-block-column → les règles ciblant ces classes ne
   s'appliquent plus. Ce patch ajoute des sélecteurs sans préfixe WP
   pour que le rendu corresponde au prototype validé.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO METRICS : cartes flottantes ── */
.hero__metrics .metric-card {
  position: relative;
  background: var(--color-neutral-0) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-3) var(--space-4) !important;
  min-width: 150px;
  max-width: 180px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 20px rgba(26,23,27,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero__metrics .metric-card:hover {
  /* v10.15.2 — hover unifié : juste un lift subtil, plus de rotate
     (géré par le bloc de vérité unique en fin de fichier). */
  box-shadow: 0 8px 24px rgba(196,30,58,.09);
}
.hero__metrics .metric-card__icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin: 0 !important;
}
.hero__metrics .metric-card__val {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-neutral-900);
  line-height: 1;
  font-weight: 400;
  display: block;
}
.hero__metrics .metric-card__label {
  font-size: .8125rem;
  color: var(--color-neutral-500);
  line-height: 1.4;
  display: block;
}
[data-theme="dark"] .hero__metrics .metric-card {
  background: #1a171b !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .hero__metrics .metric-card__val { color: #f0eef1; }

/* ── FEATURES GRID : grille 3 colonnes + cartes ── */
.features-grid,
.features-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-5);
}
@media (max-width: 767px) {
  .features-grid,
  .features-grid.wp-block-group { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .features-grid,
  .features-grid.wp-block-group { grid-template-columns: 1fr 1fr !important; }
}

.feature-card,
.feature-card.wp-block-group {
  background: var(--color-neutral-0) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(227,0,67,.3) !important;
  box-shadow: 0 8px 28px rgba(227,0,67,.08);
}
.feature-card .feature-title,
.feature-card .wp-block-heading.feature-title {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  color: var(--color-neutral-900) !important;
  margin: 0 0 var(--space-2) !important;
}
.feature-card .feature-text {
  font-size: .9375rem !important;
  color: var(--color-neutral-600) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .feature-card.wp-block-group {
  background: #1a171b !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .feature-card .feature-title { color: #f0eef1 !important; }
[data-theme="dark"] .feature-card .feature-text { color: rgba(255,255,255,.55) !important; }

/* ── STATS BAND : 4 colonnes horizontales ── */
.stats-band {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-4) !important;
  background: var(--color-neutral-50);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 767px) {
  .stats-band { grid-template-columns: 1fr 1fr !important; }
}
.stats-band__item {
  text-align: center;
  padding: var(--space-2);
}
.stats-band__val {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 400;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stats-band__label {
  font-size: .875rem;
  color: var(--color-neutral-600);
  line-height: 1.45;
}
[data-theme="dark"] .stats-band {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .stats-band__label { color: rgba(255,255,255,.55); }

/* ── SWITCHER : pill tabs + thumb ── */
.geiq-switcher {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  padding: 4px;
  width: fit-content;
  position: relative;
  gap: 0;
}
.geiq-switcher__thumb {
  position: absolute; top: 4px; left: 4px;
  height: calc(100% - 8px);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 4px rgba(26,23,27,.12);
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              width .28s cubic-bezier(.4,0,.2,1),
              background .2s;
  pointer-events: none;
  z-index: 0;
}
.geiq-switcher__btn {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 600;
  padding: 10px 28px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.geiq-switcher__btn[aria-selected="true"] { color: var(--color-neutral-900); }
.geiq-switcher__btn[data-val="btp"][aria-selected="true"] { color: var(--color-primary); }
.geiq-switcher__btn[data-val="multi"][aria-selected="true"] { color: #fff; }
.geiq-switcher__btn--center { padding: 10px 22px; }
.geiq-switcher[data-active="btp"]  .geiq-switcher__thumb { background: rgba(227,0,67,.08); }
.geiq-switcher[data-active="multi"] .geiq-switcher__thumb { background: #2d2a32; box-shadow: none; }
[data-theme="dark"] .geiq-switcher { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .geiq-switcher__thumb { background: #252028 !important; }
[data-theme="dark"] .geiq-switcher[data-active="btp"] .geiq-switcher__thumb { background: rgba(227,0,67,.2) !important; }
[data-theme="dark"] .geiq-switcher[data-active="multi"] .geiq-switcher__thumb { background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .geiq-switcher__btn { color: rgba(255,255,255,.4); }
[data-theme="dark"] .geiq-switcher__btn[aria-selected="true"] { color: #f0eef1; }

/* ── GEIQ PANELS : panels avec glassmorphism ── */
.geiq-panels { position: relative; max-width: 960px; margin: 0 auto; }
.geiq-panel {
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: panel-fade .25s ease;
}
.geiq-panel--active { display: block; }
@keyframes panel-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel BTP */
/* Panels BTP + Multi : on ne garde ici que la géométrie + position.
   Background/border/blur pilotés par les tokens --panel-btp-* et
   --panel-multi-* dans le bloc v10.15.18 (fin de fichier). */
.geiq-panel--btp .panel-inner,
.geiq-panel--multi .panel-inner {
  border-width: 1.5px;
  border-style: solid;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.geiq-panel--btp .panel-inner::before,
.geiq-panel--multi .panel-inner::before {
  content: ''; position: absolute; bottom: -20%; right: 5%;
  width: 400px; height: 280px;
  background: radial-gradient(ellipse, rgba(227,0,67,.08) 0%, transparent 65%);
  pointer-events: none;
}

/* Stats dans les panels */
.panel-stat {
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(227,0,67,.13);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.panel-stat__val {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-neutral-900);
  line-height: 1;
  margin-bottom: 4px;
}
.panel-stat__val sup {
  font-size: .5em; vertical-align: super;
  color: var(--color-neutral-400);
}
.panel-stat__label {
  font-size: .8125rem; font-weight: 600;
  color: var(--color-neutral-700);
}
.panel-stat__sub {
  font-size: .72rem;
  color: var(--color-neutral-400);
  font-style: italic;
}
.panel-stat--multi {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(45,42,50,.10);
}
.panel-stat--multi .panel-stat__val em {
  color: var(--color-primary); font-style: normal;
}

/* GEIQ Steps (panel général) */
.geiq-steps {
  display: flex; flex-direction: column;
  min-width: 232px; max-width: 268px;
}
.geiq-step {
  display: flex; gap: 14px; align-items: flex-start;
}
.geiq-step__num-wrap {
  display: flex; flex-direction: column;
  align-items: center; flex-shrink: 0;
}
.geiq-step__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #fef0f3 100%);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.geiq-step__body {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(227,0,67,.12);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  margin-bottom: 8px; flex: 1;
}
.geiq-step:last-child .geiq-step__body { margin-bottom: 0; }
.geiq-step__title {
  font-size: .875rem; font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: 2px;
}
.geiq-step__desc {
  font-size: .8125rem;
  color: var(--color-neutral-500);
  line-height: 1.5;
}

/* Responsive : panels BTP/Multi en colonne sur mobile */
@media (max-width: 767px) {
  .geiq-panel--btp .panel-inner,
  .geiq-panel--multi .panel-inner { grid-template-columns: 1fr !important; }
  .geiq-panel--btp .panel-inner > div:first-child,
  .geiq-panel--multi .panel-inner > div:first-child { text-align: center; }
  .geiq-switcher__btn { padding: 8px 14px; font-size: .8125rem; }
}

/* ── MARQUEE PARTENAIRES : défilement horizontal infini ── */
.marquee-wrap {
  overflow: hidden !important;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  margin-top: var(--space-5);
}
.marquee-track {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  animation: marquee-scroll 60s linear infinite !important;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.partner-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 32px !important;
  border-right: 1px solid var(--color-neutral-200) !important;
  flex-shrink: 0 !important;
  width: auto !important;
  filter: grayscale(1) opacity(.45);
  transition: filter .3s ease, transform .25s ease;
  cursor: default;
}
.partner-logo:hover {
  filter: grayscale(0) opacity(1);
  transform: translateY(-2px);
}
[data-theme="dark"] .partner-logo { border-right-color: rgba(255,255,255,.08) !important; }

/* ── TESTIMONIALS : grid 2 colonnes + cards ── */
.testimonials-grid,
.testimonials-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-4) !important;
  margin-top: var(--space-5);
}
@media (max-width: 767px) {
  .testimonials-grid,
  .testimonials-grid.wp-block-group { grid-template-columns: 1fr !important; }
}
.testimonial,
.testimonial.wp-block-group {
  background: var(--color-neutral-0) !important;
  border: 1.5px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-4) !important;
}
.testimonial__quote {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--color-neutral-900) !important;
  margin: 0 !important;
  flex: 1;
}
.testimonial__quote::before { content: '\201C'; color: var(--color-primary); }
.testimonial__quote::after  { content: '\201D'; color: var(--color-primary); }
.testimonial__author {
  display: flex; align-items: center; gap: var(--space-2);
}
.testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--color-neutral-100);
}
.testimonial__name { font-weight: 600; font-size: .9375rem; color: var(--color-neutral-900); }
.testimonial__role { font-size: .8125rem; color: var(--color-neutral-600); margin-top: 2px; }
[data-theme="dark"] .testimonial,
[data-theme="dark"] .testimonial.wp-block-group {
  background: #1a171b !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .testimonial__quote { color: #f0eef1 !important; }
[data-theme="dark"] .testimonial__name { color: #f0eef1; }

/* ── CTA DARK : carte centrale ── */
.cta-dark,
.cta-dark.wp-block-group {
  background: rgba(45,42,50,.055) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(45,42,50,.14) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--space-7) var(--space-5) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-dark::after {
  content: '';
  position: absolute; bottom: -20%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(227,0,67,.10) 0%, transparent 65%);
  pointer-events: none;
}
.cta-dark__inner { position: relative; z-index: 1; }
.cta-dark__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--color-neutral-900) !important;
  margin: 0 0 var(--space-2) !important;
}
.cta-dark__sub {
  font-size: 1.0625rem !important;
  color: var(--color-neutral-600) !important;
  max-width: 440px !important;
  margin: 0 auto var(--space-5) !important;
  line-height: 1.6 !important;
}
.cta-dark__actions {
  display: flex !important;
  gap: var(--space-3) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
[data-theme="dark"] .cta-dark,
[data-theme="dark"] .cta-dark.wp-block-group {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .cta-dark__title { color: #f0eef1 !important; }
[data-theme="dark"] .cta-dark__sub { color: rgba(255,255,255,.55) !important; }

/* ── HERO : centrage du pill ── */
.hero__content { text-align: center; }
.hero__pill { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════════════
   PATCH v1.3 — Boutons, titres alignés, spotlight fond sections
   ═══════════════════════════════════════════════════════════════ */

/* ── BOUTONS : les classes `btn-primary`/`btn-outline` sont sur le WRAPPER
      `.wp-block-button`, pas sur le lien. On cible donc les deux cas. */

.wp-block-button.btn,
.wp-block-button.btn-primary,
.wp-block-button.btn-outline,
.wp-block-button.btn-lg {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
}

/* RESET core button padding/radius pour laisser notre règle en place */
.wp-block-button.btn .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 13px 24px;
  width: auto;
}
.wp-block-button.btn-lg .wp-block-button__link,
.wp-block-button.btn.btn-lg .wp-block-button__link,
.wp-block-button.btn-primary.btn-lg .wp-block-button__link,
.wp-block-button.btn-outline.btn-lg .wp-block-button__link {
  padding: 16px 32px !important;
  font-size: 1.0625rem !important;
  border-radius: 10px !important;
}

/* PRIMARY (rouge plein) */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link.wp-element-button {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border: 2px solid var(--color-primary) !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link.wp-element-button:hover {
  background: var(--color-primary-dark) !important;
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #fff !important;
}

/* OUTLINE (fond transparent + bordure neutre) — override Ollie `.is-style-outline` */
.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.btn-outline .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-outline.btn-outline .wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-neutral-900) !important;
  border: 2px solid var(--color-neutral-300, #c4cdd4) !important;
  outline: none !important;
}
.wp-block-button.btn-outline .wp-block-button__link:hover {
  background: var(--color-neutral-50) !important;
  background-color: var(--color-neutral-50) !important;
  border-color: var(--color-neutral-400) !important;
  color: var(--color-neutral-900) !important;
}

/* Section CTA dark : outline version rouge contour */
.cta-dark .wp-block-button.btn-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
}
.cta-dark .wp-block-button.btn-outline .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Ollie injecte un outline 2px sur les is-style-outline : on le neutralise */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  outline: none !important;
  outline-offset: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TITRES DE SECTION — alignement unifié (TOUT centré)
   ═══════════════════════════════════════════════════════════════ */

.section-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto var(--space-3);
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(26,23,27,.04);
}
.section-eyebrow::before,
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Les wrappers d'en-tête de section centrent leur contenu */
.jobs-section-header,
.switcher-header,
.stats-header,
.partners-header,
.testimonials-header,
.features-header,
.cta-header {
  text-align: center;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

/* H2 titre de section — serif + centré */
.section-title,
.jobs-section-header h2,
.switcher-header h2,
.stats-header h2,
.partners-header h2,
.testimonials-header h2,
.features-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-neutral-900);
  text-align: center !important;
  margin: 0 auto var(--space-2);
  max-width: 720px;
}

/* Sous-texte éventuel sous le h2 */
.switcher-header p,
.jobs-section-header p,
.stats-header p,
.features-header p,
.testimonials-header p {
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-neutral-700);
}

/* ═══════════════════════════════════════════════════════════════
   SPOTLIGHT CANVAS (fond sections) — injecté via page-glow.js
   ═══════════════════════════════════════════════════════════════ */

.hero,
.switcher-section,
.features-section,
.stats-section,
.jobs-section,
.partners-section,
.testimonials-section,
.cta-section,
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.glow-canvas {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* derrière le contenu */
  pointer-events: none;
  /* v10.15.17 — aligné sur l'intensité du footer (radial-gradient CSS).
     Avant : mix-blend-mode:multiply + opacity:0.9 atténuaient le rouge
     d'environ -35% vs footer. Maintenant : opacity 1, pas de blend-mode
     en light → rendu direct, même punch que le gradient footer.
     En dark on garde screen + opacity réduite car sinon le rouge saturé
     brûle sur fond noir. */
  opacity: 1;
}

/* Le contenu des sections passe au-dessus du canvas */
.hero > *:not(.glow-canvas),
.switcher-section > *:not(.glow-canvas),
.features-section > *:not(.glow-canvas),
.stats-section > *:not(.glow-canvas),
.jobs-section > *:not(.glow-canvas),
.partners-section > *:not(.glow-canvas),
.testimonials-section > *:not(.glow-canvas),
.cta-section > *:not(.glow-canvas),
.site-footer > *:not(.glow-canvas) {
  position: relative;
  z-index: 1;
}

/* Cards en glass semi-transparent → le spotlight traverse */
.metric-card,
.feature-card,
.stats-band .stat-item,
.testimonial-card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.job-card {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Dark mode : le canvas doit être plus subtil */
[data-theme="dark"] .glow-canvas {
  mix-blend-mode: screen;
  opacity: 0.6;
}
[data-theme="dark"] .metric-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .stats-band .stat-item,
[data-theme="dark"] .testimonial-card {
  background: rgba(35, 32, 38, 0.65) !important;
}

/* Hover subtil sur les cards (lift + bordure primaire) */
.metric-card,
.feature-card,
.job-card,
.testimonial-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.metric-card:hover,
.feature-card:hover,
.job-card:hover,
.testimonial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 0, 67, 0.25);
  box-shadow: 0 12px 32px rgba(26,23,27,.08),
              0 0 0 1px rgba(227, 0, 67, 0.12);
}

/* ──────────────────────────────────────────
   Persona switch (Candidat / Entreprise)
   Toggle en haut du hero — swap du H1/subtitle/CTA
   ────────────────────────────────────────── */
.persona-switch {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: rgba(26, 23, 27, 0.04);
  border: 1px solid rgba(26, 23, 27, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 28px;
  font-family: var(--font-sans, Inter, system-ui);
}
[data-theme="dark"] .persona-switch {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.persona-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-muted, #6b6b6b);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 220ms ease, background 220ms ease, transform 180ms ease;
}
.persona-switch__btn:hover {
  color: var(--color-text, #1a171b);
}
.persona-switch__btn.is-active {
  background: var(--color-bg, #fff);
  color: var(--color-primary, #e30043);
  box-shadow: 0 1px 2px rgba(26, 23, 27, 0.06),
              0 4px 12px rgba(26, 23, 27, 0.04);
}
[data-theme="dark"] .persona-switch__btn.is-active {
  background: rgba(255,255,255,0.08);
  color: #ff4770;
}
.persona-switch__btn svg {
  opacity: 0.85;
}
.persona-switch__btn.is-active svg {
  opacity: 1;
}

/* ── Views : affichage conditionnel avec fade ── */
.persona-view {
  display: none;
  opacity: 0;
  animation: persona-fade-in 420ms ease-out forwards;
}
html[data-persona="candidate"] .persona-view--candidate,
html[data-persona="company"]   .persona-view--company {
  display: block;
  opacity: 1;
}
/* Surcharge pour .stats-band et .features-grid qui ont leur propre display: grid !important */
.stats-band.persona-view,
.features-grid.persona-view,
.testimonials-grid.persona-view {
  display: none !important;
}
html[data-persona="candidate"] .stats-band.persona-view--candidate,
html[data-persona="company"]   .stats-band.persona-view--company {
  display: grid !important;
}
html[data-persona="candidate"] .features-grid.persona-view--candidate,
html[data-persona="company"]   .features-grid.persona-view--company {
  display: grid !important;
}
html[data-persona="candidate"] .testimonials-grid.persona-view--candidate,
html[data-persona="company"]   .testimonials-grid.persona-view--company {
  display: grid !important;
}
/* v10.15 — hero metrics en persona-view (cartes flex, pas grid) */
.hero__metrics.persona-view {
  display: none !important;
}
html[data-persona="candidate"] .hero__metrics.persona-view--candidate,
html[data-persona="company"]   .hero__metrics.persona-view--company {
  display: flex !important;
}
@keyframes persona-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .persona-view { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   v10.18.1 — Toggle GEIQ BTP / GEIQ Multi (page /entreprises/)
   Pattern jumeau du persona-switch sur l'attribut `data-geiq`.
   Cohabite sans conflit (attribut différent). Le bouton réutilise
   les styles .persona-switch__btn (cf shortcode geiq_geiq_switch).
   ────────────────────────────────────────────────────────────────── */
.geiq-view {
  display: none;
  opacity: 0;
  animation: persona-fade-in 420ms ease-out forwards;
}
html[data-geiq="btp"]   .geiq-view--btp,
html[data-geiq="multi"] .geiq-view--multi {
  display: block;
  opacity: 1;
}
.stats-band.geiq-view,
.features-grid.geiq-view,
.testimonials-grid.geiq-view {
  display: none !important;
}
html[data-geiq="btp"]   .stats-band.geiq-view--btp,
html[data-geiq="multi"] .stats-band.geiq-view--multi { display: grid !important; }
html[data-geiq="btp"]   .features-grid.geiq-view--btp,
html[data-geiq="multi"] .features-grid.geiq-view--multi { display: grid !important; }
html[data-geiq="btp"]   .testimonials-grid.geiq-view--btp,
html[data-geiq="multi"] .testimonials-grid.geiq-view--multi { display: grid !important; }

@media (prefers-reduced-motion: reduce) {
  .geiq-view { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────
   v10.18.13 — Toggle TRIPLE Contact (style .geiq-switcher avec thumb)
   ────────────────────────────────────────────────────────────────── */
.contact-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5, 32px);
  background: var(--color-neutral-100, #f1efe8);
  border: 1px solid var(--color-neutral-200, #d3d1c7);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  gap: 0;
}
.contact-switcher__thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(26, 23, 27, .12);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1), background .2s;
  pointer-events: none;
  z-index: 0;
  margin: 0;
}
.contact-switcher__btn {
  position: relative;
  z-index: 1;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: .875rem;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-neutral-600, #5f5e5a);
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
  margin: 0;
  user-select: none;
}
.contact-switcher__btn.is-active,
.contact-switcher__btn[aria-selected="true"] {
  color: var(--color-neutral-900, #1a171b);
}
.contact-switcher[data-active="btp"]   .contact-switcher__thumb { background: rgba(var(--primary-rgb, 227, 0, 67), .1); }
.contact-switcher[data-active="multi"] .contact-switcher__thumb { background: #2d2a32; box-shadow: none; }
.contact-switcher[data-active="multi"] .contact-switcher__btn[data-val="multi"] { color: #fff; }
.contact-switcher[data-active="btp"]   .contact-switcher__btn[data-val="btp"]   { color: var(--primary, #e30043); }

[data-theme="dark"] .contact-switcher {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .contact-switcher__thumb { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .contact-switcher__btn { color: rgba(255, 255, 255, .65); }
[data-theme="dark"] .contact-switcher__btn.is-active { color: #fff; }

@media (max-width: 540px) {
  .contact-switcher { width: fit-content; max-width: 100%; }
  .contact-switcher__btn { padding: 9px 14px; font-size: .8rem; }
}

.contact-view {
  display: none;
  opacity: 0;
  animation: persona-fade-in 420ms ease-out forwards;
}
html[data-contact="general"] .contact-view--general,
html[data-contact="btp"]     .contact-view--btp,
html[data-contact="multi"]   .contact-view--multi {
  display: block;
  opacity: 1;
}
.contact-view__intro {
  max-width: 540px;
  margin: 0 auto var(--space-3, 16px);
  text-align: center;
  font-size: .95rem;
  color: var(--color-neutral-700, #2c2c2a);
  line-height: 1.55;
}
.contact-view__intro strong { color: var(--primary, #e30043); font-weight: 500; }
.contact-view__form-wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: 0;
}

/* v10.18.17 — Mini-bloc interlocuteur intégré dans chaque vue (au-dessus
   du form), remplace l'ancienne section--contact-cards "placards énormes".
   Avatar circulaire carmin + nom + email mailto + adresse compacte. */
.contact-info {
  max-width: 540px;
  margin: 0 auto var(--space-3, 16px);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .38) 100%);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(26, 23, 27, .04);
}
.contact-info__avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary, #e30043);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
.contact-info__body { flex: 1; min-width: 0; }
.contact-info__name {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-neutral-900, #1a171b);
  line-height: 1.3;
}
.contact-info__role {
  font-weight: 400;
  color: var(--color-neutral-500, #888);
  font-size: .82rem;
}
.contact-info__meta {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--color-neutral-600, #5a575c);
  line-height: 1.4;
}
.contact-info__meta a {
  color: var(--primary, #e30043);
  text-decoration: none;
  font-weight: 500;
}
.contact-info__meta a:hover {
  text-decoration: underline;
}
[data-theme="dark"] .contact-info {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .contact-info__name { color: rgba(255, 255, 255, .92); }
[data-theme="dark"] .contact-info__role,
[data-theme="dark"] .contact-info__meta { color: rgba(255, 255, 255, .65); }

@media (max-width: 480px) {
  .contact-info { gap: 10px; padding: 10px 12px; }
  .contact-info__avatar { width: 34px; height: 34px; font-size: .9rem; }
  .contact-info__name { font-size: .85rem; }
  .contact-info__role { display: block; margin-top: 2px; }
  .contact-info__meta { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-view { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   v10.18.16 — Forms CF7 /contact/ — Option D (inline icons compacts)
   ══════════════════════════════════════════════════════════════════ */
.section--contact-forms .wpcf7 {
  max-width: 540px;
  margin: 0 auto;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .48) 100%);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 8px 28px rgba(26, 23, 27, .06);
  position: relative;
}
.section--contact-forms .wpcf7 form > p,
.section--contact-forms .wpcf7 form { margin: 0 !important; }

/* Stack vertical des champs */
.section--contact-forms .cf7-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wrapper de chaque champ : flex + icône à gauche + input transparent */
.section--contact-forms .cf7-field {
  display: flex;
  align-items: center;
  border: 1px solid rgba(26, 23, 27, .12);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .92);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.section--contact-forms .cf7-field:focus-within {
  border-color: var(--primary, #e30043);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 227, 0, 67), .12);
  background: #fff;
}
.section--contact-forms .cf7-field > svg {
  width: 14px;
  height: 14px;
  color: #888;
  flex-shrink: 0;
}
.section--contact-forms .cf7-field:focus-within > svg {
  color: var(--primary, #e30043);
}
/* Inputs : pas de bordure (portée par le wrap), pas de fond, pas d'outline */
.section--contact-forms .cf7-field .wpcf7-form-control {
  border: none !important;
  background: transparent !important;
  padding: 9px 0 9px 10px !important;
  flex: 1;
  min-width: 0;
  outline: none !important;
  box-shadow: none !important;
  font-size: .88rem !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  color: var(--color-neutral-900, #1a171b) !important;
  line-height: 1.4 !important;
}
.section--contact-forms .cf7-field--select .wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  padding-right: 22px !important;
  cursor: pointer;
}
/* Variant textarea : icône en haut + zone de texte multi-lignes */
.section--contact-forms .cf7-field--textarea {
  align-items: flex-start;
  padding: 9px 12px;
}
.section--contact-forms .cf7-field--textarea > svg {
  margin-top: 4px;
}
.section--contact-forms .cf7-field--textarea .wpcf7-form-control {
  padding: 0 0 0 10px !important;
  min-height: 76px;
  resize: vertical;
  font-family: inherit !important;
}

/* Row 2 colonnes (mêmes hauteurs) */
.section--contact-forms .cf7-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Champs file PJ : style dashed carmin avec icône + label visible */
.section--contact-forms .cf7-row--files .cf7-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(var(--primary-rgb, 227, 0, 67), .05);
  border: 1.5px dashed rgba(var(--primary-rgb, 227, 0, 67), .28);
  border-radius: 8px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .78rem;
  color: var(--color-neutral-700, #2c2c2a);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
  margin: 0;
}
.section--contact-forms .cf7-row--files .cf7-file:hover {
  background: rgba(var(--primary-rgb, 227, 0, 67), .1);
  border-color: var(--primary, #e30043);
}
.section--contact-forms .cf7-row--files .cf7-file > svg {
  width: 14px; height: 14px;
  color: var(--primary, #e30043);
  flex-shrink: 0;
}
.section--contact-forms .cf7-row--files .cf7-file > span {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section--contact-forms .cf7-row--files .cf7-file > span em {
  display: block;
  font-style: normal;
  font-size: .7rem;
  color: var(--color-neutral-500, #888);
  font-weight: 400;
  margin-top: 1px;
}
.section--contact-forms .cf7-row--files .cf7-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* RGPD compact */
.section--contact-forms .wpcf7 .wpcf7-acceptance {
  display: block;
  margin: 12px 0 4px;
  font-size: .78rem;
  color: var(--color-neutral-600, #5a575c);
}
.section--contact-forms .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.section--contact-forms .wpcf7 .wpcf7-acceptance label {
  margin: 0;
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.4;
}
.section--contact-forms .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px; height: 14px;
  accent-color: var(--primary, #e30043);
}

/* Bouton submit en pill carmin standard du DS site (taille hero CTA).
   v10.18.21 — taille normale pill (pas full-width), aligné sur les CTA
   heros style "Nous confier un besoin →". Override agressif !important
   pour battre les classes héritées (.btn .btn-primary .btn-lg). */
.section--contact-forms .wpcf7 input.wpcf7-submit,
.section--contact-forms .wpcf7 input[type="submit"],
.section--contact-forms .wpcf7 .cf7-submit,
.section--contact-forms .wpcf7 .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 24px !important;
  background: var(--primary, #e30043) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px !important;
  font-family: var(--font-sans, 'Inter', sans-serif) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
  margin: 12px auto 0 !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  position: relative !important;
  height: auto !important;
}
.section--contact-forms .wpcf7 input.wpcf7-submit:hover,
.section--contact-forms .wpcf7 input[type="submit"]:hover,
.section--contact-forms .wpcf7 .cf7-submit:hover,
.section--contact-forms .wpcf7 .wpcf7-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 227, 0, 67), .25) !important;
  background: var(--primary, #e30043) !important;
}
/* Centre le bouton dans son wrapper paragraphe éventuel */
.section--contact-forms .wpcf7 p:has(> input[type="submit"]) {
  text-align: center !important;
  margin: 12px 0 0 !important;
}
/* v10.18.23 — annule complètement les classes .btn / .btn-primary / .btn-lg
   héritées du markup CF7 actuel. Spec ultra-haute via page-id + tag + 4 classes.
   Battra TOUT, peu importe les overrides Ollie ou plugins tiers. */
body.page-id-30703 .section--contact-forms .wpcf7 input.wpcf7-submit.btn,
body.page-id-30703 .section--contact-forms .wpcf7 input.wpcf7-submit.btn-primary,
body.page-id-30703 .section--contact-forms .wpcf7 input.wpcf7-submit.btn-lg,
body.page-id-30703 .section--contact-forms .wpcf7 input[type="submit"].btn-lg {
  padding: 10px 22px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  border: none !important;
  background: var(--primary, #e30043) !important;
  background-image: none !important;
  color: #fff !important;
  display: inline-flex !important;
  margin: 12px auto 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
/* v10.18.24 — neutralise le DIV WRAPPER `.cf7-submit` (et le <p> à
   l'intérieur) qui hérite du padding/bg et créait l'illusion d'un
   "gros bouton" autour du vrai pill. */
body.page-id-30703 .section--contact-forms .wpcf7 div.cf7-submit,
body.page-id-30703 .section--contact-forms div.cf7-submit {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}
body.page-id-30703 .section--contact-forms .wpcf7 div.cf7-submit > p,
body.page-id-30703 .section--contact-forms div.cf7-submit > p {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
/* Annule pseudo-éléments éventuels de .btn / .btn-primary qui créent
   le second cercle visible derrière le pill principal. */
.section--contact-forms .wpcf7 input.wpcf7-submit::before,
.section--contact-forms .wpcf7 input.wpcf7-submit::after,
.section--contact-forms .wpcf7 input[type="submit"]::before,
.section--contact-forms .wpcf7 input[type="submit"]::after {
  display: none !important;
  content: none !important;
}
/* Annule un éventuel wrapper <p> ou <span> autour du submit qui aurait
   un fond ou un padding rouge (wp-block-button hérité). */
.section--contact-forms .wpcf7 p:has(> input[type="submit"]),
.section--contact-forms .wpcf7 .wp-block-button:has(> input[type="submit"]) {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Messages CF7 */
.section--contact-forms .wpcf7 .wpcf7-response-output {
  margin-top: 14px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: .85rem;
}
.section--contact-forms .wpcf7-mail-sent-ok .wpcf7-response-output {
  background: rgba(5, 139, 79, .08) !important;
  border-color: rgba(5, 139, 79, .35) !important;
  color: var(--color-success, #058b4f);
}

/* Mobile : stack 1 colonne + form encore plus compact */
@media (max-width: 640px) {
  .section--contact-forms .wpcf7 { padding: 18px; }
  .section--contact-forms .cf7-row--two { grid-template-columns: 1fr; }
  .section--contact-forms .cf7-row--files { gap: 8px; }
}

[data-theme="dark"] .section--contact-forms .wpcf7 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .section--contact-forms .cf7-field {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}
[data-theme="dark"] .section--contact-forms .cf7-field .wpcf7-form-control {
  color: rgba(255, 255, 255, .92) !important;
}
/* v10.18.16 — Styles OBSOLÈTES (option A) — overridés par .cf7-field
   Conservés en cas de fallback CF7 sur autres formulaires sans .cf7-field. */
.section--contact-forms .wpcf7 :not(.cf7-field) > label.cf7-orphan-label {
  display: block;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-neutral-700, #2c2c2a);
  margin: 0 0 10px;
  letter-spacing: .01em;
  line-height: 1.3;
}
.section--contact-forms .wpcf7 input:focus,
.section--contact-forms .wpcf7 select:focus,
.section--contact-forms .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--primary, #e30043);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 227, 0, 67), .12);
  background: #fff;
}
.section--contact-forms .wpcf7 textarea { min-height: 90px; resize: vertical; }
.section--contact-forms .wpcf7 .cf7-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.section--contact-forms .wpcf7 .cf7-row--two label { margin-bottom: 0; }
/* Espacement entre les blocs label : compact (10px au lieu de 14px) */
.section--contact-forms .wpcf7 > label,
.section--contact-forms .wpcf7 form > label,
.section--contact-forms .wpcf7 .cf7-row + label,
.section--contact-forms .wpcf7 label + .cf7-row,
.section--contact-forms .wpcf7 .cf7-row + .cf7-row {
  margin-top: 10px !important;
}

/* Champ file PJ : drop zone discret */
.section--contact-forms .wpcf7 input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  background: rgba(var(--primary-rgb, 227, 0, 67), .04);
  border: 1.5px dashed rgba(var(--primary-rgb, 227, 0, 67), .35);
  border-radius: 10px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .85rem;
  color: var(--color-neutral-600, #5a575c);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.section--contact-forms .wpcf7 input[type="file"]:hover {
  background: rgba(var(--primary-rgb, 227, 0, 67), .08);
  border-color: var(--primary, #e30043);
}

/* Acceptation RGPD */
.section--contact-forms .wpcf7 .wpcf7-acceptance {
  display: block;
  margin: 8px 0 18px;
  font-size: .85rem;
  color: var(--color-neutral-600, #5a575c);
}
.section--contact-forms .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.section--contact-forms .wpcf7 .wpcf7-acceptance label {
  margin: 0;
  font-weight: 400;
}
.section--contact-forms .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px; height: 16px;
  accent-color: var(--primary, #e30043);
}

/* Bouton submit en pill carmin */
.section--contact-forms .wpcf7 .cf7-submit,
.section--contact-forms .wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 26px;
  background: var(--primary, #e30043);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  margin-top: 4px;
}
.section--contact-forms .wpcf7 .cf7-submit:hover,
.section--contact-forms .wpcf7 .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 227, 0, 67), .25);
}

/* Messages de réponse CF7 */
.section--contact-forms .wpcf7 .wpcf7-response-output {
  margin-top: 18px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: .9rem;
}
.section--contact-forms .wpcf7-mail-sent-ok .wpcf7-response-output {
  background: rgba(5, 139, 79, .08) !important;
  border-color: rgba(5, 139, 79, .35) !important;
  color: var(--color-success, #058b4f);
}

/* Grid 2 colonnes responsive */
@media (max-width: 640px) {
  .section--contact-forms .wpcf7 { padding: 22px; }
  .section--contact-forms .wpcf7 .cf7-row--two { grid-template-columns: 1fr; }
}

[data-theme="dark"] .section--contact-forms .wpcf7 {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .section--contact-forms .wpcf7 input,
[data-theme="dark"] .section--contact-forms .wpcf7 select,
[data-theme="dark"] .section--contact-forms .wpcf7 textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .92);
}

/* ──────────────────────────────────────────
   Scroll indicator hero
   Injecté par functions.php dans la 1ère section
   ────────────────────────────────────────── */
.hero-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--color-text-muted, #6b6b6b);
  text-decoration: none !important;
  font-family: var(--font-sans, Inter, system-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  animation: hero-scroll-fade-in 800ms 1200ms ease-out forwards,
             hero-scroll-bob 2.4s 2000ms ease-in-out infinite;
  transition: opacity 420ms ease, transform 420ms ease;
  z-index: 5;
  pointer-events: auto;
}
.hero-scroll-indicator:hover {
  color: var(--color-primary, #e30043);
}
.hero-scroll-indicator__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid currentColor;
  opacity: 0.6;
}
.hero-scroll-indicator__arrow svg {
  display: block;
  opacity: 0.85;
}
.hero-scroll-indicator.is-hidden {
  opacity: 0 !important;
  transform: translate(-50%, 12px) !important;
  pointer-events: none;
  animation: none !important;
}
@keyframes hero-scroll-fade-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 0.9; transform: translate(-50%, 0); }
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator {
    animation: hero-scroll-fade-in 600ms ease-out forwards;
  }
}
@media (max-width: 640px) {
  .hero-scroll-indicator { bottom: 18px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════
   v5.5 — SOCIAL LINKS (header pills LinkedIn/Facebook)
   ══════════════════════════════════════════════════════════ */
.social-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px;
}
.social-links__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--color-text, #1a1a1a);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1), transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.social-links__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--social-brand, #1a1a1a);
  transform: scale(0);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.social-links__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  transition: border-color 280ms ease;
  z-index: 2;
  pointer-events: none;
}
.social-links__item svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.social-links__item:hover {
  color: #fff;
  transform: translateY(-2px);
}
.social-links__item:hover::before { transform: scale(1); }
.social-links__item:hover::after  { border-color: transparent; }
.social-links__item:hover svg     { transform: scale(1.08); }
.social-links__item:focus-visible {
  outline: 2px solid #e23d5b;
  outline-offset: 3px;
}
.social-links__item--linkedin  { --social-brand: #0077B5; }
.social-links__item--facebook  { --social-brand: #1877F2; }
.social-links__item--instagram { --social-brand: #E4405F; }
.social-links__item--tiktok    { --social-brand: #000000; }

[data-theme="dark"] .social-links__item {
  color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .social-links__item::after {
  border-color: rgba(255,255,255,0.12);
}

@media (max-width: 640px) {
  .social-links { gap: 4px; margin: 0 4px; }
  .social-links__item { width: 32px; height: 32px; }
  .social-links__item svg { width: 15px; height: 15px; }
}

/* ══════════════════════════════════════════════════════════
   v5.5 — ACTUS GRID (homepage + archive)
   ══════════════════════════════════════════════════════════ */
.actus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: var(--space-5, 32px);
}
/* v10.15.5 — centrer + resserrer si exactement 3 cartes (count="3") */
.actus-grid:has(> .actu-card:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
  margin-inline: auto;
}
/* v10.15.5 — idem pour 2 cartes */
.actus-grid:has(> .actu-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin-inline: auto;
}
@media (max-width: 1200px) { .actus-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .actus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .actus-grid { grid-template-columns: 1fr; gap: 18px; } }

.actu-card {
  position: relative;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 320ms ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.actu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.14);
  border-color: rgba(226,61,91,0.22);
}
.actu-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.actu-card__cover {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1a1a1a;
}
.actu-card__cover img,
.actu-card__cover .actu-card__svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
.actu-card:hover .actu-card__cover img,
.actu-card:hover .actu-card__svg {
  transform: scale(1.05);
}
.actu-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.96);
  color: #1a1a1a;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.2;
}
.actu-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.actu-card__date {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted, #6b6b6b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.actu-card__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  margin: 0;
  color: var(--color-text, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.actu-card__excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted, #555);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.actu-card__more {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #e23d5b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 280ms ease;
}
.actu-card:hover .actu-card__more { gap: 10px; }

[data-theme="dark"] .actu-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .actu-card:hover {
  border-color: rgba(226,61,91,0.35);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.5);
}
[data-theme="dark"] .actu-card__cat {
  background: rgba(20,20,20,0.88);
  color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .actu-card__title {
  color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .actu-card__excerpt {
  color: rgba(255,255,255,0.65);
}

@media (prefers-reduced-motion: reduce) {
  .actu-card, .actu-card__cover img, .actu-card__svg,
  .social-links__item, .social-links__item::before, .social-links__item svg {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   v6.0 — PAGES SPOKE (dispositif / candidats / entreprises / actus / contact / offres)
   ══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   v10.17.17 — Masquer le header « post title » auto-généré par
   Ollie sur les pages Spoke.
   ─────────────────────────────────────────────────────────────
   Ollie (le thème parent) pose automatiquement un bloc
   <div class="wp-block-group alignfull">
     <h1 class="wp-block-post-title">{post_title}</h1>
   </div>
   en tête de chaque page, juste avant .entry-content.

   Sur la home, c'est masqué parce que le hero couvre toute la vue.
   Sur les Spoke (/le-dispositif/, /actus/, /contact/…), ça crée une
   bande blanche en haut avec le nom de la page en doublon du hero
   interne (qui a déjà son titre + eyebrow + sub).

   Le sélecteur `:has(.wp-block-post-title)` cible UNIQUEMENT le
   wrapper qui contient un post title, aucun risque de masquer
   autre chose par accident.
   ──────────────────────────────────────────────────────────── */
body:not(.home) main > .wp-block-group:has(> .wp-block-post-title),
body:not(.home) main > .wp-block-group:has(> .wp-block-heading.wp-block-post-title) {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   v10.17.18 — UNIFORMISATION LARGEURS Home ↔ Spoke.
   ─────────────────────────────────────────────────────────────
   Symptôme : les sections des pages Spoke (/le-dispositif/, /actus/,
   /contact/, /entreprises/, /candidats/, /geiq-btp/, /geiq-multi/,
   /equipe/, /faq/, etc.) rendent avec une largeur maximale plus
   étroite que les mêmes sections sur la home.

   Cause racine : WordPress FSE utilise deux templates différents :
     - Home : templates/front-page.html (ou variant custom)
       → <main class="site-main"> sans contrainte
       → <div class="entry-content"> sans alignwide ni has-global-padding
       → sections full-width, paddings gérés par la CSS de chaque section
     - Spoke : templates/page.html (hérité d'Ollie parent)
       → <main class="alignwide" style="padding:xx-large">
       → <div class="entry-content alignwide has-global-padding is-layout-constrained">
       → sections contraintes à --wp--style--global--wide-size (≈1200px)
         PLUS padding latéral global PLUS padding vertical xx-large

   Fix non-destructif : on neutralise les contraintes parasites sur
   `<main>` et `.entry-content` des pages Spoke, pour que les sections
   reprennent exactement le comportement full-width de la home. Les
   sections elles-mêmes gardent leur padding interne (--section-gap*)
   et leurs `.container` limitent la largeur du contenu comme sur home.

   Pourquoi CSS plutôt qu'override le template FSE : plus résistant
   aux updates d'Ollie parent, rollback instantané si besoin, zéro
   impact sur la home.
   ──────────────────────────────────────────────────────────── */
body:not(.home) main.wp-block-group,
body:not(.home) main.site-main {
  /* Retire alignwide max-width + padding inline xx-large imposés par Ollie */
  max-width: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.home) main > .entry-content,
body:not(.home) main > .entry-content.wp-block-post-content {
  /* Retire alignwide max-width + has-global-padding latéral */
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* Hero des pages intérieures */
.page-hero {
  padding: calc(var(--space-7, 80px) + 60px) 0 var(--space-6, 56px);
  background: linear-gradient(180deg, rgba(226,61,91,0.04) 0%, rgba(255,255,255,0) 100%);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle at center, rgba(226,61,91,0.10), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__title {
  font-size: clamp(38px, 6vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 12px 0 18px !important;
  max-width: 820px;
}
.page-hero__title em {
  font-style: normal;
  color: #e23d5b;
  display: inline;
}
.page-hero__sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--color-text-muted, #555);
  max-width: 680px;
  margin: 0 0 28px;
}
[data-theme="dark"] .page-hero {
  background: linear-gradient(180deg, rgba(226,61,91,0.08) 0%, rgba(255,255,255,0) 100%);
}
[data-theme="dark"] .page-hero__sub { color: rgba(255,255,255,0.72); }

/* Variante "entreprise" en teinte bleue discrète */
.page-hero--entreprises::before {
  background: radial-gradient(circle at center, rgba(10,108,201,0.10), transparent 70%);
}

/* Steps parcours (Le dispositif) */
.dispositif-steps.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: var(--space-5, 32px);
}
@media (max-width: 900px) {
  .dispositif-steps.wp-block-columns { grid-template-columns: 1fr !important; }
}
.dispositif-step.wp-block-column {
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 28px 24px !important;
  position: relative;
  overflow: hidden;
  flex: initial !important;
}
.dispositif-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #e23d5b, #ff7849);
}
.dispositif-step__num {
  font-size: 40px;
  font-weight: 700;
  color: #e23d5b;
  margin: 0 0 8px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dispositif-step__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.3;
}
.dispositif-step__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted, #555);
  margin: 0;
}
[data-theme="dark"] .dispositif-step.wp-block-column {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .dispositif-step__desc { color: rgba(255,255,255,0.65); }

/* Parcours list (Candidats + Entreprises) */
.parcours-list {
  list-style: none !important;
  padding: 0 !important;
  margin: var(--space-5, 32px) 0 0 !important;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.parcours-list li {
  position: relative;
  padding: 16px 20px 16px 52px !important;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text, #1a1a1a);
  counter-increment: parcours;
}
.parcours-list {
  counter-reset: parcours;
}
.parcours-list li::before {
  content: counter(parcours);
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: #e23d5b;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.parcours-list li strong {
  color: #e23d5b;
  font-weight: 600;
}
[data-theme="dark"] .parcours-list li {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}

/* Contact cards (Contact) */
.contact-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
  margin-top: var(--space-5, 32px);
}
@media (max-width: 820px) {
  .contact-grid.wp-block-columns { grid-template-columns: 1fr !important; }
}
.contact-card.wp-block-column {
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 30px 28px !important;
  position: relative;
  flex: initial !important;
}
.contact-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
  background: var(--contact-accent, #e23d5b);
}
.contact-card--btp::before   { background: var(--primary, #e30043); }
.contact-card--multi::before { background: #2d2a32; }
/* v10.18.16 — alignement charte carmin GEIQ56 (au lieu de orange/vert)
   + glass liquide + boutons pill carmin DS pour cohérence avec /entreprises/. */
.section--contact-cards .contact-card.wp-block-column {
  background: linear-gradient(135deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .48) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .6) !important;
  box-shadow: 0 6px 20px rgba(26, 23, 27, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .25s ease;
}
.section--contact-cards .contact-card.wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(26, 23, 27, .08), 0 0 0 2px rgba(var(--primary-rgb, 227, 0, 67), .25);
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .35) !important;
}
.section--contact-cards .contact-card--btp .contact-card__eyebrow,
.section--contact-cards .contact-card--multi .contact-card__eyebrow {
  color: var(--primary, #e30043) !important;
}
.section--contact-cards .contact-card .wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--primary, #e30043) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  border: none !important;
  font-weight: 500 !important;
}
.section--contact-cards .contact-card .wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--primary, #e30043) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--primary-rgb, 227, 0, 67), .22);
}
[data-theme="dark"] .section--contact-cards .contact-card.wp-block-column {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
.contact-card h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
}
.contact-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted, #555);
  margin: 0 0 14px;
}
.contact-card p strong { color: var(--color-text, #1a1a1a); font-weight: 600; }
[data-theme="dark"] .contact-card.wp-block-column {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .contact-card p { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .contact-card p strong { color: rgba(255,255,255,0.95); }

/* v7.7 — Éléments internes des contact-cards (BEM-like) */
.contact-card__eyebrow {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary, #e30043) !important;
  margin: 0 0 10px !important;
}
.contact-card--btp  .contact-card__eyebrow { color: #e05c00 !important; }
.contact-card--multi .contact-card__eyebrow { color: #2e9e6e !important; }
.contact-card__title {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 0 12px !important;
}
.contact-card__sub {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--color-neutral-600, #4b575f) !important;
  margin: 0 0 18px !important;
}
.contact-card__meta {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--color-neutral-900, #1a171b) !important;
  margin: 0 0 18px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
[data-theme="dark"] .contact-card__meta {
  color: rgba(255,255,255,0.9) !important;
  border-top-color: rgba(255,255,255,0.1);
}
.contact-card .wp-block-buttons {
  margin-top: auto;
}
.contact-card .wp-block-button__link {
  width: 100%;
  text-align: center;
}
/* Accent couleur des boutons par carte */
.contact-card--btp .wp-block-button.is-style-fill .wp-block-button__link {
  background-color: #e05c00 !important;
  border-color: #e05c00 !important;
}
.contact-card--multi .wp-block-button.is-style-fill .wp-block-button__link {
  background-color: #2e9e6e !important;
  border-color: #2e9e6e !important;
}
/* Ligne de repli sous les cartes */
.contact-general {
  margin-top: var(--space-4, 28px) !important;
  font-size: 14.5px;
  color: var(--color-neutral-600, #4b575f);
}
.contact-general a {
  color: var(--color-primary, #e30043);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CTA final sur pages Spoke */
.section--cta-final {
  background: linear-gradient(135deg, rgba(226,61,91,0.04), rgba(10,108,201,0.04));
  padding: var(--section-gap) 0;
  text-align: center;
}
.section--cta-final .section-title { margin-bottom: 14px; }
.section--cta-final .section-sub { max-width: 560px; margin: 0 auto 28px; }
.section--cta-final .wp-block-buttons { justify-content: center !important; }
[data-theme="dark"] .section--cta-final {
  background: linear-gradient(135deg, rgba(226,61,91,0.08), rgba(10,108,201,0.08));
}

/* Actus archive + jobs section : padding cohérent */
.section--actus-archive,
.section--jobs,
.section--contact,
.section--switcher,
.section--partners {
  padding: var(--section-gap) 0;
}



/* =========================================================================
   v6.1 — Pages Spoke (contenu PDF client)
   ========================================================================= */

/* Hero léger pour les pages intérieures */
.hero-spoke {
  background: linear-gradient(180deg, rgba(226,61,91,0.03), transparent 70%);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.hero-spoke__title {
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 0 0 18px !important;
}
.hero-spoke__lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  max-width: 720px;
  color: var(--color-text-muted, #555);
}
[data-theme="dark"] .hero-spoke__lead { color: rgba(255,255,255,0.72); }

/* Bandes section alternées */
.section-band { background: var(--color-bg, #fff); }
.section-band--alt { background: var(--color-bg-soft, #fafafa); }
[data-theme="dark"] .section-band { background: var(--color-bg, #0f0f10); }
[data-theme="dark"] .section-band--alt { background: rgba(255,255,255,0.025); }

/* Procédure (liste ordonnée stylisée) */
.procedure-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  max-width: 800px;
  margin: 0 auto;
}
.procedure-list li {
  counter-increment: step;
  position: relative;
  padding: 18px 18px 18px 68px;
  margin: 0 0 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-bg, #fff);
  line-height: 1.55;
}
.procedure-list li::before {
  content: counter(step);
  position: absolute;
  top: 50%; left: 18px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #e23d5b;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
[data-theme="dark"] .procedure-list li {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

/* FAQ collapsibles (details/summary) */
.faq-item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  margin: 0 0 10px;
  background: var(--color-bg, #fff);
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item[open] { border-color: rgba(226,61,91,0.4); }
.faq-item summary {
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 56px;
  font-weight: 500;
  line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(226,61,91,0.1);
  color: #e23d5b;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.faq-item p {
  padding: 0 22px 20px;
  margin: 0;
  color: var(--color-text-muted, #555);
  line-height: 1.65;
}
[data-theme="dark"] .faq-item {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .faq-item p { color: rgba(255,255,255,0.72); }

/* Témoignages — variante couleur (Sprint A action #5, side-stripes retirés, bordure pleine 1px) */
.temoignage--btp   { border: 1px solid rgba(224, 92, 0, .35);   padding: 18px 22px; border-radius: var(--radius-md, 6px); }
.temoignage--multi { border: 1px solid rgba(46, 158, 110, .35); padding: 18px 22px; border-radius: var(--radius-md, 6px); }
.temoignage cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  font-size: 14px;
}
[data-theme="dark"] .temoignage cite { color: rgba(255,255,255,0.9); }

/* CTA band (bas de page Spoke) */
.cta-band {
  background: linear-gradient(135deg, rgba(226,61,91,0.04), rgba(10,108,201,0.04));
  text-align: center;
}
.cta-band h2 { margin-bottom: 24px !important; }
[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, rgba(226,61,91,0.08), rgba(10,108,201,0.08));
}

/* =========================================================================
   v7.0 — UNIFICATION HERO SPOKE
   Règles déplacées vers un seul bloc « Hero Spoke consolidated » plus bas.
   Principe : .section--hero-spoke hérite TOUT de .hero__* (base ligne ~485).
   Seules les différences réelles (padding-section, max-width interne) restent.
   Voir /docs/BONNES-PRATIQUES.md pour les règles de modification/extension.
   ========================================================================= */

/* v7.1 — Hero Spoke : padding en UNE SEULE couche, sur la section.
   Avant : .section--hero-spoke (140) + .hero__content (72) = 212 px de vide
           au-dessus du eyebrow. Racine des "bandes fantômes" signalées.
   Après : .section--hero-spoke porte tout, .hero__content ne sert plus qu'à
           contraindre la largeur max (1080 px). Tokens dans global.css. */
.site-main .section--hero-spoke {
  padding-top: var(--section-gap-hero) !important;
  padding-bottom: var(--section-gap-sm) !important;
  position: relative;
}
.site-main .section--hero-spoke .hero__content {
  max-width: 1080px;
  padding-block: 0;
}
.site-main .section--hero-spoke .hero__actions.wp-block-buttons {
  margin-top: 28px;
}
/* splitReveal JS (header.js) wrap chaque mot en <span>, ce qui casse
   background-clip: text sur le <em> → texte invisible. On garde l'italique
   rouge franc, comme sur la homepage via reduced-motion. */
.section--hero-spoke .hero__title em {
  font-style: italic;
  color: var(--color-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
[data-theme="dark"] .section--hero-spoke .hero__subtitle { color: rgba(255, 255, 255, 0.72); }

/* Badge numéroté pour les étapes de procédure (remplace .feature-icon) */
.feature-icon--step {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e23d5b, #c72e48) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(226,61,91,0.25);
}
.feature-icon--step .feature-icon__num {
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.feature-card:hover .feature-icon--step {
  transform: scale(1.08) rotate(-4deg);
  transition: transform 0.25s ease;
}

/* FAQ — enrober l'ensemble pour qu'il respire dans la section */
.section .faq-wrap { max-width: 820px; margin: 0 auto; }
.section--alt .faq-item { background: #fff; }
[data-theme="dark"] .section--alt .faq-item { background: rgba(255,255,255,0.04); }

/* Témoignages — harmoniser avec .testimonial / .testimonial__quote pour que
   le look matche la homepage quand on tombe dans les pages Spoke */
.testimonials-grid .testimonial .testimonial__quote p { margin: 0 0 16px; }
.testimonials-grid .testimonial .testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Bloc "admins" — grille 3 colonnes compactes, membres simples.
   Matche à la fois :
   - l'ancien markup Gutenberg (wp:columns → .admins-grid.wp-block-columns)
   - le markup du shortcode [geiq56_admins] → simple .admins-grid */
.admins-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-4, 20px) !important;
  margin-top: var(--space-4, 24px) !important;
}
.admins-grid--bureau {
  margin-bottom: var(--space-5, 36px) !important;
}
.admins-grid .wp-block-column { padding: 0 !important; }
.admins-grid .admin-card {
  padding: 16px 18px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  background: var(--color-bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admins-grid .admin-card--bureau {
  border-color: rgba(226, 61, 91, 0.22);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admins-grid .admin-card__role {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #e23d5b);
  margin: 0 0 4px;
}
.admins-grid .admin-card__name {
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
  color: var(--color-text, #1a1a1a);
}
.admins-grid .admin-card__company {
  font-size: 0.875rem;
  color: var(--color-neutral-600, #666);
  margin: 2px 0 0;
}
.admins-grid .admin-card__company:empty { display: none; }
[data-theme="dark"] .admins-grid .admin-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .admins-grid .admin-card__name { color: #f0eef1; }
[data-theme="dark"] .admins-grid .admin-card__company { color: rgba(255,255,255,0.55); }
@media (max-width: 900px) { .admins-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .admins-grid { grid-template-columns: 1fr !important; } }


/* =========================================================================
   v6.2 — HARMONISATION PAGES SPOKE AVEC HOMEPAGE
   Largeur pleine, spotlight, glass cohérent, animations fade-in.
   ========================================================================= */

/* ── Pleine largeur extérieure + container interne à 1280px ───────────── */
.site-main .section--hero-spoke,
.site-main .section--why,
.site-main .section--process,
.site-main .section--testimonials,
.site-main .section--faq,
.site-main .section--stats,
.site-main .section--admins,
.site-main .section--adhesion,
.site-main .section--cta-final,
.site-main .section--actus-archive,
.site-main .section--jobs,
.site-main .section--contact,
.site-main .section--dispositif-schema,
.site-main .section--dispositif-intro,
.site-main .section--trio {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: var(--section-gutter) !important;
  padding-block: var(--section-gap);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* section--alt retiré volontairement : c'est une classe partagée avec la
   homepage (section--alt, section--actus). Les sections Spoke qui combinent
   (ex: "section--alt section--process") sont déjà captées via .section--process. */

/* Tous les enfants directs (hors glow-canvas) centrés dans un max-width */
.site-main .section--hero-spoke > *:not(.glow-canvas),
.site-main .section--why > *:not(.glow-canvas),
.site-main .section--process > *:not(.glow-canvas),
.site-main .section--testimonials > *:not(.glow-canvas),
.site-main .section--faq > *:not(.glow-canvas),
.site-main .section--stats > *:not(.glow-canvas),
.site-main .section--admins > *:not(.glow-canvas),
.site-main .section--adhesion > *:not(.glow-canvas),
.site-main .section--cta-final > *:not(.glow-canvas),
.site-main .section--actus-archive > *:not(.glow-canvas),
.site-main .section--jobs > *:not(.glow-canvas),
.site-main .section--contact > *:not(.glow-canvas),
.site-main .section--dispositif-schema > *:not(.glow-canvas),
.site-main .section--dispositif-intro > *:not(.glow-canvas),
.site-main .section--trio > *:not(.glow-canvas) {
  max-width: 1280px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* Section trio (dispositif) : mêmes règles que les autres sections centrées */
.section--trio { text-align: center; }
.section--trio .features-grid { text-align: left; }
.section--trio .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(227,0,67,0.16);
  background: rgba(227,0,67,0.04);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #e30043);
  font-weight: 600;
  margin: 0 auto 16px;
}
.section--trio .section-title {
  font-family: var(--font-display, "Instrument Serif"), serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  line-height: 1.08 !important;
  margin: 0 auto 14px !important;
  max-width: 920px;
}
.section--trio .section-sub {
  max-width: 640px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  color: var(--color-text-muted, #555);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}
.section--trio .feature-card {
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(26, 23, 27, 0.08);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section--trio .feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 0, 67, 0.25);
  box-shadow: 0 12px 32px rgba(26,23,27,.08),
              0 0 0 1px rgba(227, 0, 67, 0.12);
}
[data-theme="dark"] .section--trio .feature-card {
  background: rgba(35, 32, 38, 0.65) !important;
  border-color: rgba(255,255,255,0.08);
}
/* Fade-in */
.section--trio .section-eyebrow,
.section--trio .section-title,
.section--trio .section-sub,
.section--trio .features-grid {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.section--trio .features-grid.is-inview > * {
  animation: geiq-spoke-card-in .55s cubic-bezier(.2,.7,.2,1) both;
}
.section--trio .features-grid.is-inview > *:nth-child(2) { animation-delay: .08s; }
.section--trio .features-grid.is-inview > *:nth-child(3) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .section--trio .section-eyebrow,
  .section--trio .section-title,
  .section--trio .section-sub,
  .section--trio .features-grid { opacity: 1; transform: none; transition: none; }
  .section--trio .features-grid.is-inview > * { animation: none; }
}
@media (max-width: 720px) {
  .site-main .section--trio { padding-inline: 18px !important; padding-block: 48px; }
}

/* =========================================================================
   v6.3.1 — Consolidation Spoke SCOPÉE (body:not(.home))
   --------------------------------------------------------------------------
   La homepage partage des classes (section--actus, section--alt, feature-card,
   testimonial, actu-card, job-card). Toutes les règles ci-dessous sont
   scopées par `body:not(.home)` pour n'impacter QUE les pages Spoke.
   La homepage garde ses styles d'origine intacts.
   ========================================================================= */

/* ── 1. Fallback largeur si une page reste en is-layout-constrained ─── */
body:not(.home) .site-main [class*="section--"].is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 1280px;
}

/* ── 2. Boutons Spoke (fill + outline) ──────────────────────────────── */
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link {
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md, 10px);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(227, 0, 67, 0.18);
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(227, 0, 67, 0.30);
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .5s ease;
  pointer-events: none;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-fill > .wp-block-button__link:hover::after {
  transform: translateX(120%);
}

body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--color-neutral-900);
  border: 2px solid var(--color-neutral-300, #c4cdd4);
  border-radius: var(--radius-md, 10px);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}
body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: rgba(227, 0, 67, 0.04);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}
[data-theme="dark"] body:not(.home) [class*="section--"] .wp-block-button.is-style-outline > .wp-block-button__link {
  color: #f0eef1;
  border-color: rgba(255, 255, 255, 0.18);
}

body:not(.home) [class*="section--"] .wp-block-buttons { gap: 14px; flex-wrap: wrap; }

/* v7.0 : règles Hero Spoke consolidées en haut du fichier (voir ligne ~3870).
   Plus de duplication ici. */

/* ── 4. Bande alternée (Spoke uniquement) ───────────────────────────── */
body:not(.home) .section--alt { background: var(--color-bg-soft, #fafafa); }
[data-theme="dark"] body:not(.home) .section--alt { background: rgba(255, 255, 255, 0.025); }

/* v6.3.5 : le CTA final Spoke bascule en gris doux pour restaurer
   l'alternance blanc/gris après le bloc "Trois temps" sur /le-dispositif/.
   Sur la homepage il reste en gradient rose-bleu subtil (voir ligne 3701)
   — le sélecteur body:not(.home) protège cette règle d'être appliquée là. */
body:not(.home) .section--cta-final {
  background:
    linear-gradient(135deg, rgba(226, 61, 91, .035), rgba(10, 108, 201, .035)),
    var(--color-bg-soft, #fafafa);
}
[data-theme="dark"] body:not(.home) .section--cta-final {
  background:
    linear-gradient(135deg, rgba(226, 61, 91, .08), rgba(10, 108, 201, .08)),
    rgba(255, 255, 255, .025);
}

/* ── 5. Titres de sections Spoke (hors hero) ────────────────────────── */
/* Pastille eyebrow neutre + dot rouge animé (clone du style homepage).
   v7.0 : on N'APPLIQUE PLUS au .hero__eyebrow — celui-ci hérite de la base
   .hero__eyebrow (ligne ~510) qui est DÉJÀ centrée et animée correctement. */
body:not(.home) [class*="section--"] .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium, 500);
  color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  margin: 0 auto var(--space-4, 16px);
  background: var(--color-neutral-50);
  text-transform: none;
  letter-spacing: 0;
}
body:not(.home) [class*="section--"] .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(227, 0, 67, .7);
  animation: blink 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

/* Titre de section (H2) — taille homepage */
body:not(.home) [class*="section--"] .section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-regular, 400);
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-neutral-900);
  letter-spacing: -0.02em;
  line-height: var(--lh-display, 1.1);
  margin: 0 auto 14px;
  max-width: 920px;
  text-align: center;
}
body:not(.home) [class*="section--"] .section-title em {
  font-style: italic;
  color: var(--color-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

/* Garde-fou : certains thèmes parents ajoutent has-text-align-left.
   On force le centrage sur les sections non-hero. */
body:not(.home) [class*="section--"]:not(.section--hero-spoke) > .section-title,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .wp-block-heading.section-title,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .section-eyebrow,
body:not(.home) [class*="section--"]:not(.section--hero-spoke) .section-sub {
  text-align: center !important;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.home) [class*="section--"] .section-eyebrow::before { animation: none; }
}

body:not(.home) [class*="section--"] .section-sub {
  max-width: 640px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  color: var(--color-text-muted, var(--color-neutral-500));
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
}

body:not(.home) :is(.section--why, .section--process, .section--testimonials,
    .section--faq, .section--stats, .section--admins, .section--adhesion,
    .section--cta-final, .section--actus-archive, .section--jobs,
    .section--dispositif-intro, .section--dispositif-schema,
    .section--dispositif-switcher, .section--trio) {
  text-align: center;
}
body:not(.home) :is(.section--why .features-grid, .section--trio .features-grid,
    .section--testimonials .testimonials-grid, .section--admins .admins-grid,
    .section--actus-archive .actus-grid, .section--jobs .jobs-grid) {
  text-align: left;
}

/* ── 6. Cards glass (Spoke uniquement) ──────────────────────────────── */
/* v6.3.5 : .feature-card est RETIRÉ de cette règle glass — il reprend désormais
   le style homepage (radial gradient + icon animé + tilt 3D) pour rester cohérent
   avec la home. Voir bloc dédié plus bas (« Feature cards style homepage »). */
body:not(.home) :is(.testimonial, .testimonial-card, .admin-card,
    .job-card, .contact-card, .actu-card, .stats-band .stat-item,
    .procedure-list li, .faq-item) {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(26, 23, 27, 0.08);
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
[data-theme="dark"] body:not(.home) :is(.testimonial, .testimonial-card,
    .admin-card, .job-card, .contact-card, .actu-card,
    .stats-band .stat-item, .procedure-list li, .faq-item) {
  background: rgba(35, 32, 38, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
}
body:not(.home) :is(.testimonial, .admin-card, .job-card, .actu-card):hover {
  transform: translateY(-3px);
  border-color: rgba(227, 0, 67, 0.25);
  box-shadow: 0 12px 32px rgba(26, 23, 27, .08), 0 0 0 1px rgba(227, 0, 67, 0.12);
}

/* ── 6bis. Feature cards — parité visuelle avec la homepage ──────────
   v6.3.5 — Julien a remonté que les feature-cards des pages Spoke étaient
   "trop rectangles", sans l'effet radial + icône animée + tilt 3D de la home.
   On re-applique ici le style homepage (voir ligne ~708) pour le scope Spoke,
   en gardant assez de spécificité pour l'emporter sur l'ancien glass. */
body:not(.home) .feature-card,
body:not(.home) .feature-card.wp-block-column {
  position: relative;
  /* !important pour battre l'ancienne règle flat ligne 2446 (déjà !important).
     On recolle ici au style homepage : radial gradient réactif à la souris,
     border 1.5px neutral, radius XL, padding généreux pour un effet carré. */
  background:
    radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%), rgba(227, 0, 67, .07) 0%, transparent 100%),
    var(--color-neutral-0, #fff) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1.5px solid var(--color-neutral-200, #e5e7eb) !important;
  border-radius: var(--radius-xl, 24px) !important;
  padding: var(--space-5, 32px) var(--space-4, 24px) !important;
  transition: border-color .2s, box-shadow .2s,
              transform .22s cubic-bezier(.4, 0, .2, 1), background .05s !important;
  will-change: transform;
  overflow: visible !important;
}
body:not(.home) .feature-card:hover,
body:not(.home) .feature-card.wp-block-column:hover {
  border-color: rgba(227, 0, 67, .25) !important;
  box-shadow: 0 6px 28px rgba(227, 0, 67, .08),
              0 2px 8px rgba(26, 23, 27, .06) !important;
  transform: translateY(-5px);
}

/* Icon wrapper — carré rouge soft, pulse au hover */
body:not(.home) .feature-card .feature-card__icon {
  width: 40px; height: 40px;
  margin-bottom: var(--space-3, 12px);
  font-size: 1.25rem;
  background: rgba(227, 0, 67, .08);
  border-radius: var(--radius-sm, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background .2s, transform .22s;
}
body:not(.home) .feature-card:hover .feature-card__icon {
  background: rgba(227, 0, 67, .14);
  transform: scale(1.1) rotate(-3deg);
}

/* Titre : Instrument Serif, léger — parité homepage */
body:not(.home) .feature-card .feature-card__title,
body:not(.home) .feature-card .wp-block-heading.feature-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2, 8px);
  line-height: 1.3;
}
body:not(.home) .feature-card .feature-card__desc {
  font-size: .9375rem;
  color: var(--color-neutral-600, #6b7280);
  line-height: 1.6;
  margin: 0;
}
[data-theme="dark"] body:not(.home) .feature-card,
[data-theme="dark"] body:not(.home) .feature-card.wp-block-column {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
}
body:not(.home) .procedure-list li:hover {
  transform: translateX(4px);
  border-color: rgba(227, 0, 67, 0.25);
  box-shadow: 0 8px 24px rgba(26, 23, 27, .08);
}
body:not(.home) .faq-item[open] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(227, 0, 67, 0.4);
}
[data-theme="dark"] body:not(.home) .faq-item[open] { background: rgba(35, 32, 38, 0.85); }

/* ── 7. Grilles responsives ─────────────────────────────────────────── */
/* v6.3.5 : on étend max-width de 1040 → 1280px pour retrouver la pleine largeur
   sous le bloc "Trois temps, une même méthode" (Julien : "on retrouve encore
   les petites largeurs après ce bloc"). Les cards feature se répartissent
   alors proprement sur la full width et conservent leur forme carrée. */
body:not(.home) :is(.section--why, .section--trio) .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3, 24px);
  max-width: 1280px;
  margin: 40px auto 0;
}
body:not(.home) .section--testimonials .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
body:not(.home) .section--admins .admins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
body:not(.home) .section--stats .stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 32px auto 0;
}
body:not(.home) .section--process .procedure-list {
  max-width: 900px;
  margin: 40px auto 0;
}
body:not(.home) .section--faq .faq-wrap {
  max-width: 820px;
  margin: 32px auto 0;
  text-align: left;
}

@media (max-width: 900px) {
  body:not(.home) :is(.section--why, .section--trio) .features-grid,
  body:not(.home) .section--admins .admins-grid,
  body:not(.home) .section--stats .stats-band { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body:not(.home) :is(.section--why, .section--trio) .features-grid,
  body:not(.home) .section--admins .admins-grid,
  body:not(.home) .section--stats .stats-band,
  body:not(.home) .section--testimonials .testimonials-grid { grid-template-columns: 1fr; }
}

/* ── 8. Internals des cards ─────────────────────────────────────────── */
/* v6.3.5 : on conserve display:flex pour la structure interne (icon → titre → desc),
   mais on laisse le padding/border-radius au bloc §6bis "Feature cards style homepage"
   pour ne pas écraser la forme carrée voulue. */
body:not(.home) .feature-card { display: flex; flex-direction: column; gap: 12px; }
body:not(.home) :is(.testimonial, .testimonial-card) { padding: 28px 26px; }
body:not(.home) .testimonial__quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--color-neutral-900);
}
body:not(.home) .testimonial__name { font-weight: 600; color: var(--color-neutral-900); }
body:not(.home) .testimonial__role { font-size: 0.875rem; color: var(--color-neutral-500, #6b7280); }
[data-theme="dark"] body:not(.home) :is(.testimonial__quote, .testimonial__name) { color: #f0eef1; }

body:not(.home) .admin-card { padding: 22px 20px; }
body:not(.home) .admin-card__role {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

body:not(.home) .stats-band .stat-item { padding: 28px 20px; text-align: center; }
body:not(.home) .stats-band__val {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--color-neutral-900);
  margin: 0;
}
body:not(.home) .stats-band__label {
  font-size: 0.875rem;
  color: var(--color-neutral-500, #6b7280);
  margin-top: 8px;
}
[data-theme="dark"] body:not(.home) .stats-band__val { color: #f0eef1; }

/* ── 9. Fade-in Spoke v6.2 — SUPPRIMÉ EN v10.17.7 ──────────────────────
   Le pattern legacy "body:not(.home) [class*='section--'] :is(…) { opacity:0 }
   puis JS pose .is-inview via IO hardcodé" est abandonné. Il forçait
   toutes les sections Spoke à être invisibles par défaut et comptait
   sur un JS avec liste hardcodée de sélecteurs — chaque nouvelle section
   créait un bug silencieux (texte invisible jusqu'à mise à jour du JS).

   À la place, toutes les pages utilisent maintenant le MÊME squelette
   que la home : sections visibles par défaut, rythme zebra auto
   (:nth-of-type), animations d'entrée réservées aux éléments "stars"
   (metric-card staggered, icônes de hub qui pulsent, etc.).

   Plus futureproof, plus cohérent entre home et pages intérieures. */

/* ============================================================
   v10.17.16 — Schéma « Parcours GEIQ » — TIMELINE VERTICALE
   ────────────────────────────────────────────────────────────
   Refonte complète. On abandonne la timeline horizontale
   (problèmes d'alignement résistants à 4 approches CSS différentes)
   pour une timeline verticale Apple/Stripe-style :
   - Une ligne verticale qui descend
   - Pastilles numérotées accrochées à la ligne
   - Contenu à droite de chaque pastille
   - Pastille méta en bout de ligne à droite

   Avantages :
   - Robuste à n'importe quelle longueur de texte (plus de grille
     à 5 colonnes à maintenir alignée).
   - Mobile-ready gratuit (pattern déjà adapté à la largeur).
   - Sens de lecture naturel = sens du temps (parcours).
   - Plus scalable : 5 ou 7 étapes, aucune différence.

   Structure rendue par [geiq56_parcours] :
     <ol class="dispositif-schema">
       <li class="dispositif-schema__step">
         <div class="dispositif-schema__icon"><svg>…</svg></div>
         <span class="dispositif-schema__num">N</span>
         <h3 class="dispositif-schema__title">…</h3>
         <p class="dispositif-schema__desc">…</p>
         <span class="dispositif-schema__meta">…</span>
       </li>
     </ol>

   Animations :
   - Chaque step apparaît en staggered (opacity + slide-in).
   - La ligne entre N et N+1 se trace au scaleY après le step N.
   - La pastille num fait un "pop" avec easing bouncy à l'apparition,
     puis enchaîne sur un ping infini (effet station/sonar).
   - Un gradient vertical anime la ligne en boucle (effet énergie
     qui circule vers l'étape suivante).
   - Hover : lift subtil sur la pastille + pastille meta intensifiée.
   ============================================================ */

body:not(.home) .dispositif-schema {
  list-style: none;
  position: relative;
  max-width: 780px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 24px 0 0;
  counter-reset: geiq-step;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Step : grid 2 cols (pastille | contenu) + une col auto pour la meta
   ────────────────────────────────────────────────────────────────────
   Layout :
     col 1 = pastille num (56×56)
     col 2 = titre, desc
     col 3 = pastille meta (auto, à droite)
   rows :
     row 1 = icône + meta (side-by-side)
     row 2 = titre
     row 3 = description */
body:not(.home) .dispositif-schema__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: clamp(20px, 3vw, 32px);
  row-gap: 6px;
  padding-bottom: 48px;
  /* Animation d'entrée : glisse + fade */
  opacity: 0;
  transform: translateX(-16px);
  animation: timeline-step-in .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
body:not(.home) .dispositif-schema__step:last-child {
  padding-bottom: 0;
}

/* Delays staggered : le parcours se révèle étape par étape. */
body:not(.home) .dispositif-schema__step:nth-child(1) { animation-delay: .05s; }
body:not(.home) .dispositif-schema__step:nth-child(2) { animation-delay: .25s; }
body:not(.home) .dispositif-schema__step:nth-child(3) { animation-delay: .45s; }
body:not(.home) .dispositif-schema__step:nth-child(4) { animation-delay: .65s; }
body:not(.home) .dispositif-schema__step:nth-child(5) { animation-delay: .85s; }

@keyframes timeline-step-in {
  to { opacity: 1; transform: none; }
}

/* ── La ligne verticale entre pastille N et pastille N+1 ──
   Dessinée via ::before positionné absolu, collé au centre de la
   colonne 1 (pastille 56px → centre = 28px → ligne 2px = left 27px).
   Deux animations :
     1. timeline-line-draw : scaleY 0 → 1 (la ligne apparaît)
     2. timeline-line-flow : gradient qui remonte (énergie qui coule) */
body:not(.home) .dispositif-schema__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;                      /* bas pastille (56) + 8px respiration */
  bottom: -8px;                   /* recouvre le gap vers le step suivant */
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    rgba(227, 0, 67, .7) 30%,
    rgba(227, 0, 67, .35) 70%,
    var(--color-primary) 100%
  );
  background-size: 100% 200%;
  background-position: 0 0;
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
  animation:
    timeline-line-draw .8s cubic-bezier(.22, 1, .36, 1) forwards,
    timeline-line-flow 3.2s linear infinite .8s;
  z-index: 0;
}

body:not(.home) .dispositif-schema__step:nth-child(1):not(:last-child)::before { animation-delay: .35s, 1.15s; }
body:not(.home) .dispositif-schema__step:nth-child(2):not(:last-child)::before { animation-delay: .55s, 1.35s; }
body:not(.home) .dispositif-schema__step:nth-child(3):not(:last-child)::before { animation-delay: .75s, 1.55s; }
body:not(.home) .dispositif-schema__step:nth-child(4):not(:last-child)::before { animation-delay: .95s, 1.75s; }

@keyframes timeline-line-draw {
  to { transform: scaleY(1); }
}
@keyframes timeline-line-flow {
  from { background-position: 0 100%; }
  to   { background-position: 0 -100%; }
}

/* ── Pastille numéro (cercle rouge 56×56) ──
   Col 1, stretch sur les 3 rows du step pour rester collée en haut. */
body:not(.home) .dispositif-schema__num {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow:
    0 4px 18px rgba(227, 0, 67, .3),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  /* Scale pop à l'apparition (bouncy), puis ping infini (sonar). */
  transform: scale(0);
  animation:
    timeline-num-pop .75s cubic-bezier(.34, 1.56, .64, 1) forwards,
    timeline-num-ping 2.8s cubic-bezier(.22, 1, .36, 1) .9s infinite;
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .3s ease;
}

@keyframes timeline-num-pop {
  to { transform: scale(1); }
}
@keyframes timeline-num-ping {
  0%   { box-shadow: 0 4px 18px rgba(227,0,67,.3), 0 0 0 0   rgba(227,0,67,.5), inset 0 1px 0 rgba(255,255,255,.28); }
  60%  { box-shadow: 0 4px 18px rgba(227,0,67,.3), 0 0 0 16px rgba(227,0,67,0),  inset 0 1px 0 rgba(255,255,255,.28); }
  100% { box-shadow: 0 4px 18px rgba(227,0,67,.3), 0 0 0 0   rgba(227,0,67,0),   inset 0 1px 0 rgba(255,255,255,.28); }
}

/* Delays staggered : chaque pastille pop juste avant que son step
   n'apparaisse, puis le ping démarre en cascade. */
body:not(.home) .dispositif-schema__step:nth-child(1) .dispositif-schema__num { animation-delay: .05s, .90s; }
body:not(.home) .dispositif-schema__step:nth-child(2) .dispositif-schema__num { animation-delay: .25s, 1.15s; }
body:not(.home) .dispositif-schema__step:nth-child(3) .dispositif-schema__num { animation-delay: .45s, 1.40s; }
body:not(.home) .dispositif-schema__step:nth-child(4) .dispositif-schema__num { animation-delay: .65s, 1.65s; }
body:not(.home) .dispositif-schema__step:nth-child(5) .dispositif-schema__num { animation-delay: .85s, 1.90s; }

/* ── Icône (petite, colorée, inline avec le titre en row 1) ──
   Box fixe pour que le SVG reste centré quelle que soit sa forme. */
body:not(.home) .dispositif-schema__step > .dispositif-schema__icon {
  grid-column: 2;
  grid-row: 1;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 4px 0 0;
  color: var(--color-primary);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
body:not(.home) .dispositif-schema__icon > svg {
  display: block;
  width: 26px;
  height: 26px;
}
body:not(.home) .dispositif-schema__step:hover .dispositif-schema__icon {
  transform: rotate(360deg) scale(1.1);
}

/* ── Titre ── */
body:not(.home) .dispositif-schema__title {
  grid-column: 2;
  grid-row: 2;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* ── Description (s'étend jusqu'au bout à droite, sous la pastille meta) ── */
body:not(.home) .dispositif-schema__desc {
  grid-column: 2 / -1;
  grid-row: 3;
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-neutral-600);
  margin: 2px 0 0;
  max-width: 60ch;
}

/* ── Pastille meta (Semaine 1 / Mois 1 / Sortie…) ──
   Col 3 row 1, tout en haut à droite de la "carte" step.
   Verticalement alignée sur l'icône. */
body:not(.home) .dispositif-schema__step > .dispositif-schema__meta {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
  justify-self: end;
  margin: 10px 0 0;
  padding: 5px 12px;
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(227, 0, 67, .08);
  border: 1px solid rgba(227, 0, 67, .18);
  border-radius: var(--radius-full);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

/* ── Hover interactions — subtiles, pro ── */
body:not(.home) .dispositif-schema__step:hover .dispositif-schema__num {
  transform: scale(1.06);
  box-shadow:
    0 6px 26px rgba(227, 0, 67, .45),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
body:not(.home) .dispositif-schema__step:hover .dispositif-schema__meta {
  background: rgba(227, 0, 67, .14);
  border-color: rgba(227, 0, 67, .32);
  transform: translateY(-1px);
}

/* ── Responsive : mobile ≤ 600px ──
   Pastille 44px, meta passe sous le titre, typo réduite. */
@media (max-width: 600px) {
  body:not(.home) .dispositif-schema {
    max-width: 100%;
    padding: 16px 0 0;
  }
  body:not(.home) .dispositif-schema__step {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
    row-gap: 4px;
    padding-bottom: 36px;
  }
  body:not(.home) .dispositif-schema__num {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  body:not(.home) .dispositif-schema__step:not(:last-child)::before {
    left: 21px;
    top: 52px;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__icon {
    grid-column: 2;
    grid-row: 1;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
  }
  body:not(.home) .dispositif-schema__icon > svg {
    width: 22px;
    height: 22px;
  }
  body:not(.home) .dispositif-schema__title {
    grid-column: 2;
    grid-row: 2;
    font-size: 1.125rem;
  }
  body:not(.home) .dispositif-schema__desc {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.875rem;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__meta {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin: 8px 0 0;
    font-size: .6875rem;
  }
}

/* ── Accessibilité : respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .dispositif-schema__step,
  body:not(.home) .dispositif-schema__step:not(:last-child)::before,
  body:not(.home) .dispositif-schema__num {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body:not(.home) .dispositif-schema__step:hover .dispositif-schema__num,
  body:not(.home) .dispositif-schema__step:hover .dispositif-schema__icon,
  body:not(.home) .dispositif-schema__step:hover .dispositif-schema__meta {
    transform: none;
  }
}

/* ============================================================
   v6.3.3 — Section « Choisissez votre GEIQ » (switcher sur Spoke)
   Réutilise le shortcode [geiq56_switcher] de la homepage dans
   /le-dispositif/. Conteneur minimaliste : la section fournit
   juste le rythme (padding, titres) — le switcher garde ses
   panels/couleurs propres.
   ============================================================ */
body:not(.home) .section--dispositif-switcher {
  /* v6.3.6 : padding top conservé, bottom RÉDUIT pour éviter la bande vide
     avant le footer (Julien : "deux bandes qui séparent les sections"). Le
     footer commence directement après, on garde juste un coussin visuel. */
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 48px) clamp(32px, 4vw, 56px);
  /* v6.3.4 : fond BLANC (et non grey-soft) pour conserver l'alternance
     blanc/gris de la page. Sinon la section fusionne visuellement avec
     la section--alt.section--trio qui la précède → impression de "gros vide". */
  background: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: 0;
}
/* v6.3.6 : sur /le-dispositif/, le switcher est la DERNIÈRE section avant
   le footer. On supprime tout margin/padding parasite qui créerait un gap. */
body:not(.home) .section--dispositif-switcher + * {
  margin-top: 0;
}
body:not(.home) .section--dispositif-switcher:last-of-type {
  margin-bottom: 0;
  padding-bottom: clamp(24px, 3vw, 40px);
}
[data-theme="dark"] body:not(.home) .section--dispositif-switcher {
  background: transparent;
}
body:not(.home) .section--dispositif-switcher::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(227, 0, 67, 0.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(10, 108, 201, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body:not(.home) .section--dispositif-switcher > * { position: relative; z-index: 1; }

/* Le sélecteur et ses panneaux utilisent les styles communs, sans variante
   de largeur ou de surface propre à la page Mission. */
/* v6.3.4 : la règle dark-mode est déjà positionnée juste après le bloc
   .section--dispositif-switcher ci-dessus. */


/* =========================================================================
   v7.1.1 — FINITIONS HOMEPAGE (2026-04-22)
   -------------------------------------------------------------------------
   9 points de polish remontés par Julien après v7.1. Tout est regroupé ici
   pour un rollback rapide. Rien n'est touché hors homepage (sélecteurs
   body.home ou classes exclusives home).

   1. Eyebrow d'une section toujours centré, même sans .section-header
   2. Hero déjà condensé (édité ligne ~480)
   3. Toggle thème sticky → pill glass 2 positions
   4. Stats-band « Notre impact » → glass au lieu de gris plat
   5. Testimonials → cards même hauteur, plus de border hover
   6. Partners « Ils nous font confiance » → titre + eyebrow centrés
   7. CTA « Prêts à vous lancer » → glass plus marqué + gradient
   8. Actus → titre centré + bouton « Voir toutes les actus » visible
   9. Footer → plus de gap + spotlight visible sur colonnes extrêmes
   ========================================================================= */


/* ── 1. Eyebrow + title auto-centrés (filet de sécurité) ─────────────────
   Certaines sections (partners, actus) n'ont pas de .section-header et le
   .section-eyebrow tombe en text-align:left. On force le centrage quand
   l'eyebrow est enfant direct d'un .container. */
.site-main .section > .container > .section-eyebrow,
.site-main .section > .container > .section-title,
.site-main [class*="section--"] > .container > .section-eyebrow,
.site-main [class*="section--"] > .container > .section-title {
  text-align: center !important;
  margin-inline: auto !important;
}
/* Eyebrow = pill inline, donc on wrap avec un block-level center */
.site-main .section > .container > .section-eyebrow,
.site-main [class*="section--"] > .container > .section-eyebrow {
  display: table;            /* collapse à son contenu, mais respecte margin auto */
  margin-inline: auto !important;
  margin-bottom: var(--space-2);
}


/* ── 3. THEME TOGGLE STICKY → pill glass (remplacement) ─────────────────
   Avant : bouton rond noir plein.
   Après : pill glass 2 positions (soleil / lune), style unifié avec le
   persona-switch + geiq-switcher. Le JS header.js continue de toggle
   data-theme sur <html> — on synchronise juste .is-active depuis le CSS. */
.theme-toggle-sticky {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 300;
  /* Reset ancien cercle noir */
  width: auto;
  height: auto;
  background: var(--glass-light-bg);
  color: var(--color-neutral-900);
  border: 1px solid var(--glass-light-border);
  border-radius: var(--radius-full);
  padding: 5px;
  cursor: pointer;
  -webkit-backdrop-filter: var(--glass-light-blur);
  backdrop-filter: var(--glass-light-blur);
  box-shadow: var(--glass-light-shadow);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transition: box-shadow .25s var(--ease-out), transform .2s var(--ease-out);
}
.theme-toggle-sticky:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,23,27,.14), 0 0 0 1px rgba(255,255,255,.6) inset;
  background: var(--glass-light-bg);   /* override ancienne règle rouge */
}
.theme-toggle-sticky:focus-visible {
  outline: 3px solid rgba(227, 0, 67, .32);
  outline-offset: 4px;
}
/* Dans le markup PHP actuel, les SVGs portent DIRECTEMENT les classes
   .icon-sun / .icon-moon (pas de wrapper span). On les transforme en
   "thumbs" via padding + background, en gardant leur viewBox intact. */
.theme-toggle-sticky .icon-sun,
.theme-toggle-sticky .icon-moon {
  width: 18px !important;
  height: 18px !important;
  padding: 8px;
  box-sizing: content-box;
  border-radius: var(--radius-full);
  color: var(--color-neutral-500);
  display: inline-block !important;   /* force override de l'ancien display:none */
  transition: background .22s var(--ease-out), color .22s var(--ease-out);
}
/* Thumb : icône active = fond blanc (contexte clair) */
html:not([data-theme="dark"]) .theme-toggle-sticky .icon-sun {
  background: var(--color-neutral-0);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(26,23,27,.1);
}
[data-theme="dark"] .theme-toggle-sticky {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  backdrop-filter: var(--glass-dark-blur);
  color: #f0eef1;
}
[data-theme="dark"] .theme-toggle-sticky .icon-sun,
[data-theme="dark"] .theme-toggle-sticky .icon-moon {
  color: rgba(255,255,255,.55);
}
[data-theme="dark"] .theme-toggle-sticky .icon-moon {
  background: rgba(255,255,255,.1);
  color: #f0eef1;
}
[data-theme="dark"] .theme-toggle-sticky:hover {
  background: var(--glass-dark-bg);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1) inset;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-sticky { transition: none; }
  .theme-toggle-sticky:hover { transform: none; }
}


/* ── 3b. RETOUR EN HAUT — verre + progression carmin ─────────────────
   Le bouton reste absent de l'ordre de tabulation tant que la page n'a
   pas suffisamment défilé. L'angle du cercle est mis à jour par header.js. */
.site-back-to-top {
  --scroll-progress-angle: 0deg;
  --back-to-top-track: rgba(26, 23, 27, .14);
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: max(clamp(14px, 2vw, 28px), calc(env(safe-area-inset-bottom, 0px) + 10px));
  z-index: 300;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  color: var(--color-neutral-900, #1a171b);
  background: conic-gradient(
    from -90deg,
    var(--color-primary, #e30043) 0deg,
    var(--color-primary, #e30043) var(--scroll-progress-angle),
    var(--back-to-top-track) var(--scroll-progress-angle),
    var(--back-to-top-track) 360deg
  );
  box-shadow: 0 12px 34px rgba(26, 23, 27, .18), 0 2px 8px rgba(26, 23, 27, .1);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(.82);
  transition:
    opacity .28s var(--ease-out),
    transform .42s var(--ease-spring),
    visibility 0s linear .42s,
    box-shadow .25s var(--ease-out);
}
.site-back-to-top::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: inherit;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}
.site-back-to-top::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(26, 23, 27, .08);
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, .9);
  color: var(--color-neutral-900, #1a171b);
  box-shadow: 0 8px 24px rgba(26, 23, 27, .12);
  font: 600 .75rem/1 var(--font-sans, Inter, sans-serif);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(8px, -50%);
  transition: opacity .2s var(--ease-out), transform .28s var(--ease-spring);
}
.site-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.site-back-to-top.is-visible:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 40px rgba(227, 0, 67, .2), 0 3px 10px rgba(26, 23, 27, .12);
}
.site-back-to-top:hover::after,
.site-back-to-top:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
.site-back-to-top:focus-visible {
  outline: 3px solid rgba(227, 0, 67, .32);
  outline-offset: 4px;
}
.site-back-to-top__icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: inherit;
  display: grid;
  place-items: center;
  transition: color .2s var(--ease-out), transform .32s var(--ease-spring);
}
.site-back-to-top__icon svg {
  display: block;
  transition: transform .32s var(--ease-spring);
}
.site-back-to-top.is-visible .site-back-to-top__icon {
  animation: geiq56BackToTopArrival .55s var(--ease-spring) both;
}
.site-back-to-top:hover .site-back-to-top__icon { color: var(--color-primary, #e30043); }
.site-back-to-top:hover .site-back-to-top__icon svg { transform: translateY(-3px); }

@keyframes geiq56BackToTopArrival {
  0% { opacity: 0; transform: translateY(6px); }
  58% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .site-back-to-top {
  --back-to-top-track: rgba(255, 255, 255, .18);
  color: #f0eef1;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .22);
}
[data-theme="dark"] .site-back-to-top::before {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(26, 23, 27, .86);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset;
}
[data-theme="dark"] .site-back-to-top::after {
  border-color: rgba(255, 255, 255, .1);
  background: rgba(26, 23, 27, .92);
  color: #f0eef1;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .34);
}

@media (hover: none) {
  .site-back-to-top::after { display: none; }
}
@media (max-width: 480px) {
  .site-back-to-top { width: 50px; height: 50px; }
  .site-back-to-top__icon { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-back-to-top,
  .site-back-to-top::after,
  .site-back-to-top__icon,
  .site-back-to-top__icon svg {
    animation: none !important;
    transition: none !important;
  }
  .site-back-to-top.is-visible:hover,
  .site-back-to-top:hover .site-back-to-top__icon,
  .site-back-to-top:hover .site-back-to-top__icon svg {
    transform: none;
  }
}


/* ── 4. STATS BAND « Notre impact » → glass ─────────────────────────────
   Avant : fond gris plat (--color-neutral-200) + items blancs plein.
   Après : conteneur verre, items verre plus translucide, bord doux.       */
.site-main .stats-band.wp-block-group {
  background: var(--glass-light-bg) !important;
  border: 1px solid var(--glass-light-border) !important;
  box-shadow: var(--glass-light-shadow) !important;
  -webkit-backdrop-filter: var(--glass-light-blur) !important;
  backdrop-filter: var(--glass-light-blur) !important;
  gap: 0 !important;                         /* on passe à des séparateurs verticaux */
}
.site-main .stats-band__item.wp-block-group {
  background: transparent !important;        /* hérite du verre parent */
  border-right: 1px solid rgba(26,23,27,.08) !important;
  padding: clamp(22px, 3vw, 36px) clamp(18px, 2.5vw, 28px) !important;
}
.site-main .stats-band__item.wp-block-group:last-child { border-right: 0 !important; }
[data-theme="dark"] .site-main .stats-band.wp-block-group {
  background: var(--glass-dark-bg) !important;
  border-color: var(--glass-dark-border) !important;
  box-shadow: var(--glass-dark-shadow) !important;
}
[data-theme="dark"] .site-main .stats-band__item.wp-block-group {
  background: transparent !important;
  border-right-color: rgba(255,255,255,.08) !important;
}
@media (max-width: 767px) {
  .site-main .stats-band__item.wp-block-group {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(26,23,27,.08) !important;
  }
  .site-main .stats-band__item.wp-block-group:nth-last-child(-n+2) { border-bottom: 0 !important; }
}


/* ── 5. TESTIMONIALS → cards uniformes, sans hover border rouge ─────────
   Avant : hover ajoutait un liseré rouge parasite + cards de tailles
   différentes selon le quote.
   Après : grid stretch, min-height, hover shadow uniquement.              */
body.home .testimonials-grid.wp-block-columns,
body.home .testimonials-grid.wp-block-group {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}
body.home .testimonial.wp-block-column,
body.home .testimonial.wp-block-group {
  min-height: 280px;
  height: 100%;
}
body.home .testimonial.wp-block-column:hover,
body.home .testimonial.wp-block-group:hover {
  /* Plus de border color shift rouge : juste une élévation + shadow */
  border-color: var(--color-neutral-200) !important;
  box-shadow: 0 14px 40px rgba(26,23,27,.10) !important;
  transform: translateY(-3px);
}
[data-theme="dark"] body.home .testimonial.wp-block-column:hover,
[data-theme="dark"] body.home .testimonial.wp-block-group:hover {
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.4) !important;
}


/* ── 7. CTA FINAL « Prêts à vous lancer » → glass + gradient ───────────
   Avant : carte centrale gris clair transparente.
   Après : verre renforcé + halo radial + micro-grain via border interne. */
body.home .cta-dark,
body.home .cta-dark.wp-block-group {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(227,0,67,.09), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(10,108,201,.06), transparent 60%),
    var(--glass-light-bg) !important;
  border: 1px solid var(--glass-light-border) !important;
  box-shadow: var(--glass-light-shadow), 0 24px 60px -20px rgba(227,0,67,.12) !important;
  -webkit-backdrop-filter: var(--glass-light-blur) !important;
  backdrop-filter: var(--glass-light-blur) !important;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px) !important;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
body.home .cta-dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-light-shadow), 0 32px 72px -18px rgba(227,0,67,.18) !important;
}
[data-theme="dark"] body.home .cta-dark,
[data-theme="dark"] body.home .cta-dark.wp-block-group {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(227,0,67,.18), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(10,108,201,.12), transparent 60%),
    var(--glass-dark-bg) !important;
  border-color: var(--glass-dark-border) !important;
  box-shadow: var(--glass-dark-shadow), 0 24px 60px -20px rgba(0,0,0,.4) !important;
}


/* ── 8. ACTUS HOMEPAGE → titre centré + bouton visible ─────────────────
   Point 8a : .section-head n'est pas un .section-header, le texte reste à
   gauche. On centre tout le groupe.
   Point 8b : le lien « Voir toutes les actus » tombait en lien blanc sur
   blanc. On le stylise en bouton outline rouge.                           */
body.home .section--actus .section-head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(28px, 3vw, 48px);
}
body.home .section--actus .section-eyebrow {
  display: inline-flex !important;
  margin-inline: auto !important;
  margin-bottom: var(--space-2) !important;
}
body.home .section--actus .section-title {
  text-align: center;
  margin-inline: auto;
}
/* Bouton « Voir toutes les actualités » — le markup WP est .section-foot
   (wp-block-buttons) > .wp-block-button.is-style-outline > a.wp-block-button__link.
   On vient écraser le style outline par défaut pour qu'il soit bien visible. */
body.home .section--actus .section-foot.wp-block-buttons {
  justify-content: center !important;
  margin-top: clamp(28px, 3vw, 44px) !important;
}
body.home .section--actus .section-foot .wp-block-button__link,
body.home .section--actus .section-foot.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .2s var(--ease-out), color .2s var(--ease-out),
              transform .2s var(--ease-out), box-shadow .2s var(--ease-out) !important;
}
body.home .section--actus .section-foot .wp-block-button__link:hover,
body.home .section--actus .section-foot.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(227,0,67,.2) !important;
}
[data-theme="dark"] body.home .section--actus .section-foot .wp-block-button__link {
  color: #ff6b8a !important;
  border-color: #ff6b8a !important;
}
[data-theme="dark"] body.home .section--actus .section-foot .wp-block-button__link:hover {
  background: #ff6b8a !important;
  color: #111018 !important;
}


/* ── 9. FOOTER → spotlight visible sur les 4 colonnes ──────────────────
   Avant : padding-inline 32 + wide-width 1200 → colonnes extrêmes au bord,
   le spotlight canvas est tronqué et on ne sent plus le hover.
   Après : on ramène le grid à l'intérieur avec un gutter plus large, et
   on s'assure qu'aucun enfant ne déborde côté hover.                      */
.site-footer .footer__grid {
  padding-inline: clamp(24px, 5vw, 64px);
  gap: clamp(24px, 4vw, 56px);
  max-width: min(1240px, 96vw);
}
.site-footer .footer__bottom {
  padding-inline: clamp(24px, 5vw, 64px);
  max-width: min(1240px, 96vw);
}
/* Le spotlight canvas dans le footer hérite de .glow-canvas (inset 0).
   On garantit qu'il ne soit pas coupé côté extrêmes : overflow clip
   horizontal mais layer plus large que le grid. */
.site-footer { overflow: clip; }
.site-footer .glow-canvas {
  inset: -40px -60px !important;      /* déborde volontairement hors viewport */
  width: calc(100% + 120px) !important;
  height: calc(100% + 80px) !important;
}
@media (max-width: 1023px) {
  .site-footer .footer__grid { gap: var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════════
   v7.2.1 — Polish homepage (5 points)
   ═══════════════════════════════════════════════════════════════════ */

/* ─ (1) Toggle persona passait sous le menu sticky ─
   Le header sticky fait ~72 px. On garantit un dégagement franc. */
body.home .hero { padding-top: clamp(108px, 11vw, 148px); }
.persona-switch { margin-top: 4px; }
@media (max-width: 860px) {
  body.home .hero { padding-top: clamp(96px, 16vw, 128px); }
}

/* ─ (2) Cards features même hauteur ─
   Les 3 colonnes features sont des .wp-block-column : on force le même
   rythme vertical, sinon la carte "Recrutement externalisé" écrase les voisines. */
.features-grid.wp-block-columns {
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}
.features-grid.wp-block-columns > .feature-card.wp-block-column {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* le CTA "Candidats / Entreprises" du bas reste collé au bas */
.feature-card.wp-block-column .feature-card__cta,
.feature-card.wp-block-column > :last-child { margin-top: auto !important; }

/* ─ (3a) Logo dans le switcher ─
   Utilise l'image custom-logo WP si présente, sinon fallback texte. */
.geiq-switcher__logo-img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  transition: filter .2s ease, opacity .2s ease;
  opacity: .78;
}
.geiq-switcher__btn--center[aria-selected="true"] .geiq-switcher__logo-img {
  opacity: 1;
}
@media (max-width: 480px) {
  .geiq-switcher__logo-img { height: 18px; max-width: 80px; }
}

/* ─ (3b) Thumb (pastille mobile du switcher) ─
   Quand Multi est actif, on veut plus de contraste / un brin brandé.
   On garde le thumb blanc par défaut ; on adoucit juste le shadow et
   on pousse un liseré bas-droite pour qu'il soit visible sur fond gris. */
.geiq-switcher__thumb {
  box-shadow:
    0 1px 2px rgba(26,23,27,.08),
    0 4px 14px rgba(26,23,27,.10),
    0 0 0 1px rgba(26,23,27,.04) !important;
}
/* Active Multi = liseré primary léger pour "localiser" la sélection */
.geiq-switcher[data-active="multi"] .geiq-switcher__thumb,
.geiq-switcher[data-active="btp"]   .geiq-switcher__thumb {
  box-shadow:
    0 1px 2px rgba(26,23,27,.10),
    0 6px 18px rgba(227,0,67,.12),
    0 0 0 1px rgba(227,0,67,.10) !important;
}

/* ─ (4) Spotlight sur sections blanches homepage ─
   Le DOM homepage pose `.section` / `.section--alt` / `.section--actus`,
   pas les anciennes classes sémantiques (.switcher-section, etc.).
   On permet au JS `page-glow.js` d'attraper ces sections via une
   classe helper `.has-spotlight` posée côté JS. Ici on assure juste
   que .section a un stacking context compatible avec le canvas z-index:-1. */
body.home .section.has-spotlight,
body.home .section--actus.has-spotlight {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* ─ (5) Typo titres cartes Actus ─
   17px → 15.5px pour alléger et éviter la sensation d'écrasement
   (le line-clamp à 3 lignes laisse de la respiration). */
.actu-card__title {
  font-size: 15.5px;
  line-height: 1.38;
}
@media (max-width: 640px) {
  .actu-card__title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v7.2.3 — KILL TOTAL du block-gap Gutenberg (32px)
   ───────────────────────────────────────────────────────────────────
   v7.2.2 neutralisait en douceur. Insuffisant.
   Ici on assassine la variable CSS `--wp--style--block-gap` et on force
   `margin-block-start: 0 !important` sur TOUT `is-layout-flow` dans le
   <main>. Seul notre CSS explicite dicte le rythme vertical ensuite.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Assassinat de la variable block-gap partout dans le main */
.site-main .is-layout-flow,
.site-main .wp-block-group-is-layout-flow,
.site-main .wp-block-group.is-layout-flow,
.site-main [class*="section--"],
.site-main .wp-block-group.section,
.site-main .wp-block-group.container,
.site-main .wp-block-group.hero {
  --wp--style--block-gap: 0 !important;
}

/* 2) Kill absolu des margins injectés par Gutenberg entre siblings */
.site-main .is-layout-flow > * + *,
.site-main .wp-block-group-is-layout-flow > * + *,
.site-main .wp-block-group.is-layout-flow > * + *,
.site-main .wp-block-group.is-layout-flow > *,
.site-main [class*="section--"] > *,
.site-main .wp-block-group.section > *,
.site-main .wp-block-group.container > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* 3) Rythme vertical REPRIS sous notre contrôle, uniquement là où c'est
      nécessaire pour la lisibilité. Valeurs sobres, pas de gros vides. */

/* a. Entre le head d'une section (eyebrow+title) et le contenu principal */
.site-main .section .container > .section-header,
.site-main .section .container > .section-head,
.site-main .section .container > .jobs-section-header,
.site-main .section .container > .partners-section-header,
.site-main .section .container > .features-section-header,
.site-main .section .container > .testimonials-section-header,
.site-main .section .container > .actus-section-header,
.site-main .section .container > [class$="-section-header"],
.site-main [class*="section--"] .container > .section-header,
.site-main [class*="section--"] .container > .section-head,
.site-main [class*="section--"] .container > [class$="-section-header"] {
  margin-bottom: clamp(20px, 2.4vw, 36px) !important;
}

/* b. Avant un CTA de fin de section */
.site-main .section .container > .wp-block-buttons,
.site-main .section .container > [class$="section-foot"],
.site-main .section .container > [class*="section-foot"],
.site-main [class*="section--"] .container > .wp-block-buttons,
.site-main [class*="section--"] .container > [class*="section-foot"] {
  margin-top: clamp(20px, 2.5vw, 36px) !important;
}

/* c. À l'intérieur du head (eyebrow → title) : petit filet pour que
      le titre ne colle pas à l'eyebrow (h2 a des margins navigateur qu'on
      vient d'écraser à 0). */
.site-main .jobs-section-header > .section-title,
.site-main .partners-section-header > .section-title,
.site-main .features-section-header > .section-title,
.site-main .testimonials-section-header > .section-title,
.site-main .actus-section-header > .section-title,
.site-main [class*="-section-header"] > .section-title,
.site-main .section-header > .section-title,
.site-main .section-head > .section-title {
  margin-top: clamp(6px, 0.8vw, 12px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v7.2.4 — Footer fix propre
   ───────────────────────────────────────────────────────────────────
   Problèmes réglés d'un coup :
   1. Double <footer> imbriqué (wrapper template-part + notre footer)
   2. has-global-padding qui double le padding-inline
   3. Logo trop petit (60px → 120px)
   4. Margins Gutenberg par défaut partout (wp-block-site-logo,
      wp-block-social-links, wp-block-list, wp-block-heading)
   5. Les colonnes en flex-vertical reçoivent un gap parasite
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Le wrapper extérieur <footer class="wp-block-template-part"> est
      injecté par WordPress automatiquement. On le rend transparent côté
      layout pour éviter la double imbrication et tout espace parasite. */
footer.wp-block-template-part {
  display: contents !important;
}

/* 2) Root footer : on reprend le contrôle du padding et on neutralise
      has-global-padding qui s'ajoute sur l'élément. */
.site-footer {
  padding: clamp(48px, 5vw, 72px) 0 var(--space-4) !important;
  margin: 0 !important;
}
.site-footer.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer .footer__grid.has-global-padding {
  padding-left: clamp(24px, 5vw, 64px) !important;
  padding-right: clamp(24px, 5vw, 64px) !important;
}

/* 3) Kill total des margins injectés dans le footer (variable block-gap + *)*/
.site-footer,
.site-footer .wp-block-group,
.site-footer .is-layout-flow,
.site-footer .is-layout-flex,
.site-footer .is-layout-constrained {
  --wp--style--block-gap: 0 !important;
}
.site-footer .wp-block-group > * + *,
.site-footer .wp-block-group > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* 4) Logo footer — 120 px, pas 60 */
.site-footer .footer__logo.wp-block-site-logo {
  margin: 0 0 14px !important;
  width: auto !important;
  max-width: 120px !important;
}
.site-footer .footer__logo img,
.site-footer .footer__logo a,
.site-footer .footer__logo a img {
  width: 120px !important;
  height: auto !important;
  max-width: 120px !important;
  display: block;
}

/* 5) Tagline — espacement contrôlé avant socials */
.site-footer .footer__tagline {
  margin: 0 0 16px !important;
  color: var(--color-neutral-600);
  line-height: 1.55;
  max-width: 320px;
}

/* 6) Colonnes (4 colonnes du grid) : flex vertical bien ordonné,
      sans gap parasite — on contrôle les margins à l'enfant. */
.site-footer .footer__grid > .wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* 7) Titres de colonne → liens */
.site-footer .footer__col-title {
  margin: 0 0 14px !important;
  font-size: .78rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-900);
}
.site-footer .footer__links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer .footer__links li {
  margin: 0 !important;
  padding: 0 !important;
}
.site-footer .footer__links a {
  color: var(--color-neutral-600);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s;
}
.site-footer .footer__links a:hover { color: var(--color-primary); }

/* 8) Social links — icônes propres, carrées, hover primary
      v7.2.5 : fond semi-transparent pour laisser passer le spotlight */
.site-footer .footer__socials {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center;
}
.site-footer .footer__socials .wp-social-link {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(26, 23, 27, 0.08) !important;
  border-radius: var(--radius-md, 8px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, transform .15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-footer .footer__socials .wp-social-link:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
}
.site-footer .footer__socials .wp-social-link a,
.site-footer .footer__socials .wp-block-social-link-anchor {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-footer .footer__socials .wp-social-link svg {
  width: 16px;
  height: 16px;
  fill: var(--color-neutral-600) !important;
  transition: fill .15s;
}
.site-footer .footer__socials .wp-social-link:hover svg {
  fill: #fff !important;
}

/* 9) Barre du bas : padding-top pour le border, et paragraphes propres */
.site-footer .footer__bottom {
  margin-top: clamp(32px, 4vw, 48px) !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(227, 0, 67, .08);
}
.site-footer .footer__bottom p {
  margin: 0 !important;
}

/* 10) Responsive — mobile propre */
@media (max-width: 860px) {
  .site-footer .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(24px, 4vw, 40px) !important;
  }
}
@media (max-width: 560px) {
  .site-footer .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .site-footer .footer__bottom {
    flex-direction: column !important;
    text-align: center;
    align-items: center !important;
    gap: 8px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v7.2.8 — Spotlight footer OFF par défaut
   ───────────────────────────────────────────────────────────────────
   Décision : le footer actuel a un fond gris, donc le spotlight rouge
   n'a pas sa place ici (il est réservé aux fonds blancs pour garder
   la charte cohérente). Tout le dispositif radial-gradient reste
   codé et opérationnel — il se réactive en ajoutant la classe
   `.glow-enabled` sur `.site-footer` (HTML ou JS). Le JS ne poussera
   les variables `--glow-mx/my/a` que dans ce cas.

   Quand le footer repassera en blanc : ajouter `glow-enabled` sur
   le <footer> dans parts/footer.html et ce bloc fera le reste.
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  /* Kill de tout résidu spotlight */
  background: rgba(249, 250, 251, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .site-footer {
  background: rgba(26, 23, 27, 0.96) !important;
}
/* Canvas éventuellement injecté par l'ancienne version : on le masque */
.site-footer > .glow-canvas { display: none !important; }

/* v7.2.7 bloc doublon retiré en v10.15.16 — le spotlight du footer
   est géré par le bloc v10.15.14 en fin de fichier (source de vérité
   unique, avec le multiplicateur --footer-glow-a). */


/* ═══════════════════════════════════════════════════════════════════
   v7.2.9 — POLISH HOMEPAGE
   ───────────────────────────────────────────────────────────────────
   1. Toggle switcher : quand "Multi" est actif, le pouce bascule
      sur la droite en dark gris. Le texte "Multi" était rendu en
      gris foncé sur fond dark → illisible. On force le blanc.
      Note : le JS (header.js) pose la classe .is-active, pas
      [aria-selected] → l'ancienne règle ligne 2568 ne matchait pas.
   2. Carrousel partenaires : logos agrandis (28 → 36 px) pour plus
      de lisibilité + écartement avec le titre de la section.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Toggle Multi : texte blanc quand actif ── */
.geiq-switcher__btn[data-val="multi"].is-active,
.geiq-switcher__btn[data-val="multi"].is-active span,
.geiq-switcher__btn[data-val="multi"][aria-selected="true"] {
  color: #fff !important;
}
/* Cohérence : "BTP" actif déjà en rouge (ligne 1741), on laisse */

/* ── 2. Partenaires : logos plus grands + espace avant carrousel ── */
.partner-logo__icon {
  width: 36px !important;
  height: 36px !important;
}
.partner-logo__name {
  font-size: 0.95rem !important;
  letter-spacing: .005em;
}
/* Espace respirable entre "X entreprises adhérentes" et le marquee */
.partners-section .marquee-wrap,
.partners-section__marquee,
.section--partners .marquee-wrap {
  margin-top: clamp(32px, 4vw, 56px) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.3.0 — APERÇU BLOCS GEIQ56 DANS L'ÉDITEUR GUTENBERG
   ───────────────────────────────────────────────────────────────────
   Wrapper rendu par ServerSideRender dans l'éditeur. Donne un léger
   cadre + fond pour que le client comprenne qu'il s'agit d'un bloc
   dynamique (contenu généré par WordPress, non éditable texte à
   texte dans ce cadre-là — il faut passer par les menus dédiés).
   ═══════════════════════════════════════════════════════════════════ */
.geiq56-block-preview {
  position: relative;
  border: 1px dashed #dadde2;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fafbfc;
}
.geiq56-block-preview::before {
  content: "Aperçu — contenu dynamique GEIQ56";
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6c727a;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.3.2 — Polish homepage (6 points)
   ═══════════════════════════════════════════════════════════════════ */

/* ── (1) Hero : espace CTA ↔ cartes métriques — v10.15.2
   Ce bloc imposait avant un rotate d'origine. v10.15+ : plus de rotate,
   cartes droites. On garde juste la margin-top de sécurité.            */
/* [géré par le bloc v10.15.2 en fin de fichier, plus de règle ici] */


/* ── (2) Stats-band : recentrage vertical des chiffres
   Le pattern déclare layout:flex + verticalAlignment:center, mais WP
   ne génère pas toujours le justify-content adapté. On force le flex
   column + centrage sur l'axe principal pour équilibrer haut/bas.    */
.stats-band__item,
.stats-band__item.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: var(--space-4) var(--space-3) !important;
  min-height: 128px;
}
.stats-band__item .stats-band__val {
  margin-bottom: 4px !important;
}


/* ── (3) Eyebrow : espaces entre mots + point rouge lisible
   letter-spacing 0.12em + uppercase écrasaient l'espace naturel entre
   les mots → "ILSNOUSFONTCONFIANCE". On ajoute un word-spacing, on
   élargit le gap avec le point rouge, et on grossit un peu le point. */
.section-eyebrow,
.eyebrow {
  gap: 10px !important;
  word-spacing: 0.18em !important;
  padding: 6px 18px !important;
}
.section-eyebrow::before,
.eyebrow::before {
  width: 7px !important;
  height: 7px !important;
  flex-shrink: 0;
}


/* ── (5a) Header : glass plus transparent
   Avant : .78 → trop opaque, on ne voyait plus la parallaxe de la home.
   Après : .55 au repos, .62 au scroll (lisibilité sur les sections blanches). */
.site-header__inner.wp-block-group {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  box-shadow:
    0 2px 18px rgba(26,23,27,.06),
    0 0 0 1px rgba(255,255,255,.45),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.site-header.is-scrolled .site-header__inner.wp-block-group {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(26px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.8) !important;
}


/* ── (5b) Header : "Voir les offres" = vrai bouton pill rouge
   [geiq56_header_cta] rend <a class="nav-cta">. Les styles existants
   ciblaient .wp-block-navigation-item.nav-cta (jamais matché). On crée
   un vrai bouton pill comme dans la maquette.                         */
.site-header__inner a.nav-cta,
.header-cta-wrap a.nav-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-body-sm-size) !important;
  font-weight: var(--fw-semibold) !important;
  text-decoration: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 2px 10px rgba(227,0,67,.22), 0 0 0 1px rgba(227,0,67,.12) !important;
  transition: background .18s, box-shadow .18s, transform .18s !important;
  white-space: nowrap !important;
}
.site-header__inner a.nav-cta:hover,
.header-cta-wrap a.nav-cta:hover {
  background: var(--color-primary-dark, #b8003a) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(227,0,67,.28), 0 0 0 1px rgba(227,0,67,.18) !important;
}
.site-header__inner a.nav-cta span[aria-hidden] {
  font-size: 1em;
  line-height: 1;
  transition: transform .18s;
}
.site-header__inner a.nav-cta:hover span[aria-hidden] {
  transform: translateX(2px);
}


/* ── (5c) Header : social icons simples + rouge au survol
   Avant : fond coloré (brand) rempli au hover (LinkedIn bleu, FB bleu…).
   Après : icône seule en neutre → rouge GEIQ56 au survol, cohérent
   avec la ligne graphique du site (et avec le footer).                */
.site-header__inner .social-links__item {
  border: none !important;
  background: transparent !important;
  color: var(--color-neutral-600) !important;
}
.site-header__inner .social-links__item::before {
  display: none !important;   /* on retire le remplissage coloré brand */
}
.site-header__inner .social-links__item::after {
  display: none !important;   /* on retire l'anneau autour */
}
.site-header__inner .social-links__item:hover {
  color: var(--color-primary) !important;
  background: transparent !important;
  transform: translateY(-1px);
}
.site-header__inner .social-links__item:hover svg {
  transform: scale(1.1);
}
[data-theme="dark"] .site-header__inner .social-links__item {
  color: rgba(255,255,255,.75) !important;
}
[data-theme="dark"] .site-header__inner .social-links__item:hover {
  color: #ff6b8a !important;
}


/* ── (6) Newsletter : bloc dédié, look glass + primary
   Rendu par le shortcode [geiq56_newsletter]. Section pleine largeur
   avec carte centrée (max-width 760px), fond primary dégradé, input
   + bouton inline sur desktop, stacked sur mobile.                     */
.section--newsletter {
  padding-block: clamp(48px, 6vw, 88px);
}
.newsletter-card {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at top left, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #e30043 0%, #c20038 100%);
  color: #fff;
  box-shadow: 0 12px 36px rgba(227,0,67,.22), inset 0 1px 0 rgba(255,255,255,.18);
  overflow: hidden;
}
.newsletter-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.newsletter-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-full);
  word-spacing: .15em;
}
.newsletter-card__eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.6);
}
.newsletter-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.1;
  font-weight: 400;
  margin: 0 0 .5em;
  color: #fff;
}
.newsletter-card__sub {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  max-width: 56ch;
}
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}
.newsletter-form__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-neutral-900);
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .2s, border-color .2s;
}
.newsletter-form__input::placeholder {
  color: var(--color-neutral-400);
}
.newsletter-form__input:focus {
  outline: none;
  border-color: #ffd2df;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.08);
}
.newsletter-form__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .18s, box-shadow .18s, background .18s, color .18s;
}
.newsletter-form__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  background: var(--color-neutral-900);
  color: #fff;
}
.newsletter-form__btn:active { transform: translateY(0); }
.newsletter-form__btn span { transition: transform .18s; }
.newsletter-form__btn:hover span { transform: translateX(2px); }
.newsletter-card__legal {
  margin: 14px 0 0;
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
  line-height: 1.4;
}
.newsletter-card__legal a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-card__feedback {
  margin: 14px 0 0;
  padding: 10px 14px;
  font-size: .9375rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-md);
  color: #fff;
}
.newsletter-card__feedback--error {
  background: rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.35);
}
@media (max-width: 560px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form__btn { justify-content: center; }
}
[data-theme="dark"] .newsletter-card {
  box-shadow: 0 12px 36px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}


/* ═══════════════════════════════════════════════════════════════════
   v7.3.3 — Polish homepage (round 2, retours Julien)
   ───────────────────────────────────────────────────────────────────
   (a) Cartes hero : encore +10px pour ne plus jamais toucher les CTA
   (b) Header "Voir les offres" rétrécit au scroll (ne déborde plus)
   (c) Header glass ENCORE plus transparent (.55 → .32 au repos)
   (d) Section-eyebrows = copie EXACTE du hero eyebrow (dot rouge
       lumineux + animation blink). Règle unifiée.
   (e) Newsletter card → look GLASSY LIGHT (verre, pas rose)
   (f) Section--newsletter = fond gris (reprend l'alternance)
   (g) Footer repasse en blanc + spotlight souris RÉACTIVÉ
       (la classe glow-enabled est ajoutée dans parts/footer.html)
   ═══════════════════════════════════════════════════════════════════ */

/* ── (a) Hero metrics — règle déplacée en v10.15.2 (bloc unique en fin
   de fichier pour éviter les cascades contradictoires). */


/* ── (b) Header CTA : rétrécit quand le header scroll-shrink */
.site-header.is-scrolled .site-header__inner a.nav-cta,
.site-header.is-scrolled .header-cta-wrap a.nav-cta {
  padding: 6px 14px !important;
  font-size: .8125rem !important;
  gap: 4px !important;
}
/* Sécurité viewport étroit : jamais de débordement */
@media (max-width: 1100px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 7px 14px !important;
    font-size: .8125rem !important;
  }
}
@media (max-width: 860px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 6px 12px !important;
    font-size: .78rem !important;
  }
  .site-header__inner a.nav-cta span[aria-hidden] { display: none !important; }
}


/* ── (c) Header glass : passe encore plus discret */
.site-header__inner.wp-block-group {
  background: rgba(255,255,255,.32) !important;
  backdrop-filter: blur(24px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.7) !important;
  box-shadow:
    0 2px 14px rgba(26,23,27,.05),
    0 0 0 1px rgba(255,255,255,.35),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.site-header.is-scrolled .site-header__inner.wp-block-group {
  background: rgba(255,255,255,.48) !important;
  backdrop-filter: blur(28px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.9) !important;
}


/* ── (d) Section eyebrow = jumeau du hero eyebrow
   Rappel : hero__eyebrow a un dot rouge brillant + animation blink.
   Les section-eyebrows n'avaient qu'un petit point terne à opacity .7
   sans halo. On aligne intégralement la déco pour que TOUS les
   titres de section aient exactement le même rendu. */
.section-eyebrow,
.eyebrow {
  gap: 10px !important;
  word-spacing: .18em !important;
  padding: 6px 18px !important;
}
.section-eyebrow::before,
.eyebrow::before {
  width: 6px !important;
  height: 6px !important;
  /* v7.4.1 — opacity retirée : `opacity: 1 !important` battait la
     keyframe `blink` (cascade CSS : !important prime sur animation).
     Résultat : dot figé au lieu de respirer. */
  background: var(--color-primary) !important;
  box-shadow: 0 0 8px rgba(227,0,67,.7) !important;
  animation: blink 2.5s ease-in-out infinite !important;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .section-eyebrow::before,
  .eyebrow::before { animation: none !important; }
}


/* ── (e) Newsletter card : look glassy light (verre transparent)
   On jette le dégradé rouge plein et on passe à un verre crème/rosé
   très subtil, posé sur le fond gris de la section. Typo et CTA
   restent dans la gamme rouge pour garder l'ancrage brand.          */
.newsletter-card {
  /* Reset du gradient rouge : on part d'un vrai verre */
  background:
    radial-gradient(ellipse at top left,
      rgba(255,255,255,.55) 0%, transparent 55%),
    linear-gradient(135deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,229,236,.78) 100%) !important;
  color: var(--color-neutral-900) !important;
  border: 1px solid rgba(227,0,67,.12) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow:
    0 18px 48px rgba(26,23,27,.08),
    0 0 0 1px rgba(255,255,255,.65),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.newsletter-card::before {
  background: radial-gradient(circle,
    rgba(227,0,67,.08) 0%, transparent 60%) !important;
}
.newsletter-card__eyebrow {
  color: var(--color-primary) !important;
  background: rgba(227,0,67,.08) !important;
  border-color: rgba(227,0,67,.22) !important;
}
.newsletter-card__eyebrow::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 8px rgba(227,0,67,.7) !important;
}
.newsletter-card__title {
  color: var(--color-neutral-900) !important;
}
.newsletter-card__title em,
.newsletter-card__title strong {
  color: var(--color-primary) !important;
}
.newsletter-card__sub {
  color: var(--color-neutral-600) !important;
}
.newsletter-form__input {
  background: #fff !important;
  border: 1.5px solid rgba(227,0,67,.18) !important;
  color: var(--color-neutral-900) !important;
}
.newsletter-form__input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(227,0,67,.15), 0 2px 8px rgba(0,0,0,.06) !important;
}
.newsletter-form__btn {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(227,0,67,.25) !important;
}
.newsletter-form__btn:hover {
  background: var(--color-neutral-900) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(26,23,27,.25) !important;
}
.newsletter-card__legal {
  color: var(--color-neutral-500) !important;
}
.newsletter-card__legal a {
  color: var(--color-primary) !important;
}
.newsletter-card__feedback {
  background: rgba(255,255,255,.7) !important;
  border: 1px solid rgba(227,0,67,.2) !important;
  color: var(--color-neutral-900) !important;
}
.newsletter-card__feedback--error {
  background: rgba(255,229,236,.9) !important;
  border-color: rgba(227,0,67,.35) !important;
  color: #8b0024 !important;
}


/* ── (f) Section newsletter = fond gris (comme les autres sections alternées) */
.section--newsletter,
.wp-block-group.section--newsletter {
  background: var(--color-neutral-50) !important;
}
[data-theme="dark"] .section--newsletter,
[data-theme="dark"] .wp-block-group.section--newsletter {
  background: rgba(26,23,27,.6) !important;
}


/* ── (g) Footer : retour en blanc pur + spotlight souris ON
   On override la règle v7.2.8 qui forçait le gris. La classe
   glow-enabled (ajoutée dans parts/footer.html) active le dégradé
   radial qui suit --glow-mx/my/a poussées par page-glow.js. */
/* v10.15.14 — Footer bg + glow refactorés pour utiliser --footer-bg
   et --footer-glow-a (au lieu de couleurs hardcodées). Permet au
   bloc :has() v10.15.13 de piloter à la fois :
     · le fond (blanc ou gris)
     · l'intensité du spotlight (1 ou 0)
   en une seule source de vérité, via des variables CSS. */
.site-footer,
.site-footer.glow-enabled {
  background: var(--footer-bg) !important;
}
.site-footer.glow-enabled {
  /* v10.18.20 — stops resserrés pour matcher l'intensité du canvas hero
     (R_FACTOR 0.22, A_FACTOR 0.40). Avant : 0/18/42/68% (large diffus).
     Après : 0/8/18/30% → halo plus net et localisé, identique au hero. */
  background:
    radial-gradient(
      circle at var(--glow-mx, 50%) var(--glow-my, 50%),
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.32)) 0%,
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.16)) 8%,
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.04)) 18%,
      rgba(227, 0, 67, 0) 30%
    ),
    var(--footer-bg) !important;
  transition: background .15s ease-out;
}
[data-theme="dark"] .site-footer.glow-enabled {
  background:
    radial-gradient(
      circle at var(--glow-mx, 50%) var(--glow-my, 50%),
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.40)) 0%,
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.18)) 9%,
      rgba(227, 0, 67, calc(var(--glow-a, 0) * var(--footer-glow-a, 1) * 0.04)) 20%,
      rgba(227, 0, 67, 0) 32%
    ),
    var(--footer-bg) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.3.4 — HOTFIX retours Ju : trois vraies causes identifiées
   ───────────────────────────────────────────────────────────────────
   (1) Cartes hero qui touchent les CTA = règles d'origine 1480-1483
       qui posent translateY(-6px) sur la carte 2 EN PERMANENCE, pas
       seulement au hover. On neutralise le translateY d'origine.
   (2) Eyebrow "Nos partenaires" collé au dot = WordPress applique
       display:block au <p class="has-text-align-center">, ce qui tue
       le flex gap. Fix : display:inline-flex !important + larger dot.
   (3) Newsletter "rubis transparent" = on garde le ROUGE mais en
       mode gemme translucide (rgba + blur + reflets), pas dégradé.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v10.15.3 — CARTES HERO : bloc de vérité unique
   ───────────────────────────────────────────────────────────────────
   Objectifs :
     · AUCUN rotate/tilt (décision client : effet "clown" jugé non
       conforme à un site clean).
     · Animation d'entrée staggered (fade + monte) classe, unique,
       qui ne vient pas polluer la position au repos.
     · Les 4 cartes ont TOUTES la même largeur (peu importe la taille
       du chiffre). En flex : width fixe + flex-grow:0 + flex-shrink:0.
     · Desktop : 4 cartes en ligne, même largeur.
     · ≤ 767 px : 1 COLONNE (pas 2x2 — décision client).
     · Vraie respiration CTA ↔ cartes : margin-block-start redondant
       sur .hero__metrics-wrap ET .hero__metrics (au cas où le
       post_content est recomposé sans le wrap).
   Règles d'or :
     · Ne jamais remettre `transform: rotate(...)` ailleurs.
     · Ne jamais déclarer un autre margin-top sur .hero__metrics.
     · Voir docs/GUIDE-CARTES-HERO.md avant toute modif.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Espace vertical CTA ↔ cartes (source de vérité unique) ──
   IMPORTANT : on utilise padding-block-start (PAS margin-top), parce
   que :
     1) le post_content live contient l'ancien HTML du pattern, donc
        le <div class="hero__metrics-wrap"> n'existe pas dans le DOM ;
     2) le parent `.hero` est `is-layout-flex`, et WordPress injecte
        automatiquement un reset `.is-layout-flex > * { margin-block-
        start: 0 }` qui tuerait un margin-top. Le padding, lui, n'est
        JAMAIS affecté par ces resets block-supports. Il fonctionne
        quel que soit le mode d'affichage du parent. */
.hero__metrics,
.hero__metrics.wp-block-group,
.hero .hero__metrics,
.hero .hero__metrics.wp-block-group {
  padding-block-start: clamp(72px, 10vw, 140px) !important;
  margin-block-start: 0 !important;
}
/* Si on remet un jour le .hero__metrics-wrap dans le rendu (pattern
   + shortcode régénérés dans le post_content), on porte le padding
   sur le wrap et on neutralise celui des enfants → zéro double. */
.hero__metrics-wrap,
.hero .hero__metrics-wrap {
  padding-block-start: clamp(72px, 10vw, 140px) !important;
  margin-block-start: 0 !important;
}
.hero__metrics-wrap .hero__metrics,
.hero__metrics-wrap .hero__metrics.wp-block-group {
  padding-block-start: 0 !important;
}

/* ── Transform reset total (tue toutes les cascades historiques) ── */
.metric-card,
.metric-card.wp-block-group,
.hero__metrics .metric-card,
.hero__metrics .metric-card.wp-block-group,
.metric-card--1, .metric-card--2, .metric-card--3, .metric-card--4,
.hero__metrics .metric-card--1,
.hero__metrics .metric-card--2,
.hero__metrics .metric-card--3,
.hero__metrics .metric-card--4 {
  transform: none;
}

/* ── Pastille quand elle contient un SVG (v10.15.5) ──
   Le stroke du SVG hérite de currentColor, donc la couleur est celle
   définie par .metric-card__icon--red/green/dark/blue. On uniformise
   juste la mise en forme pour que le SVG soit parfaitement centré,
   sans héritage de font-size (qui n'a aucun effet sur un SVG mais peut
   créer du line-height parasite). */
.metric-card__icon.metric-card__icon--svg {
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
}
.metric-card__icon.metric-card__icon--svg svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* ── Largeur uniforme des 4 cartes ── */
.hero__metrics {
  align-items: stretch !important;       /* hauteur auto = même hauteur */
  justify-content: center !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
  flex-wrap: wrap;
}
.hero__metrics .metric-card,
.hero__metrics .metric-card.wp-block-group {
  flex: 0 0 clamp(170px, 18vw, 210px) !important;
  width: clamp(170px, 18vw, 210px) !important;
  max-width: clamp(170px, 18vw, 210px) !important;
  min-width: 0 !important;
}

/* ── Animation d'entrée staggered (classe, pas clown) ──
   Chaque carte apparaît décalée : fade-in + montée de 14px + léger
   scale. Aucun rotate. Dure ~650 ms / carte. Respecte prefers-
   reduced-motion. */
@keyframes geiq-metric-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.hero__metrics .metric-card {
  opacity: 0;
  animation: geiq-metric-enter .65s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(120ms * var(--metric-index, 0));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease,
              border-color .25s ease;
}
.hero__metrics .metric-card--1 { --metric-index: 0; }
.hero__metrics .metric-card--2 { --metric-index: 1; }
.hero__metrics .metric-card--3 { --metric-index: 2; }
.hero__metrics .metric-card--4 { --metric-index: 3; }

/* Hover : lift propre (pas de rotation) + accentuation de l'ombre */
.metric-card:hover,
.metric-card.wp-block-group:hover,
.hero__metrics .metric-card:hover,
.hero__metrics .metric-card.wp-block-group:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(26,23,27,.10),
              0 0 0 1.5px rgba(196,30,58,.18);
  border-color: rgba(196,30,58,.28);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero__metrics .metric-card,
  .hero__metrics .metric-card.wp-block-group {
    flex: 0 0 clamp(160px, 22vw, 200px) !important;
    width: clamp(160px, 22vw, 200px) !important;
    max-width: clamp(160px, 22vw, 200px) !important;
  }
}
@media (max-width: 767px) {
  /* 1 COLONNE pleine largeur, pas 2x2 — demande client */
  html[data-persona="candidate"] .hero__metrics.persona-view--candidate,
  html[data-persona="company"]   .hero__metrics.persona-view--company {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    align-items: center !important;
  }
  .hero__metrics {
    gap: 12px !important;
  }
  .hero__metrics .metric-card,
  .hero__metrics .metric-card.wp-block-group {
    flex: 0 0 auto !important;
    width: min(92%, 420px) !important;
    max-width: 420px !important;
    /* sur mobile on garde la disposition verticale "icône dessus" */
    flex-direction: column !important;
    text-align: left !important;
    padding: 16px 20px !important;
  }
  .hero__metrics-wrap,
  .hero .hero__metrics-wrap {
    margin-block-start: clamp(56px, 10vw, 96px) !important;
  }
}
@media (max-width: 479px) {
  /* même logique, juste padding et largeur ajustés */
  html[data-persona="candidate"] .hero__metrics.persona-view--candidate,
  html[data-persona="company"]   .hero__metrics.persona-view--company {
    grid-template-columns: unset !important;
  }
  .hero__metrics .metric-card,
  .hero__metrics .metric-card.wp-block-group {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Reduced motion : on tue l'animation d'entrée ── */
@media (prefers-reduced-motion: reduce) {
  .hero__metrics .metric-card,
  .hero__metrics .metric-card.wp-block-group {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── (2) Section eyebrow : forcer le inline-flex que WP casse ────────
   WordPress sérialise <p class="section-eyebrow"> avec alignement
   centré en ajoutant has-text-align-center qui force display:block.
   On réécrit le sélecteur au cas où, avec !important partout pour
   gagner toutes les cascades (builder, thème Ollie, patches v6/v7). */
p.section-eyebrow,
.section-eyebrow,
.section-header > .section-eyebrow,
.section-eyebrow.has-text-align-center,
p.section-eyebrow.has-text-align-center {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 6px 18px !important;
  word-spacing: .18em !important;
  text-align: center !important;
}
p.section-eyebrow::before,
.section-eyebrow::before,
.section-header > .section-eyebrow::before,
.section-eyebrow.has-text-align-center::before,
p.section-eyebrow.has-text-align-center::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  box-shadow: 0 0 8px rgba(227,0,67,.7) !important;
  animation: blink 2.5s ease-in-out infinite !important;
  /* v7.4.1 — opacity 1 !important supprimée : elle tuait l'animation blink. */
  flex-shrink: 0 !important;
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  p.section-eyebrow::before,
  .section-eyebrow::before { animation: none !important; }
}


/* ── (3) Newsletter "rubis transparent" : rouge translucide + blur ──
   On revient sur un fond ROUGE (demande Ju) mais en mode gemme :
   rgba + backdrop-filter pour voir le fond gris de la section à
   travers, reflets blancs en haut-gauche, bordure subtile.         */
/* ═══════════════════════════════════════════════════════════════════
   v10.15.7 — Newsletter card : VERRE POLI (décision Ju 23/04)
   ───────────────────────────────────────────────────────────────────
   Avant : gros bloc rouge criard qui cassait le ton "hyper clean" du
   site. Après : frosted glass presque blanc, bordure fine blanche,
   backdrop-filter pour laisser passer le fond de la section.
   Le seul accent rouge reste le bouton CTA (primary) pour guider
   l'œil vers l'action.
   Dark mode géré via variables CSS — pas de guerre de spécificité.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --newsletter-bg:        rgba(255, 255, 255, 0.58);
  --newsletter-border:    rgba(255, 255, 255, 0.72);
  --newsletter-shadow:    0 24px 60px rgba(26, 23, 27, 0.08),
                          0 8px 24px rgba(26, 23, 27, 0.04),
                          inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --newsletter-highlight: rgba(196, 30, 58, 0.06);
  --newsletter-text:      var(--color-neutral-900, #1a171b);
  --newsletter-text-soft: var(--color-neutral-500, #696573);
  --newsletter-input-bg:  rgba(255, 255, 255, 0.85);
  --newsletter-input-bd:  rgba(26, 23, 27, 0.10);
}
[data-theme="dark"] {
  --newsletter-bg:        rgba(255, 255, 255, 0.06);
  --newsletter-border:    rgba(255, 255, 255, 0.12);
  --newsletter-shadow:    0 24px 60px rgba(0, 0, 0, 0.35),
                          0 8px 24px rgba(0, 0, 0, 0.18),
                          inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --newsletter-highlight: rgba(196, 30, 58, 0.10);
  --newsletter-text:      #f0eef1;
  --newsletter-text-soft: rgba(255, 255, 255, 0.55);
  --newsletter-input-bg:  rgba(255, 255, 255, 0.04);
  --newsletter-input-bd:  rgba(255, 255, 255, 0.10);
}

.newsletter-card {
  background:
    radial-gradient(ellipse 60% 40% at 85% 90%,
      var(--newsletter-highlight) 0%,
      transparent 70%),
    var(--newsletter-bg) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  color: var(--newsletter-text) !important;
  border: 1px solid var(--newsletter-border) !important;
  box-shadow: var(--newsletter-shadow) !important;
}
.newsletter-card::before {
  background: radial-gradient(circle,
    rgba(196, 30, 58, 0.08) 0%, transparent 65%) !important;
  opacity: .7 !important;
}
/* Eyebrow : pill neutre, dot accent pour signaler "newsletter" */
.newsletter-card__eyebrow {
  color: var(--newsletter-text) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(26, 23, 27, 0.08) !important;
}
[data-theme="dark"] .newsletter-card__eyebrow {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.newsletter-card__eyebrow::before {
  background: var(--color-primary) !important;
  box-shadow: 0 0 10px rgba(196, 30, 58, 0.55) !important;
}
/* Typo : couleur selon thème, accent primary sur <em>/<strong> */
.newsletter-card__title {
  color: var(--newsletter-text) !important;
}
.newsletter-card__title em,
.newsletter-card__title strong {
  color: var(--color-primary) !important;
  font-style: normal !important;
}
.newsletter-card__sub {
  color: var(--newsletter-text-soft) !important;
}
/* Input : glass aussi, bordure subtile, focus = accent primary */
.newsletter-form__input {
  background: var(--newsletter-input-bg) !important;
  border: 1.5px solid var(--newsletter-input-bd) !important;
  color: var(--newsletter-text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.newsletter-form__input::placeholder {
  color: var(--newsletter-text-soft) !important;
  opacity: .7;
}
.newsletter-form__input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.15),
              0 2px 8px rgba(26, 23, 27, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="dark"] .newsletter-form__input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}
/* Bouton CTA : seul accent rouge de la carte, reste cohérent avec
   les autres btn-primary du site (variable --color-primary = #c41e3a) */
.newsletter-form__btn {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(196, 30, 58, 0.22),
              0 0 0 1px rgba(196, 30, 58, 0.15) !important;
  border: none !important;
}
.newsletter-form__btn:hover {
  background: var(--color-primary-dark, #8b1228) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(196, 30, 58, 0.32),
              0 0 0 1px rgba(196, 30, 58, 0.25) !important;
}
.newsletter-card__legal {
  color: var(--newsletter-text-soft) !important;
}
.newsletter-card__legal a {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter-card__legal a:hover {
  color: var(--color-primary-dark, #8b1228) !important;
}
.newsletter-card__feedback {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(26, 23, 27, 0.08) !important;
  color: var(--newsletter-text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .newsletter-card__feedback {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.newsletter-card__feedback--error {
  background: rgba(196, 30, 58, 0.08) !important;
  border-color: rgba(196, 30, 58, 0.25) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] .newsletter-card__feedback--error {
  background: rgba(196, 30, 58, 0.12) !important;
  color: #ff8fa8 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.3.5 — HOTFIX 2 : cartes plus basses + eyebrows = clone hero__pill
   ───────────────────────────────────────────────────────────────────
   Vraie source des eyebrows différents : bloc "TITRES DE SECTION
   alignement unifié" ligne 2960 du CSS live qui force :
     - text-transform: uppercase
     - letter-spacing: 0.12em
     - font-size: .75rem
     - box-shadow (en plus de la bordure → rendu "bouton")
     - dot SANS halo et SANS animation
   → d'où l'apparence "NOS PARTENAIRES" en bloc compressé.

   Le hero__pill est en casse normale, gris moyen, pill nette, dot
   rouge avec halo + animation blink. On clone ces propriétés sur
   .section-eyebrow avec max de spécificité + !important.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cartes hero : encore plus bas (Ju : "descends le cadre") ── */
.hero__metrics {
  margin-top: clamp(100px, 10vw, 140px) !important;
}
/* Padding-bottom sur la section hero pour que les cartes aient de
   l'air en-dessous aussi, qu'elles ne collent pas au switcher. */
.hero,
.section--hero,
body.home .hero {
  padding-bottom: clamp(48px, 6vw, 96px) !important;
}


/* ── Eyebrows : clone 1:1 de .hero__pill ───────────────────────────
   v7.4.0 — Fix centrage "Nos partenaires" : bascule en display:flex
   (block-level) + margin-inline:auto + width:fit-content. Sur
   block-level, margin:auto centre horizontalement (vs inline-flex).
   Cibles exhaustives + !important pour écraser la règle 2960.        */
p.section-eyebrow,
.section-eyebrow,
.section-eyebrow.has-text-align-center,
p.section-eyebrow.has-text-align-center,
.section-header > .section-eyebrow,
.eyebrow {
  /* Layout : pill block-level centrée — margin-inline:auto fonctionne */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-block: 0 var(--space-4) !important;
  margin-inline: auto !important;

  /* Typo : EXACT hero__pill (casse normale, pas uppercase !) */
  font-family: var(--font-body) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  word-spacing: normal !important;
  line-height: 1 !important;

  /* Couleurs : EXACT hero__pill */
  color: var(--color-neutral-500) !important;
  background: var(--color-neutral-50) !important;
  border: 1px solid var(--color-neutral-200) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* Exception : dans le switcher BTP/GEIQ/Multi, les eyebrows doivent
   rester alignées à gauche (pas centrées) car le panel est en flex
   column avec alignement left. */
.geiq-panel .section-eyebrow,
.geiq-panel__content > .section-eyebrow {
  margin-inline: 0 !important;
}

/* Dot rouge : EXACT hero__pill::before
   v7.4.0 — Retrait de opacity:1 !important qui tuait l'animation blink.
   L'animation module l'opacité entre 1 et .4 ; sans ce retrait, le dot
   restait figé à opacity:1 (pas de halo pulsant). */
p.section-eyebrow::before,
.section-eyebrow::before,
.section-eyebrow.has-text-align-center::before,
p.section-eyebrow.has-text-align-center::before,
.section-header > .section-eyebrow::before,
.eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  box-shadow: 0 0 8px rgba(227,0,67,.7) !important;
  animation: blink 2.5s ease-in-out infinite !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  p.section-eyebrow::before,
  .section-eyebrow::before,
  .eyebrow::before { animation: none !important; }
}

/* Dark mode : adaptation couleurs */
[data-theme="dark"] p.section-eyebrow,
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .eyebrow {
  color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.4.2 — Polish round 3 (feedback Ju 22/04)
   ───────────────────────────────────────────────────────────────────
   (1) Hero metric cards : trop d'air en-dessous par rapport aux autres
       bas-de-section. On rapproche le switcher sans toucher au top.
   (2) Footer : le fond est (re)passé en gris v7.3.3+, donc le spot-
       light radial rouge n'a plus de sens → on le kill définitivement
       (et on laisse la classe glow-enabled si elle existe encore dans
       le markup pour la neutraliser CSS-side, plus besoin d'éditer
       parts/footer.html).
   ═══════════════════════════════════════════════════════════════════ */

/* ── (1) Hero bottom : on supprime le padding-bottom décoratif rajouté
   v7.4.0. Les cartes ont déjà leur margin-top clamp(100-140px) pour
   l'air au-dessus ; en-dessous, le switcher suit avec sa propre marge
   de section → inutile d'en rajouter sur .hero. */
.hero,
.section--hero,
body.home .hero {
  padding-bottom: 0 !important;
}
/* Et on compacte le padding interne du conteneur .hero__metrics : le
   padding-bottom devient 0, on garde 16-24px en haut pour que la carte
   qui remonte (translateY(-6px)) ne frôle pas le CTA du hero. */
.hero__metrics {
  padding: var(--space-3) var(--space-4) 0 !important;
}

/* ── (2) Footer : kill total du spotlight + dark mode propre (v10.15.6)
   ──────────────────────────────────────────────────────────────────
   Bug historique (signalé Ju 23/04) : sur la home, le footer restait
   en blanc même en [data-theme="dark"] parce que la règle
   `body.home .site-footer` (spécificité 0,2,1) battait la règle
   `[data-theme="dark"] .site-footer` (0,1,1) — le sélecteur dark n'était
   jamais assez fort pour override.
   ───────────────────────────────────────────────────────────────────
   Fix propre : on passe par une CSS custom property `--footer-bg`
   définie au niveau :root (light) et overridée au niveau
   [data-theme="dark"]. La cascade se joue au niveau de la variable,
   pas du sélecteur → plus de guerre de spécificité, le sélecteur
   `body.home .site-footer` lit toujours la valeur courante, qui
   bascule automatiquement selon le thème. */
:root {
  --footer-bg: rgba(249, 250, 251, 0.96);
}
[data-theme="dark"] {
  --footer-bg: rgba(26, 23, 27, 0.96);
}
/* v10.15.6 — ancienne règle .site-footer { background: var(--footer-bg) }
   supprimée en v10.15.16 : elle écrasait le radial-gradient du bloc
   v10.15.14 (spec 0,3,0 avec body.home gagnait sur spec 0,2,0 du bloc
   glow-enabled). Résultat : fond plat, pas de spotlight même quand
   la souris survolait le footer. Le fond est maintenant entièrement
   géré par le bloc v10.15.14 — qui lit aussi var(--footer-bg) et
   applique le radial-gradient en layering au-dessus. */
.site-footer {
  transition: background .15s ease-out !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v7.4.3 — Header polish (feedback Ju 22/04)
   ───────────────────────────────────────────────────────────────────
   (1) Bouton CTA "Voir les offres" : version v7.4.0 trop épaisse /
       grossière. On réduit padding, font-size et ombre pour un pill
       plus fin, à la ligne de la nav.
   (2) Dropdown "Nos GEIQ" : le submenu-icon chevron est OK, on ajoute
       juste un padding horizontal un poil plus serré sur l'item parent
       pour éviter qu'il prenne trop de place vs les autres liens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── (1) CTA header : plus fin & plus discret */
.site-header__inner a.nav-cta,
.header-cta-wrap a.nav-cta {
  padding: 6px 14px !important;         /* 9/18 → 6/14  : -33% */
  font-size: 13px !important;            /* ~0.8125rem, tight */
  letter-spacing: 0 !important;
  box-shadow: 0 1px 4px rgba(227,0,67,.18), 0 0 0 1px rgba(227,0,67,.08) !important;
}
.site-header__inner a.nav-cta:hover,
.header-cta-wrap a.nav-cta:hover {
  box-shadow: 0 3px 10px rgba(227,0,67,.22), 0 0 0 1px rgba(227,0,67,.12) !important;
}
.site-header__inner a.nav-cta span[aria-hidden] {
  font-size: .95em !important;
  opacity: .9;
}

/* ── (2) Dropdown parent : léger espace pour le chevron sans alourdir */
.site-header__inner .wp-block-navigation-item.nav-dropdown > .wp-block-navigation-item__content {
  padding-right: 6px !important;
}

/* ── (3) Mobile : sur petit écran, le bouton garde un padding confortable
   (touch target) mais on coupe la font à 12px et le span flèche */
@media (max-width: 640px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .site-header__inner a.nav-cta span[aria-hidden] {
    display: none !important;          /* flèche superflue en mobile */
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v7.4.4 — CTA header encore trop gros (feedback Ju 22/04)
   ───────────────────────────────────────────────────────────────────
   Problème : 2 blocs précédents (v7.2.9 + v7.4.3) se chevauchent sur
   les breakpoints tablette + sur .is-scrolled → certains états restent
   à 7/14 ou 13px. On consolide TOUT ici en dernier (source unique de
   vérité), avec padding et typo plus serrés à chaque état.

   Règle finale :
   • base desktop large  : 4px 12px / 12px          ← avant 6/14/13
   • scroll shrink       : 3px 11px / 11.5px        ← avant 6/14/13
   • tablet (<1100px)    : 4px 11px / 12px
   • compact (<860px)    : 4px 10px / 11.5px, flèche off
   • mobile (<640px)     : 5px 10px / 11.5px, flèche off
   ═══════════════════════════════════════════════════════════════════ */

.site-header__inner a.nav-cta,
.header-cta-wrap a.nav-cta {
  padding: 4px 12px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  gap: 4px !important;
  box-shadow: 0 1px 3px rgba(227,0,67,.16), 0 0 0 1px rgba(227,0,67,.08) !important;
}
.site-header__inner a.nav-cta span[aria-hidden] {
  font-size: .9em !important;
  margin-left: 1px !important;
}

/* Scrolled header : encore un cran plus tight pour s'aligner sur la
   hauteur réduite du header (logo 26px) */
.site-header.is-scrolled .site-header__inner a.nav-cta,
.site-header.is-scrolled .header-cta-wrap a.nav-cta {
  padding: 3px 11px !important;
  font-size: 11.5px !important;
  box-shadow: 0 1px 2px rgba(227,0,67,.14), 0 0 0 1px rgba(227,0,67,.08) !important;
}

@media (max-width: 1100px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 4px 11px !important;
    font-size: 12px !important;
  }
}
@media (max-width: 860px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }
  .site-header__inner a.nav-cta span[aria-hidden] { display: none !important; }
}
@media (max-width: 640px) {
  .site-header__inner a.nav-cta,
  .header-cta-wrap a.nav-cta {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   12. BURGER MENU v7.8 — glass prononcé + néon rouge animé
   ═══════════════════════════════════════════════════════════════════
   overlayMenu:"always" → WordPress expose le bouton .wp-block-navigation__
   responsive-container-open SUR DESKTOP ET MOBILE. Les anciens styles
   de nav inline (138-370 de ce fichier) ne s'appliquent plus à l'état
   normal (fermé), seulement à l'intérieur de l'overlay.

   Architecture :
   - Burger pill (glass + ring néon qui tourne au hover/ouvert)
   - Fullscreen overlay (backdrop-filter lourd + grille flex-center)
   - Liens en Instrument Serif larges (desktop-like, marchent au mobile)
   - Sous-menus en accordéon avec pulse néon à l'expansion
   - Close button X en haut à droite, même néon
   ═══════════════════════════════════════════════════════════════════ */

/* @property pour animer proprement l'angle du conic-gradient.
   Support : Chrome/Edge 85+, Safari 16.4+, Firefox 128+.
   Fallback : animation ne tourne pas mais le néon reste visible (static). */
@property --geiq-neon-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes geiq-neon-spin {
  to { --geiq-neon-angle: 360deg; }
}

@keyframes geiq-neon-flash {
  0%   { opacity: 0;   transform: scale(.96); }
  30%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 1;   transform: scale(1); }
}

@keyframes geiq-overlay-fade {
  from { opacity: 0; backdrop-filter: blur(0) saturate(1); }
  to   { opacity: 1; }
}

@keyframes geiq-click-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.09); }
}

@keyframes geiq-menu-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ───────────────────────────────────────────────────────────────────
   BURGER BUTTON (toujours visible, desktop + mobile)
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .wp-block-navigation__responsive-container-open {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 999px !important;
  color: var(--color-neutral-900) !important;
  cursor: pointer !important;
  transition: background .22s ease, border-color .22s ease, transform .22s var(--ease-spring), box-shadow .22s ease !important;
  isolation: isolate;
  outline: none !important;
  font-size: 0 !important; /* neutralise label Gutenberg éventuel */
}

body .site-header__inner .wp-block-navigation__responsive-container-open:hover {
  background: rgba(255,255,255,.8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 22px rgba(227,0,67,.14), 0 0 0 1px rgba(227,0,67,.25) !important;
}

/* Flash pulse au clic (classe temp. injectée par header.js) */
body .site-header__inner .wp-block-navigation__responsive-container-open.geiq-neon-flash {
  animation: geiq-click-pulse .5s var(--ease-out);
}

/* Neon ring — tourne autour du burger en PERMANENCE (v9.0.2 : plus
   besoin de hover/click pour attirer l'œil, le néon vit toujours). */
body .site-header__inner .wp-block-navigation__responsive-container-open::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--geiq-neon-angle, 0deg),
    transparent 0deg,
    transparent 220deg,
    rgba(227, 0, 67, .18) 255deg,
    #ff1e52 295deg,
    #ffb1c4 315deg,
    #ff1e52 335deg,
    rgba(227, 0, 67, .18) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 1;                                  /* v9.0.2 — always on */
  transition: opacity .28s ease;
  animation: geiq-neon-spin 2.6s linear infinite;
  z-index: 0;
}

/* Glow flou derrière (halo néon) — également permanent mais plus
   discret au repos (.55) ; montre à 0.9 au hover / menu ouvert. */
body .site-header__inner .wp-block-navigation__responsive-container-open::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--geiq-neon-angle, 0deg),
    transparent 0deg,
    transparent 240deg,
    rgba(255, 30, 82, .55) 295deg,
    transparent 360deg
  );
  filter: blur(10px);
  opacity: .55;                                /* v9.0.2 — always on, dim */
  transition: opacity .28s ease;
  animation: geiq-neon-spin 2.6s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Boost du halo au hover / focus / menu ouvert (le ring reste à 1) */
body .site-header__inner .wp-block-navigation__responsive-container-open:hover::after,
body .site-header__inner .wp-block-navigation__responsive-container-open:focus-visible::after,
body.geiq-menu-open .site-header__inner .wp-block-navigation__responsive-container-open::after,
body .site-header__inner .wp-block-navigation__responsive-container-open[aria-expanded="true"]::after {
  opacity: .9;
}

/* Icône hamburger — on garde le SVG de Gutenberg, on le style */
body .site-header__inner .wp-block-navigation__responsive-container-open svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  position: relative;
  z-index: 2;
  transition: transform .25s var(--ease-spring);
}
body.geiq-menu-open .site-header__inner .wp-block-navigation__responsive-container-open svg {
  transform: rotate(90deg) scale(.94);
}

/* Dark mode burger */
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container-open,
[data-theme="dark"] .site-header__inner .wp-block-navigation__responsive-container-open {
  background: rgba(28, 24, 32, .6) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f0eef1 !important;
}
[data-theme="dark"] .site-header__inner .wp-block-navigation__responsive-container-open:hover {
  background: rgba(28, 24, 32, .85) !important;
}


/* ───────────────────────────────────────────────────────────────────
   RESET : sur desktop, on MASQUE la nav inline (elle n'existait plus
   qu'en mobile avant). Maintenant overlayMenu="always" → WP cache
   déjà le <ul> hors overlay, mais on sécurise le cas où le thème
   parent la rend tout de même.
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: none !important;
}


/* ───────────────────────────────────────────────────────────────────
   OVERLAY FULLSCREEN — glass prononcé
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Glass lourd */
  background:
    radial-gradient(ellipse at 75% 15%, rgba(255, 30, 82, .12), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(255, 30, 82, .08), transparent 55%),
    rgba(252, 250, 251, .82) !important;
  backdrop-filter: blur(36px) saturate(1.75) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.75) !important;
  animation: geiq-overlay-fade .35s var(--ease-out) both;
  /* v8.0.1 — scroll interne, jamais le body. -webkit-overflow-scrolling
     pour inertie iOS. overscroll-behavior évite que le scroll fuite sur
     le document derrière. */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-items: stretch !important;
  justify-content: stretch !important;
}

[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open {
  background:
    radial-gradient(ellipse at 75% 15%, rgba(255, 30, 82, .18), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(255, 30, 82, .10), transparent 55%),
    rgba(18, 14, 22, .86) !important;
}

/* Dialog inner
   v8.0.1 — Fix mobile scroll :
   • `100dvh` au lieu de `100vh` → tient compte de la barre d'URL iOS/Android.
   • `justify-content: safe center` → centre QUAND ça rentre ; sinon
     bascule sur `flex-start` (pas de top clippé).
   • `height: auto` + `min-height: 100dvh` → le contenu peut dépasser
     la hauteur viewport et l'overlay scrolle naturellement. */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 10vh, 120px) clamp(24px, 6vw, 64px) clamp(40px, 8vh, 80px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: safe center !important;
  gap: clamp(14px, 2.4vh, 32px) !important;
  height: auto !important;
  min-height: 100dvh !important;
  /* Fallback pour navigateurs qui ne supportent pas dvh (avant Chrome 108) */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
}


/* ───────────────────────────────────────────────────────────────────
   CLOSE BUTTON (X en haut-droite) — même néon que le burger
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: clamp(14px, 2.5vh, 28px) !important;
  right: clamp(14px, 2vw, 32px) !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 999px !important;
  color: var(--color-neutral-900) !important;
  cursor: pointer !important;
  z-index: 10000 !important;
  isolation: isolate;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--geiq-neon-angle, 0deg),
    transparent 0deg, transparent 220deg,
    rgba(227,0,67,.22) 255deg,
    #ff1e52 295deg,
    #ffb1c4 315deg,
    #ff1e52 335deg,
    rgba(227,0,67,.22) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: geiq-neon-spin 2.6s linear infinite;
  pointer-events: none;
  opacity: .92;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close:hover {
  transform: translateY(-1px) rotate(90deg) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 6px 22px rgba(227,0,67,.22) !important;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg {
  width: 18px !important; height: 18px !important;
  fill: currentColor !important;
  position: relative; z-index: 2;
}

[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  background: rgba(28, 24, 32, .72) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #f0eef1 !important;
}


/* ───────────────────────────────────────────────────────────────────
   LISTE DES LIENS dans l'overlay
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(6px, 1.2vh, 14px) !important;
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Item principal */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item {
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  opacity: 0;
  animation: geiq-menu-item-in .55s var(--ease-spring) forwards;
}
/* Stagger les entrées */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1)  { animation-delay: .08s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2)  { animation-delay: .14s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3)  { animation-delay: .20s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4)  { animation-delay: .26s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5)  { animation-delay: .32s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6)  { animation-delay: .38s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7)  { animation-delay: .44s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+8){ animation-delay: .50s; }

/* Le lien lui-même */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--color-neutral-900) !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .22s var(--ease-spring), padding-left .22s ease !important;
  isolation: isolate;
}


/* Hover state : texte + padding */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--color-primary) !important;
  padding-left: 28px !important;
}

/* Dark mode overlay text */
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  color: #f0eef1 !important;
}
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: #ff6b8a !important;
}


/* ───────────────────────────────────────────────────────────────────
   SOUS-MENUS — accordéon dans l'overlay, même néon
   ─────────────────────────────────────────────────────────────────── */

body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
  align-items: center;
  margin-left: 6px !important;
  opacity: .7 !important;
  transition: transform .3s var(--ease-spring) !important;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon svg {
  width: 14px; height: 14px;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child .wp-block-navigation-item__content[aria-expanded="true"]
  .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* Conteneur submenu — pas de positioning absolute en mode overlay,
   on le flue sous le parent. */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0 20px !important;
  margin: 0 !important;
  list-style: none !important;
  transform: none !important;
  overflow: hidden !important;
  /* v9.0.3 — État fermé blindé : on cumule 4 props pour qu'aucun style
     natif Ollie/Gutenberg (position absolute, opacity forcée, etc.) ne
     puisse rendre les sous-items visibles tant que aria-expanded=false.
     Avant : seul max-height:0 → les items fuyaient parfois en overlay
     flottant (screen Ju : GEIQ BTP + GEIQ Multi visibles en pâle
     autour de "Candidats"). */
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    max-height .45s var(--ease-out),
    opacity .25s ease,
    padding-top .35s ease,
    visibility 0s linear .35s;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child .wp-block-navigation-item__content[aria-expanded="true"]
  + .wp-block-navigation__submenu-container,
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child.is-menu-open > .wp-block-navigation__submenu-container,
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child.geiq-submenu-open > .wp-block-navigation__submenu-container {
  max-height: 600px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  padding-top: 10px !important;
  transition:
    max-height .45s var(--ease-out),
    opacity .3s ease .05s,
    padding-top .35s ease,
    visibility 0s linear 0s;
}

/* Items du sous-menu */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item {
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 18px !important;
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
  font-weight: 500 !important;
  color: var(--color-neutral-600) !important;
  letter-spacing: 0 !important;
}

body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--color-primary) !important;
  padding-left: 26px !important;
}

[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255,255,255,.65) !important;
}
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: #ff6b8a !important;
}


/* ───────────────────────────────────────────────────────────────────
   QUAND LE MENU EST OUVERT : on bloque le scroll body
   ─────────────────────────────────────────────────────────────────── */

body.geiq-menu-open {
  overflow: hidden;
  /* v8.0.1 — iOS ≤16 n'honore pas toujours `overflow:hidden` sur body.
     `position:fixed`+`width:100%` fige le scroll underlay de façon fiable. */
  position: fixed;
  width: 100%;
}

/* ───────────────────────────────────────────────────────────────────
   v9.0.3 — Pictos SVG à gauche de chaque item du menu burger
   Les SVG sont injectés par header.js (injectMenuIcons) via la
   classe .geiq-menu-icon, en premier enfant de .wp-block-navigation-
   item__content. L'animation ne joue que quand le menu est ouvert
   (.is-menu-open) — elle se rejoue donc à chaque ouverture.
   ─────────────────────────────────────────────────────────────────── */
.geiq-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-neutral-500, #8b8590);
  opacity: 0;
  transform: translateX(-10px) scale(.6) rotate(-15deg);
  transition: color .25s ease, transform .35s var(--ease-spring);
  pointer-events: none;
}
.geiq-menu-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* Couleur au hover / actif : prend la couleur primary */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover .geiq-menu-icon,
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content .geiq-menu-icon {
  color: var(--color-primary, #e30043);
  transform: translateX(0) scale(1.1) rotate(0deg) !important;
}

/* Taille un chouïa plus petite sur les sous-items */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .geiq-menu-icon {
  width: 18px;
  height: 18px;
}

/* Animation : joue UNIQUEMENT quand le menu est ouvert (la classe
   is-menu-open est toggle sur le container → ré-injection de
   l'animation à chaque ouverture). Stagger synchro avec les items. */
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .geiq-menu-icon {
  animation: geiq-menu-icon-in .65s cubic-bezier(.16,1.2,.3,1) forwards;
}
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) .geiq-menu-icon  { animation-delay: .18s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) .geiq-menu-icon  { animation-delay: .24s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) .geiq-menu-icon  { animation-delay: .30s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) .geiq-menu-icon  { animation-delay: .36s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) .geiq-menu-icon  { animation-delay: .42s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) .geiq-menu-icon  { animation-delay: .48s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(7) .geiq-menu-icon  { animation-delay: .54s; }
body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+8) .geiq-menu-icon { animation-delay: .60s; }

@keyframes geiq-menu-icon-in {
  0%   { opacity: 0; transform: translateX(-12px) scale(.55) rotate(-18deg); }
  55%  { opacity: 1; transform: translateX(2px) scale(1.18) rotate(6deg); }
  100% { opacity: 1; transform: translateX(0) scale(1) rotate(0); }
}

/* Dark mode : couleur au repos plus claire pour lisibilité */
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .geiq-menu-icon {
  color: rgba(240, 238, 241, .55);
}
[data-theme="dark"] body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover .geiq-menu-icon {
  color: #ff6b8a;
}


/* ───────────────────────────────────────────────────────────────────
   v9.0.1 — Fix overlay burger clippé dans la pill header (mobile)
   Le bug : `.site-header__inner` a `backdrop-filter: blur(...)` pour
   le glass de la pill flottante. Per CSS spec, un ancêtre avec
   backdrop-filter (ou filter/transform/perspective) devient le
   containing block pour tous ses descendants `position: fixed`.
   → L'overlay du menu, qui est enfant de la pill dans le DOM, se
   retrouvait positionné relativement à la pill (62 px de haut) au
   lieu du viewport. Symptôme : "le menu se déroule mais est caché".
   Le fix : retirer le backdrop-filter de la pill SEULEMENT quand le
   menu est ouvert. Comme l'overlay couvre tout l'écran, le flou
   derrière la pill ne sert à rien pendant l'ouverture — zéro
   régression visuelle, la containing block redevient le viewport.
   ─────────────────────────────────────────────────────────────────── */
body.geiq-menu-open .site-header__inner.wp-block-group,
body.geiq-menu-open .site-header.is-scrolled .site-header__inner.wp-block-group {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ───────────────────────────────────────────────────────────────────
   MOBILE — menu compact v8.0.1
   À ≤640px on réduit la typo + le padding des items pour que les
   8 entrées (+ le sous-menu "Nos GEIQ" déplié) tiennent dans le
   viewport sans overflow cache-misère.
   ─────────────────────────────────────────────────────────────────── */

/* v9.0.2 — Menu mobile : typo plus sobre (Instrument Serif reste,
   mais taille raisonnable), items bien espacés pour éviter la
   superposition visuelle au hover (le ring néon ::after débordait
   sur l'item voisin quand les items étaient collés).
   - font-size descend de ~1.7rem → 1.15rem (≤640) et 1.05rem (≤420)
   - gap container passe de 2px → 8px (aération)
   - line-height explicite 1.2 pour tuer toute marge parasite
   - padding serré vertical (6-7px) pour compactage sans superposition */
@media (max-width: 640px) {
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    /* On colle en haut plutôt que centrer : lecture naturelle. */
    justify-content: flex-start !important;
    padding: clamp(80px, 12vh, 110px) 22px clamp(40px, 8vh, 60px) !important;
    gap: 10px !important;
  }

  /* Items principaux — compacts, classe, pas de chevauchement */
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    padding: 7px 16px !important;
    letter-spacing: -0.005em !important;
  }

  /* Items sous-menu */
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    padding: 6px 14px !important;
  }

  /* Container : gap qui respire entre items (fini le ::after qui
     dépasse visuellement sur l'item suivant). */
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    gap: 8px !important;
  }

  /* Sous-menu : gap interne resserré, reste logique */
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container {
    gap: 4px !important;
    padding-left: 16px !important;
  }

  /* Close button légèrement plus petit */
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    width: 44px !important;
    height: 44px !important;
    top: 14px !important;
    right: 14px !important;
  }
}

@media (max-width: 420px) {
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
  }

  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: .92rem !important;
    padding: 5px 12px !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   RESPONSIVE : le cluster header__right reste lisible (social / CTA
   rétrécissent pour laisser place au burger sur les petits écrans).
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Social icons : on retire pour libérer l'espace */
  body .site-header__inner .site-header__right .social-links {
    display: none !important;
  }
  /* Burger plus compact */
  body .site-header__inner .wp-block-navigation__responsive-container-open {
    width: 40px !important;
    height: 40px !important;
    margin-left: 6px !important;
  }
}

@media (max-width: 460px) {
  /* Ultra-mobile : on masque le CTA header aussi, il y aura un CTA
     dans le menu overlay — un lien vers /offres/ y est déjà. */
  body .site-header__inner .header-cta-wrap {
    display: none !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   FALLBACK @property non supporté : animation tourne pas mais néon
   reste visible (opacity) pour les navigateurs pré-2024.
   ─────────────────────────────────────────────────────────────────── */

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  body .site-header__inner .wp-block-navigation__responsive-container-open::before,
  body .site-header__inner .wp-block-navigation__responsive-container-open::after,
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
    background: linear-gradient(135deg, transparent 40%, #ff1e52 50%, transparent 60%) !important;
    animation: none !important;
  }
}

/* Reduced motion : rotation néon off, mais présence visuelle conservée */
@media (prefers-reduced-motion: reduce) {
  body .site-header__inner .wp-block-navigation__responsive-container-open::before,
  body .site-header__inner .wp-block-navigation__responsive-container-open::after,
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content::after,
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close::before {
    animation: none !important;
  }
  body .site-header__inner .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container > .wp-block-navigation-item {
    animation: none !important;
    opacity: 1 !important;
  }
}



/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.5.0 — MENU DRAWER (CONSOLIDATION CLEAN)                          ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Les 4 passes v10.4.x ont été supprimées (patches empilés + conflits).║
   ║  Ici UN SEUL bloc, basé sur la VRAIE structure DOM inspectée en live :║
   ║                                                                       ║
   ║    <nav class="geiq56-burger-nav">                                    ║
   ║      <button class="...responsive-container-open">burger</button>     ║
   ║      <div class="...responsive-container">                            ║
   ║        <div class="...responsive-close">                              ║
   ║          <div class="...responsive-dialog">                           ║
   ║            <button class="...responsive-container-close">×</button>   ║
   ║            <div class="...responsive-container-content">              ║
   ║              <ul class="...container">                                ║
   ║                <li class="...item">                                   ║
   ║                  <a class="...item__content">                         ║
   ║                    <span class="...item__label">Accueil</span>        ║
   ║                <li class="...item has-child">                         ║
   ║                  <button class="...item__content ...submenu__toggle"> ║
   ║                    <span class="...item__label">Nos GEIQ</span>       ║
   ║                  <span class="...submenu-icon">▾</span>  ← SIBLING !  ║
   ║                  <ul class="...submenu-container">                    ║
   ║                                                                       ║
   ║  UX choisie : submenu toujours ouvert, chevron caché, "Nos GEIQ"      ║
   ║  devient label de section en petit-caps gris (non-cliquable).         ║
   ║                                                                       ║
   ║  Scoping : `.geiq56-burger-nav` partout pour ne pas dépendre de       ║
   ║  `.is-menu-open` (posée par l'Interactivity API WP au runtime).       ║
   ║  Le néon permanent du BOUTON burger lui-même (L6826+ de ce fichier)   ║
   ║  est CONSERVÉ intact.                                                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ─── 1. CONTAINER OVERLAY : fixed fullscreen, fade backdrop ────────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  background: transparent !important;
  padding: 0 !important;
  /* Masqué par défaut (Gutenberg pose .hidden-by-default) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
/* État ouvert — la classe is-menu-open est posée par l'Interactivity API */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container.is-menu-open,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container.has-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease, visibility 0s linear 0s;
}

/* Backdrop (pseudo-element full-screen flouté) */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 27, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  will-change: opacity;
  z-index: 0;
}


/* ─── 2. WRAPPER INTERMÉDIAIRE : le `responsive-close` est en fait un
       wrapper conteneur (pas un bouton ×). Il englobe le dialog. ──── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-close {
  position: absolute;
  inset: 0;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}


/* ─── 3. DIALOG : le vrai drawer 380px slide depuis la droite ────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-dialog {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: #ffffff;
  border-left: 1px solid rgba(26,23,27,.06);
  box-shadow: -20px 0 40px -10px rgba(26,23,27,.15), -2px 0 8px rgba(26,23,27,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  padding: 0 !important;
  margin: 0 !important;
  /* Slide-in animation */
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  transform: translateX(0);
}


/* ─── 4. BOUTON CLOSE × — rond en haut-droite ────────────────────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 18px;
  right: 18px;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(26,23,27,.12) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #2a2528 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-close:hover {
  background: rgba(227,0,67,.08) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  transform: rotate(90deg);
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-close svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}


/* ─── 5. CONTAINER CONTENT : le wrapper au-dessus de l'<ul> ────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ─── 6. LISTE DES ITEMS (<ul class="container">) ─────────────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  flex: 0 1 auto !important; /* v10.17.62 : était `height: 100%`, masquait les socials placés en sibling après le </ul>. shrink 1 = scroll interne si trop d'items, jamais d'overflow visible. */
  margin: 0 !important;
  padding: 24px 0 20px !important; /* v10.17.61 : 72→24 — close en top-right est 36px, 24px suffisent. Le logo en ::before garde sa marge propre. */
  list-style: none !important;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ─── 6 bis. SOCIALS en pied du drawer (v10.17.62) ─────────────
   Injectés via filter render_block_core/navigation comme sibling
   après le </ul>. flex column + margin-top auto = collés au bas
   du drawer, séparés par une fine border-top. */
body .site-header__inner .geiq56-burger-nav__socials {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  padding: 18px 24px 24px !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(26, 23, 27, 0.06) !important;
  background: transparent !important;
}
body .site-header__inner .geiq56-burger-nav__socials .social-links {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .site-header__inner .geiq56-burger-nav__socials .social-links__item {
  width: 44px !important;
  height: 44px !important;
}
body .site-header__inner .geiq56-burger-nav__socials .social-links__item svg {
  width: 18px !important;
  height: 18px !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav__socials {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbar custom discrète */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container::-webkit-scrollbar {
  width: 6px;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container::-webkit-scrollbar-track {
  background: transparent;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container::-webkit-scrollbar-thumb {
  background: rgba(26,23,27,.12);
  border-radius: 3px;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container::-webkit-scrollbar-thumb:hover {
  background: rgba(26,23,27,.22);
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container {
  scrollbar-width: thin;
  scrollbar-color: rgba(26,23,27,.12) transparent;
}

/* Bullets hors-jeu sur tous les <ul> et <li> du drawer */
body .site-header__inner .geiq56-burger-nav ul,
body .site-header__inner .geiq56-burger-nav li {
  list-style: none !important;
  list-style-type: none !important;
  padding-inline-start: 0 !important;
}
body .site-header__inner .geiq56-burger-nav li::marker {
  content: none !important;
  font-size: 0 !important;
}


/* ─── 7. ITEMS : <li> wrapper + <a>/<button> content ────────── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item {
  width: 100%;
  margin: 0;
  padding: 0 12px;
  /* Pour que le chevron sibling et le submenu-container sibling
     s'alignent correctement dans le <li> */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #2a2528 !important;
  background: transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  box-shadow: none !important;
  outline: none !important;
  will-change: background-color, color;
  transition: background-color .18s ease, color .18s ease !important;
}
/* Le span label à l'intérieur : ne pas le styler, laisser flex gap gérer */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover / focus */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content:hover,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content:focus-visible {
  background: rgba(227, 0, 67, 0.06) !important;
  color: var(--color-primary) !important;
}

/* Current item : fond saturé + trait rouge vertical à gauche */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.current-page-parent > .wp-block-navigation-item__content,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content {
  background: rgba(227, 0, 67, 0.10) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}


/* ─── 8. ICÔNE à gauche de chaque item via ::before (lucide mask) ── */

body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  opacity: .75;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 22px 22px;
  -webkit-mask-size: 22px 22px;
  transition: opacity .18s ease;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content:hover::before,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
  opacity: 1;
}

/* Mapping icônes par URL */
body .site-header__inner .geiq56-burger-nav a[href="/"]::before,
body .site-header__inner .geiq56-burger-nav a[href$="/accueil/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/le-dispositif/"]::before,
body .site-header__inner .geiq56-burger-nav a[href="/mission/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/candidats/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/entreprises/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12h.01'/><path d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/><path d='M22 13a18.15 18.15 0 0 1-20 0'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12h.01'/><path d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/><path d='M22 13a18.15 18.15 0 0 1-20 0'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/offres/"]::before,
body .site-header__inner .geiq56-burger-nav a[href*="/offres"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/actus/"]::before,
body .site-header__inner .geiq56-burger-nav a[href*="/actualites"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6Z'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/contact/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/geiq-btp/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
}
body .site-header__inner .geiq56-burger-nav a[href="/geiq-multi/"]::before {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>");
}


/* ─── 9. SUBMENU "Nos GEIQ" : item normal + chevron + accordéon ──
   v10.18.36 — refonte. Avant (v10.5.2) le parent has-child était un
   label uppercase non-cliquable + submenu toujours ouvert. Maintenant :
   - parent = item normal (même typo, même icône, même hover que les
     autres items)
   - chevron à droite, rotation 180° à l'ouverture
   - submenu collapsed par défaut, expand au clic (openSubmenusOnClick)
   ─────────────────────────────────────────────────────────────── */

/* Parent submenu : item plein, mêmes styles que les autres items.
   On hérite quasi tout de la règle générique .wp-block-navigation-item__content
   (section 7), on retire juste les overrides v10.5.2 qui forçaient un
   look "label de section". */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  font-size: 15px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #2a2528 !important;
  padding: 12px 16px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  gap: 14px !important;
  background: transparent !important;
  width: 100% !important;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"] {
  background: rgba(227, 0, 67, 0.06) !important;
  color: var(--color-primary) !important;
}

/* Icône du parent submenu (lucide "network" : 1 parent + 2 enfants reliés,
   parfait pour signifier "regroupement de 2 GEIQ"). On force le ::before
   sur la classe wp-block-navigation-submenu pour ne cibler que ce parent
   (au cas où d'autres has-child apparaîtraient un jour). */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content::before {
  display: block !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='16' y='16' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='9' y='2' width='6' height='6' rx='1'/><path d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/><path d='M12 12V8'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='16' y='16' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='9' y='2' width='6' height='6' rx='1'/><path d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/><path d='M12 12V8'/></svg>");
}

/* v10.18.66 — Chevron INTÉGRÉ DANS le button "Nos GEIQ" via ::after.
   Le chevron natif WP est un <span> sibling du <button>, ce qui rend
   son positionnement instable (flex container du <li> + autres rules).
   Solution propre : on cache le span natif et on dessine le chevron
   en pseudo-élément ::after du button → label + chevron forment UN seul
   élément, alignement et hover gérés naturellement.
   Reset au passage le flex:0 0 auto qui n'est plus nécessaire. */

/* 1. Cache le chevron span natif WP */
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon,
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* 2. Pseudo-élément chevron DANS le button has-child */
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after,
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle::after {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-left: 6px !important;
  flex-shrink: 0;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 4 6 8 10.5 4'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1.5 4 6 8 10.5 4'/></svg>") no-repeat center / contain;
  transition: transform .25s ease, opacity .18s ease;
}

/* 3. Rotation 180° + opacité pleine quand le submenu est ouvert */
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"]::after,
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
}

/* 4. Hover : on veut chevron rouge primary aussi (cohérent avec le label) */
html body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover::after {
  opacity: 1;
}

/* v10.18.63 — Testimonials carousel + cards en dark : neutraliser
   tous les fonds clairs résiduels qui peuvent rester gris parasitant. */
html[data-theme="dark"] body .testimonial,
html[data-theme="dark"] body .testimonial-card,
html[data-theme="dark"] body .testimonials-grid .testimonial,
html[data-theme="dark"] body .testimonials-marquee .testimonial,
html[data-theme="dark"] body .testimonials-carousel__slide,
html[data-theme="dark"] body .testimonials-carousel .testimonial,
html[data-theme="dark"] body .testimonial__quote,
html[data-theme="dark"] body .testimonial-card__quote {
  background: transparent !important;
  background-color: transparent !important;
}
/* v10.18.67 — couleur du texte du blockquote en dark (le fond opaque
   est défini plus bas dans la rule consolidée). */
html[data-theme="dark"] body .testimonials-carousel__slide blockquote.is-style-testimonial-hero,
html[data-theme="dark"] body .testimonials-carousel__slide .wp-block-quote {
  color: rgba(255, 255, 255, .92) !important;
}
html[data-theme="dark"] body .testimonials-carousel__slide blockquote p,
html[data-theme="dark"] body .testimonials-carousel__slide .wp-block-quote p {
  color: rgba(255, 255, 255, .92) !important;
}
html[data-theme="dark"] body .testimonials-carousel__slide blockquote cite,
html[data-theme="dark"] body .testimonials-carousel__slide .wp-block-quote cite {
  color: #ff6b8a !important;
}

/* Chevron juste à droite du label "Nos GEIQ". Avant : margin-left:auto
   poussait le chevron tout à droite de l'item, ce qui créait un grand
   vide entre le label et le chevron. Maintenant : 6px de marge, le
   chevron suit immédiatement le texte. */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  flex-shrink: 0;
  color: currentColor;
  opacity: .55;
  transition: transform .25s ease, opacity .18s ease;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"] .wp-block-navigation__submenu-icon,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
  opacity: 1;
}

/* Submenu container : caché par défaut, expand sur aria-expanded=true */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 2px !important;
  list-style: none !important;
  transform: none !important;
  flex: 1 0 100% !important; /* force passage à la ligne sous le parent */
  /* État replié (par défaut) */
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1),
              opacity .22s ease,
              visibility 0s linear .3s !important;
}
/* État ouvert : aria-expanded="true" sur le toggle button */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  max-height: 500px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: max-height .35s cubic-bezier(.4, 0, .2, 1),
              opacity .25s ease,
              visibility 0s linear 0s !important;
}

/* Items du submenu : indentation visuelle + un peu plus petits */
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  padding: 0 12px 0 24px !important;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 14px !important;
  padding: 10px 16px !important;
}
body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  width: 18px !important;
  height: 18px !important;
  mask-size: 18px 18px !important;
  -webkit-mask-size: 18px 18px !important;
}


/* ─── 10. MODE SOMBRE ────────────────────────────────────────── */

[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container::before {
  background: rgba(0,0,0,0.55);
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-dialog {
  background: #1a151a;
  border-left-color: rgba(255,255,255,.06);
  box-shadow: -20px 0 40px -10px rgba(0,0,0,.45), -2px 0 8px rgba(0,0,0,.25);
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content {
  color: rgba(255,255,255,.82) !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content:hover {
  background: rgba(227,0,67,0.18) !important;
  color: #ff6b8a !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  background: rgba(227,0,67,0.26) !important;
  color: #ff6b8a !important;
}
/* v10.18.36 — has-child = item normal, on n'override plus la couleur en dark.
   La couleur hérite du sélecteur générique 4 lignes plus haut. */
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-close {
  color: rgba(255,255,255,.7) !important;
  border-color: rgba(255,255,255,.15) !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-container-close:hover {
  background: rgba(227,0,67,.2) !important;
  border-color: #ff6b8a !important;
  color: #ff6b8a !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__container {
  scrollbar-color: rgba(255,255,255,.15) transparent;
}


/* ─── 11. RESPONSIVE mobile ≤ 640px : drawer full-width ─────── */

@media (max-width: 640px) {
  body .site-header__inner .geiq56-burger-nav .wp-block-navigation__responsive-dialog {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
  }
  body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item__content {
    font-size: 16px !important;
    padding: 14px 18px !important;
  }
}


/* ─── 12. REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body .site-header__inner .geiq56-burger-nav *,
  body .site-header__inner .geiq56-burger-nav *::before,
  body .site-header__inner .geiq56-burger-nav *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.18.49 — TESTIMONIALS CAROUSEL                                    ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Rendu de [geiq56_testimonials display="carousel"].                   ║
   ║  1 témoignage à la fois (style is-style-testimonial-hero), nav par    ║
   ║  flèches + dots, autoplay 7s, pause hover/focus. JS :                 ║
   ║  assets/js/testimonials-carousel.js                                   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.testimonials-carousel {
  position: relative;
  max-width: 920px;
  margin: 32px auto 0;
}
.testimonials-carousel__viewport {
  overflow: hidden;
}
.testimonials-carousel__track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.testimonials-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
/* La blockquote .is-style-testimonial-hero hérite de son style global
   (encadré + grand guillemet + cite rouge). Pas de styles locaux ici. */
.testimonials-carousel__slide .wp-block-quote.is-style-testimonial-hero {
  margin: 0;
}

/* ─── Navigation : flèches + dots ─── */
.testimonials-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 32px;
}
.testimonials-carousel__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  background: #fff;
  color: #2a2528;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.testimonials-carousel__btn:hover,
.testimonials-carousel__btn:focus-visible {
  background: var(--color-primary, #e30043);
  color: #fff;
  border-color: var(--color-primary, #e30043);
  outline: none;
}
.testimonials-carousel__btn:active {
  transform: scale(.95);
}
.testimonials-carousel__btn svg {
  width: 18px;
  height: 18px;
}
.testimonials-carousel__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.testimonials-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .15);
  padding: 0;
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease, border-radius .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.testimonials-carousel__dot.is-active {
  width: 28px;
  border-radius: 4px;
  background: var(--color-primary, #e30043);
}
.testimonials-carousel__dot:hover:not(.is-active),
.testimonials-carousel__dot:focus-visible:not(.is-active) {
  background: rgba(0, 0, 0, .35);
  outline: none;
}

/* Dark mode */
[data-theme="dark"] .testimonials-carousel__btn {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .82);
}
[data-theme="dark"] .testimonials-carousel__btn:hover,
[data-theme="dark"] .testimonials-carousel__btn:focus-visible {
  background: var(--color-primary, #e30043);
  color: #fff;
  border-color: var(--color-primary, #e30043);
}
[data-theme="dark"] .testimonials-carousel__dot {
  background: rgba(255, 255, 255, .2);
}
[data-theme="dark"] .testimonials-carousel__dot:hover:not(.is-active) {
  background: rgba(255, 255, 255, .4);
}

/* Mobile : flèches plus petites */
@media (max-width: 640px) {
  .testimonials-carousel {
    margin-top: 24px;
  }
  .testimonials-carousel__nav {
    gap: 12px;
    margin-top: 24px;
  }
  .testimonials-carousel__btn {
    width: 36px;
    height: 36px;
  }
  .testimonials-carousel__btn svg {
    width: 16px;
    height: 16px;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.18.38 — FIL D'ARIANE                                             ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Bande mince entre header et hero, hors homepage.                     ║
   ║  Typo + icônes lucide alignés avec le menu burger pour la cohérence.  ║
   ║  Auto-injectée via filter `the_content` (functions.php section 3.6).  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.geiq56-breadcrumb {
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #6f6469;
}
.geiq56-breadcrumb__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

/* v10.18.40 → v10.18.42 — breadcrumb dans le hero, en bas centré.
   Spec 0,2,0 (.site-main .section--hero-spoke) pour battre la règle
   ligne 4789 qui fixait padding-bottom à --section-gap-sm. */
.site-main .section--hero-spoke,
body .site-main .wp-block-group.section--hero-spoke {
  padding-bottom: clamp(140px, 14vw, 200px) !important;
}
.section--hero-spoke .geiq56-breadcrumb,
.wp-block-group.section--hero-spoke > .geiq56-breadcrumb {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 32px;
  width: 100%;
  padding: 0 24px;
  z-index: 3;
  pointer-events: auto;
}
.section--hero-spoke .geiq56-breadcrumb__list {
  justify-content: center;
}
.geiq56-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Séparateur chevron entre items (pas devant le 1er) */
.geiq56-breadcrumb__item:not(:first-child)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0 4px;
  background-color: #c2b8bb;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 14px 14px;
  -webkit-mask-size: 14px 14px;
  opacity: .65;
}

.geiq56-breadcrumb__link,
.geiq56-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.geiq56-breadcrumb__link:hover,
.geiq56-breadcrumb__link:focus-visible {
  color: var(--color-primary, #e30043);
  background: rgba(227, 0, 67, .06);
  outline: none;
}
.geiq56-breadcrumb__item--current .geiq56-breadcrumb__current {
  color: #2a2528;
  font-weight: 600;
  cursor: default;
}

.geiq56-breadcrumb__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: currentColor;
  opacity: .75;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-size: 16px 16px;
}
.geiq56-breadcrumb__link:hover .geiq56-breadcrumb__icon,
.geiq56-breadcrumb__item--current .geiq56-breadcrumb__icon {
  opacity: 1;
}

/* ── Mapping data-icon → SVG (mêmes pictos que le menu) ── */
.geiq56-breadcrumb [data-icon="home"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>");
}
.geiq56-breadcrumb [data-icon="book-open"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>");
}
.geiq56-breadcrumb [data-icon="users-round"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
.geiq56-breadcrumb [data-icon="briefcase"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12h.01'/><path d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/><path d='M22 13a18.15 18.15 0 0 1-20 0'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 12h.01'/><path d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/><path d='M22 13a18.15 18.15 0 0 1-20 0'/><rect width='20' height='14' x='2' y='6' rx='2'/></svg>");
}
.geiq56-breadcrumb [data-icon="file-text"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>");
}
.geiq56-breadcrumb [data-icon="newspaper"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6Z'/></svg>");
}
.geiq56-breadcrumb [data-icon="mail"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
}
.geiq56-breadcrumb [data-icon="link"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
}
.geiq56-breadcrumb [data-icon="grid"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>");
}
.geiq56-breadcrumb [data-icon="network"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='16' y='16' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='9' y='2' width='6' height='6' rx='1'/><path d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/><path d='M12 12V8'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='16' y='16' width='6' height='6' rx='1'/><rect x='2' y='16' width='6' height='6' rx='1'/><rect x='9' y='2' width='6' height='6' rx='1'/><path d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/><path d='M12 12V8'/></svg>");
}
.geiq56-breadcrumb [data-icon="help-circle"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>");
}
.geiq56-breadcrumb [data-icon="scale"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='M7 21h10'/><path d='M12 3v18'/><path d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/><path d='M7 21h10'/><path d='M12 3v18'/><path d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/></svg>");
}
.geiq56-breadcrumb [data-icon="shield"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>");
}
.geiq56-breadcrumb [data-icon="trending-up"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 7 13.5 15.5 8.5 10.5 2 17'/><polyline points='16 7 22 7 22 13'/></svg>");
}
.geiq56-breadcrumb [data-icon="file"] .geiq56-breadcrumb__icon {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/></svg>");
}

/* ── Dark mode ── */
[data-theme="dark"] .geiq56-breadcrumb {
  color: rgba(255, 255, 255, .55);
  border-bottom-color: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .geiq56-breadcrumb__item:not(:first-child)::before {
  background-color: rgba(255, 255, 255, .25);
}
[data-theme="dark"] .geiq56-breadcrumb__link:hover,
[data-theme="dark"] .geiq56-breadcrumb__link:focus-visible {
  color: #ff6b8a;
  background: rgba(227, 0, 67, .15);
}
[data-theme="dark"] .geiq56-breadcrumb__item--current .geiq56-breadcrumb__current {
  color: rgba(255, 255, 255, .92);
}

/* ── Mobile ≤ 640px : taille un peu plus petite, pas de wrap pour
        garder une ligne (scroll horizontal sur les longs chemins) ── */
@media (max-width: 640px) {
  .geiq56-breadcrumb {
    padding: 8px 16px;
    font-size: 12px;
  }
  .geiq56-breadcrumb__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .geiq56-breadcrumb__list::-webkit-scrollbar {
    display: none;
  }
  .geiq56-breadcrumb__icon {
    width: 14px;
    height: 14px;
    mask-size: 14px 14px;
    -webkit-mask-size: 14px 14px;
  }
  .site-main .section--hero-spoke,
  body .site-main .wp-block-group.section--hero-spoke {
    padding-bottom: clamp(120px, 26vw, 160px) !important;
  }
  .section--hero-spoke .geiq56-breadcrumb,
  .wp-block-group.section--hero-spoke > .geiq56-breadcrumb {
    bottom: 22px;
    padding: 0 16px;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.6.0 — CHROMA GRID : équipe en cards webapp (ReactBits-inspired)  ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Rendu du shortcode [geiq56_admins layout="chroma"].                  ║
   ║  Cards grayscale au repos, colorées sous le spotlight de la souris    ║
   ║  via mask radial-gradient piloté par --x/--y (GSAP).                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Wrapper de section dark qui héberge un chroma-grid */
.section--equipe-chroma,
.section--equipe-chroma.section {
  background: #111;
  padding: var(--section-gap, 96px) 0;
  position: relative;
  overflow: hidden;
}
.section--equipe-chroma.section--alt {
  background: #0d0b10;
  border-top: 1px solid rgba(255,255,255,.05);
}
.section--equipe-chroma .section-eyebrow,
.section--equipe-chroma .section-title,
.section--equipe-chroma .section-sub,
.section--equipe-chroma .section-lead {
  color: #fff;
}
.section--equipe-chroma .section-eyebrow {
  color: var(--color-primary, #e30043);
}
.section--equipe-chroma .section-sub,
.section--equipe-chroma .section-lead {
  color: rgba(255,255,255,.55);
}

/* Message empty (pas encore de membres côté client) */
.chroma-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.5em 1.2em;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 12px;
  color: rgba(255,255,255,.6);
  text-align: center;
  font-size: .925rem;
  line-height: 1.6;
}
.chroma-empty a {
  color: #ff6b8a;
  text-decoration: underline;
}

/* Grille principale + variables dynamiques --x / --y / --r */
.chroma-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 320px);
  grid-auto-rows: auto;
  justify-content: center;
  gap: .75rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 24px 24px;
  box-sizing: border-box;
  --x: 50%;
  --y: 50%;
  --r: 300px;
}
@media (max-width: 1100px) {
  .chroma-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); }
}
@media (max-width: 680px) {
  .chroma-grid { grid-template-columns: 1fr; }
}

/* Cards individuelles */
.chroma-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #333;
  transition: border-color .3s ease;
  background: var(--card-gradient, linear-gradient(150deg,#1a1a1a,#0e0e0e));
  cursor: default;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255,255,255,.25);
}
.chroma-card:hover { border-color: var(--card-border, #e30043); }
.chroma-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
}
.chroma-card:hover::before { opacity: 1; }

/* Image wrapper + avatar fallback */
.chroma-img-wrapper {
  position: relative;
  z-index: 1;
  padding: 10px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
}
.chroma-img-wrapper img,
.chroma-img-wrapper .chroma-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.chroma-avatar {
  width: 100%; height: 100%;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: 4rem;
  color: rgba(255,255,255,.9);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  letter-spacing: -.02em;
}

/* Infos pied de carte */
.chroma-info {
  position: relative;
  z-index: 1;
  padding: .75rem 1rem 1rem;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: .2rem;
  column-gap: .75rem;
}
.chroma-info .name {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  grid-column: 1;
  margin: 0;
  line-height: 1.2;
}
.chroma-info .handle {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  align-self: center;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.chroma-info .role {
  font-size: .8125rem;
  color: rgba(255,255,255,.6);
  grid-column: 1 / -1;
  margin: 0;
  line-height: 1.45;
}
.chroma-info .company {
  font-size: .75rem;
  color: rgba(255,255,255,.38);
  grid-column: 1 / -1;
  margin: 0;
  font-style: italic;
}

/* Les 2 couches magiques : overlay grayscale + fade au repos
   Pilotées par --x/--y/--r définis sur le parent .chroma-grid */
.chroma-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  backdrop-filter: grayscale(1) brightness(.72);
  -webkit-backdrop-filter: grayscale(1) brightness(.72);
  background: rgba(0,0,0,.001);
  mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 15%,
    rgba(0,0,0,.10) 30%, rgba(0,0,0,.22) 45%,
    rgba(0,0,0,.35) 60%, rgba(0,0,0,.50) 75%,
    rgba(0,0,0,.68) 88%, black 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    transparent 0%, transparent 15%,
    rgba(0,0,0,.10) 30%, rgba(0,0,0,.22) 45%,
    rgba(0,0,0,.35) 60%, rgba(0,0,0,.50) 75%,
    rgba(0,0,0,.68) 88%, black 100%
  );
}
.chroma-fade {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  backdrop-filter: grayscale(1) brightness(.72);
  -webkit-backdrop-filter: grayscale(1) brightness(.72);
  background: rgba(0,0,0,.001);
  mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    white 0%, white 15%,
    rgba(255,255,255,.9) 30%, rgba(255,255,255,.78) 45%,
    rgba(255,255,255,.65) 60%, rgba(255,255,255,.5) 75%,
    rgba(255,255,255,.32) 88%, transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--r) at var(--x) var(--y),
    white 0%, white 15%,
    rgba(255,255,255,.9) 30%, rgba(255,255,255,.78) 45%,
    rgba(255,255,255,.65) 60%, rgba(255,255,255,.5) 75%,
    rgba(255,255,255,.32) 88%, transparent 100%
  );
  opacity: 1;
  transition: opacity .25s ease;
}

/* Fallback si pas de JS — grille en couleur permanente */
.chroma-grid:not([data-chroma-init]) .chroma-overlay,
.chroma-grid:not([data-chroma-init]) .chroma-fade {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chroma-fade { opacity: 0; }
  .chroma-overlay { display: none; }
  .chroma-card::before { transition: none; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.7.0 — Formulaires CF7 + système de TABS CSS pur (:checked)       ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Page /contact/ : 3 onglets (Général / BTP / Multi) qui switchent    ║
   ║  entre 3 formulaires CF7 sans JavaScript (pattern radio:checked).    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── Bloc container des tabs ─── */
.contact-tabs {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* Les 3 radios cachés pilotent l'état des panels */
.contact-tabs input[type="radio"][name="contact-tab"] {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Row des labels/tabs */
.contact-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
  border-bottom: 2px solid rgba(26,23,27,.08);
  padding: 0;
}
.contact-tabs__nav label {
  flex: 1 1 auto;
  text-align: center;
  padding: 14px 20px;
  margin-bottom: -2px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-600, #54494d);
  border: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  user-select: none;
  white-space: nowrap;
}
.contact-tabs__nav label:hover {
  color: var(--color-primary, #e30043);
  background: rgba(227,0,67,.04);
}

/* Active state par radio:checked */
.contact-tabs__radio--general:checked ~ .contact-tabs__nav label[for="contact-tab-general"],
.contact-tabs__radio--btp:checked ~ .contact-tabs__nav label[for="contact-tab-btp"],
.contact-tabs__radio--multi:checked ~ .contact-tabs__nav label[for="contact-tab-multi"] {
  color: var(--color-primary, #e30043);
  background: #fff;
  border-color: rgba(26,23,27,.08);
  border-bottom-color: #fff;
}

/* Panels — masqués par défaut */
.contact-tabs__panel {
  display: none;
  padding: 32px clamp(20px, 4vw, 40px);
  background: #fff;
  border: 2px solid rgba(26,23,27,.08);
  border-top: none;
  border-radius: 0 10px 10px 10px;
}
/* Panel visible selon radio:checked */
.contact-tabs__radio--general:checked ~ #contact-panel-general,
.contact-tabs__radio--btp:checked     ~ #contact-panel-btp,
.contact-tabs__radio--multi:checked   ~ #contact-panel-multi {
  display: block;
}

/* Intro sous chaque panel */
.contact-tabs__intro {
  font-size: 15px;
  color: var(--color-neutral-600, #54494d);
  margin-bottom: 20px;
  line-height: 1.6;
}
.contact-tabs__intro strong {
  color: var(--color-neutral-900, #1a171b);
}


/* ─── Styles des champs CF7 ─── */
.cf7-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.cf7-field {
  display: block;
  margin-bottom: 14px;
}
.cf7-field--full {
  grid-column: 1 / -1;
}
.cf7-label {
  display: block;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-900, #1a171b);
  margin-bottom: 6px;
}
.cf7-req {
  color: var(--color-primary, #e30043);
  font-weight: 700;
}
.cf7-input,
.wpcf7-form input[type="text"].cf7-input,
.wpcf7-form input[type="email"].cf7-input,
.wpcf7-form input[type="tel"].cf7-input,
.wpcf7-form select.cf7-input,
.wpcf7-form textarea.cf7-input {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-900, #1a171b);
  background: #fff;
  border: 1.5px solid rgba(26,23,27,.15);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cf7-input:focus,
.wpcf7-form .cf7-input:focus {
  outline: none;
  border-color: var(--color-primary, #e30043);
  box-shadow: 0 0 0 4px rgba(227,0,67,.08);
}
.wpcf7-form textarea.cf7-input {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
.wpcf7-form select.cf7-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2354494d'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
  cursor: pointer;
}

/* Checkbox RGPD (Sprint A action #5, side-stripe retiré, bordure pleine 1px) */
.cf7-consent {
  margin: 22px 0 18px;
  padding: 14px 16px;
  background: rgba(26,23,27,.03);
  border: 1px solid var(--color-border, rgba(26, 23, 27, .08));
  border-radius: 8px;
}
.wpcf7-form .wpcf7-acceptance {
  display: block;
}
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-neutral-600, #54494d);
  cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary, #e30043);
  cursor: pointer;
}
.wpcf7-form .wpcf7-acceptance a {
  color: var(--color-primary, #e30043);
  text-decoration: underline;
}

/* Submit button */
.cf7-submit {
  margin-top: 18px;
  text-align: center;
}
.wpcf7-form input[type="submit"].btn,
.wpcf7-form input[type="submit"] {
  background: var(--color-primary, #e30043);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  min-width: 200px;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input[type="submit"]:hover:not(:disabled) {
  background: #c10038;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(227,0,67,.25);
}
.wpcf7-form input[type="submit"]:disabled {
  opacity: .55;
  cursor: wait;
}

/* Spinner CF7 pendant envoi */
.wpcf7-form .wpcf7-spinner {
  margin-left: 10px;
  vertical-align: middle;
}

/* Messages CF7 (succès / erreur) */
.wpcf7-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  border: none;
}
/* Sprint A action #5, side-stripes retirés, bordures pleines 1px sémantiques */
.wpcf7 form.sent .wpcf7-response-output {
  background: rgba(16,185,129,.08);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, .35);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  background: rgba(227,0,67,.06);
  color: #991b3a;
  border: 1px solid rgba(227, 0, 67, .35);
}
.wpcf7-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--color-primary, #e30043);
  margin-top: 4px;
  display: block;
}
.wpcf7-form .wpcf7-not-valid {
  border-color: var(--color-primary, #e30043) !important;
  background: rgba(227,0,67,.04);
}

/* Responsive mobile */
@media (max-width: 640px) {
  .contact-tabs__nav label {
    font-size: 12px;
    padding: 12px 12px;
  }
  .contact-tabs__panel {
    padding: 24px 18px;
  }
}

/* Dark mode */
[data-theme="dark"] .contact-tabs__nav {
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .contact-tabs__nav label {
  color: rgba(255,255,255,.6);
}
[data-theme="dark"] .contact-tabs__nav label:hover {
  color: #ff6b8a;
  background: rgba(227,0,67,.12);
}
[data-theme="dark"] .contact-tabs__radio--general:checked ~ .contact-tabs__nav label[for="contact-tab-general"],
[data-theme="dark"] .contact-tabs__radio--btp:checked ~ .contact-tabs__nav label[for="contact-tab-btp"],
[data-theme="dark"] .contact-tabs__radio--multi:checked ~ .contact-tabs__nav label[for="contact-tab-multi"] {
  color: #ff6b8a;
  background: #1a151a;
  border-color: rgba(255,255,255,.08);
  border-bottom-color: #1a151a;
}
[data-theme="dark"] .contact-tabs__panel {
  background: #1a151a;
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .cf7-label {
  color: rgba(255,255,255,.88);
}
[data-theme="dark"] .wpcf7-form .cf7-input {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
[data-theme="dark"] .wpcf7-form select.cf7-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.6)'><path d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
}
[data-theme="dark"] .cf7-consent {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .wpcf7-form .wpcf7-acceptance label {
  color: rgba(255,255,255,.7);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.8.0 — Jobs board : barre de filtres pills + grid + animations   ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Shortcode [geiq56_jobs_board] : page /offres/.                       ║
   ║  Filtres cliquables par type/métier/lieu/contrat — filtrage live JS.  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.jobs-board {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* ── Barre de filtres (top) ─────────────────────────────────────── */
.jobs-board__filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 28px;
  background: rgba(26,23,27,.025);
  border: 1px solid rgba(26,23,27,.08);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.jobs-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.jobs-filter-group__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-neutral-500, #8b7c82);
  min-width: 60px;
  flex-shrink: 0;
}
.jobs-filter-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jobs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-700, #4b575f);
  background: #fff;
  border: 1.5px solid rgba(26,23,27,.12);
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.jobs-pill:hover {
  border-color: var(--color-primary, #c41e3a);
  color: var(--color-primary, #c41e3a);
  transform: translateY(-1px);
}
.jobs-pill.is-active {
  background: var(--color-primary, #c41e3a);
  border-color: var(--color-primary, #c41e3a);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(196,30,58,.3);
}
.jobs-pill.is-active:hover {
  background: var(--color-primary-dark, #8b1228);
  border-color: var(--color-primary-dark, #8b1228);
  color: #fff;
}
.jobs-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-500, #8b7c82);
  background: rgba(26,23,27,.06);
  border-radius: 999px;
  margin-left: 4px;
}
.jobs-pill.is-active .jobs-pill__count {
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.18);
}

/* ── Stats bar (right side of filters) ─────────────────────────── */
.jobs-board__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid rgba(26,23,27,.06);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-neutral-600, #4b575f);
}
.jobs-board__count strong {
  color: var(--color-primary, #c41e3a);
  font-weight: 700;
  font-size: 15px;
}
.jobs-board__reset,
.jobs-board__reset-inline {
  padding: 6px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-600, #4b575f);
  background: transparent;
  border: 1px solid rgba(26,23,27,.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.jobs-board__reset:hover,
.jobs-board__reset-inline:hover {
  border-color: var(--color-primary, #c41e3a);
  color: var(--color-primary, #c41e3a);
  background: rgba(196,30,58,.04);
}

/* ── Empty state (pas de résultat après filtres) ─────────────── */
.jobs-board__empty {
  text-align: center;
  padding: 40px 20px;
  background: rgba(26,23,27,.02);
  border: 1px dashed rgba(26,23,27,.12);
  border-radius: 12px;
  margin-bottom: 20px;
}
.jobs-board__empty p {
  color: var(--color-neutral-500, #8b7c82);
  margin-bottom: 12px;
  font-size: 14px;
}

/* Responsive mobile (v10.18.68 — scroll horizontal renforcé visuellement,
   pills plus compactes, fade plus marqué, scroll-snap actif). */
@media (max-width: 740px) {
  .jobs-board__filters {
    padding: 16px;
    gap: 14px;
  }
  .jobs-filter-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .jobs-filter-group__label { min-width: 0; }
  /* v10.18.69 — flex wrap (avant : scroll horizontal qui n'était pas
     clair pour le user). Toutes les pills visibles, centrées. */
  .jobs-filter-group__pills {
    overflow: visible;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .jobs-pill {
    flex: 0 1 auto;
  }
  .jobs-board__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* v10.18.70 — Filtres /offres/ : selects natifs sur mobile, pills sur
   desktop. Sur mobile le picker iOS/Android prend le relais — UI
   familière + lisibilité parfaite quel que soit le nombre de valeurs. */

/* Desktop : selects cachés, pills visibles (default) */
.jobs-filter-group__select {
  display: none;
}

@media (max-width: 640px) {
  .jobs-board__filters {
    padding: 16px 14px !important;
    gap: 14px !important;
  }
  .jobs-filter-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .jobs-filter-group__label {
    text-align: left;
    font-size: .68rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
    color: var(--color-text-muted, #6f6469) !important;
    font-weight: 600;
    width: 100%;
    min-width: 0 !important;
    padding-left: 4px;
  }
  /* Mobile : on cache les pills, on montre le select natif */
  .jobs-filter-group__pills {
    display: none !important;
  }
  .jobs-filter-group__select {
    display: block !important;
    width: 100% !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 40px 12px 16px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text, #1a171b);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    /* Chevron lucide en mask-image, à droite */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a171b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .jobs-filter-group__select:focus,
  .jobs-filter-group__select:focus-visible {
    outline: none;
    border-color: var(--color-primary, #e30043);
    box-shadow: 0 0 0 3px rgba(227, 0, 67, .1);
  }
  /* État "valeur sélectionnée" (pas la première option vide) :
     bordure rouge primary subtile pour signifier filtre actif */
  .jobs-filter-group__select:not([value=""]):not(:invalid) {
    border-color: rgba(227, 0, 67, .35);
    color: var(--color-primary, #e30043);
    font-weight: 600;
  }
}

/* Dark mode */
[data-theme="dark"] .jobs-filter-group__select {
  background-color: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .92);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0eef1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
[data-theme="dark"] .jobs-filter-group__select:focus {
  border-color: var(--color-primary, #e30043);
  box-shadow: 0 0 0 3px rgba(227, 0, 67, .25);
}
[data-theme="dark"] .jobs-filter-group__select option {
  background: #1a171b;
  color: #f0eef1;
}

/* Dark mode */
[data-theme="dark"] .jobs-board__filters {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .jobs-pill {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}
[data-theme="dark"] .jobs-pill:hover {
  border-color: #ff6b8a;
  color: #ff6b8a;
}
[data-theme="dark"] .jobs-pill__count {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.58);
}
[data-theme="dark"] .jobs-board__stats {
  border-top-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.62);
}


/* ═══════════════════════════════════════════════════════════════════
   v10.15.8 — UNIFICATION CARTES CHIFFRES (bloc de vérité final)
   ───────────────────────────────────────────────────────────────────
   Décision Ju : toutes les cartes de stats du site (hero, stats-band
   "Notre impact", panel-stat switcher BTP/Multi, bilans sectoriels
   sur les pages GEIQ) doivent partager le MÊME design que les cartes
   du hero homepage.
   ─ Règles d'or :
     · Un seul endroit dans le CSS où ce design est défini (ICI).
     · Pas de `rotate`, jamais (décision client v10.15.2).
     · Hover = translateY(-4px) + scale(1.02) + shadow accentuée.
     · Chiffres animés via [data-counter] géré par header.js (déjà
       branché sur IntersectionObserver, threshold 0.4, easeOutCubic).
   Doc : docs/GUIDE-CARTES-HERO.md §11 (à jour v10.15.8).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens partagés (pour pouvoir ajuster en 1 endroit) ── */
:root {
  --stat-card-bg:            rgba(255, 255, 255, 0.96);
  --stat-card-border:        var(--color-neutral-200, #e6e3e9);
  --stat-card-border-hover:  rgba(196, 30, 58, 0.26);
  --stat-card-radius:        var(--radius-lg, 16px);
  --stat-card-shadow:        0 4px 16px rgba(26, 23, 27, 0.05),
                             0 1px 2px rgba(26, 23, 27, 0.03);
  --stat-card-shadow-hover:  0 18px 36px rgba(26, 23, 27, 0.10),
                             0 0 0 1.5px rgba(196, 30, 58, 0.18);
  --stat-card-padding:       20px 24px;
  --stat-val-color:          var(--color-neutral-900, #1a171b);
  --stat-label-color:        var(--color-neutral-500, #696573);
}
[data-theme="dark"] {
  --stat-card-bg:            rgba(255, 255, 255, 0.04);
  --stat-card-border:        rgba(255, 255, 255, 0.08);
  --stat-card-border-hover:  rgba(255, 143, 168, 0.28);
  --stat-card-shadow:        0 4px 16px rgba(0, 0, 0, 0.25),
                             0 1px 2px rgba(0, 0, 0, 0.18);
  --stat-card-shadow-hover:  0 18px 36px rgba(0, 0, 0, 0.45),
                             0 0 0 1.5px rgba(255, 143, 168, 0.22);
  --stat-val-color:          #f0eef1;
  --stat-label-color:        rgba(255, 255, 255, 0.5);
}

/* ── Base card — s'applique aux 3 familles ── */
.metric-card,
.metric-card.wp-block-group,
.stats-band__item,
.stats-band__item.wp-block-group,
.panel-stat,
.panel-stat.wp-block-group {
  background: var(--stat-card-bg) !important;
  border: 1.5px solid var(--stat-card-border) !important;
  border-radius: var(--stat-card-radius) !important;
  padding: var(--stat-card-padding) !important;
  box-shadow: var(--stat-card-shadow) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease,
    border-color .25s ease !important;
  will-change: transform;
}

/* ── Hover uniforme : lift + scale 1.02 + accent bordure + shadow ── */
.metric-card:hover,
.metric-card.wp-block-group:hover,
.hero__metrics .metric-card:hover,
.hero__metrics .metric-card.wp-block-group:hover,
.stats-band__item:hover,
.stats-band__item.wp-block-group:hover,
.panel-stat:hover,
.panel-stat.wp-block-group:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--stat-card-shadow-hover) !important;
  border-color: var(--stat-card-border-hover) !important;
}

/* ── Valeurs (.val) — typo unifiée sur les 3 familles ── */
.metric-card__val,
.stats-band__val,
.panel-stat__val {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--stat-val-color) !important;
  margin: 0 !important;
}

/* ── Labels — même couleur neutral-500, même taille ── */
.metric-card__label,
.stats-band__label,
.panel-stat__label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--stat-label-color) !important;
  margin: 6px 0 0 !important;
}
/* Sub-label (panel-stat seulement) — plus petit, opacity réduite */
.panel-stat__sub {
  font-size: 0.6875rem !important;
  color: var(--stat-label-color) !important;
  opacity: .7 !important;
  margin: 4px 0 0 !important;
}

/* ── Stats-band : réagencement horizontal uni, plus de bordure gris
      entre items (v7 imposait une fine séparation grise, incohérent
      avec le design unifié) ── */
.stats-band,
.stats-band.wp-block-group {
  gap: clamp(12px, 1.4vw, 20px) !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.stats-band__item,
.stats-band__item.wp-block-group {
  gap: 6px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* ── Panel-stat dans les panels BTP/Multi du switcher ──
      Le fond des panels est déjà rouge/gris foncé, donc la carte
      utilise un bg rgba plus opaque pour ressortir. Dark-hoisted via
      plus de traitement différencié .panel-stat--multi depuis v10.15.15 :
      avant, les panels Multi étaient sur fond rouge/sombre (fond clair
      avec textes blancs = piège d'illisibilité quand on a basculé en
      fond pâle). Maintenant ils utilisent exactement la même surface
      que les autres cartes via les tokens --stat-card-* / --surface-
      card-*. Un seul traitement pour toutes les panel-stat, quel que
      soit le panel parent. */
.panel-stat,
.panel-stat.wp-block-group {
  background: var(--stat-card-bg) !important;
  border-color: var(--stat-card-border) !important;
  color: var(--stat-card-text, var(--surface-card-text)) !important;
}

/* ── Reduced motion : pas de transform au hover ── */
@media (prefers-reduced-motion: reduce) {
  .metric-card:hover,
  .stats-band__item:hover,
  .panel-stat:hover {
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.15.9 — UNIFICATION DES PASTILLES D'ICÔNES (light + dark)
   ───────────────────────────────────────────────────────────────────
   Décision Ju (23/04) : "j'aime le rendu des icônes du hero en dark
   mode (translucide, rose néon sur fond noir), je veux ce comportement
   sur TOUTES les pastilles d'icônes du site."
   ───────────────────────────────────────────────────────────────────
   Stratégie token-based (pas de guerre de spécificité) :
     :root → valeurs light (rouge carmin 8% opacity, stroke primary)
     [data-theme="dark"] → valeurs dark (rose néon 12% opacity,
       stroke #ff8fa8 pour visibilité sur fond noir)
   ─ Les metric-card gardent leurs 4 variantes (red/green/dark/blue)
     mais reçoivent des overrides dark mode (translucence accentuée)
     pour un rendu cohérent sur fond noir.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --icon-pill-bg:         rgba(196, 30, 58, 0.08);
  --icon-pill-bg-hover:   rgba(196, 30, 58, 0.14);
  --icon-pill-color:      var(--color-primary, #c41e3a);
  --icon-pill-border:     transparent;
}
[data-theme="dark"] {
  --icon-pill-bg:         rgba(255, 143, 168, 0.12);
  --icon-pill-bg-hover:   rgba(255, 143, 168, 0.20);
  --icon-pill-color:      #ff8fa8;
  --icon-pill-border:     rgba(255, 143, 168, 0.18);
}

/* ── Application sur toutes les pastilles rouge de cartes du site ── */
.feature-icon,
.feature-card__icon,
.feature-icon--step,
.step-icon,
.card-icon,
.admin-member__icon,
.kpi-card__icon,
.topic-icon,
.faq-card__icon {
  background: var(--icon-pill-bg) !important;
  color: var(--icon-pill-color) !important;
  border: 1px solid var(--icon-pill-border) !important;
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s cubic-bezier(.34, 1.56, .64, 1) !important;
}
/* Hover = on augmente l'opacité du fond pour signaler la carte active */
.feature-card:hover .feature-icon,
.feature-card:hover .feature-card__icon,
.feature-card:hover .feature-icon--step,
.feature-card:hover .step-icon,
.feature-card:hover .card-icon,
.kpi-card:hover .kpi-card__icon,
.topic-card:hover .topic-icon,
.admin-member:hover .admin-member__icon,
.faq-card:hover .faq-card__icon {
  background: var(--icon-pill-bg-hover) !important;
}

/* ── Overrides dark-mode des 4 variantes metric-card__icon pour un
      rendu cohérent sur fond noir (opacité montée de .08 → .14, stroke
      rehaussé d'un cran de luminosité pour mieux se détacher) ── */
[data-theme="dark"] .metric-card__icon--red {
  background: rgba(255, 143, 168, 0.14) !important;
  color: #ff8fa8 !important;
  border: 1px solid rgba(255, 143, 168, 0.18) !important;
}
[data-theme="dark"] .metric-card__icon--green {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.18) !important;
}
[data-theme="dark"] .metric-card__icon--dark {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .metric-card__icon--blue {
  background: rgba(96, 165, 250, 0.14) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.18) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.15.11 — SURFACES DE CARTES : bloc robuste & futureproof
   ───────────────────────────────────────────────────────────────────
   Historique : v10.15.10 listait les classes en light ET dark et
   écrasait les traitements existants. Certaines cartes (geiq-step__body,
   faq-item .section--alt) n'étaient pas dans la liste → fond blanc
   résiduel en dark mode.
   ───────────────────────────────────────────────────────────────────
   v10.15.11 = nouvelle stratégie plus sûre :
     1. Les règles LIGHT MODE restent inchangées dans tout le fichier
        (bg blanc/clair spécifiques selon la carte, c'est voulu).
     2. En DARK MODE on applique un override qui bat toutes les
        règles hardcodées grâce à `!important`, via une LISTE EXHAUSTIVE
        des classes de cartes connues.
     3. Sélecteur = `[data-theme="dark"] :where(liste) {…}` :
          · `[data-theme="dark"]` = spec (0,1,0)
          · `:where(…)` = spec 0 (par définition CSS)
          · total = (0,1,0) + !important → bat toutes les règles
            hardcodées sans !important, même les `.foo.wp-block-group`.
     4. Exclusions explicites via `:not()` pour garder les traitements
        spéciaux (panel-stat--multi sombre sur fond rouge, newsletter
        glass, metric-card icons colorées).
     5. Ajouter une nouvelle carte dans le futur = 1 ligne dans la
        liste ci-dessous. Pas de cascade à débugger.
   Voir docs/GUIDE-CARTES-HERO.md §12 pour la procédure.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens (light + dark) ── */
:root {
  --surface-card-bg:      rgba(255, 255, 255, 0.96);
  --surface-card-hover:   rgba(255, 255, 255, 1);
  --surface-card-border:  var(--color-neutral-200, #e6e3e9);
  --surface-card-text:    var(--color-neutral-900, #1a171b);
  --surface-card-muted:   var(--color-neutral-500, #696573);
}
[data-theme="dark"] {
  --surface-card-bg:      rgba(255, 255, 255, 0.04);
  --surface-card-hover:   rgba(255, 255, 255, 0.07);
  --surface-card-border:  rgba(255, 255, 255, 0.08);
  --surface-card-text:    #f0eef1;
  --surface-card-muted:   rgba(255, 255, 255, 0.55);
}

/* ── DARK MODE ONLY — override unifié des surfaces de cartes ──
   Liste exhaustive (voir §12 du guide pour étendre). */
[data-theme="dark"] :where(
  .feature-card,
  .feature-card.wp-block-column,
  .feature-card.wp-block-group,
  .actu-card,
  .job-card,
  .testimonial,
  .testimonial.wp-block-column,
  .testimonial.wp-block-group,
  .testimonial-card,
  .faq-item,
  .admin-member,
  .kpi-card,
  .topic-card,
  .panel-stat,
  .panel-stat.wp-block-group,
  .metric-card,
  .metric-card.wp-block-group,
  .stats-band__item,
  .stats-band__item.wp-block-group,
  .geiq-step__body,
  .geiq-step__body.wp-block-group
):not(.newsletter-card) {
  background: var(--surface-card-bg) !important;
  border-color: var(--surface-card-border) !important;
  color: var(--surface-card-text) !important;
}

/* ── Textes des mêmes cartes en dark — titres / sub-labels ── */
[data-theme="dark"] :where(
  .feature-card .feature-title,
  .actu-card .actu-card__title,
  .job-card .job-card__title,
  .testimonial .testimonial__quote,
  .testimonial .testimonial__name,
  .faq-item summary,
  .admin-member .admin-member__name,
  .kpi-card .kpi-card__val,
  .topic-card .topic-card__title,
  .panel-stat .panel-stat__val,
  .metric-card__val,
  .stats-band__val,
  .geiq-step__body .geiq-step__title
) {
  color: var(--surface-card-text) !important;
}
[data-theme="dark"] :where(
  .feature-card .feature-text,
  .actu-card .actu-card__excerpt,
  .actu-card .actu-card__meta,
  .job-card .job-card__meta,
  .testimonial .testimonial__meta,
  .testimonial .testimonial__role,
  .faq-item p,
  .faq-item .faq-answer,
  .admin-member .admin-member__role,
  .kpi-card .kpi-card__sub,
  .topic-card .topic-card__sub,
  .panel-stat .panel-stat__sub,
  .panel-stat .panel-stat__label,
  .metric-card__label,
  .stats-band__label,
  .geiq-step__body .geiq-step__desc
) {
  color: var(--surface-card-muted) !important;
}

/* ── Hover dark — surface un poil plus opaque ── */
[data-theme="dark"] :where(
  .feature-card:hover,
  .actu-card:hover,
  .job-card:hover,
  .testimonial:hover,
  .faq-item[open],
  .faq-item:hover,
  .admin-member:hover,
  .kpi-card:hover,
  .topic-card:hover,
  .panel-stat:hover,
  .metric-card:hover,
  .stats-band__item:hover,
  .geiq-step__body:hover
) {
  background: var(--surface-card-hover) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.15.12 — RYTHME AUTO DES SECTIONS (zebra + spotlight)
   ───────────────────────────────────────────────────────────────────
   Décision Ju : "hero blanc avec spotlight, bloc d'en dessous gris
   sans spotlight, puis ça se répète. Je veux que ce soit automatique,
   pas besoin de tagger section--alt à la main à chaque nouveau bloc."
   ───────────────────────────────────────────────────────────────────
   Stratégie : on pilote le rythme par la POSITION de la section dans
   le <main>, pas par sa classe.
     · Section 1  = hero      → blanc + spotlight (traitement propre)
     · Section 2  = pair      → gris   sans spotlight
     · Section 3  = impair    → blanc  avec spotlight
     · Section 4  = pair      → gris   sans spotlight
     · Section 5  = impair    → blanc  avec spotlight
     · ... etc automatiquement
     · Footer     = hors main → blanc + spotlight (sa propre règle)
   Ajouter une section au milieu du post_content = le reste décale et
   le rythme se recale tout seul. Aucun `section--alt` à poser à la main.
   ───────────────────────────────────────────────────────────────────
   Exclusion volontaire : le hero (section 1, impair) a sa propre
   identité (transparent, hauteur vh, gradient) — on ne touche pas.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --section-neutral-bg: var(--color-neutral-0, #ffffff);
  --section-alt-bg:     var(--color-neutral-50, #f9fafb);
}
[data-theme="dark"] {
  --section-neutral-bg: #1a171b;
  --section-alt-bg:     #141114;
}

/* ── Le vrai conteneur parent des sections est .entry-content
      (wrapper Gutenberg injecté automatiquement entre <main> et les
      <section>). On cible donc `.entry-content > section` pour que
      :nth-of-type() compte les sections dans le bon contexte. ── */

/* Sections paires (2, 4, 6, …) : gris + pas de spotlight */
.entry-content > section:nth-of-type(even),
.entry-content > section.wp-block-group:nth-of-type(even),
.site-main > section:nth-of-type(even) {
  background: var(--section-alt-bg) !important;
}
.entry-content > section:nth-of-type(even) > .glow-canvas,
.entry-content > section:nth-of-type(even) .glow-canvas,
.site-main > section:nth-of-type(even) .glow-canvas {
  display: none !important;
}

/* Sections impaires (3, 5, 7, …) : blanc + spotlight actif
   Le hero (section 1) est exclu — il a son traitement dédié. */
.entry-content > section:nth-of-type(odd):not(.hero),
.entry-content > section.wp-block-group:nth-of-type(odd):not(.hero),
.site-main > section:nth-of-type(odd):not(.hero) {
  background: var(--section-neutral-bg) !important;
}
.entry-content > section:nth-of-type(odd):not(.hero) > .glow-canvas,
.site-main > section:nth-of-type(odd):not(.hero) > .glow-canvas {
  display: block !important;
}

/* ── Backward-compat : les classes historiques .section--alt /
      .section--newsletter / .section--actus continuent de marcher
      exactement pareil en cas de décalage de rythme voulu ponctuel.
      Elles ne sont PLUS nécessaires mais ne cassent rien. ── */

/* ── Overrides ponctuels : si tu veux FORCER un style spécifique
      sur une section sans compter sur sa position pair/impair.
      Le fond ET le spotlight sont liés ensemble via le MÊME sélecteur,
      donc impossible de les désynchroniser. ── */
.section--force-alt,
section.section--force-alt {
  background: var(--section-alt-bg) !important;
}
.section--force-alt .glow-canvas,
section.section--force-alt .glow-canvas {
  display: none !important;
}
.section--force-neutral,
section.section--force-neutral {
  background: var(--section-neutral-bg) !important;
}
.section--force-neutral .glow-canvas,
section.section--force-neutral .glow-canvas {
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.15.13 — FOOTER : miroir inversé de la dernière section du main
   ───────────────────────────────────────────────────────────────────
   Décision Ju : "le footer doit suivre la logique d'alternance de la
   page. Si au-dessus de lui bloc gris → footer blanc + spotlight.
   Si au-dessus blanc + spotlight → footer gris sans spotlight."
   ───────────────────────────────────────────────────────────────────
   Implémentation via CSS `:has()` (Chrome 105+, Safari 15.4+, Firefox
   121+ — largement supporté en 2026). Le <body> regarde la parité de
   la dernière <section> de .entry-content, et propage la règle au
   footer qui est pourtant hors .entry-content.
   ───────────────────────────────────────────────────────────────────
   Règle d'or : le fond ET le spotlight sont TOUJOURS liés au même
   sélecteur :has(). Impossible de les désynchroniser, même quand
   tu ajoutes/retires une section dans le post_content — la parité
   change et tout suit automatiquement.
   ─ Footer hors main (site-footer direct enfant du body) : le
     sélecteur body:has(…) .site-footer cible bien.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   v10.15.18 — PANELS DU SWITCHER : tokens unifiés (gen / btp / multi)
   ───────────────────────────────────────────────────────────────────
   Décision Ju : "le panel général (gris) doit avoir une chouille de
   transparence pour se différencier visuellement du multi, sans aller
   jusqu'au niveau multi (qui est très transparent)."
   ───────────────────────────────────────────────────────────────────
   Stratégie token-based comme pour les autres systèmes du site :
     · --panel-gen-*    : gris avec léger alpha (~82% d'opacité)
     · --panel-btp-*    : rouge teinté transparent (accent BTP)
     · --panel-multi-*  : gris foncé très transparent (fond qui respire)
   ─ Chaque panel du switcher tire son style d'UN seul groupe de 3
     tokens (bg / border / blur). Futureproof : ajouter un 4e panel
     = 3 lignes à rajouter dans :root + [data-theme="dark"] + un
     sélecteur en bas.
   ─ Appliqué sur la home (switcher principal) et sur /le-dispositif/
     (même shortcode [geiq56_switcher]) + toute page future qui
     l'utilisera.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Panel GÉNÉRAL — transparence marquée (~67% opacité)
     v10.15.20 : -10 points supplémentaires (Ju). Le panel gen
     garde sa différence vs le multi (0.055) tout en laissant
     bien respirer le fond de section derrière. */
  --panel-gen-bg:     rgba(249, 250, 251, 0.67);
  --panel-gen-border: rgba(26, 23, 27, 0.08);
  --panel-gen-blur:   14px;

  /* Panel BTP — accent rouge teinté */
  --panel-btp-bg:     rgba(227, 0, 67, 0.055);
  --panel-btp-border: rgba(227, 0, 67, 0.18);
  --panel-btp-blur:   10px;

  /* Panel MULTI — très transparent (fond qui respire le plus) */
  --panel-multi-bg:     rgba(45, 42, 50, 0.055);
  --panel-multi-border: rgba(45, 42, 50, 0.14);
  --panel-multi-blur:   10px;
}
[data-theme="dark"] {
  --panel-gen-bg:     rgba(255, 255, 255, 0.03);
  --panel-gen-border: rgba(255, 255, 255, 0.09);
  --panel-gen-blur:   14px;

  --panel-btp-bg:     rgba(227, 0, 67, 0.08);
  --panel-btp-border: rgba(255, 143, 168, 0.18);
  --panel-btp-blur:   12px;

  --panel-multi-bg:     rgba(255, 255, 255, 0.03);
  --panel-multi-border: rgba(255, 255, 255, 0.08);
  --panel-multi-blur:   12px;
}

/* Application — les sélecteurs matchent toutes les instances du site */
.geiq-panel--gen .panel-inner--gen {
  background: var(--panel-gen-bg);
  border-color: var(--panel-gen-border);
  backdrop-filter: blur(var(--panel-gen-blur));
  -webkit-backdrop-filter: blur(var(--panel-gen-blur));
}
.geiq-panel--btp .panel-inner {
  background: var(--panel-btp-bg);
  border-color: var(--panel-btp-border);
  backdrop-filter: blur(var(--panel-btp-blur));
  -webkit-backdrop-filter: blur(var(--panel-btp-blur));
}
.geiq-panel--multi .panel-inner {
  background: var(--panel-multi-bg);
  border-color: var(--panel-multi-border);
  backdrop-filter: blur(var(--panel-multi-blur));
  -webkit-backdrop-filter: blur(var(--panel-multi-blur));
}


/* ── Défaut : le footer a son spotlight CSS-radial-gradient activé
      (piloté par page-glow.js via --glow-mx/my/a). --footer-glow-a = 1
      signifie "spotlight visible quand la souris est dedans". ── */
:root {
  --footer-glow-a: 1;
}

/* ── Cas 1 : dernière section du main = PAIRE (donc grise, pas de
      spotlight). Le footer fait le miroir : BLANC + spotlight ACTIF.
      --footer-glow-a: 1 (= intensité max du gradient). */
body:has(.entry-content > section:last-of-type:nth-of-type(even)) .site-footer {
  --footer-bg: var(--section-neutral-bg);
  --footer-glow-a: 1;
}

/* ── Cas 2 : dernière section du main = IMPAIRE (blanc + spotlight).
      Le footer fait le miroir : GRIS + spotlight DÉSACTIVÉ.
      --footer-glow-a: 0 (= gradient invisible quelle que soit la
      position de la souris). Le JS continue à tourner dans le vide,
      le CSS tue simplement le rendu du spotlight. */
body:has(.entry-content > section:last-of-type:nth-of-type(odd)) .site-footer {
  --footer-bg: var(--section-alt-bg);
  --footer-glow-a: 0;
}

/* ── Fallback pour navigateurs ne supportant pas :has() ──
      Zéro --footer-glow-a = fond gris sans spotlight (v10.15.6). */
@supports not (selector(:has(*))) {
  .site-footer { --footer-glow-a: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.0 — /le-dispositif/ : schéma GEIQ trio + vidéo + label
   ───────────────────────────────────────────────────────────────────
   Design : moderne, animé, responsive. Désaturé en dark mode pour
   éviter le rouge brûlant. Tokens partagés --primary / --primary-dark.
   ═══════════════════════════════════════════════════════════════════ */

/* ── (1) Schéma trio GEIQ au centre ───────────────────────────── */
.geiq-schema-trio {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
}
.geiq-schema-trio__inner {
  position: relative;
  min-height: 720px;                 /* +80px encore : garantit qu'acteur 1 + hub + acteurs 2/3 ne se chevauchent jamais */
  display: block;
  color: var(--color-neutral-400);
}
[data-theme="dark"] .geiq-schema-trio__inner { color: rgba(255,255,255,.35); }

/* Lignes SVG dash-animées */
.geiq-schema-trio__lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.trio-line {
  stroke-dashoffset: 100;
  opacity: 0;
  animation: trio-line-in .9s cubic-bezier(.22,1,.36,1) forwards;
}
.trio-line--1 { animation-delay: .35s; }
.trio-line--2 { animation-delay: .55s; }
.trio-line--3 { animation-delay: .75s; }
@keyframes trio-line-in {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  100% { stroke-dashoffset: 0;   opacity: .55; }
}

/* Hub central : cercle GEIQ avec pulsations.
   top: 50% + translate(-50%, -50%) = centre vertical du container.
   Avec min-height 720px → centre à 360px. Hub 180-200px → s'étend de
   260 à 460 px, ce qui laisse 250px pour l'acteur 1 au-dessus et
   ~250px pour les acteurs 2/3 en-dessous. Zéro chevauchement possible. */
.trio-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 17vw, 190px);  /* légèrement réduit pour aérer */
  aspect-ratio: 1;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  animation: trio-hub-in .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes trio-hub-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.trio-hub__core {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, var(--color-primary, #c41e3a) 0%, var(--color-primary-dark, #8b1228) 100%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  box-shadow:
    0 0 0 6px rgba(196,30,58,.08),
    0 0 0 14px rgba(196,30,58,.04),
    0 20px 60px rgba(196,30,58,.25),
    inset 0 2px 0 rgba(255,255,255,.3);
}
.trio-hub__label {
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.trio-hub__num {
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1;
  opacity: .85;
}
.trio-hub__sub {
  margin: 14px 0 0;
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-neutral-500, #696573);
  max-width: 220px;
  line-height: 1.35;
}
[data-theme="dark"] .trio-hub__sub { color: rgba(255,255,255,.55); }

/* Pulsations concentriques */
.trio-hub__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(196,30,58,.18);
  z-index: 1;
  animation: trio-pulse 3.5s cubic-bezier(.22,1,.36,1) infinite;
  pointer-events: none;
}
.trio-hub__pulse--2 { animation-delay: 1.75s; }
@keyframes trio-pulse {
  0%   { transform: scale(1);   opacity: .35; }
  80%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .trio-hub__pulse { animation: none; opacity: 0; }
}

/* Acteurs autour du hub */
.trio-actor {
  position: absolute;
  width: clamp(170px, 22vw, 240px);
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  animation: trio-actor-in .65s cubic-bezier(.22,1,.36,1) forwards;
  z-index: 3;
}
.trio-actor--1 { top: 0;    left: 50%; transform: translate(-50%, 0); animation-delay: .45s; }
.trio-actor--2 { bottom: 8px; left: 0;   animation-delay: .65s; }
.trio-actor--3 { bottom: 8px; right: 0;  animation-delay: .85s; }
@keyframes trio-actor-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* .trio-actor--1 a un transform complexe (centrage horizontal) :
   on surcharge sa keyframe de sortie */
.trio-actor--1 {
  animation-name: trio-actor-1-in;
}
@keyframes trio-actor-1-in {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.trio-actor__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--icon-pill-bg, rgba(196,30,58,.08));
  color: var(--icon-pill-color, var(--color-primary));
  margin-bottom: 10px;
  border: 1px solid var(--icon-pill-border, transparent);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .25s ease;
}
.trio-actor:hover .trio-actor__icon {
  transform: scale(1.1);
  background: var(--icon-pill-bg-hover, rgba(196,30,58,.14));
}
.trio-actor__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--color-neutral-900, #1a171b);
}
[data-theme="dark"] .trio-actor__title { color: #f0eef1; }
.trio-actor__desc {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--color-neutral-500, #696573);
  margin: 0;
}
[data-theme="dark"] .trio-actor__desc { color: rgba(255,255,255,.55); }
/* v10.17.1 — trio-actor__edge supprimés : labels sur connecteurs
   chevauchaient les cartes sur desktop. Les cartes acteurs
   (titre + description) expliquent déjà les relations. */

.geiq-schema-trio__lead {
  max-width: 640px;
  margin: clamp(32px, 5vw, 64px) auto 0;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-neutral-600, #4a454f);
}
[data-theme="dark"] .geiq-schema-trio__lead { color: rgba(255,255,255,.72); }
.geiq-schema-trio__lead em {
  font-style: italic;
  color: var(--color-primary);
}

/* ── Responsive mobile : stack vertical plutôt que radial ────── */
@media (max-width: 899px) {
  .geiq-schema-trio__inner {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 12px 0;
  }
  .geiq-schema-trio__lines { display: none; }
  .trio-hub {
    position: static;
    transform: none;
    width: 150px;
    margin: 0 auto;
    animation-delay: .1s;
  }
  .trio-hub__core { box-shadow:
    0 0 0 5px rgba(196,30,58,.08),
    0 15px 40px rgba(196,30,58,.20),
    inset 0 2px 0 rgba(255,255,255,.3);
  }
  .trio-actor {
    position: static !important;
    width: 100% !important;
    max-width: 360px;
    padding: 18px 20px;
    background: var(--surface-card-bg, rgba(255,255,255,.96));
    border: 1.5px solid var(--surface-card-border, #e6e3e9);
    border-radius: var(--radius-lg, 16px);
    transform: none !important;
  }
  .trio-actor--1, .trio-actor--2, .trio-actor--3 {
    animation-name: trio-actor-m-in;
  }
  @keyframes trio-actor-m-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .trio-actor__edge { display: none !important; }
}


/* ── (2) Vidéo embed responsive ───────────────────────────────── */
.geiq-video {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}
.geiq-video__wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;
  background: var(--color-neutral-900, #1a171b);
  box-shadow:
    0 20px 60px rgba(26,23,27,.14),
    0 8px 24px rgba(26,23,27,.06);
}
.geiq-video__wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.geiq-video__wrap--empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.6);
  background: linear-gradient(135deg, #2a262e 0%, #1a171b 100%);
}
.geiq-video__empty-text {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  text-align: center;
  max-width: 280px;
  margin: 0;
}


/* ── (3) Label GEIQ — cachet officiel + 3 critères ────────────── */

.geiq-label-badge {
  max-width: 1040px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0 clamp(16px, 3vw, 32px);
}
.geiq-label-badge__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* v10.48.0 — Le retour client remplace uniquement le cachet par les
   trois photographies provisoires, sans modifier le contenu du label. */
.geiq-label-badge__grid--gallery {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
}
.geiq-label-badge__gallery {
  width: 100%;
  aspect-ratio: 1.12 / 1;
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(112px, .72fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(227, 0, 67, .16);
  border-radius: var(--radius-lg, 18px);
  background:
    radial-gradient(circle at 8% 18%, rgba(227, 0, 67, .1), transparent 36%),
    var(--surface-card-bg, #fff);
  box-shadow: 0 20px 52px rgba(26, 23, 27, .13);
  box-sizing: border-box;
}
.geiq-label-badge__photo {
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 12px;
  background: rgba(227, 0, 67, .08);
}
.geiq-label-badge__photo--featured {
  grid-row: 1 / -1;
}
.geiq-label-badge__photo::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(26, 23, 27, .2) 100%);
}
.geiq-label-badge__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.geiq-label-badge__photo--featured img {
  object-position: 50% 50%;
}
.geiq-label-badge .geiq-label-badge__photo-status {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 5px 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: var(--radius-full, 999px);
  background: rgba(184, 0, 47, .94);
  box-shadow: 0 7px 20px rgba(26, 23, 27, .2);
  color: #fff;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .45rem !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-theme="dark"] .geiq-label-badge__gallery {
  border-color: rgba(227, 0, 67, .28);
  background:
    radial-gradient(circle at 8% 18%, rgba(227, 0, 67, .15), transparent 38%),
    var(--surface-card-bg, #242126);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34);
}

@media (max-width: 960px) {
  .geiq-label-badge__grid--gallery {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .geiq-label-badge__gallery {
    width: min(100%, 720px);
    aspect-ratio: 16 / 7;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .geiq-label-badge__gallery {
    aspect-ratio: auto;
    padding: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 8px;
    border-radius: var(--radius-md, 12px);
  }
  .geiq-label-badge__photo--featured {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .geiq-label-badge__photo:not(.geiq-label-badge__photo--featured) {
    aspect-ratio: 1;
  }
}

/* Le cachet : double cercle + texte circulaire */
.geiq-label-badge__seal {
  position: relative;
  width: 220px; height: 220px;
  margin: 0 auto;
}
.seal-ring {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg, var(--color-primary, #c41e3a) 0%, var(--color-primary-dark, #8b1228) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 6px rgba(196,30,58,.08),
    0 20px 50px rgba(196,30,58,.28),
    inset 0 2px 0 rgba(255,255,255,.25);
  animation: seal-in 1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes seal-in {
  from { opacity: 0; transform: scale(.85) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.seal-circle-text {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.seal-text {
  fill: rgba(255,255,255,.85);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
}
.seal-core {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 22px 8px;
}
.seal-core__label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .85;
  font-weight: 600;
}
.seal-core__brand {
  display: block;
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 4px 0;
}
.seal-core__year {
  display: block;
  font-size: .72rem;
  opacity: .78;
  font-style: italic;
  letter-spacing: .05em;
}

/* Contenu texte + critères */
.geiq-label-badge__lead {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
  color: var(--color-neutral-700, #33313a);
  margin: 0 0 20px;
}
[data-theme="dark"] .geiq-label-badge__lead { color: rgba(255,255,255,.7); }
.geiq-label-badge__lead strong { color: var(--color-primary); font-weight: 600; }

.geiq-label-badge__criteria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* v10.17.23 — Cards critères : bordure rouge statique + padding forcé.
   L'aurora border animée a été abandonnée (trop flashy, pas cohérent).
   On unifie light + dark avec une bordure rouge discrète, hover lift.

   Padding en !important : une règle générique héritée (core-list.css
   ou Ollie parent) `.entry-content li:first-child { padding-top: 0 }`
   écrasait le padding-top de la card "Insertion" (première de la liste).
   C'est LA cause du décalage vertical qui faisait passer l'icône
   "trop haute" pendant plusieurs itérations — rien à voir avec le SVG.
   Leçon : avant de modifier un SVG, toujours checker en DevTools si
   le computed style matche ce qu'on écrit. */
.geiq-label-badge__criteria > li {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px !important;
  border-radius: var(--radius-md, 12px);
  background: var(--surface-card-bg, rgba(255,255,255,.96));
  border: 1px solid rgba(227, 0, 67, .22);
  transition:
    transform .35s ease,
    border-color .3s ease,
    box-shadow .35s ease;
}

.geiq-label-badge__criteria > li:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 0, 67, .42);
  box-shadow: 0 8px 24px rgba(227, 0, 67, .12);
}

/* v10.17.20 — Icon pill 40×40 avec SVG 22×22 centré (taille native).
   Le padding CSS est retiré : SVG garde ses dimensions HTML 22×22 et
   le flex center le positionne au pixel au centre du 40×40 container.
   Avec les rayons de la cible ramenés à 9/5.5/2 (dans le pattern PHP),
   les 3 icônes ont désormais la même proportion visuelle dans leurs
   pills respectives. */
.criteria-icon {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--icon-pill-bg);
  color: var(--icon-pill-color);
  border: 1px solid var(--icon-pill-border, transparent);
  border-radius: 10px;
  box-sizing: border-box;
}
.criteria-icon > svg {
  display: block;
  /* Pas de width/height en CSS : on garde les 22×22 de l'attribut HTML,
     le SVG est centré dans le 40×40 par le flex parent. */
}
.criteria-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-neutral-900);
}
[data-theme="dark"] .criteria-title { color: #f0eef1; }
.criteria-desc {
  font-size: .75rem;
  line-height: 1.4;
  color: var(--color-neutral-500);
}
[data-theme="dark"] .criteria-desc { color: rgba(255,255,255,.55); }

/* Responsive mobile */
@media (max-width: 767.98px) {
  .geiq-label-badge__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .geiq-label-badge__lead { text-align: left; }
  .geiq-label-badge__criteria {
    grid-template-columns: 1fr;
  }
  .geiq-label-badge__criteria > li { text-align: left; }
}

/* v10.51.0 — Mission : à l'échelle tablette, centre la troisième carte
   de la méthode au lieu de laisser un vide visuel dans la grille 2 + 1. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.page-id-30699 .section--why .features-grid > :last-child {
    grid-column: 1 / -1;
    width: calc((100% - var(--space-3, 24px)) / 2) !important;
    justify-self: center;
  }
}

/* v10.17.22 — Dark mode : on garde la même bordure rouge.
   Seule différence : le background hérite de --surface-card-bg qui
   est sombre en dark, donc la lecture du badge reste propre sans
   retoucher les opacités rouges. */
[data-theme="dark"] .geiq-label-badge__criteria > li {
  background: var(--surface-card-bg);
}

/* Respect prefers-reduced-motion : neutralise le lift du hover. */
@media (prefers-reduced-motion: reduce) {
  .geiq-label-badge__criteria > li:hover {
    transform: none;
  }
}

/* v10.49.0 — Composition V3 validée pour le bloc « Label national ».
   Le panneau carmin réunit le texte à gauche et la galerie 1 + 2 à droite.
   Les trois critères restent inchangés et passent sous la scène principale. */
body .section--dispositif-label > .container {
  max-width: none !important;
  padding-inline: 0 !important;
}

.geiq-label-badge.geiq-label-badge--v3 {
  width: min(1280px, calc(100% - 80px));
  max-width: none;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0;
  box-sizing: border-box;
}

.geiq-label-badge--v3 .geiq-label-badge__stage {
  height: clamp(570px, 45vw, 620px);
  min-height: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(310px, .76fr) minmax(0, 1.34fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xl, 24px);
  background: var(--color-primary, #e30043);
  box-shadow: 0 30px 76px -46px rgba(92, 0, 29, .64);
  box-sizing: border-box;
}

.geiq-label-badge--v3 .geiq-label-badge__content {
  min-width: 0;
  padding: clamp(26px, 2.7vw, 36px);
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(30px, 3vw, 42px);
  align-items: start;
  align-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  text-align: left;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-heading {
  min-width: 0;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-lead {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  color: inherit;
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: clamp(2.55rem, 3.5vw, 3.25rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
  text-align: left !important;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-lead span {
  display: block;
  color: rgba(255, 255, 255, .82);
  font-style: italic;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-details {
  max-width: 29ch;
  align-self: start;
  display: grid;
  gap: 14px;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-body,
.geiq-label-badge--v3 .geiq-label-badge__copy-axes {
  margin: 0 !important;
  text-align: left !important;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-body {
  max-width: 29ch;
  color: rgba(255, 255, 255, .91);
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  font-weight: 450;
  line-height: 1.62;
}

.geiq-label-badge--v3 .geiq-label-badge__copy-axes {
  max-width: 29ch;
  color: rgba(255, 255, 255, .84);
  font-size: .94rem;
  font-weight: 520;
  line-height: 1.5;
}

.geiq-label-badge--v3 .geiq-label-badge__content strong {
  color: inherit;
  font-weight: 780;
}

.geiq-label-badge--v3 .geiq-label-badge__gallery {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(290px, 1.15fr) minmax(210px, .85fr);
  gap: 10px;
  overflow: hidden;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.geiq-label-badge--v3 .geiq-label-badge__photo {
  border-color: rgba(255, 255, 255, .58);
  border-radius: 13px;
}

.geiq-label-badge--v3 .geiq-label-badge__photo--featured {
  grid-column: 1 / -1;
  grid-row: auto;
}

.geiq-label-badge--v3 .geiq-label-badge__photo-status {
  top: 12px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 8px 11px;
  font-size: .66rem !important;
  letter-spacing: .07em;
}

.geiq-label-badge--v3 .geiq-label-badge__criteria {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
}

.geiq-label-badge--v3 .geiq-label-badge__criteria > li {
  min-width: 0;
  min-height: 214px;
  display: block;
  padding: clamp(26px, 2.8vw, 36px) !important;
  border: 1px solid rgba(227, 0, 67, .18);
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-card-bg, #fff);
  box-shadow: 0 22px 56px -42px rgba(26, 23, 27, .44);
  box-sizing: border-box;
}

.geiq-label-badge--v3 .geiq-label-badge__criterion-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}

.geiq-label-badge--v3 .criteria-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 0;
  border-radius: var(--radius-md, 12px);
  background: var(--color-primary-soft, rgba(227, 0, 67, .08));
  color: var(--color-primary, #e30043);
}

.geiq-label-badge--v3 .criteria-icon > svg {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.geiq-label-badge--v3 .criteria-title {
  display: block;
  margin: 0;
  color: var(--color-neutral-900, #1a171b);
  font-family: var(--font-display, 'Instrument Serif', serif);
  font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  line-height: 1.05;
}

.geiq-label-badge--v3 .criteria-desc {
  display: block;
  max-width: 28ch;
  margin: 22px 0 0;
  color: var(--color-neutral-500, #6b6570);
  font-size: .96rem;
  line-height: 1.58;
}

[data-theme="dark"] .geiq-label-badge--v3 .geiq-label-badge__stage {
  background: var(--color-primary-dark, #b80035);
}

[data-theme="dark"] .geiq-label-badge--v3 .geiq-label-badge__gallery {
  border: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .geiq-label-badge--v3 .geiq-label-badge__criteria > li {
  border-color: rgba(255, 107, 138, .22);
}

[data-theme="dark"] .geiq-label-badge--v3 .criteria-icon {
  background: rgba(227, 0, 67, .17);
  color: #ff8da5;
}

[data-theme="dark"] .geiq-label-badge--v3 .criteria-title {
  color: #f0eef1;
}

[data-theme="dark"] .geiq-label-badge--v3 .criteria-desc {
  color: rgba(255, 255, 255, .62);
}

@media (max-width: 1100px) {
  .geiq-label-badge.geiq-label-badge--v3 {
    width: min(1080px, calc(100% - 48px));
  }

  .geiq-label-badge--v3 .geiq-label-badge__stage {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  }

  .geiq-label-badge--v3 .geiq-label-badge__gallery {
    grid-template-rows: minmax(260px, 1.1fr) minmax(190px, .9fr);
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria {
    gap: 16px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria > li {
    padding: 26px 24px !important;
  }
}

@media (max-width: 980px) {
  .geiq-label-badge.geiq-label-badge--v3 {
    width: min(780px, calc(100% - 40px));
  }

  .geiq-label-badge--v3 .geiq-label-badge__stage {
    height: auto;
    min-height: 0;
    padding: 14px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__content {
    min-height: 292px;
    padding: 32px;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    grid-template-rows: 1fr;
    grid-template-areas: "heading details";
    column-gap: 36px;
    align-items: center;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-heading {
    grid-area: heading;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-lead {
    font-size: clamp(2.6rem, 6vw, 3.25rem);
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-details {
    max-width: 34ch;
    grid-area: details;
    align-self: center;
  }

  .geiq-label-badge--v3 .geiq-label-badge__gallery {
    width: 100%;
    height: 534px;
    aspect-ratio: auto;
    margin-inline: 0;
    grid-template-rows: minmax(300px, 1.15fr) minmax(220px, .85fr);
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria {
    gap: 14px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria > li {
    min-height: 204px;
    padding: 24px 20px !important;
  }

  .geiq-label-badge--v3 .geiq-label-badge__criterion-heading {
    gap: 14px;
  }

  .geiq-label-badge--v3 .criteria-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .geiq-label-badge--v3 .criteria-title {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
  }
}

@media (max-width: 767px) {
  .geiq-label-badge.geiq-label-badge--v3 {
    width: calc(100% - 40px);
  }

  .geiq-label-badge--v3 .geiq-label-badge__stage {
    padding: 10px;
    gap: 10px;
    border-radius: 16px;
    text-align: left;
  }

  .geiq-label-badge--v3 .geiq-label-badge__content {
    min-height: 0;
    padding: 28px 22px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "heading"
      "details";
    gap: 24px;
    align-items: start;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-heading {
    width: 100%;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-lead {
    font-size: clamp(2.25rem, 10vw, 2.8rem);
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-details {
    max-width: 32ch;
    align-self: start;
    gap: 12px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-body {
    font-size: 1rem;
    line-height: 1.62;
  }

  .geiq-label-badge--v3 .geiq-label-badge__copy-axes {
    font-size: .9rem;
  }

  .geiq-label-badge--v3 .geiq-label-badge__gallery {
    height: auto;
    grid-template-rows: auto;
    gap: 8px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__photo--featured {
    aspect-ratio: 4 / 3;
  }

  .geiq-label-badge--v3 .geiq-label-badge__photo:not(.geiq-label-badge__photo--featured) {
    aspect-ratio: 1;
  }

  .geiq-label-badge--v3 .geiq-label-badge__photo-status {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 7px 9px;
    font-size: .58rem !important;
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria {
    margin-top: 14px !important;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .geiq-label-badge--v3 .geiq-label-badge__criteria > li {
    min-height: 0;
    padding: 24px 22px !important;
    text-align: left;
  }

  .geiq-label-badge--v3 .criteria-desc {
    max-width: none;
    margin-top: 16px;
    font-size: .92rem;
  }
}

@media (max-width: 600px) {
  /* Les pages internes ajoutent 28 px de padding à chaque section sous
     600 px. On fait sortir uniquement le conteneur du shortcode de cette
     gouttière pour conserver la largeur mobile validée, sans toucher au H2. */
  html body .section--dispositif-label > .container.wp-block-group {
    max-width: none !important;
    width: calc(100% + 56px) !important;
    margin-inline: -28px !important;
  }
}

@media (max-width: 520px) {
  .geiq-label-badge.geiq-label-badge--v3 {
    width: calc(100% - 32px);
  }

  .geiq-label-badge--v3 .geiq-label-badge__gallery {
    grid-template-columns: 1fr;
  }

  .geiq-label-badge--v3 .geiq-label-badge__photo,
  .geiq-label-badge--v3 .geiq-label-badge__photo--featured,
  .geiq-label-badge--v3 .geiq-label-badge__photo:not(.geiq-label-badge__photo--featured) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .geiq-label-badge--v3 .criteria-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .geiq-label-badge--v3 .criteria-icon > svg {
    width: 24px;
    height: 24px;
  }

  .geiq-label-badge--v3 .criteria-title {
    font-size: 1.7rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.62 — RÉINTRODUCTION : Liquid Glass buttons (Option B)
                              + Newsletter footer responsive
                              + Actus mobile 1 col forcé
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. ACTUS GRID — fix mobile 1 col même quand :has() ciblait 2/3 cartes
   La règle .actus-grid:has(> .actu-card:nth-child(3):last-child) avec
   spec (0,2,0) battait le @media .actus-grid (0,1,0). On bump.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .actus-grid,
  .actus-grid:has(> .actu-card:nth-child(2):last-child),
  .actus-grid:has(> .actu-card:nth-child(3):last-child) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: none !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   2. LIQUID GLASS BUTTONS — Option B (iOS 26 vibe, pill, reflets)
   ─────────────────────────────────────────────────────────────────── */

html body .btn-primary,
html body .wp-block-button__link.btn-primary,
html body .wp-block-button.btn-primary > .wp-block-button__link,
html body .wp-block-button.btn-primary > .wp-block-button__link.wp-element-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 14px rgba(196,30,58,0.32),
    0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}

html body .btn-primary::before,
html body .wp-block-button__link.btn-primary::before,
html body .wp-block-button.btn-primary > .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%);
  z-index: 0;
  pointer-events: none;
}

html body .btn-primary::after,
html body .wp-block-button__link.btn-primary::after,
html body .wp-block-button.btn-primary > .wp-block-button__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .6s ease;
  z-index: 1;
  pointer-events: none;
}

html body .btn-primary:hover,
html body .wp-block-button__link.btn-primary:hover,
html body .wp-block-button.btn-primary > .wp-block-button__link:hover,
html body .wp-block-button.btn-primary > .wp-block-button__link.wp-element-button:hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(196,30,58,0.42),
    0 2px 5px rgba(0,0,0,0.08);
  color: #fff;
}
html body .btn-primary:hover::after,
html body .wp-block-button__link.btn-primary:hover::after,
html body .wp-block-button.btn-primary > .wp-block-button__link:hover::after { transform: translateX(130%); }

html body .btn-primary > *,
html body .wp-block-button__link.btn-primary > * {
  position: relative;
  z-index: 2;
}

/* btn-outline = glass clair */
html body .btn-outline,
html body .wp-block-button__link.btn-outline,
html body .wp-block-button.btn-outline > .wp-block-button__link,
html body .wp-block-button.btn-outline > .wp-block-button__link.wp-element-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--color-neutral-900, #1a1a1a);
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 10px rgba(0,0,0,0.04);
  cursor: pointer;
  overflow: hidden;
  transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}
html body .btn-outline:hover,
html body .wp-block-button__link.btn-outline:hover,
html body .wp-block-button.btn-outline > .wp-block-button__link:hover,
html body .wp-block-button.btn-outline > .wp-block-button__link.wp-element-button:hover {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.10);
  color: var(--color-neutral-900, #1a1a1a);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 6px 18px rgba(0,0,0,0.08);
}

html body .btn-lg.btn-primary,
html body .btn-lg.btn-outline,
html body .wp-block-button__link.btn-primary.btn-lg,
html body .wp-block-button__link.btn-outline.btn-lg,
html body .wp-block-button.btn-primary.btn-lg > .wp-block-button__link,
html body .wp-block-button.btn-outline.btn-lg > .wp-block-button__link {
  padding: 16px 36px;
  font-size: 1rem;
}

[data-theme="dark"] html body .btn-outline,
[data-theme="dark"] html body .wp-block-button__link.btn-outline,
[data-theme="dark"] html body .wp-block-button.btn-outline > .wp-block-button__link {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 10px rgba(0,0,0,0.2);
}
[data-theme="dark"] html body .btn-outline:hover,
[data-theme="dark"] html body .wp-block-button__link.btn-outline:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

@media (prefers-reduced-motion: reduce) {
  html body .btn-primary,
  html body .btn-outline,
  html body .wp-block-button__link.btn-primary,
  html body .wp-block-button__link.btn-outline {
    transition: none !important;
  }
  html body .btn-primary:hover,
  html body .btn-outline:hover {
    transform: none !important;
  }
}


/* ───────────────────────────────────────────────────────────────────
   3. NEWSLETTER FOOTER — bande compacte responsive
   ─────────────────────────────────────────────────────────────────── */

.footer__newsletter {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 5vw, 56px);
  margin: 0;
  background: linear-gradient(135deg, rgba(196,30,58,0.04) 0%, rgba(196,30,58,0.01) 100%);
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.footer__newsletter-text {
  flex: 1 1 320px;
  min-width: 0;
}
.footer__newsletter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary, #c41e3a);
  margin: 0 0 8px;
}
.footer__newsletter-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: nlFooterPulse 2s ease-in-out infinite;
}
@keyframes nlFooterPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}
.footer__newsletter-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--color-neutral-900, #1a1a1a);
}
.footer__newsletter-title strong {
  font-weight: 400;
  color: var(--color-primary, #c41e3a);
}
.footer__newsletter-sub {
  font-size: 0.875rem;
  color: var(--color-neutral-600, #5a5a5a);
  line-height: 1.45;
  margin: 0;
}

.footer__newsletter .newsletter-form--compact {
  flex: 0 1 460px;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
}
.footer__newsletter .newsletter-form--compact > br,
.footer__newsletter .newsletter-form--compact > input[type="hidden"],
.footer__newsletter .newsletter-form--compact label[aria-hidden="true"] {
  display: none !important;
}
.footer__newsletter .newsletter-form--compact .newsletter-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  color: var(--color-neutral-900, #1a1a1a);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.footer__newsletter .newsletter-form--compact .newsletter-form__input::placeholder {
  color: var(--color-neutral-500, #888);
}
.footer__newsletter .newsletter-form--compact .newsletter-form__input:focus {
  border-color: var(--color-primary, #c41e3a);
  box-shadow: 0 0 0 3px rgba(196,30,58,0.10);
  background: #fff;
}
.footer__newsletter .newsletter-form--compact .newsletter-form__btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #c41e3a);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 2px 8px rgba(196,30,58,0.25);
}
.footer__newsletter .newsletter-form--compact .newsletter-form__btn:hover {
  background: var(--color-primary-dark, #a51932);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 12px rgba(196,30,58,0.32);
}
.footer__newsletter .newsletter-form--compact .newsletter-form__btn span {
  transition: transform .18s;
}
.footer__newsletter .newsletter-form--compact .newsletter-form__btn:hover span {
  transform: translateX(2px);
}

@media (max-width: 768px) {
  .footer__newsletter {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
    padding: 28px 20px;
  }
  .footer__newsletter-text {
    flex: 0 0 auto;
    text-align: center;
  }
  .footer__newsletter-eyebrow {
    justify-content: center;
  }
  .footer__newsletter .newsletter-form--compact {
    flex: 0 0 auto;
    flex-direction: column !important;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    gap: 10px;
  }
  .footer__newsletter .newsletter-form--compact .newsletter-form__input,
  .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
    width: 100%;
  }
}

[data-theme="dark"] .footer__newsletter {
  background: linear-gradient(135deg, rgba(196,30,58,0.10) 0%, rgba(196,30,58,0.02) 100%);
  border-top-color: rgba(255,255,255,0.06);
  border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .footer__newsletter-title {
  color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .footer__newsletter-title strong {
  color: var(--color-primary, #c41e3a);
}
[data-theme="dark"] .footer__newsletter-sub {
  color: rgba(255,255,255,0.6);
}
[data-theme="dark"] .footer__newsletter .newsletter-form--compact .newsletter-form__input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .footer__newsletter .newsletter-form--compact .newsletter-form__input::placeholder {
  color: rgba(255,255,255,0.4);
}
[data-theme="dark"] .footer__newsletter .newsletter-form--compact .newsletter-form__input:focus {
  background: rgba(255,255,255,0.12);
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.64 — Outline btns à border rouge : pill + trait fin
   Override des règles pré-existantes 2px solid red + radius-md qui
   donnaient un look "sticky tape" (segments verticaux visibles aux
   extrémités d'un rectangle arrondi).
   ═══════════════════════════════════════════════════════════════════ */

/* "Voir toutes les actus" sur la home (.section--actus .section-foot) */
html body.home .section--actus .section-foot .wp-block-button__link,
html body.home .section--actus .section-foot.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--color-primary) !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: 0 1px 2px rgba(196,30,58,0.06) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
html body.home .section--actus .section-foot .wp-block-button__link:hover,
html body.home .section--actus .section-foot.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(196,30,58,0.22) !important;
}
[data-theme="dark"] html body.home .section--actus .section-foot .wp-block-button__link {
  border-color: rgba(255,107,138,0.6) !important;
  color: #ff6b8a !important;
}

/* "Nous contacter" en cta-dark */
html body .cta-dark .wp-block-button.btn-outline > .wp-block-button__link,
html body .cta-dark .wp-block-button.btn-outline > .wp-block-button__link.wp-element-button {
  border: 1px solid var(--color-primary) !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: 0 1px 2px rgba(196,30,58,0.06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}
html body .cta-dark .wp-block-button.btn-outline > .wp-block-button__link:hover,
html body .cta-dark .wp-block-button.btn-outline > .wp-block-button__link.wp-element-button:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(196,30,58,0.25) !important;
}

/* btn-lg dans cta-dark : padding plus généreux */
html body .cta-dark .wp-block-button.btn-outline.btn-lg > .wp-block-button__link {
  padding: 16px 36px !important;
}

/* Section CTA générique (pas dark) — outline blanc semi-transparent */
html body .cta-section .wp-block-button__link.btn-outline {
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  background: rgba(255,255,255,0.04) !important;
}
html body .cta-section .wp-block-button__link.btn-outline:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.60) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.65 — Switcher panels (BTP / Multi / Gen) en mobile
   ─────────────────────────────────────────────────────────────────
   Fix 4 régressions visibles sur les panels du switcher :
   1. Stats 14+/80%/6/93% en 2x2 au lieu d'1 col (la breakpoint 479
      ne tape pas sur les iPhone XR/14/15 dont la largeur logique
      glisse autour. On bumpe à 640px pour couvrir tout le mobile.)
   2. Boutons des panels (geiq-panel__cta) non centrés en mobile
      (étaient stretch / flex-start).
   3. Boutons outline des panels avec border 2px rouge + radius-md
      → effet "sticky tape" + grossier. Pill 999px + 1px stroke.
   4. panel-gen__footer en flex-start en mobile → centre.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Stats panels : 1 colonne sur mobile (≤640px = couverture safe) */
@media (max-width: 640px) {
  html body .panel-btp__stats,
  html body .panel-btp__stats.wp-block-group,
  html body .panel-multi__stats,
  html body .panel-multi__stats.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 2. CTA des panels centrés sur mobile + boutons full-width */
@media (max-width: 767px) {
  html body .geiq-panel__cta.wp-block-buttons,
  html body .wp-block-buttons.geiq-panel__cta {
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html body .geiq-panel__cta .wp-block-button {
    width: 100% !important;
    max-width: 320px !important;
  }
  html body .geiq-panel__cta .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 4. panel-gen__footer : align center au lieu de flex-start */
  html body .panel-gen__footer {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 14px !important;
  }
  html body .panel-gen__footer p {
    text-align: center !important;
  }
  html body .panel-gen__footer-actions {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Centrer les titres et intros des panels en mobile */
  html body .panel-btp__title,
  html body .panel-multi__title,
  html body .panel-gen__title,
  html body .panel-btp__sub,
  html body .panel-multi__sub,
  html body .panel-gen__desc,
  html body .panel-btp__kicker,
  html body .panel-multi__kicker,
  html body .geiq-panel__content > h3,
  html body .geiq-panel__content > p:not(.geiq-step__title):not(.geiq-step__desc) {
    text-align: center !important;
  }
  html body .panel-multi__kicker,
  html body .panel-btp__kicker {
    justify-content: center !important;
  }
  html body .geiq-panel__footer-q {
    text-align: center !important;
  }
}

/* 3. Tous les boutons outline DES PANELS du switcher : pill thin border */
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link,
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  border: 1px solid var(--color-primary) !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 1px 2px rgba(196,30,58,0.06) !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(196,30,58,0.22) !important;
}

/* Variante "is-style-primary" dans les panels (ex: bouton BTP filled) */
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link,
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link.wp-element-button {
  border-radius: 999px !important;
  padding: 13px 26px !important;
}

/* Variante en panel-gen__footer-actions (ancien parcours markup) */
html body .panel-gen__footer-actions .wp-block-button > .wp-block-button__link,
html body .panel-gen__footer-actions a.wp-block-button__link {
  border-radius: 999px !important;
}
html body .panel-gen__footer-actions .wp-block-button.is-style-outline > .wp-block-button__link,
html body .panel-gen__footer-actions a.btn-outline {
  border: 1px solid var(--color-primary) !important;
  background: transparent !important;
  color: var(--color-primary) !important;
}

[data-theme="dark"] html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: rgba(255,107,138,0.6) !important;
  color: #ff6b8a !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.66 — Newsletter footer btn : force pill 48px (override final)
   La règle .newsletter-form__btn (line 6099+ et 6731+) avait des
   propriétés !important (bg/box-shadow) qui dominent. On scelle TOUTES
   les dimensions du btn footer avec !important et une spec haute pour
   ne plus dépendre de l'ordre / du cache.
   ═══════════════════════════════════════════════════════════════════ */

html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  background: var(--color-primary, #c41e3a) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 2px 8px rgba(196,30,58,0.25) !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn:hover {
  background: var(--color-primary-dark, #a51932) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 12px rgba(196,30,58,0.32) !important;
}

html body .footer__newsletter .newsletter-form--compact .newsletter-form__input {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

/* Mobile : pill conservé, juste full width + stack column */
@media (max-width: 768px) {
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__input,
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
    width: 100% !important;
    max-width: 360px !important;
    height: 48px !important;
    border-radius: 999px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.67 — Newsletter footer Option B2
   ─────────────────────────────────────────────────────────────────
   Card glass pleine largeur en haut du footer, intégrée (pas de
   border-top/bottom — c'est le footer qui s'ouvre par cette carte).
   Icône email gradient rouge à gauche, titre serif, sub, form pill.
   Layout flex desktop, stack column centré sur mobile.
   ═══════════════════════════════════════════════════════════════════ */

/* Bande newsletter, fond plein subtil (Sprint A action #4, glass retiré, conforme DESIGN.md L84) */
html body .footer__newsletter {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  padding: 28px 32px !important;
  margin: 0 0 28px !important;
  background: var(--color-bg-soft, #f9fafb) !important;
  border: 1px solid var(--color-border, rgba(26, 23, 27, 0.08)) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Icône gradient rouge */
html body .footer__newsletter-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #c41e3a 0%, #8b1228 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(196,30,58,0.32);
}
html body .footer__newsletter-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Texte */
html body .footer__newsletter-text {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html body .footer__newsletter-eyebrow { display: none !important; } /* plus utilisé */
html body .footer__newsletter-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(1.35rem, 2vw, 1.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
}
html body .footer__newsletter-title em {
  font-style: italic !important;
  color: var(--color-primary, #c41e3a) !important;
  font-weight: 400 !important;
}
html body .footer__newsletter-title strong {
  font-weight: 400 !important;
  color: var(--color-primary, #c41e3a) !important;
}
html body .footer__newsletter-sub {
  font-size: 0.875rem !important;
  color: var(--color-neutral-600, #6a6a6a) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* Form pill horizontal (input + btn S'inscrire) */
html body .footer__newsletter .newsletter-form--compact {
  flex: 1 1 320px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  min-width: 280px !important;
}
html body .footer__newsletter .newsletter-form--compact > br,
html body .footer__newsletter .newsletter-form--compact > input[type="hidden"],
html body .footer__newsletter .newsletter-form--compact label[aria-hidden="true"] {
  display: none !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 18px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 999px !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  outline: none !important;
  line-height: 1 !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__input::placeholder {
  color: var(--color-neutral-500, #888) !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__input:focus {
  border-color: var(--color-primary, #c41e3a) !important;
  box-shadow: 0 0 0 3px rgba(196,30,58,0.10) !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
  flex: 0 0 auto !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 22px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 12px rgba(196,30,58,0.32) !important;
  transition: background .15s, transform .15s, box-shadow .15s !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn:hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 6px 16px rgba(196,30,58,0.4) !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn span {
  transition: transform .18s !important;
}
html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn:hover span {
  transform: translateX(2px) !important;
}

/* Mobile : stack column centré, icône en haut */
@media (max-width: 768px) {
  html body .footer__newsletter {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 16px !important;
  }
  html body .footer__newsletter-text {
    flex: 0 0 auto !important;
    text-align: center !important;
  }
  html body .footer__newsletter .newsletter-form--compact {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 380px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__input {
    flex: 1 1 auto !important;
  }
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
    flex: 0 0 auto !important;
    padding: 0 18px !important;
  }
}

/* Très petit (≤420px) : stack input + btn */
@media (max-width: 420px) {
  html body .footer__newsletter .newsletter-form--compact {
    flex-direction: column !important;
    gap: 8px !important;
  }
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__input,
  html body .footer__newsletter .newsletter-form--compact .newsletter-form__btn {
    width: 100% !important;
  }
}

/* Dark mode : card glass sombre */
[data-theme="dark"] html body .footer__newsletter {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  border-color: rgba(196,30,58,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 28px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] html body .footer__newsletter-title {
  color: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] html body .footer__newsletter-sub {
  color: rgba(255,255,255,0.6) !important;
}
[data-theme="dark"] html body .footer__newsletter .newsletter-form--compact .newsletter-form__input {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] html body .footer__newsletter .newsletter-form--compact .newsletter-form__input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
[data-theme="dark"] html body .footer__newsletter .newsletter-form--compact .newsletter-form__input:focus {
  background: rgba(255,255,255,0.12) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.68 — Newsletter footer : largeur alignée sur footer__grid
   .footer__grid a max-width: min(1240px,96vw) + padding-inline.
   .footer__newsletter était à la contentSize WP (720px) → trop étroit
   par rapport aux cols dessous. On aligne les deux.
   ═══════════════════════════════════════════════════════════════════ */

.site-footer .footer__newsletter,
html body .site-footer .footer__newsletter {
  max-width: min(1240px, 96vw) !important;
  width: 100% !important;
  margin-inline: auto !important;
  margin-top: clamp(24px, 4vw, 40px) !important;
  margin-bottom: clamp(24px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* Sur mobile (≤768px), on retire le margin-top massif et on laisse
   le card prendre la largeur dispo */
@media (max-width: 768px) {
  .site-footer .footer__newsletter,
  html body .site-footer .footer__newsletter {
    max-width: 96vw !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.71 — Newsletter footer dark mode : vraiment glassy
   On utilise les tokens du design system (var(--surface-card-bg) +
   --surface-card-border) au lieu d'un gradient blanc qui rendait
   un effet "voile gris plein" plutôt que "verre". Blur renforcé.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] html body .footer__newsletter,
[data-theme="dark"] .site-footer .footer__newsletter {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Texte titre + sub : utiliser les tokens dark cohérents */
[data-theme="dark"] html body .footer__newsletter-title {
  color: var(--surface-card-text, #f0eef1) !important;
}
[data-theme="dark"] html body .footer__newsletter-title em,
[data-theme="dark"] html body .footer__newsletter-title strong {
  color: var(--color-primary, #ff5577) !important;
}
[data-theme="dark"] html body .footer__newsletter-sub {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* v10.58.6 — Footer input: dark surface, legible copy and native controls. */
html[data-theme="dark"] body .footer__newsletter .newsletter-form--compact .newsletter-form__input {
  color-scheme: dark;
  background: #29262d !important;
  border: 1px solid #8a7f90 !important;
  color: #f5f2f6 !important;
  -webkit-text-fill-color: #f5f2f6 !important;
  caret-color: #f5f2f6;
}
html[data-theme="dark"] body .footer__newsletter .newsletter-form--compact .newsletter-form__input::placeholder {
  color: #c9c3cd !important;
  -webkit-text-fill-color: #c9c3cd !important;
  opacity: 1;
}
html[data-theme="dark"] body .footer__newsletter .newsletter-form--compact .newsletter-form__input:focus {
  background: #29262d !important;
  border-color: #ff739a !important;
  outline: 2px solid #ff739a !important;
  outline-offset: 3px;
  box-shadow: none !important;
}
html[data-theme="dark"] body .footer__newsletter .newsletter-form--compact .newsletter-form__input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: #f5f2f6 !important;
  caret-color: #f5f2f6;
  box-shadow: 0 0 0 1000px #29262d inset !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.72 — Boutons des 3 panels GEIQ alignés sur le liquid glass
   Les CTA des panels (BTP / Gen / Multi) avaient juste la pill shape
   mais pas les effets glass des nouveaux btn-primary / btn-outline.
   On harmonise.
   ═══════════════════════════════════════════════════════════════════ */

/* Primary (filled rouge) : liquid glass pill avec gradient + sweep */
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link,
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link.wp-element-button,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 14px rgba(196,30,58,0.32),
    0 1px 3px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link::before,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link::after,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link:hover,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link:hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(196,30,58,0.42),
    0 2px 5px rgba(0,0,0,0.08) !important;
  color: #fff !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link:hover::after,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link:hover::after {
  transform: translateX(130%) !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-primary > .wp-block-button__link > *,
html body .geiq-panel__cta .wp-block-button:first-child:not(.is-style-outline) > .wp-block-button__link > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Outline (red border thin pill) : on conserve le red-bordered + on
   ajoute un subtle inset highlight pour matcher l'esthétique glass. */
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link,
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  border: 1px solid var(--color-primary, #c41e3a) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  color: var(--color-primary, #c41e3a) !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(196,30,58,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
  background: var(--color-primary, #c41e3a) !important;
  color: #fff !important;
  border-color: var(--color-primary, #c41e3a) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 8px 22px rgba(196,30,58,0.3) !important;
}

/* Dark mode panels : outline plus visible */
[data-theme="dark"] html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 107, 138, 0.6) !important;
  color: #ff6b8a !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] html body .geiq-panel__cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: rgba(255, 107, 138, 0.15) !important;
  border-color: #ff6b8a !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.73 — Boutons custom des panels GEIQ : VRAIES classes
   Les panels n'utilisent pas wp-block-button. Ce sont des <a> directs
   avec : btn-link-primary / btn-link-neutral / btn-multi-primary
   / btn-on-red / btn-outline-white-sm. On les harmonise tous au
   liquid glass.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PRIMARY filled (pill liquid glass rouge) ── */
html body a.btn-link-primary,
html body a.btn-multi-primary,
html body a.btn-btp-primary,
html body a.btn-on-red,
html body .panel-gen__footer-actions a.btn-link-primary,
html body .panel-btp__actions a.btn-multi-primary,
html body .panel-btp__actions a.btn-btp-primary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 26px !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 14px rgba(196,30,58,0.32),
    0 1px 3px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
  white-space: nowrap !important;
}
html body a.btn-link-primary::before,
html body a.btn-multi-primary::before,
html body a.btn-btp-primary::before,
html body a.btn-on-red::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body a.btn-link-primary::after,
html body a.btn-multi-primary::after,
html body a.btn-btp-primary::after,
html body a.btn-on-red::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body a.btn-link-primary:hover,
html body a.btn-multi-primary:hover,
html body a.btn-btp-primary:hover,
html body a.btn-on-red:hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  border: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(196,30,58,0.42),
    0 2px 5px rgba(0,0,0,0.08) !important;
}
html body a.btn-link-primary:hover::after,
html body a.btn-multi-primary:hover::after,
html body a.btn-btp-primary:hover::after,
html body a.btn-on-red:hover::after {
  transform: translateX(130%) !important;
}
/* Children (text + arrow) au-dessus des reflets */
html body a.btn-link-primary > *,
html body a.btn-multi-primary > *,
html body a.btn-btp-primary > *,
html body a.btn-on-red > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ── OUTLINE pill (red border thin, glass clair) ── */
html body a.btn-link-neutral,
html body a.btn-outline-white-sm,
html body .panel-gen__footer-actions a.btn-link-neutral,
html body .panel-btp__actions a.btn-outline-white-sm {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border: 1px solid var(--color-primary, #c41e3a) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  color: var(--color-primary, #c41e3a) !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(196,30,58,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}
html body a.btn-link-neutral:hover,
html body a.btn-outline-white-sm:hover {
  background: var(--color-primary, #c41e3a) !important;
  color: #fff !important;
  border-color: var(--color-primary, #c41e3a) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 8px 22px rgba(196,30,58,0.3) !important;
}

/* Dark mode panels — v10.18.56 : background TRANSPARENT (avant rgba(.06)
   donnait un gris pâle parasitant en dark, signalé Ju). Le saturate du
   backdrop-filter de la version light est aussi annulé pour ne pas
   amplifier les rouges du spotlight derrière. */
[data-theme="dark"] html body a.btn-link-neutral,
[data-theme="dark"] html body a.btn-outline-white-sm {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: rgba(255, 107, 138, 0.6) !important;
  color: #ff6b8a !important;
  box-shadow: none !important;
}
[data-theme="dark"] html body a.btn-link-neutral:hover,
[data-theme="dark"] html body a.btn-outline-white-sm:hover {
  background: rgba(227, 0, 67, .15) !important;
  background-color: rgba(227, 0, 67, .15) !important;
  border-color: #ff6b8a !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.76 — Timeline /le-dispositif/ : pill durée en EYEBROW au-
   dessus du titre. Cohérence totale avec les autres eyebrows du site
   (.section-eyebrow / .footer__newsletter-eyebrow / .hero__pill) :
   - typo Inter 0.75rem / weight 600 / letter-spacing 0.1em uppercase
   - bg rouge 8% + border rouge 18%
   - dot animé blink avant le texte (signature site-wide)
   - pill 999px

   Layout : grid passe de 56px/1fr/auto à 56px/1fr (2 cols), ordre
   visuel meta → icon+title → desc. La col 3 (auto) disparaît.
   ═══════════════════════════════════════════════════════════════════ */

body:not(.home) .dispositif-schema__step {
  grid-template-columns: 56px 1fr !important;
  grid-template-rows: auto auto auto auto !important;
  row-gap: 8px !important;
}

/* Numéro : col 1, span toutes les rows */
body:not(.home) .dispositif-schema__step > .dispositif-schema__num {
  grid-column: 1 !important;
  grid-row: 1 / span 4 !important;
}

/* META en EYEBROW : col 2, row 1 (au-dessus du titre) */
body:not(.home) .dispositif-schema__step > .dispositif-schema__meta {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: end !important;
  margin: 6px 0 0 !important;
  padding: 5px 12px 5px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  background: rgba(196, 30, 58, 0.08) !important;
  border: 1px solid rgba(196, 30, 58, 0.18) !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  transition: background .25s ease, border-color .25s ease, transform .25s ease !important;
}

/* Dot animé blink AVANT le texte — signature des eyebrows du site */
body:not(.home) .dispositif-schema__step > .dispositif-schema__meta::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  flex-shrink: 0 !important;
  animation: dispositifMetaPulse 2s ease-in-out infinite !important;
}
@keyframes dispositifMetaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.4); }
}

/* Icône : col 2, row 2 (avec le titre) */
body:not(.home) .dispositif-schema__step > .dispositif-schema__icon {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Titre : col 2, row 3 — sous l'icône */
body:not(.home) .dispositif-schema__step > .dispositif-schema__title {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
}

/* Description : col 2, row 4 */
body:not(.home) .dispositif-schema__step > .dispositif-schema__desc {
  grid-column: 2 !important;
  grid-row: 4 !important;
}

/* Hover : on garde l'effet existant sur la pill */
body:not(.home) .dispositif-schema__step:hover .dispositif-schema__meta {
  background: rgba(196, 30, 58, 0.14) !important;
  border-color: rgba(196, 30, 58, 0.32) !important;
  transform: translateY(-1px) !important;
}

/* Reduced motion : kill le blink du dot */
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .dispositif-schema__step > .dispositif-schema__meta::before {
    animation: none !important;
  }
}

/* Mobile (≤ 600px) : layout reste cohérent, pill plus compacte */
@media (max-width: 600px) {
  body:not(.home) .dispositif-schema__step {
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__num {
    grid-row: 1 / span 4 !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 4px 0 0 !important;
    padding: 4px 10px 4px 8px !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.08em !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__meta::before {
    width: 5px !important;
    height: 5px !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__icon {
    grid-row: 2 !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__title {
    grid-row: 3 !important;
  }
  body:not(.home) .dispositif-schema__step > .dispositif-schema__desc {
    grid-row: 4 !important;
  }
}

/* Dark mode — bg/border ajustés */
[data-theme="dark"] body:not(.home) .dispositif-schema__step > .dispositif-schema__meta {
  background: rgba(196, 30, 58, 0.14) !important;
  border-color: rgba(196, 30, 58, 0.30) !important;
  color: #ff6b8a !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.77 — Timeline /le-dispositif/ : recentrage propre
   La nouvelle layout v76 (2 cols 56px/1fr, eyebrow above) faisait
   sentir un "décalé à gauche" : la pill courte + le titre laissaient
   bcp d'espace vide à droite du step (l'ol est à 780px mais le
   contenu visuel ne fait que ~500px).

   Fix : on resserre l'ol à 640px et on confirme le margin-inline auto.
   Le contenu remplit visuellement le rail centré avec moins de vide.
   ═══════════════════════════════════════════════════════════════════ */

body:not(.home) .dispositif-schema {
  max-width: 640px !important;
  margin-inline: auto !important;
}

/* La description retrouve un rythme de lecture confortable */
body:not(.home) .dispositif-schema__desc {
  max-width: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.78 — Trio schema /le-dispositif/ : refonte animations modernes
   ─────────────────────────────────────────────────────────────────
   Hub : logo WP sur disque blanc inset, aurora conic-gradient rotative.
   Lignes : particules SVG animateMotion (data flow visible).
   Acteurs : hover glow rouge + lift subtle.
   ═══════════════════════════════════════════════════════════════════ */

/* Logo dans le hub (remplace le texte GEIQ 56) */
.trio-hub__logo {
  width: 72%;
  height: auto;
  max-height: 72%;
  display: block;
  background: #fff;
  border-radius: 50%;
  padding: clamp(14px, 1.6vw, 22px);
  object-fit: contain;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  z-index: 3;
}

/* Hub : positionner le core en flex pour bien centrer le logo */
.trio-hub__core {
  overflow: hidden;
}

/* Aurora conic-gradient rotative en arrière-plan du hub */
.trio-hub__aurora {
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(196, 30, 58, 0.55) 0%,
    rgba(255, 107, 138, 0.35) 25%,
    rgba(196, 30, 58, 0.55) 50%,
    rgba(255, 107, 138, 0) 70%,
    rgba(196, 30, 58, 0.55) 100%
  );
  filter: blur(18px);
  opacity: 0.7;
  z-index: 0;
  animation: trioAuroraSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes trioAuroraSpin {
  to { transform: rotate(360deg); }
}

/* Particules sur les lignes : on s'assure qu'elles ne sont pas hidden */
.geiq-schema-trio__lines .trio-particles circle {
  filter: drop-shadow(0 0 4px rgba(196, 30, 58, 0.6));
}

/* Hover acteurs : glow + lift subtil */
.trio-actor {
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.trio-actor:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 8px 20px rgba(196, 30, 58, 0.18));
}
/* L'acteur 1 a déjà un transform horizontal via translate(-50%, 0) :
   on combine les deux. */
.trio-actor--1:hover {
  transform: translate(-50%, -4px);
}

/* Hover icône : pulse rouge subtil */
.trio-actor__icon {
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease;
}
.trio-actor:hover .trio-actor__icon {
  transform: scale(1.08);
  background: rgba(196, 30, 58, 0.12);
  color: var(--color-primary, #c41e3a);
}

/* Reduced motion : kill aurora et particules */
@media (prefers-reduced-motion: reduce) {
  .trio-hub__aurora { animation: none; opacity: 0.3; }
  .geiq-schema-trio__lines .trio-particles { display: none; }
  .trio-actor, .trio-actor:hover { transition: none; transform: none; }
  .trio-actor--1, .trio-actor--1:hover { transform: translate(-50%, 0); }
}

/* Dark mode : aurora plus saturée */
[data-theme="dark"] .trio-hub__aurora {
  background: conic-gradient(
    from 0deg,
    rgba(255, 107, 138, 0.7) 0%,
    rgba(196, 30, 58, 0.5) 25%,
    rgba(255, 107, 138, 0.7) 50%,
    rgba(196, 30, 58, 0) 70%,
    rgba(255, 107, 138, 0.7) 100%
  );
  filter: blur(22px);
  opacity: 0.55;
}
[data-theme="dark"] .trio-hub__logo {
  background: #fff; /* reste blanc pour la lisibilité du logo coloré */
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.79 — Hub trio : logo blanc filter, plus de disque oval
   On annule le bg blanc + border-radius oval du v78. À la place :
   filter brightness(0) invert(1) sur l'img → logo all-white sur le
   red gradient direct. Lecture nette, identité rouge dominante.
   ═══════════════════════════════════════════════════════════════════ */

.trio-hub__logo {
  width: clamp(60px, 10vw, 110px) !important;
  height: auto !important;
  max-height: 60% !important;
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  position: relative !important;
  z-index: 3 !important;
}

[data-theme="dark"] .trio-hub__logo {
  filter: brightness(0) invert(1) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.80 — Trio schema MOBILE : timeline verticale propre
   ─────────────────────────────────────────────────────────────────
   Desktop = radial (inchangé). Mobile = vertical narrative :
     [HUB GEIQ] cercle parfait avec logo
          │  ligne dashed + particules qui descendent
     [Acteur 1 - Salarié]
          │
     [Acteur 2 - Entreprise]
          │
     [Acteur 3 - Organisme]
   Reset complet du positionnement absolute sur mobile.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Container : reset min-height/aspect-ratio du desktop */
  .geiq-schema-trio__inner {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    position: relative !important;
  }

  /* Lignes SVG du desktop : cachées en mobile (on remplace par CSS dashed verticale) */
  .geiq-schema-trio__lines {
    display: none !important;
  }

  /* Hub : reset position absolute, devient bloc top centré */
  .trio-hub {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 180px !important;
    height: 180px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .trio-hub__core {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 !important;
  }
  .trio-hub__logo {
    width: 60% !important;
    max-height: 50% !important;
  }
  .trio-hub__sub {
    margin: 14px auto 32px !important;
    text-align: center !important;
    max-width: 280px !important;
  }
  /* Aurora + pulses : on garde mais ajustés */
  .trio-hub__aurora {
    inset: -20% !important;
  }

  /* Acteurs : reset abs → bloc full-width avec card style */
  .trio-actor,
  .trio-actor--1,
  .trio-actor--2,
  .trio-actor--3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 22px 20px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(196, 30, 58, 0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(196, 30, 58, 0.04) !important;
    text-align: center !important;
    z-index: 2 !important;
    animation: trioMobileActorIn .6s cubic-bezier(.22,1,.36,1) both !important;
  }
  .trio-actor--1 { animation-delay: .1s !important; }
  .trio-actor--2 { animation-delay: .25s !important; margin-top: 56px !important; }
  .trio-actor--3 { animation-delay: .4s !important; margin-top: 56px !important; }

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

  /* Connecteur vertical dashed entre éléments (hub→actor1, actor→actor) */
  .trio-actor--1::before,
  .trio-actor--2::before,
  .trio-actor--3::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 100% !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    height: 40px !important;
    background-image: linear-gradient(
      to bottom,
      var(--color-primary, #c41e3a) 50%,
      transparent 50%
    ) !important;
    background-size: 2px 8px !important;
    background-repeat: repeat-y !important;
    z-index: 1 !important;
    animation: trioMobileLineFlow 1.2s linear infinite !important;
  }
  /* Premier connecteur : depuis le hub (16px de marge sup pour pas chevaucher) */
  .trio-actor--1::before {
    height: 32px !important;
    bottom: calc(100% + 0px) !important;
    margin-top: -32px !important;
  }

  @keyframes trioMobileLineFlow {
    from { background-position: 0 0; }
    to   { background-position: 0 8px; }
  }

  /* Petit point rouge animé qui descend le long de la ligne (data flow) */
  .trio-actor--1::after,
  .trio-actor--2::after,
  .trio-actor--3::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--color-primary, #c41e3a) !important;
    box-shadow: 0 0 8px rgba(196, 30, 58, 0.5) !important;
    pointer-events: none !important;
    animation: trioMobileDot 2s linear infinite !important;
  }
  .trio-actor--1::after {
    top: -34px !important;
    animation-delay: 0s !important;
  }
  .trio-actor--2::after {
    top: -54px !important;
    animation-delay: .4s !important;
  }
  .trio-actor--3::after {
    top: -54px !important;
    animation-delay: .8s !important;
  }
  @keyframes trioMobileDot {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 50px); }
  }

  /* Icône acteur : centrée, ratio respecté, plus grosse pour la lecture mobile */
  .trio-actor__icon {
    margin: 0 auto 12px !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(196, 30, 58, 0.08) !important;
    border-radius: 12px !important;
    color: var(--color-primary, #c41e3a) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .trio-actor__icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  .trio-actor__title {
    margin: 0 0 6px !important;
    font-size: 1.125rem !important;
    text-align: center !important;
  }
  .trio-actor__desc {
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  /* Lead final */
  .geiq-schema-trio__lead {
    margin-top: 32px !important;
    text-align: center !important;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .trio-actor--1::before,
    .trio-actor--2::before,
    .trio-actor--3::before,
    .trio-actor--1::after,
    .trio-actor--2::after,
    .trio-actor--3::after {
      animation: none !important;
    }
    .trio-actor,
    .trio-actor--1,
    .trio-actor--2,
    .trio-actor--3 {
      animation: none !important;
    }
  }

  /* Dark mode mobile : actor cards sur surface dark */
  [data-theme="dark"] .trio-actor,
  [data-theme="dark"] .trio-actor--1,
  [data-theme="dark"] .trio-actor--2,
  [data-theme="dark"] .trio-actor--3 {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
  [data-theme="dark"] .trio-actor__icon {
    background: rgba(255, 107, 138, 0.12) !important;
    color: #ff6b8a !important;
  }
}

/* Très petit (≤ 380px) : encore plus compact */
@media (max-width: 380px) {
  .trio-hub {
    width: 150px !important;
    height: 150px !important;
  }
  .trio-actor,
  .trio-actor--1,
  .trio-actor--2,
  .trio-actor--3 {
    padding: 18px 16px !important;
    max-width: 100% !important;
  }
  .trio-actor--2,
  .trio-actor--3 {
    margin-top: 48px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.81 — Hub trio mobile : VRAI cercle (oval-fix)
   Le sub était dans le flex column et compressait le core en hauteur
   (180w × 130h = oval). On force le core à ses dimensions fixes et
   on sort le sub en position absolute sous le hub.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .trio-hub {
    /* On garde la taille fixe + position relative pour ancrer __sub */
    display: block !important;
    width: 180px !important;
    height: 180px !important;
    aspect-ratio: 1 !important;
    margin: 0 auto 100px !important; /* place pour le sub en abs en dessous */
  }

  /* Core : fixé à la taille du hub, ne se laisse plus écraser */
  .trio-hub__core {
    position: relative !important;
    width: 180px !important;
    height: 180px !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sub : sort du flow → positioné absolute juste en dessous du hub */
  .trio-hub__sub {
    position: absolute !important;
    top: calc(100% + 14px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: max-content !important;
    max-width: 280px !important;
    text-align: center !important;
  }

  /* Aurora + pulses : restent absolute, calquées sur le hub */
  .trio-hub__aurora,
  .trio-hub__pulse {
    width: 180px !important;
    height: 180px !important;
    inset: 0 !important;
  }
  .trio-hub__aurora {
    inset: -36px !important; /* -20% de 180 = 36 */
    width: calc(180px + 72px) !important;
    height: calc(180px + 72px) !important;
  }
}

@media (max-width: 380px) {
  .trio-hub {
    width: 150px !important;
    height: 150px !important;
    margin-bottom: 90px !important;
  }
  .trio-hub__core {
    width: 150px !important;
    height: 150px !important;
  }
  .trio-hub__pulse {
    width: 150px !important;
    height: 150px !important;
  }
  .trio-hub__aurora {
    inset: -30px !important;
    width: calc(150px + 60px) !important;
    height: calc(150px + 60px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.82 — Hero Spoke pages : boutons is-style-fill / is-style-outline
   ─────────────────────────────────────────────────────────────────
   Les heros des pages /le-dispositif/, /geiq-btp/, /geiq-multi/, etc.
   utilisent les classes Gutenberg `is-style-fill` (primary) et
   `is-style-outline` / `is-style-outline--2` (outline) au lieu des
   classes custom .btn-primary/.btn-outline.
   On les harmonise au liquid glass via .hero__actions scope.
   ═══════════════════════════════════════════════════════════════════ */

/* PRIMARY (is-style-fill) → red liquid glass pill */
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link,
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 36px !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 14px rgba(196,30,58,0.32),
    0 1px 3px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
}
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link:hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(196,30,58,0.42),
    0 2px 5px rgba(0,0,0,0.08) !important;
}
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link:hover::after {
  transform: translateX(130%) !important;
}

/* OUTLINE (is-style-outline / is-style-outline--2) → white glass pill */
html body .hero__actions .wp-block-button.is-style-outline > .wp-block-button__link,
html body .hero__actions .wp-block-button.is-style-outline--2 > .wp-block-button__link,
html body .hero__actions .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
html body .hero__actions .wp-block-button[class*="is-style-outline"] > .wp-block-button__link.wp-element-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 36px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  background: rgba(255,255,255,0.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 10px rgba(0,0,0,0.04) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  outline: none !important;
  outline-offset: 0 !important;
  transition: background .2s, transform .2s, box-shadow .2s, border-color .2s !important;
}
html body .hero__actions .wp-block-button[class*="is-style-outline"] > .wp-block-button__link:hover {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(0,0,0,0.10) !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.06),
    0 6px 18px rgba(0,0,0,0.08) !important;
}

/* Z-index pour le contenu au-dessus des reflets */
html body .hero__actions .wp-block-button.is-style-fill > .wp-block-button__link > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Dark mode : outline reste en glass sombre */
[data-theme="dark"] html body .hero__actions .wp-block-button[class*="is-style-outline"] > .wp-block-button__link {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 10px rgba(0,0,0,0.2) !important;
}
[data-theme="dark"] html body .hero__actions .wp-block-button[class*="is-style-outline"] > .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.18) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.83 — Pages Spoke en mobile : breathing room horizontal
   Le --section-gutter clamp tombe à 20px sur mobile, c'est trop juste.
   Les cards et textes touchaient presque les bords. On bump à 28px.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Toutes les sections des pages Spoke (hors home) */
  body:not(.home) .site-main [class*="section--"] {
    padding-inline: 28px !important;
  }

  /* Timeline : on garde le max-width mais on s'assure que le contenu
     respire dans le conteneur. Le grid 56/1fr reste mais avec plus
     d'espace de chaque côté. */
  body:not(.home) .dispositif-schema {
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  /* Trio actors : on réduit légèrement leur max-width pour qu'ils
     ne touchent pas les bords de la section. */
  .trio-actor,
  .trio-actor--1,
  .trio-actor--2,
  .trio-actor--3 {
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  /* Très petit : padding-inline plus serré sinon ça étouffe */
  body:not(.home) .site-main [class*="section--"] {
    padding-inline: 22px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.84 — Home hero : breathing room sous les chiffres
   La règle v10.15.6 forçait padding-bottom: 0 (parti pris à l'époque),
   mais en pratique les cards 480+/80%/39/93% se collent à la section
   suivante "Pourquoi le GEIQ ?". On rajoute une vraie respiration.
   ═══════════════════════════════════════════════════════════════════ */

html body.home .hero,
html body.home section.hero,
html body.home .section--hero {
  padding-bottom: clamp(56px, 6vw, 88px) !important;
}

@media (max-width: 600px) {
  html body.home .hero,
  html body.home section.hero,
  html body.home .section--hero {
    padding-bottom: clamp(40px, 8vw, 56px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.85 — Lock complet pill 999px sur boutons site-wide
   Bug visible : règle line 2913 .wp-block-button.btn-primary .wp-block-button__link
   { border-radius: var(--radius-md) !important; } écrasait notre 999px du
   liquid glass v62 → forme rectangle arrondi visible derrière le pill au hover.

   Fix : on force border-radius: 999px !important + overflow: hidden sur
   wrapper ET link pour TOUTES les variantes, et on coupe tout shadow/border/
   bg parasite sur le wrapper.
   ═══════════════════════════════════════════════════════════════════ */

html body .wp-block-button.btn,
html body .wp-block-button.btn-primary,
html body .wp-block-button.btn-outline,
html body .wp-block-button.btn-lg,
html body .wp-block-button.is-style-fill,
html body .wp-block-button.is-style-outline,
html body .wp-block-button[class*="is-style-outline"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  overflow: visible !important; /* on ne clip pas le wrapper, on clip le link */
}

/* Le LINK interne : pill 999px verrouillé partout, overflow: hidden
   pour clipper les pseudo-elements (::before radial, ::after sweep). */
html body .wp-block-button.btn-primary .wp-block-button__link,
html body .wp-block-button.btn-primary .wp-block-button__link.wp-element-button,
html body .wp-block-button.btn-outline .wp-block-button__link,
html body .wp-block-button.btn-outline .wp-block-button__link.wp-element-button,
html body .wp-block-button.btn-lg .wp-block-button__link,
html body .wp-block-button.btn-lg .wp-block-button__link.wp-element-button,
html body .wp-block-button.is-style-fill .wp-block-button__link,
html body .wp-block-button.is-style-fill .wp-block-button__link.wp-element-button,
html body .wp-block-button.is-style-outline .wp-block-button__link,
html body .wp-block-button[class*="is-style-outline"] .wp-block-button__link,
html body .wp-block-button[class*="is-style-outline"] .wp-block-button__link.wp-element-button {
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Pseudo-elements : on s'assure qu'ils héritent bien du pill 999 */
html body .wp-block-button .wp-block-button__link::before,
html body .wp-block-button .wp-block-button__link::after,
html body .btn-primary::before,
html body .btn-primary::after,
html body .btn-outline::before,
html body .btn-outline::after {
  border-radius: 999px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.86 — Sceau Label GEIQ : logo blanc au centre + texte tournant
   Le sceau utilise maintenant le logo WP custom_logo en silhouette
   blanche (filter brightness(0) invert(1)) au centre du disque rouge,
   et la phrase institutionnelle tourne lentement autour en cercle
   complet (rotation infinie 22s).
   ═══════════════════════════════════════════════════════════════════ */

/* Logo blanc au centre */
.seal-core__logo {
  display: block;
  width: 75% !important;
  max-width: 150px !important;
  height: auto !important;
  margin: 0 auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}

/* Le texte circulaire tourne autour */
.seal-circle-text--rotating {
  animation: sealTextRotate 22s linear infinite;
  transform-origin: center center;
}
@keyframes sealTextRotate {
  to { transform: rotate(360deg); }
}

/* Texte plus visible (white avec léger drop-shadow pour le dégager du fond rouge) */
.seal-text--rotating {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  paint-order: stroke;
}

/* Reduced motion : on stoppe la rotation, le texte reste fixe */
@media (prefers-reduced-motion: reduce) {
  .seal-circle-text--rotating {
    animation: none !important;
  }
}

/* Hover sur le sceau : la rotation accélère un peu pour signaler l'interaction */
.geiq-label-badge:hover .seal-circle-text--rotating {
  animation-duration: 12s;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.87 — HARMONISATION FINALE BOUTONS SITE-WIDE
   ─────────────────────────────────────────────────────────────────
   Règle UNIQUE qui capture TOUTES les classes de boutons du site et
   les force au liquid glass language. Deux types finaux :
     - PRIMARY = pill rouge gradient + reflets + sweep + lift hover
     - OUTLINE = pill glass blanc + border rouge fin + hover plein

   Toutes les classes héritées (custom + Gutenberg + WP core) sont
   couvertes en une fois pour mettre fin au patchwork.
   ═══════════════════════════════════════════════════════════════════ */


/* ╔═══ PRIMARY (red filled liquid glass pill) ═══╗
   Capture : .btn-primary, .wp-block-button.btn-primary, is-style-fill,
   .btn-link-primary, .btn-multi-primary, .btn-btp-primary, .btn-on-red,
   .nav-cta, .newsletter-form__btn (sauf footer compact qui a sa déco). */
html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.btn-primary > .wp-block-button__link.wp-element-button,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 28px !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, #d6224a 0%, #c41e3a 50%, #a51932 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 14px rgba(196,30,58,0.32),
    0 1px 3px rgba(0,0,0,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  isolation: isolate !important;
  white-space: nowrap !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s !important;
}

/* Pseudo-elements primary : reflet radial top + sweep diagonal hover */
html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse 110% 70% at 50% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 55%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%) !important;
  transform: translateX(-130%) !important;
  transition: transform .6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
):hover {
  background: linear-gradient(180deg, #df2c52 0%, #c41e3a 50%, #a51932 100%) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(196,30,58,0.42),
    0 2px 5px rgba(0,0,0,0.08) !important;
}
html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
):hover::after {
  transform: translateX(130%) !important;
}

/* Children primary au-dessus des reflets */
html body :is(
  a.btn-primary, button.btn-primary,
  .wp-block-button__link.btn-primary,
  .wp-block-button.btn-primary > .wp-block-button__link,
  .wp-block-button.is-style-fill > .wp-block-button__link,
  a.btn-link-primary,
  a.btn-multi-primary,
  a.btn-btp-primary,
  a.btn-on-red,
  a.nav-cta
) > * {
  position: relative !important;
  z-index: 2 !important;
}


/* ╔═══ OUTLINE (white glass pill, red border) ═══╗
   Capture : .btn-outline, .wp-block-button.btn-outline, is-style-outline*,
   .btn-link-neutral, .btn-outline-white-sm */
html body :is(
  a.btn-outline, button.btn-outline,
  .wp-block-button__link.btn-outline,
  .wp-block-button.btn-outline > .wp-block-button__link,
  .wp-block-button.btn-outline > .wp-block-button__link.wp-element-button,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
  .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
  .wp-block-button[class*="is-style-outline"] > .wp-block-button__link.wp-element-button,
  a.btn-link-neutral,
  a.btn-outline-white-sm
) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  border: 1px solid var(--color-primary, #c41e3a) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
  backdrop-filter: blur(14px) saturate(170%) !important;
  color: var(--color-primary, #c41e3a) !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(196,30,58,0.06) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s !important;
}

html body :is(
  a.btn-outline, button.btn-outline,
  .wp-block-button__link.btn-outline,
  .wp-block-button.btn-outline > .wp-block-button__link,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
  a.btn-link-neutral,
  a.btn-outline-white-sm
):hover {
  background: var(--color-primary, #c41e3a) !important;
  color: #fff !important;
  border-color: var(--color-primary, #c41e3a) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 8px 22px rgba(196,30,58,0.3) !important;
}


/* ╔═══ HERO scope : padding + size un peu plus généreux ═══╗ */
html body .hero__actions :is(
  a.btn-primary, button.btn-primary,
  a.btn-outline, button.btn-outline,
  .wp-block-button__link,
  .wp-block-button > .wp-block-button__link,
  a
) {
  padding: 16px 36px !important;
  font-size: 1rem !important;
}


/* ╔═══ DARK MODE outline (v10.18.58 — spec ultra-haute pour battre les
   rules light qui ciblent .panel-btp__actions a.btn-outline-white-sm
   et autres scopes panel à spec 0,2,3) ═══╗ */
html[data-theme="dark"] body :is(
  a.btn-outline, button.btn-outline,
  .wp-block-button__link.btn-outline,
  .wp-block-button.btn-outline > .wp-block-button__link,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
  a.btn-link-neutral,
  a.btn-outline-white-sm,
  .panel-btp__actions a.btn-outline-white-sm,
  .panel-multi__actions a.btn-outline-white-sm,
  .panel-gen__footer-actions a.btn-link-neutral,
  .panel-gen__footer-actions a.btn-outline-white-sm,
  .panel-btp__actions a.btn-link-neutral,
  .panel-multi__actions a.btn-link-neutral
) {
  background: transparent !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: rgba(255, 107, 138, 0.6) !important;
  color: #ff6b8a !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body :is(
  a.btn-outline, button.btn-outline,
  .wp-block-button__link.btn-outline,
  .wp-block-button.btn-outline > .wp-block-button__link,
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
  a.btn-link-neutral,
  a.btn-outline-white-sm,
  .panel-btp__actions a.btn-outline-white-sm,
  .panel-multi__actions a.btn-outline-white-sm,
  .panel-gen__footer-actions a.btn-link-neutral,
  .panel-gen__footer-actions a.btn-outline-white-sm,
  .panel-btp__actions a.btn-link-neutral,
  .panel-multi__actions a.btn-link-neutral
):hover {
  background: rgba(227, 0, 67, .15) !important;
  background-color: rgba(227, 0, 67, .15) !important;
  border-color: #ff6b8a !important;
  color: #fff !important;
}


/* ╔═══ Wrapper .wp-block-button : transparent partout ═══╗ */
html body .wp-block-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  overflow: visible !important;
}


/* ╔═══ Reduced motion ═══╗ */
@media (prefers-reduced-motion: reduce) {
  html body :is(
    .btn-primary, .btn-outline,
    .wp-block-button__link.btn-primary, .wp-block-button__link.btn-outline,
    .wp-block-button.btn-primary > .wp-block-button__link,
    .wp-block-button.btn-outline > .wp-block-button__link,
    .wp-block-button.is-style-fill > .wp-block-button__link,
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button[class*="is-style-outline"] > .wp-block-button__link,
    a.btn-link-primary, a.btn-link-neutral,
    a.btn-multi-primary, a.btn-btp-primary, a.btn-on-red,
    a.btn-outline-white-sm, a.nav-cta
  ),
  html body :is(
    .btn-primary, .btn-outline,
    .wp-block-button.btn-primary > .wp-block-button__link,
    .wp-block-button.btn-outline > .wp-block-button__link,
    .wp-block-button.is-style-fill > .wp-block-button__link,
    .wp-block-button.is-style-outline > .wp-block-button__link,
    a.btn-link-primary, a.btn-link-neutral,
    a.btn-multi-primary, a.btn-btp-primary, a.btn-on-red,
    a.btn-outline-white-sm, a.nav-cta
  ):hover {
    transition: none !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.88 — Fix double-bouton : neutraliser le wrapper proprement
   Bug : sélecteurs .btn-primary/.btn-outline standalone matchaient le
   WRAPPER div ET le link interne → both reçus le styling pill = effet
   double-bouton imbriqué.

   Fix : on neutralise EXPLICITEMENT toute classe btn-* sur le wrapper
   .wp-block-button. Le link garde tout le styling.
   ═══════════════════════════════════════════════════════════════════ */

/* Neutralisation totale du WRAPPER quel que soit son set de classes btn */
html body div.wp-block-button,
html body div.wp-block-button.btn,
html body div.wp-block-button.btn-primary,
html body div.wp-block-button.btn-outline,
html body div.wp-block-button.btn-lg,
html body div.wp-block-button.is-style-fill,
html body div.wp-block-button.is-style-outline,
html body div.wp-block-button[class*="is-style-outline"] {
  /* Aucune apparence de bouton sur le wrapper : c'est un simple conteneur */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin-block: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  color: inherit !important;
  display: inline-block !important;
  overflow: visible !important;
  isolation: auto !important;
}
/* Pseudo-elements éventuels du wrapper (au cas où une règle générique les pose) */
html body div.wp-block-button::before,
html body div.wp-block-button::after,
html body div.wp-block-button.btn::before,
html body div.wp-block-button.btn::after,
html body div.wp-block-button.btn-primary::before,
html body div.wp-block-button.btn-primary::after,
html body div.wp-block-button.btn-outline::before,
html body div.wp-block-button.btn-outline::after,
html body div.wp-block-button[class*="is-style-"]::before,
html body div.wp-block-button[class*="is-style-"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* Hover sur le wrapper : pas de transformation, pas de shadow */
html body div.wp-block-button:hover,
html body div.wp-block-button.btn-primary:hover,
html body div.wp-block-button.btn-outline:hover,
html body div.wp-block-button[class*="is-style-"]:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.89 — KILL le styling sur le wrapper (RACINE du double-bouton)
   La v87 avait .btn-primary / .btn-outline standalone dans la liste
   :is(), qui matchaient le WRAPPER div ET le link. Le v88 essayait de
   neutraliser le wrapper mais perdait la spécificité contre v87+!important.

   Fix radical : on annule TOUTES les déclarations de style "bouton"
   sur tous les .wp-block-button (wrapper) avec spécificité maximale.
   `body[class] div.wp-block-button.btn-primary` = (0,3,3) !important
   bat tout le monde.
   ═══════════════════════════════════════════════════════════════════ */

body[class] div.wp-block-button,
body[class] div.wp-block-button.btn,
body[class] div.wp-block-button.btn-primary,
body[class] div.wp-block-button.btn-outline,
body[class] div.wp-block-button.btn-lg,
body[class] div.wp-block-button.is-style-fill,
body[class] div.wp-block-button.is-style-outline,
body[class] div.wp-block-button[class*="is-style-outline"] {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-radius: 0 !important;
  outline: none !important;
  outline-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  color: inherit !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  isolation: auto !important;
  position: static !important;
  text-decoration: none !important;
  cursor: default !important;
  transition: none !important;
}

/* Pseudo-elements wrapper : scrap total */
body[class] div.wp-block-button::before,
body[class] div.wp-block-button::after,
body[class] div.wp-block-button.btn::before,
body[class] div.wp-block-button.btn::after,
body[class] div.wp-block-button.btn-primary::before,
body[class] div.wp-block-button.btn-primary::after,
body[class] div.wp-block-button.btn-outline::before,
body[class] div.wp-block-button.btn-outline::after,
body[class] div.wp-block-button.is-style-fill::before,
body[class] div.wp-block-button.is-style-fill::after,
body[class] div.wp-block-button[class*="is-style-outline"]::before,
body[class] div.wp-block-button[class*="is-style-outline"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Hover wrapper : aucune transformation */
body[class] div.wp-block-button:hover,
body[class] div.wp-block-button.btn-primary:hover,
body[class] div.wp-block-button.btn-outline:hover,
body[class] div.wp-block-button.is-style-fill:hover,
body[class] div.wp-block-button[class*="is-style-outline"]:hover {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
body[class] div.wp-block-button:hover::before,
body[class] div.wp-block-button:hover::after,
body[class] div.wp-block-button.btn-primary:hover::before,
body[class] div.wp-block-button.btn-primary:hover::after,
body[class] div.wp-block-button.btn-outline:hover::before,
body[class] div.wp-block-button.btn-outline:hover::after {
  content: none !important;
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.92 — Persona toggle centré sur les pages Spoke
   .persona-switch est inline-flex (intrinsic width), donc se centre
   via text-align:center sur son wrapper. Sur la home ça marche, sur
   /geiq-btp/ et /geiq-multi/ le wrapper hérite de left → on force.
   ═══════════════════════════════════════════════════════════════════ */

html body .persona-switch-wrap {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
}

/* Backup : si la wrap n'existe pas (cas markup direct), on centre via
   margin-inline auto sur le toggle lui-même. */
html body .hero__content > .persona-switch,
html body .section--hero-spoke .persona-switch {
  margin-inline: auto !important;
  display: flex !important;
  width: fit-content !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.93 — Toggle persona : breathing room avec la pastille eyebrow
   Maintenant centré (v92) mais collé à la pastille "GEIQ BTP 56 ·
   Entreprises" en dessous. On bump l'espace.
   ═══════════════════════════════════════════════════════════════════ */

html body .persona-switch-wrap {
  margin-bottom: clamp(28px, 4vw, 44px) !important;
}
html body .persona-switch-wrap + p.section-eyebrow,
html body .persona-switch-wrap + .hero__pill,
html body .persona-switch-wrap ~ * {
  /* sécurité : si une suite reset les marges, on garantit un gap */
}
html body .persona-switch {
  margin-bottom: clamp(20px, 3vw, 32px) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.96 — Spoke pages cleanup : contact chips + stats metric-style
   + testimonials hero amélioré
   ═══════════════════════════════════════════════════════════════════ */


/* ╔═══ CONTACT CHIPS (option C) — section--contact-spoke ═══╗ */

html body .section--contact-spoke .container {
  max-width: 760px !important;
  margin-inline: auto !important;
}

html body .contact-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 32px !important;
}
html body .contact-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
  white-space: nowrap !important;
}
html body .contact-chip:hover {
  transform: translateY(-1px) !important;
  border-color: var(--color-primary, #c41e3a) !important;
  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.10) !important;
}
html body .contact-chip__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-primary, #c41e3a) !important;
  flex-shrink: 0 !important;
}
html body .contact-chip__icon svg {
  width: 14px !important;
  height: 14px !important;
}
html body .contact-chip__text {
  display: inline-flex !important;
  align-items: center !important;
}

[data-theme="dark"] html body .contact-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
[data-theme="dark"] html body .contact-chip:hover {
  border-color: rgba(255, 107, 138, 0.6) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

/* CTA actions sous les chips : centré */
html body .contact-actions {
  justify-content: center !important;
}

/* Mobile : chips full width pour ne pas wrap bizarrement */
@media (max-width: 600px) {
  html body .contact-chip {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
  }
}


/* ╔═══ STATS-BAND avec class metric-style → cards séparées comme home ═══╗ */

html body .stats-band.metric-style {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: clamp(24px, 4vw, 40px) !important;
}
html body .stats-band.metric-style .stat-item {
  background: var(--surface-card-bg, rgba(255, 255, 255, 0.96)) !important;
  border: 1px solid var(--surface-card-border, rgba(196, 30, 58, 0.08)) !important;
  border-radius: 16px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.04) !important;
  position: relative !important;
}
html body .stats-band.metric-style .stat-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(196, 30, 58, 0.18) !important;
  box-shadow: 0 8px 24px rgba(196, 30, 58, 0.10) !important;
}

/* La "valeur" du chiffre — cible le shortcode rendu (.stat-val ou children) */
html body .stats-band.metric-style .stat-item > p:first-of-type:not(.stat-item__label),
html body .stats-band.metric-style .stat-item .stat-val,
html body .stats-band.metric-style .stat-item .geiq56-stat-val {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  margin: 0 !important;
}
html body .stats-band.metric-style .stat-item__label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--color-neutral-600, #6a6a6a) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  html body .stats-band.metric-style {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  html body .stats-band.metric-style {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html body .stats-band.metric-style .stat-item {
    padding: 22px 16px !important;
  }
}

[data-theme="dark"] html body .stats-band.metric-style .stat-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] html body .stats-band.metric-style .stat-item > p:first-of-type:not(.stat-item__label) {
  color: rgba(255, 255, 255, 0.95) !important;
}


/* ╔═══ TESTIMONIAL HERO amélioré (Marie-Pierre / Laurent) ═══╗ */

html body .section--testimonial-hero blockquote.is-style-testimonial-hero {
  position: relative !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 40px 32px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(196, 30, 58, 0.10) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 36px rgba(196, 30, 58, 0.06) !important;
  text-align: center !important;
}
/* Big quote mark décoratif en haut */
html body .section--testimonial-hero blockquote.is-style-testimonial-hero::before {
  content: '“' !important;
  position: absolute !important;
  top: -8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 96px !important;
  line-height: 1 !important;
  color: var(--color-primary, #c41e3a) !important;
  opacity: 0.7 !important;
  font-style: italic !important;
}
html body .section--testimonial-hero blockquote.is-style-testimonial-hero p {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  font-style: italic !important;
  margin: 0 0 24px !important;
}
/* Copie Gutenberg locale : sur les deux pages GEIQ, le bloc Citation ajoute
   un <p> absent du rendu staging. Garder son texte éditable sans augmenter
   la hauteur de la carte (3 ou 5 lignes selon l'entité). */
html body.page-id-30778 .section--testimonial-hero blockquote.is-style-testimonial-hero > p:first-child,
html body.page-id-30779 .section--testimonial-hero blockquote.is-style-testimonial-hero > p:first-child {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  line-height: 1.5 !important;
}
html body .section--testimonial-hero blockquote.is-style-testimonial-hero cite {
  display: block !important;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--color-primary, #c41e3a) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

/* Slot photo placeholder (à remplir quand les vraies photos arriveront).
   Pour l'instant : aucune photo, juste le quote propre. Quand on aura
   les photos, on ajoutera <img class="testimonial-hero__avatar"> dans
   le markup et la CSS la prendra en charge automatiquement. */
html body .section--testimonial-hero .testimonial-hero__avatar {
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: -64px auto 18px !important;
  border: 4px solid #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
}

@media (max-width: 600px) {
  html body .section--testimonial-hero blockquote.is-style-testimonial-hero {
    padding: 32px 22px !important;
  }
  html body .section--testimonial-hero blockquote.is-style-testimonial-hero::before {
    font-size: 72px !important;
    top: -4px !important;
  }
}

/* v10.18.67 — fond OPAQUE foncé en dark (au lieu de glass transparent
   qui laissait passer le radial-gradient rouge du spotlight derrière
   et donnait un effet rosé/blanc). Ciblé sur tous les usages :
   .section--testimonial-hero (entreprises, geiq-btp, geiq-multi,
   candidats single hero) ET .testimonials-carousel__slide (carousel
   /candidats/). Spec ultra-haute html[data-theme] body.page pour
   battre toutes les rules light. */
html[data-theme="dark"] body blockquote.is-style-testimonial-hero,
html[data-theme="dark"] body .wp-block-quote.is-style-testimonial-hero,
html[data-theme="dark"] body.page .section--testimonial-hero blockquote.is-style-testimonial-hero,
html[data-theme="dark"] body.page .testimonials-carousel__slide blockquote.is-style-testimonial-hero,
html[data-theme="dark"] body.page .testimonials-carousel__slide .wp-block-quote {
  background: #1a171b !important;
  background-color: #1a171b !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="dark"] html body .section--testimonial-hero blockquote.is-style-testimonial-hero p {
  color: rgba(255, 255, 255, 0.95) !important;
}
[data-theme="dark"] html body .section--testimonial-hero blockquote.is-style-testimonial-hero::before {
  color: rgba(255, 107, 138, 0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════
   v10.17.103 — Pattern W/A inversé sur Spoke à partir de Features
   "Six métiers" (features-btp/multi) passe en A, et le reste suit.
   Rythme final : H W | T A | Why W | Features A | How W | Stats A
                | Jobs W | Contact A | CTA W
   ═══════════════════════════════════════════════════════════════════ */

/* ── BLANCHES + spotlight ── */
html body.page :is(.entry-content, .site-main) > section:is(
  .section--why,
  .section--how,
  .section--jobs,
  .section--cta-final
) {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page :is(.entry-content, .site-main) > section:is(
  .section--why,
  .section--how,
  .section--jobs,
  .section--cta-final
) > .glow-canvas {
  display: block !important;
}

/* ── GRISES (alt) ── */
html body.page :is(.entry-content, .site-main) > section:is(
  .section--testimonial-hero,
  .section--features-btp,
  .section--features-multi,
  .section--stats,
  .section--contact-spoke
) {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page :is(.entry-content, .site-main) > section:is(
  .section--testimonial-hero,
  .section--features-btp,
  .section--features-multi,
  .section--stats,
  .section--contact-spoke
) > .glow-canvas {
  display: none !important;
}

[data-theme="dark"] html body.page :is(.entry-content, .site-main) > section:is(
  .section--why,
  .section--how,
  .section--jobs,
  .section--cta-final
) {
  background: var(--section-neutral-bg, #1a171b) !important;
}
[data-theme="dark"] html body.page :is(.entry-content, .site-main) > section:is(
  .section--testimonial-hero,
  .section--features-btp,
  .section--features-multi,
  .section--stats,
  .section--contact-spoke
) {
  background: var(--section-alt-bg, #141114) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.105 — Restore : v103 light grey rule supprimée par erreur
   en v104. La règle dark était restée mais la light avait disparu →
   features-btp/multi/stats/contact étaient sans bg en light mode.
   ═══════════════════════════════════════════════════════════════════ */

html body.page :is(.entry-content, .site-main) > section:is(
  .section--testimonial-hero,
  .section--features-btp,
  .section--features-multi,
  .section--stats,
  .section--contact-spoke
) {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page :is(.entry-content, .site-main) > section:is(
  .section--testimonial-hero,
  .section--features-btp,
  .section--features-multi,
  .section--stats,
  .section--contact-spoke
) > .glow-canvas {
  display: none !important;
}

/* WHITE light pour Why / How / Jobs / CTA-final */
html body.page :is(.entry-content, .site-main) > section:is(
  .section--why,
  .section--how,
  .section--jobs,
  .section--cta-final
) {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page :is(.entry-content, .site-main) > section:is(
  .section--why,
  .section--how,
  .section--jobs,
  .section--cta-final
) > .glow-canvas {
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.108 — Rythme W/A persona-aware avec spec MAX
   ─────────────────────────────────────────────────────────────────
   Les sections persona-view doublent dans le DOM (candidate ET company
   à la suite). Il faut donc gérer le bg PAR persona active pour avoir
   strict alternation W/A dans la séquence visible.

   ENTREPRISE (data-persona="company") flow visible :
     Hero W | Test A | Why W | Features A | Stats W | Contact A | CTA W

   CANDIDAT (data-persona="candidate") flow visible :
     Hero W | Test A | Why W | Features A | How W | Jobs A | Contact W | CTA A

   Sections universelles (mêmes BG les 2 personas) :
     Why W, Features A, Testimonial A, How W (cand only), Stats W (ent only), Jobs A (cand only)
   Sections persona-dépendantes : Contact-spoke, CTA-final
   ═══════════════════════════════════════════════════════════════════ */

/* ── UNIVERSELLES ── */
/* WHITE */
html body.page.wp-theme-ollie section.section.section--why,
html body.page.wp-theme-ollie section.section.section--how,
html body.page.wp-theme-ollie section.section.section--stats {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page.wp-theme-ollie section.section.section--why > .glow-canvas,
html body.page.wp-theme-ollie section.section.section--how > .glow-canvas,
html body.page.wp-theme-ollie section.section.section--stats > .glow-canvas {
  display: block !important;
}

/* GREY */
html body.page.wp-theme-ollie section.section.section--testimonial-hero,
html body.page.wp-theme-ollie section.section.section--features-btp,
html body.page.wp-theme-ollie section.section.section--features-multi,
html body.page.wp-theme-ollie section.section.section--jobs {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page.wp-theme-ollie section.section.section--testimonial-hero > .glow-canvas,
html body.page.wp-theme-ollie section.section.section--features-btp > .glow-canvas,
html body.page.wp-theme-ollie section.section.section--features-multi > .glow-canvas,
html body.page.wp-theme-ollie section.section.section--jobs > .glow-canvas {
  display: none !important;
}

/* v10.18.32 — /geiq-multi/ : section "Quatre indicateurs qui parlent" en GRIS
   Override scoped page-id 30779 + id="stats-multi" pour ne pas casser
   la section--stats blanche de /entreprises/. */
html body.page.page-id-30779.wp-theme-ollie section.section.section--stats[id="stats-multi"] {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page.page-id-30779.wp-theme-ollie section.section.section--stats[id="stats-multi"] > .glow-canvas {
  display: none !important;
}
[data-theme="dark"] html body.page.page-id-30779.wp-theme-ollie section.section.section--stats[id="stats-multi"] {
  background: var(--section-alt-bg, #141114) !important;
}

/* v10.18.45 — /geiq-btp/ : alternance fonds après retrait de la section
   contact-spoke. Sans elle on a 4 gris consécutifs (candidate) ou 2 blancs
   (company). On force :
   - cta-final candidate → blanc + spotlight ON (coupe la série de gris)
   - cta-final company → gris + spotlight OFF (évite le double blanc). */
html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--candidate,
html[data-persona="candidate"] body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--candidate {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--candidate > .glow-canvas,
html[data-persona="candidate"] body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--candidate > .glow-canvas {
  display: block !important;
}
html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--company,
html[data-persona="company"] body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--company {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--company > .glow-canvas,
html[data-persona="company"] body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--company > .glow-canvas {
  display: none !important;
}
[data-theme="dark"] html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--candidate {
  background: var(--section-neutral-bg, #1a171b) !important;
}
[data-theme="dark"] html body.page.page-id-30778.wp-theme-ollie section.section.section--cta-final.persona-view--company {
  background: var(--section-alt-bg, #141114) !important;
}

/* Footer miroir inversé /geiq-btp/ : suit le persona (le système :has()
   par défaut calcule sur la dernière section structurelle, mais ici la
   dernière VISIBLE dépend du persona).
   - candidate : last visible = cta-final-cand (W) → footer GRIS
   - company   : last visible = cta-final-comp (G) → footer BLANC + spot */
html body.page.page-id-30778 .site-footer {
  /* default = candidate */
  --footer-bg: var(--section-alt-bg) !important;
  --footer-glow-a: 0 !important;
}
html[data-persona="candidate"] body.page.page-id-30778 .site-footer {
  --footer-bg: var(--section-alt-bg) !important;
  --footer-glow-a: 0 !important;
}
html[data-persona="company"] body.page.page-id-30778 .site-footer {
  --footer-bg: var(--section-neutral-bg) !important;
  --footer-glow-a: 1 !important;
}

/* v10.18.44 — /le-dispositif/ : section "Trois temps, une même méthode"
   (.section--why) en GRIS au lieu de blanc. Override scoped page-id-30699
   pour ne pas casser les sections--why des autres pages. */
html body.page.page-id-30699.wp-theme-ollie section.section.section--why {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page.page-id-30699.wp-theme-ollie section.section.section--why > .glow-canvas {
  display: none !important;
}
[data-theme="dark"] html body.page.page-id-30699.wp-theme-ollie section.section.section--why {
  background: var(--section-alt-bg, #141114) !important;
}

/* v10.18.33 — /geiq-multi/ : CTA-final en BLANC + spotlight ON, quel que
   soit le persona. Sinon en mode candidate il est gris (règle persona
   globale) et se colle visuellement au gris de la stats juste au-dessus. */
html body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final,
html[data-persona="candidate"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final,
html[data-persona="company"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final > .glow-canvas,
html[data-persona="candidate"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final > .glow-canvas,
html[data-persona="company"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final > .glow-canvas {
  display: block !important;
}
[data-theme="dark"] html body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final,
[data-theme="dark"] html[data-persona="candidate"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final,
[data-theme="dark"] html[data-persona="company"] body.page.page-id-30779.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-neutral-bg, #1a171b) !important;
}

/* ── PERSONA-DÉPENDANTES ── */
/* CANDIDATE persona : Contact = W, CTA = A */
html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--contact-spoke {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--contact-spoke > .glow-canvas {
  display: block !important;
}
html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--cta-final > .glow-canvas {
  display: none !important;
}

/* COMPANY persona : Contact = A, CTA = W */
html[data-persona="company"] body.page.wp-theme-ollie section.section.section--contact-spoke {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html[data-persona="company"] body.page.wp-theme-ollie section.section.section--contact-spoke > .glow-canvas {
  display: none !important;
}
html[data-persona="company"] body.page.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html[data-persona="company"] body.page.wp-theme-ollie section.section.section--cta-final > .glow-canvas {
  display: block !important;
}

/* ── DARK MODE ── */
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--why,
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--how,
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--stats {
  background: var(--section-neutral-bg, #1a171b) !important;
}
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--testimonial-hero,
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--features-btp,
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--features-multi,
[data-theme="dark"] html body.page.wp-theme-ollie section.section.section--jobs {
  background: var(--section-alt-bg, #141114) !important;
}
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--contact-spoke {
  background: var(--section-neutral-bg, #1a171b) !important;
}
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-alt-bg, #141114) !important;
}
[data-theme="dark"] html[data-persona="company"] body.page.wp-theme-ollie section.section.section--contact-spoke {
  background: var(--section-alt-bg, #141114) !important;
}
[data-theme="dark"] html[data-persona="company"] body.page.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-neutral-bg, #1a171b) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.110 — Stats Spoke alignées sur metric-card de la home
   Icône en pill rouge clair en haut + chiffre serif gros + label
   ═══════════════════════════════════════════════════════════════════ */

html body.page.wp-theme-ollie .stats-band.metric-style .stat-item .stat-item__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  background: rgba(196, 30, 58, 0.08) !important;
  border-radius: 12px !important;
  color: var(--color-primary, #c41e3a) !important;
  flex-shrink: 0 !important;
}
html body.page.wp-theme-ollie .stats-band.metric-style .stat-item .stat-item__icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

[data-theme="dark"] html body.page.wp-theme-ollie .stats-band.metric-style .stat-item .stat-item__icon {
  background: rgba(255, 107, 138, 0.14) !important;
  color: #ff6b8a !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.111 — Stats Spoke = vraies metric-card de la home
   Le shortcode geiq56_stat_setting rend <div class="stats-band__val">
   on l'aligne sur le rendu metric-card__val (Instrument Serif gros).
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper hero__metrics sur Spoke : grid 4 cols avec gap visible */
html body.page.wp-theme-ollie .stats-section .hero__metrics,
html body.page.wp-theme-ollie .section--stats .hero__metrics {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1100px !important;
  margin: clamp(24px, 4vw, 40px) auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Le shortcode rend .stats-band__val — on lui donne le look metric-card__val */
html body.page.wp-theme-ollie .hero__metrics .metric-card .stats-band__val {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--color-neutral-900, #1a1a1a) !important;
  margin: 0 0 6px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

[data-theme="dark"] html body.page.wp-theme-ollie .hero__metrics .metric-card .stats-band__val {
  color: rgba(255, 255, 255, 0.95) !important;
}

@media (max-width: 900px) {
  html body.page.wp-theme-ollie .stats-section .hero__metrics,
  html body.page.wp-theme-ollie .section--stats .hero__metrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  html body.page.wp-theme-ollie .stats-section .hero__metrics,
  html body.page.wp-theme-ollie .section--stats .hero__metrics {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.114 — Section how : timeline horizontale (option B)
   4 numéros reliés par dashes pointillés en haut + 4 cards centrées
   sous chacun. Lecture chronologique forte, casse la monotonie des
   feature-cards uniformes.
   ═══════════════════════════════════════════════════════════════════ */

.how-timeline {
  max-width: 1100px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 0;
}

/* Row des numéros avec connecteurs entre */
.how-timeline__nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  margin: 0 0 28px;
}
.how-timeline__nums::before {
  content: '';
  position: absolute;
  top: 22px; /* center du num 44px */
  left: 12.5%; /* 1/8 = milieu de la 1ère col */
  right: 12.5%;
  height: 2px;
  background-image: linear-gradient(to right, var(--color-primary, #c41e3a) 50%, transparent 50%);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  z-index: 0;
  animation: howTimelineFlow 1.4s linear infinite;
}
@keyframes howTimelineFlow {
  from { background-position: 0 0; }
  to   { background-position: 10px 0; }
}

.how-timeline__num {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d6224a 0%, #a51932 100%);
  color: #fff;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 14px rgba(196, 30, 58, 0.32);
}

/* Row des cards alignées sous chaque numéro */
.how-timeline__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.how-timeline__card {
  text-align: center;
  padding: 0 8px;
}
.how-timeline__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--color-neutral-900, #1a1a1a);
}
.how-timeline__desc {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--color-neutral-600, #6a6a6a);
  margin: 0;
}

/* Mobile : stack vertical avec connecteurs verticaux */
@media (max-width: 900px) {
  .how-timeline__nums {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
  }
  .how-timeline__nums::before {
    display: none;
  }
  .how-timeline__cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .how-timeline__num {
    margin: 0 auto;
  }
  /* Combine num + card en bloc vertical pour mobile */
  .how-timeline {
    display: flex;
    flex-direction: column;
  }
  .how-timeline__nums,
  .how-timeline__cards {
    display: contents;
  }
  .how-timeline__num {
    order: var(--n, 0);
    margin: 24px auto 14px;
  }
  .how-timeline__card {
    order: var(--n, 0);
    padding: 0 16px;
    max-width: 360px;
    margin: 0 auto;
  }
  /* Order : num1 (1), card1 (2), num2 (3), card2 (4)... */
  .how-timeline__nums .how-timeline__num:nth-child(1) { order: 1; }
  .how-timeline__cards .how-timeline__card:nth-child(1) { order: 2; }
  .how-timeline__nums .how-timeline__num:nth-child(2) { order: 3; }
  .how-timeline__cards .how-timeline__card:nth-child(2) { order: 4; }
  .how-timeline__nums .how-timeline__num:nth-child(3) { order: 5; }
  .how-timeline__cards .how-timeline__card:nth-child(3) { order: 6; }
  .how-timeline__nums .how-timeline__num:nth-child(4) { order: 7; }
  .how-timeline__cards .how-timeline__card:nth-child(4) { order: 8; }

  /* Connecteur vertical dashed entre cards et num suivant */
  .how-timeline__card:not(:last-child)::after {
    content: '';
    display: block;
    width: 2px;
    height: 32px;
    margin: 16px auto -8px;
    background-image: linear-gradient(to bottom, var(--color-primary, #c41e3a) 50%, transparent 50%);
    background-size: 2px 8px;
    background-repeat: repeat-y;
  }
}

/* Reduced motion : pas de flow */
@media (prefers-reduced-motion: reduce) {
  .how-timeline__nums::before {
    animation: none !important;
  }
}

/* Dark mode */
[data-theme="dark"] .how-timeline__title {
  color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .how-timeline__desc {
  color: rgba(255, 255, 255, 0.55);
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.119 — Page /candidats/ : Why en 2x2 + rythme W/A propre
   page-id 30700
   ═══════════════════════════════════════════════════════════════════ */

/* Why en 2x2 (au lieu de 3+1 orphelin) */
html body.page-id-30700 .section--why .features-grid,
html body.page-id-30700 .section--why .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  max-width: 920px !important;
  margin-inline: auto !important;
}
html body.page-id-30700 .section--why .feature-card,
html body.page-id-30700 .section--why .wp-block-column {
  flex-basis: auto !important;
  width: auto !important;
  margin: 0 !important;
}
@media (max-width: 700px) {
  html body.page-id-30700 .section--why .features-grid,
  html body.page-id-30700 .section--why .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* v10.18.47 — Rythme W/G strict sur /candidats/ (7 sections, alternance
   parfaite à partir du hero blanc) :
   1. hero        W
   2. why-eng     G
   3. why         W
   4. process     G
   5. testimonials W
   6. faq         G
   7. cta-final   W
   Footer suit miroir-inversé : dernière W → footer GRIS. */

/* Section 2 : --why.--engagements → GRIS */
html body.page-id-30700.wp-theme-ollie section.section.section--why.section--engagements {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--why.section--engagements > .glow-canvas {
  display: none !important;
}

/* Section 3 : --why pure (sans --engagements) → BLANC + spotlight */
html body.page-id-30700.wp-theme-ollie section.section.section--why:not(.section--engagements) {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--why:not(.section--engagements) > .glow-canvas {
  display: block !important;
}

/* Section 4 : --process → GRIS */
html body.page-id-30700.wp-theme-ollie section.section.section--process {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--process > .glow-canvas {
  display: none !important;
}

/* Section 5 : --testimonials → BLANC + spotlight */
html body.page-id-30700.wp-theme-ollie section.section.section--testimonials {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--testimonials > .glow-canvas {
  display: block !important;
}

/* Section 6 : --faq → GRIS */
html body.page-id-30700.wp-theme-ollie section.section.section--faq {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--faq > .glow-canvas {
  display: none !important;
}

/* Section 7 : --cta-final → BLANC + spotlight */
html body.page-id-30700.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html body.page-id-30700.wp-theme-ollie section.section.section--cta-final > .glow-canvas {
  display: block !important;
}

/* Footer miroir-inversé : dernière section visible = blanche → footer GRIS */
html body.page-id-30700 .site-footer {
  --footer-bg: var(--section-alt-bg) !important;
  --footer-glow-a: 0 !important;
}

/* Dark mode */
[data-theme="dark"] html body.page-id-30700.wp-theme-ollie section.section.section--why,
[data-theme="dark"] html body.page-id-30700.wp-theme-ollie section.section.section--testimonials,
[data-theme="dark"] html body.page-id-30700.wp-theme-ollie section.section.section--cta-final {
  background: var(--section-alt-bg, #141114) !important;
}
[data-theme="dark"] html body.page-id-30700.wp-theme-ollie section.section.section--process,
[data-theme="dark"] html body.page-id-30700.wp-theme-ollie section.section.section--faq {
  background: var(--section-neutral-bg, #1a171b) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.17.120 — /candidats/ : bump spec pour battre v108 persona-aware
   v108 a `html[data-persona="X"] body.page.wp-theme-ollie section...`
   = spec (0,5,3) qui battait ma v119 (0,4,3).
   On bump avec html[lang] + body.page.page-id-30700.wp-theme-ollie
   + section.section.section.section--X = (0,7,3).
   ═══════════════════════════════════════════════════════════════════ */

/* v10.18.48 — Refonte complète de l'alternance /candidats/ (7 sections).
   Cible : H W | Why-eng G | Why W | Process G | Test-hero W | FAQ G | CTA W
   Ces règles ont la spec la plus haute (0,7,3) — elles sont la source
   de vérité pour les fonds /candidats/. */

/* GREY : Why-engagements, Process, FAQ */
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why.section--engagements,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--process,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--faq {
  background: var(--section-alt-bg, #f9fafb) !important;
}
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why.section--engagements > .glow-canvas,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--process > .glow-canvas,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--faq > .glow-canvas {
  display: none !important;
}

/* WHITE : Why pure (sans engagements), Testimonial-hero, CTA-final */
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why:not(.section--engagements),
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--testimonial-hero,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--cta-final {
  background: var(--section-neutral-bg, #ffffff) !important;
}
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why:not(.section--engagements) > .glow-canvas,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--testimonial-hero > .glow-canvas,
html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--cta-final > .glow-canvas {
  display: block !important;
}

/* Dark mode */
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why.section--engagements,
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--process,
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--faq {
  background: var(--section-alt-bg, #141114) !important;
}
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--why:not(.section--engagements),
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--testimonial-hero,
[data-theme="dark"] html[lang] body.page.page-id-30700.wp-theme-ollie section.section.section.section--cta-final {
  background: var(--section-neutral-bg, #1a171b) !important;
}

/* ══════════════════════════════════════════════════
   v10.17.122 — TESTIMONIALS MARQUEE
   Bande horizontale infinie style "wall of love" (openclaw.ai).
   Activée via [geiq56_testimonials display="marquee"].
   ══════════════════════════════════════════════════ */

.testimonials-marquee {
  --marquee-duration: 60s;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Fade des deux bords pour un défilement sans coupure visuelle */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  /* Le track déborde du conteneur — on neutralise tout container-query padding */
  padding-block: 0.5rem;
}

.testimonials-marquee__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tcs-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

@keyframes tcs-marquee {
  from { transform: translate3d(0, 0, 0); }
  /* Le track contient 3× la liste → translate -33.333% ramène la 2e copie
     à la position de la 1re et boucle sans saut visuel. */
  to   { transform: translate3d(-33.333%, 0, 0); }
}

/* Pause au hover : on laisse à l'utilisateur le temps de lire */
.testimonials-marquee:hover .testimonials-marquee__track,
.testimonials-marquee:focus-within .testimonials-marquee__track {
  animation-play-state: paused;
}

/* Card compacte dédiée au marquee.
   Spec forte (.testimonials-marquee .testimonial) pour battre les
   .testimonial globales qui forcent en !important. */
.testimonials-marquee .testimonial,
.testimonials-marquee .testimonial.wp-block-group {
  flex: 0 0 300px !important;
  max-width: 300px !important;
  margin: 0 !important;
  padding: 1.5rem 1.25rem 1.125rem !important;
  gap: 1rem !important;
  border-radius: 16px !important;
  position: relative;
  overflow: visible !important; /* sinon ça coupe le filigrane et la box-shadow */
  /* Liseré rouge fin en haut — signature GEIQ */
  border-top: 2px solid #e30043 !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* Filigrane : gros guillemet rouge en arrière-plan, opacity bumped
   pour qu'il se voit vraiment (avant: 0.10 — trop discret). */
.testimonials-marquee .testimonial::after {
  content: '\201C';
  position: absolute;
  top: 4px;
  right: 14px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 110px;
  line-height: 0.85;
  color: rgba(227, 0, 67, 0.22);
  pointer-events: none;
  z-index: 0;
  font-style: normal;
  font-weight: 400;
}

/* Hover card : pas de soulèvement — on accentue juste le halo
   rouge et le filigrane pour signaler la card pointée. */
.testimonials-marquee .testimonial:hover {
  box-shadow: 0 12px 28px -16px rgba(227, 0, 67, 0.45),
              0 4px 12px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(227, 0, 67, 0.25) !important;
  z-index: 2;
}
.testimonials-marquee .testimonial:hover::after {
  color: rgba(227, 0, 67, 0.32);
}

/* Quote : on FORCE le reset du clamp (au cas où une ancienne règle
   cachée par le navigateur traînerait), et on neutralise les
   guillemets typo pour ne pas doubler le filigrane. */
.testimonials-marquee .testimonial__quote {
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  position: relative;
  z-index: 1;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}
.testimonials-marquee .testimonial__quote::before,
.testimonials-marquee .testimonial__quote::after {
  display: none !important;
}

/* Auteur : flex avec avatar rouge à gauche.
   L'avatar est généré via ::before + attr(data-initial) — pas de markup
   supplémentaire à porter. */
.testimonials-marquee .testimonial__author {
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-top: auto;
}
.testimonials-marquee .testimonial__author::before {
  content: attr(data-initial);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e30043;
  color: #fff;
  font-family: var(--font-sans, system-ui);
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  box-shadow: 0 2px 6px -2px rgba(227, 0, 67, 0.5);
}
.testimonials-marquee .testimonial__author-meta {
  min-width: 0;
}
.testimonials-marquee .testimonial__name {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}
.testimonials-marquee .testimonial__role {
  font-size: 0.6875rem !important;
  margin-top: 1px !important;
  line-height: 1.35;
  color: var(--color-neutral-600) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dark mode : on garde l'avatar rouge mais on adoucit le filigrane
   et les ombres pour rester lisible sur fond sombre */
[data-theme="dark"] .testimonials-marquee .testimonial::after {
  color: rgba(227, 0, 67, 0.18);
}
[data-theme="dark"] .testimonials-marquee .testimonial:hover {
  box-shadow: 0 12px 28px -16px rgba(227, 0, 67, 0.6),
              0 4px 12px -8px rgba(0, 0, 0, 0.4);
}

/* Mobile : un cran plus petit + vitesse augmentée */
@media (max-width: 760px) {
  .testimonials-marquee {
    --marquee-duration: 40s;
  }
  .testimonials-marquee__track { gap: 14px; }
  .testimonials-marquee .testimonial,
  .testimonials-marquee .testimonial.wp-block-group {
    flex: 0 0 260px !important;
    max-width: 260px !important;
    padding: 1.25rem 1.125rem 1rem !important;
  }
  .testimonials-marquee .testimonial::after {
    font-size: 96px;
    top: -16px;
  }
  .testimonials-marquee .testimonial__quote {
    font-size: 0.8125rem !important;
  }
  .testimonials-marquee .testimonial__author::before {
    width: 30px; height: 30px; font-size: 12px;
  }
}

/* Reduced motion : on fige et on laisse l'utilisateur swiper */
@media (prefers-reduced-motion: reduce) {
  .testimonials-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: x mandatory;
  }
  .testimonials-marquee__track {
    animation: none;
  }
  .testimonials-marquee .testimonial {
    scroll-snap-align: start;
  }
}

/* Marquee dans une section--testimonials : on retire le max-width du
   conteneur pour que la bande prenne toute la largeur viewport. */
.section--testimonials > .wp-block-group__inner-container > .testimonials-marquee,
.section--testimonials .testimonials-marquee {
  max-width: none;
  margin-inline: calc( 50% - 50vw );
  width: 100vw;
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.1 — Organigramme stylé (section--admins page /entreprises/)
   ────────────────────────────────────────────────────────────────────
   Hiérarchie visuelle :
     1. Président (carte top, full width, mise en valeur)
     2. Vice-président (carte sous, alignée centre)
     3. Trésorier + Secrétaire (row 2 colonnes)
     4. Membres du bureau (grid responsive auto-fit, ≥9 cartes)

   - Pastille de rôle en haut de chaque carte (couleur primary)
   - Animation cascade au scroll via IntersectionObserver (cf JS) avec
     `.org-card.is-visible` qui déclenche un fade-up
   - Hover : translateY(-3px) + shadow renforcée + ring primary
   - Mobile : stack vertical full width
   ════════════════════════════════════════════════════════════════════ */
.org-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-5) auto 0;
  max-width: 980px;
  width: 100%;
}
.org-chart__row {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}
.org-chart__row--president    { grid-template-columns: minmax(0, 360px); justify-content: center; }
.org-chart__row--vp           { grid-template-columns: minmax(0, 320px); justify-content: center; }
.org-chart__row--bureau       { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; }
.org-chart__row--membres      { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.org-card {
  position: relative;
  background: var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3) var(--space-3);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  box-shadow: 0 4px 16px rgba(26, 23, 27, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  /* État initial pour cascade fade-up */
  opacity: 0; transform: translateY(14px);
  will-change: transform, opacity;
}
.org-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s ease;
}
.org-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(26, 23, 27, .08), 0 0 0 1.5px rgba(var(--primary-rgb, 227, 0, 67), .18);
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .26);
}
.org-card__role {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(var(--primary-rgb, 227, 0, 67), .08);
  color: var(--primary, #e30043);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.org-card__name {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-neutral-900, #1a171b);
  margin: 0;
}
.org-card__entreprise {
  font-size: .82rem;
  color: var(--color-neutral-500, #6e6c70);
  line-height: 1.35;
  margin: 0;
}
.org-card--president .org-card__name { font-size: 1.5rem; }
.org-card--president {
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .26);
}

[data-theme="dark"] .org-card {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .org-card__name {
  color: var(--color-neutral-50, #f0eef1);
}
[data-theme="dark"] .org-card__entreprise {
  color: rgba(240, 238, 241, .55);
}

/* Cascade : on délaye chaque carte selon son index pour effet "vague" */
.org-chart__row > .org-card:nth-child(1) { transition-delay: 0ms; }
.org-chart__row > .org-card:nth-child(2) { transition-delay: 60ms; }
.org-chart__row > .org-card:nth-child(3) { transition-delay: 120ms; }
.org-chart__row > .org-card:nth-child(4) { transition-delay: 180ms; }
.org-chart__row > .org-card:nth-child(5) { transition-delay: 240ms; }
.org-chart__row > .org-card:nth-child(6) { transition-delay: 300ms; }
.org-chart__row > .org-card:nth-child(7) { transition-delay: 360ms; }
.org-chart__row > .org-card:nth-child(8) { transition-delay: 420ms; }
.org-chart__row > .org-card:nth-child(9) { transition-delay: 480ms; }

@media (max-width: 720px) {
  .org-chart__row--bureau,
  .org-chart__row--membres { grid-template-columns: 1fr; }
  .org-card__name { font-size: 1.1rem; }
  .org-card--president .org-card__name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .org-card { opacity: 1; transform: none; transition: none; }
  .org-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.28 — Pattern "Qui fait quoi" (.responsabilites-grid)
   Section split GEIQ vs Entreprise pour PRODIAT (et autres).
   2 colonnes alignées, 5 lignes qui se répondent. Mobile : stack.
   ════════════════════════════════════════════════════════════════════ */
.responsabilites-grid {
  max-width: 960px;
  margin: var(--space-5, 32px) auto 0;
  padding: 0 var(--space-3, 16px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .38) 100%);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 6px 20px rgba(26, 23, 27, .04);
  overflow: hidden;
}
.responsabilites-grid__col {
  padding: var(--space-4, 24px);
  display: flex;
  flex-direction: column;
}
.responsabilites-grid__col--geiq {
  background: rgba(var(--primary-rgb, 227, 0, 67), .045);
}
/* v10.18.30 — séparateur vertical sur la PREMIÈRE colonne (peu importe
   laquelle est GEIQ ou Vous), pour rester cohérent quand on swap l'ordre. */
.responsabilites-grid__col:first-child {
  border-right: 1px solid rgba(255, 255, 255, .55);
}
.responsabilites-grid__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-3, 16px);
  margin-bottom: var(--space-3, 16px);
  border-bottom: 1px solid rgba(var(--primary-rgb, 227, 0, 67), .15);
}
.responsabilites-grid__head-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary, #e30043);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.responsabilites-grid__head-icon svg { width: 18px; height: 18px; }
.responsabilites-grid__col--vous .responsabilites-grid__head-icon {
  background: var(--color-neutral-900, #1a171b);
}
.responsabilites-grid__head-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-neutral-500, #888);
  font-weight: 500;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.responsabilites-grid__head-title {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-neutral-900, #1a171b);
  line-height: 1.1;
  margin: 0;
}
.responsabilites-grid__col--geiq .responsabilites-grid__head-title em { color: var(--primary, #e30043); font-style: italic; }
.responsabilites-grid__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 16px);
  flex: 1;
}
.responsabilites-grid__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.responsabilites-grid__row-num {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: .82rem;
  color: rgba(var(--primary-rgb, 227, 0, 67), .55);
  font-weight: 400;
  line-height: 1;
}
.responsabilites-grid__col--vous .responsabilites-grid__row-num {
  color: rgba(26, 23, 27, .35);
}
.responsabilites-grid__row-title {
  font-size: .92rem;
  font-weight: 500;
  color: var(--color-neutral-900, #1a171b);
  line-height: 1.3;
  margin: 0;
}
.responsabilites-grid__row-desc {
  font-size: .82rem;
  color: var(--color-neutral-600, #5a575c);
  line-height: 1.45;
  margin: 0;
}

/* Mobile : stack vertical, conserve les 2 headers */
@media (max-width: 720px) {
  .responsabilites-grid { grid-template-columns: 1fr; }
  .responsabilites-grid__col--geiq {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
  }
}

[data-theme="dark"] .responsabilites-grid {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .responsabilites-grid__col--geiq {
  background: rgba(var(--primary-rgb, 227, 0, 67), .1);
}
[data-theme="dark"] .responsabilites-grid__row-title { color: var(--color-neutral-50, #f0eef1); }
[data-theme="dark"] .responsabilites-grid__row-desc { color: rgba(240, 238, 241, .6); }

/* v10.18.29 → v10.18.31 — air supplémentaire entre split et encart "En clair".
   Le reset `.site-main .is-layout-flow > * { margin-top: 0 !important }`
   écrase un margin-top simple. On combine spec haute + padding-top sur
   l'encart (le padding-top n'est pas réinitialisé) + margin-bottom sur
   le wrapper grid au-dessus. */
.site-main .section--prodiat .admins-intro,
body.page .section--prodiat .admins-intro {
  margin-top: var(--space-6, 48px) !important;
  margin-bottom: var(--space-4, 24px) !important;
  padding-top: var(--space-5, 32px) !important;
}
.site-main .section--prodiat .responsabilites-grid {
  margin-bottom: var(--space-6, 48px) !important;
}


/* Bloc "Vous décidez !" — encart liquid glass cohérent avec le DS site
   v10.18.2 : refonte complète, glass + spotlight subtil, centré, sans
   border-left moche. Le strong est mis en valeur via une pill carmin. */
.admins-intro {
  position: relative;
  max-width: 760px;
  margin: var(--space-4, 24px) auto var(--space-6, 48px);
  padding: var(--space-5, 32px) var(--space-5, 32px);
  background: linear-gradient(135deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .35) 100%);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 8px 28px rgba(26, 23, 27, .06), 0 0 0 1px rgba(var(--primary-rgb, 227, 0, 67), .04) inset;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-neutral-700, #2c2c2a);
  text-align: center;
  font-weight: 400;
}
.admins-intro::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: var(--primary, #e30043);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb, 227, 0, 67), .35);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Petite étoile blanche dedans via SVG inline data-uri */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.admins-intro strong {
  display: inline-block;
  background: var(--primary, #e30043);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: 2px;
}
[data-theme="dark"] .admins-intro {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
  color: var(--color-neutral-200, #d3d1c7);
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.2 — Refonte organigramme : glass + lignes connexion + cascade
   ────────────────────────────────────────────────────────────────────
   - Cards en glass liquide (rgba + backdrop-filter)
   - Lignes verticales en CSS pur entre les rangs (::before sur .org-chart__row)
   - Carte président : ring carmin marqué + scale subtil au hover
   - Animation cascade : translateY + scale .96→1
   ════════════════════════════════════════════════════════════════════ */
.org-chart {
  position: relative;
  list-style: none;
  padding: 0;
}
.org-chart__row {
  position: relative;
  list-style: none;
}
/* Lignes de connexion verticales entre les rangs (sauf le dernier) */
.org-chart__row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--space-4, 24px) - 1px);
  width: 2px;
  height: var(--space-4, 24px);
  background: linear-gradient(to bottom, rgba(var(--primary-rgb, 227, 0, 67), .35), rgba(var(--primary-rgb, 227, 0, 67), .08));
  transform: translateX(-50%);
  border-radius: 2px;
}
.org-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .42) 100%) !important;
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .6) !important;
  box-shadow: 0 8px 22px rgba(26, 23, 27, .05), 0 1px 0 rgba(255, 255, 255, .4) inset !important;
  /* État cascade restauré */
  opacity: 0;
  transform: translateY(18px) scale(.96);
  will-change: transform, opacity;
}
.org-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform .65s cubic-bezier(.2, .85, .25, 1.05), opacity .55s ease;
}
.org-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 36px rgba(26, 23, 27, .1), 0 0 0 2px rgba(var(--primary-rgb, 227, 0, 67), .35) !important;
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .45) !important;
}
.org-card--president {
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 227, 0, 67), .12) 0%, rgba(255, 255, 255, .55) 100%) !important;
  border: 1.5px solid rgba(var(--primary-rgb, 227, 0, 67), .35) !important;
  box-shadow: 0 12px 32px rgba(var(--primary-rgb, 227, 0, 67), .12), 0 0 0 4px rgba(var(--primary-rgb, 227, 0, 67), .06) !important;
}
.org-card--president .org-card__role {
  background: var(--primary, #e30043);
  color: #fff;
}
.org-card--vp {
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .22) !important;
}
[data-theme="dark"] .org-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
[data-theme="dark"] .org-card--president {
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 227, 0, 67), .25) 0%, rgba(255, 255, 255, .08) 100%) !important;
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .45) !important;
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.2 — Bénéfices "Pourquoi adhérer" : refonte en grid auto-fit
   glass cards (au lieu du triple features-grid terne).
   ────────────────────────────────────────────────────────────────────
   - 1 grid responsive auto-fit minmax(260px, 1fr) → 1/2/3/4 cols
   - Glass cards avec hover lift + ring carmin
   - Numérotation 01-07 en pastille discrète top-left
   - Pas d'icône Gutenberg : SVG inline géré par .benefit-card__icon
   ════════════════════════════════════════════════════════════════════ */
.benefits-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3, 16px);
  max-width: 1080px;
  margin: var(--space-4, 24px) auto 0;
  padding: 0 var(--space-3, 16px);
}
/* Sprint A action #4, glass retiré, fond plein conforme DESIGN.md L84 */
.benefit-card {
  position: relative;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, rgba(26, 23, 27, 0.08));
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-4, 24px) var(--space-3, 16px) var(--space-3, 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(26, 23, 27, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .25s ease;
  overflow: hidden;
}
.benefit-card::before {
  content: counter(benefit, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(var(--primary-rgb, 227, 0, 67), .25);
  font-weight: 400;
}
.benefits-grid { counter-reset: benefit; }
.benefit-card { counter-increment: benefit; }
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(26, 23, 27, .08), 0 0 0 2px rgba(var(--primary-rgb, 227, 0, 67), .25);
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .35);
}
.benefit-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb, 227, 0, 67), .1);
  color: var(--primary, #e30043);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.benefit-card__icon svg {
  width: 22px; height: 22px;
}
.benefit-card__title {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-neutral-900, #1a171b);
  line-height: 1.2;
  margin: 0;
}
.benefit-card__desc {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-neutral-600, #5a575c);
  margin: 0;
}
[data-theme="dark"] .benefit-card {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .benefit-card__title { color: var(--color-neutral-50, #f0eef1); }
[data-theme="dark"] .benefit-card__desc  { color: rgba(240, 238, 241, .65); }

/* Lien "En savoir plus" en pill outline (charte boutons).
   v10.18.6 : le reset `.site-main .is-layout-flow > * { margin-top: 0
   !important }` (spec 0,2,1) écrasait mes 48px de margin-top. Solution :
   spec montée à 0,3,3 + utilisation de padding-top sur le wrap parent
   (le reset ne touche pas les paddings → garantie d'apparaître). */
.site-main .section--stats .stats-link-wrap,
.site-main .section--stats .geiq-view .stats-link-wrap {
  text-align: center;
  margin-block-start: 0 !important;
  padding-top: 56px !important;
  margin-bottom: 12px !important;
}
/* Renforcer aussi via le wrapper des metric cards (padding-bottom) */
.site-main .section--stats .geiq-view .hero__metrics-wrap--standalone {
  padding-bottom: 16px !important;
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.4 → v10.18.5 — /entreprises/ : forcer blanc sur testimonial-
   hero et cta-final.
   Coupable identifié L13278+ : `html[data-persona="X"] body.page.wp-
   theme-ollie section.section.section--cta-final { background: gris
   !important }` avec spec 0,5,3 — bat tout sélecteur naïf.
   Solution : on monte la spec à 0,6,3 en gardant le scope persona
   (couvre les 2 valeurs candidate/company) + ajout page-id-30701
   sur le body. Scopé /entreprises/ uniquement.
   ════════════════════════════════════════════════════════════════════ */
/* v10.18.10 — fond TRANSPARENT pour laisser le canvas dynamique de
   page-glow.js (spotlight qui suit la souris) apparaître. Battre la
   règle gris L13278+ qui force background:gris !important avec spec
   0,5,3 — on monte à 0,6,3 + transparent + canvas par-dessus.
   Le `transparent` laisse le body (blanc par défaut) en fond, le canvas
   absolute inset:0 par-dessus, et le contenu .hero__content / etc.
   reste lisible (z-index naturel du flow). */
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final {
  background: transparent !important;
}
/* Le contenu doit être stacked au-dessus du canvas pour rester lisible */
body.page-id-30701 .section--cta-final > *:not(.glow-canvas),
body.page-id-30701 .section--testimonial-hero > *:not(.glow-canvas),
body.page-id-30704 .section--cta-final > *:not(.glow-canvas),
body.page-id-30702 .section--cta-final > *:not(.glow-canvas) {
  position: relative;
  z-index: 1;
}

/* v10.18.12 — forcer le glow-canvas visible sur cta-final + testi-hero
   pour les pages /entreprises/ /offres/ /actus/. La règle universelle
   L13316 force `display: none !important` (spec 0,5,4) sur le canvas
   de cta-final quand data-persona="candidate". On clone la structure
   + ajout .page-id-XXXX pour passer en spec 0,6,4 et gagner. */
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final > .glow-canvas,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final > .glow-canvas,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero > .glow-canvas,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero > .glow-canvas,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final > .glow-canvas,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final > .glow-canvas,
html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final > .glow-canvas,
html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final > .glow-canvas {
  display: block !important;
}
/* On laisse aussi le glow-canvas s'afficher s'il est injecté par
   page-glow.js (effet de souris dynamique en plus du halo statique). */
body.page-id-30701 .section--cta-final > .glow-canvas,
body.page-id-30701 .section--testimonial-hero > .glow-canvas,
body.page-id-30704 .section--cta-final > .glow-canvas {
  display: block !important;
}
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final,
[data-theme="dark"] html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--cta-final,
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero,
[data-theme="dark"] html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30701 section.section.section--testimonial-hero,
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final,
[data-theme="dark"] html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30704 section.section.section--cta-final,
[data-theme="dark"] html[data-persona="candidate"] body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final,
[data-theme="dark"] html[data-persona="company"]   body.page.wp-theme-ollie.page-id-30702 section.section.section--cta-final {
  background: transparent !important;
}
.section--stats .stats-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--primary, #e30043);
  color: var(--primary, #e30043);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.section--stats .stats-link:hover {
  background: var(--primary, #e30043);
  color: #fff;
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   v10.18.1 — Page /offres/ : pills stats hero + glass job-card
   ────────────────────────────────────────────────────────────────────
   Hero pills : sous le subtitle, 3 pills discrets carmin avec valeurs
   dynamiques (ex. nombre d'offres via shortcode).
   Job-card : passe en glass liquide cohérent avec .benefit-card et
   .org-card du DS site.
   ════════════════════════════════════════════════════════════════════ */
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: var(--space-3, 16px) auto 0;
  padding: 0;
  list-style: none;
}
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: rgba(var(--primary-rgb, 227, 0, 67), .06);
  color: var(--color-neutral-700, #2c2c2a);
  border: 1px solid rgba(var(--primary-rgb, 227, 0, 67), .18);
  border-radius: 999px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}
.hero__pill strong {
  color: var(--primary, #e30043);
  font-weight: 500;
}
[data-theme="dark"] .hero__pill {
  background: rgba(var(--primary-rgb, 227, 0, 67), .12);
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .3);
  color: rgba(255, 255, 255, .85);
}

/* Job-card : refonte glass liquide cohérente avec .benefit-card */
.section--jobs .job-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .42) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 6px 20px rgba(26, 23, 27, .04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .25s ease;
}
.section--jobs .job-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(26, 23, 27, .08), 0 0 0 2px rgba(var(--primary-rgb, 227, 0, 67), .25) !important;
  border-color: rgba(var(--primary-rgb, 227, 0, 67), .35) !important;
}
[data-theme="dark"] .section--jobs .job-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.18.51 — DARK MODE patches (audit Ju 2026-04-29)                  ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Les 6 vars manquantes (--color-text/-muted/-bg/-bg-soft/-surface/    ║
   ║  -border) sont définies en :root + dark dans global.css. Les patches  ║
   ║  ci-dessous corrigent les rares hardcodages qui restent.              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 1. .btn-outline (hover) en dark ── */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .wp-block-button__link.btn-outline {
  border-color: rgba(255, 255, 255, .14) !important;
  color: var(--color-neutral-900) !important;
  background: transparent !important;
}
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .wp-block-button__link.btn-outline:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .25) !important;
}

/* ── 2. Boutons CF7 outline (.is-style-outline) en dark ── */
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, .15) !important;
  color: var(--color-neutral-900) !important;
  background: transparent !important;
}
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(227, 0, 67, .12) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: var(--color-primary, #e30043) !important;
}

/* ── 3. CF7 inputs au focus en dark : éviter fond blanc qui flashe ── */
[data-theme="dark"] .wpcf7 input:focus,
[data-theme="dark"] .wpcf7 textarea:focus,
[data-theme="dark"] .wpcf7 select:focus,
[data-theme="dark"] .section--contact-forms .cf7-field:focus-within,
[data-theme="dark"] .section--contact-forms .cf7-input:focus,
[data-theme="dark"] .section--contact-forms textarea:focus {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: var(--color-neutral-900) !important;
}

/* ── 4. Contact-switcher thumb en dark (mode multi) ── */
[data-theme="dark"] .contact-switcher[data-active="multi"] .contact-switcher__thumb {
  background: rgba(255, 255, 255, .14) !important;
}

/* ── 5. Contact-card --multi : top stripe foncée invisible en dark ── */
[data-theme="dark"] .contact-card--multi::before {
  background: rgba(255, 255, 255, .18);
}

/* ── 6. Contact-card title/sub en dark : utilise les nouvelles vars ── */
[data-theme="dark"] .contact-card__title {
  color: var(--color-text) !important;
}
[data-theme="dark"] .contact-card__sub {
  color: var(--color-text-muted) !important;
}

/* ── 7. Contact-chips et chips__icon en dark : fond clair → fond sombre ── */
[data-theme="dark"] .contact-chip,
[data-theme="dark"] .contact-chips .contact-chip {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: var(--color-text) !important;
}

/* ── 8. Section-eyebrow pill en dark : conserver lisibilité ── */
[data-theme="dark"] .section-eyebrow,
[data-theme="dark"] .has-text-align-center.section-eyebrow {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .08);
}

/* ── 9. Stats-band / metric-card / feature-card en dark ── */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .org-card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] body:not(.home) .stats-band > * {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .feature-card *,
[data-theme="dark"] .benefit-card *,
[data-theme="dark"] .org-card *,
[data-theme="dark"] .metric-card * {
  border-color: rgba(255, 255, 255, .08);
}

/* ── 10. .responsabilites-grid (PRODIAT) split en dark ── */
[data-theme="dark"] .responsabilites-grid {
  background: rgba(255, 255, 255, .03) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme="dark"] .responsabilites-grid > *:first-child {
  border-right-color: rgba(255, 255, 255, .08) !important;
}

/* ╔═══ v10.18.52 — DARK MODE round 2 (retours Ju post-screenshot) ═══╗ */

/* ── 11. is-style-outline buttons : forcer background transparent en dark.
   WP element button injecte un fond par défaut via .wp-element-button qui
   bat les overrides bas spec. On bump à 0,5,3 + !important. */
html[data-theme="dark"] body .wp-block-button.is-style-outline > .wp-block-button__link,
html[data-theme="dark"] body .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-neutral-900, #f0eef1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
html[data-theme="dark"] body .wp-block-button.is-style-outline > .wp-block-button__link:hover,
html[data-theme="dark"] body .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover {
  background: rgba(227, 0, 67, .15) !important;
  background-color: rgba(227, 0, 67, .15) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: #ff6b8a !important;
}

/* ── 12. Burger menu — submenu container "Nos GEIQ" en dark : fond + chevron
   + liens enfants visibles. Avant : chevron noir sur fond noir + sous-items
   sur fond identique au drawer (impossible à distinguer). */
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-icon {
  color: rgba(255, 255, 255, .6) !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon,
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  color: var(--color-primary, #ff6b8a) !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, .03) !important;
  border-radius: 12px !important;
  margin: 4px 8px 8px !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .82) !important;
}
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: rgba(227, 0, 67, .15) !important;
  color: #ff6b8a !important;
}

/* ── 13. CTA-dark / cta-final company en dark : éviter texte gris sur gris.
   Le .cta-dark__sub utilise --color-text-muted qui maintenant cascade,
   mais sur des fonds très foncés on peut tomber à .55 → trop pâle. */
[data-theme="dark"] body .section--cta-final .section-sub,
[data-theme="dark"] body .section--cta-final .cta-dark__sub {
  color: rgba(255, 255, 255, .72) !important;
}
[data-theme="dark"] body .section--cta-final .section-eyebrow,
[data-theme="dark"] body .section--cta-final .cta-dark__eyebrow {
  color: var(--color-primary, #ff6b8a) !important;
}

/* ── 14. .stats-band number / suffix : couleur brand stable en dark ── */
[data-theme="dark"] body .stats-band .stat__num,
[data-theme="dark"] body .stats-band .metric-card__num {
  color: #ff6b8a !important;
}

/* ── 15. .testimonial-hero (sans is-style) — autre variante card en dark ── */
[data-theme="dark"] .testimonial-hero,
[data-theme="dark"] .testimonial-hero__quote {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .92) !important;
}
[data-theme="dark"] .testimonial-hero__author {
  color: #ff6b8a !important;
}

/* ╔═══ v10.18.54 — DARK MODE round 3 (fixes ciblés post-screenshot Ju) ═══╗ */

/* ── 16. .btn-outline (avec ou sans .btn-lg) en dark — covered de la home
   à TOUTES les pages. La home utilise .btn-outline.btn-lg (pas is-style-
   outline), donc le patch v10.18.52 manquait. Ici on couvre les 2. */
html[data-theme="dark"] body a.btn-outline,
html[data-theme="dark"] body a.btn-outline.btn-lg,
html[data-theme="dark"] body .wp-block-button .wp-block-button__link.btn-outline,
html[data-theme="dark"] body .wp-block-button .wp-block-button__link.btn-outline.btn-lg,
html[data-theme="dark"] body .wp-block-button.btn-outline > .wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-neutral-900, #f0eef1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
html[data-theme="dark"] body a.btn-outline:hover,
html[data-theme="dark"] body a.btn-outline.btn-lg:hover,
html[data-theme="dark"] body .wp-block-button .wp-block-button__link.btn-outline:hover,
html[data-theme="dark"] body .wp-block-button.btn-outline > .wp-block-button__link:hover {
  background: rgba(227, 0, 67, .15) !important;
  background-color: rgba(227, 0, 67, .15) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: #ff6b8a !important;
}

/* ── 17. Submenu burger "Nos GEIQ" parent — couleur du texte en dark.
   v10.18.36 forçait color: #2a2528 !important sur le has-child parent
   (pour matcher les autres items en light), mais aucun pendant dark
   n'a été ajouté → texte foncé sur fond foncé = invisible. */
html[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .82) !important;
}
html[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover,
html[data-theme="dark"] body .site-header__inner .geiq56-burger-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content[aria-expanded="true"] {
  color: #ff6b8a !important;
  background: rgba(227, 0, 67, .15) !important;
}

/* ╔═══ v10.18.55 — DARK MODE catch-all boutons "outline" ═══╗
   Règle balayage : en dark, TOUT bouton qui n'est PAS explicitement rempli
   (is-style-fill / btn-primary / has-background) est traité comme outline
   neutre transparent. Couvre toutes les variantes (.btn-outline, .btn-lg,
   sans classe particulière, etc.) en une seule règle. */

html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > .wp-block-button__link,
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > .wp-block-button__link.wp-element-button,
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > a.wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-neutral-900, #f0eef1) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > .wp-block-button__link:hover,
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > .wp-block-button__link.wp-element-button:hover,
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > a.wp-block-button__link:hover,
html[data-theme="dark"] body .wp-block-button:not(.is-style-fill):not(.btn-primary):not(.has-background) > .wp-block-button__link:focus-visible {
  background: rgba(227, 0, 67, .15) !important;
  background-color: rgba(227, 0, 67, .15) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: #ff6b8a !important;
}

/* Boutons hardcoded hors wp-block-button (a.btn, button.btn, .btn dans wp:html) */
html[data-theme="dark"] body a.btn:not(.btn-primary):not(.is-style-fill),
html[data-theme="dark"] body button.btn:not(.btn-primary):not(.is-style-fill) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-neutral-900, #f0eef1) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
html[data-theme="dark"] body a.btn:not(.btn-primary):not(.is-style-fill):hover,
html[data-theme="dark"] body button.btn:not(.btn-primary):not(.is-style-fill):hover,
html[data-theme="dark"] body a.btn:not(.btn-primary):not(.is-style-fill):focus-visible {
  background: rgba(227, 0, 67, .15) !important;
  border-color: var(--color-primary, #e30043) !important;
  color: #ff6b8a !important;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v10.18.59 — Mobile pass cohérence (audit screenshot Ju 2026-04-29)   ║
   ║  ─────────────────────────────────────────────────────────────────── ║
   ║  Cible iPhone 14 Pro Max (430×932) et tout viewport ≤ 640px.          ║
   ║  Objectifs :                                                          ║
   ║    1. Tous les wrappers de boutons (panels, hero, contact, geiq-     ║
   ║       panel, cta-final) → flex column, centrés, gap rythmé.         ║
   ║    2. Boutons : largeur cohérente (max 280px), pas de nowrap.        ║
   ║    3. Titres et paragraphes des panels centrés.                      ║
   ║    4. Switcher : titre central "GEIQ 56" plus discret en mobile.     ║
   ║    5. Anti-débordement horizontal + clamp typographique sécurisé.    ║
   ║                                                                       ║
   ║  Bloc idempotent (réexécutable sans casse). Ne touche pas au          ║
   ║  desktop, ni aux variables, ni au JS, ni au PHP.                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {

  /* ─── 1. Wrappers de groupes de boutons : stack column + centrage ─── */
  html body .panel-btp__actions,
  html body .panel-multi__actions,
  html body .panel-gen__footer-actions,
  html body .contact-actions,
  html body .geiq-panel__cta.wp-block-buttons,
  html body .wp-block-buttons.geiq-panel__cta,
  html body .section--cta-final .wp-block-buttons,
  html body .cta-dark__actions.wp-block-buttons,
  body:not(.home) [class*="section--"] .wp-block-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* hero__actions : déjà géré à 767px, on renforce le centrage strict 640 */
  html body .hero__actions,
  html body .hero__actions.wp-block-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* ─── 2. Boutons : largeur cohérente (max 280px), nowrap neutralisé ─── */
  html body .panel-btp__actions > a,
  html body .panel-multi__actions > a,
  html body .panel-gen__footer-actions > a,
  html body .contact-actions > a,
  html body .contact-actions > .wp-block-button,
  html body .hero__actions .wp-block-button,
  html body .geiq-panel__cta > .wp-block-button,
  html body .section--cta-final .wp-block-buttons > .wp-block-button,
  html body .cta-dark__actions .wp-block-button,
  body:not(.home) [class*="section--"] .wp-block-buttons > .wp-block-button {
    width: 100% !important;
    max-width: 280px !important;
  }

  /* Lien interne du wp-block-button : remplit le wrapper */
  html body .panel-btp__actions > a,
  html body .panel-multi__actions > a,
  html body .panel-gen__footer-actions > a,
  html body .hero__actions .wp-block-button__link,
  html body .geiq-panel__cta .wp-block-button__link,
  html body .section--cta-final .wp-block-buttons .wp-block-button__link,
  html body .cta-dark__actions .wp-block-button__link,
  body:not(.home) [class*="section--"] .wp-block-buttons .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Boutons custom des panels (a.btn-link-primary etc.) : nowrap → wrap */
  html body .panel-btp__actions a.btn-multi-primary,
  html body .panel-btp__actions a.btn-btp-primary,
  html body .panel-btp__actions a.btn-on-red,
  html body .panel-btp__actions a.btn-outline-white-sm,
  html body .panel-multi__actions a.btn-multi-primary,
  html body .panel-multi__actions a.btn-btp-primary,
  html body .panel-multi__actions a.btn-on-red,
  html body .panel-multi__actions a.btn-outline-white-sm,
  html body .panel-gen__footer-actions a.btn-link-primary,
  html body .panel-gen__footer-actions a.btn-link-neutral {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  /* ─── 3. Titres et paragraphes des panels centrés (renfort 640) ─── */
  html body .panel-btp__title,
  html body .panel-multi__title,
  html body .panel-gen__title {
    font-size: clamp(1.25rem, 5vw, 1.625rem) !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  html body .panel-btp__sub,
  html body .panel-multi__sub,
  html body .panel-gen__desc {
    text-align: center !important;
    margin-inline: auto !important;
  }
  /* v10.18.60 — fix : le kicker (eyebrow) doit rester un pill INLINE
     compact, centré dans son parent. width:100% le rendait pleine
     largeur (block-like) avec fond gris parasite. */
  html body .panel-btp,
  html body .panel-multi,
  html body .panel-gen__intro,
  html body .panel-inner--gen {
    text-align: center !important;
  }
  html body .panel-btp__kicker,
  html body .panel-multi__kicker,
  html body .panel-gen__kicker {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    max-width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* ─── 4. Switcher : titre central "GEIQ 56" plus discret ─── */
  /* Le bouton central garde sa fonction d'ancre, mais on adoucit la
     typographie pour qu'il ne dispute plus la lecture aux deux pills. */
  html body .geiq-switcher__btn--center {
    padding: 8px 6px !important;
  }
  html body .geiq-switcher__logo {
    font-size: .875rem !important;
    opacity: .82;
  }
  html body .geiq-switcher__btn--center:not([aria-selected="true"]) .geiq-switcher__logo em {
    /* "56" rouge atténué quand le bouton n'est pas actif (cas par défaut
       en mobile, l'utilisateur clique sur BTP ou Multi) */
    opacity: .65;
  }

  /* ─── 5. Anti-débordement horizontal global ─── */
  html, body {
    overflow-x: hidden !important;
  }
  html body .container.wp-block-group,
  html body .section.wp-block-group {
    max-width: 100% !important;
  }

  /* ─── 6. Cards : padding mobile cohérent ─── */
  html body .feature-card,
  html body .benefit-card,
  html body .org-card {
    padding: var(--space-4, 20px) var(--space-3, 16px) !important;
  }
  html body .feature-card *,
  html body .benefit-card *,
  html body .org-card * {
    max-width: 100% !important;
  }

  /* ─── 7. Testimonial-hero : padding réduit + lisibilité quote ─── */
  html body .section--testimonial-hero blockquote.is-style-testimonial-hero {
    padding: 32px 20px !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
  }
  html body .section--testimonial-hero blockquote.is-style-testimonial-hero p {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    line-height: 1.5 !important;
  }

  /* ─── 8. cta-dark / section--cta-final : titres centrés + sub centré ─── */
  html body .section--cta-final .section-title,
  html body .section--cta-final .cta-dark__title,
  html body .section--cta-final .section-sub,
  html body .section--cta-final .cta-dark__sub {
    text-align: center !important;
    margin-inline: auto !important;
  }
  html body .section--cta-final .section-sub,
  html body .section--cta-final .cta-dark__sub {
    max-width: 100% !important;
    padding-inline: 4px !important;
  }

  /* ─── 9. dispositif-schema (timeline 5 étapes) — renfort ─── */
  /* Les rules 600px existantes (l. 5713+) sont déjà bonnes. Ici on s'assure
     juste que la pill durée + titre ne sortent pas et que le wrapper head
     (.dispositif-schema__head) reste propre s'il existe. */
  html body:not(.home) .dispositif-schema__head {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  html body:not(.home) .dispositif-schema__title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ─── 10. Section-eyebrow / section-title / section-sub centrés ─── */
  html body section[class*="section--"] .section-eyebrow,
  html body section[class*="section--"] .section-title,
  html body section[class*="section--"] .section-sub {
    text-align: center !important;
    margin-inline: auto !important;
  }
  html body section[class*="section--"] .section-eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* ─── 11. .wp-block-buttons isolés (sans wrapper sémantique) ─── */
  html body .wp-block-buttons:not(.geiq-panel__cta):not(.cta-dark__actions):not(.hero__actions) {
    justify-content: center !important;
  }
}

/* ─── 12. Très petit (≤ 380px) : extra safety ─── */
@media (max-width: 380px) {
  html body .panel-btp__actions > a,
  html body .panel-multi__actions > a,
  html body .panel-gen__footer-actions > a,
  html body .hero__actions .wp-block-button,
  html body .geiq-panel__cta > .wp-block-button {
    max-width: 100% !important;
  }
  html body .geiq-switcher__btn { font-size: .72rem !important; padding: 7px 4px !important; }
}
/* ╚══════════════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║                                                                      ║
   ║   v10.19.0 — REFONTE PAGES ACTUALITÉS                                ║
   ║                                                                      ║
   ║   Composants :                                                       ║
   ║     - .archive-actus              (hub /actus/, filtres + grille)    ║
   ║     - .actu-card--{featured,standard,reading}  (variantes éditoriales)║
   ║     - .single-actu                (article single, layout premium)   ║
   ║     - .share-bar                  (sticky desktop, fixed bottom mob.)║
   ║     - .related-posts              (3 cartes en bas du single)        ║
   ║                                                                      ║
   ║   Principes (alignés brand register / Impeccable shared design laws) ║
   ║     - Pas d'identical card grid : 1 featured + standards + readings  ║
   ║     - Pas de hero-image plein écran sur le single                    ║
   ║     - Cap line-length corps à 65-75ch (max-width 720px)              ║
   ║     - Glass UNIQUEMENT sur la share-bar (interactif, justifié)       ║
   ║     - Carmin réservé aux liens, pills actives, blockquote rule       ║
   ║                                                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ─── 1. ARCHIVE /actus/ — wrapper + filtres ─────────────────────── */

.section--actus-archive {
  padding-top: var(--section-gap, 64px);
  padding-bottom: var(--section-gap, 64px);
}

.archive-actus {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.archive-actus--empty {
  text-align: center;
  padding: clamp(32px, 6vw, 56px) 0;
  color: var(--color-text-muted, #4b575f);
}
.archive-actus--empty a {
  color: var(--color-primary, #e30043);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Barre de filtres : pills desktop + select mobile, alignée DS jobs-board */
.archive-actus__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  margin-bottom: clamp(28px, 4vw, 40px);
  background: var(--color-bg-soft, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  border-radius: 14px;
}

.archive-actus__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.actu-pill {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a171b);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
  border-radius: 999px;
  padding: 7px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, transform 0.18s ease-out;
  white-space: nowrap;
}
.actu-pill:hover {
  border-color: rgba(227, 0, 67, 0.35);
  color: var(--color-primary, #e30043);
}
.actu-pill.is-active {
  background: var(--color-primary, #e30043);
  color: #fff;
  border-color: var(--color-primary, #e30043);
}
.actu-pill__count {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0.02em;
}
.actu-pill.is-active .actu-pill__count {
  opacity: 0.85;
  color: #fff;
}

/* Select mobile (caché desktop) — picker natif iOS / Android */
.archive-actus__select-wrap {
  display: none;
  position: relative;
  flex: 1 1 auto;
}
.archive-actus__select-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted, #4b575f);
  pointer-events: none;
  display: inline-flex;
}
.archive-actus__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 44px;
  padding: 0 36px 0 36px;
  background: var(--color-bg, #fff)
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b575f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
              no-repeat right 12px center;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--color-text, #1a171b);
  cursor: pointer;
}
.archive-actus__select:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 2px;
}

.archive-actus__stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--color-text-muted, #4b575f);
  margin-left: auto;
  white-space: nowrap;
}
.archive-actus__count strong {
  font-weight: 600;
  color: var(--color-text, #1a171b);
}

@media (max-width: 720px) {
  .archive-actus__pills { display: none; }
  .archive-actus__select-wrap { display: block; }
  .archive-actus__stats { margin-left: 0; }
}

/* Empty state filtre */
.archive-actus__empty {
  text-align: center;
  padding: clamp(32px, 5vw, 48px) 16px;
  color: var(--color-text-muted, #4b575f);
}
.archive-actus__empty p { margin: 0 0 16px; }


/* ─── 2. ARCHIVE GRID — mosaïque éditoriale ─────────────────────── */

.archive-actus__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}

.archive-actus__cell { min-width: 0; }
.archive-actus__cell--featured { grid-column: span 6; }
.archive-actus__cell--standard { grid-column: span 2; }
.archive-actus__cell--reading  { grid-column: span 3; }

@media (max-width: 1100px) {
  .archive-actus__grid { grid-template-columns: repeat(4, 1fr); }
  .archive-actus__cell--featured { grid-column: span 4; }
  .archive-actus__cell--standard { grid-column: span 2; }
  .archive-actus__cell--reading  { grid-column: span 4; }
}
@media (max-width: 720px) {
  .archive-actus__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .archive-actus__cell--featured,
  .archive-actus__cell--standard,
  .archive-actus__cell--reading { grid-column: span 1; }
}

/* Load-more */
.archive-actus__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}
.archive-actus__more {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  color: var(--color-text, #1a171b);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out;
}
.archive-actus__more:hover {
  background: rgba(227, 0, 67, 0.06);
  border-color: rgba(227, 0, 67, 0.35);
  color: var(--color-primary, #e30043);
  transform: translateY(-1px);
}
.archive-actus__more-count {
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.7;
}


/* ─── 3. ACTU-CARD — variantes éditoriales ──────────────────────── */

/* Reset surcharge des règles legacy v5.5 (.actu-card en surface plate) */
.archive-actus .actu-card,
.related-posts .actu-card {
  position: relative;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.18s ease-out;
}
.archive-actus .actu-card:hover,
.related-posts .actu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.14);
  border-color: rgba(227, 0, 67, 0.22);
}

.actu-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.actu-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a171b;
}
.actu-card__cover img,
.actu-card__cover .actu-card__svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.archive-actus .actu-card:hover .actu-card__cover img,
.archive-actus .actu-card:hover .actu-card__svg,
.related-posts .actu-card:hover .actu-card__cover img,
.related-posts .actu-card:hover .actu-card__svg { transform: scale(1.04); }

.actu-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.actu-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted, #4b575f);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.actu-card__cat--inline {
  color: var(--color-primary, #e30043);
  font-weight: 600;
}
.actu-card__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

.actu-card__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--color-text, #1a171b);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actu-card__excerpt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted, #4b575f);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actu-card__more {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary, #e30043);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.22s ease-out;
}
.archive-actus .actu-card:hover .actu-card__more,
.related-posts .actu-card:hover .actu-card__more { gap: 11px; }

/* Variante FEATURED — grand format, 2 col interne */
.actu-card--featured .actu-card__link {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
}
.actu-card--featured .actu-card__cover {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}
.actu-card--featured .actu-card__body {
  padding: clamp(24px, 3vw, 36px);
  gap: 14px;
  justify-content: center;
}
.actu-card--featured .actu-card__title {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  -webkit-line-clamp: 4;
}
.actu-card--featured .actu-card__excerpt {
  font-size: 15px;
  line-height: 1.6;
  -webkit-line-clamp: 4;
}

@media (max-width: 760px) {
  .actu-card--featured .actu-card__link {
    grid-template-columns: 1fr;
  }
  .actu-card--featured .actu-card__cover {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

/* Variante READING — texte uniquement, casse-rythme éditorial */
.actu-card--reading {
  background: var(--color-bg-soft, rgba(0, 0, 0, 0.02));
  border-style: dashed;
  border-color: var(--color-border, rgba(0, 0, 0, 0.10));
}
.actu-card--reading .actu-card__body {
  padding: clamp(22px, 2.4vw, 28px);
  gap: 12px;
}
.actu-card--reading .actu-card__title {
  font-size: 1.25rem;
  -webkit-line-clamp: 4;
}
.actu-card--reading .actu-card__excerpt {
  -webkit-line-clamp: 5;
  font-size: 13.5px;
}
.actu-card--reading::before {
  content: 'Lecture';
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #4b575f);
  background: var(--color-bg, #fff);
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

/* Dark mode actu-card */
[data-theme="dark"] .archive-actus .actu-card,
[data-theme="dark"] .related-posts .actu-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .archive-actus .actu-card:hover,
[data-theme="dark"] .related-posts .actu-card:hover {
  border-color: rgba(255, 107, 138, 0.35);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .actu-card__title { color: rgba(255, 255, 255, 0.95); }
[data-theme="dark"] .actu-card__excerpt { color: rgba(255, 255, 255, 0.65); }
[data-theme="dark"] .actu-card--reading {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .actu-card--reading::before {
  background: #1a171b;
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .actu-card__more { color: var(--color-primary-soft, #ff6b8a); }
[data-theme="dark"] .actu-pill {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .actu-pill:hover {
  border-color: rgba(255, 107, 138, 0.5);
  color: var(--color-primary-soft, #ff6b8a);
}
[data-theme="dark"] .archive-actus__filters {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .archive-actus__select {
  background-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .archive-actus__more {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .archive-actus__more:hover {
  background: rgba(255, 107, 138, 0.10);
  color: var(--color-primary-soft, #ff6b8a);
  border-color: rgba(255, 107, 138, 0.35);
}


/* ─── 4. SINGLE ARTICLE — hero éditorial premium ─────────────────── */

.single-actu {
  display: block;
}

/* Surcharge : on désactive le breadcrumb global posé en absolute dans
   le hero-spoke standard — sur le single, on a notre propre wrap. */
.single-actu .single-actu__hero .geiq56-breadcrumb {
  position: static;
  transform: none;
  margin: 0 auto clamp(20px, 3vw, 32px);
  left: auto;
  bottom: auto;
}

.single-actu__hero {
  text-align: center;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(28px, 4vw, 48px);
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  position: relative;
}
.single-actu__breadcrumb-wrap {
  max-width: 1080px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  display: flex;
  justify-content: center;
}
.single-actu__hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.single-actu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #4b575f);
  margin: 0 0 clamp(16px, 2vw, 22px);
}
.single-actu__cat-link {
  color: var(--color-primary, #e30043);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease-out;
}
.single-actu__cat-link:hover {
  border-bottom-color: var(--color-primary, #e30043);
}
.single-actu__eyebrow-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}

.single-actu__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  color: var(--color-text, #1a171b);
}
.single-actu__title em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.single-actu__lead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-text-muted, #4b575f);
  margin: 0 0 clamp(20px, 2.6vw, 28px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.single-actu__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 22px);
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text-muted, #4b575f);
}
.single-actu__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.single-actu__meta-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Cover full-width APRÈS le hero */
.single-actu__cover {
  margin: 0 auto clamp(36px, 5vw, 60px);
  max-width: 1280px;
  padding: 0 clamp(16px, 4vw, 32px);
}
.single-actu__cover img,
.single-actu__cover svg {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* Layout corps : share-bar sticky + body centré */
.single-actu__layout {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) clamp(40px, 6vw, 80px);
}

.single-actu__body {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text, #1a171b);
}

.single-actu__body > *:first-child { margin-top: 0; }
.single-actu__body > *:last-child  { margin-bottom: 0; }

.single-actu__body p {
  margin: 0 0 1.4em;
}

.single-actu__body h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2em 0 0.6em;
  color: var(--color-text, #1a171b);
}
.single-actu__body h2 em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.single-actu__body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  margin: 1.8em 0 0.5em;
  color: var(--color-text, #1a171b);
}

.single-actu__body a {
  color: var(--color-primary, #e30043);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(227, 0, 67, 0.4);
  transition: text-decoration-color 0.18s ease-out;
}
.single-actu__body a:hover {
  text-decoration-color: var(--color-primary, #e30043);
}

.single-actu__body ul,
.single-actu__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.6em;
}
.single-actu__body li {
  margin: 0 0 0.5em;
}
.single-actu__body li::marker {
  color: var(--color-primary, #e30043);
}

/* Sprint A action #5, side-stripe retiré. Indentation + italique signalent la citation */
.single-actu__body blockquote {
  margin: 1.8em 0;
  padding: 0.4em 1.4em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--color-text, #1a171b);
  font-style: italic;
}
.single-actu__body blockquote p { margin: 0; }
.single-actu__body blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-text-muted, #4b575f);
}

.single-actu__body figure {
  margin: 1.8em 0;
}
.single-actu__body figure img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.single-actu__body figcaption {
  margin-top: 0.6em;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-text-muted, #4b575f);
  text-align: center;
}

.single-actu__body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.92em;
  background: var(--color-bg-soft, rgba(0, 0, 0, 0.04));
  padding: 2px 6px;
  border-radius: 4px;
}

.single-actu__body strong { font-weight: 600; }
.single-actu__body em     { font-style: italic; }


/* ─── 5. SHARE-BAR — sticky desktop, fixed bottom mobile ─────────── */

/* Variante verticale, sticky à gauche du body (desktop only) */
.share-bar--vertical {
  position: sticky;
  top: 100px;
  float: left;
  margin-left: -88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  width: 48px;
  z-index: 10;
}
.share-bar--vertical .share-bar__label {
  display: none;
}

@media (max-width: 1180px) {
  .share-bar--vertical { display: none; }
}

/* Variante horizontale (mobile, bas du single ou inline) */
.single-actu__share-mobile {
  display: none;
  padding: 0 clamp(16px, 4vw, 32px) clamp(20px, 4vw, 32px);
}
@media (max-width: 1180px) {
  .single-actu__share-mobile {
    display: flex;
    justify-content: center;
  }
}

.share-bar--horizontal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 18px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
}
.share-bar--horizontal .share-bar__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #4b575f);
  margin-right: 4px;
}

.share-bar__btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted, #4b575f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, transform 0.18s ease-out;
}
.share-bar__btn:hover {
  background: rgba(227, 0, 67, 0.08);
  color: var(--color-primary, #e30043);
  transform: translateY(-1px);
}
.share-bar__btn:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 2px;
}

.share-bar__btn--copy {
  position: relative;
}
.share-bar__icon-default,
.share-bar__icon-done {
  display: inline-flex;
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.share-bar__icon-done {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  color: #2e9e6e;
}
.share-bar__btn--copy.is-copied .share-bar__icon-default {
  opacity: 0;
  transform: scale(0.6);
}
.share-bar__btn--copy.is-copied .share-bar__icon-done {
  opacity: 1;
  transform: scale(1);
}

[data-theme="dark"] .share-bar--vertical,
[data-theme="dark"] .share-bar--horizontal {
  background: rgba(28, 24, 32, 0.80);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
[data-theme="dark"] .share-bar__btn { color: rgba(255, 255, 255, 0.7); }
[data-theme="dark"] .share-bar__btn:hover {
  background: rgba(255, 107, 138, 0.12);
  color: var(--color-primary-soft, #ff6b8a);
}


/* ─── 6. RELATED POSTS ───────────────────────────────────────────── */

.section--related-posts {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.related-posts {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.related-posts__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.related-posts__head .section-eyebrow {
  margin: 0 auto 16px;
}
.related-posts__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text, #1a171b);
}
.related-posts__title em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 900px) { .related-posts__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .related-posts__grid { grid-template-columns: 1fr; } }


/* ─── 7. RESPECT REDUCED-MOTION ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .archive-actus .actu-card,
  .archive-actus .actu-card__cover img,
  .archive-actus .actu-card__svg,
  .related-posts .actu-card,
  .related-posts .actu-card__cover img,
  .related-posts .actu-card__svg,
  .actu-pill,
  .archive-actus__more,
  .share-bar__btn,
  .share-bar__icon-default,
  .share-bar__icon-done,
  .single-actu__cat-link {
    transition: none !important;
  }
}


/* ─── 8. SURCHARGE LEGACY actu-card v5.5 ─────────────────────────
   Le shortcode [geiq56_actus] rendait des cartes via .actu-card
   directement (sans wrapper .archive-actus). On ne touche pas à
   l'ancienne home, on scope nos nouvelles règles à .archive-actus
   et .related-posts pour éviter toute régression. */

/* Petit polish : sur la home, les cartes legacy gardent leur taille
   mais on uniformise la typo title pour rester cohérent visuellement. */
.actus-grid > .actu-card .actu-card__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}


/* ════════════════════════════════════════════════════════════════════
   v10.19.1 — Single article sidebar (navigation éditoriale)
       Format : 3 listes sobres dans un <aside> sticky droite (≥1180px),
       basculant en accordion <details> empilé sous le body en tablet/mobile.
       Anti-patterns évités : pas de glass, pas de cards, pas de pills,
       pas d'identical card-grid. Inspiration éditoriale (NYT, Le Monde,
       Stripe blog) plutôt que widget WordPress générique.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. LAYOUT GRID 2 colonnes ─────────────────────────────────── */

/* Variante avec sidebar : grid à partir de 1180px */
@media (min-width: 1180px) {
  .single-actu__layout--with-sidebar {
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(40px, 5vw, 64px);
    align-items: start;
  }
  .single-actu__layout--with-sidebar .single-actu__main {
    min-width: 0; /* protège la grid du float share-bar */
  }
}

/* Sans sidebar (fallback) : on garde le centrage 720px historique */
.single-actu__main {
  max-width: 100%;
}
.single-actu__main .single-actu__body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1180px) {
  .single-actu__layout--with-sidebar .single-actu__main .single-actu__body {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
}

/* ─── 2. SIDEBAR (desktop ≥1180px) ──────────────────────────────── */

.single-actu__sidebar {
  display: none;
}

@media (min-width: 1180px) {
  .single-actu__sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3vw, 40px);
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 4px 24px;
    margin-right: -4px;
    /* Scrollbar discrète */
    scrollbar-width: thin;
    scrollbar-color: rgba(75, 87, 95, 0.2) transparent;
  }
  .single-actu__sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .single-actu__sidebar::-webkit-scrollbar-thumb {
    background: rgba(75, 87, 95, 0.2);
    border-radius: 999px;
  }
}

/* ─── 3. SIDEBAR MOBILE (accordion empilé) ───────────────────────── */

.single-actu__sidebar-mobile {
  display: block;
  margin: clamp(28px, 4vw, 40px) auto 0;
  max-width: 720px;
  padding: 0 clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--color-border, rgba(26, 23, 27, 0.08));
  padding-top: clamp(20px, 3vw, 28px);
}
@media (min-width: 1180px) {
  .single-actu__sidebar-mobile {
    display: none;
  }
}

.single-actu__sidebar-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text, #1a171b);
  padding: 8px 0;
  user-select: none;
}
.single-actu__sidebar-summary::-webkit-details-marker { display: none; }
.single-actu__sidebar-summary::marker { content: ''; }

.single-actu__sidebar-summary-icon {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-muted, #4b575f);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.single-actu__sidebar-mobile[open] .single-actu__sidebar-summary-icon {
  transform: rotate(45deg);
}

.single-actu__sidebar-mobile-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  padding: 16px 0 0;
}

/* ─── 4. SIDEBAR-BLOCK (titre + corps) ──────────────────────────── */

.sidebar-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-block__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted, #4b575f);
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, rgba(26, 23, 27, 0.08));
}

/* ─── 5. SIDEBAR-LIST (liste éditoriale sobre) ──────────────────── */

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-list__item {
  margin: 0;
}

.sidebar-list__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--color-text, #1a171b);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.45;
  transition: color 0.18s ease-out;
}
.sidebar-list__link:hover {
  color: var(--color-primary, #e30043);
}
.sidebar-list__link:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 3px;
  border-radius: 2px;
}

/* État actif (catégorie courante) : couleur carmin + dot blink */
.sidebar-list__item.is-active .sidebar-list__link {
  color: var(--color-primary, #e30043);
  font-weight: 500;
}

.sidebar-list__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary, #e30043);
  margin-right: 8px;
  flex-shrink: 0;
  align-self: center;
  animation: sidebar-dot-blink 2.4s ease-in-out infinite;
}
@keyframes sidebar-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.sidebar-list__label {
  flex: 1;
  min-width: 0;
}

.sidebar-list__count {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #4b575f);
  font-weight: 400;
  flex-shrink: 0;
}
.sidebar-list__item.is-active .sidebar-list__count {
  color: var(--color-primary, #e30043);
  opacity: 0.7;
}

/* Variante "stacked" pour les articles récents (titre + date sur 2 lignes) */
.sidebar-list__link--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid transparent;
}
.sidebar-list--recent .sidebar-list__item + .sidebar-list__item .sidebar-list__link--stacked {
  border-top-color: var(--color-border, rgba(26, 23, 27, 0.06));
}

.sidebar-list__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: inherit;
  display: block;
}
.sidebar-list__link--stacked:hover .sidebar-list__title {
  color: var(--color-primary, #e30043);
}
.sidebar-list__date {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #4b575f);
  text-transform: uppercase;
}

/* ─── 6. DARK MODE ──────────────────────────────────────────────── */

[data-theme="dark"] .sidebar-block__title {
  color: rgba(240, 238, 241, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sidebar-list__link {
  color: rgba(240, 238, 241, 0.92);
}
[data-theme="dark"] .sidebar-list__link:hover,
[data-theme="dark"] .sidebar-list__item.is-active .sidebar-list__link {
  color: var(--color-primary-soft, #ff6b8a);
}
[data-theme="dark"] .sidebar-list__count {
  color: rgba(240, 238, 241, 0.55);
}
[data-theme="dark"] .sidebar-list__item.is-active .sidebar-list__count {
  color: var(--color-primary-soft, #ff6b8a);
}
[data-theme="dark"] .sidebar-list__dot {
  background: var(--color-primary-soft, #ff6b8a);
}
[data-theme="dark"] .sidebar-list--recent .sidebar-list__item + .sidebar-list__item .sidebar-list__link--stacked {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .single-actu__sidebar-mobile {
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .single-actu__sidebar-summary {
  color: rgba(240, 238, 241, 0.92);
}
[data-theme="dark"] .single-actu__sidebar-summary-icon {
  color: rgba(240, 238, 241, 0.55);
}
[data-theme="dark"] .single-actu__sidebar {
  scrollbar-color: rgba(240, 238, 241, 0.18) transparent;
}
[data-theme="dark"] .single-actu__sidebar::-webkit-scrollbar-thumb {
  background: rgba(240, 238, 241, 0.18);
}

/* ─── 7. REDUCED-MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sidebar-list__dot { animation: none; }
  .sidebar-list__link,
  .single-actu__sidebar-summary-icon {
    transition: none;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║                                                                      ║
   ║   v10.19.3 — MOBILE CENTERING PASS GLOBALE                           ║
   ║                                                                      ║
   ║   Filet de sécurité final qui force le centrage de TOUTES les        ║
   ║   variantes d'eyebrows / kickers / titres / sub-titres connues       ║
   ║   sur mobile (≤640px). Complète les passes v10.18.59, v10.18.60      ║
   ║   et v10.18.69 qui couvraient déjà la majorité des cas.              ║
   ║                                                                      ║
   ║   Variantes ciblées :                                                ║
   ║     - .hero__eyebrow                  (hero spoke + home)            ║
   ║     - .section-eyebrow (+ .has-text-align-center)                    ║
   ║     - .cta-dark__eyebrow              (CTA finals dark)              ║
   ║     - .panel-btp__kicker              (panel home BTP)               ║
   ║     - .panel-multi__kicker            (panel home Multi)             ║
   ║     - .panel-gen__kicker              (panel home Général)           ║
   ║     - .contact-card__eyebrow          (cartes contact)               ║
   ║     - .footer__newsletter-eyebrow     (newsletter footer)            ║
   ║     - .single-actu__eyebrow           (article single)               ║
   ║                                                                      ║
   ║   NOTE : .actu-card__cat est volontairement EXCLU. C'est un badge    ║
   ║   en position:absolute posé sur la cover de la carte article, son    ║
   ║   centrage est géré par top/left déjà.                               ║
   ║                                                                      ║
   ║   NOTE : pas de modification des desktop styles (uniquement les      ║
   ║   media queries 640px). Pas de toucher aux exceptions volontaires    ║
   ║   du switcher BTP/Multi (.geiq-panel .section-eyebrow gauche).       ║
   ║                                                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {

  /* ─── 1. EYEBROWS / KICKERS : pill inline-flex centré ─────────────── */
  /* On force tous les eyebrows nommés à se comporter comme un pill
     compact horizontalement centré. width:auto + max-width:max-content
     évite l'effet block-pleine-largeur que WordPress applique parfois
     via has-text-align-center. */
  body .hero__eyebrow,
  body .section-eyebrow,
  body p.section-eyebrow,
  body p.section-eyebrow.has-text-align-center,
  body .cta-dark__eyebrow,
  body .contact-card__eyebrow,
  body .footer__newsletter-eyebrow,
  body .single-actu__eyebrow,
  body .panel-btp__kicker,
  body .panel-multi__kicker,
  body .panel-gen__kicker {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* ─── 2. PARENTS DIRECTS : text-align center pour permettre le
     centrage des inline-flex enfants. WordPress wrap les eyebrows
     dans des conteneurs is-layout-flow qui héritent text-align:left
     par défaut. ─────────────────────────────────────────────────────── */
  body section[class*="section--"],
  body section[class*="section--"] > .container,
  body section[class*="section--"] > .wp-block-group,
  body .hero__content,
  body .hero__content.wp-block-group,
  body .section-header,
  body .single-actu__hero-inner,
  body .panel-btp,
  body .panel-multi,
  body .panel-gen__intro,
  body .panel-inner,
  body .panel-inner--gen {
    text-align: center !important;
  }

  /* ─── 3. TITRES + SUB-TITRES : centrés et margin-inline auto pour
     que max-width interne reste centré ──────────────────────────────── */
  body section[class*="section--"] .section-title,
  body section[class*="section--"] .section-sub,
  body section[class*="section--"] .section-lead,
  body .hero__title,
  body .hero__subtitle,
  body .single-actu__title,
  body .single-actu__lead,
  body .cta-dark__title,
  body .cta-dark__sub,
  body .panel-btp__title,
  body .panel-btp__sub,
  body .panel-multi__title,
  body .panel-multi__sub,
  body .panel-gen__title,
  body .panel-gen__desc,
  body .footer__newsletter-title,
  body .footer__newsletter-sub {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* ─── 4. EXCEPTION : .actu-card__cat reste un badge absolute,
     on N'APPLIQUE PAS les règles 1-3 dessus. Ré-affirmation
     pour annuler tout effet de cascade indésirable. ─────────────────── */
  body .actu-card__cat {
    position: absolute !important;
    text-align: center !important;
  }

  /* ─── 5. EXCEPTION : .geiq-panel (switcher BTP/Multi) garde son
     alignement gauche volontaire à l'intérieur du panneau, déjà
     géré par les rules existantes (l. 7546). On ne touche pas. ─────── */

}

/* ╚══════════════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║                                                                      ║
   ║   v10.19.4 — HARMONISATION TOTALE MOBILE                             ║
   ║                                                                      ║
   ║   Étend la passe v10.19.3 (eyebrows + titres) au CONTENU INTERNE     ║
   ║   des cards : icônes, paragraphes, listes, valeurs/labels stat,      ║
   ║   ainsi qu'aux composants split (responsabilites-grid, dispositif-   ║
   ║   schema, contact-info).                                             ║
   ║                                                                      ║
   ║   Règle d'or sur mobile (≤ 640 px) : tout est centré, sauf :         ║
   ║     - corps d'article single (lecture éditoriale max-w 720 px)       ║
   ║     - sidebar single article (.single-actu__sidebar)                 ║
   ║     - .contact-info (avatar à gauche + texte à droite type LinkedIn) ║
   ║     - .geiq-panel switcher BTP/Multi (alignement gauche volontaire)  ║
   ║     - badges absolute déjà positionnés (.actu-card__cat)             ║
   ║                                                                      ║
   ║   Aucune rule desktop n'est touchée. Tout est dans une seule         ║
   ║   media query @media (max-width: 640px).                             ║
   ║                                                                      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {

  /* ─── 1. CARDS : contenu interne centré ──────────────────────────────
     On force text-align center sur la card et sur ses enfants directs,
     sauf les wrappers de bouton (qui ont leur propre logique de
     centrage déjà gérée plus haut), les SVG inline et les liens qui
     sont déjà gérés visuellement. */
  body :is(
    .feature-card,
    .feature-card.wp-block-group,
    .feature-card.wp-block-column,
    .benefit-card,
    .metric-card,
    .metric-card.wp-block-group,
    .actu-card,
    .actu-card__body,
    .testimonial-card,
    .contact-card,
    .contact-card.wp-block-column,
    .dispositif-step,
    .dispositif-step.wp-block-column,
    .organigramme-card,
    .stat-card,
    .panel-stat,
    .panel-stat.wp-block-group,
    .stats-band__item,
    .stats-band__item.wp-block-group,
    .why-card,
    .admin-card,
    .partner-card,
    .responsabilites-grid__col,
    .responsabilites-grid__row,
    .responsabilites-grid__head,
    .why-trio__item,
    .geiq-step
  ) {
    text-align: center !important;
    align-items: center !important;
  }

  body :is(
    .feature-card,
    .benefit-card,
    .metric-card,
    .actu-card__body,
    .testimonial-card,
    .contact-card,
    .dispositif-step,
    .organigramme-card,
    .stat-card,
    .panel-stat,
    .stats-band__item,
    .why-card,
    .admin-card,
    .partner-card,
    .responsabilites-grid__col,
    .responsabilites-grid__row,
    .why-trio__item,
    .geiq-step
  ) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, span, div):not(.wp-block-buttons):not(.wp-block-button):not(.btn):not([class*="__cta"]):not([class*="__actions"]) {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* ─── 2. ICÔNES / AVATARS dans les cards : centrées ────────────────── */
  body :is(
    .feature-card,
    .benefit-card,
    .metric-card,
    .actu-card,
    .testimonial-card,
    .contact-card,
    .dispositif-step,
    .organigramme-card,
    .stat-card,
    .panel-stat,
    .stats-band__item,
    .why-card,
    .admin-card,
    .why-trio__item
  ) > :is(
    .icon,
    .card__icon,
    .feature-card__icon,
    .benefit-card__icon,
    .metric-card__icon,
    .org-card__avatar,
    .testimonial__avatar,
    .testimonial-card__avatar,
    .contact-card__icon,
    .dispositif-step__icon,
    .stat-card__icon,
    .panel-stat__icon,
    .stats-band__icon,
    .why-card__icon,
    .admin-card__avatar,
    .organigramme-card__photo,
    .why-trio__icon,
    [class$="__icon"],
    [class$="__avatar"],
    [class$="__photo"]
  ) {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Le metric-card__icon est rendu en <p> via wp:html sur la home,
     donc ce n'est pas un enfant direct flex. On le force quand même. */
  body .metric-card .metric-card__icon,
  body .metric-card.wp-block-group > .metric-card__icon,
  body .stats-band__item .stats-band__icon,
  body .panel-stat > .panel-stat__icon {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* benefit-card__icon est un div 44x44 fixe, on le centre via margin
     auto (le flex column parent s'en occupe avec align-items center
     ci-dessus, mais on renforce). */
  body .benefit-card > .benefit-card__icon,
  body .feature-card > .feature-card__icon,
  body .feature-card .feature-card__inner > .feature-card__icon {
    margin-inline: auto !important;
  }

  /* ─── 3. CARDS-NUMÉRO : compteur ::before des benefit-cards centré ──
     .benefit-card::before est un position:absolute top:14 right:18.
     Sur mobile, on le centre top horizontalement. */
  body .benefit-card::before {
    right: 50% !important;
    transform: translateX(50%) !important;
  }

  /* ─── 4. ACTU-CARD : __more (lien fléché) centré ──────────────────── */
  body .actu-card__more {
    justify-content: center !important;
    align-self: center !important;
  }

  /* ─── 5. STATS HOME / SECTION--STATS : valeurs et labels centrés ──── */
  body :is(.stats-band, .stats-band.wp-block-group) :is(.stats-band__val, .stats-band__label, .stats-band__sub),
  body :is(.metric-card, .metric-card.wp-block-group) :is(.metric-card__val, .metric-card__label),
  body :is(.panel-stat, .panel-stat.wp-block-group) :is(.panel-stat__val, .panel-stat__label, .panel-stat__sub) {
    text-align: center !important;
    width: 100% !important;
  }

  /* ─── 6. DISPOSITIF-SCHEMA (timeline parcours) : titre + desc + meta
     centrés. Le grid existant garde sa structure, on force juste le
     text-align des cellules. ────────────────────────────────────────── */
  body .dispositif-schema__step .dispositif-schema__title,
  body .dispositif-schema__step .dispositif-schema__desc,
  body .dispositif-schema__step .dispositif-schema__meta {
    text-align: center !important;
  }

  /* ─── 7. RESPONSABILITES-GRID (PRODIAT split GEIQ vs Vous) : sur
     mobile la grille passe déjà en 1 colonne (rule l.15542+), on
     centre les rows et les heads. ──────────────────────────────────── */
  body .responsabilites-grid__head {
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }
  body .responsabilites-grid__head-icon {
    margin-inline: auto !important;
  }
  body .responsabilites-grid__row {
    align-items: center !important;
  }
  body .responsabilites-grid__row-num,
  body .responsabilites-grid__row-title,
  body .responsabilites-grid__row-desc {
    text-align: center !important;
  }

  /* ─── 8. PARCOURS-LIST : liste numérotée verticale.
     L'item a un padding-left: 52px pour laisser place au cercle
     numéroté en absolute. Sur mobile, on bascule vers un layout stack
     où le numéro est au-dessus, centré, et le texte centré dessous. */
  body .parcours-list li {
    padding: 44px 16px 18px !important;
    text-align: center !important;
  }
  body .parcours-list li::before {
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ─── 9. FAQ ITEMS : summary garde flèche à droite (déjà géré par
     le ::after position absolute), texte de la question reste aligné
     gauche par convention de lecture (cohérence : on garde le pattern
     accordéon natif). On confirme juste que le contenu __body est
     aligné gauche pour la lisibilité. ──────────────────────────────── */
  body .faq-item summary {
    text-align: left !important;
  }
  body .faq-item__body,
  body .faq-item p {
    text-align: left !important;
  }

  /* ─── 10. CTA-DARK (sections finales) : déjà couvert par v10.19.3
     pour eyebrow/title/sub. On centre aussi les éventuels enfants. */
  body .cta-dark,
  body .cta-dark__inner,
  body .cta-dark > * {
    text-align: center !important;
  }

  /* ─── 11. PARTNERS : grille logos. Le marquee scrolle, OK. Les
     listes statiques avec partner-card centrent leur contenu. ──────── */
  body .partners-grid,
  body .partners-list,
  body .partners-marquee__track {
    justify-content: center !important;
    align-items: center !important;
  }

  /* ─── 12. ORG-CARD / ORGANIGRAMME : photo + nom + rôle centrés.
     La grid existante .admins-grid passe en 1 colonne, on s'assure
     que chaque card est centrée. ───────────────────────────────────── */
  body :is(.organigramme-card, .admin-card, .org-card),
  body :is(.organigramme-card, .admin-card, .org-card) > * {
    text-align: center !important;
  }
  body :is(.organigramme-card__photo, .admin-card__avatar, .org-card__photo, .organigramme-card__avatar) {
    margin-inline: auto !important;
  }

  /* ─── 13. STATS-BAND : reset l'align-items: flex-start +
     text-align: left forcé l.10514. ────────────────────────────────── */
  body .stats-band__item,
  body .stats-band__item.wp-block-group {
    align-items: center !important;
    text-align: center !important;
  }

  /* ─── 14. SECTION--TRIO .features-grid : retire le text-align: left
     hérité de la rule l.4942 sur mobile (le DS desktop garde left
     pour la lecture trois-colonnes, mobile centré). ────────────────── */
  body .section--trio .features-grid,
  body .section--trio .features-grid > *,
  body :is(.section--why, .section--admins, .section--actus-archive, .section--jobs)
       :is(.features-grid, .admins-grid, .actus-grid, .jobs-grid) > * {
    text-align: center !important;
  }

  /* ─── 15. EXCEPTIONS : préservées explicitement ───────────────────── */
  /* a) Article single : corps éditorial reste left. */
  body .single-actu__body,
  body .single-actu__body :is(p, ul, ol, li, blockquote, h2, h3, h4),
  body article.post .entry-content,
  body article.post .entry-content :is(p, ul, ol, li, blockquote, h2, h3, h4) {
    text-align: left !important;
  }

  /* b) Sidebar single article reste left. */
  body .single-actu__sidebar,
  body .single-actu__sidebar-mobile,
  body .single-actu__sidebar :is(.sidebar-block, .sidebar-block__title, .sidebar-list, .sidebar-list a, .sidebar-list__link) {
    text-align: left !important;
  }

  /* c) Contact-info : pattern avatar+identité (LinkedIn-style),
     l'avatar reste à gauche du body. On force son contenu textuel à
     gauche pour préserver la lisibilité du nom + rôle + meta. */
  body .contact-info {
    align-items: center !important;
    text-align: left !important;
  }
  body .contact-info__body,
  body .contact-info__name,
  body .contact-info__role,
  body .contact-info__meta {
    text-align: left !important;
    margin-inline: 0 !important;
  }

  /* d) Geiq-panel switcher BTP/Multi : déjà géré par rule existante. */

  /* e) Badges absolute (actu-card__cat, contact-card::before pastille
     gauche) : ne touche pas à leur positioning. */
  body .actu-card__cat {
    position: absolute !important;
  }

  /* f) Geiq-label-badge : règles existantes l.11428 forcent
     intentionnellement text-align: left sur __lead et __criteria > li
     (pattern texte long lecture). On respecte. */
  body .geiq-label-badge__lead,
  body .geiq-label-badge__criteria > li {
    text-align: left !important;
  }

  /* g) v10.19.5 — Timeline dispositif-schema (parcours 5 étapes) :
     contenu ALIGNÉ À GAUCHE pour suivre l'axe visuel de la timeline
     verticale (numéros à gauche reliés par une ligne, contenu à droite).
     Sinon le centrage casse le scan path linéaire de lecture. */
  body .dispositif-schema__step,
  body .dispositif-schema__step > *,
  body .dispositif-schema__step .dispositif-schema__head,
  body .dispositif-schema__step .dispositif-schema__meta,
  body .dispositif-schema__step .dispositif-schema__icon,
  body .dispositif-schema__step .dispositif-schema__title,
  body .dispositif-schema__step .dispositif-schema__desc,
  body .dispositif-schema__step .dispositif-schema__body,
  body .dispositif-schema__step :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
    text-align: left !important;
    margin-inline: 0 !important;
  }
  /* Le pill durée (.dispositif-schema__meta) reste inline-flex à gauche */
  body .dispositif-schema__step .dispositif-schema__meta {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* L'icône de l'étape reste à gauche du titre */
  body .dispositif-schema__step .dispositif-schema__icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
  }

  /* ─── 16. PADDING CARDS sur très petits écrans (≤ 380 px) ─────────── */
}

@media (max-width: 380px) {
  body :is(
    .feature-card,
    .benefit-card,
    .actu-card__body,
    .testimonial-card,
    .contact-card,
    .dispositif-step,
    .organigramme-card,
    .panel-stat,
    .why-card,
    .admin-card
  ) {
    padding: 20px 16px !important;
  }
}

/* ╚══════════════════════════════════════════════════════════════════════╝ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   v10.19.9 — Footer newsletter : wrap form (sans mention désabonnement)
   ───────────────────────────────────────────────────────────────────────
   La mention "désabonnement en un clic" a été retirée du footer (cf.
   demande Ju v10.19.9 : "TOTALEMENT supprimé du site sauf mentions
   légales / conditions spé"). On garde ici uniquement le wrap qui
   neutralise les is-layout-flow margins de Gutenberg pour que le bandeau
   reste fin et compact, jumeau visuel du reste du footer.
   ╚══════════════════════════════════════════════════════════════════════╝ */
.footer__newsletter-form-wrap {
  display: block !important;
  flex: 0 1 460px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.footer__newsletter-form-wrap > * {
  margin-block-start: 0 !important;
}

@media (max-width: 720px) {
  .footer__newsletter-form-wrap {
    flex: 0 0 auto;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║   v10.19.8 — SINGLE OFFRE D'EMPLOI (CPT awsm_job_openings)           ║
   ║──────────────────────────────────────────────────────────────────────║
   ║   Refonte complète au standard DS, jumeau de la refonte actus        ║
   ║   v10.19.0. Composants :                                             ║
   ║     - .single-job, .single-job__hero (hero spoke éditorial)          ║
   ║     - .single-job__layout (grid 2 cols 1fr 320px ≥1100px)            ║
   ║     - .single-job__body (rich text H2/H3/listes/blockquote)          ║
   ║     - .job-apply-card (sidebar sticky : meta clés + bouton CTA)      ║
   ║     - .single-job__share (partage social inline en bas du body)      ║
   ║     - .jobs-related (3 offres similaires, 1re en lead)               ║
   ║     - .awsm-application-section (wrapper #postuler du form AWSM)     ║
   ║     - .awsm-application-form (re-style des inputs AWSM)              ║
   ║     - .awsm-file-control (file input custom JS-driven)               ║
   ║                                                                      ║
   ║   Anti-patterns Impeccable évités :                                  ║
   ║     - Pas de glass abusé (apply-card = surface tinted, pas de blur)  ║
   ║     - Pas de hero-image plein écran                                  ║
   ║     - Pas d'em-dash                                                  ║
   ║     - Pas de #fff/#000 purs (tokens partout)                         ║
   ║     - Pas de side-stripe (form fields = bordure pleine 1px)          ║
   ║     - Pas d'identical card grid (1re offre similaire en variante)    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ─── 1. WRAPPER GLOBAL ─────────────────────────────────────────── */

.single-job {
  display: block;
}

/* On désactive le breadcrumb global posé en absolute dans le hero-spoke
   standard : sur le single-job, on a notre propre wrap sticky en haut. */
.single-job .single-job__hero .geiq56-breadcrumb {
  position: static;
  transform: none;
  margin: 0 auto clamp(20px, 3vw, 32px);
  left: auto;
  bottom: auto;
}


/* ─── 2. HERO ÉDITORIAL ─────────────────────────────────────────── */

.single-job__hero {
  text-align: center;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(28px, 4vw, 48px);
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  position: relative;
}

.single-job__breadcrumb-wrap {
  max-width: 1180px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  display: flex;
  justify-content: center;
}

.single-job__hero-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Eyebrow : badge type + ville + contrat, séparés par dots. */
.single-job__eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #4b575f);
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  justify-content: center;
}

.single-job__eyebrow .badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.single-job__eyebrow-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.single-job__eyebrow-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.single-job__eyebrow-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

.single-job__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  color: var(--color-text, #1a171b);
}
.single-job__title em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.single-job__lead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-text-muted, #4b575f);
  margin: 0 auto clamp(22px, 2.8vw, 32px);
  max-width: 720px;
}

.single-job__meta-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px);
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--color-text-muted, #4b575f);
  margin-bottom: clamp(22px, 2.8vw, 32px);
}
.single-job__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.single-job__meta-item svg {
  flex-shrink: 0;
  opacity: 0.65;
}
.single-job__meta-item strong {
  color: var(--color-text, #1a171b);
  font-weight: 600;
}

.single-job__hero-cta {
  display: flex;
  justify-content: center;
}
.single-job__hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Le btn-primary global est utilisé : on s'assure simplement que la
   cible cliquable a une bonne hauteur tactile. */
.single-job__hero-cta-btn {
  min-height: 48px;
}


/* ─── 3. LAYOUT 2 COLONNES (body + sidebar) ─────────────────────── */

.single-job__layout {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 32px) clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
}

/* ≥ 1100px : passage à la grid 2 cols (sidebar 320px droite) */
@media (min-width: 1100px) {
  .single-job__layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.single-job__main {
  min-width: 0;
}


/* ─── 4. CORPS ÉDITORIAL — rich text Inter 17px / line 1.7 ──────── */

.single-job__body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text, #1a171b);
  max-width: 720px;
}

.single-job__body > *:first-child { margin-top: 0; }
.single-job__body > *:last-child  { margin-bottom: 0; }

.single-job__body p {
  margin: 0 0 1.4em;
}

.single-job__body h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2em 0 0.6em;
  color: var(--color-text, #1a171b);
}
.single-job__body h2 em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.single-job__body h3 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.25;
  margin: 1.8em 0 0.5em;
  color: var(--color-text, #1a171b);
}

.single-job__body a {
  color: var(--color-primary, #e30043);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(227, 0, 67, 0.4);
  transition: text-decoration-color 0.18s ease-out;
}
.single-job__body a:hover {
  text-decoration-color: var(--color-primary, #e30043);
}

.single-job__body ul,
.single-job__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.6em;
}
.single-job__body li {
  margin: 0 0 0.5em;
}
.single-job__body li::marker {
  color: var(--color-primary, #e30043);
}

.single-job__body blockquote {
  margin: 1.8em 0;
  padding: 0.4em 1.4em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--color-text, #1a171b);
  font-style: italic;
}
.single-job__body blockquote p { margin: 0; }

.single-job__body strong { font-weight: 600; }


/* ─── 5. PARTAGE INLINE EN BAS DU BODY ──────────────────────────── */

.single-job__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.single-job__share-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #4b575f);
  margin-right: 6px;
}

.single-job__share-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  color: var(--color-text-muted, #4b575f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, transform 0.18s ease-out;
}
.single-job__share-btn:hover {
  background: rgba(227, 0, 67, 0.08);
  color: var(--color-primary, #e30043);
  border-color: rgba(227, 0, 67, 0.25);
  transform: translateY(-1px);
}
.single-job__share-btn:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 2px;
}

.single-job__share-btn--copy {
  position: relative;
}
.single-job__share-icon-default,
.single-job__share-icon-done {
  display: inline-flex;
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.single-job__share-icon-done {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  color: #2e9e6e;
}
.single-job__share-btn--copy.is-copied .single-job__share-icon-default {
  opacity: 0;
  transform: scale(0.6);
}
.single-job__share-btn--copy.is-copied .single-job__share-icon-done {
  opacity: 1;
  transform: scale(1);
}


/* ─── 6. SIDEBAR : .job-apply-card sticky ───────────────────────── */

.single-job__sidebar {
  min-width: 0;
}

@media (min-width: 1100px) {
  .single-job__sidebar {
    position: sticky;
    top: clamp(80px, 8vw, 110px);
    align-self: start;
  }
}

.job-apply-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.02);
}

.job-apply-card__eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted, #4b575f);
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.job-apply-card__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.job-apply-card__meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

.job-apply-card__meta-row dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted, #4b575f);
  font-weight: 500;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.job-apply-card__meta-row dt svg {
  flex-shrink: 0;
  opacity: 0.6;
}

.job-apply-card__meta-row dd {
  margin: 0;
  color: var(--color-text, #1a171b);
  font-weight: 500;
}

.job-apply-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  /* btn-primary global gère le reste : background, padding, transitions */
}

.job-apply-card__hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-muted, #4b575f);
  margin: 0;
  text-align: center;
}


/* ─── 7. SECTION FORMULAIRE AWSM (wrapper #postuler) ────────────── */

.awsm-application-section {
  scroll-margin-top: 96px; /* offset pour le header sticky */
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  max-width: 720px;
}

.awsm-application-section__head {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.awsm-application-section__head .section-eyebrow {
  margin: 0 0 14px;
}

.awsm-application-section__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--color-text, #1a171b);
}
.awsm-application-section__title em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.awsm-application-section__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted, #4b575f);
  margin: 0;
}


/* ─── 8. RE-STYLE INPUTS DU PLUGIN AWSM ─────────────────────────── */
/* Le plugin produit son propre markup. On override de façon défensive
   en ciblant les classes/structures les plus stables. */

.awsm-application-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  background: transparent;
}

.awsm-application-form .awsm-form-group,
.awsm-application-form .awsm-job-form-group,
.awsm-application-form p {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.awsm-application-form label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1a171b);
  letter-spacing: 0.005em;
}

.awsm-application-form .required,
.awsm-application-form label .required {
  color: var(--color-primary, #e30043);
  margin-left: 2px;
}

.awsm-application-form input[type="text"],
.awsm-application-form input[type="email"],
.awsm-application-form input[type="tel"],
.awsm-application-form input[type="url"],
.awsm-application-form input[type="number"],
.awsm-application-form select,
.awsm-application-form textarea {
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text, #1a171b);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  padding: 13px 16px;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out;
  -webkit-appearance: none;
  appearance: none;
}

.awsm-application-form input::placeholder,
.awsm-application-form textarea::placeholder {
  color: rgba(75, 87, 95, 0.55);
}

.awsm-application-form input:focus,
.awsm-application-form select:focus,
.awsm-application-form textarea:focus {
  outline: none;
  border-color: var(--color-primary, #e30043);
  box-shadow: 0 0 0 4px rgba(227, 0, 67, 0.10);
  background: var(--color-bg, #fff);
}

.awsm-application-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Bouton submit AWSM : reskin en btn-primary du DS */
.awsm-application-form button[type="submit"],
.awsm-application-form input[type="submit"],
.awsm-application-form .awsm-submit-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary, #e30043) 0%, var(--color-primary-dark, #b8002f) 100%);
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 48px;
  box-shadow: 0 1px 3px rgba(227, 0, 67, 0.18), 0 6px 18px rgba(227, 0, 67, 0.14);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease-out,
              background-color 0.18s ease-out;
  -webkit-appearance: none;
  appearance: none;
}

.awsm-application-form button[type="submit"]:hover,
.awsm-application-form input[type="submit"]:hover,
.awsm-application-form .awsm-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 3px rgba(227, 0, 67, 0.22), 0 14px 28px rgba(227, 0, 67, 0.18);
}

.awsm-application-form button[type="submit"]:focus-visible,
.awsm-application-form input[type="submit"]:focus-visible,
.awsm-application-form .awsm-submit-btn:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 3px;
}

/* Messages success / error AWSM */
.awsm-application-form .awsm-success,
.awsm-application-form .awsm-job-success,
.awsm-application-section .awsm-form-success {
  background: rgba(46, 158, 110, 0.08);
  color: #1f6f49;
  border: 1px solid rgba(46, 158, 110, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.awsm-application-form .awsm-error,
.awsm-application-form .awsm-job-error,
.awsm-application-section .awsm-form-error {
  background: rgba(227, 0, 67, 0.06);
  color: #b8002f;
  border: 1px solid rgba(227, 0, 67, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Champ checkbox RGPD éventuel : alignement horizontal */
.awsm-application-form .awsm-form-group--consent,
.awsm-application-form input[type="checkbox"] + label,
.awsm-application-form label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-text-muted, #4b575f);
  line-height: 1.45;
}

.awsm-application-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary, #e30043);
  flex-shrink: 0;
}


/* ─── 9. CUSTOM FILE INPUT (.awsm-file-control, créé en JS) ─────── */

.awsm-application-form input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.awsm-file-control {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px dashed rgba(75, 87, 95, 0.35);
  background: var(--color-bg-soft, rgba(0, 0, 0, 0.02));
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}

.awsm-file-control:hover {
  border-color: var(--color-primary, #e30043);
  background: rgba(227, 0, 67, 0.03);
}

.awsm-file-control.has-file {
  border-style: solid;
  border-color: rgba(46, 158, 110, 0.45);
  background: rgba(46, 158, 110, 0.04);
}

.awsm-file-control__btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1a171b);
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.awsm-file-control:hover .awsm-file-control__btn {
  background: rgba(227, 0, 67, 0.06);
  border-color: rgba(227, 0, 67, 0.25);
  color: var(--color-primary, #e30043);
}

.awsm-file-control__name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--color-text-muted, #4b575f);
  word-break: break-word;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.awsm-file-control.has-file .awsm-file-control__name {
  color: var(--color-text, #1a171b);
  font-weight: 500;
}


/* ─── 10. OFFRES SIMILAIRES (.jobs-related) ─────────────────────── */

.section--jobs-related {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}

.jobs-related {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.jobs-related__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.jobs-related__head .section-eyebrow {
  margin: 0 auto 14px;
}
.jobs-related__title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text, #1a171b);
}
.jobs-related__title em {
  font-style: italic;
  color: var(--color-primary, #e30043);
}

.jobs-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 24px);
}
@media (max-width: 900px) { .jobs-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jobs-related__grid { grid-template-columns: 1fr; } }

/* Variante "lead" sur la 1re carte : casse l'identical card grid.
   Sur grand écran, la 1re carte prend 2 col et porte une bordure
   carmin discrète + chips ombrées. */
@media (min-width: 1080px) {
  .jobs-related__grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .jobs-related__card--lead {
    grid-row: span 1;
    border-color: rgba(227, 0, 67, 0.25);
    background: linear-gradient(180deg, rgba(227, 0, 67, 0.02) 0%, var(--color-bg, #fff) 60%);
  }
  .jobs-related__card--lead .job-card__title {
    font-size: 1.25rem;
  }
}


/* ─── 11. DARK MODE OVERRIDES ───────────────────────────────────── */

[data-theme="dark"] .single-job__title,
[data-theme="dark"] .single-job__body,
[data-theme="dark"] .single-job__body h2,
[data-theme="dark"] .single-job__body h3,
[data-theme="dark"] .awsm-application-section__title {
  color: var(--color-text, #f0eef1);
}

[data-theme="dark"] .single-job__lead,
[data-theme="dark"] .single-job__meta-bar,
[data-theme="dark"] .single-job__share-label,
[data-theme="dark"] .awsm-application-section__sub,
[data-theme="dark"] .job-apply-card__eyebrow,
[data-theme="dark"] .job-apply-card__hint,
[data-theme="dark"] .job-apply-card__meta-row dt {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .single-job__title em,
[data-theme="dark"] .single-job__body h2 em,
[data-theme="dark"] .awsm-application-section__title em,
[data-theme="dark"] .jobs-related__title em {
  color: var(--color-primary-soft, #ff6b8a);
}

[data-theme="dark"] .job-apply-card,
[data-theme="dark"] .awsm-application-form input[type="text"],
[data-theme="dark"] .awsm-application-form input[type="email"],
[data-theme="dark"] .awsm-application-form input[type="tel"],
[data-theme="dark"] .awsm-application-form input[type="url"],
[data-theme="dark"] .awsm-application-form input[type="number"],
[data-theme="dark"] .awsm-application-form select,
[data-theme="dark"] .awsm-application-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .awsm-application-form input::placeholder,
[data-theme="dark"] .awsm-application-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .awsm-application-form input:focus,
[data-theme="dark"] .awsm-application-form select:focus,
[data-theme="dark"] .awsm-application-form textarea:focus {
  border-color: var(--color-primary-soft, #ff6b8a);
  box-shadow: 0 0 0 4px rgba(255, 107, 138, 0.14);
}

[data-theme="dark"] .awsm-application-form label,
[data-theme="dark"] .job-apply-card__meta-row dd,
[data-theme="dark"] .single-job__meta-item strong {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .single-job__share,
[data-theme="dark"] .awsm-application-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .single-job__share-btn {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}
[data-theme="dark"] .single-job__share-btn:hover {
  background: rgba(255, 107, 138, 0.10);
  color: var(--color-primary-soft, #ff6b8a);
  border-color: rgba(255, 107, 138, 0.35);
}

[data-theme="dark"] .awsm-file-control {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .awsm-file-control:hover {
  background: rgba(255, 107, 138, 0.06);
  border-color: var(--color-primary-soft, #ff6b8a);
}
[data-theme="dark"] .awsm-file-control__btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}
[data-theme="dark"] .awsm-file-control__name {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .awsm-file-control.has-file .awsm-file-control__name {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .jobs-related__card--lead {
  border-color: rgba(255, 107, 138, 0.30);
  background: linear-gradient(180deg, rgba(255, 107, 138, 0.04) 0%, transparent 60%);
}


/* ─── 12. RESPONSIVE — mobile ≤ 1099px ──────────────────────────── */

@media (max-width: 1099px) {
  /* La sidebar passe AVANT le body, en bandeau inline plus compact. */
  .single-job__layout {
    grid-template-columns: 1fr;
  }
  .single-job__sidebar {
    order: -1;
    position: static;
  }

  .job-apply-card {
    border-radius: 14px;
  }

  /* Mode "compact mobile" pour les meta-rows : layout horizontal
     plus dense, libère du scroll. */
  .job-apply-card__meta-row {
    grid-template-columns: 100px 1fr;
    font-size: 13.5px;
  }
}

@media (max-width: 640px) {
  .single-job__hero {
    padding-top: clamp(32px, 6vw, 56px);
    padding-bottom: clamp(20px, 4vw, 36px);
  }

  .single-job__eyebrow {
    flex-direction: column;
    gap: 8px;
  }
  .single-job__eyebrow-sep {
    display: none;
  }

  .single-job__meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }

  .job-apply-card {
    padding: 18px;
  }
  .job-apply-card__meta-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .job-apply-card__meta-row dt {
    font-size: 11.5px;
  }

  .single-job__share {
    justify-content: center;
  }

  .awsm-file-control {
    flex-wrap: wrap;
  }
}


/* ─── 13. REDUCED MOTION ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .single-job__share-btn,
  .single-job__share-icon-default,
  .single-job__share-icon-done,
  .single-job__hero-cta-btn,
  .job-apply-card__cta,
  .awsm-application-form button[type="submit"],
  .awsm-application-form input[type="submit"],
  .awsm-file-control,
  .awsm-file-control__btn,
  .jobs-related__card {
    transition: none !important;
  }
}

/* ╚══════════════════════════════════════════════════════════════════════╝ */


[data-theme="dark"] .footer__newsletter-hint {
  color: rgba(255, 255, 255, 0.45);
}


/* ═══════════════════════════════════════════════════════════════════
   v10.22.0 — Switch sous le H1 des heros (retour client juillet 2026)
   Le persona-switch / geiq-switch suit désormais le titre : on lui
   redonne de l'air entre H1 et sous-titre. Spécificité > la règle
   `html body .persona-switch { margin-top: 4px }` historique.
   ═══════════════════════════════════════════════════════════════════ */
html body .hero__title + .persona-switch {
  margin-top: clamp(14px, 2vw, 22px) !important;
  margin-bottom: clamp(2px, 0.6vw, 8px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v10.23.0 — Hero home en photo + bande photo duo (retour client)
   Actif uniquement quand l'option hero_home_photo est remplie
   (body.home.has-hero-photo + --geiq56-hero-photo émis par functions.php).
   ═══════════════════════════════════════════════════════════════════ */
body.home.has-hero-photo .hero {
  background-image:
    linear-gradient(180deg, rgba(24, 19, 22, .68) 0%, rgba(24, 19, 22, .52) 52%, rgba(24, 19, 22, .72) 100%),
    var(--geiq56-hero-photo);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
@media (max-width: 860px) {
  body.home.has-hero-photo .hero { background-position: 66% center; }
}
body.home.has-hero-photo .hero .hero__title { color: #fff; }
body.home.has-hero-photo .hero .hero__subtitle { color: rgba(255, 255, 255, .9); }
body.home.has-hero-photo .hero .hero__pill {
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(4px);
}
body.home.has-hero-photo .hero .persona-switch {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
}
body.home.has-hero-photo .hero .persona-switch__btn:not(.is-active) { color: rgba(255, 255, 255, .78); }
body.home.has-hero-photo .hero .persona-switch__btn:not(.is-active):hover { color: #fff; }
/* v10.28.1 — le bouton actif garde son fond blanc d'origine mais la règle
   générique ci-dessus (plus spécifique que .is-active) écrasait son texte
   en blanc sur blanc. On ré-affirme le carmin. */
body.home.has-hero-photo .hero .persona-switch__btn.is-active { color: var(--color-primary, #e30043); }
body.home.has-hero-photo .hero .wp-block-button.btn-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
}
body.home.has-hero-photo .hero .wp-block-button.btn-outline .wp-block-button__link:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
}
body.home.has-hero-photo .hero .hero__scroll-down,
body.home.has-hero-photo .hero .hero__scroll-down-label,
body.home.has-hero-photo .hero .hero__scroll-down-arrow { color: #fff; }

/* ── Bands éditoriales — panneaux full-bleed en pile sticky (v10.29.0,
      remplace le zigzag encadré v10.25.0). Retour client : plus de
      rectangles imbriqués, et effet « cover » au scroll : le panneau
      suivant vient se poser sur le panneau figé (bands-stack.js pour
      la profondeur). div, pas section : rythme nth-of-type préservé. ── */
.bands-stack { position: relative; padding-bottom: 8vh; }
.bands-stack__spacer { height: 48vh; }
.media-band {
  position: sticky;
  top: 7vh;
  min-height: 86vh;
  min-height: 86svh;
  display: grid;
  align-items: stretch;
  background: var(--color-neutral-0, #fff);
  overflow: hidden;
  transform-origin: center top;
  will-change: transform, filter;
}
.media-band--flip { background: #f6f4f7; }
.media-band .container.media-band__grid {
  display: grid;
  grid-template-columns: 11fr 9fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  width: min(1200px, calc(100% - clamp(40px, 8vw, 128px)));
  max-width: none;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 0;
}
.media-band--flip .media-band__media { order: 2; }
.media-band--flip .media-band-carousel__visual { order: 2; }
.media-band--flip .media-band__body { order: 1; }
.media-band__media {
  position: relative;
  z-index: 0;
  margin: 0;
  align-self: center;
  width: 100%;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 22px 44px -20px rgba(26, 23, 27, .38);
}
/* Accent carmin décalé derrière l'image (retour v10.31.0) */
.media-band__media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary, #e30043);
  opacity: .14;
  transform: translate(14px, 14px);
  z-index: -1;
}
.media-band--flip .media-band__media::before { transform: translate(-14px, 14px); }
.media-band__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.media-band__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 110px);
}
.media-band__body .section-eyebrow { margin-bottom: var(--space-2, 12px); }
.media-band__body .section-title { text-align: left; margin-bottom: var(--space-3, 16px); }

/* v10.42.0 — grille uniforme des trois panneaux de l'accueil. */
@media (min-width: 821px) {
  body.home .bands-stack > .media-band.media-band--flip .container.media-band__grid {
    grid-template-columns: 9fr 11fr;
  }

  body.home .bands-stack > .media-band .media-band__body {
    min-width: 0;
    padding-inline: clamp(24px, 3.5vw, 52px);
  }

  body.home .bands-stack > .media-band:not(.media-band--flip)
  .media-band__body .section-title {
    width: 100%;
    margin-inline: 0 !important;
    text-align: start !important;
  }

  body.home .bands-stack > .media-band.media-band--flip
  .media-band__body .section-title {
    width: 100%;
    margin-inline: 0 !important;
    text-align: start !important;
  }
}

@media (max-width: 820px) {
  body.home .bands-stack > .media-band
  .media-band__body .section-title {
    width: 100%;
    margin-inline: 0 !important;
    text-align: start !important;
  }
}

.media-band__text {
  color: var(--color-neutral-600, #57505b);
  line-height: 1.65;
  margin: 0 0 var(--space-4, 24px);
  max-width: 52ch;
}
@media (max-width: 820px) {
  .media-band .container.media-band__grid { grid-template-columns: 1fr; }
  .media-band--flip .media-band__media { order: 0; }
  .media-band--flip .media-band-carousel__visual { order: 0; }
  .media-band--flip .media-band__body { order: 1; }
  .media-band__body { padding: 20px 0 36px; }
  .media-band__media::before,
  .media-band--flip .media-band__media::before { transform: translate(10px, 10px); }
}
@media (prefers-reduced-motion: reduce) {
	.media-band { transform: none !important; filter: none !important; }
}

/* v10.57.4 — pile mobile : pas de faux conteneur de scroll ni de grands blancs. */
@media (max-width: 820px) {
	body.home { overflow-x: clip !important; }
	body.home .bands-stack { padding-bottom: 32px; }
	body.home .bands-stack > .bands-stack__spacer {
		height: clamp(28px, 8vh, 64px);
		height: clamp(28px, 8svh, 64px);
	}
	body.home .bands-stack > .media-band {
		top: var(--band-stack-top, 7vh);
		min-height: 0;
	}
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
	body.home .bands-stack > .media-band { position: relative; top: auto; will-change: auto; }
	body.home .bands-stack > .bands-stack__spacer { height: 28px; }
}
[data-theme="dark"] .media-band { background: #1a171b; }
[data-theme="dark"] .media-band--flip { background: #211c23; }
[data-theme="dark"] .media-band__text { color: rgba(255, 255, 255, .72); }

/* ── Carrousel des media-bands (v10.26.0) — actif seulement si la figure
      contient 2+ images (classe .is-carousel posée par le JS). Le radius
      vit sur les img (inherit) : pas d'overflow hidden, l'accent carmin
      décalé (::before) reste visible. ── */
/* v10.29.1 : le carrousel garde le ratio naturel 3:2 des images
   (fin du pleine-hauteur : crop violent + upscale flou) */
.media-band__media.is-carousel { aspect-ratio: 3 / 2; }
.media-band__media.is-carousel img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.media-band__media.is-carousel img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .media-band__media.is-carousel img { transition: none; }
}

/* ── Navigation éditoriale validée — proposition 3 (v10.40.0)
      Partagée par les trois panneaux de la pile de l’accueil via
      media-band-carousel.js. Les flèches reprennent les chevrons
      déjà employés par le thème ; le rail reste léger et carmin. ── */
.media-band--carousel-featured .media-band-carousel__visual {
  align-self: center;
  width: 100%;
  min-width: 0;
}
.media-band--carousel-featured .media-band__media {
  touch-action: pan-y;
}
.media-band--carousel-featured .media-band__media.is-carousel img {
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.media-band--carousel-featured .media-band__media.is-carousel img:nth-child(2) { object-position: center 48%; }
.media-band--carousel-featured .media-band__media.is-carousel img:nth-child(3) { object-position: center 44%; }
.media-band--carousel-featured .media-band__media.is-carousel img:nth-child(4) { object-position: center 48%; }
.media-band-carousel__status {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.media-band-carousel__nav {
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 49px minmax(112px, 135px) 88px;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.media-band-carousel__count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--color-neutral-900, #1a171b);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.media-band-carousel__count-separator,
.media-band-carousel__count-total {
  color: var(--color-neutral-400, #9b98a0);
}
.media-band-carousel__dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.media-band-carousel__dots::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(227, 0, 67, .18);
  transform: translateY(-50%);
}
.media-band-carousel__dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.media-band-carousel__dot span {
  display: block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--color-primary, #e30043);
  border-radius: 50%;
  background: var(--color-neutral-0, #fff);
  transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out;
}
.media-band-carousel__dot.is-active span {
  border-color: var(--color-primary, #e30043);
  background: var(--color-primary, #e30043);
}
.media-band-carousel__dot:hover span { transform: scale(1.18); }
.media-band-carousel__arrows {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
.media-band-carousel__arrow {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease-out, transform 180ms ease-out;
}
.media-band-carousel__arrow::before {
  content: '';
  position: absolute;
  inset: 6px 5px;
  border: 1.5px solid var(--color-primary, #e30043);
  border-radius: 50%;
  background: var(--color-neutral-0, #fff);
  transition: background-color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.media-band-carousel__arrow svg {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.media-band-carousel__arrow--previous { color: var(--color-primary-dark, #b10035); }
.media-band-carousel__arrow--next { color: #fff; }
.media-band-carousel__arrow--next::before {
  background: var(--color-primary, #e30043);
  box-shadow: 0 8px 18px rgba(227, 0, 67, .2);
}
.media-band-carousel__arrow:hover { transform: translateY(-2px); }
.media-band-carousel__arrow--previous:hover::before {
  background: rgba(227, 0, 67, .08);
  box-shadow: 0 8px 20px rgba(37, 29, 34, .1);
}
.media-band-carousel__arrow--next:hover::before {
  border-color: var(--color-primary-dark, #b10035);
  background: var(--color-primary-dark, #b10035);
  box-shadow: 0 8px 20px rgba(37, 29, 34, .1);
}
.media-band-carousel__arrow:active { transform: translateY(0) scale(.96); }
.media-band-carousel__dot:focus-visible,
.media-band-carousel__arrow:focus-visible,
.media-band-carousel__visual:focus-visible {
  outline: 2px solid var(--color-primary, #e30043);
  outline-offset: 3px;
}
@media (max-width: 820px) {
  .media-band-carousel__nav {
    grid-template-columns: 49px clamp(112px, 34.6vw, 135px) 88px;
  }
  .media-band-carousel__count {
    gap: 5px;
    font-size: .9rem;
  }
}
@media (max-width: 380px) {
  .media-band-carousel__nav {
    grid-template-columns: 49px clamp(106px, 33vw, 112px) 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .media-band--carousel-featured .media-band__media.is-carousel img,
  .media-band-carousel__dot span,
  .media-band-carousel__arrow {
    transition: none !important;
  }
}
[data-theme="dark"] .media-band-carousel__count { color: #fff; }
[data-theme="dark"] .media-band-carousel__count-separator,
[data-theme="dark"] .media-band-carousel__count-total { color: rgba(255, 255, 255, .58); }
[data-theme="dark"] .media-band-carousel__dot span,
[data-theme="dark"] .media-band-carousel__arrow::before { background: #1a171b; }
[data-theme="dark"] .media-band-carousel__dot.is-active span,
[data-theme="dark"] .media-band-carousel__arrow--next::before { background: var(--color-primary, #e30043); }

/* ── Pré-JS : une seule image visible dans les figures des bands
      (les suivantes n'apparaissent que via le carrousel) ── */
.media-band__media img + img { display: none; }
.media-band__media.is-carousel img { display: block; }

/* ── Pêle-mêle de visages du hero (v10.26.0) ──
      Grille absolue derrière le hero, tuiles construites par
      hero-mosaic.js. La photo de fond (has-hero-photo) reste
      visible pendant le chargement et sert de fallback no-JS
      et prefers-reduced-motion. ── */
.hero__mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  overflow: hidden;
}
.hero__mosaic-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.hero__mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: saturate(.82) contrast(.96);
}
.hero__mosaic-tile img.is-active { opacity: 1; }
/* Voile sombre au-dessus des visages, un cran plus dense que la photo */
.hero__mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 19, 22, .74) 0%, rgba(24, 19, 22, .60) 52%, rgba(24, 19, 22, .80) 100%);
}
body.has-hero-mosaic .hero > *:not(.hero__mosaic) { position: relative; z-index: 1; }

/* ── Mur de visages / témoignages (v10.28.0 — remplace le flip v10.27.0) ──
      16 tuiles sur 2 rangées (desktop) / 4×4 (mobile). Au survol ou focus
      d'une tuile, le mur s'estompe sauf elle et le témoignage s'affiche
      en grande typo serif au centre (calque .faces-wall__quote). ── */
.faces-wall { position: relative; background: #17131a; padding: 0; }
.faces-wall__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1100px) {
  .faces-wall__grid { grid-template-columns: repeat(4, 1fr); }
}
.faces-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  appearance: none;
  cursor: pointer;
  aspect-ratio: 1;
  overflow: hidden;
  filter: saturate(.8);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.faces-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faces-wall.has-active .faces-tile { opacity: .26; filter: saturate(.4); }
.faces-wall.has-active .faces-tile.is-active {
  opacity: 1;
  filter: saturate(1.05);
  transform: scale(1.045);
  z-index: 1;
}
.faces-tile:focus-visible { outline: 2px solid var(--color-primary, #e30043); outline-offset: -2px; }
.faces-wall__quote {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(20px, 4vw, 48px);
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.faces-wall.has-active .faces-wall__quote { opacity: 1; }
.faces-wall__text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  font-style: italic;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.faces-wall__text::before { content: '«\2009'; }
.faces-wall__text::after  { content: '\2009»'; }
.faces-wall--pending .faces-wall__text::before,
.faces-wall--pending .faces-wall__text::after { content: none; }
.faces-wall__cite {
  font-style: normal;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--color-primary, #e30043);
}
@media (prefers-reduced-motion: reduce) {
  .faces-tile, .faces-wall__quote { transition: none; }
  .faces-wall.has-active .faces-tile.is-active { transform: none; }
}

/* ── Barre de progression de scroll (v10.30.0) ──
      Fil lumineux carmin discret le long du haut de l'écran :
      matérialise l'avancement du scroll (retour client « montrer
      le scroll »). Élément injecté par scroll-progress.js. ── */
.geiq56-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-primary, #e30043), #ff4d78);
  box-shadow: 0 0 8px rgba(227, 0, 67, .45), 0 0 18px rgba(227, 0, 67, .22);
  z-index: 9999;
  pointer-events: none;
}

/* ── Bande typographique kinétique (v10.32.0) ──
      Marquee carmin entre la pile éditoriale et le switcher.
      div (pas section) : rythme nth-of-type préservé. Tout le
      mouvement est piloté par kinetic-band.js (rAF). ── */
.kinetic {
  background: var(--color-primary, #e30043);
  color: #fff;
  padding-block: clamp(26px, 4vw, 48px);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.kinetic.dragging { cursor: grabbing; }
.k-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.k-word {
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-size: clamp(26px, 4vw, 54px);
  line-height: 1;
  padding: 0 30px;
  white-space: nowrap;
  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    color .35s cubic-bezier(.16, 1, .3, 1),
    -webkit-text-stroke-color .35s cubic-bezier(.16, 1, .3, 1);
}
.k-word em { font-style: italic; }
.k-word.out {
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(255, 255, 255, .65);
}
.kinetic:not(.dragging) .k-word:hover { transform: scale(1.1); }
.kinetic:not(.dragging) .k-word.out:hover {
  color: #fff;
  -webkit-text-stroke-color: transparent;
}
.k-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
}

/* ═══════════════════════════════════════════════════════════════════
   v10.35.0 — Retour client V1
   ═══════════════════════════════════════════════════════════════════ */

/* Slogan officiel sous le logo (header) */
.site-logo-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.site-logo__slogan {
  margin: 0 !important;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--color-neutral-500);
  line-height: 1.2;
  white-space: nowrap;
}
[data-theme="dark"] .site-logo__slogan { color: rgba(255,255,255,.55); }
@media (max-width: 640px) { .site-logo__slogan { font-size: .625rem; } }

/* Logos officiels des structures dans les panels du switcher */
.panel-kicker__logo { height: 46px; width: auto; display: block; }
.panel-btp__kicker, .panel-multi__kicker { margin-bottom: 16px; }
@media (max-width: 640px) { .panel-kicker__logo { height: 36px; } }

/* Mention « satisfaction globale » sous les compteurs du hero */
.hero__metrics-mention {
  text-align: center;
  font-size: .8125rem;
  color: var(--color-neutral-500);
  margin: 12px 0 0 !important;
}
[data-theme="dark"] .hero__metrics-mention { color: rgba(255,255,255,.5); }

/* Logo d'entité dans le hero des pages GEIQ (v10.36.0 — remplace l'eyebrow,
   posé AU-DESSUS du titre : c'est lui l'identité de la page). */
.hero__entity-logo { margin: 0 0 24px; }
.hero__entity-logo img { height: 60px; width: auto; display: inline-block; }
@media (max-width: 640px) { .hero__entity-logo { margin-bottom: 18px; } .hero__entity-logo img { height: 46px; } }

/* Section « Vous êtes intéressés par un de ces métiers ? » (v10.35.0, page candidats) */
.metiers-duo__logo { margin: 0 0 10px; }
.metiers-duo__logo img { height: 42px; width: auto; }
.metiers-duo__link { margin: 12px 0 0; }
@media (max-width: 640px) { .metiers-duo__logo img { height: 34px; } }

/* Filtres offres en menus déroulants (v10.35.0, retour client V1) */
.jobs-filter-group--select-only .jobs-filter-group__select {
  display: inline-block !important;
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md, 8px);
  background: var(--color-neutral-0, #fff);
  font-size: .875rem;
  color: var(--color-neutral-800);
}
[data-theme="dark"] .jobs-filter-group--select-only .jobs-filter-group__select {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #f0eef1;
}

/* v10.35.1 — section métiers duo (candidats) : 2 cartes symétriques dans le container.
   Grid plutôt que flex : .feature-card impose width:100%, ce qui fait déborder
   les colonnes flex de Gutenberg (chaque colonne prenait toute la largeur). */
.metiers-duo.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 24px);
  align-items: stretch;
  margin: 0;
}
.metiers-duo .wp-block-column.feature-card { width: auto; height: auto; margin: 0; min-width: 0; }
@media (max-width: 781px) {
  .metiers-duo.wp-block-columns { grid-template-columns: 1fr; gap: var(--space-3, 16px); }
}

/* ═══════════════════════════════════════════════════════════════════
   v10.35.3 — Heros pages intérieures (retour client images)
   Piste 1 « photo immersive » : .section--hero-photo (6 pages)
   Piste 2 « split éditorial » : .section--hero-split (pages GEIQ)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Piste 1 : photo plein cadre + voile + texte blanc ──
   NB : le thème pose `.site-main .section--hero-spoke > :not(.glow-canvas)
   { position: relative }` (spécificité 0,3,0) → nos couches bg/veil doivent
   être plus spécifiques + !important pour rester en absolute. */
.section--hero-photo { position: relative; overflow: hidden; }
/* full-bleed (technique maison, cf. testimonials-marquee) */
.site-main .section--hero-photo,
.site-main .section--hero-split {
  max-width: none;
  width: 100vw;
  margin-inline: calc( 50% - 50vw );
}
.site-main .section--hero-photo > .hero-photo__bg,
.hero-photo__bg {
  position: absolute !important; inset: 0 !important;
  max-width: none !important; width: auto !important; margin: 0 !important;
  background-size: cover; background-position: center 32%;
  z-index: 0;
}
.site-main .section--hero-photo > .hero-photo__veil,
.hero-photo__veil {
  position: absolute !important; inset: 0 !important; z-index: 1;
  max-width: none !important; width: auto !important; margin: 0 !important;
  background: linear-gradient(180deg, rgba(20,14,18,.70) 0%, rgba(20,14,18,.44) 46%, rgba(26,10,16,.80) 100%);
}
.section--hero-photo .hero__content { position: relative; z-index: 2; }
.section--hero-photo .hero__eyebrow { color: #ffb3c2; }
.section--hero-photo .hero__title { color: #fff; }
.section--hero-photo .hero__title em { color: #ff6b8a; }
.section--hero-photo .hero__subtitle { color: rgba(255,255,255,.85); }
.section--hero-photo .geiq56-breadcrumb,
.section--hero-photo .geiq56-breadcrumb a,
.section--hero-photo .geiq56-breadcrumb__label { color: rgba(255,255,255,.72) !important; }
.section--hero-photo .geiq56-breadcrumb__item--current .geiq56-breadcrumb__label { color: #fff !important; }

/* ── Piste 2 : split texte / photo bord à bord (pages GEIQ) ── */
.section--hero-split { position: relative; padding: 0 !important; overflow: hidden; }
.hero-split__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 520px; align-items: stretch;
}
.hero-split__txt {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(56px, 8vw, 110px) clamp(28px, 4vw, 56px) clamp(70px, 9vw, 120px) clamp(28px, 6vw, 96px);
}
/* v10.35.8 — hiérarchie resserrée (retour Ju) : le logo est le chapeau,
   plus d'eyebrow pill, titre plus grand, rythme vertical serré. */
.hero-split__logo { margin: 0 0 26px; }
.hero-split__logo img { height: 64px; width: auto; display: block; }
.hero-split__txt .hero__title {
  text-align: left; margin: 0 0 18px;
  font-size: clamp(2.6rem, 4.4vw, 4rem) !important;
  line-height: 1.05 !important;
}
.hero-split__txt .hero__subtitle { text-align: left; max-width: 500px; margin: 0; font-size: 1.0625rem; }
.hero-split__visual { position: relative; min-height: 320px; }
.hero-split__visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-split__visual::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(90deg, var(--color-base, #fff) 0%, transparent 100%);
}
/* v10.35.7 — liseré kinétique retiré (retour Ju : trop présent à l'échelle réelle).
   Badge stats flottant (repris du mockup piste 2, chiffres validés PDF client). */
.hero-split__badge {
  position: absolute; bottom: 26px; right: 26px; z-index: 2;
  display: flex; gap: 26px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 10px 30px rgba(26,23,27,.22);
}
.hero-split__badge .hsb b {
  display: block;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--color-primary, #c41e3a);
}
.hero-split__badge .hsb span {
  font-size: .68rem;
  line-height: 1.35;
  color: var(--color-neutral-600, #57525b);
  display: block; margin-top: 3px;
}
@media (max-width: 880px) {
  .hero-split__badge { right: 14px; bottom: 14px; gap: 18px; padding: 12px 16px; }
  .hero-split__badge .hsb b { font-size: 1.35rem; }
}
.section--hero-split .geiq56-breadcrumb { padding-left: clamp(28px, 6vw, 96px) !important; }
@media (max-width: 880px) {
  .hero-split__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__txt { padding: 48px 24px 34px; }
  .hero-split__txt .hero__title, .hero-split__txt .hero__subtitle { text-align: center; }
  .hero-split__txt .hero__subtitle { margin-inline: auto; }
  .hero-split__logo img { height: 50px; margin-inline: auto; }
  .hero-split__visual { min-height: 260px; }
  .section--hero-split .geiq56-breadcrumb { padding-left: 0 !important; }
}
[data-theme="dark"] .hero-split__visual::after { background: linear-gradient(90deg, #17141a 0%, transparent 100%); }


/* ═══ v10.35.9 — Sections équipe (pages GEIQ) + bloc PRODIAT (/entreprises/) ═══ */
.equipe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 24px); }
.equipe-card { margin: 0; background: var(--color-neutral-0, #fff); border-radius: var(--radius-lg, 14px); overflow: hidden; box-shadow: 0 8px 28px rgba(26,23,27,.08); }
.equipe-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.equipe-card figcaption { padding: 12px 16px 14px; }
.equipe-card figcaption strong { display: block; font-weight: 600; font-size: .9375rem; color: var(--color-neutral-900, #1a171b); }
.equipe-card figcaption span { font-size: .75rem; color: var(--color-neutral-500, #6b7280); }
.equipe-note { text-align: center; font-size: .75rem; color: var(--color-neutral-500, #6b7280); margin: 16px 0 0; }
@media (max-width: 880px) { .equipe-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3, 16px); } }

.prodiat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 24px); max-width: 980px; margin: 0 auto; }
.prodiat-col { background: var(--color-neutral-0, #fff); border: 1px solid var(--color-neutral-200, #e5e2e8); border-radius: var(--radius-lg, 14px); padding: 26px 28px; }
.prodiat-col h3 { font-family: var(--font-display, 'Instrument Serif', Georgia, serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 12px; }
.prodiat-col ul { margin: 0; padding-left: 18px; }
.prodiat-col li { font-size: .9375rem; color: var(--color-neutral-600, #57525b); line-height: 1.6; margin-bottom: 8px; }
.prodiat-close { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 1rem; color: var(--color-neutral-600, #57525b); line-height: 1.7; }
@media (max-width: 880px) { .prodiat-cols { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   v10.38.0 — Scrollytelling parcours candidat (7 étapes)
   Panneau sticky + rail laser speed-ramp + focus/dim au scroll
   ══════════════════════════════════════════════════════════════ */

.method {
  position: relative;
  overflow: clip; /* clip (pas hidden) : ne casse pas position:sticky */
  --m-text: var(--color-text, #1a171b);
  --m-muted: var(--color-text-muted, #6b6b6b);
  --m-ghost: rgba(26, 23, 27, 0.08);
  --m-line: rgba(26, 23, 27, 0.14);
  --m-accent: var(--color-primary, #e30043);
}
[data-theme="dark"] .method {
  --m-text: #f0eef1;
  --m-muted: #a7a3aa;
  --m-ghost: rgba(240, 238, 241, 0.09);
  --m-line: rgba(240, 238, 241, 0.16);
}

.method .wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

/* Halo carmin de fond — glisse verticalement au fil des étapes */
.method-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-78%);
  top: calc(8% + var(--sp, 0) * 50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--m-accent) 17%, transparent), transparent 70%);
  filter: blur(100px);
  opacity: 0.55;
  pointer-events: none;
  transition: top 1s cubic-bezier(0.85, 0, 0.15, 1);
}

/* v10.58.6 — Julien removes the background spotlight, not the progress rail. */
body.page-id-30700 #parcours.method .method-glow {
  display: none !important;
}

/* ── Layout ── */
.scrolly {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.scrolly-media {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.method .eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 14px;
}
.method h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  color: var(--m-text);
  margin: 0 0 14px;
}
.method h2 em {
  font-style: italic;
  color: var(--m-accent);
}
.scrolly-sub {
  font-size: 15px;
  color: var(--m-muted);
  margin: 0 0 28px;
  max-width: 42ch;
}

/* ── Rail de progression (voie dédiée à gauche des pastilles) ── */
.scrolly-progress {
  position: relative;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scrolly-progress::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-radius: 2px;
  background: var(--m-line);
}
.scrolly-progress::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 15px;
  width: 2px;
  border-radius: 2px;
  height: calc((100% - 30px) * var(--sp, 0));
  background: linear-gradient(180deg, color-mix(in srgb, var(--m-accent) 45%, transparent), var(--m-accent));
  transition: height 0.85s cubic-bezier(0.85, 0, 0.15, 1); /* speed-ramp */
}

/* Tête laser */
.scrolly-progress .rail-head {
  position: absolute;
  left: 2px;
  top: calc(15px + (100% - 30px) * var(--sp, 0));
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--m-accent);
  box-shadow: 0 0 16px 4px color-mix(in srgb, var(--m-accent) 45%, transparent);
  transition: top 0.9s cubic-bezier(0.85, 0, 0.15, 1);
}
.scrolly-progress .rail-head::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 88px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--m-accent) 85%, transparent), transparent);
  filter: blur(7px);
  opacity: 0.55;
  pointer-events: none;
}
.scrolly-progress .rail-head::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: #fff;
  filter: blur(3px);
}

/* Items du rail */
.scrolly-progress .sp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.scrolly-progress .sp-item.on { opacity: 1; }
.scrolly-progress .sp-item .dot {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--m-text);
  border: 1.5px solid var(--m-line);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.scrolly-progress .sp-item.on .dot { border-color: var(--m-accent); }
.scrolly-progress .sp-item.is-active .dot {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: #fff;
}
.scrolly-progress .sp-item .t {
  font-size: 13.5px;
  color: var(--m-text);
}

/* ── Étapes ── */
.scrolly-steps { min-width: 0; }
.scrolly-step {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.6s ease, filter 0.6s ease;
}
.scrolly-step .n {
  font-family: var(--font-display);
  font-size: clamp(70px, 10vw, 130px);
  line-height: 1;
  color: var(--m-ghost);
  margin: 0 0 6px;
  transition: color 0.5s ease;
}
.scrolly-step.active .n { color: var(--m-accent); }
.scrolly-step .tag {
  font-size: 12.5px;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin: 0 0 10px;
}
.scrolly-step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  color: var(--m-text);
  margin: 0 0 12px;
}
.scrolly-step p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--m-muted);
  max-width: 52ch;
  margin: 0;
}
/* Flou UNIQUEMENT sur les étapes déjà passées (index < actif) */
.scrolly-step.dim {
  opacity: 0.42;
  filter: blur(1.5px);
}

/* ── Responsive ── */
@media (max-width: 820px) {
  .scrolly { grid-template-columns: 1fr; }
  .scrolly-media {
    position: static;
    height: auto;
  }
  .scrolly-progress, .method-glow { display: none; }
  .scrolly-step {
    min-height: 0;
    padding: 26px 0;
    border-bottom: 1px solid var(--m-line);
  }
  .scrolly-step:last-child { border-bottom: 0; }
  .scrolly-step .n { font-size: 56px; }
  .scrolly-step.dim { opacity: 1; filter: none; }
}

/* ── Accessibilité ── */
@media (prefers-reduced-motion: reduce) {
  .method-glow,
  .scrolly-progress::after,
  .scrolly-progress .rail-head,
  .scrolly-step,
  .scrolly-step .n,
  .scrolly-progress .sp-item,
  .scrolly-progress .sp-item .dot { transition: none; }
  .scrolly-step.dim { opacity: 1; filter: none; }
}

/* v10.38.1 — la pill kicker du panneau scrolly s'aligne à gauche (pas centrée).
   !important requis : une règle globale pose margin-inline:auto !important sur .eyebrow. */
.method .scrolly-media .eyebrow {
  margin-inline: 0 !important;
  margin-block: 0 16px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   v10.43.1 — Navigation flottante globale
   - sélecteur clair/sombre déplacé à gauche ;
   - retour en haut à droite ;
   - réserve mobile dans le footer pour ne masquer aucun lien légal.
   ═══════════════════════════════════════════════════════════════════ */
.theme-toggle-sticky {
  left: clamp(14px, 2vw, 28px);
  right: auto;
  bottom: max(clamp(14px, 2vw, 28px), calc(env(safe-area-inset-bottom, 0px) + 10px));
}
.site-back-to-top {
  right: clamp(14px, 2vw, 28px);
  bottom: max(clamp(14px, 2vw, 28px), calc(env(safe-area-inset-bottom, 0px) + 10px));
}
@media (max-width: 767px) {
  .site-footer .footer__bottom {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.44.0 — Signature de marque persistante
   La baseline client reste visible dans le header réduit et devient
   un élément de marque distinct sous le logo du footer.
   ═══════════════════════════════════════════════════════════════════ */
.site-logo__slogan {
  color: var(--color-neutral-500, #6b7280);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .025em;
  text-shadow: none;
  transition: color .2s var(--ease-out);
}
.site-header.is-scrolled .site-logo__slogan {
  display: block;
}
[data-theme="dark"] .site-logo__slogan {
  color: rgba(255, 255, 255, .72);
  text-shadow: none;
}

.site-footer .footer__logo.wp-block-site-logo {
  margin-bottom: 8px !important;
}
.site-footer .footer__slogan {
  max-width: 320px;
  margin: 0 0 7px !important;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.0625rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-primary-dark, #b8002f);
}
.site-footer .footer__tagline {
  margin-bottom: 16px !important;
}
[data-theme="dark"] .site-footer .footer__slogan {
  color: #ff6b8a;
}

@media (max-width: 640px) {
  .site-logo__slogan {
    font-size: .625rem;
    letter-spacing: .02em;
  }
  .site-footer .footer__slogan {
    font-size: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   v10.45.0 — Retour du pêle-mêle de portraits sur l'accueil
   Variante purement visuelle : 16 visages uniques, sans nom, métier
   ni témoignage fictif. Le carmin rythme le mur sans masquer les visages.
   ═══════════════════════════════════════════════════════════════════ */
.faces-wall--visual {
  isolation: isolate;
  overflow: hidden;
  border-block: 3px solid var(--color-primary, #e30043);
  background:
    radial-gradient(circle at 50% 0%, rgba(227, 0, 67, .18), transparent 42%),
    #17131a;
}
.faces-wall--visual .faces-wall__grid {
  gap: 2px;
  background: rgba(255, 255, 255, .08);
}
.faces-wall--visual .faces-tile {
  margin: 0;
  cursor: default;
  background: #241d27;
  filter: saturate(.86) contrast(1.02);
  transform: translateZ(0);
}
.faces-wall--visual .faces-tile img {
  object-position: 50% 38%;
  transform: scale(1.015);
  transition: transform .7s var(--ease-out, ease);
}
.faces-wall--visual .faces-tile:nth-child(4n + 2) img { object-position: 50% 34%; }
.faces-wall--visual .faces-tile:nth-child(4n + 3) img { object-position: 50% 42%; }
.faces-wall--visual.has-active .faces-tile {
  opacity: .7;
  filter: saturate(.62) contrast(1.02);
}
.faces-wall--visual.has-active .faces-tile.is-active {
  z-index: 1;
  opacity: 1;
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.035);
  box-shadow: 0 0 0 2px var(--color-primary, #e30043), 0 0 32px rgba(227, 0, 67, .3);
}
.faces-wall--visual.has-active .faces-tile.is-active img {
  transform: scale(1.055);
}

@media (min-width: 821px) and (max-width: 1100px) {
  .faces-wall--visual .faces-wall__grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 640px) {
  .faces-wall--visual {
    border-block-width: 2px;
  }
  .faces-wall--visual .faces-wall__grid {
    gap: 1px;
  }
  .faces-wall--visual.has-active .faces-tile {
    opacity: .76;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faces-wall--visual .faces-tile img {
    transition: none;
  }
  .faces-wall--visual.has-active .faces-tile {
    opacity: 1;
    filter: saturate(.86) contrast(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v10.47.0 — Avis provisoires sur le pêle-mêle de l'accueil
   Les huit portraits historiques redeviennent interactifs. Les huit
   portraits métiers ajoutés ensuite restent purement décoratifs afin
   de ne pas leur attribuer une identité ou un parcours incohérent.
   ═══════════════════════════════════════════════════════════════════ */
.faces-wall--reviews .faces-tile--review {
  cursor: pointer;
}
.faces-wall--reviews .faces-tile--review:focus-visible {
  z-index: 3;
  outline: 3px solid #fff;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 7px var(--color-primary, #e30043);
}
.faces-wall--visual.faces-wall--reviews.has-active .faces-tile {
  opacity: .2;
  filter: saturate(.32) brightness(.58) contrast(1.04);
}
.faces-wall--visual.faces-wall--reviews.has-active .faces-tile.is-active {
  opacity: 1;
  filter: saturate(1.06) brightness(.82) contrast(1.04);
}
.faces-wall--reviews .faces-wall__quote {
  gap: 11px;
  background: radial-gradient(
    ellipse at center,
    rgba(23, 19, 26, .76) 0%,
    rgba(23, 19, 26, .5) 34%,
    rgba(23, 19, 26, .08) 67%,
    transparent 82%
  );
}
.faces-wall--reviews .faces-wall__status {
  margin: 0;
  padding: 6px 10px 5px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(227, 0, 67, .88);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.faces-wall--reviews .faces-wall__text {
  text-wrap: balance;
}
.faces-wall--reviews .faces-wall__cite {
  max-width: 30ch;
  color: #ff7594;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
}

@media (max-width: 640px) {
  .faces-wall--reviews .faces-wall__quote {
    gap: 8px;
    padding: 14px 12px;
  }
  .faces-wall--reviews .faces-wall__status {
    padding: 5px 8px 4px;
    font-size: .54rem;
    letter-spacing: .075em;
  }
  .faces-wall--reviews .faces-wall__text {
    max-width: 24ch;
    font-size: clamp(1rem, 4.6vw, 1.2rem);
    line-height: 1.2;
  }
  .faces-wall--reviews .faces-wall__cite {
    max-width: 27ch;
    font-size: .72rem;
    line-height: 1.25;
  }
  .faces-wall--visual.faces-wall--reviews.has-active .faces-tile {
    opacity: .17;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faces-wall--visual.faces-wall--reviews.has-active .faces-tile {
    opacity: .2;
    filter: saturate(.32) brightness(.58) contrast(1.04);
  }
  .faces-wall--visual.faces-wall--reviews.has-active .faces-tile.is-active {
    opacity: 1;
    filter: saturate(1.06) brightness(.82) contrast(1.04);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v10.50.0 — Hero final de la page Mission
   Mockup validé : photographie continue, copie éditoriale à gauche,
   voile directionnel et fil d'Ariane en pilule basse. Le scope par ID
   de page préserve tous les autres heros photographiques du site.
   ═══════════════════════════════════════════════════════════════════ */
body.page-id-30699 .site-main .wp-block-group.section--hero-spoke.section--hero-photo {
  min-height: 720px;
  padding: 0 !important;
  position: relative;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  overflow: hidden;
  background: #261f27;
  color: #fff;
}

body.page-id-30699 .section--hero-photo::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: min(44vw, 670px);
  height: min(44vw, 670px);
  right: 7vw;
  bottom: -34vw;
  border-radius: 50%;
  background: rgba(227, 0, 67, .72);
  mix-blend-mode: multiply;
  pointer-events: none;
}

body.page-id-30699 .section--hero-photo > .hero-photo__bg,
body.page-id-30699 .section--hero-photo > .hero-photo__image {
  position: absolute !important;
  z-index: 0;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  margin: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

body.page-id-30699 .section--hero-photo > .hero-photo__bg {
  background-image: url('../images/hero-mission-v2.webp') !important;
  background-size: cover;
  background-position: 66% 32%;
}

body.page-id-30699 .hero-photo__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 66% 32%;
}

body.page-id-30699 .section--hero-photo > .hero-photo__veil {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18, 13, 18, .96) 0%, rgba(22, 16, 22, .88) 29%, rgba(22, 16, 22, .59) 52%, rgba(22, 16, 22, .16) 80%, rgba(17, 13, 18, .34) 100%),
    linear-gradient(0deg, rgba(17, 13, 18, .72) 0%, transparent 50%);
}

body.page-id-30699 .section--hero-photo .hero__content,
body.page-id-30699 .site-main .section--hero-spoke .hero__content {
  width: min(1180px, calc(100% - 56px)) !important;
  max-width: 1180px !important;
  min-height: 720px;
  margin: 0 auto !important;
  padding: 138px 0 194px !important;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  text-align: left !important;
}

body.page-id-30699 .section--hero-photo .hero__title {
  max-width: 11ch;
  margin: 0 !important;
  color: #fff;
  font-size: clamp(4rem, 5.8vw, 5.8rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em;
  text-align: left !important;
  text-wrap: balance;
}

body.page-id-30699 .section--hero-photo .hero__title em {
  color: #ff6b8a;
}

body.page-id-30699 .section--hero-photo .hero__subtitle {
  max-width: 660px;
  margin: 26px 0 0 !important;
  color: rgba(255, 255, 255, .84);
  font-size: 1.03rem;
  font-weight: 520;
  line-height: 1.62;
  text-align: left !important;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb {
  bottom: 28px;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__list {
  width: fit-content;
  max-width: calc(100% - 48px);
  min-height: 36px;
  margin-inline: auto;
  padding: 3px 4px;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-full, 9999px);
  background: rgba(18, 13, 18, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__link,
body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__current {
  min-height: 28px;
  padding: 5px 7px;
  border-radius: var(--radius-full, 9999px);
  color: rgba(255, 255, 255, .66) !important;
  font-size: .69rem;
  font-weight: 600;
  line-height: 1;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__item--current .geiq56-breadcrumb__current {
  color: #fff !important;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__item:not(:first-child)::before {
  margin-inline: 2px;
  background-color: #ff6b8a;
}

body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__link:hover,
body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__link:focus-visible {
  color: #fff !important;
  background: rgba(255, 255, 255, .1);
  outline: 2px solid rgba(255, 255, 255, .76);
  outline-offset: -2px;
}

@media (max-width: 767.98px) {
  body.page-id-30699 .section--hero-photo,
  body.page-id-30699 .section--hero-photo .hero__content,
  body.page-id-30699 .site-main .section--hero-spoke .hero__content {
    min-height: 760px;
  }

  body.page-id-30699 .hero-photo__image {
    object-position: 50% 39%;
  }

  body.page-id-30699 .section--hero-photo > .hero-photo__bg {
    background-image: url('../images/hero-mission-v2-mobile.webp') !important;
    background-position: 50% 39%;
  }

  body.page-id-30699 .section--hero-photo > .hero-photo__veil {
    background:
      linear-gradient(180deg, rgba(17, 13, 18, .42) 0%, rgba(17, 13, 18, .32) 28%, rgba(17, 13, 18, .87) 62%, rgba(17, 13, 18, .98) 100%),
      linear-gradient(90deg, rgba(17, 13, 18, .45), transparent 86%);
  }

  body.page-id-30699 .section--hero-photo::after {
    width: 360px;
    height: 360px;
    right: -185px;
    bottom: -140px;
  }

  body.page-id-30699 .section--hero-photo .hero__content,
  body.page-id-30699 .site-main .section--hero-spoke .hero__content {
    width: calc(100% - 40px) !important;
    padding: 112px 0 163px !important;
  }

  body.page-id-30699 .section--hero-photo .hero__title {
    max-width: 9ch;
    font-size: clamp(3.15rem, 14vw, 4.25rem) !important;
  }

  body.page-id-30699 .section--hero-photo .hero__subtitle {
    max-width: 35ch;
    margin-top: 22px !important;
    font-size: .89rem;
  }

  body.page-id-30699 .section--hero-photo .geiq56-breadcrumb {
    bottom: 20px;
    padding-inline: 12px;
  }

  body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__list {
    max-width: calc(100% - 24px);
    min-height: 34px;
    padding: 2px 3px;
  }

  body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__link,
  body.page-id-30699 .section--hero-photo .geiq56-breadcrumb__current {
    min-height: 28px;
    padding: 5px 6px;
    font-size: .63rem;
  }
}

@media (max-width: 390px) {
  body.page-id-30699 .section--hero-photo .hero__content,
  body.page-id-30699 .site-main .section--hero-spoke .hero__content {
    width: calc(100% - 32px) !important;
  }

  body.page-id-30699 .section--hero-photo .hero__title {
    font-size: 3.25rem !important;
  }

  body.page-id-30699 .section--hero-photo .hero__subtitle {
    font-size: .85rem;
  }
}

/* v10.57.7 — Contact : logos officiels et sélecteur arrondi partagé. */
.section--contact-forms .contact-switcher-group { width: min(460px, 100%); text-align: center; }
.section--contact-forms .contact-switcher__prompt {
  margin: 0 0 20px !important;
  color: var(--color-text, #1a171b);
  font-family: var(--font-body, Inter, sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.4;
}
.section--contact-forms .contact-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0 !important;
  background: #f1f2f4;
  border-color: #dfe2e6;
  padding: 4px;
}
.section--contact-forms .contact-switcher[data-active] .contact-switcher__thumb {
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(227,0,67,.13), 0 0 0 1px rgba(227,0,67,.3);
}
.section--contact-forms .contact-switcher .contact-switcher__btn {
  min-width: 0;
  width: 100%;
  height: 76px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}
.section--contact-forms .contact-switcher__btn img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
}
.section--contact-forms .contact-switcher__btn:focus-visible { outline: 2px solid #e30043; outline-offset: -3px; }
.section--contact-forms .contact-info { margin-top: 20px; margin-bottom: 24px; }
.section--contact-forms .contact-info__meta { line-height: 1.65; overflow-wrap: anywhere; }
[data-theme="dark"] .section--contact-forms .contact-switcher__prompt { color: #f3f0f3; }
[data-theme="dark"] .section--contact-forms .contact-switcher { background: #f1f2f4; border-color: #dfe2e6; }
@media (max-width: 540px) {
  .section--contact-forms .contact-switcher .contact-switcher__btn { height: 66px; padding: 10px 14px; }
  .section--contact-forms .contact-switcher__btn img { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .section--contact-forms .contact-switcher__thumb { transition: none; }
}

/* v10.57.3 — sélecteur GEIQ commun à toutes les pages, référence Accueil validée.
   Le fond clair du sélecteur protège les logos officiels en mode sombre aussi. */
html body .site-main .geiq-switcher[data-active] {
  display: grid !important;
  grid-template-columns: 1fr .85fr 1.3fr;
  width: min(520px, calc(100% - 28px));
  background: #f3f4f5 !important;
  border-color: #e2e4e7 !important;
}

html body .site-main .geiq-switcher[data-active] .geiq-switcher__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px;
  background: transparent !important;
}

html body .site-main .geiq-switcher[data-active] .geiq-switcher__logo-img {
  max-width: 100%;
  filter: none !important;
  opacity: .8;
}

html body .site-main .geiq-switcher[data-active] .geiq-switcher__logo-img--entity {
  width: 156px;
  height: auto;
  max-height: 37px;
  object-fit: contain;
}

html body .site-main .geiq-switcher[data-active] [aria-selected="true"] .geiq-switcher__logo-img {
  opacity: 1;
}

html body .site-main .geiq-switcher[data-active] .geiq-switcher__thumb {
  background: #fff !important;
  box-shadow: 0 3px 12px rgba(227, 0, 67, .13), 0 0 0 1px rgba(227, 0, 67, .3) !important;
}

html body .site-main .geiq-panels > .geiq-panel :is(.panel-btp__actions, .panel-gen__footer-actions) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
}

html body .site-main .geiq-panels > .geiq-panel :is(.panel-btp__actions, .panel-gen__footer-actions) > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0;
  min-height: 48px;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  padding: 12px 14px !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

@media (max-width: 1023px) {
  /* Les colonnes texte/chiffres deviennent trop étroites en paysage tablette. */
  html body .site-main .geiq-panels :is(.geiq-panel--btp, .geiq-panel--multi) .panel-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 620px) {
  html body .site-main .geiq-panels .panel-inner {
    padding: 28px 24px !important;
  }

  html body .site-main .geiq-switcher[data-active] .geiq-switcher__btn {
    min-height: 48px;
    padding: 8px;
  }

  html body .site-main .geiq-panels > .geiq-panel :is(.panel-btp__actions, .panel-gen__footer-actions) > a {
    padding: 12px 9px !important;
    font-size: .8125rem !important;
  }
}

@media (max-width: 374px) {
  /* Même repli dans les trois panneaux, sans couper les noms des GEIQ. */
  html body .site-main .geiq-panels > .geiq-panel :is(.panel-btp__actions, .panel-gen__footer-actions) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le composant peut être enfant direct d’une section (Mission) ou placé
   dans .container (Accueil). Même largeur utile, sans changer les titres. */
html body .site-main .section:has(> .geiq-switcher) {
  padding-inline: var(--space-4) !important;
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body .site-main .section:has(> .geiq-switcher) {
    padding-inline: var(--space-5) !important;
  }
}
@media (max-width: 767px) {
  html body .site-main .section:has(> .geiq-switcher) {
    padding-inline: var(--space-3) !important;
  }
}

/* Homepage: keep dots and arrows, without the redundant numeric counter.
   Two compact columns leave no empty counter slot, including on mobile. */
body.home .bands-stack .media-band-carousel__count {
  display: none;
}
body.home .bands-stack .media-band-carousel__nav {
  grid-template-columns: minmax(106px, 135px) 88px;
  column-gap: 16px;
}

/* Approved homepage card deck. Sotrabat informs the visible overlap only.
   Original carousels, wording and height-aware mobile stacking are retained. */
body.home .bands-stack {
  --deck-gutter: clamp(16px, 3vw, 44px);
  padding-top: clamp(28px, 5vw, 64px);
  padding-bottom: clamp(32px, 5vw, 64px);
  background: #eeedf1;
  isolation: isolate;
}
body.home .bands-stack > .media-band {
  width: min(1360px, calc(100% - var(--deck-gutter) * 2));
  margin-inline: auto;
  border: 1px solid rgba(78, 61, 73, .16);
  border-radius: clamp(24px, 3vw, 36px);
  background: #fff;
  box-shadow: 0 -14px 38px rgba(144, 0, 46, .19), 0 24px 52px -26px rgba(128, 0, 40, .32);
  transform-origin: 50% 0;
}
body.home .bands-stack > .media-band--flip {
  background: #f8f2f5;
  border-color: rgba(227, 0, 67, .2);
}
body.home .bands-stack > .bands-stack__spacer {
  height: clamp(28px, 5vh, 52px);
}
body.home .bands-stack > .media-band .container.media-band__grid {
  width: calc(100% - clamp(40px, 6vw, 88px));
}
[data-theme="dark"] body.home .bands-stack {
  background: #0e0c11;
}
[data-theme="dark"] body.home .bands-stack > .media-band {
  background: #211d25;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 -14px 40px rgba(227, 0, 67, .19), 0 24px 52px -24px rgba(0, 0, 0, .55);
}
[data-theme="dark"] body.home .bands-stack > .media-band--flip {
  background: #2c2029;
  border-color: rgba(244, 100, 146, .3);
}
@media (max-width: 820px) {
  body.home .bands-stack > .media-band .container.media-band__grid {
    width: calc(100% - 36px);
    padding-block: 20px 24px;
    gap: 22px;
  }
  body.home .bands-stack > .media-band .media-band__body {
    padding: 4px 0 0;
  }
  body.home .bands-stack > .media-band .media-band-carousel__nav {
    margin-top: 18px;
  }
  body.home .bands-stack > .media-band .media-band__text {
    margin-bottom: 0;
  }
}
/* A short landscape screen must not hold a tall card above unread content. */
@media (max-height: 560px), (prefers-reduced-motion: reduce) {
  body.home .bands-stack > .media-band {
    position: relative;
    top: auto;
    min-height: 0;
    transform: none !important;
    filter: none !important;
    will-change: auto;
  }
  body.home .bands-stack > .bands-stack__spacer {
    height: 28px;
  }
}