/* ============================================================
   Couche redesign « Éditorial civique premium » (sandbox)
   Charge APRÈS components.css / wp-compat.css.
   Objectif : page publique discrète + institutionnelle, craft
   maximal (soft-skill) — serif éditorial pour les titres, grotesk
   /mono pour l'UI, panneaux verre raffinés, tricolore retenu,
   micro-motion. NE dévoile aucune interface (contrainte OPSEC).
   ============================================================ */

/* Polices Fraunces + Space Grotesk chargées via <link>/enqueue (cf. harnais
   et functions.php) — pas d'@import ici (render-blocking chaîné). */

:root {
  --bop-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --bop-font-display: "Space Grotesk", "Figtree", system-ui, sans-serif;
  --eth-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --eth-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --eth-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --eth-tricolor: linear-gradient(90deg, #1b3a73 0% 33.3%, #f4f7fb 33.3% 66.6%, #c92435 66.6% 100%);
}

/* ============================================================
   PERF SCROLL — éviter le gel des animations pendant le scroll
   (thread principal saturé par des repaints à chaque frame).
   1) pas de backdrop-filter sur les éléments fixes/sticky
      (l'en-tête et la quicknav recalculaient le flou à chaque frame) ;
   2) pas de dégradé de fond animé en continu sur le body.
   ============================================================ */
body.bop-front-page header,
.bop-mobile-quicknav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.bop-front-page {
  animation: none !important;
}

/* ---- Ambiance : halos très doux, institutionnels (pas flashy) ---- */
body.bop-front-page .bop-home {
  position: relative;
  isolation: isolate;
}
body.bop-front-page .bop-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40rem 40rem at 6% 2%, rgba(72, 135, 255, 0.16), transparent 62%),
    radial-gradient(30rem 30rem at 98% 20%, rgba(51, 195, 255, 0.10), transparent 62%);
}

/* ============================================================
   TYPOGRAPHIE — serif éditorial haut-contraste pour les titres
   ============================================================ */
/* theme.json applique une typo fluide (body ~22px sur grand écran), ce qui
   gonfle tous les textes sans taille explicite (descriptions des cartes,
   texte sous 01/02/03/04). On ramène le contenu de la home à 1rem, comme
   prévu en design ; les titres gardent leurs tailles explicites en rem. */
.bop-front-page .bop-home {
  font-size: 1rem;
}
.bop-front-page .bop-home .bop-hero__title {
  font-family: var(--bop-font-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.9rem, 5vw, 5.1rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.bop-front-page .bop-home .bop-section__head h2,
.bop-front-page .bop-home .bop-access-flow__intro h2 {
  font-family: var(--bop-font-serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
}
/* Accroche : sous-ligne plus petite/légère sous le nom (le nom domine) */
.bop-front-page .bop-home .bop-hero__tagline {
  margin-top: 0.55rem;
  max-width: 32ch;
  font-family: var(--bop-font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bop-theme-text);
}

/* Microcopie : le lien "Inscription sur demande" en bleu accent (visible + clic) */
.bop-front-page .bop-home .bop-hero__microcopy a {
  color: var(--bop-theme-accent);
}

/* Hero en mode clair : le texte reste navy (lisible sur la droite de la photo,
   qui se fond vers le fond de page blanc). Le souci est la GAUCHE, où la photo
   reste opaque et sombre. On y pose donc un voile clair (à la place du voile
   sombre du mode sombre) pour que le navy reste lisible côté gauche. */
html[data-bop-theme="light"] .bop-hero__figure::before {
  background:
    linear-gradient(90deg, rgba(244, 247, 252, 0.92) 0%, rgba(244, 247, 252, 0.7) 32%, rgba(244, 247, 252, 0.2) 58%, rgba(244, 247, 252, 0) 78%);
}

/* Filet tricolore raffiné sous le titre (aligné à droite du contenu) */
.bop-front-page .bop-home .bop-hero__title::after {
  content: "";
  display: block;
  width: 7rem;
  height: 4px;
  margin-top: 1.15rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--eth-tricolor);
  box-shadow: 0 0 0.6rem rgba(72, 135, 255, 0.3);
  /* tracé piloté par GSAP via la variable --eth-filet (défaut 1 = visible) */
  transform: scaleX(var(--eth-filet, 1));
  transform-origin: right;
}

/* ---- Traitement premium de la photo pupitre (grade + profondeur navy) ---- */
.bop-hero__image {
  filter: saturate(0.9) contrast(1.06) brightness(0.97);
}
.bop-hero__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 18, 40, 0.55) 0%, rgba(8, 18, 40, 0.2) 30%, rgba(8, 18, 40, 0) 52%),
    radial-gradient(130% 90% at 22% 50%, transparent 42%, rgba(4, 10, 24, 0.4) 100%);
}

/* ---- Eyebrow / kicker en pilule de verre + point lumineux ---- */
.bop-kicker {
  font-family: var(--bop-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}
.bop-section__head > .bop-kicker {
  justify-self: start;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(24, 79, 165, 0.18);
  border-radius: 999px;
  background: rgba(110, 168, 255, 0.10);
}
.bop-section__head > .bop-kicker::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0.55rem currentColor;
  opacity: 1;
}

/* ============================================================
   BOUTONS — pilule + flèche imbriquée + physique ressort
   ============================================================ */
.bop-button {
  border-radius: 999px;
  padding-inline: 1.55rem 0.55rem;
  gap: 0.7rem;
  font-family: var(--bop-font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition:
    transform 420ms var(--eth-spring),
    background 320ms var(--eth-ease),
    box-shadow 320ms var(--eth-ease);
}
.bop-button::after {
  content: "\2197";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1rem;
  line-height: 1;
  transition: transform 420ms var(--eth-spring);
}
.bop-button--light::after,
.bop-button--secondary::after {
  background: rgba(16, 38, 79, 0.10);
}
.bop-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--bop-shadow-md);
}
.bop-button:hover::after {
  transform: translate(3px, -3px) scale(1.05);
}
.bop-button:active {
  transform: scale(0.98);
}

/* ============================================================
   MÉTRIQUES — verre givré raffiné, chiffres techy sobres
   ============================================================ */
.bop-metrics__grid {
  border-radius: var(--bop-radius-xl);
  border-color: rgba(183, 204, 237, 0.16);
  background: rgba(9, 16, 30, 0.55);
  box-shadow:
    0 36px 90px -46px rgba(0, 6, 18, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bop-metric {
  background: linear-gradient(180deg, rgba(16, 28, 47, 0.88), rgba(11, 20, 35, 0.82));
  transition:
    transform 460ms var(--eth-spring),
    background 280ms var(--eth-ease);
}
.bop-metric:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(20, 34, 57, 0.96), rgba(14, 26, 44, 0.92));
}
.bop-metric__icon {
  border-radius: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 26px -14px rgba(30, 120, 203, 0.95);
}
.bop-metric__number {
  font-family: var(--bop-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ============================================================
   WORKFLOW — panneau verre + indices 01–04 (CSS counters)
   ============================================================ */
.bop-workflow__shell {
  border-radius: var(--bop-radius-xl);
  border-color: rgba(183, 204, 237, 0.16);
  background:
    radial-gradient(circle at top right, rgba(51, 195, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(16, 28, 47, 0.66), rgba(11, 20, 35, 0.6));
  box-shadow:
    0 44px 110px -58px rgba(0, 6, 18, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bop-workflow__grid {
  counter-reset: eth-step;
  gap: 1.1rem 1.4rem;
}
.bop-workflow__step {
  counter-increment: eth-step;
  position: relative;
  padding: 1.4rem 1.1rem 1.1rem;
  border-top: 0;
  border-radius: var(--bop-radius-md);
  background: rgba(255, 255, 255, 0);
  transition:
    transform 420ms var(--eth-spring),
    background 280ms var(--eth-ease),
    box-shadow 280ms var(--eth-ease);
}
.bop-workflow__step::before {
  content: counter(eth-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--bop-font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--bop-color-primary);
  opacity: 0.85;
}
.bop-workflow__step::after {
  content: "";
  position: absolute;
  inset-inline: 1.1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--bop-color-primary), transparent 72%);
  opacity: 0.45;
  transition: opacity 280ms var(--eth-ease);
}
.bop-workflow__step:hover {
  transform: translateY(-4px);
  background: rgba(110, 168, 255, 0.07);
  box-shadow: 0 24px 48px -32px rgba(8, 22, 48, 0.5);
}
.bop-workflow__step:hover::after {
  opacity: 1;
}
.bop-workflow__step h3 {
  font-family: var(--bop-font-display);
}

/* Portrait : ancré en bas du panneau + fondu bas, pour qu'il "repose"
   au lieu de flotter coupé dans le vide */
.bop-workflow__portrait-image {
  inset: auto 50% 0 auto;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* ============================================================
   ACCÈS — version plus percutante : bleu dompté, étapes
   homogènes (fini le délavement), indices accent, chevrons doux
   ============================================================ */
/* chevrons moins profonds (zigzag adouci) */
.bop-access-flow {
  --bop-access-chevron: 1.9rem;
}
/* bleu de l'intro plus profond / institutionnel (moins électrique) */
.bop-access-flow__intro {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(140deg, #0b2244 0%, #103a66 56%, #15528c 100%);
}
/* étapes : dégradé descendant (progression visible) mais resserré,
   et SURTOUT texte lisible (le vrai souci du "délavé" était le texte) */
.bop-access-step--primary   { --bop-access-step-bg: #16335f; }
.bop-access-step--secondary { --bop-access-step-bg: #112a4c; }
.bop-access-step--light     { --bop-access-step-bg: #0d2038; }
/* descriptions des 3 étapes lisibles, en tokens theme-aware (clair ET sombre).
   On force aussi l'étape 01 : sur certains WP (styles globaux DB) elle était
   noircie car c'était la seule description non surchargée par la couche. */
.bop-access-step--primary .bop-access-step__body p {
  color: var(--bop-theme-text);
}
.bop-access-step--secondary .bop-access-step__body p,
.bop-access-step--light .bop-access-step__body p {
  color: var(--bop-theme-text-soft);
}
/* indices : accent bleu lumineux, plus de présence
   (spécificité 0,3,0 pour battre les règles dark du thème) */
.bop-access-flow .bop-access-step .bop-access-step__index {
  font-family: var(--bop-font-display);
  font-variant-numeric: tabular-nums;
  color: var(--bop-color-primary-strong);
}
/* icônes plus présentes + anneau accent sur l'étape active.
   Le SVG est en stroke="currentColor" : on force la couleur (certains WP la
   noircissaient via styles globaux). Theme-aware pour les étapes 2-3 ;
   l'étape 01 est sur fond bleu foncé dans les deux modes -> toujours clair. */
.bop-access-flow .bop-access-step__icon {
  color: var(--bop-theme-text);
  background: rgba(151, 193, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(151, 193, 255, 0.22);
}
.bop-access-flow .bop-access-step--primary .bop-access-step__icon {
  color: var(--bop-color-text);
  background: rgba(151, 193, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(151, 193, 255, 0.4);
}
/* survol : surbrillance douce (pas de lift, pour ne pas casser les chevrons) */
.bop-access-step {
  transition: filter 240ms var(--eth-ease);
}
.bop-access-step:hover {
  filter: brightness(1.12);
}
/* aligner la bande Accès sur la largeur des autres sections
   (le thème la passe en pleine largeur >= 64rem) */
@media (min-width: 64rem) {
  .bop-access .bop-container {
    width: min(100% - 2rem, var(--bop-container-lg));
    margin-inline: auto;
  }
}

/* ---- Diviseur tricolore : net + fin halo ---- */
.bop-divider__line {
  filter: drop-shadow(0 0 0.7rem rgba(72, 135, 255, 0.32));
}

/* ============================================================
   ESPACE MEMBRE — lanceur de modules (cartes verre premium)
   ============================================================ */
.bop-pillar,
.bop-tool-card {
  border-radius: var(--bop-radius-xl);
  border-color: rgba(183, 204, 237, 0.16);
  background:
    radial-gradient(circle at top right, rgba(62, 123, 255, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(16, 28, 47, 0.66), rgba(11, 20, 35, 0.6));
  box-shadow:
    0 38px 92px -52px rgba(0, 6, 18, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 460ms var(--eth-spring),
    box-shadow 320ms var(--eth-ease),
    border-color 320ms var(--eth-ease);
}
.bop-pillar:hover,
.bop-tool-card:hover {
  transform: translateY(-5px);
  border-color: rgba(142, 197, 255, 0.32);
  box-shadow:
    0 50px 116px -54px rgba(0, 6, 18, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.bop-pillar__body h3,
.bop-tool-card__body h3 {
  font-family: var(--bop-font-display);
}
/* flèche cohérente sur les entrées de module */
.bop-pillar__link::after {
  content: "\2197";
}
.bop-tool-card__cta {
  gap: 0.55rem;
}
.bop-tool-card__cta::after {
  content: "\2197";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgba(142, 197, 255, 0.14);
  font-size: 0.9rem;
  transition: transform 320ms var(--eth-spring);
}
.bop-tool-card:hover .bop-tool-card__cta::after {
  transform: translate(2px, -2px);
}

/* ---- Switch d'affichage (cartes / liste) ---- */
.bop-tools-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.bop-viewswitch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(183, 204, 237, 0.16);
  border-radius: 999px;
  background: rgba(9, 16, 30, 0.5);
}
.bop-viewswitch button {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bop-color-text-soft);
  cursor: pointer;
  transition: background 220ms var(--eth-ease), color 220ms var(--eth-ease);
}
.bop-viewswitch button svg { width: 1.15rem; height: 1.15rem; }
.bop-viewswitch button[aria-pressed="true"] {
  background: rgba(142, 197, 255, 0.16);
  color: var(--bop-color-primary-strong);
}
/* bascule des deux vues */
.bop-tools__list { display: none; }
.bop-tools[data-view="list"] .bop-tools__cards { display: none; }
.bop-tools[data-view="list"] .bop-tools__list { display: block; }
/* en vue liste, les tuiles s'empilent en pleine largeur */
.bop-tools__list .bop-launchgrid { grid-template-columns: 1fr; }
/* variante "carte verticale" des tuiles (pour les outils secondaires en vue cartes) */
.bop-launchgrid--cards { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .bop-launchgrid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bop-launch-tile--card {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem;
  position: relative;
}
.bop-launch-tile--card .bop-launch-tile__icon { width: 3rem; height: 3rem; }
.bop-launch-tile--card .bop-launch-tile__icon svg { width: 1.45rem; height: 1.45rem; }
.bop-launch-tile--card .bop-launch-tile__arrow {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  margin: 0;
}

/* ---- Tuiles d'accès rapide (les outils, auto-décrites) ---- */
.bop-launchgrid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .bop-launchgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bop-launch-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  border-radius: var(--bop-radius-lg);
  border: 1px solid rgba(183, 204, 237, 0.16);
  background: linear-gradient(180deg, rgba(16, 28, 47, 0.6), rgba(11, 20, 35, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition:
    transform 360ms var(--eth-spring),
    border-color 320ms var(--eth-ease),
    box-shadow 320ms var(--eth-ease);
}
.bop-launch-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(142, 197, 255, 0.32);
  box-shadow:
    0 28px 60px -40px rgba(0, 6, 18, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.bop-launch-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  border-radius: 0.85rem;
  background: rgba(151, 193, 255, 0.12);
  color: var(--bop-color-primary-strong);
  box-shadow: inset 0 0 0 1px rgba(151, 193, 255, 0.2);
}
.bop-launch-tile__icon svg { width: 1.3rem; height: 1.3rem; }
.bop-launch-tile__text { display: grid; gap: 0.15rem; min-width: 0; }
.bop-launch-tile__text strong {
  font-family: var(--bop-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bop-color-text);
}
.bop-launch-tile__text span {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--bop-color-text-soft);
}
.bop-launch-tile__arrow {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: rgba(142, 197, 255, 0.12);
  color: var(--bop-color-primary-strong);
  transition: transform 320ms var(--eth-spring);
}
.bop-launch-tile:hover .bop-launch-tile__arrow { transform: translate(2px, -2px); }

/* ============================================================
   MOBILE (<= 40rem) — compacité + quicknav givrée
   ============================================================ */
@media (max-width: 40rem) {
  .bop-front-page .bop-home .bop-hero__title {
    font-size: clamp(2.3rem, 11vw, 3rem);
    line-height: 1;
  }
  .bop-front-page .bop-home .bop-hero__title::after {
    width: 5.5rem;
    height: 3px;
    margin-top: 0.9rem;
  }
  /* barre de nav rapide : verre, pour que le contenu ne transparaisse pas */
  .bop-mobile-quicknav {
    background: rgba(8, 16, 28, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-block: 1px solid var(--bop-color-border);
    padding-block: 0.6rem;
  }
}

/* ============================================================
   MOTION — entrée hero + reveals scroll-driven (CSS pur)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bop-section__head,
    .bop-metric,
    .bop-workflow__step,
    .bop-access-step,
    .bop-pillar,
    .bop-tool-card {
      animation: eth-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 44%;
    }
  }
}
@keyframes eth-rise {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   ENTRÉE DE PAGE (GSAP) — états initiaux + anti-FOUC
   .bop-anim est posé sur <html> par un script inline (head)
   uniquement si pas de prefers-reduced-motion. GSAP révèle
   ensuite via styles inline (qui priment sur ces règles).
   ============================================================ */
.eth-w {
  display: inline-block;
  will-change: transform, opacity;
}
html.bop-anim .bop-hero__image,
html.bop-anim .bop-hero__tagline,
html.bop-anim .bop-hero__actions,
html.bop-anim .bop-hero__microcopy,
html.bop-anim .bop-hero__metrics-wrap,
html.bop-anim .bop-hero__content .eth-w {
  opacity: 0;
}
/* filet replié avant que le JS tourne (GSAP prend ensuite le relais en
   animant --eth-filet de 0 à 1 dans la timeline d'entrée) */
html.bop-anim .bop-front-page .bop-home .bop-hero__title {
  --eth-filet: 0;
}
/* les métriques du hero sont gérées par l'entrée, pas par le reveal scroll */
.bop-hero__metrics-wrap .bop-metric {
  animation: none !important;
}

/* ============================================================
   MODE CLAIR — auto-suffisant.
   La couche a passé certains panneaux en dark glass (fond foncé fixe).
   On les re-éclaire explicitement en mode clair, sans dépendre des
   règles light du thème (qui pourraient ne pas s'appliquer selon le
   déploiement/cache). Sélecteurs html[data-bop-theme="light"] = ne
   touchent JAMAIS le mode sombre.
   ============================================================ */
html[data-bop-theme="light"] .bop-metrics__grid {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(18, 33, 63, 0.1);
}
html[data-bop-theme="light"] .bop-metric {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 253, 0.97));
}
html[data-bop-theme="light"] .bop-metric:hover {
  background: linear-gradient(180deg, #ffffff, rgba(246, 249, 253, 1));
}
html[data-bop-theme="light"] .bop-workflow__shell,
html[data-bop-theme="light"] .bop-pillar,
html[data-bop-theme="light"] .bop-tool-card,
html[data-bop-theme="light"] .bop-launch-tile {
  background:
    radial-gradient(circle at top right, rgba(24, 79, 165, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 247, 252, 0.97));
  border-color: rgba(18, 33, 63, 0.1);
}
/* textes foncés sur ces panneaux clairs */
html[data-bop-theme="light"] .bop-metric__value,
html[data-bop-theme="light"] .bop-workflow__step h3,
html[data-bop-theme="light"] .bop-pillar__body h3,
html[data-bop-theme="light"] .bop-pillar__link strong,
html[data-bop-theme="light"] .bop-tool-card__body h3,
html[data-bop-theme="light"] .bop-launch-tile__text strong {
  color: var(--bop-theme-text);
}
html[data-bop-theme="light"] .bop-metric__label,
html[data-bop-theme="light"] .bop-workflow__step p,
html[data-bop-theme="light"] .bop-pillar__lede,
html[data-bop-theme="light"] .bop-pillar__link span,
html[data-bop-theme="light"] .bop-tool-card__description,
html[data-bop-theme="light"] .bop-launch-tile__text span {
  color: var(--bop-theme-text-soft);
}
/* étape d'accès 01 : fond bleu foncé dans les deux modes -> titre + indice
   clairs aussi en mode clair (sinon foncés et illisibles). */
html[data-bop-theme="light"] .bop-access-flow .bop-access-step--primary .bop-access-step__body h3 {
  color: var(--bop-color-text);
}
html[data-bop-theme="light"] .bop-access-flow .bop-access-step--primary .bop-access-step__index {
  color: var(--bop-color-primary-strong);
}

/* Le PNG du portrait est déjà détouré (fond transparent) : aucun halo derrière. */
.bop-workflow__portrait::before {
  display: none;
}
/* On retire l'ombre portée noire (drop-shadow) du portrait dans les deux modes :
   derrière un PNG transparent en forme de personne, elle dessinait un halo gris
   (très visible sur le panneau blanc, légèrement perceptible sur le navy). */
.bop-workflow__portrait-image {
  filter: none;
}

/* Champs Ultimate Member en mode clair.
   La règle globale `.bop input/textarea/select` (wp-compat.css) impose un fond
   sombre via des tokens FIXES (rgba(10,18,32,.9)) -> les champs UM restent
   sombres en mode clair. On les éclaircit UNIQUEMENT (cible .um-form-field),
   sans toucher aux autres champs du site. Les variantes :focus/:active sont là
   pour battre la règle :focus !important de wp-compat. */
html[data-bop-theme="light"] .um .um-field-area input.um-form-field,
html[data-bop-theme="light"] .um .um-field-area input.um-form-field:focus,
html[data-bop-theme="light"] .um .um-field-area input.um-form-field:active,
html[data-bop-theme="light"] .um .um-field-area textarea.um-form-field,
html[data-bop-theme="light"] .um .um-field-area textarea.um-form-field:focus,
html[data-bop-theme="light"] .um .um-field-area textarea.um-form-field:active {
  background: #ffffff !important;
  color: var(--bop-theme-text) !important;
  -webkit-text-fill-color: var(--bop-theme-text) !important;
  caret-color: var(--bop-theme-text) !important;
  border-color: rgba(16, 38, 79, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
html[data-bop-theme="light"] .um .um-field-area input.um-form-field:focus,
html[data-bop-theme="light"] .um .um-field-area textarea.um-form-field:focus {
  border-color: var(--bop-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(27, 58, 115, 0.14) !important;
}
html[data-bop-theme="light"] .um .um-field-area .um-form-field::placeholder {
  color: rgba(16, 38, 79, 0.5) !important;
  -webkit-text-fill-color: rgba(16, 38, 79, 0.5) !important;
}

/* Problème inverse : les selects Ultimate Member (rendus via Select2, et/ou
   natifs) sont blancs -> incohérent en mode SOMBRE. On les repasse en sombre,
   UNIQUEMENT côté UM (.um .um-field-area pour la boîte fermée ; body.um-page
   pour le panneau Select2 qui est rattaché au <body>). */
html[data-bop-theme="dark"] .um .um-field-area select.um-form-field {
  background: rgba(10, 18, 32, 0.9) !important;
  color: var(--bop-color-text) !important;
  border-color: var(--bop-color-border) !important;
}
html[data-bop-theme="dark"] .um .um-field-area .select2-container--default .select2-selection--single {
  background: rgba(10, 18, 32, 0.9) !important;
  border-color: var(--bop-color-border) !important;
}
html[data-bop-theme="dark"] .um .um-field-area .select2-selection--single .select2-selection__rendered {
  color: var(--bop-color-text) !important;
}
html[data-bop-theme="dark"] .um .um-field-area .select2-selection--single .select2-selection__placeholder {
  color: var(--bop-color-text-muted) !important;
}
html[data-bop-theme="dark"] .um .um-field-area .select2-selection--single .select2-selection__arrow b {
  border-top-color: var(--bop-color-text) !important;
}
/* Panneau déroulant Select2 (rattaché au <body>) : scope aux pages UM. */
html[data-bop-theme="dark"] body.um-page .select2-dropdown {
  background: #0a1220 !important;
  border-color: var(--bop-color-border) !important;
}
html[data-bop-theme="dark"] body.um-page .select2-container--default .select2-results__options .select2-results__option,
html[data-bop-theme="dark"] body.um-page .select2-container .select2-results__option,
html[data-bop-theme="dark"] body.um-page .select2-results__option {
  color: #ffffff !important;
  opacity: 1 !important;
  background: transparent !important;
}
html[data-bop-theme="dark"] body.um-page .select2-container--default .select2-results__options .select2-results__option--highlighted,
html[data-bop-theme="dark"] body.um-page .select2-container--default .select2-results__options .select2-results__option[aria-selected="true"] {
  background: var(--bop-color-primary) !important;
  color: #ffffff !important;
}
html[data-bop-theme="dark"] body.um-page .select2-search__field {
  background: rgba(10, 18, 32, 0.9) !important;
  color: var(--bop-color-text) !important;
  border-color: var(--bop-color-border) !important;
}

/* Champs mot de passe UM en mode clair (page compte/privacy : export/effacement
   des données). Ils sont dans .um-field-area-password sans toujours le parent
   .um-field-area -> on les cible directement. :focus pour battre wp-compat. */
html[data-bop-theme="light"] body.um-page .um .um-field-area-password input,
html[data-bop-theme="light"] body.um-page .um .um-field-area-password input:focus,
html[data-bop-theme="light"] body.um-page .um .um-field-area-password input:active {
  background: #ffffff !important;
  color: var(--bop-theme-text) !important;
  -webkit-text-fill-color: var(--bop-theme-text) !important;
  caret-color: var(--bop-theme-text) !important;
  border-color: rgba(16, 38, 79, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
html[data-bop-theme="light"] body.um-page .um .um-field-area-password input::placeholder {
  color: rgba(16, 38, 79, 0.5) !important;
  -webkit-text-fill-color: rgba(16, 38, 79, 0.5) !important;
}

/* Espace compte UM (barre latérale profil + navigation) en mode SOMBRE.
   Par défaut ces cartes sont claires -> incohérent sur le panneau sombre. */
html[data-bop-theme="dark"] body.um-page .um-account-side,
html[data-bop-theme="dark"] body.um-page .um-account-nav {
  background: transparent !important;
}
html[data-bop-theme="dark"] body.um-page .um-account-side .um-account-link,
html[data-bop-theme="dark"] body.um-page .um-account-meta,
html[data-bop-theme="dark"] body.um-page .um-account-heading {
  background: rgba(10, 18, 32, 0.72) !important;
  border-color: var(--bop-color-border) !important;
  color: var(--bop-color-text) !important;
}
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link:hover,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link.current,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link.active,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link[aria-current],
html[data-bop-theme="dark"] body.um-page .um .um-account-side li.current .um-account-link {
  background: rgba(27, 58, 115, 0.92) !important;
}
/* item actif/survolé : libellé + icônes en blanc plein (sinon gris peu lisible
   sur le fond bleu foncé). */
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link:hover,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link:hover span,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link:hover i,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link.current,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link.current span,
html[data-bop-theme="dark"] body.um-page .um .um-account-side .um-account-link.current i,
html[data-bop-theme="dark"] body.um-page .um .um-account-side li.current .um-account-link span,
html[data-bop-theme="dark"] body.um-page .um .um-account-side li.current .um-account-link i {
  color: #ffffff !important;
}
html[data-bop-theme="dark"] body.um-page .um-account-side .um-account-link,
html[data-bop-theme="dark"] body.um-page .um-account-side .um-account-link span,
html[data-bop-theme="dark"] body.um-page .um-account-meta,
html[data-bop-theme="dark"] body.um-page .um-account-meta .um-account-name,
html[data-bop-theme="dark"] body.um-page .um-account-name {
  color: var(--bop-color-text) !important;
}

/* Pages de contenu standard (CGU, mentions légales, etc.) en mode clair.
   Le contenu hérite d'une couleur de texte claire (thème sombre par défaut via
   theme.json) -> illisible sur fond clair. On force le texte theme-aware (navy
   en clair). Scopé hors front page : la home a déjà ses propres styles. */
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content p,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content li,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content :is(h1, h2, h3, h4, h5, h6),
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content .wp-block-heading,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content blockquote,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content td,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content th,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content dt,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content dd,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content strong,
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content em {
  color: var(--bop-theme-text) !important;
}
html[data-bop-theme="light"] body:not(.bop-front-page) .entry-content a {
  color: var(--bop-theme-accent) !important;
}
/* Sélection : couleur theme-aware (sinon texte blanc fixe, illisible en clair). */
html[data-bop-theme="light"] ::selection {
  color: var(--bop-theme-text);
  background: rgba(110, 168, 255, 0.28);
}