/* =========================================================================
   WYLER x WYLER — main.css
   Le "design system" du site. Tout part d'ici.
   Organisation :
   1. Variables (charte graphique)   2. Reset léger   3. Typographie
   4. Layout & utilitaires           5. Header / Menu   6. Footer
   7. Composants (boutons, cartes…)  8. Sections de page
   9. Animations / GSAP helpers      10. Responsive
   ========================================================================= */

   /* 0. ---------------------------------------------------------------------
   CHARGEMENT DES POLICES
   ----------------------------------------------------------------------- */
/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Regular 400 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Auge-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Regular 400 italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/Auge-RegularItalic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Bold 800 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/Auge-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Bold 800 italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/Auge-BoldItalic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Black 900 */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/Auge-Black.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Auge-Black 900 italic */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Auge';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/Auge-BlackItalic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* 1. ---------------------------------------------------------------------
   VARIABLES — La charte graphique Wyler x Wyler.
   On ne réécrit JAMAIS une couleur en dur dans le site : on utilise ces variables.
   Changer une valeur ici la change partout. C'est tout l'intérêt.
   ----------------------------------------------------------------------- */
:root {
  /* Couleurs principales */
  --wxw-cream:      #FEF3E0; /* fond clair, texte sur fond sombre */
  --wxw-orange:     #F18119; /* couleur d'accent : X, liens, CTA */
  --wxw-dark:       #15251d; /* vert très sombre — fond sombre principal */
  --wxw-black:      #121110; /* noir profond */
  --wxw-brown:      #452719; /* brun */
  --wxw-forest:     #233027; /* vert forêt */
  --wxw-gold:       #F7C46B; /* or — accents secondaires */
  --wxw-sage:       #87A37D; /* vert sauge */
  --wxw-terracotta: #C7614D; /* terracotta */
  --wxw-terracotta-deep: #B05441; /* terracotta foncé — survol des boutons terracotta, texte des liens sur crème (4,56:1) */
  --wxw-charcoal-2: #1E211A; /* dark profond — layered surfaces */
  --wxw-night-deep: #121a16; /* fond très sombre, légèrement teinté vert */
  --wxw-cream-warm: #F5E8D0; /* crème chaud — variante légèrement plus saturée */

  /* Rôles sémantiques — on raisonne en "rôle", pas en "couleur".
     Si demain l'orange change, on ne touche qu'à --wxw-orange ci-dessus. */
  --color-bg:           var(--wxw-cream);
  --color-bg-dark:      var(--wxw-dark);
  --color-text:         var(--wxw-dark);
  --color-text-invert:  var(--wxw-cream);
  --color-accent:       var(--wxw-orange);
  --color-muted:        #6b6b63;
  --color-border:       rgba(41, 44, 34, 0.12);

  /* Typographie */
  --font-title: "Auge", Georgia, serif;
  --font-body:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle typographique (clamp = responsive automatique min/idéal/max) */
  --fs-h1:   clamp(2.4rem, 5vw, 4.5rem);
  --fs-h2:   clamp(1.8rem, 3.2vw, 2.8rem);
  --fs-h3:   clamp(1.3rem, 2vw, 1.7rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem; /* 12px — surtitres, méta, nav, footer, boutons, légendes (token unique) */
  --ls-label:      0.16em; /* interlettrage des labels capitales */
  --ls-label-wide: 0.3em;  /* labels capitales "espacés" (hero, sceaux) */
  --fs-lead:      clamp(1.0625rem, 1.3vw, 1.1875rem); /* chapôs / intros / leads : un cran au-dessus du corps (~19px) */
  --fs-caption:   clamp(0.95rem, 1.05vw, 1.05rem); /* petites descriptions / légendes */
  --fs-title-sm:  clamp(1.4rem, 2vw, 1.9rem);      /* sous-titres de composants */
  --fs-watermark: clamp(11rem, 22vw, 26rem);       /* grands chiffres de section */

  /* Rythme vertical & largeurs */
  --space-section: clamp(4rem, 9vw, 8rem); /* respiration entre les grandes sections */
  --container:     1200px;  /* largeur de contenu standard */
  --container-wide: 1440px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* Détails */
  --radius: 4px;
  --transition: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 88px;
}

/* 2. ---------------------------------------------------------------------
   RESET LÉGER (on ne charge pas une grosse lib, on reste sobre)
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--wxw-black);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* 3. ---------------------------------------------------------------------
   TYPOGRAPHIE
   ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-text);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { max-width: 68ch; } /* longueur de ligne confortable à lire */
p + p { margin-top: 1.1em; }

/* Surtitre / kicker (ex. "À LIRE AUSSI...", "Nos expertises") */
.kicker {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-label);
  color: var(--color-accent);
}

/* La locution latine en italique de la charte */
.latin { font-family: var(--font-title); font-style: italic; }

/* 4. ---------------------------------------------------------------------
   LAYOUT & UTILITAIRES
   ----------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-invert); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-text-invert); }
.section--cream { background: var(--color-bg); }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.flow > * + * { margin-top: 1.5rem; }
.text-center { text-align: center; }

/* 5. ---------------------------------------------------------------------
   HEADER / MENU — barre horizontale fixe en haut.
   Logo à gauche, liens à droite. Burger + overlay plein écran sur mobile.
   ----------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: transparent;
  color: var(--color-text-invert);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  z-index: 1000;
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
}
.site-header.is-scrolled {
  /* background: rgba(10, 10, 9, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);*/
  background: var(--wp--preset--color--night-deep);
  padding-block: 16px;
  /* border-bottom: 1px solid rgba(241, 129, 25, 0.2); */
}

/* Connecté : le header fixe et les éléments collants passent sous la barre
   d'administration (hauteur fournie par le cœur : 32px, 46px ≤782px). Sous
   600px, le cœur rend la barre absolue : elle reste fixe ici pour que le
   header ne laisse pas d'espace vide en haut au défilement. Visiteurs : aucune
   règle ne s'applique (classe .admin-bar absente). */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .wxw-blog-filters,
.admin-bar .wxw-expertise-n2 .wxw-method-index { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px)); }
@media (min-width: 901px) {
  .admin-bar .wxw-expertise-n2 .wxw-approach__heading { top: calc(128px + var(--wp-admin--admin-bar--height, 32px)); }
}
@media screen and (max-width: 600px) {
  .admin-bar #wpadminbar { position: fixed; }
}

.site-header__logo {
  display: flex; flex-direction: column; line-height: 1.15;
  color: var(--color-text-invert);
}
.site-header__logo img { max-height: 40px; width: auto; }
.site-header__logo .logo-text { font-family: var(--font-title); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; }
.site-header__logo .latin { font-size: 0.65rem; opacity: 0.55; font-style: italic; }
.site-header__logo .x { color: var(--color-accent); }

/* Groupe nav + CTA — poussé à droite par space-between sur le header */
.site-header__end {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.main-nav { display: flex; align-items: center; }
.main-nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: 1.4rem; }
.main-nav a {
  color: var(--color-text-invert);
  font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--ls-label);
  white-space: nowrap;
  position: relative; padding-bottom: 3px;
  text-decoration: none;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;   /* [CLAUDE] crème (= couleur du texte), plus d'orange */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.main-nav a:hover::after, .main-nav .current-menu-item > a::after {
  transform: scaleX(1);
}

/* CTA contact dans la nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-title);     /* [CLAUDE] Auge Italic, statique */
  font-style: italic;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: none;
  color: var(--color-text-invert);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(254, 243, 224, 0.28);
  border-radius: 999px;
  transition: border-color 0.35s ease, color 0.35s ease;
  white-space: nowrap;
}
.nav-cta__arrow {
  color: var(--wxw-orange);
  font-size: 14px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}
.nav-cta:hover { border-color: rgba(241, 129, 25, 0.65); }
.nav-cta:hover .nav-cta__arrow { transform: translateX(3px); }

/* Décale le contenu sous la barre fixe */
/* Le header transparent se superpose au hero — pas de décalage sur le main. */
.site-main { padding-top: 0; }
/* Le premier bloc reçoit un padding-top qui absorbe la hauteur du header. */
.page-content > .alignfull:first-child {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 5rem)) !important;
}

/* Burger — caché sur desktop */
.nav-toggle {
  display: none;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  width: 36px; height: 36px;
  color: var(--wxw-cream);
  z-index: 1100;
}
.nav-toggle__bar {
  display: block; height: 1px;
  background: currentColor;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Longueurs décroissantes — effet éditorial */
.nav-toggle__bar:nth-child(1) { width: 24px; }
.nav-toggle__bar:nth-child(2) { width: 16px; }
.nav-toggle__bar:nth-child(3) { width: 10px; }

/* Transformation burger → croix (barres ramenées à longueur uniforme) */
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { width: 20px; transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }

/* 6. ---------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------- */
.site-footer {
  background: var(--wxw-night-deep);
  color: var(--wxw-cream);
}
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(241, 129, 25, 0.2);
  margin-bottom: 2rem;
}
/* Les 3 colonnes occupent les pistes 2-3-4 ; la piste 1 reste vide (espace éditorial) */
.site-footer__col:nth-child(1) { grid-column: 2; }
.site-footer__col:nth-child(2) { grid-column: 3; }
.site-footer__col:nth-child(3) { grid-column: 4; }
.site-footer__col-title {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--wxw-orange);
  margin-bottom: 1.5rem;
}
.site-footer__menu {
  list-style: none;
  padding: 0;
}
.site-footer__menu li { margin-bottom: 1.25rem; }
.site-footer__menu a,
.site-footer__contact,
.site-footer__contact a {
  font-size: 0.875rem;
  color: rgba(254, 243, 224, 0.72);
  font-weight: 300;
  line-height: 1.75;
  transition: color 0.3s ease;
}
.site-footer__menu a:hover,
.site-footer__contact a:hover { color: var(--wxw-orange); }
.site-footer__address {
  display: inline-block;
  margin-bottom: 1.25rem;
}
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: rgba(254, 243, 224, 0.72);
  font-weight: 300;
  transition: color 0.3s ease;
}
.site-footer__social-link:hover { color: var(--wxw-orange); }
.site-footer__social-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-footer__copy {
  font-size: var(--fs-label);
  color: rgba(254, 243, 224, 0.45);
  font-weight: 400;
}
.site-footer__legal-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}
.site-footer__legal-links a {
  font-size: var(--fs-label);
  color: rgba(254, 243, 224, 0.45);
  transition: color 0.3s ease;
}
.site-footer__legal-links a:hover { color: var(--wxw-orange); }

/* 7. ---------------------------------------------------------------------
   COMPOSANTS
   ----------------------------------------------------------------------- */

/* --- Boutons — wxw-btn (standalone) + wp-element-button (Gutenberg) ---- */
.wxw-btn,
.wp-element-button {
  --btn-fg:        var(--wxw-black);
  --btn-bg:        var(--wxw-orange);
  --btn-bg-hover:  #D86C0C;
  position:        relative;
  display:         inline-flex;
  align-items:     center;
  gap:             14px;
  height:          46px;
  padding:         0 26px;
  background:      var(--btn-bg);
  color:           var(--btn-fg);
  border:          1px solid transparent;
  border-radius:   999px;
  font-family:     'Poppins', sans-serif;
  font-weight:     400;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform:  uppercase;
  cursor:          pointer;
  overflow:        hidden;
  isolation:       isolate;
  text-decoration: none;
  transition: background 280ms cubic-bezier(0.16,1,0.3,1),
              color      280ms cubic-bezier(0.16,1,0.3,1),
              border-color 280ms cubic-bezier(0.16,1,0.3,1);
}
.wxw-btn:hover,
.wp-element-button:hover { background: var(--btn-bg-hover); }
.wxw-btn:focus-visible,
.wp-element-button:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }

/* Anatomy label-mask — injecté par JS au chargement de la page */
.wxw-btn__label {
  position:    relative;
  display:     inline-block;
  overflow:    hidden;
  height:      1.3em;        /* contient les accents des capitales (É, À…) */
  line-height: 1.3;
}
.wxw-btn__text {
  display:     block;
  height:      1.3em;        /* le 2e exemplaire masqué ne dépasse plus */
  line-height: 1.3;
  will-change: transform;
}
.wxw-btn__arrow {
  display:     inline-block;
  font-size:   13px;
  line-height: 1;
  will-change: transform;
}

/* --- Variantes standalone (.wxw-btn) ------------------------------------ */
.wxw-btn.wxw-btn--outline {
  --btn-fg:    var(--wxw-black);
  --btn-bg:    transparent;
  border-color: var(--wxw-black);
}
.wxw-btn.wxw-btn--outline:hover { background: transparent; }
.wxw-btn.wxw-btn--terra { --btn-fg: var(--wxw-cream); --btn-bg: var(--wxw-terracotta); --btn-bg-hover: var(--wxw-terracotta-deep); }
.wxw-btn.wxw-btn--dark  { --btn-fg: var(--wxw-cream); --btn-bg: var(--wxw-black);     --btn-bg-hover: var(--wxw-charcoal-2); }

/* --- Variantes Gutenberg (classe sur le div .wp-block-button parent) ----
   Supporte is-style-outline (style WP natif) ET wxw-btn--outline (classe custom).
   !important nécessaire car WP injecte border:2px solid et background:#F18119
   via des règles inline de même spécificité que les nôtres.              */
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button.wxw-btn--outline .wp-element-button {
  --btn-fg:        var(--wxw-black);
  --btn-bg:        transparent;
  --btn-bg-hover:  transparent;
  border:          1px solid var(--wxw-black) !important;
  background:      transparent !important;
  color:           var(--wxw-black) !important;
  box-shadow:      none !important;
  /* Réappliquer nos valeurs de forme écrasées par le style WP is-style-outline */
  border-radius:   999px !important;
  padding:         0 26px !important;
  height:          46px !important;
  font-size: var(--fs-label) !important;
}
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline .wp-element-button:active,
.wp-block-button.wxw-btn--outline .wp-element-button:hover,
.wp-block-button.wxw-btn--outline .wp-element-button:active {
  background:       transparent !important;
  /* Fond transparent au survol : le texte reste noir et donc lisible. */
}
.wp-block-button.wxw-btn--terra .wp-element-button {
  --btn-fg:       var(--wxw-cream);
  --btn-bg:       var(--wxw-terracotta);
  --btn-bg-hover: var(--wxw-terracotta-deep);
  color:          var(--wxw-cream);
}
.wp-block-button.wxw-btn--dark .wp-element-button {
  --btn-fg:       var(--wxw-cream);
  --btn-bg:       var(--wxw-black);
  --btn-bg-hover: var(--wxw-charcoal-2);
  color:          var(--wxw-cream);
}

.link-arrow { color: var(--color-accent); font-weight: 500; }
.link-arrow::before { content: "› "; }

/* Carte "expertise" (les 3 piliers de la home) */
.card {
  background: rgba(254, 243, 224, 0.04);
  border: 1px solid rgba(254, 243, 224, 0.12);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.card h3 { margin-bottom: 0.75rem; }
.card p { font-size: 0.98rem; }

/* Bloc "À LIRE AUSSI" (présent sur quasi toutes les pages) */
.also-read { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.also-read__item { padding: 1.75rem; background: rgba(254,243,224,0.04); border-radius: var(--radius); }
.also-read__item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* Fiche fondatrice */
.founder { display: grid; gap: 1rem; }
.founder__role { color: var(--color-accent); font-weight: 500; }

/* Étapes méthodo (1→7) */
.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-title); font-size: 2rem; color: var(--color-accent); line-height: 1;
}

/* Bandeau logos références (défilement infini) */
.logo-band { overflow: hidden; }
.logo-band__track { display: flex; gap: 4rem; align-items: center; width: max-content; animation: scroll-x 28s linear infinite; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* 8. ---------------------------------------------------------------------
   SECTIONS DE PAGE (héros, etc.)
   ----------------------------------------------------------------------- */
.hero { min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero__inner { max-width: 60ch; }
.hero .latin { display: block; color: var(--color-accent); margin-bottom: 1rem; }
.hero__lead { font-size: var(--fs-lead); }

/* --- Billets & éditos (home.php) : titre 2 lignes bold/italic, même principe
   que .wxw-academy-hero__title (kicker + hero__lead retirés, cf. demande). --- */
.wxw-billets-hero {
  align-items: flex-end !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.wxw-billets-hero__title {
  margin: 0;
  font-family: var(--font-title);
  line-height: 0.82;
  letter-spacing: normal;
}
.wxw-billets-hero__title-line {
  display: block;
  font-size: clamp(2.4rem, 5.35vw, 5rem);
}
.wxw-billets-hero__title-line--bold {
  font-weight: 900;
  font-style: normal;
}
.wxw-billets-hero__title-line--italic {
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.4rem, 5.35vw, 5rem);
  margin-left: clamp(3.8rem, 8.6vw, 8rem);
  margin-top: -0.05em;
}

/* Visuel lionne en fond, dégradé pour lisibilité */
.hero--media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--wxw-black) 30%, transparent);
  z-index: 1;
}
.hero--media > * { position: relative; z-index: 2; }

/* 9. ---------------------------------------------------------------------
   ANIMATIONS — état initial des éléments révélés au scroll (GSAP gère la suite)
   ----------------------------------------------------------------------- */
:where(.wxw-page) :is([data-reveal], .wxw-reveal) {
  opacity: 0;
  transform: translateY(24px);
}

.no-js :is([data-reveal], .wxw-reveal) {
  opacity: 1;
  transform: none;
}

/* 9bis. ------------------------------------------------------------------
   SUPPORT GUTENBERG — habillage des blocs natifs via des classes simples.
   Le contenu des pages est fait de blocs ; ces règles leur donnent le style
   de la charte sans rien coder en dur dans les pages.
   ----------------------------------------------------------------------- */

/* Le contenu de page n'a pas de container : ce sont les blocs Groupe (pleine
   largeur) qui portent les sections. On neutralise les marges parasites. */
.page-content { overflow-x: clip; }
.page-content > .alignfull { width: 100%; }

/* Espacement vertical standard d'une "section" = un bloc Groupe pleine largeur.
   Dans l'éditeur, on règle son fond (Crème / Vert sombre) et son padding (XL). */

/* Surtitre / kicker : paragraphe avec la classe "wxw-kicker" + couleur Orange */
.wxw-kicker {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-label) !important;
  margin-bottom: 0.5rem !important;
}
.wxw-kicker::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 1px;
  background: var(--wxw-orange);
}

/* ====================================================================
   CARTES EXPERTISES — section "L'accompagnement à la dirigeance"
   Fond clair · Marqueur coloré chartée · Hover lumineux subtil
   ==================================================================== */

/* Couleur d'accent par position — palette chartée */
.wxw-cards-row .wp-block-column:nth-child(1) { --card-accent: #C7614D; } /* terracotta */
.wxw-cards-row .wp-block-column:nth-child(2) { --card-accent: #F7C46B; } /* or */
.wxw-cards-row .wp-block-column:nth-child(3) { --card-accent: #87A37D; } /* sauge */

/* Gouttière éditoriale entre colonnes */
.wxw-cards-row.wp-block-columns { gap: 5rem !important; align-items: stretch !important; }
.wxw-cards-row.wp-block-columns > .wp-block-column { padding: 0 !important; }

/* ---- Carte typographique — zéro fond, zéro bordure ---- */
.wxw-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 4rem !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  overflow: visible;
  isolation: isolate;
  transition: none !important;
}

.wxw-card::after { display: none; }
.wxw-card::before { display: none !important; }
.wxw-card:hover { transform: none !important; }

/* Annule le centrage is-layout-constrained dans le contexte flex-column */
.wxw-card > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}

/* ---- Picto SVG ---- */
.wxw-card__picto {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 2.5rem;
  color: var(--card-accent, var(--wxw-orange));
  opacity: 0.75;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wxw-card:hover .wxw-card__picto {
  opacity: 1;
  transform: scale(1.08) translateY(-2px);
}

.wxw-card h3,
.wxw-card > p:not([class*="wxw"]),
.wxw-card .wxw-link,
.wxw-card .wxw-card-link { text-align: left !important; }

/* ---- Titre — typographie dominante, min-height sur 3 lignes pour aligner les descriptions ---- */
.wxw-card h3 {
  font-family: "Auge", Georgia, serif !important;
  font-size: clamp(2rem, 3.2vw, 3.5rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  line-height: 1.08 !important;
  color: var(--wxw-dark) !important;
  margin: 0 0 2rem !important;
  min-height: calc(clamp(2rem, 3.2vw, 3.5rem) * 1.08 * 3) !important;
  display: flex !important;
  align-items: flex-start !important;
  transition: color 0.4s ease;
}
.wxw-card:hover h3 { color: var(--card-accent, var(--wxw-orange)) !important; }

/* ---- Description ---- */
.wxw-card > p:not([class*="wxw"]) {
  flex: 1;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  color: rgba(41, 44, 34, 0.58) !important;
  margin-top: 0 !important;
  margin-bottom: 2.5rem !important;
}

/* ---- Lien — LIRE LA SUITE déclinaison fond clair ---- */
.wxw-card .wxw-link,
.wxw-card .wxw-card-link { margin-top: auto; }
.wxw-card .wxw-link a,
.wxw-card .wxw-card-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: var(--fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-label-wide) !important;
  text-transform: uppercase !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid var(--card-accent, var(--wxw-orange)) !important;
  text-decoration: none !important;
  color: var(--wxw-dark) !important;
  transition: gap 0.35s ease !important;
}
.wxw-card .wxw-link a::before { content: none !important; }
.wxw-card .wxw-link a::after,
.wxw-card .wxw-card-link a::after {
  content: "→";
  display: inline-block;
  color: var(--card-accent, var(--wxw-orange));
  transition: transform 0.35s ease;
}
.wxw-card:hover .wxw-link a,
.wxw-card:hover .wxw-card-link a { gap: 18px !important; }
.wxw-card:hover .wxw-link a::after,
.wxw-card:hover .wxw-card-link a::after { transform: translateX(5px); }

/* Titres sur fonds sombres : la couleur explicite des h1-h4 écrase l'héritage ;
   on la surcharge pour chaque couleur de fond sombre de la charte. */
.has-dark-background-color      h1, .has-dark-background-color      h2,
.has-dark-background-color      h3, .has-dark-background-color      h4,
.has-black-background-color     h1, .has-black-background-color     h2,
.has-black-background-color     h3, .has-black-background-color     h4,
.has-night-deep-background-color h1, .has-night-deep-background-color h2,
.has-night-deep-background-color h3, .has-night-deep-background-color h4,
.has-forest-background-color    h1, .has-forest-background-color    h2,
.has-forest-background-color    h3, .has-forest-background-color    h4,
.has-brown-background-color     h1, .has-brown-background-color     h2,
.has-brown-background-color     h3, .has-brown-background-color     h4 {
  color: var(--color-text-invert);
}

/* ---- Section head : grand chiffre éditorial + kicker + titre ----------- */
.wxw-section-head.wp-block-columns {
  align-items: flex-end !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid rgba(41, 44, 34, 0.18) !important;
  margin-bottom: var(--wp--preset--spacing--m) !important;
}
.has-night-deep-background-color .wxw-section-head.wp-block-columns,
.has-black-background-color      .wxw-section-head.wp-block-columns,
.has-dark-background-color       .wxw-section-head.wp-block-columns {
  border-bottom-color: rgba(254, 243, 224, 0.15) !important;
}
.wxw-section-num {
  font-family: "Auge", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  line-height: 0.85 !important;
  color: var(--wxw-orange) !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 0.25rem 0 !important;
}

/* ---- Intro de section (chapô : Poppins italic, plus lisible qu'Auge) ----
   Poppins italic 400 ~18px : chapôs plus longs que des titres -> meilleure
   lisibilité (notamment dyslexie) qu'une serif italique. */
.wxw-intro {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: var(--fs-lead) !important; /* token "intro/chapô" (~19px), un cran au-dessus du corps */
  line-height: 1.6 !important;
  margin-top: var(--wp--preset--spacing--m) !important;
  /* Pas de max-width custom : hérite de p { max-width: 68ch }
     pour s'aligner avec les paragraphes courants. */
}

/* ---- Section fondatrices ---------------------------------------------- */
.wxw-founder-photo {
  margin-bottom: 1.75rem !important;
  overflow: hidden !important;
}
.wxw-founder-photo img {
  width: 100% !important;
  max-height: 360px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 2px;
  display: block;
}
.wxw-founder-role {
  font-size: var(--fs-label) !important;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: none;
}
.wxw-founder-linkedin a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(41, 44, 34, 0.65) !important;
  border-bottom: 1px solid rgba(41, 44, 34, 0.2);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wxw-founder-linkedin a:hover {
  color: var(--wxw-orange) !important;
  border-bottom-color: var(--wxw-orange);
}

/* ---- Section billets & éditos ----------------------------------------- */
.has-night-deep-background-color .wp-block-post-title a {
  color: var(--wxw-cream) !important;
}
.has-night-deep-background-color .wp-block-post-title a:hover {
  color: var(--wxw-cream) !important;
}
.has-night-deep-background-color .wp-block-post-excerpt__excerpt {
  color: rgba(254, 243, 224, 0.72) !important;
}
.has-night-deep-background-color .wp-block-post-template .wp-block-post {
  padding-top: 2.5rem;          /* filet -> méta : respiration généreuse */
  border-top: 1px solid rgba(254, 243, 224, 0.15);
  display: flex;
  flex-direction: column;
}
/* Rythme vertical des billets (réf. "espacements") :
   filet -(2.5)- méta -(0.85)- titre -(1.5)- chapô -(2)- lien. */
.has-night-deep-background-color .wp-block-post-title {
  margin: 0.85rem 0 1.5rem !important;
}
.has-night-deep-background-color .wp-block-post-excerpt { margin: 0 !important; }
.has-night-deep-background-color .wp-block-post-excerpt__excerpt {
  margin: 0 !important;
  line-height: 1.7;
}
.has-night-deep-background-color .wp-block-post-excerpt__more-link {
  margin-top: 1rem !important;
}

/* ---- Lien "Lire la suite" avec animation flèche ------------------------ */
.wp-block-post-excerpt__more-link {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wxw-orange) !important;
  text-decoration: none !important;
  align-self: flex-start;
  color: inherit !important;
  transition: gap 0.3s ease;
}
.wp-block-post-excerpt__more-link:hover { gap: 18px; }
.wp-block-post-excerpt__more-link::after {
  content: "→";
  color: var(--wxw-orange);
  display: inline-block;
  transition: transform 0.3s ease;
}
.wp-block-post-excerpt__more-link:hover::after {
  transform: translateX(4px);
}

/* Bouton outline sur fonds sombres — texte et bordure crème */
.has-night-deep-background-color .wp-block-button.is-style-outline .wp-element-button,
.has-black-background-color      .wp-block-button.is-style-outline .wp-element-button {
  border-color: rgba(254, 243, 224, 0.6) !important;
  color: var(--wxw-cream) !important;
}
.has-night-deep-background-color .wp-block-button.is-style-outline .wp-element-button:hover,
.has-black-background-color      .wp-block-button.is-style-outline .wp-element-button:hover {
  border-color: var(--wxw-cream) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--wxw-cream) !important;
}

/* ---- Marquee clients (Nos références) --------------------------------- */
.wxw-marquee {
  overflow: hidden;
  position: relative;
  padding: 2.5rem 0;
  /* border-top: 1px solid rgba(254, 243, 224, 0.1);
  border-bottom: 1px solid rgba(254, 243, 224, 0.1); */
  margin: var(--wp--preset--spacing--m) 0;
}
.wxw-marquee::before,
.wxw-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.wxw-marquee::before { left: 0; background: linear-gradient(to right, var(--wxw-black), transparent); }
.wxw-marquee::after  { right: 0; background: linear-gradient(to left,  var(--wxw-black), transparent); }
.has-night-deep-background-color .wxw-marquee::before { background: linear-gradient(to right, var(--wxw-night-deep), transparent); }
.has-night-deep-background-color .wxw-marquee::after  { background: linear-gradient(to left,  var(--wxw-night-deep), transparent); }
.wxw-marquee__track {
  display: flex;
  gap: 3rem;
  align-items: center;
  width: max-content;
  animation: wxw-scroll 40s linear infinite;
}
.wxw-marquee:hover .wxw-marquee__track { animation-play-state: paused; }
@keyframes wxw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wxw-marquee__item {
  font-family: "Auge", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: 0.04em;
  color: rgba(254, 243, 224, 0.35);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.wxw-marquee__item:hover { color: rgba(254, 243, 224, 0.75); }
.wxw-marquee__sep {
  color: var(--wxw-orange);
  font-size: 0.75rem;
  opacity: 0.5;
}

/* Texte réservé aux technologies d'assistance (masqué visuellement, toujours lu). */
.wxw-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bandeau clients en logos (wxw/client-marquee dès qu'un client a un logo).
   Une seule ligne dans tous les cas. Liste accessible masquée visuellement ;
   la piste (aria-hidden) contient deux unités identiques pour la boucle -50 %.
   Largeur des cellules logo fournie par le rendu (--wxw-logo-w, en hauteurs de
   base) : la largeur réelle d'une unité égale l'estimation du rendu, qui en
   déduit les répétitions et la durée (--wxw-marquee-duration). Les cellules
   texte (client sans logo) ont cette estimation pour largeur minimale. */
.wxw-marquee--logos {
  --wxw-logo-h: clamp(39px, 3.9vw, 56px);
  --wxw-logo-gap: clamp(2.25rem, 4vw, 3.5rem);
  width: 100%;
  min-width: 0;
}
.wxw-marquee--logos .wxw-marquee__track {
  gap: 0;
  flex-wrap: nowrap;
  animation-duration: var(--wxw-marquee-duration, 40s);
}
.wxw-marquee--logos .wxw-marquee__unit {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--wxw-logo-gap);
  margin: 0;
  padding: 0 var(--wxw-logo-gap) 0 0;
  list-style: none;
}
.wxw-marquee--logos .wxw-marquee__cell {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--wxw-logo-h);
  margin: 0;
}
.wxw-marquee--logos .wxw-marquee__logo {
  width: calc(var(--wxw-logo-h) * var(--wxw-logo-w, 3));
}
.wxw-marquee--logos .wxw-marquee__logo img {
  display: block;
  width: 100%;
  max-width: none;
  height: calc(var(--wxw-logo-h) * var(--wxw-logo-f, 1));
  object-fit: contain;
}
.wxw-marquee--logos .wxw-marquee__item {
  min-width: var(--wxw-text-min, 0);
}
/* Mouvement réduit : aucune animation, une seule occurrence (copie et
   répétitions masquées), toujours sur une ligne, défilement horizontal manuel
   quand la ligne dépasse la largeur disponible. */
@media (prefers-reduced-motion: reduce) {
  .wxw-marquee--logos {
    --wxw-logo-gap: clamp(1.5rem, 2.5vw, 2.25rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(254, 243, 224, 0.35) transparent;
  }
  .wxw-marquee--logos::before,
  .wxw-marquee--logos::after {
    display: none;
  }
  .wxw-marquee--logos .wxw-marquee__track {
    width: max-content;
    margin-inline: auto;
    animation: none;
    transform: none;
  }
  .wxw-marquee--logos .wxw-marquee__unit--copy,
  .wxw-marquee--logos .wxw-marquee__cell--repeat {
    display: none;
  }
  .wxw-marquee--logos .wxw-marquee__unit {
    padding: 0 var(--wxw-edge, 1.25rem);
  }
}

/* Frise numérotée horizontale (classe "wxw-frise" sur wp:columns) */
.wxw-frise.wp-block-columns {
  align-items: flex-start;
}
/* Grand chiffre éditorial — Auge Black Italic orange, centré dans sa colonne */
.wxw-frise .wp-block-column > .wp-block-heading {
  font-family: "Auge", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(52px, 6vw, 80px) !important;
  color: var(--wxw-orange) !important;
  line-height: 0.9;
  margin: 0 0 2rem 0;
  display: flex;
  align-items: center;
  overflow: visible;
}
/* Pseudo-éléments symétriques : flex:1 des deux côtés pour centrer le chiffre */
.wxw-frise .wp-block-column > .wp-block-heading::before,
.wxw-frise .wp-block-column > .wp-block-heading::after {
  content: '';
  flex: 1;
  display: block;
  height: 1px;
}
/* Connecteur droit — s'arrête à mi-gouttière pour ne pas chevaucher le ::before suivant */
.wxw-frise .wp-block-column:not(:last-child) > .wp-block-heading::after {
  background: rgba(41, 44, 34, 0.15);
  margin-left: 14px;
  margin-right: calc(-0.5 * var(--wp--style--block-gap, 1.5rem));
}
/* Connecteur gauche — démarre à mi-gouttière */
.wxw-frise .wp-block-column:not(:first-child) > .wp-block-heading::before {
  background: rgba(41, 44, 34, 0.15);
  margin-right: 14px;
  margin-left: calc(-0.5 * var(--wp--style--block-gap, 1.5rem));
}
/* Extrémités : transparents */
.wxw-frise .wp-block-column:first-child > .wp-block-heading::before,
.wxw-frise .wp-block-column:last-child > .wp-block-heading::after {
  background: transparent;
  margin: 0;
}
/* Label sous chaque chiffre */
.wxw-frise .wp-block-column > p {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  text-transform: uppercase !important;
  color: rgba(41, 44, 34, 0.65) !important;
  margin: 0 !important;
  max-width: none !important;
  text-align: center !important;
}

/* Étape de méthodologie : bloc Groupe avec la classe "wxw-step" */
.wxw-step { border-top: 1px solid var(--color-border); padding-top: 1.25rem !important; }
.has-dark-background-color .wxw-step,
.has-black-background-color .wxw-step { border-top-color: rgba(255,255,255,0.14); }
.wxw-step h3, .wxw-step .wp-block-heading { color: var(--color-accent); }

/* ── Sceau de certification Qualiopi ──────────────────────────────────────── */
.wxw-qualiopi-seal {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 2.25rem !important;
  padding: 3.5rem 3rem !important;
  border: 1px solid rgba(254, 243, 224, 0.1) !important;
  position: relative !important;
}
/* Ligne accent en haut — langage commun avec les cartes */
.wxw-qualiopi-seal::before {
  content: '';
  position: absolute;
  top: -1px; left: 3rem; right: 3rem;
  height: 1px;
  background: var(--wxw-orange);
  opacity: 0.55;
}
.wxw-qualiopi-seal figure {
  margin: 0 !important;
  max-width: 180px !important;
  width: 100% !important;
}
.wxw-qualiopi-seal img {
  width: 100% !important;
  height: auto !important;
  opacity: 0.88;
}
/* Label sous le logo */
.wxw-qualiopi-label {
  font-size: var(--fs-label) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-label-wide) !important;
  text-transform: uppercase !important;
  color: rgba(254, 243, 224, 0.38) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Locution latine en italique (paragraphe classe "wxw-latin") */
.wxw-latin { font-family: var(--font-title); font-style: italic; }

/* Lien fléché générique hors cartes */
.wxw-link a { color: var(--color-accent); text-decoration: none; }

/* Query Loop (billets) : titres et extraits propres */
.wp-block-post-title a { color: inherit; }
.wp-block-post-title a:hover { color: var(--color-accent); }

/* =============================================================================
   RYTHME MAGAZINE — Numéros de section monumentaux
   ============================================================================= */

/* La section devient un conteneur positionné pour le filigrane */
.wp-block-group.alignfull:has(.wxw-section-num) {
  position: relative;
  overflow: hidden;
}

/* La colonne porteuse du numéro disparaît du flux — le numéro devient absolu */
.wxw-section-head > .wp-block-column:has(.wxw-section-num) {
  flex: 0 0 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

/* Le border-bottom du section-head est supprimé : le numéro joue ce rôle */
.wp-block-group.alignfull:has(.wxw-section-num) .wxw-section-head.wp-block-columns {
  border-bottom: none !important;
}

/* Tout le contenu passe devant le filigrane */
.wp-block-group.alignfull:has(.wxw-section-num) > * {
  position: relative;
  z-index: 1;
}

/* Le numéro : ancré en bas à droite, légèrement coupé par le bord.
   Il "fonde" la section depuis le bas — hors de portée du header et de ses lignes. */
.wxw-section-num {
  position: absolute !important;
  bottom: -0.12em !important;
  right: -0.04em !important;
  font-family: "Auge", Georgia, serif !important;
  font-size: var(--fs-watermark) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 0.05 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* 10. --------------------------------------------------------------------
   RESPONSIVE — burger + overlay plein écran sur mobile
   ----------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Burger visible, CTA masqué */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  /* Le wrapper collapse à 0 car la nav passe en position:fixed (hors flux)
     et le CTA est display:none — logo reste gauche, burger reste droite */

  /* Navigation : overlay plein écran */
  .main-nav {
    position: fixed; inset: 0;
    background: var(--color-bg-dark);
    display: flex; align-items: center; justify-content: center;
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .main-nav.is-open { opacity: 1; pointer-events: auto; }

  /* Items en colonne, taille mobile */
  .main-nav ul { flex-direction: column; align-items: center; gap: 2.5rem; }
  .main-nav a {
    font-size: clamp(1.25rem, 6vw, 1.8rem);
    text-transform: none; letter-spacing: 0.02em;
    color: var(--color-text-invert);
  }

  /* État fermé : items invisibles légèrement en bas */
  .main-nav li { opacity: 0; transform: translateY(30px); }

  /* État ouvert : entrée décalée du bas vers le haut */
  .main-nav.is-open li {
    animation: navItemReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .main-nav.is-open li:nth-child(1) { animation-delay: 0.08s; }
  .main-nav.is-open li:nth-child(2) { animation-delay: 0.16s; }
  .main-nav.is-open li:nth-child(3) { animation-delay: 0.24s; }
  .main-nav.is-open li:nth-child(4) { animation-delay: 0.32s; }
  .main-nav.is-open li:nth-child(5) { animation-delay: 0.40s; }
  .main-nav.is-open li:nth-child(6) { animation-delay: 0.48s; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .site-footer__legal-links { flex-wrap: wrap; justify-content: center; }

  /* Section head : empilé sur mobile */
  .wxw-section-head.wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .wxw-section-num { font-size: clamp(2.5rem, 10vw, 4rem) !important; }

  /* Frise mobile : empilement vertical, chiffres et textes centrés, pas de connecteurs */
  .wxw-frise.wp-block-columns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem !important;
  }
  .wxw-frise .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
  .wxw-frise .wp-block-column > .wp-block-heading {
    justify-content: center !important;
    font-size: clamp(72px, 18vw, 96px) !important;
    margin-bottom: 1rem !important;
  }
  .wxw-frise .wp-block-column > .wp-block-heading::before,
  .wxw-frise .wp-block-column > .wp-block-heading::after {
    display: none !important;
  }
}

/* Écrans intermédiaires : les blocs alignwide ne touchent pas les bords
   (wideSize = 1200px ; on applique le padding jusqu'à ~1280px pour garder
   une marge de sécurité, puis les marges auto de WordPress prennent le relais). */
@media (max-width: 1280px) {
  .wp-block-group.alignfull.is-layout-constrained {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }
}

/* Colonne unique en pied de page sur petit mobile */
@media (max-width: 600px) {
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__col:nth-child(1),
  .site-footer__col:nth-child(2),
  .site-footer__col:nth-child(3) { grid-column: 1; }
}

/* Mobile : cartes empilées */
@media (max-width: 600px) {
  .wxw-cards-row.wp-block-columns { gap: 0 !important; }
  /* (obsolète, retiré) marge 3.5rem entre colonnes : vestige des anciennes
     cartes empilées ; l'index actuel gère l'espacement par padding + filet,
     donc cette marge créait un grand vide au-dessus des items 2 et 3. */
  .wxw-card { padding: 0 0 2.5rem !important; }
  .wxw-card__picto { width: 3rem; height: 3rem; }
  .wxw-card h3 { min-height: 0 !important; }
}

@keyframes navItemReveal {
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   HERO V2 — Couverture de magazine
   Grille stricte, typographie monumentale ancrée en bas à gauche,
   lion visible à droite, "Défiler" intégré dans la grille (pas flottant)
   ============================================================================= */

/* Même marge horizontale que le header pour un alignement parfait */
.wxw-hero-v2 { --h2-pad: clamp(1.25rem, 4vw, 3rem); }

.wxw-hero-v2 {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  background: var(--wxw-forest, #233027);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

/* ── Image — lionne intégrée au fond sapin ── */
.wxw-hero-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Apparition : l'image surgit du fond vert (opacité 0 → 1) — le hero démarre
     entièrement sapin, sans bande. Réinitialisé en reduced-motion / impression. */
  opacity: 0;
  will-change: opacity;
}
.wxw-hero-v2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.12);   /* zoom d'ouverture ; le JS pose vers ~1.045 puis respire (option E) */
  opacity: 0.78;
  filter: brightness(0.95) contrast(1) saturate(0.82);
  will-change: transform;
}

/* ── Dégradés sapin — lisibilité en bas, voile à gauche, vignette (option E) ── */
.wxw-hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(130% 92% at 50% 42%,
      rgba(18, 25, 20, 0) 52%,
      rgba(18, 25, 20, 0.5) 100%
    ),
    linear-gradient(to top,
      rgba(35, 48, 39, 0.94) 0%,
      rgba(35, 48, 39, 0.6) 30%,
      rgba(35, 48, 39, 0.08) 62%,
      rgba(35, 48, 39, 0) 100%
    ),
    linear-gradient(to right,
      rgba(35, 48, 39, 0.55) 0%,
      rgba(35, 48, 39, 0) 55%
    );
}

/* ── Option E « souffle & matière » : grain de film fin, au-dessus de l'image
      et sous le texte. Très discret ; coupé en reduced-motion / impression. ── */
.wxw-hero-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.1;
  /* Fusion normale (pas overlay : overlay s'efface dans les noirs, or le hero
     est sombre → grain invisible). En normal, le grain est visible partout. */
  animation: wxw-grain 1.1s steps(3) infinite;
}
@keyframes wxw-grain {
  0%   { background-position:   0    0;    }
  33%  { background-position: -90px  40px; }
  66%  { background-position:  60px -70px; }
  100% { background-position: -40px  30px; }
}

@media (prefers-reduced-motion: reduce) {
  .wxw-hero-v2__bg { opacity: 1; }
  .wxw-hero-v2__bg img { transform: none; }
  .wxw-hero-v2::after { animation: none; }
}

/* ── Grille du bas : éditorial | scroll (remplit la hauteur) ── */
.wxw-hero-v2__bottom {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 3rem;
  padding: 0 var(--h2-pad) clamp(2.5rem, 4.5vh, 4rem);
}

/* ── Bloc éditorial : titre centré verticalement, foot ancré en bas ── */
.wxw-hero-v2__editorial {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: calc(var(--header-h) + 4vh);
}

/* ── Titre monumental ── */
.wxw-hero-v2__title {
  font-family: 'Auge', Georgia, serif;
  font-size: clamp(4.5rem, 10vw, 11rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em; /* repris de la balise h1 : la classe doit rester
                              indépendante de la balise (titre passé en <p> pour le SEO) */
  max-width: none;         /* neutralise le p { max-width: 68ch } */
  color: #FEF3E0;
  margin: auto 0 0;        /* le titre prend l'espace central, foot ancré en bas */
  display: flex;
  flex-direction: column;
}
.wxw-hero-v2__title em {
  display: block;
  overflow: hidden;
}
.wxw-hero-v2__title em:first-child { font-style: normal; } /* « Intuitu » droit */
.wxw-hero-v2__title em:last-child  { font-style: italic; } /* « personæ » italique */
.wxw-hero-v2__title em span {
  display: block;
  will-change: transform;
  /* État initial AVANT le JS = masqué sous le `em` (overflow:hidden), comme le
     gsap.set(y:"108%") du reveal. Évite le flash "Intuitu personæ visible puis
     caché" entre le 1er paint et l'exécution du JS. Le JS anime vers y:0% ;
     reduced-motion remet transform:none (inline) ; @media print idem. */
  transform: translateY(108%);
}

/* ── Définition + tagline, sur une grille 46% / reste ── */
.wxw-hero-v2__foot {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: end;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  width: 100%;
  margin-top: auto;        /* foot ancré en bas du bloc éditorial */
}

/* Ligne définition : Auge italic, lisible 40-60 ans — colonne 1 */
.wxw-hero-v2__def {
  grid-column: 1;
  font-family: 'Auge', Georgia, serif;
  font-size: var(--fs-lead);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--wxw-cream);
  margin: 0;
  opacity: 0;
}

/* Tagline agence — colonne 2 */
.wxw-hero-v2__sub {
  grid-column: 2;
  justify-self: start;
  max-width: 38ch;
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-lead);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--wxw-cream);
  margin: 0;
  opacity: 0;
}

/* ── Indicateur de défilement — dans la grille, ancré en bas à droite ── */
.wxw-hero-v2__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  padding-bottom: 2px;
}
.wxw-hero-v2__scroll-line {
  display: block;
  width: 1px;
  height: 2.75rem;
  background: rgba(254, 243, 224, 0.22);
  position: relative;
  overflow: hidden;
}
.wxw-hero-v2__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wxw-cream);
  transform: translateY(-100%);
  animation: wxw-scroll-drop 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wxw-scroll-drop {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0%); }
  100% { transform: translateY(100%); }
}
.wxw-hero-v2__scroll p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.625rem; /* ~10px — indicateur de défilement discret (cas dédié) */
  font-weight: 500;
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: rgba(254, 243, 224, 0.48);
  writing-mode: vertical-rl;
  margin: 0;
}

/* ── Filigrane "IP" ── */
.wxw-hero-v2__watermark {
  position: absolute;
  right: -0.04em;
  bottom: -0.2em;
  z-index: 2;
  font-family: 'Auge', Georgia, serif;
  font-size: clamp(16rem, 28vw, 36rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 243, 224, 0.09);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .wxw-hero-v2__bg img { object-position: center; } /* recentrer la lionne en portrait */
  .wxw-hero-v2__editorial { padding-top: calc(var(--header-h) + 2vh); }
  .wxw-hero-v2__title { font-size: clamp(3.2rem, 13vw, 6rem); }
  .wxw-hero-v2__foot  { grid-template-columns: 1fr; row-gap: 0.8rem; }
  .wxw-hero-v2__def, .wxw-hero-v2__sub { grid-column: 1; }
  .wxw-hero-v2__scroll { display: none; }
  .wxw-hero-v2__watermark { font-size: clamp(8rem, 36vw, 14rem); }
}

/* =============================================================================
   [CLAUDE — V2] GRILLE ÉDITORIALE 12 COLONNES + CTA — page d'accueil (.home)
   Ajout 100% réversible et isolé :
     • supprimer ce bloc, OU
     • restaurer la sauvegarde : `cp main.css.bak main.css`
   Aucune autre partie du thème, ni la base de données, n'est modifiée.
   Tout est scopé à `.home` : l'éditeur et les autres pages sont intacts.
   ============================================================================= */

/* --- 1. GRILLE : fin de la colonne centrale unique --------------------------
   Chaque bande de section devient une grille de 12 colonnes (max 1320px,
   centrée), avec des marges latérales fluides. Le contenu n'est plus empilé
   sur un seul axe : on peut placer titre / chapô / contenu de façon asymétrique.
   ------------------------------------------------------------------------- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) {
  --wxw-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-grid-max: 1320px;
  --wxw-gap: clamp(1rem, 1.6vw, 1.75rem);
  display: grid;
  /* Les 12 colonnes + leurs 11 gouttières doivent totaliser --wxw-grid-max
     (sinon les gouttières s'ajoutent PAR-DESSUS le plafond → contenu qui
     déborde largement 1320px sur grand écran, cf. mesure DevTools : 1628px
     réels à 1920px de fenêtre). D'où la soustraction des 11 gouttières
     avant division par 12. */
  grid-template-columns:
    [full-start] minmax(var(--wxw-edge), 1fr)
    [wide-start]  repeat(12, minmax(0, calc((var(--wxw-grid-max) - 11 * var(--wxw-gap)) / 12)))
    [wide-end]    minmax(var(--wxw-edge), 1fr) [full-end];
  column-gap: var(--wxw-gap);
  row-gap:    clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
  padding-inline: 0; /* les colonnes de bord gèrent la gouttière */
}

/* Par défaut, tout occupe la zone "wide" (de la ligne 2 à la ligne 14). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > * {
  grid-column: 2 / 14;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* En-tête de section : TITRE à gauche (7 col) · CHAPÔ à droite (5 col),
   tous deux alignés en bas → vraie composition de couverture magazine. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head {
  grid-column: 2 / 9;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
  grid-column: 9 / 14;
  grid-row: 1;
  align-self: end;
  margin-top: 0 !important;
  max-width: 42ch; /* mesure courte et élégante pour la voix "maison" */
}

/* [CLAUDE — LEAD EXPERTISES] Chapô d'introduction aux 3 expertises :
   ligne propre sous la tête de section, juste au-dessus des cartes.
   Mesure courte alignée à gauche (axe du titre) ; l'espacement vient du
   row-gap de la grille (pas de marges custom). Supprimable sans impact. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-cards-intro {
  grid-column: 2 / 14;
  font-size: var(--fs-lead); /* token "intro/chapô" — commun avec .wxw-intro */
  line-height: 1.6;
  max-width: 62ch;
  margin: var(--wp--preset--spacing--s) auto 0; /* un peu d'air entre la tête de section et le lead */
  text-align: center;
  color: var(--color-text);
}

/* Section 01 : le chapô a une marge basse posée en inline (Gutenberg) qui le
   ferait flotter au-dessus de la ligne de base du titre → on l'annule pour
   caler titre + chapô ensemble en bas. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-cards-intro) > .wxw-intro {
  margin-bottom: 0 !important;
}

/* Le marquee garde le plein écran : moment de respiration edge-to-edge. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-marquee {
  grid-column: 1 / 15;
}

/* --- 2. CTA : fin des 6 pilules centrées identiques ------------------------
   TOUS les boutons de section deviennent des liens fléchés (y compris la
   section Expertises, qui contient .wxw-cards-row), dans la langue des
   "Lire la suite". Ils restent CENTRÉS (centrage natif WordPress
   is-content-justification-center) : seul le style pilule → lien fléché change.
   La flèche "→" et l'animation hover sont injectées par le JS : on les garde.
   ------------------------------------------------------------------------- */

/* Bouton de section → lien fléché souligné.
   Même comportement que les liens "Lire la suite" (.wp-block-post-excerpt__more-link) :
   au survol SEULE la flèche se décale vers la droite, et le trait dessous la suit ;
   le TEXTE ne bouge pas. Le bouton reste centré : on n'élargit pas sa boîte (sinon
   le centrage ferait dériver le texte à gauche). Le soulignement est donc un ::before
   ancré à gauche qui s'allonge, pas un border-bottom. Pur CSS (le JS ignore ces
   boutons, cf. SECTION_CTA dans main.js) : flèche = ::after, pas de label-mask. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button {
  position: relative !important;  /* ancre le ::before du soulignement */
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;   /* flèche + trait peuvent dépasser à droite */
  padding: 0 0 6px !important;
  gap: 10px !important;
  font-size: 0.78rem !important; /* légèrement réduit vs --fs-small (0.875rem) — CTA sitewide, cf. retour user */
  font-weight: 600 !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
}
/* Le soulignement : ancré à gauche, s'allonge vers la droite au survol. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--wxw-orange);
  transition: width 0.3s ease;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button:hover::before {
  width: calc(100% + 8px);
}
/* La flèche : seul élément qui se déplace, le trait la suit. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button::after {
  content: "→";
  color: var(--wxw-orange);
  display: inline-block;
  /* Même flèche que "Lire la suite" : le → n'existe pas dans Poppins, donc on
     reprend exactement la même pile de repli (San Francisco) pour le même glyphe. */
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button:hover::after {
  transform: translateX(10px);
}

/* --- 3. Repli mobile : grille en colonne unique ---------------------------- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) {
    grid-template-columns:
      [full-start] var(--wxw-edge)
      [wide-start] 1fr [wide-end]
      var(--wxw-edge) [full-end];
    padding-inline: 0;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > * {
    grid-column: 2 / 3;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
    grid-column: 2 / 3;
    grid-row: auto;
    align-self: start;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
    margin-top: 1.25rem !important;
    max-width: none;
  }
  /* Lead expertises : repli mono-colonne (sinon grid-column 2/14 casse le bloc)
     + aligné à gauche sur mobile (le centré ne tient que sur desktop). */
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-cards-intro {
    grid-column: 2 / 3;
    max-width: none;
    text-align: left;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-marquee {
    grid-column: 1 / 4;
  }
}

/* [CLAUDE — TITRES MOBILE] Réduction des titres de section sur petit écran :
   à pleine taille, un mot long (« L'accompagnement ») dépasse la colonne et se
   coupe en plein milieu. On réduit pour qu'il tienne sur une ligne. */
@media (max-width: 600px) {
  .wxw-page .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
}
/* --- 4. SECTION ACADEMY : composition éditoriale maîtrisée -----------------
   Le logo Qualiopi DIT déjà « certifié » → il redevient un SCEAU compact
   (une crédential), et le TEXTE mène. Texte à gauche, sceau aligné en haut à
   droite. Rythme vertical resserré. Cible : seule section sombre avec image.
   ------------------------------------------------------------------------- */
/* Sceau Qualiopi : petite carte blanche posée comme une crédential */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) .wp-block-image {
  margin: 0 !important;
  max-width: 230px;
  background: #fff;
  border: 1px solid rgba(254, 243, 224, 0.14);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.7);
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}
/* Texte : accroche éditoriale — plus présente, lisible */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:last-child p {
  color: rgba(254, 243, 224, 0.85) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.65 !important;
  font-weight: 300 !important;
  max-width: 56ch !important;
}
/* Desktop : texte (gauche, mène) + sceau (droite, aligné en haut) */
@media (min-width: 861px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) {
    align-items: start !important;
    gap: clamp(3rem, 6vw, 6rem) !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:first-child {
    order: 2;
    flex: 0 0 230px !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:last-child {
    order: 1;
    flex: 1 1 auto !important;
  }
}
/* Rythme vertical resserré — Academy + Philosophie (frise) */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image),
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-cream-warm-background-color {
  padding-top: clamp(3.5rem, 7vw, 6rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
  row-gap: clamp(1.75rem, 3.6vw, 3rem) !important;
}
/* Le bloc bouton de ces sections porte un padding-top inline (spacing L) qui
   creuse un grand vide avant le CTA → on l'annule (le row-gap suffit). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-buttons,
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.has-cream-warm-background-color > .wp-block-buttons {
  padding-top: 0 !important;
}

/* --- 5. SÉCURITÉ DE RÉVÉLATION (impression / crawlers / JS absent) ---------
   Les apparitions GSAP posent opacity:0 en ligne. À l'impression et pour les
   robots, on force la visibilité — le contenu ne doit jamais rester masqué.
   (Complété par le filet de sécurité JS dans main.js.)
   ------------------------------------------------------------------------- */
@media print {
  .wxw-page .wxw-section-head, .wxw-page .wxw-section-head *,
  .wxw-page .wxw-intro, .wxw-page .wxw-cards-row .wp-block-column,
  .wxw-page .wxw-frise .wp-block-column, .wxw-page .wp-block-post,
  .wxw-page .wp-block-buttons,
  .wxw-hero-v2__def, .wxw-hero-v2__sub,
  .wxw-hero-v2__title em span, :is([data-reveal], .wxw-reveal) {
    opacity: 1 !important;
    transform: none !important;
  }
  .wxw-hero-v2__bg { opacity: 1 !important; }
  .wxw-hero-v2__bg img { transform: none !important; }
  .wxw-hero-v2::after { display: none !important; }
}

/* ============================ [fin CLAUDE — V2] ============================ */

/* =============================================================================
   [CLAUDE — PALETTE] DISCIPLINE DE LA CHARTE — orange = signature
   Fondé sur la charte WXW : l'orange y est une PONCTUATION (le ✕, un point).
   Stratégie « Signature » : orange réservé au ✕, au CTA plein, aux survols et
   aux grands NUMÉROS de section 01–05. Tout l'orange décoratif (filets, kickers,
   chiffres de frise, marquee, scroll, label héros) passe en neutre charté.
   Les FONDS ne sont pas touchés (décision validée).
   Réversible : supprimer ce bloc, ou `git checkout -- main.css`, ou main.css.bak3.
   ============================================================================= */
:root {
  /* Tokens sémantiques — on raisonne en rôle, plus en couleur brute */
  --c-accent:          var(--wxw-orange);          /* RÉSERVÉ : ✕, CTA, n°, survol */
  --c-eyebrow:         rgba(41, 44, 34, 0.55);      /* surtitres sur fond clair */
  --c-eyebrow-invert:  rgba(254, 243, 224, 0.55);   /* surtitres sur fond sombre */
  --c-line:            rgba(41, 44, 34, 0.12);       /* filet sur fond clair */
  --c-line-invert:     rgba(254, 243, 224, 0.12);    /* filet sur fond sombre */
}

/* 1. FILETS / BORDURES : orange → neutre (le plus gros calmant) ------------- */
.site-header.is-scrolled { border-bottom-color: var(--c-line-invert) !important; }
.site-footer            { border-top-color: var(--c-line-invert) !important; }
.site-footer__cols      { border-bottom-color: var(--c-line-invert) !important; }
.wxw-qualiopi-seal::before { background: var(--c-line-invert) !important; opacity: 1 !important; }

/* 2. SURTITRES (kickers) : orange → surtitre neutre + tick neutre ----------- */
.wxw-kicker.has-orange-color { color: var(--c-eyebrow) !important; }
.has-dark-background-color   .wxw-kicker.has-orange-color,
.has-black-background-color  .wxw-kicker.has-orange-color,
.has-night-deep-background-color .wxw-kicker.has-orange-color,
.has-forest-background-color .wxw-kicker.has-orange-color,
.has-brown-background-color  .wxw-kicker.has-orange-color { color: var(--c-eyebrow-invert) !important; }
.wxw-kicker::before { background: currentColor !important; opacity: 0.55; }
/* Surtitres de colonnes du footer (NAVIGATION / CONTACT / RÉSEAUX) */
.site-footer__col-title { color: var(--c-eyebrow-invert) !important; }

/* 3. FRISE — grands chiffres 1→5 : orange → vert sombre (éditorial, sobre) -- */
.wxw-frise .wp-block-column > .wp-block-heading { color: var(--wxw-dark) !important; }

/* 4. MARQUEE — séparateurs : orange → crème estompé ------------------------ */
.wxw-marquee__sep { color: var(--c-eyebrow-invert) !important; opacity: 1; }

/* ON GARDE l'orange (intentionnel, non listé ici) :
   ✕ logo/monogramme · bouton CTA plein · .wxw-section-num (01–05) ·
   survols/états actifs des liens · liens-flèches actionnables (Lire la suite,
   + d'infos, flèche nav-cta). */
/* ========================== [fin CLAUDE — PALETTE] ========================= */

/* =============================================================================
   [CLAUDE — TYPO] ÉCHELLE TYPOGRAPHIQUE COHÉRENTE
   Objectifs : (1) combler le « trou » hero(11rem) ↔ titres de section(2,8rem) ;
   (2) corriger l'inversion titres de cartes(3,5) > titres de section(2,8) ;
   (3) corps plus lisible (cible 40–60). Charte respectée (Auge titres, Poppins corps).
   theme.json intact. Réversible : supprimer ce bloc ou `git checkout -- main.css`.
   ============================================================================= */
:root {
  --fs-h2: clamp(2.5rem, 4.2vw, 4rem);   /* titres de section : présence post-hero */
}

/* Corps : 300 → 400 + interligne resserré (lisibilité, contraste) */
body { font-weight: 400; line-height: 1.6; }

/* Taille du preset "xlarge" (titres de section) : définie dans theme.json
   (clamp(2.5rem, 4.2vw, 4rem)) — source unique. L'ancien override !important
   ici était redondant et masquait la vraie valeur du preset → supprimé. */

/* Titres de carte : repassent SOUS le H2 (fin de l'inversion de hiérarchie).
   min-height recalculé sur la nouvelle taille → aligne les descriptions sans
   creuser de grands vides. */
.wxw-card h3 {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem) !important;
  min-height: calc(clamp(1.9rem, 2.6vw, 2.6rem) * 1.1 * 3) !important;
}
/* ========================== [fin CLAUDE — TYPO] =========================== */

/* =============================================================================
   [CLAUDE — FONDATRICES] Diptyque éditorial : portraits détourés posés sur
   panneaux vert sombre, désaturés (couleur au survol), légende unifiée.
   Cible : la rangée de colonnes contenant .wxw-founder-photo (via :has).
   theme.json intact. Réversible : supprimer ce bloc ou `git checkout -- main.css`.
   ============================================================================= */

/* La rangée des deux fondatrices : gouttière éditoriale, items alignés haut */
.wp-block-columns:has(.wxw-founder-photo) {
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: flex-start !important;
}
/* Pages N-1 (agence) : la section est sur la grille 12 col (2/14 = ~1320px),
   donc les colonnes 50/50 étalent les panneaux sur toute la largeur. Comme sur
   l'accueil, on ramène chaque colonne à la largeur du panneau et on centre le
   couple → marges latérales généreuses. (Pas de display:flex/align-items:stretch
   ici : on ne déforme pas les panneaux à ratio. Miroir éditeur → bloc PARITÉ.) */
.wxw-page:not(.home) .wp-block-columns:has(.wxw-founder-photo) {
  justify-content: center !important;
}
.wxw-page:not(.home) .wp-block-columns:has(.wxw-founder-photo) > .wp-block-column {
  flex-grow: 0 !important;
  flex-basis: 440px !important;
}

/* --- Le panneau : format portrait 4:5, fond vert sombre charté ------------- */
.wxw-founder-photo {
  position: relative !important;
  width: 100% !important;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  background: var(--wxw-black) !important;     /* #121110 — se fond avec le fond noir du JPEG de Clothilde */
  border-radius: 4px !important;
  overflow: hidden !important;
  margin: 0 0 1.75rem !important;
}

/* --- Le portrait détouré : posé en bas, désaturé/duotone chaud ------------- */
.wxw-founder-photo img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;                /* annule l'ancien 360px */
  object-fit: contain !important;             /* détouré : aucun rognage du sujet */
  object-position: bottom center !important;  /* le sujet « se tient » sur le bas */
  border-radius: 0 !important;
  filter: grayscale(0.85) contrast(1.05) brightness(1.04);
  transition: filter 0.55s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.wxw-founder-photo:hover img { filter: none; }

/* Égalisation : Lisa (col 1) est plus étroite → on l'agrandit, ancrée en bas.
   Clothilde (col 2) remplit déjà la largeur → réduite de ~10%. */
.wp-block-columns:has(.wxw-founder-photo) > .wp-block-column:nth-child(1) .wxw-founder-photo img {
  transform: scale(1.2);
  transform-origin: bottom center;
}
.wp-block-columns:has(.wxw-founder-photo) > .wp-block-column:nth-child(2) .wxw-founder-photo img {
  transform: scale(1);   /* Clothilde réduite de ~10% (était scale(1)) */
  transform-origin: bottom center;
}

/* --- Légende unifiée : filet + nom (Auge) + rôle (surtitre neutre) + LinkedIn */
.wp-block-columns:has(.wxw-founder-photo) > .wp-block-column {
  border-top: 1px solid var(--c-line, rgba(41,44,34,0.14));
  padding-top: 1.25rem;
}
.wp-block-columns:has(.wxw-founder-photo) .wxw-founder-photo { border-top: 0; }
.wxw-founder-photo + h3.wp-block-heading {
  font-size: var(--fs-title-sm) !important;
  margin: 0 0 0.5rem;
}
.wxw-founder-role.has-orange-color {           /* rôle : orange → surtitre neutre */
  color: var(--c-eyebrow, rgba(41,44,34,0.55)) !important;
  letter-spacing: var(--ls-label);
}
/* LinkedIn reste actionnable (orange discret via le style lien existant) */
.wxw-founder-linkedin a { color: var(--wxw-dark); }
.wxw-founder-linkedin a:hover { color: var(--wxw-orange); }

/* Mobile : panneaux pleine largeur, empilés */
@media (max-width: 781px) {
  .wxw-founder-photo { max-width: 100%; }
}

/* Titre de section : « Les fondatrices » imposant + les noms en sous-titre
   italique plus petit, garantis sur UNE seule ligne (au lieu de wrapper sur 3).
   Cible uniquement le section-head de la section fondatrices (via :has). */
.wp-block-group:has(.wxw-founder-photo) .wxw-section-head h2 em {
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  line-height: 1.15;
  display: inline-block;
  margin-top: 0.2em;
}
/* ======================= [fin CLAUDE — FONDATRICES] ======================= */

/* =============================================================================
   [CLAUDE — MANIFESTE] Bande pleine page (moment de respiration / surprise).
   Bloc Gutenberg « Cover » éditable (classe .wxw-manifeste) — lionne plein
   cadre assombrie + conviction en Auge italic. Inséré dans la page (éditable
   depuis l'éditeur) ; pattern réutilisable dans patterns/section-manifeste.php.
   Réversible : supprimer ce bloc CSS + retirer le bloc Cover dans l'éditeur
   (ou restaurer .claude/backups/home-content-pre-manifeste.html).
   ============================================================================= */
.wxw-manifeste.wp-block-cover {
  min-height: min(80vh, 740px);
  isolation: isolate;
}
/* Image de fond : cadrage + léger relief (l'assombrissement est géré par le
   voile natif du Cover, dimRatio 60). */
.wxw-manifeste .wp-block-cover__image-background {
  object-position: center 32%;
  filter: contrast(1.04) saturate(0.9);
  transform: scale(1.04);
}
/* Ken-burns lent (désactivé si l'utilisateur préfère moins d'animation) */
@media (prefers-reduced-motion: no-preference) {
  .wxw-manifeste .wp-block-cover__image-background {
    animation: wxw-mani-zoom 20s ease-out forwards;
  }
}
@keyframes wxw-mani-zoom { from { transform: scale(1.04); } to { transform: scale(1.13); } }

/* Bloc texte centré, mesure courte */
.wxw-manifeste .wp-block-cover__inner-container {
  max-width: min(92vw, 52rem);
  margin-inline: auto;
}
/* --- Verbatim (Academy) : plus d'espace latéral pour la citation agrandie,
   scopé à cette page (body.page-id-17) pour ne pas modifier .wxw-manifeste
   sur l'accueil et L'agence. Mesure alignée sur l'équivalent de la maquette
   (manifesto__copy : width min(72rem, ...)). --- */
body.page-id-17 .wxw-manifeste .wp-block-cover__inner-container {
  max-width: min(92vw, 72rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.wxw-manifeste__monogram {
  display: flex;
  justify-content: center;
  margin: 0 0 1.5rem !important;
}
.wxw-manifeste__monogram img {
  width: 60px;
  height: auto;
}
.wxw-manifeste__eyebrow {
  font-family: var(--font-title) !important;
  font-style: italic;
  font-size: var(--fs-lead) !important;
  letter-spacing: 0.02em;
  color: rgba(254, 243, 224, 0.62) !important;
  margin: 0 0 1.6rem !important;
  max-width: none !important;
}
.wxw-manifeste__quote {
  font-family: var(--font-title) !important;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4.9vw, 4.2rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.005em;
  color: var(--wxw-cream) !important;
  margin: 0 auto !important;
  max-width: none !important;
}

@media (max-width: 768px) {
  .wxw-manifeste.wp-block-cover { min-height: 70vh; }
}
/* ========================= [fin CLAUDE — MANIFESTE] ======================= */

/* =============================================================================
   [CLAUDE — ACADEMY POINTS] 4 points clés (Lorem) sous le texte de l'Academy.
   Grille de spécifications éditoriale : filet en tête, numéro discret, intitulé,
   description. Donne de la substance/structure à la section (placeholder lorem).
   Réversible : supprimer ce bloc CSS + retirer le bloc colonnes dans l'éditeur
   (ou restaurer .claude/backups/home-content-pre-points.html).
   ============================================================================= */
.wxw-academy-points.wp-block-columns {
  margin-top: clamp(1.5rem, 3vw, 2.75rem) !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  align-items: stretch !important;
}
.wxw-academy-points > .wp-block-column {
  border-top: 1px solid rgba(254, 243, 224, 0.16);
  padding-top: 1.1rem;
}
/* Pas de 3e numérotation : les numéros de section (01–05) + la frise (1–5)
   suffisent. Les points clés s'appuient sur le filet, pas sur un numéro. */
.wxw-academy-points .wxw-ap-num { display: none !important; }
.wxw-academy-points .wxw-ap-title {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em;
  line-height: 1.3 !important;
  color: var(--wxw-cream) !important;
  margin: 0 0 0.55rem !important;
  max-width: none !important;
}
.wxw-academy-points .wxw-ap-desc {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
  color: rgba(254, 243, 224, 0.6) !important;
  margin: 0 !important;
  max-width: none !important;
}
/* Mobile : 2 colonnes plutôt que 4 trop étroites, ou empilé sous 600px */
@media (max-width: 781px) {
  .wxw-academy-points.wp-block-columns { flex-wrap: wrap !important; gap: 1.75rem !important; }
  .wxw-academy-points > .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}
@media (max-width: 480px) {
  .wxw-academy-points > .wp-block-column { flex-basis: 100% !important; }
}
/* ===================== [fin CLAUDE — ACADEMY POINTS] ====================== */

/* =============================================================================
   [CLAUDE — PAGE N-1] Modèle de page intérieure (L'agence + déclinaisons).
   Réutilise grille/section-head/diptyque/manifeste/points. Ici : hero N-1,
   ligne de valeurs signature, cartes « à lire aussi ».
   ============================================================================= */

/* --- Hero N-1 : exclu de la grille, contenu ancré en bas à gauche ---------- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-page-hero {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.wxw-page-hero > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 62ch;
  width: 100%;
}
.wxw-page-hero > h1.wp-block-heading { max-width: none; margin: 0; }
.wxw-page-hero .wxw-kicker { margin-bottom: 1.25rem !important; }
.wxw-page-hero .wxw-intro {
  max-width: 60ch;
  margin-top: 1.6rem !important;
  color: rgba(254, 243, 224, 0.78);
}

/* --- Ligne de valeurs : signature éditoriale (Auge italic + filet) --------- */
.wxw-values {
  font-family: var(--font-title) !important;
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem) !important;
  line-height: 1.5 !important;
  color: var(--wxw-dark) !important;
  max-width: none !important;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--c-line, rgba(41, 44, 34, 0.16));
}

/* --- [CLAUDE — SECTION-BODY N-1] Compo « titre-label à gauche / colonne de
   lecture à droite » pour les sections denses (paragraphes de même poids).
   Utilisée par « Notre vision » et « Notre approche ». Remplace le duo chapô
   .wxw-intro (étroit, italique, à droite) / paragraphes pleine largeur, inadapté
   à ce contenu. Le texte est regroupé dans .wxw-section-body → un seul enfant de
   grille placé à droite. Miroir éditeur dans le bloc PARITÉ. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-section-body) > .wxw-section-head {
  grid-column: 2 / 7;
  align-self: start;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
  grid-column: 8 / 14;
  grid-row: 1;
  align-self: start;
  max-width: none;
}
.wxw-section-body > p {
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 0 0 1.25em;
  max-width: 62ch;
}
.wxw-section-body > .wp-block-buttons { margin-top: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 0; }

@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-section-body) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
    grid-column: 2 / 3;
    grid-row: auto;
  }
}

/* --- [CLAUDE — DES VALEURS] Sommaire : surtitre + titre à gauche (étroit, 2/6),
   les 7 valeurs en index à droite (large, 7/14 — plus large que le 8/14 par
   défaut de .wxw-section-body, override scopé à .wxw-values-section). SANS
   numéros (la page en a déjà pour les sections). Miroir éditeur → bloc PARITÉ. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-values-head {
  grid-column: 2 / 7;
  grid-row: 1;
  align-self: start;   /* aligné en haut */
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-values-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
  grid-column: 8 / 14;
  /* WP constrained met margin:auto sur les enfants → le section-body se centrait
     et se réduisait au contenu dans sa piste. On remet margin:0 pour qu'il occupe
     toute la colonne (la liste dedans est calée à gauche → collée au titre). */
  margin-inline: 0 !important;
  max-width: none !important;
}
.wxw-values-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wxw-values-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1.1;
  color: var(--wxw-dark);
  margin: 0;
  padding: 0.72em 0;
  border-top: 1px solid var(--c-line, rgba(41, 44, 34, 0.16));
}
/* Ponctuation graphique fixe (pas de numérotation, pas d'effet de survol) —
   même principe que .values li span de la maquette (span aria-hidden="+"),
   ici en ::before pur CSS pour ne pas toucher au contenu des <li>. */
.wxw-values-list li::before {
  content: "+";
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--wxw-orange);
}
.wxw-values-list li::marker { content: none; }
.wxw-values-list li:last-child { border-bottom: 1px solid var(--c-line, rgba(41, 44, 34, 0.16)); }
/* Liste : pleine largeur de sa colonne (le layout WP constrained la centrait /
   réduisait via margin:auto + max-width). Étendue au desktop, pleine largeur au
   mobile. Calée à gauche. */
.wxw-values-section .wxw-values-list {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
}
/* coda déplacée sous le titre (colonne gauche) — voir option B.
   En Poppins, texte courant (plus l'Auge italique). */
.wxw-values-head .wxw-values-coda {
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: rgba(41, 44, 34, 0.82);
  max-width: 42ch;
}
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-values-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-values-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
    grid-column: 2 / 3;
    grid-row: auto;
  }
}

/* ============================================================================
   [CLAUDE — À LIRE AUSSI — LABEL] Bandeau "+ / filet / À lire aussi", conforme
   à .section-label--inverse de la maquette Academy. Remplace le kicker texte
   simple (`.wxw-kicker` + "…") partout où le pattern "section-also-read" est
   utilisé (Academy, L'agence, Nos expertises, Nos références) — appliqué aux
   4 pages via leur post_content, classes non préfixées → OK éditeur. --- */
.wxw-alr-label {
  display: flex;
  align-items: center;
  /* max-width/margin en !important : neutralise la règle native WordPress
     .is-layout-constrained > :where(:not(.alignfull)) qui centre/plafonne
     tout enfant direct sans classe alignfull. */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
  color: rgba(254, 243, 224, 0.55);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.wxw-alr-label__sym {
  color: var(--wxw-orange);
}
.wxw-alr-label__line {
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* Native label: the group draws the "+" and the rule as flex items before
   the h2, which keeps the label typography. The "+" has empty alt text. */
.wp-block-group.wxw-alr-label::before {
  content: "+" / "";
  order: 1;
  color: var(--wxw-orange);
}
.wp-block-group.wxw-alr-label::after {
  content: "";
  order: 2;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.wp-block-group.wxw-alr-label > h2.wxw-alr-label__text {
  order: 3;
  max-width: none;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* ============================================================================
   [CLAUDE — À LIRE AUSSI] Index éditorial (liens typo, sans image). Réutilisable
   sur les N-1 : bloc `wp:html` avec <ul class="wxw-alr">. Fond sombre (night-deep)
   → texte crème + orange en accent. Survols : ligne qui s'allume, titre qui
   avance, flèche + tag qui passent en orange. Classes non préfixées → OK éditeur.
   ============================================================================ */
.wxw-alr {
  list-style: none;
  margin: 0;
  /* WP constrained centre/réduit l'<ul> via margin:auto → on force le remplissage
     de la colonne (sinon la section paraît trop étroite). */
  margin-inline: 0 !important;
  width: 100%;
  max-width: none !important;
  padding: 0;
  border-top: 1px solid rgba(254, 243, 224, 0.16);
}
/* Surtitre « À lire aussi » aligné à gauche (comme l'index) */
.wp-block-group:has(.wxw-alr) > .wxw-kicker,
.wp-block-group:has(.wxw-alr) > .wxw-alr-label {
  text-align: left !important;
  margin-inline: 0 !important;
  justify-self: start;
}
/* --- Rendu conforme à .related__list de la maquette : grille fixe
   20px/1fr/auto/40px, pas de padding au repos, agrandissement latéral +
   fond très léger au survol (au lieu du fond qui montait en scaleY). --- */
.wxw-alr__link {
  display: grid;
  grid-template-columns: 20px 1fr auto 40px;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  min-height: 92px;
  padding-inline: 0;
  border-bottom: 1px solid rgba(254, 243, 224, 0.16);
  text-decoration: none;
  color: var(--wxw-cream);
  background: transparent;
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-alr__link:hover {
  padding-inline: 1.25rem;
  background: rgba(254, 243, 224, 0.035);
}
/* Point : muté → orange et légèrement agrandi au survol, comme .related__dot. */
.wxw-alr__num {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(254, 243, 224, 0.36);
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-alr__link:hover .wxw-alr__num {
  background: var(--wxw-orange);
  transform: scale(1.45);
}
.wxw-alr__title {
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 1;
}
.wxw-alr__tag {
  justify-self: end;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.57rem;
  font-weight: 500;
  color: rgba(254, 243, 224, 0.75);
  border: 1px solid rgba(241, 129, 25, 0.8);
  border-radius: 99px;
  padding: 0.45rem 0.7rem;
  white-space: nowrap;
}
.wxw-alr__arrow {
  justify-self: end;
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(254, 243, 224, 0.5);
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-alr__link:hover .wxw-alr__arrow {
  color: var(--wxw-orange);
  transform: translateX(6px);
}
.wxw-alr__link:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }
@media (max-width: 781px) {
  .wxw-alr__link { grid-template-columns: auto 1fr auto; }
  .wxw-alr__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wxw-alr__link, .wxw-alr__title, .wxw-alr__arrow, .wxw-alr__tag,
  .wxw-alr__num, .wxw-alr__row::after { transition: none !important; }
}

/* --- Cartes « À lire aussi » (ANCIEN — remplacé par .wxw-alr, laissé inerte) - */
.wxw-card--alr {
  height: auto !important;
  padding: 0 !important;
}
.wxw-card--alr h3 {
  font-size: var(--fs-title-sm) !important;
  min-height: 0 !important;
  margin-bottom: 0.9rem !important;
  color: var(--wxw-cream) !important;
}
.wxw-card--alr:hover h3 { color: var(--wxw-orange) !important; }
.wxw-card--alr > p:not(.wxw-link) {
  color: rgba(254, 243, 224, 0.6) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem !important;
}
/* Lien « Découvrir » : le style carte le met en sombre (pensé fond crème) →
   sur fond sombre on le repasse en crème (flèche + filet restent orange). */
.wxw-card--alr .wxw-link a { color: var(--wxw-cream) !important; }
.wxw-card--alr:hover .wxw-link a { color: var(--wxw-orange) !important; }

/* --- A1 : filigrane ✕ dans le hero — remplit le vide (motif de marque) ----- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-page-hero { position: relative; overflow: hidden; }
.wxw-page-hero > * { position: relative; z-index: 1; }
.wxw-page-hero::after {
  content: "×";
  position: absolute;
  right: -0.06em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22rem, 42vw, 52rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 243, 224, 0.11);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* --- Numéros de section (01. 02…) MONUMENTAUX, superposés au titre — pages N-1,
   jamais la home (home = .wxw-section-num en contenu → exclue via :not(:has())).
   Traitement magazine : gros chiffre Auge italic 900, aplat TONAL (currentColor,
   comme .wxw-section-num de l'accueil — pas de contour), calé derrière le titre
   (2 lignes) et RECADRÉ par la bande (overflow:hidden sur la section → le crop
   monumental fait le geste). Le titre passe devant. Compteur CSS = aucun contenu
   à saisir. Miroir éditeur dans le bloc PARITÉ. --- */
.wxw-page .page-content { counter-reset: wxw-sec; }
/* Exclusion .wxw-frise : la section "Notre philosophie" (home) a une tête
   .wxw-section-head SANS .wxw-section-num explicite (toutes les autres
   sections numérotées de la home portent leur "0X." en contenu) → elle
   tombait par erreur dans ce système de numéro automatique pensé pour les
   pages N-1, produisant un second "01." redondant avec celui déjà affiché
   sous "Nos expertises" en haut de la home. .wxw-frise lui est propre
   (frise numérotée 1-5 du bloc "Notre approche") → hook sûr, sans édition
   de contenu.
   Exclusion .wxw-section--intro (page Nos expertises, classe propre à cette
   seule page) : la section "L'accompagnement à la dirigeance..." ne doit
   porter ni numéro ni chiffre monumental, seulement le kicker "Notre
   approche". En l'excluant du compteur wxw-sec, les trois sections
   suivantes (Conseil stratégique, Communication & influence, Executive
   coaching) redeviennent naturellement 01/02/03, en phase avec leur
   .wxw-academy-eyebrow__num déjà renuméroté dans le contenu. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) {
  counter-increment: wxw-sec;
  position: relative;
  overflow: hidden;                     /* recadre le chiffre monumental à la bande */
}
/* Tout le contenu de la section passe DEVANT le chiffre (cas Fondatrices : de
   l'intro/diptyque se trouve sous le titre → sinon le chiffre les recouvrirait) */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > * {
  position: relative;
  z-index: 1;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head {
  position: relative;
  overflow: visible;
}
/* Titre de section resserré (2 lignes « Notre / vision » = geste magazine) */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head .wp-block-heading {
  line-height: 0.98;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head::before {
  content: counter(wxw-sec, decimal-leading-zero) ".";
  position: absolute;
  left: -0.04em;
  top: -0.42em;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 16rem);   /* MONUMENTAL */
  line-height: 1;
  color: currentColor;                   /* aplat tonal (comme l'accueil, pas de contour) */
  opacity: 0.05;                         /* identique à .wxw-section-num de l'accueil */
  pointer-events: none;
  z-index: 0;
}
/* Le titre passe devant le chiffre */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head > * {
  position: relative;
  z-index: 1;
}

/* --- Picto ✕ sur les points d'approche (pages N-1, pas la home) ------------ */
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column::before {
  content: "×";
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--wxw-orange);
  line-height: 1;
  margin-bottom: 0.65rem;
}

/* --- Vignettes texturées (PLACEHOLDER) sur les cartes « À lire aussi » ------
   En attendant les vraies images : dégradé chaud charté. À remplacer par une
   <figure> image quand les visuels seront fournis. -------------------------- */
.wxw-card--alr::before {
  content: "" !important;
  display: block !important;   /* bat le .wxw-card::before { display:none !important } de la home */
  aspect-ratio: 16 / 10;
  margin-bottom: 1.4rem;
  border-radius: 4px;
  border: 1px solid rgba(254, 243, 224, 0.08);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(199, 97, 77, 0.5), transparent 58%),
    linear-gradient(135deg, var(--wxw-brown), var(--wxw-charcoal-2));
}

/* --- Hero N-1 avec image de fond (.wxw-page-hero--media) -------------------
   Fond image (group background) + voile pour la lisibilité ; le filigrane ✕
   disparaît (l'image occupe le rôle). Voile chaud cohérent avec la marque. */
.wxw-page-hero--media {
  background-size: cover !important;
  background-position: 50% 42% !important;
}
.wxw-page-hero--media::after { display: none !important; }  /* pas de ✕ avec image */
.wxw-page-hero--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to top, rgba(11, 9, 6, 0.94) 0%, rgba(11, 9, 6, 0.55) 42%, rgba(11, 9, 6, 0.30) 100%),
    linear-gradient(to right, rgba(11, 9, 6, 0.62) 0%, rgba(11, 9, 6, 0.05) 55%);
}
.wxw-page-hero--media > * { position: relative; z-index: 1; }
/* ========================== [fin CLAUDE — PAGE N-1] ======================= */

/* =============================================================================
   [CLAUDE — EXPERTISES : COMPOSITION SPÉCIFIQUE] Page « Nos expertises » (id 15)
   uniquement. Casse l'application mécanique du gabarit N-1 (même schéma ×4) :
   la règle de numérotation, la typo, le CTA et la grille restent identiques
   (une seule règle wxw-sec, cf. bloc numéros de section) — seul le PLACEMENT de
   .wxw-section-head / .wxw-section-body change par section, via des classes
   modificatrices posées sur le groupe de section (jamais de :nth-child, jamais
   dépendant de l'ordre des blocs). Scopé à ces 5 classes → aucune régression
   possible ailleurs (elles n'existent que dans le contenu de cette page).
   Miroir éditeur → même sous-bloc dans [CLAUDE] PARITÉ ÉDITEUR ↔ FRONTEND.
   ============================================================================= */

/* --- 01 « L'accompagnement à la dirigeance… » — ouverture, titre traversant --
   Tête 3/12, corps 8/13 (rangée 2, diagonale) : la maquette utilise sa propre
   grille 12 colonnes SANS gouttière de bord réservée (sa colonne 1 démarre au
   padding intérieur), alors que la grille partagée du site réserve la
   colonne 1 comme gouttière de bord elle-même. Reprendre tel quel les valeurs
   de grid-column de la maquette (2/11, 7/12) colle donc le titre à gauche :
   décalage de +1 nécessaire pour retrouver le même rendu visuel. Seule
   section en fontSize "huge" (attribut du bloc, cf. contenu) : marqueur de
   statut, reste très en-dessous du h1 du hero (clamp jusqu'à 7rem,
   !important, hors de portée de ce sélecteur car en dehors de
   .wxw-section-head). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 12 !important;
  grid-row: 1 !important;
  align-self: start !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  /* grid-column: 8 / 13 !important; */
  grid-column: 6 / 12 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: none !important;
}
/* --- Rythme vertical titre→paragraphe : la grille partagée impose un
   row-gap clamp(2.25rem,4.5vw,4rem) (~65px), trop large par rapport à la
   maquette (.introduction{row-gap:clamp(1rem,2vw,2rem)} ≈29px). Repris à
   l'identique, scopé à cette section (précédent : --strategy/--coaching). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) {
  row-gap: clamp(1rem, 2vw, 2rem) !important;
}
/* --- Bandeau "01 — Notre approche" / "02 — Conseil stratégique", mêmes
   règles graphiques que .wxw-academy-eyebrow (page Academy) — copiées ici et
   scopées aux sections de cette page seules : la règle partagée
   .wxw-academy-section .wxw-academy-eyebrow ne s'applique qu'aux sections
   portant la classe .wxw-academy-section (page Academy), absente ici, donc
   aucun risque de collision/régression là-bas. --- */
.wxw-section--intro .wxw-academy-eyebrow,
.wxw-section--strategy .wxw-academy-eyebrow,
.wxw-section--influence .wxw-academy-eyebrow,
.wxw-section--coaching .wxw-academy-eyebrow,
.wxw-section--vision .wxw-academy-eyebrow,
.wxw-section--approche .wxw-academy-eyebrow,
.wxw-section--fondatrices .wxw-academy-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--c-eyebrow);
}
.wxw-section--intro .wxw-academy-eyebrow__num,
.wxw-section--strategy .wxw-academy-eyebrow__num,
.wxw-section--influence .wxw-academy-eyebrow__num,
.wxw-section--coaching .wxw-academy-eyebrow__num,
.wxw-section--vision .wxw-academy-eyebrow__num,
.wxw-section--approche .wxw-academy-eyebrow__num,
.wxw-section--fondatrices .wxw-academy-eyebrow__num {
  color: var(--wxw-orange);
}
/* Fond sombre : le token clair-sur-clair (--c-eyebrow, pensé pour fond
   crème) est illisible ici — bascule sur --c-eyebrow-invert (déjà utilisé
   ailleurs sur le thème pour ce même cas de figure). Le séparateur
   (currentColor) et le label suivent automatiquement. */
.wxw-section--influence .wxw-academy-eyebrow,
.wxw-section--approche .wxw-academy-eyebrow {
  color: var(--c-eyebrow-invert);
}
.wxw-section--intro .wxw-academy-eyebrow__sep,
.wxw-section--strategy .wxw-academy-eyebrow__sep,
.wxw-section--influence .wxw-academy-eyebrow__sep,
.wxw-section--coaching .wxw-academy-eyebrow__sep,
.wxw-section--vision .wxw-academy-eyebrow__sep,
.wxw-section--approche .wxw-academy-eyebrow__sep,
.wxw-section--fondatrices .wxw-academy-eyebrow__sep {
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  font-size: 0;
}
/* Repère gauche : cette section utilise un layout à 2 colonnes (18%/reste)
   distinct de la grille magazine partagée utilisée par Notre vision/Notre
   approche (dont les eyebrow démarrent à grid-column:3, un repère plus à
   gauche). Décalage mesuré au pixel (rendu isolé, comparaison directe des
   bords gauche du "01"/h2 de Notre vision vs "03"/h2 de cette section à
   1440px de large) pour recaler l'eyebrow ET le h2 (même colonne) sur le
   même repère vertical que les deux autres eyebrow. Premier réglage
   insuffisant (-68px, laissait ~24px d'écart résiduel mesuré) — corrigé. */
.wxw-section--fondatrices .wxw-section-head > .wp-block-column + .wp-block-column {
  margin-left: clamp(-115px, -6.4vw, -70px);
}
/* --- H2 : calibre maquette (clamp jusqu'à 86px), le preset "huge" plafonne à
   72px. !important requis : la règle cœur .has-huge-font-size est elle-même
   en !important. --- */
/* Sélecteur à spécificité égale à .wxw-section-head .has-huge-font-size (la
   réduction mobile 600px ci-dessous) : sans quoi, la présence de "h2" ou
   ".wp-block-heading" en plus l'emporterait sur !important à toutes tailles
   d'écran et empêcherait la réduction mobile de s'appliquer. */
.wxw-section--intro .has-huge-font-size {
  font-size: clamp(3.2rem, 5.3vw, 5.4rem) !important;
  line-height: 0.94;
  margin: 1.5rem 0 3.5rem;
}
/* --- Paragraphe : conserver le token --fs-body (règle générale du site, cf.
   consigne : ne jamais réduire le corps de texte en-dessous de --fs-body,
   même quand la maquette utilise une taille plus petite). --- */
.wxw-section--intro .wxw-section-body p {
  color: #4f5149;
  font-size: var(--fs-body);
}
/* --- Chiffre monumental « 01 » : override scopé (taille + position), ne
   touche pas la règle partagée ::before (sections 02/03/04 intactes). Taille
   reprise telle quelle de la maquette (.introduction::before{font-size:
   clamp(11rem,25vw,24rem)}), sensiblement plus grande que le clamp partagé
   (8→16rem). Position (top) : à AJUSTER visuellement — l'objectif "ligne de
   base sur la 2e ligne du titre" ne peut pas se calculer depuis les seules
   métriques CSS (ascendante/descendante de la police non connues sans rendu),
   valeur ci-dessous = point de départ raisonnable, pas encore vérifiée. --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  font-size: clamp(11rem, 25vw, 24rem) !important;
  top: -0.28em !important;
}

/* --- Citation (pivot) — pause fluide entre la promesse et les expertises.
   .wxw-manifeste reste la classe partagée (accueil, L'agence) : on ne touche
   QUE l'instance qui porte .wxw-section--pivot, ajoutée en plus sur cette page. --- */
.wxw-page .page-content > .wp-block-cover.wxw-manifeste.wxw-section--pivot {
  min-height: clamp(58vh, 50vh + 8vw, 64vh) !important;
}
.wxw-page .page-content > .wp-block-cover.wxw-manifeste.wxw-section--pivot .wp-block-cover__inner-container {
  max-width: min(88vw, 52rem) !important;   /* 39→43→52rem : 4 lignes voulues (coupe sur les virgules), mesurées à 1440 */
}
@media (max-width: 768px) {
  .wxw-page .page-content > .wp-block-cover.wxw-manifeste.wxw-section--pivot {
    min-height: 54vh !important;                       /* repli sans support svh */
    min-height: clamp(52svh, 48svh + 4vw, 56svh) !important;
  }
}

/* --- 02 « Le conseil stratégique » — composition diagonale de la maquette,
   fidèle à la structure réelle de .expertise (grid-template-rows: auto 1fr) :
   eyebrow SEUL en row1 (auto, ancré en haut — aligné sur le sommet du chiffre
   monumental "02", même valeur de top), tête (kicker+h2) en row2 ANCRÉE EN
   HAUT (align-self:start, pas "center") : un centrage vertical dans une ligne
   "1fr" très haute rendait l'écart eyebrow→kicker dépendant du min-height, se
   déplace de façon imprévisible et non bornée — passage à un écart FIXE et
   contrôlable (row-gap seul, cf. row-gap ci-dessous). Le corps (paragraphe
   +CTA), lui, reste ancré en BAS (align-self:end) : la diagonale vient de là
   (titre en haut à gauche, corps en bas à droite), pas d'un titre centré.
   L'eyebrow a été sorti de .wxw-section-head (qui ne contient plus que
   kicker+h2) pour devenir un troisième item de grille à part entière, comme
   .section-label dans la maquette. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(680px, 64vw, 880px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 9 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 9 !important;
  grid-row: 2 !important;
  align-self: start !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-section--strategy .wxw-section-head > .wp-block-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 9 / 13 !important;
  grid-row: 2 !important;
  align-self: end !important;
  max-width: none !important;
  margin-bottom: clamp(1.5rem, 4vw, 3rem) !important; /* remonte le corps sans toucher à l'ancrage bas */
}
/* Kicker orange italique (.expertise__title p de la maquette) — distinct de
   l'eyebrow numéroté (.wxw-academy-eyebrow, section 01) : ici un simple
   lead-in stylistique au-dessus du h2, sans numéro. L'écart eyebrow→kicker
   n'est plus une marge devinée : l'eyebrow est maintenant son propre item de
   grille (row1) et le row-gap partagé + le centrage du titre en row2 (voir
   règles ci-dessus) produisent l'écart naturellement, comme dans la maquette. */
.wxw-section--strategy .wxw-expertise-kicker,
.wxw-section--influence .wxw-expertise-kicker,
.wxw-section--coaching .wxw-expertise-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  color: var(--wxw-orange);
}
.wxw-section--strategy .wxw-section-head h2 {
  max-width: 12ch;
  margin: 0;
}
/* --- H2 : calibre maquette (clamp jusqu'à 6.5rem), le preset "xlarge" du
   bloc plafonne à 4rem. !important requis : la règle cœur
   .has-xlarge-font-size est elle-même en !important. --- */
.wxw-section--strategy .wxw-section-head .has-xlarge-font-size {
  font-size: clamp(3.5rem, 6vw, 6.5rem) !important;
  line-height: 0.9 !important;
}
/* Chiffre monumental repositionné (haut-droite de la SECTION, pas du titre) :
   masque le ::before partagé sur .wxw-section-head (position par défaut,
   pensée pour 01) et le recrée sur le conteneur de section lui-même, en
   réutilisant le même compteur (pas de renumérotation en dur). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute;
  top: clamp(4rem, 7vw, 6.5rem);
  right: 5vw;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.7;
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
/* Mot filigrane vertical (.expertise__word de la maquette) — pur CSS,
   décoratif, recadré par l'overflow:hidden déjà posé par la règle partagée
   du compteur monumental (cf. bloc [CLAUDE — CHIFFRE MONUMENTAL] plus haut). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "CADRE";
  position: absolute;
  left: -0.03em;
  bottom: -0.25em;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(34, 37, 30, 0.055);
  pointer-events: none;
  z-index: 0;
}

/* --- 03 « La communication, l'influence et les RP » — diagonale inversée de
   la maquette (.expertise--influence), miroir horizontal de 02 : chiffre
   monumental à GAUCHE (au lieu de droite), mot filigrane "VOIX" à DROITE.
   Grille à 3 lignes explicites (auto eyebrow / auto titre / "1fr" copy),
   même leçon que 02 : chaque item ancré en start/end directement contrôlable,
   jamais de align-self:center dans une ligne "1fr" (écart imprévisible).
   Colonne du corps élargie à 6 pistes (4/10, pas le 3/7→4/8 strict de la
   maquette) : le CTA "La communication & influence et les relations
   publics" (~570px en capitales espacées) a besoin de cette largeur pour
   tenir sur une seule ligne — contrainte déjà identifiée avant la maquette,
   toujours valable (le CTA n'est pas retouché, cf. politique CTA commune).
   Fond forêt (has-forest-background-color) déjà conforme à la maquette,
   inchangé. --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(720px, 68vw, 920px);
  grid-template-rows: auto auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
  background-color: var(--wxw-dark) !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 6 / 13 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: clamp(2.5rem, 6vh, 5rem);
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 4 / 10 !important;
  grid-row: 3 !important;
  align-self: end !important;
  max-width: none !important;
  margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.wxw-section--influence .wxw-section-head > .wp-block-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-section--influence .wxw-section-head h2 {
  max-width: 12ch;
  margin: 0;
}
.wxw-section--influence .wxw-section-head .has-xlarge-font-size {
  font-size: clamp(3.5rem, 6vw, 6.5rem) !important;
  line-height: 0.9 !important;
}
.wxw-section--influence .wxw-section-body p {
  color: rgba(241, 230, 209, 0.68);
}
/* Chiffre monumental repositionné à GAUCHE (miroir de 02) et mot filigrane
   "VOIX" à droite, teinte claire adaptée au fond sombre (cf. maquette
   .expertise--influence .expertise__word{-webkit-text-stroke-color:
   rgba(241,230,209,.06)}). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute;
  top: clamp(4rem, 7vw, 6.5rem);
  left: 6vw;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.7;
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "VOIX";
  position: absolute;
  right: -0.04em;
  bottom: -0.25em;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 230, 209, 0.06);
  pointer-events: none;
  z-index: 0;
}

/* --- 04 « L'executive coaching » — coda calme de la maquette
   (.expertise--coaching) : contrairement à 02/03, titre ET corps partagent le
   MÊME traitement align-self:center (pas de diagonale start/end), section
   plus courte (min-height réduit vs 02/03, proportionnel au 82svh de la
   maquette vs ses 92svh/100svh). Chiffre monumental et mot filigrane
   "POSTURE" en position PAR DÉFAUT (comme 02, pas de miroir comme 03).
   Fond crème actuel conservé (pas le beige distinct #e7ddc8 de la maquette,
   décision explicite). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(600px, 58vw, 780px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem) !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 4 / 9 !important;
  grid-row: 2 !important;
  align-self: center !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 9 / 13 !important;
  grid-row: 2 !important;
  align-self: center !important;
  max-width: none !important;
}
.wxw-section--coaching .wxw-section-head > .wp-block-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-section--coaching .wxw-section-head h2 {
  max-width: 12ch;
  margin: 0;
}
.wxw-section--coaching .wxw-section-head .has-xlarge-font-size {
  font-size: clamp(3.5rem, 6vw, 6.5rem) !important;
  line-height: 0.9 !important;
}
/* Chiffre monumental et mot filigrane : position par défaut (comme 02),
   pas de miroir. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute;
  top: clamp(4rem, 7vw, 6.5rem);
  right: 5vw;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.7;
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "POSTURE";
  position: absolute;
  left: -0.03em;
  bottom: -0.25em;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(34, 37, 30, 0.055);
  pointer-events: none;
  z-index: 0;
}

/* --- Repli mobile (< 860px, borne déjà utilisée par la grille N-1 générale) :
   les 4 compositions retombent en une seule colonne pleine largeur, empilées
   dans l'ordre naturel du markup (tête, corps). Le rythme n'est alors plus
   porté par la grille mais par l'échelle typo (huge/xlarge), la densité
   (padding l sur 04, row-gap resserré 02/04) et les fonds — inchangés ici. --- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
  }
}
/* Titre "huge" dans une tête de section (01 uniquement) : même garde-fou mobile
   que le xlarge existant, pour "L'accompagnement" (mot long) sur petit écran. */
@media (max-width: 600px) {
  .wxw-page .wxw-section-head .has-huge-font-size {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
}

/* --- Responsive « 02 Conseil stratégique » ---------------------------------
   Desktop verrouillé : la diagonale (grid-row commune + align-self center/end
   sur une ligne "1fr") n'a de sens qu'avec la grille 12 colonnes desktop. Sous
   860px, tête et corps retombent déjà en une seule colonne (règle partagée
   ci-dessus, grid-column:2/3 + grid-row:auto) : il reste à neutraliser
   min-height/grid-template-rows (sinon la ligne "1fr" s'étire quand même et
   creuse un vide entre tête et corps) et à repasser align-self à "start" pour
   un empilement naturel, ordre de lecture inchangé (eyebrow → kicker → h2 →
   paragraphe → CTA, déjà l'ordre du DOM). --- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    margin-bottom: 0 !important;
  }
  /* Chiffre "02" et mot filigrane "CADRE" : gardés (éléments graphiques
     utiles, cf. consigne), mais assagis — sinon le mot déborderait/dominerait
     un écran étroit (le plancher de clamp() reste élevé, cf. maquette qui les
     réduit aussi sous 700px). */
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
  /* Note : la marge eyebrow→kicker est déjà fluide (clamp(1rem,2vw,2rem),
     cf. règle non préfixée plus haut) — comme dans la maquette, pas de
     valeur mobile distincte à prévoir. */
}
@media (max-width: 600px) {
  .wxw-section--strategy .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .wxw-section--strategy .wxw-section-head h2 {
    max-width: none;
  }
}

/* --- Responsive « 03 Communication & influence » — même principe que 02 :
   grille 3 lignes desktop neutralisée sous 860px (empilement partagé déjà en
   place), chiffre/mot filigrane assagis (miroir gauche/droite de 02). --- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
    margin-top: 0;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    margin-bottom: 0 !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    left: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
}
@media (max-width: 600px) {
  .wxw-section--influence .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .wxw-section--influence .wxw-section-head h2 {
    max-width: none;
  }
}

/* --- Responsive « 04 Executive coaching » — même principe que 02/03 :
   grille desktop neutralisée sous 860px, chiffre/mot filigrane assagis
   (position par défaut, comme 02). --- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
}
@media (max-width: 600px) {
  .wxw-section--coaching .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .wxw-section--coaching .wxw-section-head h2 {
    max-width: none;
  }
}
/* ==================== [fin CLAUDE — EXPERTISES composition] =================== */

/* [CLAUDE] Logo SVG dans le header (remplace le texte) */
/* Taille pilotee par .site-header__logo img (max-height: 40px). */
.site-header__logo-svg {
  display: block;
  height: 40px;
  width: auto;
}

/* ========================================================================
   [CLAUDE — AGENCE : cartes "A lire aussi" modernes + bande rechauffee]
   Direction validee (refs Nespresso, adaptees a WxW) : fraicheur par
   contraste clair-chaud sur sombre, cartes pleine image aux codes web
   actuels. 100 % CSS (aucune edition en base) -> reversible : supprimer
   ce bloc retablit les cartes texte-sur-aplat precedentes.
   Scope : .wxw-page:not(.home) (agence + futures N-1, jamais la home).
   ===================================================================== */

/* --- La bande : night-deep verdatre -> charbon CHAUD + plus d'air -------- */
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull:has(.wxw-card--alr) {
  background-color: #26221E !important;
  background-image:
    radial-gradient(90% 120% at 50% -10%, rgba(247, 196, 107, 0.06), transparent 60%) !important;
}
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull:has(.wxw-card--alr) .wxw-kicker {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* --- La rangee : gouttiere resserree, colonnes a hauteur egale ----------- */
.wxw-page:not(.home) .wp-block-columns:has(.wxw-card--alr) {
  gap: clamp(1.1rem, 2vw, 1.75rem) !important;
  align-items: stretch !important;
}
.wxw-page:not(.home) .wp-block-columns:has(.wxw-card--alr) > .wp-block-column { padding: 0 !important; }

/* --- La carte : cadre image plein, portrait arrondi, contenu en bas ------ */
.wxw-page:not(.home) .wxw-card--alr {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
  min-height: 340px;
  aspect-ratio: 4 / 5;
  padding: clamp(1.25rem, 1.9vw, 1.85rem) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}

/* Image de fond (couche ::before, zoomable au survol) — une par colonne */
.wxw-page:not(.home) .wxw-card--alr::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  aspect-ratio: auto !important;     /* annule le 16/10 du placeholder */
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0 !important;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-page:not(.home) .wp-block-columns:has(.wxw-card--alr) > .wp-block-column:nth-child(1) .wxw-card--alr::before {
  background-image: url("../img/wxw-alr-dirigeance.jpg") !important;
}
.wxw-page:not(.home) .wp-block-columns:has(.wxw-card--alr) > .wp-block-column:nth-child(2) .wxw-card--alr::before {
  background-image: url("../img/wxw-alr-academy.jpg") !important;
}
.wxw-page:not(.home) .wp-block-columns:has(.wxw-card--alr) > .wp-block-column:nth-child(3) .wxw-card--alr::before {
  background-image: url("../img/wxw-alr-editos.jpg") !important;
}

/* Voile chaud de marque (unifie les 3 photos) + scrim bas (lisibilite) */
.wxw-page:not(.home) .wxw-card--alr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(165deg, rgba(241, 129, 25, 0.10), rgba(199, 97, 77, 0.08) 55%, transparent 75%),
    linear-gradient(to top, rgba(20, 16, 12, 0.92) 4%, rgba(20, 16, 12, 0.45) 34%, rgba(20, 16, 12, 0) 64%);
  pointer-events: none;
}

/* Contenu en surimpression */
.wxw-page:not(.home) .wxw-card--alr > * { position: relative; z-index: 1; }
.wxw-page:not(.home) .wxw-card--alr h3 {
  color: var(--wxw-cream) !important;
  margin: 0 0 1rem !important;
  text-wrap: balance;
}
.wxw-page:not(.home) .wxw-card--alr > p:not(.wxw-link) { display: none !important; }

/* "Decouvrir" -> bouton chevron ROND (texte masque, accessible au lecteur).
   La fleche est un ::after avec couleur EXPLICITE (repos + hover) : sinon elle
   herite de la couleur du <a> que le hover pre-existant repeint en orange ->
   fleche orange sur fond orange = invisible. */
.wxw-page:not(.home) .wxw-card--alr .wxw-link { margin: 0 !important; }
.wxw-page:not(.home) .wxw-card--alr .wxw-link a {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(254, 243, 224, 0.55);
  font-size: 0 !important;
  text-decoration: none !important;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.wxw-page:not(.home) .wxw-card--alr .wxw-link a::after {
  content: "";
  position: absolute;
  inset: 0;                                /* remplit le cercle : la fleche est centree par mask */
  background-color: var(--wxw-cream);      /* repos : creme (recoloration via mask) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='12'%20x2='17'%20y2='12'/%3E%3Cpolyline%20points='11%206%2017%2012%2011%2018'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='3'%20y1='12'%20x2='17'%20y2='12'/%3E%3Cpolyline%20points='11%206%2017%2012%2011%2018'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: background-color 0.4s ease;
}
.wxw-page:not(.home) .wxw-card--alr:hover .wxw-link a {
  background: var(--wxw-orange) !important;
  border-color: var(--wxw-orange) !important;
}
.wxw-page:not(.home) .wxw-card--alr:hover .wxw-link a::after {
  background-color: #1a1208;               /* hover : sombre sur orange */
}

/* Hover : leger soulevement + zoom de l'image */
.wxw-page:not(.home) .wxw-card--alr:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}
.wxw-page:not(.home) .wxw-card--alr:hover::before { transform: scale(1.06); }

@media (max-width: 781px) {
  .wxw-page:not(.home) .wxw-card--alr { aspect-ratio: 16 / 11; min-height: 260px; }
}
/* ================== [fin CLAUDE — AGENCE cartes a lire] ================== */

/* ========================================================================
   [CLAUDE — AGENCE A : HERO type-led, ✕ structurel]
   Fin de l'aplat image plein cadre. Ouverture editoriale : fond plat
   charbon chaud, grand geste typo Auge, baseline en micro-label, et la
   SEULE image = un fragment chaud decoupe en forme de ✕ (monogramme
   fonctionnel). Flat color, aucun degrade. Pur CSS, reversible.
   ===================================================================== */
/* Sélecteur volontairement spécifique (6 classes) pour battre la règle de base
   `.wxw-page .page-content > …wxw-page-hero { display:flex }` et imposer la grille. */
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull.wxw-page-hero--media {
  position: relative !important;
  overflow: hidden !important;
  min-height: 86vh !important;
  display: grid !important;
  /* Colonnes dimensionnées au CONTENU (pas 1fr) + regroupées au centre — même
     logique que le diptyque fondatrices : sur très grand écran l'intro et le ✕
     ne s'écartent plus, ils restent groupés au centre avec une gouttière fixe. */
  grid-template-columns: auto auto !important;
  justify-content: center !important;
  align-content: center !important;
  column-gap: clamp(2rem, 5vw, 5rem) !important;
  row-gap: clamp(2rem, 6vh, 4.5rem) !important;
  background-image: none !important;
  background-color: var(--wxw-forest, #233027) !important;   /* vert forêt, comme l'accueil */
  padding-block: clamp(7rem, 14vh, 11rem) clamp(4rem, 8vh, 7rem) !important;
  padding-inline: clamp(1.5rem, 6vw, 7rem) !important;
}
/* Grain de film au-dessus du fond (même recette que l'accueil, cf. .wxw-hero-v2::after) */
.wxw-page:not(.home) .wxw-page-hero--media::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 200px 200px !important;
  opacity: 0.1 !important;
  animation: wxw-grain 1.1s steps(3) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wxw-page:not(.home) .wxw-page-hero--media::before { animation: none !important; }
}

/* La seule image : fragment chaud masque en ✕ (monogramme), a droite */
.wxw-page:not(.home) .wxw-page-hero--media::after {
  content: "" !important;
  display: block !important;
  position: relative !important;                  /* item de grille (plus en absolu) */
  right: auto !important;                           /* neutralise les offsets de .wxw-page-hero::after */
  top: auto !important;
  transform: none !important;
  grid-column: 2 !important;                       /* colonne DROITE */
  grid-row: 2 !important;                          /* sous le titre */
  justify-self: center !important;
  align-self: start !important;
  width: min(clamp(240px, 32vw, 460px), 52vh) !important;
  height: min(clamp(240px, 32vw, 460px), 52vh) !important;
  background-image: url("../img/wxw-lionne.webp") !important;   /* versionnee dans le theme */
  background-size: auto 150% !important;          /* zoom pour pouvoir centrer le regard */
  background-position: 50% 8% !important;          /* regard de la lionne au centre du ✕ */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='606.23%2040.78%20135.32%20125.04'%3E%3Cpolygon%20points='741.55%20132.62%20738.67%20129.75%20728.26%20140.15%20681.52%2093.41%20731.27%2043.66%20728.39%2040.78%20678.64%2090.53%20629.02%2040.91%20606.23%2063.7%20655.85%20113.32%20606.5%20162.67%20609.38%20165.55%20658.73%20116.2%20708.35%20165.82%20708.35%20165.81%20708.35%20165.82%20741.55%20132.62'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='606.23%2040.78%20135.32%20125.04'%3E%3Cpolygon%20points='741.55%20132.62%20738.67%20129.75%20728.26%20140.15%20681.52%2093.41%20731.27%2043.66%20728.39%2040.78%20678.64%2090.53%20629.02%2040.91%20606.23%2063.7%20655.85%20113.32%20606.5%20162.67%20609.38%20165.55%20658.73%20116.2%20708.35%20165.82%20708.35%20165.81%20708.35%20165.82%20741.55%20132.62'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  z-index: 0 !important;
}

/* Colonne texte au-dessus, calee a gauche */
.wxw-page:not(.home) .wxw-page-hero--media > * {
  position: relative;
  z-index: 1;
  margin-inline: 0 !important;
}
/* kicker doublon masque */
.wxw-page:not(.home) .wxw-page-hero--media > .wxw-kicker { display: none !important; }

/* Titre : grand geste Auge bas-de-casse */
.wxw-page:not(.home) .wxw-page-hero--media h1 {
  grid-column: 1 / -1 !important;                  /* pleine largeur */
  grid-row: 1 !important;
  justify-self: center !important;                 /* CENTRÉ */
  text-align: center !important;
  max-width: none !important;
  text-transform: lowercase !important;
  font-size: clamp(3.4rem, 8vw, 7rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em;
  color: var(--wxw-cream) !important;
  margin: 0 !important;
}
/* Majuscule initiale conservée malgré le bas-de-casse forcé ci-dessus (ex :
   "Nos expertises", "L'agence" → pas "nos expertises"/"l'agence"). Le contenu
   garde sa casse normale ; seul l'affichage la met en bas-de-casse, donc ce
   ::first-letter suffit (pas de changement de contenu). */
.wxw-page:not(.home) .wxw-page-hero--media h1::first-letter {
  text-transform: uppercase !important;
}

/* chapo : voix de soutien */
.wxw-page:not(.home) .wxw-page-hero--media p:not(.wxw-kicker) {
  grid-column: 1 !important;                        /* colonne GAUCHE */
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: center !important;                     /* centré verticalement / au ✕ */
  font-size: var(--fs-lead) !important;
  line-height: 1.65 !important;
  color: rgba(254, 243, 224, 0.78) !important;
  max-width: 46ch !important;
  margin-top: 0 !important;
}

/* Mobile : une seule colonne, tout centré horizontalement (titre → intro → ✕).
   NB : sélecteur conteneur à 6 classes pour battre le `grid-template-columns:1fr 1fr`
   du desktop (lui-même boosté à 6 classes) — sinon la grille reste en 2 colonnes. */
@media (max-width: 900px) {
  html body .wxw-page:not(.home) .page-content > .wp-block-group.alignfull.wxw-page-hero--media {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .wxw-page:not(.home) .wxw-page-hero--media h1 {
    grid-column: 1 !important;
    justify-self: center !important;
    text-align: center !important;
  }
  .wxw-page:not(.home) .wxw-page-hero--media p:not(.wxw-kicker) {
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: auto !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  .wxw-page:not(.home) .wxw-page-hero--media::after {
    grid-column: 1 !important; grid-row: 3 !important;
    justify-self: center !important;
    width: min(70vw, 46vh) !important;
    height: min(70vw, 46vh) !important;
  }
}
/* [CLAUDE — ANIM N-1] État initial du hero (h1 + chapô) pour éviter le flash au
   chargement : révélé par main.js (section 7). Ne matche PAS dans l'éditeur
   (pas de body.wxw-page) → hero visible en édition. Si le JS échoue : le fallback
   « GSAP absent » et le failsafe 3,5 s (WXW_REVEAL_SEL) les rendent visibles.
   `@media reduced-motion` : main.js les révèle instantanément (gsap.set opacity:1). */
.wxw-page:not(.home) .wxw-page-hero--media h1,
.wxw-page:not(.home) .wxw-page-hero--media p:not(.wxw-kicker) {
  opacity: 0;
}
/* Le ✕ (pseudo-élément, non animable en GSAP) : apparition CSS au chargement
   (fondu + léger scale), calée un peu après le texte pour un révélé en couches. */
@keyframes wxw-hero-x-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.wxw-page:not(.home) .wxw-page-hero--media::after {
  animation: wxw-hero-x-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
@media (prefers-reduced-motion: reduce) {
  .wxw-page:not(.home) .wxw-page-hero--media::after { animation: none !important; }
}
/* ================ [fin CLAUDE — AGENCE hero type-led] ================ */

/* --- Accueil : section "L'Academy" — fond passé à --wxw-dark (comme Notre
   approche sur L'agence et Communication & influence sur Nos expertises,
   sur demande explicite). Classe partagée (has-cream-color has-dark-
   background-color) avec d'autres pages : scopé à body.home pour ne
   toucher que cette section précise. --- */
body.home .wp-block-group.alignfull.has-cream-color.has-dark-background-color {
  background-color: var(--wxw-dark) !important;
}

/* ========================================================================
   [CLAUDE — AGENCE : Notre vision (01)]
   Composition diagonale fidèle à la maquette (.vision), même modèle que
   .wxw-section--strategy sur Nos expertises : eyebrow seul en row1 (auto,
   aligné sur le sommet du chiffre monumental), titre + corps en row2
   ("1fr"), titre centré, corps ancré en bas. Offset "+1" sur les colonnes
   (grille maquette sans gouttière de bord réservée vs grille du site qui la
   réserve en colonne 1) : 2/7→3/8 (titre), 7/12→8/13 (corps), 2/12→3/13
   (eyebrow, pleine largeur comme le label de la maquette).
   PAS de kicker avant le h2, PAS de mot filigrane géant : la maquette les
   masque explicitement dans ses "corrections de lecture validées"
   (.vision__title>p, .vision__statement { display:none }) — absents ici
   par fidélité à la version finale, pas un oubli.
   min-height calibré généreux dès le premier jet (leçon de 02 sur Nos
   expertises : un min-height trop juste rend le centrage invisible). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(480px, 44vw, 620px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem) !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 8 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: clamp(1rem, 3vw, 2rem) !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 8 / 13 !important;
  grid-row: 2 !important;
  align-self: end !important;
  max-width: none !important;
}
.wxw-section--vision .wxw-section-head > .wp-block-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* H2 : calibre maquette (.vision h2, clamp jusqu'à 6.8rem), le preset
   "xlarge" du bloc plafonne à 4rem. !important requis : la règle cœur
   .has-xlarge-font-size est elle-même en !important. */
.wxw-section--vision .wxw-section-head .has-xlarge-font-size {
  font-size: clamp(3.8rem, 6.2vw, 6.8rem) !important;
  line-height: 0.9 !important;
}
/* Chiffre monumental : masque le ::before par défaut sur .wxw-section-head
   (position pensée pour d'autres compositions) et le recrée sur le
   conteneur de section, position par défaut (haut-droite), sans mot
   filigrane associé (absent de la maquette pour cette section). */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute;
  top: clamp(4rem, 7vw, 6.5rem);
  right: 5vw;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem);
  line-height: 0.7;
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    align-self: start !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
    margin-top: 0 !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
}
@media (max-width: 600px) {
  .wxw-section--vision .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
}
/* ============== [fin CLAUDE — AGENCE Vision] ============== */

/* ========================================================================
   [CLAUDE — AGENCE : Notre approche (02)]
   Composition fidèle à la maquette (.approach) : PAS de ligne "1fr"/diagonale
   ici (contrairement à Vision) — eyebrow row1 (pleine largeur), titre (h2,
   sans kicker, comme Vision) + chapitres sur la même row2 (auto), statement
   final en row3 (auto-placement DOM, même colonne que les chapitres).
   Offset "+1" sur les colonnes : 2/6→3/7 (titre), 6/12→7/13 (chapitres),
   7/12→8/13 (statement), 2/12→3/13 (eyebrow).
   Chapitres : 3 paragraphes plats restructurés en h3+p (intitulés révélant
   l'articulation déjà présente dans le contenu, autorisé), avec un filet
   orange court en tête de chaque chapitre — pas de numérotation interne
   (conforme au README : "aucune numérotation interne en plus du repère 02").
   Fond : conservé tel quel (dark/cream déjà en place), pas le --warm de la
   maquette (décision explicite). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) {
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  background-color: var(--wxw-dark) !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 7 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 7 / 13 !important;
  grid-row: 2 !important;
  align-self: start !important;
  max-width: none !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  border-top: 1px solid var(--c-line-invert, rgba(254, 243, 224, 0.2));
}
.wxw-section--approche .wxw-section-head > .wp-block-column {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.wxw-section--approche .wxw-section-head .has-xlarge-font-size {
  font-size: clamp(3.5rem, 6vw, 6.5rem) !important;
  line-height: 0.9 !important;
}
/* Chaque chapitre : filet orange court + h3 + paragraphe, séparés par un
   filet de bas de ligne (le filet de haut de liste vient du border-top du
   conteneur ci-dessus). */
/* Conteneur des chapitres : le blockGap par défaut de WP sur un layout
   "constrained" n'est PAS un row-gap de grille/flex — c'est un margin-top
   posé directement sur chaque bloc enfant suivant (règle générée par les
   styles globaux WP, hors de ce fichier, du type ".is-layout-constrained
   > * + * { margin-block-start: ... }"). row-gap:0 n'avait donc aucun effet
   ici. Neutralisé directement sur les chapitres eux-mêmes : le rythme vient
   uniquement du padding + border-bottom de chaque chapitre, sinon le filet
   ::before de chaque item (top:-1px de SA PROPRE boîte) se retrouve
   visuellement décalé du filet de bas de ligne du chapitre précédent à
   cause de la marge insérée entre les deux. */
.wxw-approche-chapitres > .wxw-approche-chapitre {
  margin-top: 0 !important;
}
.wxw-approche-chapitre {
  position: relative;
  display: grid;
  grid-template-columns: 2.4fr 4fr;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-bottom: 1px solid var(--c-line-invert, rgba(254, 243, 224, 0.2));
}
.wxw-approche-chapitre::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2rem;
  height: 2px;
  background: var(--wxw-orange);
}
.wxw-approche-chapitre h3 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1;
}
.wxw-approche-chapitre p {
  margin: 0;
  color: rgba(254, 243, 224, 0.65);
  font-size: 14px;
  line-height: 1.65;
}
/* Statement final : isolé, italique, plus grand — comme .approach__last. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-approche-statement {
  grid-column: 8 / 13 !important;
  margin-top: clamp(0.5rem, 1.5vw, 1rem) !important;
}
.wxw-approche-statement {
  color: rgba(254, 243, 224, 0.8);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.35;
}
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-approche-statement {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    margin-top: 1.5rem !important;
  }
}
@media (max-width: 600px) {
  .wxw-section--approche .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
    line-height: 1.05 !important;
  }
}
/* ============== [fin CLAUDE — AGENCE Notre approche] ============== */

/* ========================================================================
   [CLAUDE — AGENCE A : Approche -> INDEX-METHODE]
   Fin de la grille 4-colonnes. Les 4 principes deviennent un index de
   methode vertical : numeros FONCTIONNELS (01-04), titre Auge, description,
   filets fins, survol sobre (numero orange + ✕). Bande rechauffee (charbon,
   coherent avec le hero). Pur CSS, reversible. Scope .wxw-page:not(.home).
   ===================================================================== */

/* Bande "Notre approche" : vert froid -> charbon chaud (coherent hero) */
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull.has-dark-background-color:has(.wxw-academy-points) {
  background-color: #1c1611 !important;
}
/* Numero fantome retire : l'index porte des numeros fonctionnels. */
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-academy-points)::before {
  content: none !important;
}

/* La rangee de colonnes -> pile verticale (index) */
.wxw-page:not(.home) .wxw-academy-points {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  counter-reset: wxw-ap;
  margin-top: clamp(2rem, 4vw, 3.5rem) !important;
}

/* Chaque principe = une LIGNE d'index : [n°] [titre Auge] [description] */
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column {
  counter-increment: wxw-ap;
  position: relative;
  display: grid !important;
  grid-template-columns: clamp(48px, 7vw, 96px) minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: start;
  column-gap: clamp(1.25rem, 3vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.4rem) 0 !important;
  border-top: 1px solid rgba(254, 243, 224, 0.16);
  transition: padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column:last-child {
  border-bottom: 1px solid rgba(254, 243, 224, 0.16);
}

/* Numero fonctionnel (remplace le picto ✕ precedent) */
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column::before {
  content: counter(wxw-ap, decimal-leading-zero) !important;
  display: block !important;
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-label) !important;
  color: rgba(254, 243, 224, 0.45) !important;
  margin: 0.4rem 0 0 !important;
  transition: color 0.4s ease;
}
/* Titre Auge */
.wxw-page:not(.home) .wxw-academy-points .wxw-ap-title {
  font-family: var(--font-title) !important;
  font-size: clamp(1.5rem, 2.7vw, 2.4rem) !important;
  line-height: 1.08 !important;
  color: var(--wxw-cream) !important;
  margin: 0 !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Description */
.wxw-page:not(.home) .wxw-academy-points .wxw-ap-desc {
  color: rgba(254, 243, 224, 0.62) !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.6 !important;
  margin: 0.35rem 0 0 !important;
  max-width: 54ch !important;
}
/* Survol sobre : numero orange, titre qui avance, ligne qui se decale. */
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column:hover { padding-left: clamp(0.5rem, 1.2vw, 1rem) !important; }
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column:hover::before { color: var(--wxw-orange) !important; }
.wxw-page:not(.home) .wxw-academy-points > .wp-block-column:hover .wxw-ap-title { transform: translateX(6px); }

/* Mobile : empilement [n° + titre] puis description dessous */
@media (max-width: 781px) {
  .wxw-page:not(.home) .wxw-academy-points > .wp-block-column {
    grid-template-columns: clamp(40px, 12vw, 60px) 1fr;
    row-gap: 0.6rem;
  }
  .wxw-page:not(.home) .wxw-academy-points .wxw-ap-desc { grid-column: 2 / 3; }
}
/* ============== [fin CLAUDE — AGENCE approche index-methode] ============= */

/* ========================================================================
   [CLAUDE — NAV : focus clavier sobre]
   L'underline des liens reste en creme (voir .main-nav a::after, plus haut).
   ===================================================================== */
.main-nav a:focus-visible { outline: none; }
.main-nav a:focus-visible::after { transform: scaleX(1); }
/* ============== [fin CLAUDE — NAV focus] ===================== */

/* ========================================================================
   [CLAUDE — HOME : Expertises -> INDEX HORIZONTAL]
   Fin des 3 cartes verticales cote a cote. Les piliers d'expertise
   deviennent un index horizontal : chaque expertise = une LIGNE pleine
   largeur [n°] [titre Auge] [description + lien], filets fins, survol
   sobre (numero orange + titre qui avance). Meme idiome que l'index-methode
   de la page Agence, adapte au fond sombre de la home.
   Cible le balisage reel de la home (.wxw-cards-row). Pur CSS, reversible :
   supprimer ce bloc suffit a retrouver les 3 cartes.
   ===================================================================== */

/* La rangee de colonnes -> pile verticale (index). On garde la largeur
   alignwide (1200) du parent constrained : l'index s'aligne ainsi sur le
   titre/chapo de la section (NON modifies). */
.wxw-cards-row.wp-block-columns {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  counter-reset: wxw-exp;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
.wxw-cards-row > .wp-block-column {
  counter-increment: wxw-exp;
  flex: 1 1 auto;
  width: 100%;
  padding: 0;
}

/* La carte devient une LIGNE d'index : [n°] [titre] [description] [fleche] */
.wxw-cards-row > .wp-block-column > .wxw-card {
  position: relative;
  display: grid !important;
  grid-template-columns: clamp(48px, 7vw, 110px) minmax(0, 1.05fr) minmax(0, 1.5fr) clamp(40px, 5vw, 64px);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: clamp(1.25rem, 3vw, 3.5rem);
  row-gap: clamp(0.9rem, 1.5vw, 1.3rem);
  padding: clamp(1.7rem, 3.4vw, 2.8rem) 0 !important;
  border-top: 1px solid rgba(41, 44, 34, 0.18) !important;   /* bat .wxw-card{border:none!important} */
  background: transparent !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;  /* bat .wxw-card{transition:none!important} */
}
.wxw-cards-row > .wp-block-column:last-child > .wxw-card {
  border-bottom: 1px solid rgba(41, 44, 34, 0.18) !important;
}

/* Picto SVG masque dans le format index (numero fonctionnel a la place) */
.wxw-cards-row > .wp-block-column > .wxw-card .wxw-card__picto { display: none; }

/* Numero fonctionnel (re-active le ::before neutralise sur la home) */
.wxw-cards-row > .wp-block-column > .wxw-card::before {
  content: counter(wxw-exp, decimal-leading-zero);
  display: block !important;
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: rgba(41, 44, 34, 0.42);
  margin: 0.5rem 0 0;
  transition: color 0.4s ease;
}

/* Titre Auge — calibre de ligne d'index (pas de min-height "3 lignes") */
.wxw-cards-row > .wp-block-column > .wxw-card h3 {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  min-height: 0 !important;
  display: block !important;
  text-align: left !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

/* Description */
.wxw-cards-row > .wp-block-column > .wxw-card > p:not(.wxw-link) {
  grid-column: 3;
  grid-row: 1;
  flex: none;
  text-align: left !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.6 !important;
  color: rgba(41, 44, 34, 0.58) !important;
  margin: 0 !important;
  max-width: 54ch !important;
}

/* Lien -> FLECHE seule, colonne de droite, centree verticalement sur la ligne.
   Le libelle "+ d'infos" est masque (font-size:0) ; seule la fleche ::after
   reste. Aucun soulignement. */
.wxw-cards-row > .wp-block-column > .wxw-card .wxw-link {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  text-align: right !important;
  margin: 0;
}
.wxw-cards-row > .wp-block-column > .wxw-card .wxw-link a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 0 !important;
  font-size: 0 !important;            /* cache le texte "+ d'infos" */
  border-bottom: none !important;     /* sans soulignement */
  padding-bottom: 0 !important;
  color: var(--wxw-dark) !important;
}
/* Toute la ligne est cliquable : le lien s'etire sur la carte entiere
   (pattern "stretched link"). .wxw-card est position:relative ; ce ::before
   absolu couvre la ligne complete sans toucher au markup. La fleche reste
   sur ::after. */
.wxw-cards-row > .wp-block-column > .wxw-card .wxw-link a::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wxw-cards-row > .wp-block-column > .wxw-card .wxw-link a::after {
  content: "→" !important;
  font-size: clamp(1.1rem, 1.8vw, 24px);   /* ~24px desktop */
  font-weight: 200;                        /* trait fin */
  line-height: 1;
  color: rgba(41, 44, 34, 0.5) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease !important;
}

/* Survol sobre : la ligne GLISSE via transform (pas de padding -> aucun reflow,
   le titre ne se re-wrappe plus, hauteur de bande figee), numero orange, titre
   qui avance un peu plus, fleche orange qui glisse vers la droite. */
.wxw-cards-row > .wp-block-column > .wxw-card:hover { transform: translateX(clamp(6px, 1.2vw, 12px)) !important; }
.wxw-cards-row > .wp-block-column > .wxw-card:hover::before { color: var(--wxw-orange) !important; }
.wxw-cards-row > .wp-block-column > .wxw-card:hover h3 { transform: translateX(6px); color: var(--wxw-orange) !important; }
.wxw-cards-row > .wp-block-column > .wxw-card:hover .wxw-link a::after {
  color: var(--wxw-orange) !important;
  transform: translateX(6px) !important;
}

/* Mobile : [n°] [titre … fleche] sur une ligne, description dessous */
@media (max-width: 781px) {
  .wxw-cards-row > .wp-block-column > .wxw-card {
    grid-template-columns: clamp(40px, 12vw, 60px) 1fr auto;
    row-gap: 0.8rem;
    padding-inline: 0 !important;
  }
  .wxw-cards-row > .wp-block-column > .wxw-card h3 { grid-column: 2; grid-row: 1; }
  .wxw-cards-row > .wp-block-column > .wxw-card > p:not(.wxw-link) { grid-column: 2 / 4; grid-row: 2; }
  .wxw-cards-row > .wp-block-column > .wxw-card .wxw-link {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
  }
}
/* ============== [fin CLAUDE — HOME Expertises index horizontal] ========= */

/* ========================================================================
   [CLAUDE — HEADER : nav -> "MENU" + overlay-index plein ecran]
   La nav inline desktop disparait au profit d'un declencheur "Menu"
   (icone + label) visible sur TOUS les ecrans. Au clic : overlay plein
   ecran vert foret avec un index grand serif (01-05, filets fins, meme
   idiome que l'index des expertises) + "Entrer en relation". Le bouton
   bascule "Menu/≡" -> "Fermer/✕". Pur CSS + JS existant. Reversible :
   supprimer ce bloc + restaurer header.php.bak4 / main.js.bak4.
   ===================================================================== */

/* --- Declencheur visible partout : [icone] [label] = "≡ Menu" ---------- */
.nav-toggle {
  display: inline-flex !important;       /* bat le display:none desktop */
  flex-direction: row-reverse;           /* icone a gauche, label a droite */
  align-items: center;
  gap: 0.75rem;
  width: auto !important;
  height: auto !important;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 1100;
}
.nav-toggle__icon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 24px;
}
/* Picto = 2 lignes (modele) -> deviennent une croix a l'ouverture */
.nav-toggle__icon .nav-toggle__bar:nth-child(1) { width: 24px !important; }
.nav-toggle__icon .nav-toggle__bar:nth-child(2) { width: 18px !important; }
.nav-toggle.is-open .nav-toggle__icon .nav-toggle__bar:nth-child(1) {
  width: 22px !important; opacity: 1 !important;
  transform: translateY(3.5px) rotate(45deg) !important;
}
.nav-toggle.is-open .nav-toggle__icon .nav-toggle__bar:nth-child(2) {
  width: 22px !important; opacity: 1 !important;
  transform: translateY(-3.5px) rotate(-45deg) !important;
}
.nav-toggle__label {
  position: relative;
  display: inline-grid;                   /* superpose les 2 libelles */
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--wxw-cream);
  line-height: 1;
}
.nav-toggle__label-txt { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.nav-toggle__label-txt--close { opacity: 0; }
.nav-toggle.is-open .nav-toggle__label-txt--open  { opacity: 0; }
.nav-toggle.is-open .nav-toggle__label-txt--close { opacity: 1; }
/* Ouvert : label a gauche, ✕ a droite = "Fermer ✕" */
.nav-toggle.is-open { flex-direction: row; }

/* --- Bandeau epure : plus de nav inline ni de CTA "Nous contacter" ------ */
.nav-cta { display: none !important; }
.site-header__end { gap: 0 !important; }
/* Logo au-dessus de l'overlay (sinon masque par le fond vert) */
.site-header__logo { position: relative; z-index: 1100; }

/* --- Overlay plein ecran (tous viewports) ------------------------------- */
.main-nav {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: var(--wxw-forest) !important;
  padding: calc(var(--header-h) + 2vh) var(--gutter, clamp(1.25rem, 4vw, 3rem)) clamp(5.5rem, 12vh, 8rem) !important;
  z-index: 999 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;  /* le fond se pose vite -> la cascade des items reste visible */
}
.main-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Header transparent quand l'overlay est ouvert (logo + bouton restent au-dessus) */
.site-header:has(.main-nav.is-open) {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- L'index : une ligne par item ([n°] [titre]) ------------------------ */
.main-nav ul {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  counter-reset: wxw-menu;
}
.main-nav li {
  counter-increment: wxw-menu;
  opacity: 0.25;                         /* faible mais bien visible au demarrage */
  transform: translateY(16px);           /* quelques px : monte en arrivant */
  animation: none !important;            /* neutralise l'ancienne anim mobile */
  border-top: 1px solid rgba(254, 243, 224, 0.16);
  /* FERMETURE : les items se fondent avec l'overlay (opacite 0.25s, comme le
     fond) et on DIFFERE le retour de leur transform a la position basse
     jusqu'a ce que l'overlay soit invisible (0.3s > 0.25s). Sans ce delai,
     les items repartaient vers le bas pendant 0.55s alors que le fond avait
     deja disparu -> "flash" des items a la fermeture. */
  transition: opacity 0.25s ease, transform 0s linear 0.3s;
}
.main-nav li:last-child { border-bottom: 1px solid rgba(254, 243, 224, 0.16); }
/* OUVERTURE : chacun leur tour, monte vers le haut + revient a 100% d'opacite */
.main-nav.is-open li {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.main-nav.is-open li:nth-child(1) { transition-delay: 0.12s !important; }
.main-nav.is-open li:nth-child(2) { transition-delay: 0.26s !important; }
.main-nav.is-open li:nth-child(3) { transition-delay: 0.40s !important; }
.main-nav.is-open li:nth-child(4) { transition-delay: 0.54s !important; }
.main-nav.is-open li:nth-child(5) { transition-delay: 0.68s !important; }
.main-nav.is-open li:nth-child(6) { transition-delay: 0.82s !important; }

/* Lien = grille [numero] [titre serif], filet qui se decale au survol */
.main-nav li a {
  display: grid !important;
  grid-template-columns: clamp(38px, 5vw, 64px) 1fr !important;
  align-items: center !important;
  column-gap: clamp(1.25rem, 3vw, 2.5rem) !important;
  padding: clamp(0.55rem, 1.7vh, 1.35rem) 0 !important;
  font-family: "Auge", Georgia, serif !important;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--wxw-cream) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease !important;
}
.main-nav li a::after { display: none !important; }   /* pas de soulignement desktop */
.main-nav li a::before {
  content: counter(wxw-menu, decimal-leading-zero);
  font-family: var(--font-body) !important;
  font-size: clamp(0.6rem, 0.8vw, 0.72rem) !important;
  font-weight: 500 !important;
  letter-spacing: var(--ls-label) !important;
  color: rgba(254, 243, 224, 0.4) !important;
  transition: color 0.4s ease;
}
/* Survol : numero orange, titre italique qui avance */
.main-nav li a:hover { transform: translateX(clamp(8px, 1.5vw, 16px)); font-style: italic !important; }
.main-nav li a:hover::before { color: var(--wxw-orange) !important; }
.main-nav .current-menu-item > a { font-style: italic !important; }
.main-nav .current-menu-item > a::before { color: var(--wxw-orange) !important; }

/* --- "Entrer en relation" en bas a gauche ------------------------------- */
.main-nav__contact {
  position: absolute !important;
  left: var(--gutter, clamp(1.25rem, 4vw, 3rem));
  bottom: clamp(2rem, 5vh, 3.2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Auge", Georgia, serif !important;
  font-style: italic !important;
  font-size: var(--fs-lead) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: rgba(254, 243, 224, 0.78) !important;
  text-decoration: none !important;
  transition: color 0.35s ease;
}
.main-nav__contact::after { display: none !important; }
.main-nav__contact-arrow { color: var(--wxw-orange); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.main-nav__contact:hover { color: var(--wxw-cream) !important; }
.main-nav__contact:hover .main-nav__contact-arrow { transform: translateX(5px); }

/* Mobile : titres un cran plus compacts */
@media (max-width: 600px) {
  .main-nav li a { font-size: clamp(1.7rem, 9vw, 2.4rem) !important; }
}
/* ============== [fin CLAUDE — HEADER nav MENU + overlay-index] ========= */

/* [Hero V2 : la composition (fond sapin, titre centré, grille def/tagline,
   indicateur Défiler) est désormais consolidée dans le bloc HERO V2 plus haut.
   Plus d'override empilé ici — voir `.wxw-hero-v2*`. ] */

/* ====================================================================
   [CLAUDE] PAGES LÉGALES — mentions, réclamations, indicateurs, CGV, CGU
   Bandeau d'en-tête sombre + surface de lecture claire, texte contraint.
   Pages sans la classe body .wxw-page : on cible donc directement les
   classes .wxw-legal-hero / .wxw-legal. Réversible : supprimer ce bloc.
   ==================================================================== */
.wxw-legal-hero { text-align: left; }
.wxw-legal-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wxw-legal-hero > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.wxw-legal-hero > h1.wp-block-heading { margin: 0; }
.wxw-legal-hero .wxw-kicker { margin-bottom: 1rem !important; }

.wxw-legal.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wxw-legal > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.wxw-legal h2.wp-block-heading {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(41, 44, 34, 0.14);
  font-size: var(--fs-title-sm);
}
.wxw-legal > h2.wp-block-heading:first-child { margin-top: 0; }
.wxw-legal p { margin: 0 0 1.1rem; line-height: 1.75; }
.wxw-legal ul.wp-block-list { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.wxw-legal ul.wp-block-list li { margin-bottom: 0.5rem; line-height: 1.7; }
/* Soulignement réservé aux liens de contenu : on exclut les boutons
   (a.wp-element-button / .wxw-btn) sinon le trait parasite le bouton et,
   au survol, le label-mask JS affiche un double-trait (effet « cadre »). */
.wxw-legal a:not(.wp-element-button):not(.wxw-btn) { color: var(--wxw-terracotta-deep); text-decoration: underline; text-decoration-color: var(--wxw-orange); text-underline-offset: 3px; }
/* Texte toujours terracotta foncé (l'orange n'atteint que 2,4:1 sur crème) ;
   le survol épaissit le soulignement orange, sans effet sur la mise en page. */
.wxw-legal a:not(.wp-element-button):not(.wxw-btn):hover { text-decoration-thickness: 2px; }
.wxw-legal strong { color: var(--wxw-dark); }

/* Boutons (CTA PDF…) : air vertical symétrique. Le .wp-block-buttons ne
   reçoit, par défaut, que le blockGap au-dessus (margin-bottom:0 WP) tandis
   que le `p` suivant a margin-top:0 → collé dessous. On équilibre les deux. */
.wxw-legal .wp-block-buttons { margin-top: 1.75rem; margin-bottom: 1.75rem; }

/* Le footer accueille désormais 5 liens légaux : autoriser le retour ligne. */
.site-footer__legal-links { flex-wrap: wrap; row-gap: 0.5rem; }
/* ============== [fin CLAUDE — PAGES LÉGALES] ======================== */

/* ====================================================================
   [CLAUDE] PARITÉ ÉDITEUR ↔ FRONTEND (généré)
   Miroir des règles de mise en page scopées à `.wxw-page .page-content`
   (grille des sections, en-têtes titre/chapô, boutons fléchés, numéros de
   section auto, section Academy à image, replis mobiles) vers le conteneur
   racine de l'éditeur Gutenberg `.is-root-container`. main.css est injecté
   dans l'éditeur via add_editor_style() (préfixe auto `.editor-styles-wrapper`).
   `.is-root-container` n'existe PAS en façade -> bloc 100% inerte côté front.
   Régénérable / réversible : supprimer ce bloc.
   ==================================================================== */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) {
  --wxw-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-grid-max: 1320px;
  --wxw-gap: clamp(1rem, 1.6vw, 1.75rem);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--wxw-edge), 1fr)
    [wide-start]  repeat(12, minmax(0, calc((var(--wxw-grid-max) - 11 * var(--wxw-gap)) / 12)))
    [wide-end]    minmax(var(--wxw-edge), 1fr) [full-end];
  column-gap: var(--wxw-gap);
  row-gap:    clamp(2.25rem, 4.5vw, 4rem);
  align-items: start;
  padding-inline: 0;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > * {
  grid-column: 2 / 14;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head {
  grid-column: 2 / 9;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
  grid-column: 9 / 14;
  grid-row: 1;
  align-self: end;
  margin-top: 0 !important;
  max-width: 42ch;
}

/* [CLAUDE — LEAD EXPERTISES] miroir éditeur (parité Gutenberg) */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-cards-intro {
  grid-column: 2 / 14;
  font-size: var(--fs-lead); /* token "intro/chapô" — commun avec .wxw-intro */
  line-height: 1.6;
  max-width: 62ch;
  margin: var(--wp--preset--spacing--s) auto 0; /* un peu d'air entre la tête de section et le lead */
  text-align: center;
  color: var(--color-text);
}

/* Miroir éditeur : chapô section 01 sans marge basse (calage en bas). */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-cards-intro) > .wxw-intro {
  margin-bottom: 0 !important;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-marquee {
  grid-column: 1 / 15;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button {
  position: relative !important;  
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;   
  padding: 0 0 6px !important;
  gap: 10px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--wxw-orange);
  transition: width 0.3s ease;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button:hover::before {
  width: calc(100% + 8px);
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button::after {
  content: "→";
  color: var(--wxw-orange);
  display: inline-block;
  
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  transition: transform 0.3s ease;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained .wp-block-buttons .wp-element-button:hover::after {
  transform: translateX(10px);
}

@media (max-width: 860px) {
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) {
    grid-template-columns:
      [full-start] var(--wxw-edge)
      [wide-start] 1fr [wide-end]
      var(--wxw-edge) [full-end];
    padding-inline: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > * {
    grid-column: 2 / 3;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
    grid-column: 2 / 3;
    grid-row: auto;
    align-self: start;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-intro {
    margin-top: 1.25rem !important;
    max-width: none;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-cards-intro {
    grid-column: 2 / 3;
    max-width: none;
    text-align: left;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-marquee {
    grid-column: 1 / 4;
}
}

/* [CLAUDE — TITRES MOBILE] miroir éditeur */
@media (max-width: 600px) {
  .is-root-container .wxw-section-head .has-xlarge-font-size {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) .wp-block-image {
  margin: 0 !important;
  max-width: 230px;
  background: #fff;
  border: 1px solid rgba(254, 243, 224, 0.14);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.7);
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:last-child p {
  color: rgba(254, 243, 224, 0.85) !important;
  font-size: var(--fs-lead) !important;
  line-height: 1.65 !important;
  font-weight: 300 !important;
  max-width: 56ch !important;
}

@media (min-width: 861px) {
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) {
    align-items: start !important;
    gap: clamp(3rem, 6vw, 6rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:first-child {
    order: 2;
    flex: 0 0 230px !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-columns:not(.wxw-section-head):has(.wp-block-image) > .wp-block-column:last-child {
    order: 1;
    flex: 1 1 auto !important;
}
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image),
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-cream-warm-background-color {
  padding-top: clamp(3.5rem, 7vw, 6rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
  row-gap: clamp(1.75rem, 3.6vw, 3rem) !important;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-dark-background-color:has(.wp-block-image) > .wp-block-buttons,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.has-cream-warm-background-color > .wp-block-buttons {
  padding-top: 0 !important;
}

.is-root-container > .wp-block-group.alignfull.wxw-page-hero {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.is-root-container > .wp-block-group.alignfull.wxw-page-hero { position: relative; overflow: hidden;
}

.is-root-container { counter-reset: wxw-sec;
}

.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) {
  counter-increment: wxw-sec;
  position: relative;
  overflow: hidden;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > * {
  position: relative;
  z-index: 1;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head {
  position: relative;
  overflow: visible;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head .wp-block-heading {
  line-height: 0.98;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(:has(.wxw-frise)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head::before {
  content: counter(wxw-sec, decimal-leading-zero) ".";
  position: absolute;
  left: -0.04em;
  top: -0.42em;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 1;
  color: currentColor;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:has(.wxw-section-head):not(:has(.wxw-section-num)):not(.wxw-academy-section):not(.wxw-section--intro) > .wxw-section-head > * {
  position: relative;
  z-index: 1;
}
/* Hero (bloc HTML custom, plein écran en façade) : déjà stylé dans l'éditeur
   par les règles de base .wxw-hero-v2, mais à `height:100svh` il remplit tout
   le canevas → inutilisable. On le PLAFONNE UNIQUEMENT dans l'éditeur. Inerte
   en façade : `.is-root-container` n'existe pas côté front → rendu public
   strictement inchangé. */
.is-root-container .wxw-hero-v2 {
  height: auto !important;
  min-height: 360px !important;
  max-height: 62vh !important;
}
/* [VISION N-1] miroir de la compo « Notre vision » (titre-label / colonne texte) */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-section-body) > .wxw-section-head {
  grid-column: 2 / 7;
  align-self: start;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
  grid-column: 8 / 14;
  grid-row: 1;
  align-self: start;
  max-width: none;
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero):has(.wxw-section-body) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
    grid-column: 2 / 3;
    grid-row: auto;
  }
}
/* [DES VALEURS] miroir du sommaire (titre 2/7 + coda · index 7/14) */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-values-head {
  grid-column: 2 / 7;
  grid-row: 1;
  align-self: start;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-values-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
  grid-column: 8 / 14;
  margin-inline: 0 !important;
  max-width: none !important;
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-values-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-values-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
    grid-column: 2 / 3;
    grid-row: auto;
  }
}
/* [FONDATRICES N-1] miroir : colonnes ramenées à la largeur du panneau + centrées */
.is-root-container .wp-block-columns:has(.wxw-founder-photo) {
  justify-content: center !important;
}
.is-root-container .wp-block-columns:has(.wxw-founder-photo) > .wp-block-column {
  flex-grow: 0 !important;
  flex-basis: 440px !important;
}

/* [EXPERTISES] miroir : placements spécifiques par section (page id 15 seulement,
   scopé par les 5 classes modificatrices — voir bloc source pour le détail). */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 12 !important; grid-row: 1 !important; align-self: start !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 8 / 13 !important; grid-row: 2 !important; align-self: start !important; max-width: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) {
  row-gap: clamp(1rem, 2vw, 2rem) !important;
}
/* Note : bandeau eyebrow, h2 et paragraphe de cette section sont stylés via
   des sélecteurs .wxw-section--intro ... non préfixés (cf. bloc source) —
   déjà identiques en façade et dans l'éditeur, pas de miroir nécessaire ici. */
.is-root-container > .wp-block-cover.wxw-manifeste.wxw-section--pivot {
  min-height: clamp(58vh, 50vh + 8vw, 64vh) !important;
}
.is-root-container > .wp-block-cover.wxw-manifeste.wxw-section--pivot .wp-block-cover__inner-container {
  max-width: min(88vw, 52rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(680px, 64vw, 880px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 9 !important; grid-row: 1 !important; align-self: start !important; margin-bottom: 0 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 9 !important; grid-row: 2 !important; align-self: start !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 9 / 13 !important; grid-row: 2 !important; align-self: end !important; max-width: none !important;
  margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute; top: clamp(4rem, 7vw, 6.5rem); right: 5vw;
  font-family: var(--font-title); font-style: italic; font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem); line-height: 0.7; color: currentColor;
  opacity: 0.05; pointer-events: none; z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "CADRE";
  position: absolute; left: -0.03em; bottom: -0.25em;
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(34, 37, 30, 0.055); pointer-events: none; z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(720px, 68vw, 920px);
  grid-template-rows: auto auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
  background-color: var(--wxw-dark) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important; grid-row: 1 !important; align-self: start !important; margin-bottom: 0 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 6 / 13 !important; grid-row: 2 !important; align-self: start !important;
  margin-top: clamp(2.5rem, 6vh, 5rem);
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 4 / 10 !important; grid-row: 3 !important; align-self: end !important; max-width: none !important;
  margin-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute; top: clamp(4rem, 7vw, 6.5rem); left: 6vw;
  font-family: var(--font-title); font-style: italic; font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem); line-height: 0.7; color: currentColor;
  opacity: 0.05; pointer-events: none; z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "VOIX";
  position: absolute; right: -0.04em; bottom: -0.25em;
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(241, 230, 209, 0.06); pointer-events: none; z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(600px, 58vw, 780px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important; grid-row: 1 !important; align-self: start !important; margin-bottom: 0 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 4 / 9 !important; grid-row: 2 !important; align-self: center !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 9 / 13 !important; grid-row: 2 !important; align-self: center !important; max-width: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute; top: clamp(4rem, 7vw, 6.5rem); right: 5vw;
  font-family: var(--font-title); font-style: italic; font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem); line-height: 0.7; color: currentColor;
  opacity: 0.05; pointer-events: none; z-index: 0;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
  content: "POSTURE";
  position: absolute; left: -0.03em; bottom: -0.25em;
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(12rem, 28vw, 28rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(34, 37, 30, 0.055); pointer-events: none; z-index: 0;
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--intro:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
  }
}
@media (max-width: 600px) {
  .is-root-container .wxw-section-head .has-huge-font-size {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    margin-bottom: 0 !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--strategy:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
    margin-top: 0;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    margin-bottom: 0 !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    left: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--influence:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    align-self: start !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--coaching:not(.wxw-page-hero):not(.wxw-hero-v2)::after {
    font-size: 40vw;
    bottom: -0.08em;
  }
}
/* Note : les garde-fous typo mobile de 02/03/04 (.has-xlarge-font-size à
   600px) sont des sélecteurs non préfixés — déjà communs aux deux calques,
   pas de miroir nécessaire ici. */
/* Fond hero, généralisé (Nos expertises, L'Academy, accueil, pages N-1) :
   pas de scoping par page-id côté éditeur (les classes body.page-id-* du
   front n'existent pas dans l'iframe de l'éditeur) — le ciblage direct des
   classes de hero suffit. */
.is-root-container .wxw-academy-hero {
  background-color: #15251d;
}
.is-root-container .wxw-hero-v2 {
  background-color: #15251d;
}
.is-root-container .wxw-page-hero--media {
  background-color: #15251d !important;
}
/* Miroir : Notre vision (01), L'agence */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) {
  min-height: clamp(480px, 44vw, 620px);
  grid-template-rows: auto 1fr;
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-top: clamp(3.5rem, 7vw, 6.5rem) !important;
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important; grid-row: 1 !important; align-self: start !important; margin-bottom: 0 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 8 !important; grid-row: 2 !important; align-self: center !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 8 / 13 !important; grid-row: 2 !important; align-self: end !important; max-width: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head::before {
  display: none !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
  content: counter(wxw-sec, decimal-leading-zero);
  position: absolute; top: clamp(4rem, 7vw, 6.5rem); right: 5vw;
  font-family: var(--font-title); font-style: italic; font-weight: 900;
  font-size: clamp(8rem, 18vw, 17rem); line-height: 0.7; color: currentColor;
  opacity: 0.05; pointer-events: none; z-index: 0;
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) {
    min-height: auto;
    grid-template-rows: auto;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    align-self: start !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
    margin-top: 0 !important;
  }
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--vision:not(.wxw-page-hero):not(.wxw-hero-v2)::before {
    top: 2.5rem;
    right: 4vw;
    font-size: clamp(5rem, 16vw, 9rem);
  }
}
/* Miroir : Notre approche (02), L'agence */
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) {
  row-gap: clamp(1.25rem, 2.5vw, 2rem) !important;
  background-color: var(--wxw-dark) !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow {
  grid-column: 3 / 13 !important; grid-row: 1 !important; align-self: start !important; margin-bottom: 0 !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head {
  grid-column: 3 / 7 !important; grid-row: 2 !important; align-self: start !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  padding-left: 0 !important; margin-left: 0 !important;
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body {
  grid-column: 7 / 13 !important; grid-row: 2 !important; align-self: start !important; max-width: none !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
  border-top: 1px solid var(--c-line-invert, rgba(254, 243, 224, 0.2));
}
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-approche-statement {
  grid-column: 8 / 13 !important;
  margin-top: clamp(0.5rem, 1.5vw, 1rem) !important;
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-section-body,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-section--approche:not(.wxw-page-hero):not(.wxw-hero-v2) > .wxw-approche-statement {
    grid-column: 2 / 3 !important;
    grid-row: auto !important;
    margin-top: 1.5rem !important;
  }
}
/* ============== [fin CLAUDE — PARITÉ ÉDITEUR] ====================== */

/* [CLAUDE] BILLETS — méta "CATÉGORIE · DATE" retirée : la ligne méta du
   Query Loop (accueil) réutilise désormais directement .wxw-blog-article__meta
   / __category / __date (page Billets & éditos), pour un rendu identique.
   Voir bloc [CLAUDE — BLOG « BILLETS & ÉDITOS »] plus bas dans ce fichier. */

/* ====================================================================
   [CLAUDE — NOTE DE BAS DE SECTION] note simple type astérisque
   (ex. « * En cours de formation »). Petite, discrète, sans fioriture,
   alignée à gauche. Hérite la couleur du contexte (cream sur fond sombre),
   atténuée par l'opacité. Supprimable sans impact.
   ==================================================================== */
.wxw-footnote {
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: left;
  opacity: 0.6;
  /* Note calée sur le bord gauche de la section (l'axe du titre et de l'intro) :
     on occupe la zone large de la grille (2/14) et on aligne le texte à gauche,
     en défaisant le centrage "constrained" de WordPress. NB : le texte
     « Notre Academy… » est, lui, indenté car logé dans un bloc texte+sceau
     centré ; la note suit donc l'axe principal de la section, pas ce sous-bloc. */
  grid-column: 2 / 14;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}
/* ============== [fin CLAUDE — NOTE DE BAS DE SECTION] ============== */

/* =============================================================================
   [CLAUDE — ACADEMY DOSSIER] Passe structurelle desktop, page « L'Academy »
   (id 17) uniquement. Toutes les règles sont scopées aux classes de section
   wxw-academy-section--* ajoutées dans le post_content de cette page ; elles
   n'ont aucun effet ailleurs. Composants réutilisés tels quels : grille N-1
   (.wxw-section-head/.wxw-section-body), palette (cream/dark/forest), ligne
   de valeurs (.wxw-values → vocabulaire repris pour .wxw-academy-statement).
   Réversible : supprimer ce bloc (front + miroir éditeur ci-dessous) et les
   classes wxw-academy-* dans le post_content (voir academy-page-17.*.bak.html).
   ============================================================================= */

/* --- Hero Academy : couverture magazine statique (pas d'image, pas d'animation
   JS — contrairement à .wxw-hero-v2 de l'accueil dont ce composant reprend le
   langage visuel : kicker à filet, titre 2 lignes droit-bold/italique, filigrane
   XXL en fond). Classe dédiée .wxw-academy-hero pour ne dépendre d'aucun hook
   JS existant. Réversible : supprimer ce bloc + le wp:html du hero (voir
   academy-page-17.*.bak.html pour l'ancienne version centrée). --- */
.wxw-academy-hero {
  --h-edge: clamp(1.25rem, 4vw, 3rem);
  --academy-hero-max: 1320px; /* aligné sur --wxw-grid-max (composition magazine du reste du site) */
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--wxw-forest);
  color: var(--wxw-cream);
  display: flex;
  flex-direction: column;
  padding: clamp(5rem, 14vh, 8rem) var(--h-edge) 0;
}
/* Généralisé à tous les hero du site (validé d'abord sur Nos expertises +
   L'Academy) : couleur de fond exacte de la maquette (--forest: #15251d dans
   expertises-reference-package/globals.css), plus sombre que --wxw-forest
   (#233027). Le token --wxw-forest lui-même n'est PAS changé (il sert aussi
   au menu .main-nav et au fond de section .has-forest-background-color,
   hors périmètre de cette demande, qui portait sur les hero uniquement) :
   chaque hero est surchargé individuellement. Miroir éditeur :
   [CLAUDE — PARITÉ ÉDITEUR]. */
body.page-id-13 .wxw-academy-hero,
body.page-id-15 .wxw-academy-hero,
body.page-id-17 .wxw-academy-hero {
  background-color: #15251d;
}
/* Bloc wxw/interior-hero : même fond via le réglage générique tone="forest"
   (tone="default" garde le fond de base --wxw-forest). Les règles page-id
   ci-dessus restent pour les heros HTML et les révisions historiques. */
.wxw-academy-hero--forest {
  background-color: #15251d;
}
.wxw-hero-v2 {
  background-color: #15251d;
}
.wxw-page:not(.home) .page-content > .wp-block-group.alignfull.wxw-page-hero--media {
  background-color: #15251d !important;
}
/* --- Halo lumineux (comme .hero::before de la maquette) : lueur sauge très
   diffuse positionnée pour effleurer la fin de "Wyler × Wyler", + voile sombre
   asymétrique côté gauche pour la profondeur. rgba = --wxw-sage / --wxw-black
   (tokens déjà existants dans le thème) ; pas de version mobile dédiée dans
   la maquette, la position en % s'adapte donc naturellement à la largeur. --- */
.wxw-academy-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 46%, rgba(135, 163, 125, 0.12), transparent 28%),
    linear-gradient(90deg, rgba(18, 17, 16, 0.18), transparent 30%, rgba(18, 17, 16, 0.1));
}
/* --- Grain de fond : même technique que le hero de l'accueil (.wxw-hero-v2::after,
   turbulence SVG animée) pour une cohérence de matière entre les deux hero sombres.
   z-index 0 : au-dessus du fond/filigrane, sous le texte (z-index 1). Anime via le
   @keyframes wxw-grain déjà déclaré (partagé, non dupliqué). --- */
.wxw-academy-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.1;
  animation: wxw-grain 1.1s steps(3) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wxw-academy-hero::after { animation: none; }
}
.wxw-academy-hero__intro {
  position: relative;
  z-index: 1;
  max-width: min(100%, var(--academy-hero-max));
  /* Retrait supplémentaire d'une colonne pleine + gouttière, comme .hero h1 /
     .hero__content en grid-column 2/12 sur la grille 12 colonnes de la maquette
     (en plus du bord du hero --h-edge) : ~1 colonne + 1 gap sur une grille de
     1320px = jusqu'à 7rem, pas une simple marge d'edge. */
  padding-inline: clamp(1.5rem, 8vw, 7rem);
}
.wxw-academy-hero__title {
  /* margin-top : compense l'espace du kicker retiré (texte + margin-bottom
     clamp(2rem,5vh,3.5rem)) pour garder le même point de départ du titre. */
  margin: clamp(2.5rem, 6vh, 4rem) 0 clamp(3rem, 8vh, 7rem);
  font-family: var(--font-title);
  line-height: 0.82;
  /* Le titre est passé de <p> à <h1> (accessibilité/SEO — la page n'avait
     aucun h1) : on fige explicitement couleur et tracking pour neutraliser
     la règle de base h1{color:var(--color-text); letter-spacing:-0.01em}
     et garder le rendu crème exact déjà validé. */
  color: var(--wxw-cream);
  letter-spacing: normal;
}
/* Ampleur alignée sur la maquette de référence (page.tsx/globals.css .hero h1) */
.wxw-academy-hero__title-line {
  display: block;
  font-size: clamp(4.8rem, 10.7vw, 10rem);
}
.wxw-academy-hero__title-line--bold {
  font-weight: 900;
  font-style: normal;
}
.wxw-academy-hero__title-line--italic {
  font-weight: 400;
  font-style: italic;
  /* Décollée à droite de "L'Academy", sur une seule ligne, comme .hero h1 span
     (margin-left: 0.8em) dans la maquette. */
  margin-left: 0.8em;
  white-space: nowrap;
}
.wxw-academy-hero__lead {
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--wxw-cream);
  opacity: 0.85;
  margin: 0;
}
.wxw-academy-hero__ruler {
  position: absolute;
  z-index: 1;
  top: clamp(4rem, 16vh, 8rem);
  right: var(--h-edge);
  bottom: clamp(6rem, 14vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.wxw-academy-hero__ruler-line {
  flex: 1;
  width: 1px;
  background: var(--c-line-invert);
  margin: 0.75rem 0;
}
.wxw-academy-hero__ruler-mark {
  writing-mode: vertical-rl;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--c-eyebrow-invert);
}
/* Filigrane ancré en bas-droite, tracé très estompé (opacity 0.085), comme
   .hero__word de la maquette : droit (pas italique), graisse 900, letter-spacing
   resserré, taille alignée sur clamp(10rem,26vw,26rem). */
.wxw-academy-hero__watermark {
  position: absolute;
  z-index: 0;
  right: -0.06em;
  bottom: -0.22em;
  margin: 0;
  font-family: var(--font-title);
  font-style: normal;
  font-weight: 900;
  font-size: clamp(10rem, 26vw, 26rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: transparent;
  opacity: 0.085;
  -webkit-text-stroke: 1px var(--wxw-cream);
  white-space: nowrap;
  pointer-events: none;
}
.wxw-academy-hero__footbar {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vh, 2rem) 0;
  border-top: 1px solid var(--c-line-invert);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Nos expertises + L'agence + Nos références : le footbar n'a plus qu'un
   seul élément (pas de note) ; scopé à ces pages pour ne pas toucher au
   footbar du Hero Academy (verrouillé), qui garde ses deux éléments espacés. */
body.page-id-13 .wxw-academy-hero__footbar,
body.page-id-15 .wxw-academy-hero__footbar,
body.page-id-19 .wxw-academy-hero__footbar {
  justify-content: flex-end;
}
/* Bloc wxw/interior-hero : même alignement via la classe calculée au rendu
   (lien seul, sans note). Avec note (--with-note), la disposition de base
   note à gauche / lien à droite s'applique telle quelle. */
.wxw-academy-hero__footbar--link-only {
  justify-content: flex-end;
}
.wxw-academy-hero__note {
  margin: 0;
  opacity: 0.6;
}
.wxw-academy-hero__discover {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--wxw-cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.wxw-academy-hero__discover:hover { opacity: 0.7; }
.wxw-academy-hero__discover span {
  color: var(--wxw-orange);
  font-size: 1rem;
}
/* --- L'agence uniquement : X photographique du hero. Réutilise le masque ✕
   déjà existant sur .wxw-page-hero--media::after (même data-URI SVG,
   cf. bloc [CLAUDE — AGENCE hero type-led] plus haut) — PAS le clip-path
   inventé sur le modèle de .hero-x de la maquette (corrigé, cf. retour user).
   Image : la lionne du thème (même asset que le ✕ des autres pages N-1),
   pas la photo spécifique de cette page (corrigé, cf. retour user).
   .hero-x de la maquette ne sert que de repère de position/taille
   (right/top/width), pas de recette de forme.
   Débordement corrigé : le X est positionné en vw/% (viewport), le texte du
   hero garde une largeur fixe (62ch) — en resserrant la fenêtre, le X se
   rapprochait du texte jusqu'à le recouvrir. Repositionné/réduit à deux
   paliers repris tels quels de la maquette (.hero-x à 800px/680px). */
.wxw-agence-hero-x {
  position: absolute;
  z-index: 1;
  right: 9vw;
  top: 32%;
  width: 32vw;
  height: 32vw;
  max-width: 500px;
  max-height: 500px;
  background-image: url("../img/wxw-lionne.webp");
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='606.23%2040.78%20135.32%20125.04'%3E%3Cpolygon%20points='741.55%20132.62%20738.67%20129.75%20728.26%20140.15%20681.52%2093.41%20731.27%2043.66%20728.39%2040.78%20678.64%2090.53%20629.02%2040.91%20606.23%2063.7%20655.85%20113.32%20606.5%20162.67%20609.38%20165.55%20658.73%20116.2%20708.35%20165.82%20708.35%20165.81%20708.35%20165.82%20741.55%20132.62'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='606.23%2040.78%20135.32%20125.04'%3E%3Cpolygon%20points='741.55%20132.62%20738.67%20129.75%20728.26%20140.15%20681.52%2093.41%20731.27%2043.66%20728.39%2040.78%20678.64%2090.53%20629.02%2040.91%20606.23%2063.7%20655.85%20113.32%20606.5%20162.67%20609.38%20165.55%20658.73%20116.2%20708.35%20165.82%20708.35%20165.81%20708.35%20165.82%20741.55%20132.62'%20fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}
/* Tablette : la composition garde l'échelle desktop (le titre continue de
   fluctuer via son propre clamp en vw) — seul le retrait de colonne magazine
   supplémentaire (padding-inline de l'intro) est relâché, comme .hero h1/
   .hero__content qui repassent en grid-column 1/13 (pleine largeur) à 1050px
   dans la maquette. Le rail et les proportions du footbar restent identiques. */
@media (max-width: 860px) {
  .wxw-academy-hero__intro { padding-inline: 0; }
}
/* L'agence uniquement : sur écrans moyens et petits, le X entrait
   inévitablement en collision avec le texte du hero (position en vw contre
   texte à largeur fixe) — plutôt que de multiplier les paliers de
   repositionnement, le X est simplement masqué sous 1200px (décision user),
   scopé à cette page (.wxw-agence-hero) pour ne pas toucher au hero
   Academy/Nos expertises (verrouillés, qui n'ont pas de X). */
@media (max-width: 1200px) {
  .wxw-agence-hero-x { display: none; }
}

@media (max-width: 768px) {
  .wxw-academy-hero { padding-top: clamp(4rem, 12vh, 6rem); }
  .wxw-academy-hero__ruler { display: none; }
  /* Échelle mobile alignée sur .hero h1 de la maquette à 760px */
  .wxw-academy-hero__title-line { font-size: clamp(4.2rem, 20vw, 6.4rem); }
  .wxw-academy-hero__title { margin-bottom: 3.5rem; }
  /* white-space:nowrap est une contrainte desktop (validée) ; à cette échelle
     et cette largeur, la maintenir provoquerait soit un débordement horizontal
     soit un texte tronqué par l'overflow:hidden du hero — les deux interdits.
     La maquette elle-même ne force pas nowrap sur .hero h1 span et réduit son
     décalage à 0.28em à 760px : même traitement ici, retour à un empilement
     naturel si la ligne ne tient pas. */
  .wxw-academy-hero__title-line--italic { margin-left: 0.28em; white-space: normal; }
  .wxw-academy-hero__lead { font-size: 0.92rem; }
  .wxw-academy-hero__watermark { font-size: clamp(6rem, 34vw, 12rem); right: -0.02em; bottom: 0; }
  .wxw-academy-hero__footbar { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* Très petit écran (plancher body min-width:320px, breakpoint déjà utilisé
   plus haut sur cette page pour le même besoin) : au ras du plancher, même le
   mot "L'Academy" seul en graisse 900 approche la largeur utile disponible
   une fois les marges retirées — on abaisse encore le plancher du clamp pour
   garantir qu'il tient sur une ligne sans débordement. */
@media (max-width: 480px) {
  .wxw-academy-hero__title-line { font-size: clamp(3rem, 15vw, 4.2rem); }
}

/* --- Qualiopi : proportions 12 colonnes de la maquette (h2 5/12, texte 4/12,
   carte badge 3/12). En grille (pas flex + %) pour que les gouttières soient
   déduites avant répartition — un flex-basis en % s'additionnait aux
   column-gap et dépassait 100% du conteneur (ratio faussé/débordement). --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
/* --- Qualiopi : respiration à droite de la colonne texte avant la carte badge --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
}
/* --- Qualiopi : la carte badge occupe toute la hauteur de sa colonne, comme
   .certification__grid { align-items:stretch } de la maquette. Gutenberg pose
   "align-self:flex-start" via .are-vertically-aligned-top sur chaque colonne
   (contraint ici pour titre/texte) — neutralisé sur la 3e colonne seule. --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
  align-self: stretch;
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
  height: 100%;
}

/* --- Certification : traitement typo du h2 aligné sur la maquette. Le preset
   Gutenberg "xlarge" (partagé avec Pédagogie/Sur mesure/Catalogue) plafonne à
   4rem — la maquette monte jusqu'à 76px (clamp(49px,4.7vw,76px)) : agrandi ici
   en propre à cette section, sans toucher au preset global. !important requis
   car la règle cœur .has-xlarge-font-size est elle-même en !important. --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi h2.wp-block-heading {
  max-width: 11.5ch;
  font-size: clamp(3rem, 4.7vw, 4.75rem) !important;
  line-height: 0.98;
}

/* --- Qualiopi : carte badge entière cliquable (statut / image / légende),
   comme .certification__proof de la maquette — remplace l'image encadrée
   simple. Le texte de la légende reprend celui de l'ancien lien "Tout savoir…"
   (contenu conservé), le statut "Processus certifié" est le micro-label
   d'interface ajouté avec autorisation. --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 1.1rem;
  background: var(--wxw-forest);
  box-shadow: 20px 24px 0 var(--wxw-cream-warm);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof:hover {
  transform: translateY(-6px) !important;
}
.wxw-academy-proof__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  color: rgba(254, 243, 224, 0.6);
  font-size: 0.57rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wxw-academy-proof__status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wxw-sage);
  box-shadow: 0 0 0 4px rgba(135, 163, 125, 0.12);
}
.wxw-academy-proof__img {
  display: block;
  width: 100%;
  height: 155px;
  background: white;
  object-fit: contain;
}
.wxw-academy-proof__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(254, 243, 224, 0.6);
  font-size: 0.57rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wxw-academy-proof__foot b {
  color: var(--wxw-orange);
  font-size: 1rem;
}

/* --- Qualiopi : filet dégradé de fin de section, comme .certification::after --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi {
  position: relative;
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  height: 14px;
  background: var(--wxw-orange);
}

/* --- Certification responsive : tablette — h2 passe en demi-largeur gauche,
   texte + carte badge partagent l'autre moitié et s'empilent (texte puis
   carte), comme .certification h2/__copy/__proof en grid-column 1/7 et 7/13
   à 1050px dans la maquette. --- */
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
    grid-template-columns: 1fr 1fr;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 3rem;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
    min-height: 280px;
  }
}

/* --- Certification responsive : mobile — empilement complet (titre, texte,
   carte badge), comme .certification__grid { display:block } à 760px dans la
   maquette. Titre réduit (max-width 11ch, échelle mobile de la maquette). --- */
@media (max-width: 768px) {
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
    display: block;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi h2.wp-block-heading {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.6rem) !important;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
    margin-top: 2.5rem;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
    margin-top: 3rem;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
    min-height: 260px;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof__status {
    padding-bottom: 1rem;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof__foot {
    padding-top: 1rem;
  }
}

/* --- Verbatim : citation nue, asymétrique (pas centrée comme Nos expertises) --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--verbatim > blockquote.wp-block-quote {
  grid-column: 2 / 10;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--verbatim > blockquote.wp-block-quote p {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--wxw-cream);
  margin: 0;
  max-width: none;
}

/* --- Sur-mesure : titre et copy côte à côte sur une seule rangée, comme
   .bespoke__grid de la maquette (titre 1/6 ~5/11, copy 7/13 ~6/11). --- */
.wxw-academy-bespoke-cols.wp-block-columns {
  display: grid;
  align-items: start;
  width: 100%;
  grid-template-columns: 5fr 6fr;
  column-gap: clamp(1rem, 2vw, 2rem);
}
.wxw-academy-bespoke-cols h2.wp-block-heading {
  max-width: 12ch;
}

/* --- Sur-mesure : colonne "copy" unique (filet vertical de séparation),
   empilant lead → filet → paragraphe → tag, comme .bespoke__copy. --- */
.wxw-academy-bespoke-copy {
  padding-left: clamp(2rem, 4vw, 4rem);
  border-left: 1px solid var(--c-line-invert);
}

/* --- Sur-mesure : lead resserré et affirmé, comme .bespoke__lead. --- */
.wxw-academy-statement {
  font-family: var(--font-title);
  font-style: italic;
  max-width: 19ch;
  font-size: clamp(1.65rem, 2.15vw, 2.3rem);
  line-height: 1.12;
  color: var(--wxw-cream);
  margin: 0;
}

/* --- Sur-mesure : filet horizontal entre le lead et le paragraphe, comme
   .bespoke__rule. --- */
.wxw-academy-bespoke-rule,
.wxw-academy-bespoke-copy__body::before {
  width: 100%;
  height: 1px;
  margin-block: clamp(1.5rem, 2.5vw, 2.2rem);
  background: var(--c-line-invert);
}

.wxw-academy-bespoke-copy__body::before {
  content: "";
  display: block;
}

/* --- Sur-mesure : paragraphe secondaire atténué, comme .bespoke__copy > p. --- */
.wxw-academy-bespoke-copy > p:not(.wxw-academy-statement, .wxw-academy-bespoke-tag) {
  color: rgba(254, 243, 224, 0.68);
  margin: 0;
}

/* --- Sur-mesure : tag pilule, comme .bespoke__tag (micro-label ajouté avec
   autorisation). --- */
.wxw-academy-bespoke-tag {
  display: inline-flex;
  margin-top: 1.8rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(241, 129, 25, 0.8);
  border-radius: 99px;
  color: rgba(254, 243, 224, 0.75);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* --- Sur-mesure responsive : mobile — empilement complet (titre puis copy),
   comme .bespoke__grid/.bespoke__title h2/.bespoke__copy à 760px dans la
   maquette. Pas de palier tablette dédié : la grille fluide (5fr/6fr, mesures
   en ch) tient sans ajustement jusqu'à 768px. --- */
@media (max-width: 768px) {
  .wxw-academy-bespoke-cols.wp-block-columns {
    display: block;
  }
  .wxw-academy-bespoke-cols h2.wp-block-heading {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.6rem);
  }
  .wxw-academy-bespoke-copy {
    /* !important requis sur margin-top : même collision que .wxw-academy-head-chapo
       (Pédagogie) avec la règle native WordPress .is-layout-flex > :is(*, div)
       { margin:0 }, de spécificité supérieure à cette seule classe. */
    margin-top: 2.5rem !important;
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid var(--c-line-invert);
    border-left: 0;
  }
}

/* --- Catalogue : intro de section (titre + chapô), comme .catalogue__intro. --- */
.wxw-academy-catalogue-intro.wp-block-columns {
  display: grid;
  align-items: end;
  width: 100%;
  grid-template-columns: 7fr 4fr;
  column-gap: clamp(1rem, 2vw, 2rem);
  /* max-width/margin en !important : neutralise la règle native WordPress
     .is-layout-constrained > :where(:not(.alignfull)) qui plafonne/centre
     tout enfant direct sans classe alignfull (cf. Pédagogie). */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.wxw-academy-catalogue-intro > .wp-block-column:last-child {
  align-self: end;
}
/* Le chapô réutilise désormais .wxw-academy-head-chapo (même classe que
   Pédagogie, ajoutée à la colonne) pour la taille/couleur de texte — l'ancien
   style propre à Catalogue (plus petit, couleur eyebrow) est retiré. Air à
   droite propre à Catalogue : absent de la maquette, ajout demandé. */
.wxw-academy-catalogue-intro .wxw-academy-head-chapo {
  padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* --- Catalogue : carte "course" flottante, strictement comme .course de la
   maquette (fond opaque clair + ombre portée, pas de bordure ni de fond
   translucide). --- */
.wxw-academy-course {
  background: #fffaf0;
  box-shadow: 0 40px 100px rgba(41, 44, 34, 0.12);
  /* même neutralisation que .wxw-academy-catalogue-intro ci-dessus (wp:html,
     enfant direct de la grille sans classe alignfull). */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Catalogue : bande sombre titre + durée, comme .course__hero. Fond
   #14271f = "--forest" de la maquette (pas --wxw-dark, une teinte générique
   différente) — même vert que la carte méthodes de Pédagogie. Pas de filet
   décoratif en bas à droite : absent de .course__hero dans la maquette.
   Le hero lui-même ne porte plus de padding : chaque zone interne (hero-head,
   duration) a le sien, comme la maquette (.course__hero>div:first-child et
   .course__duration ont chacun leur propre padding, pas le hero global) —
   sinon le padding du hero contraignait .course__duration à ne pas remplir
   tout l'espace qui lui est dédié. */
.wxw-academy-course__hero {
  display: grid;
  grid-template-columns: 8fr 3fr;
  column-gap: clamp(1rem, 2vw, 2rem);
  background: #14271f;
  color: var(--wxw-cream);
}
/* --- Catalogue : "Programme de formation" intégré au hero, au-dessus du
   titre, comme .course__hero>div:first-child de la maquette (l'ancien bandeau
   .wxw-academy-course__topline séparé a été retiré). --- */
.wxw-academy-course__hero-head {
  padding: 2.625rem 3.25rem;
}
.wxw-academy-course__hero-eyebrow {
  display: block;
  color: var(--wxw-orange);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wxw-academy-course__title {
  max-width: 20ch;
  margin-top: 2.125rem;
  color: var(--wxw-cream);
  font-size: clamp(2.1rem, 3vw, 3.2rem);
}
/* Sur demande : pas de filet à gauche du bloc durée (la maquette en a un,
   .course__duration{border-left:1px solid var(--line-light)}, mais l'écart
   est volontaire ici). Padding sur les 4 côtés + léger surlignage de fond,
   comme .course__duration{padding:38px;background:rgba(255,255,255,.035)} —
   remplit maintenant toute la hauteur/largeur de sa cellule de grille. */
.wxw-academy-course__duration {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.375rem;
  background: rgba(255, 255, 255, 0.035);
}
.wxw-academy-course__duration span {
  color: rgba(254, 243, 224, 0.55);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wxw-academy-course__duration strong {
  margin-top: 0.7rem;
  color: var(--wxw-cream);
  font-family: var(--font-title);
  font-size: clamp(3rem, 5vw, 5.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.9;
}

/* --- Catalogue : corps à 2 colonnes (facts / objectifs), comme .course__body. --- */
.wxw-academy-course__body {
  display: grid;
  grid-template-columns: 7fr 5fr;
}
/* Padding doublé par rapport à la maquette (48px 52px → 96px 104px), sur
   demande explicite — écart volontaire, pas un oubli. Fluide (clamp) pour
   que ce padding se réduise sur les écrans moyens plutôt que de rester à
   96px/104px jusqu'au palier mobile à 768px. Pas de filet vertical séparant
   facts/objectifs : absent de .course dl dans la maquette. */
.wxw-academy-course__facts {
  padding: clamp(3rem, 5vw, 6rem) clamp(2rem, 6vw, 6.5rem);
}
.wxw-academy-course__facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding-block: 1.4rem;
}
/* Filet uniquement entre les lignes, comme .course dl>div+div — pas
   d'encadrement haut/bas du bloc entier. */
.wxw-academy-course__facts > div + div {
  border-top: 1px solid var(--c-line);
}
.wxw-academy-course__facts dt,
.wxw-academy-course__objective-label {
  color: var(--c-eyebrow);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wxw-academy-course__facts dd {
  color: #54564e;
  font-size: 0.94rem;
  line-height: 1.72;
}
/* Fond beige distinct, comme .objectives{background:#ebdfc7} — absent avant
   cette correction (zone transparente, ne se détachait pas de la carte). */
.wxw-academy-course__objectives {
  padding: 3.25rem;
  background: #ebdfc7;
}
.wxw-academy-course__objectives > p {
  margin-top: 1.75rem;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2.3vw, 2.25rem);
  line-height: 1.15;
}
/* Puces natives colorées via ::marker, comme .objectives li::marker — pas de
   filets entre les lignes (absents de la maquette). Le glyphe "×" existant
   dans le contenu est masqué (contenu conservé, non affiché) pour retrouver
   le rendu à puce simple de la maquette. */
.wxw-academy-course__objectives ul {
  margin-top: 2rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.wxw-academy-course__objectives li {
  margin-bottom: 0.81rem;
  color: #55574e;
  font-size: 0.9rem;
  line-height: 1.6;
}
.wxw-academy-course__objectives li:last-child {
  margin-bottom: 0;
}
.wxw-academy-course__objectives li::marker {
  color: var(--wxw-orange);
}
.wxw-academy-course__objective-x {
  display: none;
}

/* --- Catalogue : pied de carte (légende + bouton), comme .course__footer. --- */
.wxw-academy-course__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.375rem 1.875rem;
  border-top: 1px solid var(--c-line);
}
.wxw-academy-course__footer > span {
  color: var(--c-eyebrow);
  font-size: 0.70rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* --- Catalogue responsive : mobile — empilement complet (intro, carte
   "course" avec ses 4 zones), comme .catalogue__intro/.course__hero/
   .course__body/.course__footer/.button à 760px dans la maquette. Le titre
   du programme (.wxw-academy-course__title) n'est pas réajusté ici : son
   propre clamp desktop (réduit sur demande) descend déjà proportionnellement
   à l'échelle mobile sans dépassement. Pas de palier tablette dédié : les
   grilles fluides tiennent sans ajustement jusqu'à 768px. --- */
@media (max-width: 768px) {
  .wxw-academy-catalogue-intro.wp-block-columns {
    display: block;
  }
  .wxw-academy-catalogue-intro h2.wp-block-heading {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.6rem);
  }
  .wxw-academy-catalogue-intro p {
    margin-top: 2rem;
  }
  .wxw-academy-course__hero {
    display: block;
  }
  .wxw-academy-course__hero-head {
    padding: 2rem 1.4rem;
  }
  .wxw-academy-course__duration {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-line-invert);
  }
  .wxw-academy-course__duration strong {
    font-size: 4.4rem;
  }
  .wxw-academy-course__body {
    display: block;
  }
  .wxw-academy-course__facts,
  .wxw-academy-course__objectives {
    padding: 2rem 1.35rem;
  }
  .wxw-academy-course__facts > div {
    display: block;
  }
  .wxw-academy-course__facts dd {
    margin-top: 0.7rem;
  }
  /* Sépare le bloc objectifs du bloc facts empilés. */
  .wxw-academy-course__objectives {
    border-top: 1px solid var(--c-line);
  }
  .wxw-academy-course__footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* --- Catalogue : bouton de téléchargement en pilule contour (pas le lien
   fléché standard des autres CTA de section) — réactive le style is-style-outline
   déjà défini pour .wp-element-button, que la règle générique "lien fléché"
   (plus haut dans ce fichier, sélecteur .wp-block-buttons .wp-element-button)
   écrase sinon via !important. Spécificité augmentée pour regagner la main. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button {
  position: static !important;
  background: transparent !important;
  color: var(--wxw-black) !important;
  border: 1px solid var(--wxw-black) !important;
  border-radius: 999px !important;
  height: 46px !important;
  min-height: 0 !important;
  padding: 0 26px !important;
  overflow: hidden !important;
  gap: 10px !important;
  font-size: var(--fs-label) !important;
  font-weight: 400 !important;
  letter-spacing: var(--ls-label) !important;
  text-transform: uppercase !important;
}
/* --- Catalogue : flèche du bouton de téléchargement, comme .button span de
   la maquette (couleur orange, légère avance au survol). --- */
.wxw-academy-course__footer .wp-element-button span {
  color: var(--wxw-orange);
  font-size: 0.9rem;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-academy-course__footer .wp-element-button:hover span {
  transform: translateX(4px);
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::before,
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::after,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::before,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 768px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section--catalogue .wp-block-buttons .wp-block-button.is-style-outline .wp-element-button {
    width: 100%;
  }
}

/* --- Pratique : fond sauge-gris distinct (#dfe3d5), comme .practical de la
   maquette — rupture volontaire avec le crème du reste de la page pour
   marquer la fin du contenu avant le pied de page. Remplace has-cream-
   background-color pour cette section uniquement. --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique.has-cream-background-color {
  /* !important requis : la règle cœur .has-cream-background-color est
     elle-même en !important. */
  background-color: #dfe3d5 !important;
}
/* --- Pratique : "Informations pratiques" dans un cartouche sombre, comme sur
   la maquette (numéro "05" + ligne inchangés, seul le libellé est encadré). --- */
.wxw-academy-section--pratique .wxw-academy-eyebrow__label {
  padding: 0.4rem 0.75rem;
  background: #14271f;
  color: var(--wxw-cream);
}
/* --- Pratique : carte claire posée sur ce fond, comme .practical__grid{
   background:var(--paper)} — les deux volets ne sont plus nus sur le fond
   de section, ils partagent une même carte "paper" divisée par un filet. --- */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wp-block-columns {
  background: #fffaf0;
}
/* Deux volets distincts sur desktop, simple filet de séparation (pas de fond
   propre par carte), comme .practical article+article. */
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item + .wxw-academy-pratique__item {
  border-left: 1px solid var(--c-line);
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item {
  min-height: 320px;
  padding: 3.5rem 3.75rem;
}
.wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item h2.wp-block-heading {
  font-size: 42px !important;
  margin-bottom: 1.75rem;
}
/* --- Pratique : paragraphes atténués, comme .practical p de la maquette. --- */
.wxw-academy-section--pratique .wxw-academy-pratique__item p {
  max-width: 52ch;
  margin-top: 1.5rem;
  color: #585a51;
}

/* --- Pratique : lien mailto souligné orange en petite légende majuscule,
   comme .practical article > a. --- */
.wxw-academy-pratique-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--wxw-orange);
  color: inherit;
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Pratique : tag sombre plein (pas une pilule claire à bordure), comme
   .practical b. --- */
.wxw-academy-pratique-notice {
  display: inline-flex;
  margin-top: 1.125rem;
  padding: 0.5rem 0.75rem;
  background: #14271f;
  color: var(--wxw-cream);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wxw-academy-section--pratique .wxw-academy-pratique__item p.wxw-academy-pratique-notice {
  max-width: none;
  margin-top: 1.125rem;
  color: var(--wxw-cream);
}

/* --- Pratique responsive : mobile — empilement complet des deux volets,
   comme .practical__grid/article à 760px dans la maquette. Pas de palier
   tablette dédié : la grille tient sans ajustement jusqu'à 768px. --- */
@media (max-width: 768px) {
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wp-block-columns {
    display: block;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item {
    min-height: auto;
    padding: 3rem 1.25rem;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item + .wxw-academy-pratique__item {
    border-top: 1px solid var(--c-line);
    border-left: 0;
  }
}

/* --- Bandeau d'en-tête numéroté (01 CERTIFICATION, 02 PÉDAGOGIE…), un par
   section. Remplace la numérotation monumentale en sous-impression. Les
   sections Academy PASSENT bien par la grille magazine 12 colonnes (rendu :
   .is-layout-constrained est ajouté au render, invisible dans le post_content
   brut) — donc même contrainte de largeur (--wxw-grid-max, 1320px) que
   L'agence / Nos expertises. Le bandeau est calé en grid-row:1 explicite
   (2/14, pleine largeur "wide" de la grille) ; .wxw-section-head et
   .wxw-section-body (sur-mesure, catalogue), normalement en row 1 eux aussi,
   sont repoussés en row 2 pour laisser le bandeau au-dessus. Scopé à
   .wxw-academy-section : aucun effet sur les autres pages N-1. */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-academy-eyebrow,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-academy-eyebrow {
  grid-column: 2 / 14;
  grid-row: 1;
}
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
  grid-row: 2;
}
@media (max-width: 860px) {
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-academy-eyebrow,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-academy-eyebrow {
    grid-column: 2 / 3;   /* le template mobile n'a que 3 pistes (edge/1fr/edge) : 2/14 crée des colonnes implicites fantômes qui faussent la largeur réelle de la piste visible */
    grid-row: auto;
  }
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-head,
  .wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body,
  .is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section:not(.wxw-hero-v2):not(.wxw-page-hero) > .wxw-section-body {
    grid-row: auto;
  }
}
/* Traitement unique du bandeau de label, commun aux 5 sections numérotées
   (conforme à .section-label de la maquette) — consolidé ici au lieu d'être
   répété par section, toutes les valeurs étaient déjà identiques. */
.wxw-academy-section .wxw-academy-eyebrow {
  display: flex;
  width: 100%;   /* la grille place l'item sur 2/14, mais un flex-item ne s'étire pas tout seul sur son axe de grille : sans ce width, il ne prend que la largeur de son contenu (chiffre + label). */
  align-items: center;
  gap: 0.85rem;
  margin: 0;   /* la grille magazine ajoute déjà son row-gap avant le contenu suivant : une marge ici s'additionnerait et créerait un vide excessif */
  padding-bottom: 0;
  border-bottom: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--c-eyebrow);
}
.wxw-academy-eyebrow__num {
  color: var(--wxw-orange);
}
.wxw-academy-eyebrow__sep {
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  font-size: 0;
}
.wxw-academy-section.has-dark-background-color .wxw-academy-eyebrow,
.wxw-academy-section.has-forest-background-color .wxw-academy-eyebrow {
  color: var(--c-eyebrow-invert);
}
/* Native eyebrow: the group draws the rule as its own flex item, ordered
   between number and label, so it shrinks exactly like the former __sep span.
   Scoped to .wp-block-group so legacy HTML eyebrows get no second rule. */
.wp-block-group.wxw-academy-eyebrow > p.wxw-academy-eyebrow__num,
.wp-block-group.wxw-academy-eyebrow > p.wxw-academy-eyebrow__label {
  max-width: none;
  margin: 0;
}
.wp-block-group.wxw-academy-eyebrow > p.wxw-academy-eyebrow__num {
  order: 1;
}
.wp-block-group.wxw-academy-eyebrow::before {
  content: "";
  order: 2;
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.wp-block-group.wxw-academy-eyebrow > p.wxw-academy-eyebrow__label {
  order: 3;
}

/* --- Pédagogie : frise à 3 points (même principe que .wxw-frise de l'accueil,
   qui en a 5). Sans limite de largeur, sur 1320px elle serait trop étirée pour
   seulement 3 items → plafonnée et centrée, .wxw-frise de l'accueil (5 items,
   pleine largeur) n'est pas concernée (scopé à .wxw-academy-section). --- */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-frise.wxw-frise--compact,
.is-root-container > .wp-block-group.alignfull.is-layout-constrained.wxw-academy-section > .wxw-frise.wxw-frise--compact {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Pédagogie : bloc titre+chapô, comme .pedagogy__head de la maquette
   (h2 à gauche ~6/12, chapô à droite ~5/12 avec filet vertical). Le
   width:100% corrige le même bug de stretch que sur les autres wp:columns
   de cette page (cf. .wxw-academy-eyebrow) : un wp-block-columns display:flex
   ne s'étire pas seul sur sa piste de grille magazine sans cette déclaration. --- */
.wxw-academy-head-cols.wp-block-columns {
  display: grid;
  align-items: end;
  width: 100%;
  grid-template-columns: 6fr 5fr;
  column-gap: clamp(1rem, 2vw, 2rem);
  /* Réduit l'écart avec le bandeau "02 | Pédagogie" au-dessus : le row-gap de
     la grille magazine (clamp(2.25rem,4.5vw,4rem)) entre les deux rangées est
     ramené à un espacement plus resserré (clamp(1.25rem,2.5vw,2rem)). */
  margin-top: calc(clamp(1.25rem, 2.5vw, 2rem) - clamp(2.25rem, 4.5vw, 4rem));
}
.wxw-academy-head-cols h2.wp-block-heading {
  max-width: 11ch;
}

.wxw-academy-head-chapo p {
  color: #5b5c54;
}

/* --- Pédagogie : intitulé au-dessus de la rangée de principes, comme
   .principles-head de la maquette. --- */
.wxw-academy-principles-intro {
  display: flex;
  align-items: center;
  text-align: left;
  /* max-width/margin en !important : la règle native WordPress
     .is-layout-constrained > :where(:not(.alignfull)) impose max-width:760px
     + margin-left/right:auto !important à tout enfant direct sans classe
     alignfull — d'où le centrage et le plafonnement observés. */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Resserre l'empan par rapport au 2/14 (pleine largeur "wide", hérité par
     défaut comme le H2/chapô/bandeau) : gouttière de rythme pour que la
     rangée de cartes ne soit pas un bloc monolithique aligné sur les mêmes
     bords que le texte au-dessus. Même empan que .wxw-academy-principles
     ci-dessous pour qu'ils restent alignés entre eux. */
  grid-column: 3 / 13 !important;
  margin-top: clamp(1.25rem, 2vw, 1.75rem) !important;
  padding-bottom: 1rem;
  /* Air gauche/droite = --wxw-edge, le repère d'inset standard du site (déjà
     utilisé par exemple pour le filet de fin de section) : le texte respire,
     le filet du dessous garde sa pleine largeur (le padding ne le réduit pas). */
  padding-left: var(--wxw-edge, clamp(1.25rem, 4vw, 3rem));
  padding-right: var(--wxw-edge, clamp(1.25rem, 4vw, 3rem));
  /* border-bottom: 1px solid var(--c-line); */
  color: var(--c-eyebrow);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Pédagogie : rangée pleine largeur de 3 principes, strictement comme
   .principles de la maquette : carte flottante (fond légèrement plus clair
   que le crème de la section + ombre portée douce, pas un encadré à bordures),
   filet vertical uniquement entre les cartes (pas de bordure de fermeture à
   gauche/droite), barre orange 64×7px en haut à gauche de chaque carte,
   numéro en petite légende grise (pas orange/italique). Marge négative =
   annule le row-gap de la grille magazine entre l'intro et cette rangée
   (comme la maquette où .principles suit .principles-head sans marge). --- */
.wxw-academy-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* même correction que .wxw-academy-principles-intro ci-dessus : neutralise
     le max-width/margin auto imposés par la règle native WordPress
     .is-layout-constrained > :where(:not(.alignfull)). */
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* même gouttière que .wxw-academy-principles-intro juste au-dessus. */
  grid-column: 3 / 13 !important;
  margin-top: calc(-1 * clamp(2.25rem, 4.5vw, 4rem));
  /* #fffaf0 : légèrement plus clair que le crème de section (#FEF3E0), même
     principe que --paper (#fbf3e4) vs --cream (#f7ecd6) dans la maquette —
     aucun token équivalent n'existe dans le thème pour cet écart subtil. */
  background: #fffaf0;
  box-shadow: 0 28px 80px rgba(34, 37, 29, 0.09);
}
.wxw-academy-principles__item {
  position: relative;
  min-height: 355px;
  padding: 45px 38px;
}
.wxw-academy-principles__item + .wxw-academy-principles__item {
  border-left: 1px solid var(--c-line);
}
.wxw-academy-principles__item::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 0;
  width: 64px;
  height: 7px;
  background: var(--wxw-orange);
}
.wxw-academy-principles__num {
  display: block;
  color: var(--c-eyebrow);
  font-size: 0.70rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
/* font-size fluide (au lieu de 42px fixe comme la maquette) : sur écrans
   moyens, les 3 cartes restent côte à côte mais la colonne se resserre —
   "Transformation" débordait à taille fixe avant ce correctif. */
.wxw-academy-principles__title {
  margin: 70px 0 20px;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  overflow-wrap: break-word;
}
.wxw-academy-principles__desc {
  color: #65675d;
  font-size: 14px;
  line-height: 1.75;
}

.wp-block-group.wxw-academy-principles > .wxw-academy-principles__item {
  margin-block-start: 0;
}

.wp-block-group.wxw-academy-principles__item > .wxw-academy-principles__desc {
  margin-block-start: 0;
}

/* --- Pédagogie : encadré "méthodes & outils", strictement comme .methods de
   la maquette (boîte sombre forest en 2 zones : panneau latéral gauche
   forest-2 aligné en bas + liste à droite sur 3 lignes, filets clairs).
   Le head et les items sont des enfants directs (pas de wrapper .methods__list
   dans le contenu) : grid-template-rows est déclaré en dur pour 3 lignes
   (repeat(3,auto)) pour que le head puisse réellement span les 3 — un simple
   "grid-row:1/-1" sans grid-template-rows explicite ne couvre que la 1re ligne
   implicite et laissait "Outil DISC®" retomber dans la colonne 1. Pas de
   pastille orange devant les titres : absente de .methods__list article dans
   la maquette (contrairement à .proof__top de Certification) → masquée ici. --- */
.wxw-academy-methods {
  /* Le "7%" latéral d'origine (comme .methods{margin:68px 7% 0} en maquette)
     était sans effet : la règle native WordPress margin-left/right:auto
     !important sur les enfants directs de .is-layout-constrained l'annulait,
     et par défaut cet enfant hérite grid-column:2/14 (pleine largeur "wide",
     comme le H2/chapô au-dessus) → aucune gouttière visible. Resserré ici via
     grid-column, même empan que .wxw-academy-principles pour la cohérence. */
  grid-column: 3 / 13 !important;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 4fr 7fr;
  grid-template-rows: repeat(3, auto);
  /* #14271f : "--forest" de la maquette, distinct du token thème --wxw-forest
     (#233027) qui, lui, est presque identique au #1d3026 du panneau ci-dessous
     — d'où l'absence de contraste visible avant cette correction. */
  background: #14271f;
  color: var(--wxw-cream);
  box-shadow: 0 30px 70px rgba(28, 33, 26, 0.16);
}
.wxw-academy-methods__head {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 58px 56px;
  background: #1d3026;
  color: var(--wxw-cream);
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 39px;
  line-height: 1.02;
  text-transform: none;
  letter-spacing: normal;
}
/* Tampon décoratif (macaron lionne), coin haut-gauche, sous le texte. */
.wxw-academy-methods__head::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 34px;
  width: 120px;
  height: 120px;
  background-image: url("../img/wxw-macaron-lionne.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.2;
  transform: rotate(-20deg);
  pointer-events: none;
}
.wxw-academy-methods__item {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns: 3fr 5fr;
  gap: 30px;
  padding: 30px 52px;
}
/* Filet aligné avec le texte (inset par le padding gauche/droite de l'item),
   pas un border-top pleine largeur qui courrait jusqu'aux bords de la boîte. */
.wxw-academy-methods__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 52px;
  right: 52px;
  height: 1px;
  background: var(--c-line-invert);
}
.wxw-academy-methods__head + .wxw-academy-methods__item {
  padding-top: 55px;
}
.wxw-academy-methods__head + .wxw-academy-methods__item::before {
  content: none;
}
.wxw-academy-methods__item:last-child {
  padding-bottom: 55px;
}
.wxw-academy-methods__label {
  display: block;
}
.wxw-academy-methods__label i {
  display: none;
}
.wxw-academy-methods__label h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: var(--wxw-cream);
}
.wxw-academy-methods__item > p {
  margin: 0;
  color: rgba(254, 243, 224, 0.67);
  font-size: 14px;
  line-height: 1.65;
}

.wp-block-group.wxw-academy-methods > .wxw-academy-methods__item {
  margin-block-start: 0;
}

/* --- Pédagogie responsive : tablette — la gouttière (grid-column:3/13) est
   annulée, comme .methods{margin-inline:0} à 900px dans la maquette : repasse
   en pleine largeur "wide" (2/14) faute de place pour respirer. --- */
@media (max-width: 900px) {
  .wxw-academy-methods,
  .wxw-academy-principles-intro,
  .wxw-academy-principles {
    grid-column: wide !important;
  }
}

/* --- Pédagogie responsive : mobile — empilement complet (titre, chapô,
   principes, méthodes), comme les règles .pedagogy__head/.principles/.methods
   à 760px dans la maquette. --- */
@media (max-width: 768px) {
  .wxw-academy-head-cols.wp-block-columns {
    display: block;
  }
  .wxw-academy-head-chapo {
    /* !important requis : la règle native WordPress .is-layout-flex > :is(*, div)
       { margin:0 } a une spécificité (0,1,1) supérieure à .wxw-academy-head-chapo
       seule (0,1,0) et gagnait sans ce renfort. */
    margin-top: 3.5rem !important;
    padding-left: 1.2rem;
  }
  .wxw-academy-principles-intro {
    align-items: flex-start;
  }
  .wxw-academy-principles {
    display: block;
  }
  .wxw-academy-principles__item {
    min-height: 280px;
    padding: 2.5rem 1.25rem;
  }
  .wxw-academy-principles__item + .wxw-academy-principles__item {
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
  .wxw-academy-principles__title {
    margin-top: 1.5rem;
  }
  .wxw-academy-methods {
    display: block;
  }
  .wxw-academy-methods__head {
    padding-left: 30px;
    padding-right: 30px;
  }
  .wxw-academy-methods__item {
    display: block;
    padding: 20px 30px;
  }
  .wxw-academy-methods__item::before {
    left: 30px;
    right: 30px;
  }
  .wxw-academy-methods__head + .wxw-academy-methods__item {
    padding-top: 20px;
  }
  .wxw-academy-methods__item:last-child {
    padding-bottom: 20px;
  }
  .wxw-academy-methods__item > p {
    margin-top: 1rem;
  }
}

/* ========================= [fin CLAUDE — ACADEMY DOSSIER] ================== */

/* =============================================================================
   [CLAUDE — ACADEMY DOSSIER — PARITÉ ÉDITEUR] Miroir des règles ci-dessus sous
   .is-root-container (voir [[editeur-parite-gutenberg]]). Même portée, mêmes
   classes, aucune règle supplémentaire.
   ============================================================================= */
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
  padding-right: clamp(1rem, 2.5vw, 2.5rem);
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
  align-self: stretch;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
  height: 100%;
}
/* Note : le bandeau .wxw-academy-eyebrow (label) est un sélecteur de classe
   simple, non préfixé par .wxw-page .page-content — sa correction plus haut
   dans le fichier s'applique déjà identiquement dans l'éditeur, pas de miroir
   nécessaire ici (voir [[editeur-parite-gutenberg]]). */
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi h2.wp-block-heading {
  max-width: 11.5ch;
  font-size: clamp(3rem, 4.7vw, 4.75rem) !important;
  line-height: 0.98;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 1.1rem;
  background: var(--wxw-forest);
  box-shadow: 20px 24px 0 var(--wxw-cream-warm);
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi {
  position: relative;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  height: 14px;
  background: var(--wxw-orange);
}
@media (max-width: 860px) {
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
    grid-template-columns: 1fr 1fr;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 3rem;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
    min-height: 280px;
  }
}
@media (max-width: 768px) {
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns {
    display: block;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi h2.wp-block-heading {
    max-width: 11ch;
    font-size: clamp(3rem, 13vw, 4.6rem) !important;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(2) {
    margin-top: 2.5rem;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wp-block-columns > .wp-block-column:nth-child(3) {
    margin-top: 3rem;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof {
    min-height: 260px;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof__status {
    padding-bottom: 1rem;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--qualiopi .wxw-academy-proof__foot {
    padding-top: 1rem;
  }
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--verbatim > blockquote.wp-block-quote {
  grid-column: 2 / 10;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--verbatim > blockquote.wp-block-quote p {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--wxw-cream);
  margin: 0;
  max-width: none;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique.has-cream-background-color {
  /* !important requis : la règle cœur .has-cream-background-color est
     elle-même en !important. */
  background-color: #dfe3d5 !important;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wp-block-columns {
  background: #fffaf0;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item + .wxw-academy-pratique__item {
  border-left: 1px solid var(--c-line);
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item {
  min-height: 320px;
  padding: 3.5rem 3.75rem;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item h2.wp-block-heading {
  font-size: 42px !important;
  margin-bottom: 1.75rem;
}
.is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique {
  border-top: 1px solid var(--c-line);
}
@media (max-width: 768px) {
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wp-block-columns {
    display: block;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item {
    min-height: auto;
    padding: 3rem 1.25rem;
  }
  .is-root-container > .wp-block-group.alignfull.wxw-academy-section--pratique .wxw-academy-pratique__item + .wxw-academy-pratique__item {
    border-top: 1px solid var(--c-line);
    border-left: 0;
  }
}
/* ================ [fin CLAUDE — ACADEMY DOSSIER — PARITÉ ÉDITEUR] ========== */

/* [CLAUDE — EXPERTISE N2] Page « Communication, influence & relations
   publics » (id 23) — étape 01, Hero uniquement. Racine unique
   .wxw-expertise-n2 ; toutes les règles ci-dessous sont scopées sous elle.
   Réutilise --wxw-dark / --wxw-cream / --wxw-orange, --font-title,
   --fs-label / --ls-label / --fs-lead et --header-h existants. */
.wxw-expertise-n2 .wxw-hero {
  position: relative;
  overflow: hidden;
  min-height: 87vh;
  display: flex;
  align-items: center;
  background: var(--wxw-dark);
  color: var(--wxw-cream);
  padding: calc(var(--header-h) + 108px) 11vw 90px;
}
.wxw-expertise-n2 .wxw-hero__back {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h) + 38px);
  left: 5vw;
  margin: 0;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: rgba(254, 243, 224, 0.58);
}
.wxw-expertise-n2 .wxw-hero__back a { color: inherit; text-decoration: none; }
.wxw-expertise-n2 .wxw-hero__back span { margin-right: 13px; color: var(--wxw-orange); }
.wxw-expertise-n2 .wxw-hero__inner {
  position: relative;
  z-index: 2;
  width: min(1080px, 82vw);
  transform: translateY(24px);
}
.wxw-expertise-n2 .wxw-hero__eyebrow {
  margin: 0 0 26px;
  color: var(--wxw-orange);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(20px, 2vw, 31px);
}
.wxw-expertise-n2 .wxw-hero__title {
  margin: 0;
  max-width: 1040px;
  font-family: var(--font-title);
  font-size: clamp(62px, 8.2vw, 133px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.84;
  text-wrap: balance;
  color: var(--wxw-cream);
}
.wxw-expertise-n2 .wxw-hero__lead {
  width: min(570px, 50vw);
  margin: 52px 0 0 43%;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(254, 243, 224, 0.75);
}
/* Decorative watermark drawn by the theme; :has() avoids a duplicate when an
   older revision still contains the HTML element. */
.wxw-expertise-n2 .wxw-hero__watermark,
.wxw-expertise-n2 .wxw-hero:not(:has(.wxw-hero__watermark))::before {
  position: absolute;
  z-index: 0;
  bottom: -0.19em;
  left: -0.03em;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(150px, 24vw, 400px);
  line-height: 0.7;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 243, 224, 0.055);
  letter-spacing: -0.06em;
}
.wxw-expertise-n2 .wxw-hero:not(:has(.wxw-hero__watermark))::before {
  content: "EXPERTISE" / "";
}
/* Placement/design alignés sur .wxw-academy-hero__discover (Nos expertises,
   L'agence, Academy) pour une cohérence graphique inter-pages du lien
   « Découvrir ». Seule la position reste propre au hero N-2 (absolute,
   watermark en fond plein écran plutôt qu'un hero en colonne + footbar). */
.wxw-expertise-n2 .wxw-hero__discover {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: 31px;
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wxw-expertise-n2 .wxw-hero__discover a {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--wxw-cream);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.wxw-expertise-n2 .wxw-hero__discover a:hover { opacity: 0.7; }
.wxw-expertise-n2 .wxw-hero__back a:focus-visible,
.wxw-expertise-n2 .wxw-hero__discover a:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }
.wxw-expertise-n2 .wxw-hero__discover span {
  color: var(--wxw-orange);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 900px) {
  .wxw-expertise-n2 .wxw-hero { min-height: 780px; padding: calc(var(--header-h) + 102px) 7vw 100px; }
  .wxw-expertise-n2 .wxw-hero__inner { width: 88vw; }
  .wxw-expertise-n2 .wxw-hero__title { font-size: clamp(56px, 11vw, 92px); }
  .wxw-expertise-n2 .wxw-hero__lead { width: min(620px, 78vw); margin-left: 12%; }
}
@media (max-width: 640px) {
  .wxw-expertise-n2 .wxw-hero { min-height: 720px; padding: calc(var(--header-h) + 97px) 24px 90px; }
  .wxw-expertise-n2 .wxw-hero__back { top: calc(var(--header-h) + 28px); left: 24px; }
  .wxw-expertise-n2 .wxw-hero__eyebrow { font-size: 20px; margin-bottom: 22px; }
  .wxw-expertise-n2 .wxw-hero__title { font-size: clamp(49px, 15vw, 72px); line-height: 0.88; }
  .wxw-expertise-n2 .wxw-hero__lead { width: auto; margin: 38px 0 0; font-size: var(--fs-lead); }
  .wxw-expertise-n2 .wxw-hero__discover { right: 24px; }
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 01 HERO] ==================== */

/* [CLAUDE — EXPERTISE N2] Étape 02, Notre conviction. Fond --wxw-cream-warm ;
   titre + manifeste en rgb(21,37,29) (déjà --color-text par défaut sur h2,
   repris explicitement sur le manifeste). Réutilise .wxw-kicker existant
   pour le label de section (avec le modificateur .has-orange-color déjà en
   place ailleurs sur le site). */
.wxw-expertise-n2 .wxw-conviction {
  position: relative;
  min-height: 78vh;
  padding: 95px 11vw 110px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-rows: auto 1fr;
  gap: 55px 8vw;
  overflow: hidden;
  background: var(--wxw-cream-warm);
  scroll-margin-top: var(--header-h);
}
.wxw-expertise-n2 .wxw-conviction > .wxw-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}
.wxw-expertise-n2 .wxw-conviction__title {
  position: relative;
  z-index: 1;
  align-self: center;
  margin: 0;
  font-size: clamp(60px, 7vw, 110px);
  line-height: 0.84;
  letter-spacing: -0.04em;
  color: rgb(21, 37, 29);
}
.wxw-expertise-n2 .wxw-conviction__title em { font-weight: 400; }
.wxw-expertise-n2 .wxw-conviction__manifesto {
  align-self: center;
  margin: 0;
  max-width: 690px;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: clamp(27px, 2.7vw, 42px);
  line-height: 1.13;
  color: rgb(21, 37, 29);
}

@media (max-width: 900px) {
  .wxw-expertise-n2 .wxw-conviction { grid-template-columns: 1fr; gap: 45px; }
  .wxw-expertise-n2 .wxw-conviction__title { align-self: end; }
  .wxw-expertise-n2 .wxw-conviction__manifesto { max-width: 730px; }
}
@media (max-width: 640px) {
  .wxw-expertise-n2 .wxw-conviction { display: block; padding: 78px 24px 88px; min-height: auto; }
  .wxw-expertise-n2 .wxw-conviction > .wxw-kicker { margin-bottom: 70px !important; }
  .wxw-expertise-n2 .wxw-conviction__title { font-size: 58px; margin-bottom: 42px; }
  .wxw-expertise-n2 .wxw-conviction__manifesto { font-size: 26px; line-height: 1.16; }
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 02 CONVICTION] ============== */

/* [CLAUDE — EXPERTISE N2] Étape 03, Notre approche. Fond --wxw-cream ; titre
   + textes en rgb(21,37,29) sans opacité. Composition éditoriale sticky
   (titre) / défilé (bandeaux 01-04), pas de cartes. Réutilise .wxw-kicker
   pour le label de section. */
.wxw-expertise-n2 .wxw-approach {
  position: relative;
  padding: 105px 11vw 135px;
  background: var(--wxw-cream);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 82px 9vw;
  overflow: hidden;
}
.wxw-expertise-n2 .wxw-approach > .wxw-kicker { grid-column: 1 / -1; }
.wxw-expertise-n2 .wxw-approach__heading {
  position: sticky;
  top: 128px;
  align-self: start;
}
.wxw-expertise-n2 .wxw-approach__title {
  position: relative;
  margin: 0;
  font-size: clamp(64px, 7.5vw, 118px);
  line-height: 0.83;
  letter-spacing: -0.045em;
  color: rgb(21, 37, 29);
}
.wxw-expertise-n2 .wxw-approach__title em { font-weight: 400; }
.wxw-expertise-n2 .wxw-approach__copy { border-top: 1px solid rgba(21, 37, 29, 0.18); }
.wxw-expertise-n2 .wxw-approach__paragraph {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  padding: 38px 0 48px;
  border-bottom: 1px solid rgba(21, 37, 29, 0.18);
}
.wxw-expertise-n2 .wxw-approach__number {
  margin: 0;
  padding-top: 0.25rem;
  color: var(--wxw-orange);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
}
.wxw-expertise-n2 .wxw-approach__paragraph p:not(.wxw-approach__number) {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgb(21, 37, 29);
}

@media (max-width: 900px) {
  .wxw-expertise-n2 .wxw-approach { grid-template-columns: 1fr; }
  .wxw-expertise-n2 .wxw-approach__heading { position: relative; top: auto; }
}
@media (max-width: 640px) {
  .wxw-expertise-n2 .wxw-approach { display: block; padding: 78px 24px 88px; }
  .wxw-expertise-n2 .wxw-approach > .wxw-kicker { margin-bottom: 72px; }
  .wxw-expertise-n2 .wxw-approach__heading { margin-bottom: 55px; }
  .wxw-expertise-n2 .wxw-approach__title { font-size: 61px; }
  .wxw-expertise-n2 .wxw-approach__paragraph { grid-template-columns: 34px 1fr; gap: 12px; padding: 30px 0; }
  .wxw-expertise-n2 .wxw-approach__paragraph p:not(.wxw-approach__number) { font-size: var(--fs-body); }
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 03 APPROCHE] ================ */

/* [CLAUDE — EXPERTISE N2] Étape 04, introduction de la méthodologie. Fond
   sombre --wxw-dark ; label + H2 + chapô uniquement. .wxw-methodology__body
   (sommaire + étapes) sera ajouté à l'étape suivante comme second enfant
   direct de .wxw-methodology, après .wxw-methodology__intro. Réutilise
   --c-line-invert / --c-eyebrow-invert existants pour les filets et le label
   sur fond sombre. */
.wxw-expertise-n2 .wxw-methodology { background: var(--wxw-dark); color: var(--wxw-cream); }
.wxw-expertise-n2 .wxw-methodology .wxw-kicker.has-orange-color { color: var(--c-eyebrow-invert) !important; }
.wxw-expertise-n2 .wxw-methodology__intro {
  position: relative;
  padding: 105px 11vw 100px;
  border-bottom: 1px solid var(--c-line-invert);
}
.wxw-expertise-n2 .wxw-methodology__intro-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  margin-top: 75px;
}
.wxw-expertise-n2 .wxw-methodology__title {
  margin: 0;
  font-size: clamp(60px, 7vw, 110px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--wxw-cream);
}
.wxw-expertise-n2 .wxw-methodology__title em { font-weight: 400; }
.wxw-expertise-n2 .wxw-methodology__lead {
  align-self: end;
  margin: 0;
  max-width: 610px;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(254, 243, 224, 0.72);
}

@media (max-width: 900px) {
  .wxw-expertise-n2 .wxw-methodology__intro-grid { grid-template-columns: 1fr; gap: 45px; }
}
@media (max-width: 640px) {
  .wxw-expertise-n2 .wxw-methodology__intro { padding: 80px 24px; }
  .wxw-expertise-n2 .wxw-methodology__intro-grid { margin-top: 65px; }
  .wxw-expertise-n2 .wxw-methodology__title { font-size: 56px; }
  .wxw-expertise-n2 .wxw-methodology__lead { font-size: var(--fs-lead); }
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 04 METHODOLOGIE INTRO] ====== */

/* [CLAUDE — EXPERTISE N2] Étape 05, sommaire sticky + 5 étapes. Hauteur des
   étapes pilotée par le contenu (pas de min-height) ; aucun filet sur les li
   (seul le "+" les précède) ; pas de filet après la dernière étape ;
   sommaire masqué < 640px (fallback mobile en flux simple, numéros
   conservés). Activation JS à 88px + 28vh, cf. bloc JS en fin de main.js. */
.wxw-expertise-n2 .wxw-methodology__body {
  display: grid;
  grid-template-columns: 34% 66%;
  max-width: 1440px;
  margin: auto;
  padding: 0 6vw;
}
.wxw-expertise-n2 .wxw-method-index {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  min-height: calc(100vh - var(--header-h));
  padding: 72px 5vw 70px 0;
  border-right: 1px solid var(--c-line-invert);
}
.wxw-expertise-n2 .wxw-method-index__label {
  margin: 0 0 35px;
  color: var(--wxw-orange);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label-wide);
}
.wxw-expertise-n2 .wxw-method-index a {
  display: grid;
  grid-template-columns: 33px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(254, 243, 224, 0.09);
  color: rgba(254, 243, 224, 0.48);
  text-decoration: none;
  transition: color 0.35s ease, padding-left 0.35s ease;
}
.wxw-expertise-n2 .wxw-method-index a span {
  font-size: var(--fs-label);
  color: var(--wxw-orange);
  letter-spacing: var(--ls-label);
}
.wxw-expertise-n2 .wxw-method-index a p {
  margin: 0;
  font-family: var(--font-title);
  font-size: 17px;
  line-height: 1.1;
}
.wxw-expertise-n2 .wxw-method-index a.is-active { color: var(--wxw-cream); padding-left: 10px; }
.wxw-expertise-n2 .wxw-method-index a:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }
.wxw-expertise-n2 .wxw-method-steps { padding-left: 7vw; }
.wxw-expertise-n2 .wxw-method-step {
  padding: 96px 3vw 104px 0;
  border-bottom: 1px solid var(--c-line-invert);
  scroll-margin-top: calc(var(--header-h) + 10vh);
}
.wxw-expertise-n2 .wxw-method-step:last-child { border-bottom: 0; }
.wxw-expertise-n2 .wxw-method-step__number {
  margin: 0 0 32px;
  color: var(--wxw-orange);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}
.wxw-expertise-n2 .wxw-method-step h3 {
  max-width: 780px;
  margin: 0 0 48px;
  font-size: clamp(40px, 4vw, 66px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--wxw-cream);
}
.wxw-expertise-n2 .wxw-method-step__body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(254, 243, 224, 0.72);
}
.wxw-expertise-n2 .wxw-method-step ul {
  max-width: 780px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wxw-expertise-n2 .wxw-method-step li {
  position: relative;
  padding: 10px 0 10px 30px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(254, 243, 224, 0.72);
  border: 0;
}
.wxw-expertise-n2 .wxw-method-step li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--wxw-orange);
}

@media (prefers-reduced-motion: reduce) {
  .wxw-expertise-n2 .wxw-method-index a { transition: none; }
}
@media (max-width: 900px) {
  .wxw-expertise-n2 .wxw-methodology__body { grid-template-columns: 28% 72%; }
  .wxw-expertise-n2 .wxw-method-index a p { font-size: 14px; }
}
@media (max-width: 640px) {
  .wxw-expertise-n2 .wxw-methodology__body { display: block; padding: 0 24px; }
  .wxw-expertise-n2 .wxw-method-index { display: none; }
  .wxw-expertise-n2 .wxw-method-steps { padding: 0; }
  .wxw-expertise-n2 .wxw-method-step { padding: 80px 0; }
  .wxw-expertise-n2 .wxw-method-step h3 { font-size: 42px; margin-bottom: 36px; }
  .wxw-expertise-n2 .wxw-method-step li { font-size: var(--fs-body); padding-left: 24px; }
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 05 SOMMAIRE + ÉTAPES] ======= */

/* [CLAUDE — EXPERTISE N2] Étape 06, À lire aussi — le groupe n'étant pas
   enfant direct de .page-content, il ne devient pas la grille qui insère
   .wxw-alr sur les autres pages (générique, cf. bloc GRILLE plus haut). On
   reproduit ici la même grille plutôt que de rapiécer chaque propriété une
   à une, pour un rendu identique en un seul bloc. */
.wxw-expertise-n2 .wp-block-group.alignfull.is-layout-constrained:has(.wxw-alr) {
  --wxw-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-grid-max: 1320px;
  --wxw-gap: clamp(1rem, 1.6vw, 1.75rem);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--wxw-edge), 1fr)
    [wide-start] repeat(12, minmax(0, calc((var(--wxw-grid-max) - 11 * var(--wxw-gap)) / 12)))
    [wide-end] minmax(var(--wxw-edge), 1fr) [full-end];
  column-gap: var(--wxw-gap);
  row-gap: clamp(2.25rem, 4.5vw, 4rem);
  padding-inline: 0;
}
.wxw-expertise-n2 .wp-block-group.alignfull.is-layout-constrained:has(.wxw-alr) > * {
  grid-column: 2 / 14;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* ================ [fin CLAUDE — EXPERTISE N2 — 06 À LIRE AUSSI] ============ */

/* =============================================================================
   [CLAUDE — BLOG « BILLETS & ÉDITOS »] Étape 03 — hero éditorial + filtres
   catégories uniquement (home.php). Toutes les règles ci-dessous sont scopées
   sous .wxw-blog-hero / .wxw-blog-filters. Réutilise --wxw-dark, --wxw-cream,
   --wxw-orange, --wxw-night-deep, --font-title, --font-body, --header-h,
   --wxw-edge, --wxw-grid-max déjà déclarés plus haut dans ce fichier.
   Composition (pourcentages, tailles) reprise à l'identique de la maquette
   validée (reference-source/globals.css) : seuls les tokens de couleur/police
   et les breakpoints (900/640 au lieu de 1024/720) sont adaptés au thème.
   ============================================================================= */
.wxw-blog-hero {
  position: relative;
  min-height: clamp(390px, 51vh, 490px);
  padding: calc(var(--header-h) + clamp(1.7rem, 3.2vw, 3rem)) var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)) clamp(2.2rem, 3.5vw, 3.4rem);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 79% 23%, rgba(43, 76, 58, 0.32), transparent 31%),
    linear-gradient(180deg, var(--wxw-night-deep) 0%, var(--wxw-dark) 100%);
  color: var(--wxw-cream);
}
.wxw-blog-hero__title {
  position: relative;
  z-index: 3;
  width: min(100%, var(--wxw-grid-max, 1320px));
  min-height: 225px;
  margin: 0 auto;
  font-family: var(--font-title);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.035em;
  color: var(--wxw-cream);
}
.wxw-blog-hero__title span { position: absolute; display: block; }
.wxw-blog-hero__billets {
  top: 1%;
  left: 8%;
  font-size: clamp(4.8rem, 8.2vw, 7.6rem);
}
.wxw-blog-hero__editos {
  left: 30.5%;
  right: auto;
  top: 39%;
  font-size: clamp(5rem, 8.8vw, 8.3rem);
  font-style: italic;
  font-weight: 300;
}
.wxw-blog-hero__amp {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 45%;
  font-family: var(--font-title);
  font-size: clamp(17rem, 34vw, 33rem);
  font-weight: 900;
  line-height: 0.68;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(254, 243, 224, 0.13);
  transform: translate(-50%, -50%) rotate(-3deg);
  pointer-events: none;
}
.wxw-blog-hero__intro {
  position: absolute;
  left: max(var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)), calc((100vw - var(--wxw-grid-max, 1320px)) / 2 + 7.4%));
  bottom: clamp(1.7rem, 2.5vw, 2.5rem);
  z-index: 4;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  font-style: italic;
  line-height: 1.38;
  color: rgba(254, 243, 224, 0.72);
}

.wxw-blog-filters {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  background: var(--wxw-dark);
}
.wxw-blog-filters__inner {
  width: min(calc(100% - 2 * var(--wxw-edge, clamp(1.25rem, 4vw, 3rem))), var(--wxw-grid-max, 1320px));
  min-height: 54px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.wxw-blog-filters__list {
  margin-left: 30.5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem clamp(1.15rem, 2.1vw, 1.9rem);
}
.wxw-blog-filters__list a {
  position: relative;
  min-height: 34px;
  padding: 0 0 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(254, 243, 224, 0.62);
  transition: color 0.35s ease;
}
.wxw-blog-filters__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wxw-orange);
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wxw-blog-filters__list a:hover { color: rgba(254, 243, 224, 0.84); }
.wxw-blog-filters__list a.is-active {
  color: var(--wxw-cream);
}
.wxw-blog-filters__list a.is-active::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.wxw-blog-filters__list a:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wxw-blog-filters__list a,
  .wxw-blog-filters__list a::before { transition: none; }
}

@media (max-width: 900px) {
  .wxw-blog-hero__title { min-height: 225px; }
  .wxw-blog-hero__billets { top: 4%; }
  .wxw-blog-hero__intro { left: calc(var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)) + 3.5rem); }
}

@media (max-width: 640px) {
  .wxw-blog-hero { min-height: 415px; padding-top: calc(var(--header-h) + 2.1rem); }
  .wxw-blog-hero__title { min-height: 225px; }
  .wxw-blog-hero__billets { top: 10%; left: 0; font-size: clamp(4.5rem, 24vw, 7rem); }
  .wxw-blog-hero__editos {
    right: 0;
    left: auto;
    top: 40%;
    bottom: auto;
    font-size: clamp(4.6rem, 24.5vw, 7rem);
  }
  .wxw-blog-hero__amp { top: 48%; font-size: clamp(15rem, 76vw, 23rem); }
  .wxw-blog-hero__intro {
    left: var(--wxw-edge, clamp(1.25rem, 4vw, 3rem));
    right: var(--wxw-edge, clamp(1.25rem, 4vw, 3rem));
    bottom: 1.9rem;
    font-size: 1.05rem;
  }
  .wxw-blog-filters__inner {
    width: calc(100% - 2 * var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)));
    min-height: auto;
    padding: calc(0.48rem - 5px) 0;
  }
  /* Une seule ligne, défilable horizontalement. Les 5 px de marge interne
     (repris sur le conteneur : hauteur inchangée) évitent de rogner le
     contour de focus dans la zone défilante. */
  .wxw-blog-filters__list {
    margin: 0 -5px;
    padding: 5px;
    flex-wrap: nowrap;
    gap: 0.15rem 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .wxw-blog-filters__list::-webkit-scrollbar { display: none; }
  .wxw-blog-filters__list a { min-height: 30px; padding-left: 0.62rem; font-size: 0.64rem; letter-spacing: 0.13em; }
}
/* ---------------------------------------------------------------------------
   Étape 04 — bandes d'articles (.wxw-blog-journal, .wxw-blog-article et
   descendants). Composition éditoriale en bandes, pas une grille de cartes :
   pas de filet répété, pas de fond de carte — seuls les masses, le rythme
   vertical et le contraste premier/suivants portent la hiérarchie. Toujours
   scopé .wxw-blog-* ; réutilise --wxw-edge / --wxw-grid-max avec le même
   fallback qu'à l'étape 03 (non déclarés en :root).
   --------------------------------------------------------------------------- */
.wxw-blog-journal {
  scroll-margin-top: var(--header-h);
  padding: clamp(3.75rem, 6.5vw, 6rem) var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)) clamp(6rem, 11vw, 10rem);
  background: var(--wxw-dark);
}
.wxw-blog-journal__inner {
  width: min(100%, var(--wxw-grid-max, 1320px));
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* --- Métadonnées : catégorie + date, discrètes, sans badge ---------------- */
.wxw-blog-article__meta {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}
.wxw-blog-article__category {
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(254, 243, 224, 0.72);
}
.wxw-blog-article__date {
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(254, 243, 224, 0.52);
}
.wxw-blog-article__date::before {
  content: "—";
  margin-right: 0.9rem;
  color: rgba(254, 243, 224, 0.22);
}
/* Billet sans catégorie éditoriale : la date ouvre la ligne, sans tiret. */
.wxw-blog-article__date:first-child::before { content: none; }

/* --- Bande : lien unique cliquable, fond bord à bord, contenu marge fixe -- */
.wxw-blog-article {
  position: relative;
}
.wxw-blog-article__link {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(180px, 3fr) 1fr;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  align-items: center;
  min-height: 190px;
  padding: clamp(1.8rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
  transition: background-color 0.4s ease;
}
/* Sans image : le texte reprend la colonne médiane, pas de trou vide. */
.wxw-blog-article__link:not(:has(.wxw-blog-article__media)) {
  grid-template-columns: minmax(0, 1fr) 1fr;
}
.wxw-blog-article__main { grid-column: 1; }

.wxw-blog-article__link:hover,
.wxw-blog-article__link:focus-within {
  background: rgba(254, 243, 224, 0.045);
}
.wxw-blog-article__link:focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: -2px;
}

.wxw-blog-article__title {
  max-width: 850px;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  font-weight: 400;
  line-height: 1.04;
  color: var(--wxw-cream);
  /* Mot plus long que la colonne : coupé sans trait d'union, seulement s'il ne tient pas. */
  overflow-wrap: break-word;
}
.wxw-blog-article__excerpt {
  max-width: 65ch;
  margin: 1.4rem 0 0;
  color: rgba(254, 243, 224, 0.66);
  font-size: 0.88rem;
  line-height: 1.8;
}

/* --- Premier article de la page courante : traitement développé ---------- */
.wxw-blog-article--latest .wxw-blog-article__link { min-height: 340px; }
.wxw-blog-article--latest .wxw-blog-article__title {
  font-size: clamp(2.7rem, 4.5vw, 4.7rem);
  font-weight: 400;
  line-height: 0.96;
}

/* --- Image : cadrage stable, aucun espace réservé si absente -------------- */
.wxw-blog-article__media {
  display: block;
  height: 210px;
  overflow: hidden;
  background: var(--wxw-night-deep);
}
.wxw-blog-article__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wxw-blog-article__link:hover .wxw-blog-article__media img,
.wxw-blog-article__link:focus-within .wxw-blog-article__media img {
  transform: scale(1.03);
}

/* --- Flèche : signe horizontal simple, jamais un bouton -------------------- */
.wxw-blog-article__arrow {
  grid-column: -2;
  justify-self: end;
  color: rgba(254, 243, 224, 0.42);
  transition: color 0.3s ease, transform 0.3s ease;
}
.wxw-blog-article__link:hover .wxw-blog-article__arrow,
.wxw-blog-article__link:focus-within .wxw-blog-article__arrow {
  color: var(--wxw-cream);
  transform: translateX(7px);
}

/* --- État sans résultat : sobre, texte + lien de retour -------------------- */
.wxw-blog-empty {
  justify-self: center;
  max-width: min(60ch, 100%);
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  overflow-wrap: break-word;
  color: rgba(254, 243, 224, 0.72);
}
.wxw-blog-empty a {
  color: var(--wxw-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wxw-blog-empty a:focus-visible { outline: 2px solid var(--wxw-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wxw-blog-article__link,
  .wxw-blog-article__media img,
  .wxw-blog-article__arrow { transition: none; }
}

@media (max-width: 900px) {
  .wxw-blog-article__link { grid-template-columns: minmax(0, 7fr) minmax(160px, 3fr) 2rem; }
  .wxw-blog-article__link:not(:has(.wxw-blog-article__media)) { grid-template-columns: minmax(0, 1fr) 2rem; }
}

@media (max-width: 640px) {
  .wxw-blog-journal { padding: 3.5rem 0 6rem; }
  /* Le journal n'a plus de marge latérale ici : l'état vide reprend la gouttière du thème. */
  .wxw-blog-empty { padding-inline: var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)); }
  .wxw-blog-journal__inner { width: 100%; }
  .wxw-blog-article__meta { margin-bottom: 1.3rem; }
  .wxw-blog-article__link {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.8rem;
    align-items: start;
    min-height: 0;
    padding: 2.4rem var(--wxw-edge, clamp(1.25rem, 4vw, 3rem));
  }
  .wxw-blog-article__link:not(:has(.wxw-blog-article__media)) { grid-template-columns: minmax(0, 1fr) 2rem; }
  .wxw-blog-article__main { grid-column: 1; }
  .wxw-blog-article__arrow { grid-column: 2; grid-row: 1; }
  .wxw-blog-article__title { font-size: 2rem; }
  .wxw-blog-article--latest .wxw-blog-article__link { min-height: 0; }
  .wxw-blog-article--latest .wxw-blog-article__title { font-size: clamp(2.55rem, 11vw, 3.8rem); }
  .wxw-blog-article__media {
    grid-column: 1;
    width: min(72vw, 320px);
    height: auto;
    aspect-ratio: 3 / 2;
    margin-top: 1rem;
  }
}
/* ---------------------------------------------------------------------------
   Étape 05 — pagination (.wxw-blog-pagination). Typographique, alignée sur le
   langage des filtres et de la flèche des bandes : pas de bouton, pas de
   capsule. Masquée en PHP si max_num_pages <= 1 (aucun style de repli requis
   pour ce cas). Réutilise les mêmes fallbacks --wxw-edge établis ci-dessus.
   --------------------------------------------------------------------------- */
.wxw-blog-pagination {
  width: min(100%, 760px);
  margin: clamp(3rem, 6vw, 5.5rem) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.wxw-blog-pagination a,
.wxw-blog-pagination > span[aria-hidden="true"]:first-child,
.wxw-blog-pagination > span[aria-hidden="true"]:last-child {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(254, 243, 224, 0.62);
  transition: color 0.3s ease, transform 0.3s ease;
}
.wxw-blog-pagination > span[aria-hidden="true"]:first-child,
.wxw-blog-pagination > span[aria-hidden="true"]:last-child {
  color: rgba(254, 243, 224, 0.28);
}
.wxw-blog-pagination a:first-child { justify-self: start; display: inline-block; }
.wxw-blog-pagination a:last-child { justify-self: end; display: inline-block; }
.wxw-blog-pagination > span[aria-hidden="true"]:first-child { justify-self: start; }
.wxw-blog-pagination > span[aria-hidden="true"]:last-child { justify-self: end; }
.wxw-blog-pagination a:hover { color: var(--wxw-cream); }
.wxw-blog-pagination a:first-child:hover { transform: translateX(-5px); }
.wxw-blog-pagination a:last-child:hover { transform: translateX(5px); }
.wxw-blog-pagination a:focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: 4px;
}

.wxw-blog-pagination__count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.36rem;
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-style: italic;
  color: rgba(254, 243, 224, 0.46);
}
.wxw-blog-pagination__count strong {
  font-size: 1.55rem;
  font-weight: 400;
  font-style: normal;
  color: var(--wxw-cream);
}

@media (prefers-reduced-motion: reduce) {
  .wxw-blog-pagination a { transition: none; }
}

@media (max-width: 640px) {
  .wxw-blog-pagination {
    width: auto;
    margin: 3.5rem var(--wxw-edge, clamp(1.25rem, 4vw, 3rem)) 0;
    gap: 1rem;
  }
  .wxw-blog-pagination a,
  .wxw-blog-pagination > span[aria-hidden="true"] { font-size: 0.62rem; letter-spacing: 0.16em; }
  .wxw-blog-pagination__count { gap: 0.25rem; font-size: 1rem; }
  .wxw-blog-pagination__count strong { font-size: 1.35rem; }
}
/* ================ [fin CLAUDE — BLOG « BILLETS & ÉDITOS » — 03/04/05 HERO+FILTRES+JOURNAL+PAGINATION] === */

/* =============================================================================
   [CLAUDE — ARTICLE SINGLE — 01 HERO] single.php — hero éditorial.
   Portée : uniquement .wxw-article-hero (le corps .entry-content n'est pas
   touché, cf. étapes suivantes). Cible réelle : prototype-source/article.tsx
   + globals.css (.article-hero*, .back-link, .article-meta, .hero-figure*).
   Tokens réutilisés tels quels (valeurs identiques, pas de duplication) :
   var(--wxw-cream) = --cream (#FEF3E0), var(--wxw-dark) = --dark (#15251d),
   var(--font-title), var(--font-body), var(--header-h).
   Edge (clamp(1.25rem,4vw,3rem)) et plafond (1320px) : mêmes valeurs que
   --wxw-edge/--wxw-grid-max de la grille .wxw-page (main.css ~L.1578), mais
   redéclarées en local ici car ces deux propriétés ne sont jamais définies en
   :root (elles n'existent que scopées à leur grille respective) — et la
   formule de colonnes de bord de .wxw-page est conçue pour un bloc Gutenberg
   alignfull, inadaptée à ce <header> natif : on reprend donc la formule réelle
   et plus simple d'article.tsx (width min() + grille 12 fr simples).
   Flèche de retour : caractère texte provisoire (langage le plus proche —
   .nav-cta__arrow) ; l'harmonisation définitive (flèche longue et fine) est
   réservée à l'étape 05, ne pas l'anticiper ici.
   ============================================================================= */

/* Header : opaque dès le chargement sur les pages article (hero en fond
   crème — le header transparent + texte crème serait illisible avant les
   60px de scroll qui déclenchent .is-scrolled en JS, cf. main.js). On
   reproduit ici exactement les 2 propriétés déjà définies par
   .site-header.is-scrolled (main.css ~L.266-273), mêmes valeurs, aucun
   nouveau token : au franchissement du seuil, la classe .is-scrolled prend
   le relais sans qu'aucune propriété ne change réellement de valeur — donc
   aucune transition visible. Scopé à body.single-post (classe WordPress
   native confirmée dans le DOM réel) : aucune autre page n'est concernée,
   header.php/main.js non modifiés, structure/hauteur/position inchangées. */
body.single-post .site-header:not(.is-scrolled) {
  background: var(--wp--preset--color--night-deep);
  padding-block: 16px;
}

/* Fond de page crème sur les articles : le fond global du <body> est noir
   (main.css ~L.198, `body { background: var(--wxw-black); }`, pensé pour les
   hero sombres pleine page ailleurs sur le site). Sur cette page, le hero et
   la zone de lecture sont crème mais ne sont pas plein écran horizontalement
   au-delà de --wxw-article-max (1320px) : sans cette règle, le noir du
   <body> apparaît dans les marges latérales sur grand écran. Scopé à
   body.single-post, aucune autre page concernée. */
body.single-post { background: var(--wxw-cream); }

.wxw-article-hero {
  --wxw-article-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-article-max: 1320px;
  position: relative;
  overflow: hidden;
  background: var(--wxw-cream);
}

.wxw-article-hero__inner {
  position: relative;
  width: min(calc(100% - 2 * var(--wxw-article-edge)), var(--wxw-article-max));
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(2rem, 4.6vw, 4.6rem)) 0 clamp(5.5rem, 9vw, 9rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.8vw, 2rem);
}

/* --- Retour « Billets & éditos » ------------------------------------------- */
.wxw-article-hero__utility {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}
.wxw-article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--color-muted); /* 4,89:1 sur crème (0.62 d'opacité : 4,43:1) */
  transition: color 0.3s ease;
}
.wxw-article-hero__back-arrow {
  transition: transform 0.3s ease;
}
.wxw-article-hero__back:hover { color: var(--wxw-dark); }
.wxw-article-hero__back:hover .wxw-article-hero__back-arrow { transform: rotate(180deg) translateX(5px); }
.wxw-article-hero__back:focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: 4px;
}

/* --- Catégorie + date, lignes de base alignées ----------------------------- */
.wxw-article-hero__meta {
  grid-column: 1 / 7;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.8rem;
  color: var(--wxw-dark);
}
.wxw-article-hero__category {
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wxw-article-hero__date {
  position: relative;
  font-family: var(--font-title);
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  font-style: italic;
  color: var(--color-muted); /* 4,89:1 sur crème (0.62 d'opacité : 4,43:1) */
  line-height: 1;
}

/* --- H1 ---------------------------------------------------------------------
   Échelle propre à cette composition (aucun token --fs-h1 équivalent : celui-ci
   sert des H1 nettement plus petits ailleurs sur le site). --- */
.wxw-article-hero__title {
  grid-column: 1 / 12;
  position: relative;
  z-index: 2;
  max-width: 13.5ch;
  margin: 0;
  font-family: var(--font-title);
  font-size: clamp(4.7rem, 8.25vw, 8rem);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: var(--wxw-dark);
  text-wrap: balance;
  /* Mot plus long que la ligne : coupé sans trait d'union, seulement s'il ne tient pas. */
  overflow-wrap: break-word;
}

/* --- Image à la une : aplat sombre + cadre à ratio stable (16:9 desktop,
   4:3 ≤760px — valeurs relevées dans le prototype live, cf. .hero-figure__frame),
   identique quelle que soit l'orientation ou la proportion du fichier source.
   Remplace l'ancien recadrage --landscape/--portrait (composition libre). --- */
.wxw-article-hero__figure {
  grid-column: 7 / -1;
  position: relative;
  margin: clamp(3.5rem, 5vw, 5rem) 0 0;
}
.wxw-article-hero__figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -2.1rem;
  right: -100vw;
  left: 64%;
  height: 62%;
  background: var(--wxw-dark);
}
.wxw-article-hero__frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wxw-dark);
}
.wxw-article-hero__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.wxw-article-hero__caption {
  position: relative;
  z-index: 1;
  padding-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(21, 37, 29, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .wxw-article-hero__back,
  .wxw-article-hero__back-arrow { transition: none; }
}

/* --- Repli 1050px : titre pleine largeur, corps de grille inchangé --------- */
@media (max-width: 1050px) {
  .wxw-article-hero__title { grid-column: 1 / -1; max-width: none; font-size: clamp(4.2rem, 9.4vw, 6.5rem); }
}

/* --- Repli 760px : empilement, mêmes proportions qu'article.tsx ------------ */
@media (max-width: 760px) {
  .wxw-article-hero__inner { padding-top: calc(var(--header-h) + 1.8rem); }
  .wxw-article-hero__utility { margin-bottom: 4.5rem; }
  .wxw-article-hero__meta { grid-column: 1 / -1; gap: 0.8rem; }
  .wxw-article-hero__category { font-size: 0.56rem; }
  .wxw-article-hero__title { font-size: clamp(3.45rem, 15.2vw, 5.3rem); line-height: 0.87; }
  .wxw-article-hero__figure { grid-column: 4 / -1; margin-top: 4.5rem; }
  .wxw-article-hero__figure::before { top: -1.25rem; left: 58%; }
  .wxw-article-hero__frame { aspect-ratio: 4 / 3; }
}

/* --- Repli 440px : cas extrême, image pleine largeur ----------------------- */
@media (max-width: 440px) {
  .wxw-article-hero__title { font-size: clamp(3rem, 15.5vw, 4.2rem); }
  .wxw-article-hero__figure { grid-column: 1 / -1; }
}
/* ================ [fin CLAUDE — ARTICLE SINGLE — 01 HERO] ================== */

/* =============================================================================
   [CLAUDE — ARTICLE SINGLE — 02 READING ENTRY] single.php — entrée dans la
   lecture. Portée : respiration hero→corps, temps de lecture, grille de
   lecture, largeur de colonne, style de base des paragraphes. H2/H3/listes/
   citations/images internes/article connexe : non traités à cette étape.
   Cible réelle : prototype-source/globals.css (.reading-layout,
   .reading-layout__meta, .reading-time, .article-body). Même grille 12
   colonnes que le hero (--wxw-article-edge/--wxw-article-max déjà déclarés
   sur .wxw-article-hero ; redéclarés ici en local pour la même raison qu'à
   l'étape 01 : jamais définis en :root).
   Décision de portée : le drop-cap orange du premier paragraphe
   (.article-section--opening de la maquette) est couplé au découpage en
   sections numérotées — non traité ici, reporté à l'étape 03 pour ne pas
   styliser prématurément une structure qui n'existe pas encore.
   ============================================================================= */

.wxw-article-reading {
  --wxw-article-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-article-max: 1320px;
  width: min(calc(100% - 2 * var(--wxw-article-edge)), var(--wxw-article-max));
  margin: 0 auto;
  padding: clamp(7rem, 11vw, 11rem) 0 clamp(8rem, 13vw, 13rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.8vw, 2rem);
  background: var(--wxw-cream);
}

.wxw-article-reading__meta {
  grid-column: 4 / 10;
  display: flex;
  align-items: center;
  margin-bottom: clamp(3.5rem, 5vw, 5rem);
  color: rgba(21, 37, 29, 0.62);
}
.wxw-article-reading__meta::after {
  content: "";
  width: clamp(2.5rem, 5vw, 4.5rem);
  height: 1px;
  margin-left: 1rem;
  background: currentColor;
  opacity: 0.22;
}
.wxw-article-reading__time {
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.wxw-article-body {
  grid-column: 4 / 10;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.08vw, 1.1rem);
  line-height: 1.9;
  color: var(--wxw-dark);
}
.wxw-article-body p {
  max-width: 42rem;
  margin: 0 0 1.8rem;
}

@media (max-width: 1050px) {
  .wxw-article-reading__meta,
  .wxw-article-body { grid-column: 3 / 11; }
}

@media (max-width: 760px) {
  .wxw-article-reading { padding-top: 5rem; display: block; }
  .wxw-article-reading__meta { margin-bottom: 3.5rem; }
}
/* ================ [fin CLAUDE — ARTICLE SINGLE — 02 READING ENTRY] ========= */

/* =============================================================================
   [CLAUDE — ARTICLE SINGLE — 03 GUTENBERG SYSTEM] single.php — typographie du
   corps. Portée : strictement .wxw-article-body (le_content réel), aucune
   transformation PHP du contenu. Blocs réellement rencontrés dans les 2
   articles publiés (vérifié en base) : paragraphes, H2 (avec <strong>
   interne), liens, une liste ordonnée (article 321). Traités en plus par
   exigence de robustesse minimale (03_GUTENBERG_SYSTEM.md) bien qu'absents
   des 2 articles actuels : H3, listes non ordonnées, citations, images
   internes + légende. Séparateurs/autres blocs : non traités (jamais
   rencontrés). Cible réelle : prototype-source/globals.css
   (.section-heading, .section-heading h2, .article-section). Aucune de ces
   règles n'existe pour listes/citations/images dans la maquette de
   référence (jamais utilisées côté prototype) : composées ici en cohérence
   avec le langage visuel déjà établi aux étapes 01/02 (mêmes tokens, même
   mesure de 42rem, même accent orange), pas de nouvelle direction
   artistique inventée.
   ============================================================================= */

/* --- H2 : numérotation automatique par compteur CSS, aucune saisie/JS ------
   counter-reset sur le conteneur : fonctionne à l'identique avec 0, 1 ou
   plusieurs H2. Décalage alterné (nth-of-type impair) : transposition exacte
   de l'alternance de la maquette (.article-section:nth-child(even) h2),
   qui revient à décaler les H2 de rang impair une fois l'intro (sans titre)
   prise en compte — reproductible ici sans wrapper de section grâce à
   nth-of-type, qui ne compte que les H2 entre eux. */
.wxw-article-body {
  counter-reset: wxw-h2;
}
.wxw-article-body h2 {
  position: relative;
  counter-increment: wxw-h2;
  max-width: 10.8ch;
  margin: clamp(7.5rem, 11vw, 11rem) 0 clamp(3.2rem, 5vw, 5rem);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.1rem, 5vw, 5rem);
  line-height: 0.91;
  letter-spacing: -0.035em;
  color: var(--wxw-dark);
  text-wrap: balance;
}
.wxw-article-body h2:first-of-type { margin-top: clamp(3.5rem, 5vw, 5rem); }
.wxw-article-body h2:nth-of-type(odd) { margin-left: clamp(0rem, 4vw, 4rem); }
.wxw-article-body h2::before {
  /* "/ """ : alt-text CSS vide — numéro décoratif exclu du nom accessible. */
  content: counter(wxw-h2, decimal-leading-zero) / "";
  position: absolute;
  left: -4.7rem;
  top: 0.55rem;
  color: var(--wxw-orange);
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}
/* <strong> réel dans les H2 (contenu natif des 2 articles) : neutralisé pour
   ne jamais altérer fonte/graisse/interlignage/couleur/composition. */
.wxw-article-body h2 strong,
.wxw-article-body h3 strong {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* --- H3 (non rencontré actuellement, traité par minimum requis) ----------- */
.wxw-article-body h3 {
  max-width: 32ch;
  margin: 2.75rem 0 1.1rem;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15;
  color: var(--wxw-dark);
}

/* --- Liens, strong, em (corps) ---------------------------------------------
   Identifiables autrement que par la couleur (soulignement), jamais par la
   seule teinte orange. font-weight:600 explicite : Poppins n'est chargé
   qu'en 300/400/500/600 (cf. @font-face en tête de fichier) — le gras
   navigateur par défaut (700) n'existe pas dans la police et serait
   synthétisé, d'où cette valeur réelle plutôt qu'un « bold » implicite. */
.wxw-article-body a {
  color: var(--wxw-terracotta-deep); /* l'orange n'atteint que 2,4:1 sur crème */
  text-decoration: underline;
  text-decoration-color: rgba(241, 129, 25, 0.4);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.3s ease;
}
.wxw-article-body a:hover { text-decoration-color: var(--wxw-orange); }
/* Focus clavier des liens de texte sur crème (corps des articles et pages
   juridiques) : contour orange, cerné d'un anneau terracotta foncé — seul,
   l'orange n'offre que 2,4:1 contre le fond, sous les 3:1 attendus d'un
   indicateur de focus. Contour et ombre ne déplacent rien. */
.wxw-article-body a:focus-visible,
.wxw-legal a:not(.wp-element-button):not(.wxw-btn):focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px var(--wxw-cream), 0 0 0 7px var(--wxw-terracotta-deep);
  /* Lien sur deux lignes : un anneau complet par ligne. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.wxw-article-body strong { font-weight: 600; }
.wxw-article-body em { font-style: italic; }

/* --- Listes ordonnées et non ordonnées -------------------------------------
   Une liste ordonnée réelle existe dans l'article 321. */
.wxw-article-body ul,
.wxw-article-body ol {
  max-width: 42rem;
  margin: 0 0 1.8rem;
  padding-left: 1.3rem;
}
.wxw-article-body li { margin-bottom: 0.6rem; line-height: 1.8; }
.wxw-article-body li:last-child { margin-bottom: 0; }
.wxw-article-body ul li::marker,
.wxw-article-body ol li::marker {
  color: var(--wxw-orange);
  font-weight: 600;
}

/* --- Citations (non rencontrées actuellement, traitées par minimum requis) */
.wxw-article-body blockquote {
  max-width: 42rem;
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--wxw-orange);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.55;
  color: var(--wxw-dark);
}
.wxw-article-body blockquote p { margin: 0 0 0.6rem; max-width: none; }
.wxw-article-body blockquote p:last-child { margin-bottom: 0; }
.wxw-article-body blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 37, 29, 0.62);
}

/* --- Images internes + légende (non rencontrées actuellement, traitées par
   minimum requis). Traitement de base uniquement : les variantes alignwide/
   alignfull ne sont pas couvertes, aucun contenu réel ne les utilise. */
.wxw-article-body .wp-block-image {
  max-width: 42rem;
  margin: 2.5rem 0;
}
.wxw-article-body .wp-block-image img { display: block; width: 100%; height: auto; }
.wxw-article-body .wp-block-image figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(21, 37, 29, 0.62);
}

/* --- Repli 760px : numéro décoratif au-dessus du H2, plus d'absolu -------- */
@media (max-width: 760px) {
  .wxw-article-body h2::before {
    position: static;
    display: block;
    margin-bottom: 1.2rem;
  }
  .wxw-article-body h2:nth-of-type(odd) { margin-left: 0; }
}
/* ================ [fin CLAUDE — ARTICLE SINGLE — 03 GUTENBERG SYSTEM] ====== */

/* =============================================================================
   [CLAUDE — ARTICLE SINGLE — 04 RELATED ARTICLE] single.php — bandeau
   d'article connexe. Cible réelle : prototype-source/globals.css
   (.article-footer, .article-footer__top, .next-article, .next-article__
   media/content, .back-link). Fond vert = var(--wxw-dark), identique au
   token déjà réutilisé aux étapes 01/02/03 (même hex que --dark du
   prototype). Flèches : caractères texte provisoires, même langage que
   .wxw-article-hero__back — harmonisation SVG définitive réservée à
   l'étape 05, non anticipée ici. Un seul lien sémantique par carte
   (.wxw-article-related__link) : titre et image sont à l'intérieur,
   aucun lien imbriqué. Image toujours recadrée en object-fit:cover dans un
   rectangle fixe (11rem × 8.5rem) — la maquette ne distingue pas paysage/
   portrait ici (contrairement au hero), donc aucune classe de forme n'est
   nécessaire pour ce composant.
   ============================================================================= */

.wxw-article-related {
  --wxw-article-edge: clamp(1.25rem, 4vw, 3rem);
  --wxw-article-max: 1320px;
  color: var(--wxw-cream);
  background: var(--wxw-dark);
  padding: clamp(5.5rem, 9vw, 9rem) var(--wxw-article-edge) clamp(7rem, 11vw, 11rem);
}

.wxw-article-related__top,
.wxw-article-related__link {
  width: min(100%, var(--wxw-article-max));
  margin-inline: auto;
}

.wxw-article-related__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(3rem, 5vw, 5rem);
  color: rgba(254, 243, 224, 0.62);
}
.wxw-article-related__label {
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.wxw-article-related__back {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: inherit;
  transition: color 0.3s ease;
}
.wxw-article-related__back-arrow {
  transition: transform 0.3s ease;
}
.wxw-article-related__back:hover { color: var(--wxw-cream); }
.wxw-article-related__back:hover .wxw-article-related__back-arrow { transform: rotate(180deg) translateX(5px); }
.wxw-article-related__back:focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: 4px;
}

.wxw-article-related__link {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  padding: 2.4rem 0;
}
.wxw-article-related__link:focus-visible {
  outline: 2px solid var(--wxw-orange);
  outline-offset: 6px;
}
.wxw-article-related__link:hover .wxw-article-related__arrow { transform: translateX(7px); }
.wxw-article-related__link:hover .wxw-article-related__media img { transform: scale(1.025); }

.wxw-article-related__media {
  height: 8.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(254, 243, 224, 0.07);
}
.wxw-article-related__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.82);
  transition: transform 300ms ease;
}

.wxw-article-related__category {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--wxw-orange);
  font-family: var(--font-body);
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.wxw-article-related__title {
  max-width: 19ch;
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.2vw, 4.3rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--wxw-cream);
  text-wrap: balance;
}

.wxw-article-related__arrow {
  color: var(--wxw-cream);
  transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .wxw-article-related__back,
  .wxw-article-related__back-arrow,
  .wxw-article-related__arrow,
  .wxw-article-related__media img { transition: none; }
}

@media (max-width: 760px) {
  .wxw-article-related__link {
    grid-template-columns: 5.5rem 1fr;
    gap: 1.4rem;
  }
  .wxw-article-related__media { height: 6.8rem; }
  .wxw-article-related__arrow {
    grid-column: 2;
    margin-top: 1rem;
  }
  .wxw-article-related__title { font-size: clamp(2.15rem, 9.2vw, 3.2rem); }
}

@media (max-width: 440px) {
  .wxw-article-related__label { display: none; }
  .wxw-article-related__link { grid-template-columns: 1fr; }
  .wxw-article-related__media { width: 7rem; }
  .wxw-article-related__arrow { grid-column: 1; }
}
/* ================ [fin CLAUDE — ARTICLE SINGLE — 04 RELATED ARTICLE] ======= */

/* =============================================================================
   [CLAUDE — ARROWS — 05] Système de flèche unique, partagé entre la page
   article (.wxw-article-*) et la page Blog (.wxw-blog-article__arrow).
   Aucun mécanisme existant (tous des caractères Unicode dépendant de la
   police, cf. inventaire) ne produit le dessin réel de la maquette
   (prototype-source/globals.css:171-183, .arrow/.arrow--left) : SVG unique,
   viewBox et tracé repris à l'identique, même taille dans tous les contextes
   (la maquette ne fait varier ni le dessin ni les proportions selon
   l'usage). Remplace UNIQUEMENT le glyphe : structure, couleurs,
   espacements, typographie et requêtes des composants hôtes sont inchangés.
   Sur home.php (page Blog), seule la ligne de la flèche est modifiée,
   conformément au périmètre de l'étape 05.
   ============================================================================= */
.wxw-arrow {
  display: inline-block;
  width: 45px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.wxw-arrow--left { transform: rotate(180deg); }
/* Les 4 sélecteurs hôtes (.wxw-article-hero__back-arrow, .wxw-article-related__
   back-arrow, .wxw-article-related__arrow, .wxw-blog-article__arrow) ont été
   nettoyés directement à leur définition d'origine (retrait font-family/
   font-size/display devenus inertes sur un SVG ; hover des flèches de retour
   corrigé en rotate(180deg) translateX(5px) pour tenir compte de la rotation,
   là où le caractère Unicode pointait déjà à gauche sans rotation). Couleurs,
   espacements, position en grille et requêtes hôtes inchangés. */
/* ================ [fin CLAUDE — ARROWS — 05] ================================ */

/* ==========================================================================
   PAGE NOS RÉFÉRENCES — CONTENU UNIQUEMENT — .wxw-references
   Étape 02 : traduction graphique des 3 bandeaux (API / Choisir Psychiatrie /
   Purenat). `.wxw-references` est un enfant direct de `.page-content` en
   `alignfull`+`is-layout-constrained` : elle hérite déjà de la grille 12
   colonnes, de --wxw-edge/--wxw-grid-max/--wxw-gap et du CTA fléché canonique
   du site (règles `.wxw-page .page-content > ...wp-block-buttons`, ligne
   ~1660) — non dupliqués ici. H2/Auge, corps/Poppins et `--fs-h2` viennent
   aussi du cascade par défaut (h2 { font-family:Auge; font-size:--fs-h2 }).
   Fond crème uniforme (pas d'alternance cream-warm) pour éviter l'effet de
   bandes colorées indépendantes, conformément à la validation demandée.
   Réversible : supprimer ce bloc seul.
   ========================================================================== */
.wxw-page .page-content > .wp-block-group.alignfull.is-layout-constrained.wxw-references {
  background: var(--wxw-cream);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: var(--header-h);
  row-gap: 0 !important; /* les 3 bandeaux se touchent : la grille éditoriale du
                 site (row-gap, spécificité supérieure d'où le !important) et le
                 blockGap natif de Gutenberg (margin-top, cf. .wxw-reference
                 ci-dessous) sont tous deux annulés ici pour que seul le filet
                 (border-bottom) sépare les références. */
}

.wxw-reference {
  width: 100%;
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--wxw-gap, clamp(1rem, 1.6vw, 1.75rem));
  border-bottom: 1px solid var(--c-line);
  margin-block-start: 0 !important; /* annule le blockGap Gutenberg (margin-top hérité de theme.json) */
}

.wxw-reference__identity {
  width: 100%;
  justify-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  border-right: 1px solid var(--c-line);
}

.wxw-reference__index {
  align-self: flex-start;
  margin-inline: 0 !important; /* Gutenberg centre les paragraphes d'un groupe
                 constrained via margin-inline:auto ; annulé pour aligner le
                 numéro à gauche de la colonne identité. */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--wxw-orange);
}

/* API : aucun fichier logo exploitable → mot-symbole typographique (CONTENT_CONTRACT). */
.wxw-reference__logo:not(.wp-block-image) {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wxw-dark);
}

/* Choisir Psychiatrie / Purenat : logos réels de la médiathèque, contraints
   (jamais à taille native), sans recadrage — proportions distinctes assumées
   pour une présence optique équivalente plutôt qu'une largeur identique. */
.wxw-reference__logo.wp-block-image { margin: 0; }
.wxw-reference__logo.wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}
.wxw-reference__logo.wp-block-image img[src*="choisir-psychiatrie"] { max-width: 150px; }
.wxw-reference__logo.wp-block-image img[src*="purenat-logo"] { max-width: 230px; }

.wxw-reference__content {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.wxw-reference__title {
  max-width: 20ch;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-size: 40px;
}

/* CTA : réutilise tel quel le lien fléché canonique du site (ligne ~1660) ;
   seul l'espacement au-dessus du bouton est propre à cette page. */
.wxw-reference__content .wp-block-buttons {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* --- Repli mobile : même seuil (860px) que la grille éditoriale du site --- */
@media (max-width: 860px) {
  .wxw-reference {
    grid-template-columns: 1fr;
  }
  .wxw-reference__identity {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .wxw-reference__content {
    padding: clamp(2rem, 6vw, 3rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  }
}
/* ========================== [fin CLAUDE — NOS RÉFÉRENCES — CONTENU] ========================= */