/* ═══════════════════════════════════════════════════════════════════════════
   accueil.css — feuille de la page d'accueil (index.html)
   ───────────────────────────────────────────────────────────────────────────
   Exception assumée à la règle « styles dans un <style> en tête de page » :
   la page est longue, le CSS est sorti ici pour rester lisible.
   CSS pur, écrit à la main. Aucun framework, aucune classe utilitaire tierce.
   Structure reprise de docs/superpowers/specs/2026-09-11-nbnzia-inventaire.md
   (§2 système de design, §3 sections, §4 animations, §5 mobile).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Rem fluide (inventaire §2.1) ──────────────────────────────────────
   Entre 992 px et 1439 px, 1 rem = largeur / 90 : toute la page se met à
   l'échelle linéairement. 16 px ailleurs.                                   */
html, body { font-size: 1.1111111111111112vw; }
@media (max-width: 991px)  { html, body { font-size: 16px; } }
@media (min-width: 1440px) { html, body { font-size: 16px; } }
@media (max-width: 991px) and (min-width: 490px) { html, body { font-size: 2.0860495436766624vw; } }
@media (max-width: 389px)  { html, body { font-size: calc(100vw / 24.3125); } }

/* ─── 2. Tokens de marque (spec §3, palette sombre + or) ─────────────────── */
:root {
  --bg:         #0e0d0c;   /* fond de page      (nbnzia #f5f2f3) */
  --fg:         #f1efe9;   /* texte principal   (nbnzia #1f1f1f) */
  --dark:       #070606;   /* sections sombres  (nbnzia #0f0f0f) */
  --line:       #2a2724;   /* lignes accordéon  (nbnzia #333)    */
  --gold:       #c9a84c;   /* orange de marque  (nbnzia #eb381c) */
  --gold-soft:  #dbb96a;   /* vague et torche   (nbnzia #F84131 / #ff6b35) */
  --accent-1:   #dbb96a;   /* survol du bouton  (nbnzia #8eb4d9) */
  --muted:      #7b7b7b;   /* texte secondaire  (nbnzia #5f5f5f) */
  --field:      #1a1816;   /* champs, panneau mobile (nbnzia #1f1f1f) */
  --veil:       #0e0d0c;   /* voile du footer   (nbnzia #201d1d) */

  --ink:        #1f1f1f;   /* texte sur fiche claire */
  --paper:      #f3e9d2;   /* cartes de la méthode, fiche 03 */

  /* Alias attendus par le CSS des boutons recopié depuis les composants
     partagés (js/site-footer.js, js/site-nav.js) : ils y sont lus en
     var(--brand-9) / var(--brand-10). */
  --brand-9:    #c9a84c;
  --brand-10:   #dbb96a;

  --font: 'Bricolage Grotesque', Arial, sans-serif;

  /* jetons d'espacement (inventaire §2.4) */
  --gap-grid: .25rem;
  --pad-container: 1rem;
}
@media (max-width: 991px) { :root { --pad-container: 1.5rem; } }

/* ─── 3. Remise à zéro ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  overflow-x: clip;                 /* `clip` et non `hidden` : ne casse pas sticky */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p  { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
/* Anneau de focus doré sur ce qui est RÉELLEMENT cliquable, et rien d'autre.
   Un `:focus-visible` global encadrait aussi les conteneurs : js/consent.js
   donne le focus au bloc qui porte [data-consent-ouvrir] quand le bandeau se
   ferme, et tout le groupe de liens légaux se retrouvait cerclé d'or.
   js/consent.js n'est pas modifiable : on corrige côté portée du sélecteur. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
/* Un conteneur non interactif qui reçoit le focus par script ne dessine rien. */
div:focus, div:focus-visible, section:focus, section:focus-visible { outline: none; }

/* Verrou de scroll de l'intro (inventaire §4.1) */
html.is--scroll-locked { overflow: hidden !important; overscroll-behavior: none; }

/* États initiaux de l'intro, actifs dès la première peinture.
   `is--intro` est posé par le script en ligne du <head> d'index.html, avant
   tout rendu ; js/accueil.js le retire une fois que GSAP a posé ses propres
   états. Sans cette règle, la phrase et le sous-titre du hero s'affichaient
   par-dessus le mot-symbole pendant toute la durée du chargement.
   ⚠ `visibility` et surtout pas `opacity` : une opacité < 1 créerait un
   contexte d'empilement et le `mix-blend-mode: difference` de ces deux
   éléments cesserait de voir l'image du hero (voir .willem-header__content). */
html.is--intro .mwg046-sentence,
html.is--intro .mwg046-sub { visibility: hidden; }
/* Le mot-symbole aussi : le départ des animations est différé (polices
   chargées + 250 ms), et sans cet état BOURGEOIS s'affichait en clair pendant
   ~700 ms puis redescendait pour remonter — exactement le défaut corrigé
   ailleurs. `translateY(100%)` est la position de départ EXACTE du
   `from({ yPercent: 100 })` de js/accueil.js : le relais ne fait aucun saut.
   `visibility` en plus, car à 100 % il reste un liseré de 2 px du haut des
   lettres — GSAP le produit aussi, mais seulement le temps d'une image. */
html.is--intro .willem__letter > span { visibility: hidden; transform: translateY(100%); }

/* Bandeau de consentement : il entre en glissant par le bas une fois la phrase
   du hero remplie, au lieu d'être là dès la première peinture.
   ⚠ js/consent.js n'est pas modifiable : on agit uniquement par la classe
   `is--hero-anim` posée sur <html> par le script en ligne du <head>, et on
   compose avec le style que consent.js injecte dans le <head> APRÈS cette
   feuille. D'où les sélecteurs préfixés par `html` : à spécificité égale, le
   dernier déclaré gagne, et il faut donc passer devant.
   - `html #consentBandeau` (1,0,1) > `#consentBandeau` (1,0,0) ;
   - `html.is--hero-anim #consentBandeau` (1,1,1) > `#consentBandeau.consent--masque` (1,1,0).
   L'opacité de consent.js est reprise telle quelle pour ne pas casser son
   animation d'origine ; seule la durée du `transform` est allongée.
   Uniquement `transform` : le bandeau est en `position: fixed`, le sortir de
   l'écran n'allonge donc pas le document et ne crée aucune barre de scroll.
   Si le consentement est déjà donné, #consentBandeau n'existe pas et ces
   règles ne s'appliquent à rien. */
html #consentBandeau {
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1);
}
html.is--hero-anim #consentBandeau { transform: translateY(calc(100% + 32px)); }

/* ─── 4. Typographie mesurée (inventaire §2.3) ──────────────────────────── */
.u-h3 { font-size: 2.25rem; line-height: 1.33333; letter-spacing: -.01em; font-weight: 500; }
.u-copy { font-size: 1rem; line-height: 1.5; letter-spacing: -.01em; font-weight: 500; }
.u-copy-xxxs {
  font-size: .625rem; line-height: 1.6; letter-spacing: -.01em;
  font-weight: 400; text-transform: uppercase;
}
.u-text-secondary { color: var(--muted); }

/* ─── 5. Conteneurs et sections (inventaire §2.4) ───────────────────────── */
.u-container {
  width: 100%; max-width: 90rem; margin-inline: auto;
  padding-inline: var(--pad-container);
}
.c-section { padding-block: 6rem; }
.c-section[data-c-section-pt="xl"]  { padding-top: 10rem; }
.c-section[data-c-section-pb="xl"]  { padding-bottom: 10rem; }
.c-section[data-c-section-pt="xxl"] { padding-top: 12rem; }
@media (max-width: 991px) {
  .c-section { padding-block: 4rem 0; }
  .c-section[data-c-section-pt="xl"] { padding-top: 6.25rem; }
}

/* ─── 6. Bandeaux « { … ♣ … } » (inventaire §2.4, §3.8) ─────────────────── */
.mwg044-header {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap-grid);
  align-items: center; margin-bottom: 12rem;
  font-size: .625rem; letter-spacing: .04em; text-transform: uppercase;
}
.mwg044-header > * { grid-row: 1; }
.mwg044-header .bh-brace-l { grid-column: 1; text-align: left;  }
.mwg044-header .bh-word-l  { grid-column: 2; text-align: center; }
.mwg044-header .bh-icon    { grid-column: 4 / span 2; display: flex; justify-content: center; }
.mwg044-header .bh-word-r  { grid-column: 7; text-align: center; }
.mwg044-header .bh-brace-r { grid-column: 8; text-align: right; }
/* Icônes Lucide : tracés au trait, jamais pleins. Taille et couleur par CSS. */
.mwg044-header .bh-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
@media (max-width: 767px) {
  .mwg044-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4rem; gap: .5rem;
  }
  .mwg044-header > * { text-align: center !important; }
}

/* ─── 7. Boutons — reprise EXACTE des boutons historiques du site ─────────
   Copiés depuis js/site-footer.js (.btn-primary, .btn-secondary) et
   js/site-nav.js (.nav-cta), pour que cette page soit cohérente avec les
   autres. Les deux fichiers source ne sont pas modifiés : leur CSS est
   recopié ici, @property compris (sans @property, les dégradés ne
   s'interpolent pas et le survol saute au lieu de fondre).               */
@property --pos-x        { syntax: '<percentage>'; initial-value: 11.14%;   inherits: false; }
@property --pos-y        { syntax: '<percentage>'; initial-value: 140%;     inherits: false; }
@property --spread-x     { syntax: '<percentage>'; initial-value: 150%;     inherits: false; }
@property --spread-y     { syntax: '<percentage>'; initial-value: 180.06%;  inherits: false; }
@property --color-1      { syntax: '<color>';      initial-value: #0a0700;  inherits: false; }
@property --color-2      { syntax: '<color>';      initial-value: #1a1000;  inherits: false; }
@property --color-3      { syntax: '<color>';      initial-value: #3d2700;  inherits: false; }
@property --color-4      { syntax: '<color>';      initial-value: #7a5200;  inherits: false; }
@property --color-5      { syntax: '<color>';      initial-value: #c9a84c;  inherits: false; }
@property --border-angle { syntax: '<angle>';      initial-value: 20deg;    inherits: true;  }
@property --border-color-1 { syntax: '<color>';   initial-value: hsla(42,75%,60%,0.2);  inherits: true; }
@property --border-color-2 { syntax: '<color>';   initial-value: hsla(42,75%,40%,0.75); inherits: true; }
@property --stop-1       { syntax: '<percentage>'; initial-value: 37.35%;   inherits: false; }
@property --stop-2       { syntax: '<percentage>'; initial-value: 61.36%;   inherits: false; }
@property --stop-3       { syntax: '<percentage>'; initial-value: 78.42%;   inherits: false; }
@property --stop-4       { syntax: '<percentage>'; initial-value: 89.52%;   inherits: false; }
@property --stop-5       { syntax: '<percentage>'; initial-value: 100%;     inherits: false; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 100px; border: none; cursor: pointer;
  position: relative; overflow: hidden;
  background: radial-gradient(
    ellipse var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
    var(--color-5) var(--stop-1),
    var(--color-4) var(--stop-2),
    var(--color-3) var(--stop-3),
    var(--color-2) var(--stop-4),
    var(--color-1) var(--stop-5)
  );
  transition:
    --pos-x 0.4s, --pos-y 0.4s,
    --spread-x 0.4s, --spread-y 0.4s,
    --color-1 0.4s, --color-2 0.4s, --color-3 0.4s, --color-4 0.4s, --color-5 0.4s,
    --stop-1 0.4s, --stop-2 0.4s, --stop-3 0.4s, --stop-4 0.4s, --stop-5 0.4s,
    --border-angle 0.4s, --border-color-1 0.4s, --border-color-2 0.4s,
    transform 0.15s cubic-bezier(0.25,0.46,0.45,0.94);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; pointer-events: none;
}
.btn-primary:hover {
  --pos-x: 0%; --pos-y: 91.51%; --spread-x: 120.24%; --spread-y: 103.18%;
  --color-1: #dbb96a; --color-2: #c9a84c; --color-3: #8b6400;
  --color-4: #2a1800; --color-5: #000;
  --stop-1: 0%; --stop-2: 30%; --stop-3: 55%; --stop-4: 80%; --stop-5: 100%;
  --border-angle: 160deg;
  --border-color-1: hsla(42,75%,90%,0.25); --border-color-2: hsla(42,50%,90%,0.65);
  transform: translateY(-2px);
}
.btn-primary:active  { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--brand-9, #c9a84c); outline-offset: 3px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 13px 26px; border-radius: 100px; cursor: pointer;
  position: relative; overflow: hidden; border: none;
  background: radial-gradient(
    ellipse var(--spread-x) var(--spread-y) at var(--pos-x) var(--pos-y),
    var(--color-1) var(--stop-1),
    var(--color-2) var(--stop-2),
    var(--color-3) var(--stop-3),
    var(--color-4) var(--stop-4),
    var(--color-5) var(--stop-5)
  );
  transition:
    --pos-x 0.4s, --pos-y 0.4s,
    --spread-x 0.4s, --spread-y 0.4s,
    --color-1 0.4s, --color-2 0.4s, --color-3 0.4s, --color-4 0.4s, --color-5 0.4s,
    --stop-1 0.4s, --stop-2 0.4s, --stop-3 0.4s, --stop-4 0.4s, --stop-5 0.4s,
    --border-angle 0.4s, --border-color-1 0.4s, --border-color-2 0.4s,
    transform 0.15s cubic-bezier(0.25,0.46,0.45,0.94);
}
.btn-secondary::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--border-angle), var(--border-color-1), var(--border-color-2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; pointer-events: none;
}
.btn-secondary:hover {
  --pos-x: 0%; --pos-y: 95.51%; --spread-x: 110.24%; --spread-y: 110.2%;
  --color-1: #1a1400; --color-2: #3d2a00; --color-3: #7a5200;
  --color-4: #c9a84c; --color-5: #dbb96a;
  --stop-1: 0%; --stop-2: 25%; --stop-3: 50%; --stop-4: 78%; --stop-5: 100%;
  --border-angle: 210deg;
  --border-color-1: hsla(42,75%,90%,0.2); --border-color-2: hsla(42,50%,90%,0.7);
  transform: translateY(-2px);
}
.btn-secondary:active  { transform: translateY(0); }
.btn-secondary:focus-visible { outline: 2px solid var(--brand-9, #c9a84c); outline-offset: 3px; }

.btn-primary svg, .btn-secondary svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. HERO + INTRO (inventaire §3.3, §4.1)
   ═══════════════════════════════════════════════════════════════════════════ */
.willem-header {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--bg);
}
@media (max-width: 991px) { .willem-header { min-height: 100dvh; } }

/* Calque 1 : le loader, plein cadre, porte le mot-symbole et l'image */
.willem-loader {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg); color: var(--fg);
}
.willem__h1 {
  display: flex; align-items: center; justify-content: center;
  font-size: 9em; line-height: .75; font-weight: 500;
  text-transform: uppercase; white-space: nowrap; letter-spacing: -.02em;
}
@media (max-width: 991px) { .willem__h1 { font-size: 6.4em; } }
@media (max-width: 767px) { .willem__h1 { font-size: 3em; } }

.willem__h1-start, .willem__h1-end { display: flex; }
.willem__letter { display: inline-block; overflow: hidden; }
.willem__letter > span { display: inline-block; }

.willem-loader__box {
  position: relative; top: .14em;
  height: .728em; width: 0;
  flex: 0 0 auto;
}
/* Sous 767 px la boîte est en ratio 2/3 (portrait) : à .728em elle ne faisait
   que 23 px de large, le battage de cartes y était illisible. La référence
   tient ≈ 82 px de large à 390 et laisse la boîte dépasser la hauteur des
   capitales. 2.1em donne 101 px de haut et 67 px de large à 390, 93 × 62 à
   360 — « BOUR + boîte + GEOIS » tient alors sur une ligne avec ~31 px de
   marge de chaque côté. `top` est remis à 0 : le décalage optique de .14em
   n'a de sens qu'avec une boîte de la hauteur d'une lettre, ici c'est
   `align-items: center` du .willem__h1 qui fait le centrage.
   ⚠ initIntro lit cette hauteur pour en déduire la largeur (boxH × 2/3) et
   pour la mesure préalable de offX/offY : rien à changer côté JS. */
@media (max-width: 767px) {
  .willem-loader__box { height: 2.1em; top: 0; }
}
.willem__growing-image {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  overflow: hidden;
}
.willem__growing-image-wrap { position: relative; height: 100%; }
.willem__growing-image-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.willem__cover-image-extra.is--3 { z-index: 1; }
.willem__cover-image-extra.is--2 { z-index: 2; }
.willem__cover-image-extra.is--1 { z-index: 3; }
.willem__cover-image { z-index: 0; }
/* detail-cards est le seul visuel en portrait (1440×2160). Dans la boîte 16:9
   le cadrage commun à 30 % coupe la main et l'as de pique : ce calque-là se
   recadre au centre. Sans effet en mobile, où la boîte a le même ratio. */
.willem__cover-image-extra.is--2 { object-position: center; }

/* Calque 2 : le contenu (nav en haut, phrase en bas).
   ⚠ Aucun z-index / transform / opacity sur cette chaîne : cela créerait un
   contexte d'empilement et le `mix-blend-mode: difference` de la nav et de la
   phrase ne verrait plus l'image du hero. `position: relative` sans z-index
   ne crée pas de contexte d'empilement : c'est voulu.                        */
.willem-header__content {
  position: relative;
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: space-between; padding: 1rem 3em;
}
@media (max-width: 991px) {
  .willem-header__content { min-height: 100dvh; padding: 1rem 1.5em; }
  .willem-header__top { opacity: 0; pointer-events: none; }
}
.willem-header__bottom { padding-bottom: 1rem; }

/* Phrase hero en texte négatif */
.mwg046 { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Sous-titre du hero (bloc 1 de la copie v2), même texte négatif que la phrase. */
.mwg046-sub {
  margin-top: 1.25rem; max-width: 52ch; text-align: center;
  font-size: 1rem; line-height: 1.5; font-weight: 500; letter-spacing: -.01em;
  color: #fff; mix-blend-mode: difference;
}
@media (max-width: 767px) { .mwg046-sub { font-size: .875rem; margin-top: 1rem; max-width: 34ch; } }
/* Mot composé gardé d'un bloc : « rendez-vous » se coupait sur son trait
   d'union et tombait en « rendez- / vous. ». */
.nowrap { white-space: nowrap; }
.mwg046-sentence {
  font-size: 6rem; line-height: 1; font-weight: 400; letter-spacing: -.03em;
  text-transform: uppercase; text-align: center; max-width: 19.3ch;
  color: #fff; mix-blend-mode: difference;
}
/* 19.3ch ≈ 1100 px à 1440 : la phrase tombe en 3 lignes comme la référence
   (« … GAGNE AVANT / LA MISE. VOTRE SITE EST / DÉJÀ SUR LA TABLE. »), et les
   3 lignes se posent sur la masse sombre du portrait (y 580→868).
   En `ch` et non en px : le corps suit le rem fluide entre 992 et 1439 px, la
   césure doit suivre avec lui. */
@media (max-width: 991px) { .mwg046-sentence { font-size: 4rem; max-width: 16ch; } }
@media (max-width: 767px) { .mwg046-sentence { font-size: 2.5rem; max-width: 400px; } }
.mwg046-sentence .word { display: inline-block; }
.mwg046-sentence span  { display: inline-block; }
.mwg046-letter { clip-path: polygon(-5% 0, -5% 112%, 105% 112%, 105% 0); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. À PROPOS (inventaire §3.4)
   ═══════════════════════════════════════════════════════════════════════════ */
.article-wrapper {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap-grid);
}
.article-wrapper__left  { grid-column: 1 / span 2; }
.article-wrapper__right { grid-column: 4 / span 5; }
@media (max-width: 991px) {
  .article-wrapper { display: flex; flex-direction: column; gap: 3rem; }
}
/* Le parcours en 36 px tenait sur 2,5 écrans à 390 px. 28 px / 1,3 le ramène
   à une longueur lisible sans étirer la section. Ciblé sur la colonne de
   droite de l'à-propos : les titres des cartes de la méthode, qui partagent
   la classe .u-h3, ne bougent pas, et les mini-cartes non plus. */
@media (max-width: 767px) {
  .article-wrapper__right > .u-h3 { font-size: 1.75rem; line-height: 1.3; }
}
.about-facts p + p { margin-top: .1rem; }

/* Rangée de 4 mini-cartes d'intérêts — ajout propre à Hugo (spec §4.4).
   Pas de fond, pas d'ombre, pas de pastille : libellé typographique seul. */
.interest-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  margin-top: 5rem;
}
@media (max-width: 767px) { .interest-grid { grid-template-columns: 1fr; gap: 0; margin-top: 3rem; } }
.interest-card {
  display: block; border-top: 1px solid var(--line); padding-top: 1rem;
  transition: opacity .3s ease;
}
.interest-card__label {
  display: block; font-size: .625rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold);
}
.interest-card__title {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: 1.5rem; line-height: 1.25; font-weight: 500; margin-top: .5rem;
}
.interest-card__arrow { display: inline-flex; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.interest-card__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.case-content_link svg { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; }
.interest-card__line { font-size: 1rem; line-height: 1.5; color: var(--muted); margin-top: .5rem; }
@media (max-width: 767px) { .interest-card { padding-block: 1rem; } }
@media (hover: hover) and (pointer: fine) {
  .interest-card:hover .interest-card__arrow { transform: translate(3px, -3px); }
}
.interest-card:active { opacity: .7; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. BOUTONS (inventaire §3.5)
   ═══════════════════════════════════════════════════════════════════════════ */
/* z-index : la section vidéo remonte par-dessus (margin-top négatif), les
   boutons doivent rester au-dessus d'elle pour être cliquables. */
.c-section.inner { padding-block: 6rem; position: relative; z-index: 2; }
.nav-button-wrap { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 991px) {
  /* ⚠ Cause n°2 des textes superposés en mobile.
     La référence remonte ce bloc de -9.13rem sous le texte d'à-propos ; chez
     nous la rangée de 4 mini-cartes d'intérêts occupe cette place, et les deux
     boutons venaient se poser dessus (« Voir les projets » sur « Info-Com »).
     La remontée est donc abandonnée en mobile — écart assumé à la référence,
     rendu nécessaire par notre section en plus. */
  .c-section.inner { margin-top: 0; margin-bottom: 4.5rem; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 767px) {
  .nav-button-wrap { flex-direction: column; align-items: center; gap: 1.5em; }
  .nav-button-wrap .btn { width: 45%; min-width: 10.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. MARQUEUR DÉFILANT (inventaire §3.6) — CSS pur
   ═══════════════════════════════════════════════════════════════════════════ */
.c-marquee-horizontal { overflow: hidden; }
@media (max-width: 767px) {
  .c-marquee-horizontal { margin-inline: -1.5rem; padding-inline: 1.5rem; }
}
.c-marquee-horizontal_track {
  display: flex; width: max-content;
  animation: c-marquee-horizontal_timeline 42s linear infinite;
}
.c-marquee-horizontal_list { display: flex; }
.c-marquee-horizontal_item {
  display: flex; align-items: center; justify-content: space-between;
  width: 23.75rem; font-size: 1rem; line-height: 1.5;
}
.c-marquee-horizontal_item svg { width: 24px; height: 24px; stroke: var(--gold); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
@keyframes c-marquee-horizontal_timeline {
  from { transform: translateX(0%); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .c-marquee-horizontal_track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. VIDÉO QUI GRANDIT (inventaire §3.7, §4.8)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠ `z-index: 1` obligatoire : sans lui, .scaling-element ne crée aucun
   contexte d'empilement et le `z-index: 55` de .scaling-video remonte au
   niveau de la page, par-dessus la section des boutons (z-index 2). En
   mobile, la remontée de -18rem faisait passer la vignette vidéo devant
   « Voir les projets » et en masquait la moitié basse. Le 55 reste utile
   à l'intérieur du bloc, il est désormais confiné. */
.scaling-element { position: relative; z-index: 1; }
/* ⚠ `margin-top: -31.18rem` fait remonter ce bloc PAR-DESSUS la section des
   boutons. Son .u-container, large de toute la page et pourtant quasi vide,
   interceptait alors les clics sur « Créer votre site » et « Voir les
   projets » (elementFromPoint renvoyait DIV.u-container).
   Le bloc devient transparent au pointeur ; seule la vidéo le reprend. */
.scaling-element-header { margin-top: -31.18rem; pointer-events: none; }
.scaling-element-header .u-container { pointer-events: none; }
.scaling-element__small-box { width: 20em; aspect-ratio: 16 / 9; }
/* La grande boîte finit pleine largeur : aucune marge latérale. */
.scaling-element-video { padding-inline: 0; margin-top: 24rem; }
.scaling-element__big-box { width: 100%; aspect-ratio: 16 / 9; }
.scaling-video {
  position: absolute; top: 0; left: 0; width: 20em; aspect-ratio: 16 / 9;
  border-radius: 1em; overflow: hidden; z-index: 55; pointer-events: auto;
  will-change: transform; isolation: isolate;
  transform: translateX(0) rotate(.001deg);   /* force la couche GPU */
  background: var(--field);
}
.scaling-video__video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
  /* Plus de remontée en mobile. Mesuré à 390 px : avec -18rem la vignette
     vidéo (2455→2572) et les deux boutons (2473→2583) occupaient la même
     bande, et la vignette débordait sur le marqueur. La composition en
     chevauchement de la référence est une idée de mise en page à deux
     colonnes ; en colonne unique elle n'a plus de sens. Même renoncement
     que pour .c-section.inner. */
  .scaling-element-header { margin-top: 0; }
  .scaling-element__small-box { width: 13em; }
  /* 6rem au lieu de 10rem : la réserve dans laquelle la vidéo grandit laissait
     ~380 px de noir avant les services. La course du Flip est graduée sur la
     distance entre les centres des deux boîtes, donc elle se raccourcit
     d'autant ; l'état final reste la grande boîte en pleine largeur. */
  .scaling-element-video { margin-top: 6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. SERVICES — accordéon (inventaire §3.8, §4.9)
   ═══════════════════════════════════════════════════════════════════════════ */
.mwg035 {
  background: var(--dark); color: var(--fg);
  padding-block: 6rem; border-bottom: 1px solid #000;
  font-size: 16px;                 /* échappe volontairement au rem fluide */
}
.mwg035-ul-main { border-bottom: 1px solid var(--line); }
.mwg035-li {
  position: relative; border-top: 1px solid var(--line);
  padding-inline: 25px; overflow: hidden;
  min-height: 6rem; display: flex; align-items: flex-start;
}
.mwg035-li-inner { display: flex; gap: 2.5rem; padding-top: 1.5rem; width: 100%; }
.accordion-sub { font-size: 1rem; line-height: 1.5; color: var(--muted); flex: 0 0 6rem; }
.accordion-main { flex: 1; max-width: 720px; }
.accordion_heading { font-size: 2.25rem; line-height: 1.33333; font-weight: 500; letter-spacing: -.01em; }
.accordion-content { overflow: hidden; height: 0; }
.accordion-content_text { font-size: 1rem; line-height: 1.5; margin-top: 16px; color: #cfcac1; }
.mwg035-medias {
  position: absolute; right: 25px; top: 1.5rem;
  width: 349px; height: 196px; display: flex; gap: 15px; overflow: hidden;
  clip-path: inset(0 0 100% 0);
}
.mwg035-media { width: 349px; height: 196px; object-fit: cover; flex: 0 0 auto; }
@media (max-width: 991px) {
  /* flex-direction: column obligatoire — .mwg035-medias est un frère de
     .mwg035-li-inner : en `row` il se pose à droite du texte au lieu de
     passer sous lui, et l'image déborde. */
  .mwg035-li { flex-direction: column; padding-block: 1.25rem; padding-inline: 0; flex: 0 0 auto; min-height: 5rem; }
  .mwg035-li-inner { flex-direction: column; gap: .5rem; padding-top: 0; }
  .accordion-sub { flex: none; }
  .accordion_heading { font-size: 1.5rem; line-height: 1.33333; }
  .mwg035-medias {
    position: static; display: block; width: 100%; height: auto;
    margin-top: 1rem; clip-path: none;
  }
  .mwg035-media { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 12.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. TEXTE SUR CHEMIN (inventaire §3.9, §4.10)
   ═══════════════════════════════════════════════════════════════════════════ */
.mwg032 { position: relative; }
/* ⚠ Le bandeau est un enfant DIRECT de .mwg032, jamais enveloppé dans un
   .u-container : `position: sticky` ne peut voyager que dans la hauteur de son
   bloc conteneur. Enveloppé, il resterait figé (bloc de 14 px de haut). Le
   dimensionnement du conteneur est donc porté ici.                          */
.mwg032 > .mwg044-header {
  position: sticky; top: 6rem; z-index: 3;
  width: 100%; max-width: 90rem; margin-inline: auto;
  padding-inline: var(--pad-container);
  margin-top: 6rem; margin-bottom: 0; text-align: center;
}
@media (max-width: 767px) { .mwg032 .mwg044-header { top: 10rem; } }
.mwg032 .mwg044-header.last { opacity: 0; transition: opacity .5s ease; }
.mwg032 .mwg044-header.last.is--visible { opacity: 1; }
.mwg032-pin-height { height: 400vh; }
@media (max-width: 479px) { .mwg032-pin-height { height: 320vh !important; } }
.mwg032-container {
  height: 100vh; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* `flex: 0 0 auto` obligatoire : sans lui le flex-shrink du conteneur ramène
   le SVG à 100 % de largeur, l'échelle du viewBox tombe et le texte rétrécit
   d'un cinquième. À 112 % l'échelle vaut ~1,01 et le corps rendu retombe sur
   les 130 px mesurés sur la référence (inventaire §2.3).                     */
.mwg032-svg {
  flex: 0 0 auto; width: 112%; max-width: none;   /* écrase le max-width:100% du reset */
  height: auto; overflow: visible; color: var(--fg);
}
.mwg032-svg text { font-size: 9vw; font-weight: 500; text-transform: uppercase; fill: currentColor; letter-spacing: -.02em; }
@media (max-width: 768px) { .mwg032-svg text { font-size: 40vw; } }

/* ═══════════════════════════════════════════════════════════════════════════
   15. PROJETS — la pile qui bascule (inventaire §3.10, §4.11)
   ═══════════════════════════════════════════════════════════════════════════ */
/* z-index 4 : au-dessus du bandeau sticky de la section texte-sur-chemin
   (z-index 3), qui sinon se dessine par-dessus la première fiche pendant les
   derniers pixels de sa section. */
.section-case { background: var(--bg); overflow: hidden; position: relative; z-index: 4; }
.case-slide { height: 100vh; }
.case-content-wrapper {
  perspective: 250vw; position: relative;
  width: 100%; height: 100%; background: var(--bg);
}
.case-content {
  position: absolute; inset: 0;
  transform-style: preserve-3d; transform-origin: 50% 10%;
  padding-block: 5rem; display: flex; flex-direction: column;
  background: var(--case-bg); color: var(--case-fg);
  box-shadow: 3px 3px 30px rgba(0, 0, 0, .14);
}
.case-content_warpper {
  max-width: 90rem; width: 100%; margin-inline: auto;
  padding-inline: 1rem; display: flex; flex-direction: column; gap: 6rem;
  height: 100%;
}
/* `gap` obligatoire : sans lui, un nom long (« Trouve Ta Ref ») vient coller
   son numéro en mobile — « TROUVE TA REF(04) » sans espace. */
.case-hat { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.case-text { font-size: 4rem; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; }
.case-content_guts {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: var(--gap-grid);
  flex: 1; min-height: 0;
}
.case-content_left { grid-column: 1 / span 6; display: flex; flex-direction: column; justify-content: space-between; align-self: center; }
.case-content_left p { max-width: 34ch; }
.case-content_link {
  font-size: 2rem; line-height: 1.125; letter-spacing: -.01em;
  text-transform: uppercase; display: inline-flex; align-items: baseline; gap: .35rem;
}
.case-content_link.is--static { opacity: .55; }
/* Les fiches 01 et 04 portent DEUX vrais liens (le site, l'étude de cas).
   La fiche entière n'est plus un <a> : un <a> imbriqué dans un <a> est fermé
   par le parseur et la grille .case-content_guts éclatait. D'où des états
   explicites ici, sur l'élément réellement cliquable.
   ⚠ Ni `opacity` ni `transform` dans ces états : GSAP anime ces deux
   propriétés en style inline pendant la cascade d'apparition. Une transition
   CSS sur `opacity` la ferait traîner de 300 ms derrière le tween (mesuré :
   opacité calculée 0,10 quand GSAP en est à 0,60). On passe donc par le
   soulignement et par `filter`, que le JS ne touche pas. */
a.case-content_link {
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 2px; text-underline-offset: .18em;
  transition: text-decoration-color .3s ease, filter .3s ease;
}
a.case-content_link svg { transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  a.case-content_link:hover { text-decoration-color: currentColor; filter: opacity(.75); }
  a.case-content_link:hover svg { transform: translate(3px, -3px); }
  a.case-content_link--etude:hover svg { transform: translateX(3px); }
}
/* L'anneau doré global passe mal sur le jaune de la fiche 01 : on reprend la
   couleur du texte de la fiche. */
a.case-content_link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
a.case-content_link:active { text-decoration-color: currentColor; filter: opacity(.5); }
/* Projets non livrés : « En chantier » + la ligne d'attente, gardés ensemble
   pour que le `space-between` de .case-content_left ne les sépare pas. */
/* `align-items: flex-start` : sans lui les enfants s'étirent sur toute la
   colonne (526 px à 1440) et la zone cliquable des liens des fiches 01 et 04
   déborderait très loin à droite du texte. Aucun effet visuel. */
.case-content_statut { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.case-statut {
  font-size: .625rem; line-height: 1.6; letter-spacing: .12em;
  text-transform: uppercase; color: inherit; opacity: .5;
}
/* Visuel 16:9 sur 9 des 16 colonnes en desktop (la colonne 7 sert de gouttière). */
.case-content_image-warpper {
  grid-column: 8 / span 9; aspect-ratio: 16 / 9; align-self: center;
  overflow: hidden; max-height: 100%;
  clip-path: inset(0% 0% 100% 0%);
}
.case-content_image-warpper picture { display: block; width: 100%; height: 100%; }
.case-content_image { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 991px) {
  /* La fiche garde une hauteur fixe en mobile, comme la référence : sur une
     .case-slide en `auto`, le pin-spacer de ScrollTrigger s'ajoute à la
     hauteur au lieu de s'y loger, et la section des projets double. */
  .case-slide { height: 100dvh; }
  .case-content { position: static; height: 100dvh; padding-block: 4rem 1rem; }
  .case-content_warpper { gap: 3rem; padding-inline: 1.5rem; }
  .case-text { font-size: 2.5rem; }
  .case-content_guts { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
  /* ⚠ Cause n°1 des textes superposés en mobile.
     .case-content_left est un item flex de .case-content_guts : il pouvait
     être comprimé sous la hauteur de son contenu, et `space-between` répartit
     alors un espace libre NÉGATIF — le paragraphe reste en haut, le lien est
     poussé en bas, et les deux se chevauchent (jusqu'à 349×40 px à 768 px).
     Le bloc ne se comprime plus et empile normalement ; c'est l'image qui
     absorbe la place restante. */
  .case-content_left { justify-content: flex-start; gap: .75rem; flex: 0 0 auto; }
  .case-content_link { font-size: 1.5rem; line-height: 1.125; }
  /* Visuel 9:16 en mobile : pleine largeur, mais hauteur bornée pour que la
     fiche entière (titre + texte + image) tienne dans 100 dvh sans que rien
     ne se chevauche. `aspect-ratio` est abandonné : c'est max-height qui
     commande, et l'image recadre par le haut. */
  .case-content_image-warpper {
    aspect-ratio: auto; width: 100%; flex: 1 1 auto;
    min-height: 0; max-height: 55dvh;
  }
  .case-content_image { object-position: top; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. MÉTHODE — les cartes qui tombent (inventaire §3.11, §4.12)
   ═══════════════════════════════════════════════════════════════════════════ */
.mwg043 { height: 120vh; position: relative; overflow: hidden; background: var(--bg); }
.mwg043-container { width: 300vw; height: 300vw; position: absolute; left: -100vw; top: 0; }
.mwg043-card-wrapper {
  position: absolute; inset: 0; display: flex; justify-content: center;
  pointer-events: none;
}
.mwg043-card {
  width: 21rem; height: 29.52rem;   /* même proportion qu'avant (1,406) */
  margin-top: 50vh;
  transform: translateY(-50%); border-radius: 1vw;
}
/* La carte survolée passe au-dessus de ses voisines. Le z-index doit être posé
   sur le WRAPPER : ce sont les wrappers qui sont frères, pas les cartes. */
.mwg043-card-wrapper:has(.mwg043-card:hover) { z-index: 10; }
.mwg043.on .mwg043-card { pointer-events: initial; }
/* ─── Faces de cartes à jouer (4 as) ─────────────────────────────────────
   Chaque carte porte : un index de coin (« A » + couleur) en haut à gauche,
   le même retourné à 180° en bas à droite, un grand pip central en filigrane
   derrière le texte, et un liseré intérieur à 8 px du bord.               */
.mwg043-card.is--noir  { --pip: #1f1f1f; }
.mwg043-card.is--rouge { --pip: #b3262e; }

.mwg043-card-content {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border-radius: 1.25rem; padding: 2.25rem 2rem; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* Liseré intérieur, comme le cadre d'une vraie carte */
.mwg043-card-content::before {
  content: ''; position: absolute; inset: 8px; z-index: 0;
  border: 1px solid color-mix(in srgb, var(--pip) 22%, transparent);
  border-radius: .9rem; pointer-events: none;
}
.card-index {
  position: absolute; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 1px; line-height: 1; color: var(--pip);
}
.card-index--tl { top: 18px; left: 18px; }
.card-index--br { bottom: 18px; right: 18px; transform: rotate(180deg); }
.card-rank { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.card-index svg { width: 13px; height: 13px; stroke: var(--pip); fill: var(--pip); stroke-width: 1.5; }
/* Grand pip en filigrane, DERRIÈRE le texte */
.card-pip {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  opacity: .08; pointer-events: none;
}
.card-pip svg { width: 62%; height: auto; stroke: var(--pip); fill: var(--pip); stroke-width: 1; }

.mwg043-card-body { position: relative; z-index: 1; }
.mwg043-step { font-size: .625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.mwg043-card-content .u-h3 { margin-top: .5rem; font-size: 2.25rem; }
.mwg043-card-content .u-copy { margin-top: 1rem; font-size: .9375rem; }   /* 15 px */
.mwg043-keys { position: relative; z-index: 1; color: #6a635a; }
.mwg043-keys li + li { margin-top: .1rem; }
@media (max-width: 991px) {
  .mwg043 { height: auto; overflow: visible; }
  .mwg043-container {
    position: static; width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 3rem; padding-block: 3rem;
  }
  .mwg043-card-wrapper { position: static; display: block; pointer-events: initial; }
  .mwg043-card { margin-top: 0; transform: none; height: auto; }
  /* En hauteur `auto`, space-between n'a plus d'espace libre à distribuer :
     la liste de mots-clés vient coller au paragraphe. */
  .mwg043-keys { margin-top: 2rem; }
}
@media (max-width: 767px) { .mwg043-card { width: 80vw; } }

/* ═══════════════════════════════════════════════════════════════════════════
   17. CONTACT + FOOTER — déplacé dans js/site-footer.js
   ───────────────────────────────────────────────────────────────────────────
   Le pied de page est désormais un composant partagé par les 14 pages : son
   CSS est injecté par js/site-footer.js, avec ses jetons de couleur portés
   par .footer-wrap (et non :root) pour ne pas écraser ceux des autres pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 18. Apparitions génériques (inventaire §4.7) ──────────────────────── */
[cards-anim] > * { opacity: 0; }

/* ─── 19. prefers-reduced-motion — mieux que la référence (spec §6) ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [cards-anim] > * { opacity: 1 !important; }
  .willem-loader { display: none; }
  /* ⚠ Le chemin est relatif à CETTE feuille (css/), pas au document : une
     url() passée par variable CSS depuis le HTML se résoudrait en
     /css/Brand/… et renverrait un 404. */
  .willem-header {
    min-height: 100vh; background: var(--bg);
    background-image: url('../Brand/accueil/hero-hugo.webp');
    background-size: cover; background-position: center 30%;
  }
  .mwg032-pin-height { height: auto !important; }
  .mwg032-container { height: auto; padding-block: 4rem; }
  .mwg032 .mwg044-header.last { opacity: 1; }
  .mwg032-svg text { font-size: 6vw; }
  .case-slide { height: auto; }
  .case-content { position: static; height: auto; padding-block: 4rem; }
  .case-content_image-warpper { clip-path: none !important; }
  .mwg043 { height: auto; overflow: visible; }
  .mwg043-container {
    position: static; width: 100%; height: auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2rem; padding-block: 3rem;
  }
  .mwg043-card-wrapper { position: static; display: block; }
  .mwg043-card { margin-top: 0; transform: none; height: auto; }
  .mwg044-duplicate { display: none; }
  .scaling-element-header { display: none; }
  .scaling-element-video { margin-top: 4rem; }
  .scaling-video { position: static; width: 100%; aspect-ratio: 16 / 9; }
}