/* ============================================================
   Nass SEO — Thème par blocs · styles hifi
   Porte tokens/*.css + site.css + components.css du design,
   adaptés au markup des blocs WordPress (classes appliquées
   via l'attribut className des blocs Groupe / Colonnes / etc.).
   ============================================================ */

/* ============================================================
   1. TOKENS (couleurs, typo, espacement, effets)
   ============================================================ */
:root {
  /* Encre / noirs */
  --ink-950:#060607; --ink-900:#0B0B0D; --ink-850:#101013; --ink-800:#16161A;
  --ink-700:#1E1E24; --ink-600:#2A2A31; --ink-500:#3A3A43; --ink-400:#55555F;
  /* Or */
  --gold-50:#FBF5E2; --gold-100:#F4E7B8; --gold-200:#EAD488; --gold-300:#DDBE5C;
  --gold-400:#CFA73D; --gold-500:#C19327; --gold-600:#A2791D; --gold-700:#7E5D17;
  /* Violet Lakers */
  --purple-700:#3E1C5E; --purple-600:#4E2475; --purple-500:#5B2A86;
  --purple-400:#7A45A8; --purple-300:#A479C9; --purple-100:#E4D6F0;
  /* Rouge Jordan */
  --red-50:#FCE9E7; --red-100:#F8CDC8; --red-200:#F1A59C; --red-300:#E97A6E;
  --red-400:#E45146; --red-500:#E1342B; --red-600:#C0241C; --red-700:#931A14;
  /* Papier / clairs */
  --paper:#F6F4EE; --paper-2:#EFEBE1; --paper-3:#E5E0D2; --line:#DCD6C7;
  --line-2:#CCC5B4; --white:#FFFFFF;
  /* Texte */
  --ink-text:#15151A; --ink-text-soft:#4B4A45; --ink-text-faint:#807E76;
  --cream-text:#F3F1E9; --cream-text-soft:#ABA99F; --cream-text-faint:#6E6C64;
  /* Sémantique */
  --positive:#2F8F63; --positive-soft:#DBEFE4; --negative:#C24634; --negative-soft:#F6DED9;
  --caution:#C9871F; --caution-soft:#F6E9CE;
  /* Alias */
  --surface-card:var(--white); --border-subtle:var(--line); --border-strong:var(--line-2);
  --border-on-dark:var(--ink-600); --text-primary:var(--ink-text); --text-secondary:var(--ink-text-soft);
  --text-tertiary:var(--ink-text-faint); --text-gold:var(--gold-600); --text-link:var(--gold-700);
  --focus-ring:var(--gold-500);

  /* Typographie */
  --font-display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --fs-display-xl:clamp(3.5rem,8vw,6.5rem); --fs-display-l:clamp(2.75rem,5.5vw,4.5rem);
  --fs-display-m:clamp(2.1rem,4vw,3.25rem); --fs-h1:clamp(1.9rem,3vw,2.6rem);
  --fs-h2:clamp(1.55rem,2.2vw,2rem); --fs-h3:1.35rem; --fs-h4:1.125rem;
  --fs-body-lg:1.1875rem; --fs-body:1.0625rem; --fs-body-sm:0.9375rem;
  --fs-caption:0.8125rem; --fs-eyebrow:0.75rem; --fs-mono:0.875rem;
  --lh-tight:1.02; --lh-snug:1.12; --lh-heading:1.18; --lh-body:1.62; --lh-relaxed:1.75;
  --ls-display:-0.01em; --ls-tight:-0.02em; --ls-eyebrow:0.18em; --ls-mono:0.02em;

  /* Espacement */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem;
  --space-11:6rem; --space-12:8rem;
  --container:1200px; --container-text:720px;
  --section-y:clamp(4rem,9vw,8rem); --gutter-x:clamp(1.25rem,5vw,4rem);

  /* Effets */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --bw-hair:1px; --bw-med:2px; --bw-bold:3px;
  --shadow-xs:0 1px 2px rgba(11,11,13,.06);
  --shadow-sm:0 2px 6px rgba(11,11,13,.07),0 1px 2px rgba(11,11,13,.05);
  --shadow-md:0 8px 24px rgba(11,11,13,.09),0 2px 6px rgba(11,11,13,.05);
  --shadow-lg:0 20px 48px rgba(11,11,13,.14),0 6px 14px rgba(11,11,13,.07);
  --shadow-card:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(11,11,13,.08);
  --glow-gold:0 0 0 1px rgba(193,147,39,.35),0 10px 40px rgba(193,147,39,.18);
  --glow-soft:0 18px 50px rgba(0,0,0,.45);
  --rule-gold:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  --streak-energy:linear-gradient(120deg,var(--gold-400),var(--red-500));
  --scrim-dark:linear-gradient(180deg,rgba(6,6,7,0) 0%,rgba(6,6,7,.72) 100%);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms;
}

/* ============================================================
   2. BASE
   ============================================================ */
body.nass-seo,
.nass-seo {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.nass-seo a { color: var(--text-link); text-decoration: none; }
.nass-seo a:hover { text-decoration: underline; text-underline-offset: 3px; }
:where(.nass-seo) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Conteneur central (équivalent .wrap) */
.nass-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter-x); width: 100%; }
.nass-wrap--text { max-width: 760px; }

/* ============================================================
   3. SECTIONS
   ============================================================ */
.sec { padding-block: var(--section-y); }
.sec--dark { background: var(--ink-900); color: var(--cream-text); }
.sec--deepest { background: var(--ink-950); color: var(--cream-text); }
.sec--sunken { background: var(--paper-2); }
.sec--paper { background: var(--paper); }
.sec__head { max-width: 640px; margin-bottom: var(--space-8); }
.sec__title {
  font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: var(--fs-display-m); line-height: var(--lh-snug); letter-spacing: var(--ls-display);
  margin: var(--space-3) 0 var(--space-4);
}
.sec--dark .sec__title, .sec--deepest .sec__title { color: var(--cream-text); }
.sec__lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }
.sec--dark .sec__lead, .sec--deepest .sec__lead { color: var(--cream-text-soft); }

/* Eyebrow (label de section) */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-gold); margin: 0;
}
.eyebrow::before { content: ""; width: 22px; height: var(--bw-bold); border-radius: var(--radius-pill); background: var(--rule-gold); }
.sec--dark .eyebrow, .sec--deepest .eyebrow, .hero .eyebrow { color: var(--gold-300); }

/* ============================================================
   4. HEADER (template part)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,8,10,.95); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-700);
}
.site-header .nass-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; }
.site-header .custom-logo, .site-header .wp-block-site-logo img { height: 40px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav .wp-block-navigation__container { gap: var(--space-6); }
.site-nav a, .site-nav .wp-block-navigation-item__content {
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  color: var(--cream-text); text-decoration: none; letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease-out);
}
.site-nav a:hover, .site-nav .wp-block-navigation-item__content:hover { color: var(--gold-300); text-decoration: none; }
.site-nav .wp-block-navigation-item__content:focus-visible { color: var(--gold-300); }

/* ============================================================
   5. HÉRO
   ============================================================ */
.hero { position: relative; background: var(--ink-900); color: var(--cream-text); overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -8%; top: -20%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(193,147,39,.16), transparent 62%); pointer-events: none; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; left: -10%; bottom: -28%; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(225,52,43,.16), transparent 64%); pointer-events: none; z-index: 0;
}
.hero__ghost {
  position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: clamp(11rem,26vw,24rem); line-height: .8; letter-spacing: -0.04em;
  color: rgba(243,241,233,.035); pointer-events: none; user-select: none; z-index: 0; white-space: nowrap; margin: 0;
}
.hero__streak {
  position: absolute; left: -10%; top: 62%; width: 130%; height: 4px;
  background: var(--streak-energy); transform: rotate(-18deg); transform-origin: left center;
  filter: drop-shadow(0 0 18px rgba(225,52,43,.5)); opacity: .85; z-index: 0; pointer-events: none;
}
.hero__in {
  position: relative; z-index: 1; padding-block: clamp(4rem,9vw,7.5rem);
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-9); align-items: center;
}
.hero__title {
  font-family: var(--font-display); font-weight: var(--fw-bold); text-transform: uppercase;
  font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  margin: var(--space-5) 0; color: var(--cream-text);
}
.hero__title em { font-style: normal; color: var(--gold-400); }
.hero__sub { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--cream-text-soft); max-width: 32ch; margin: 0 0 var(--space-7); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); }
.hero__trust { display: flex; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--ink-700); flex-wrap: wrap; }
.hero__media { position: relative; z-index: 1; }
.hero__portrait { max-width: 460px; margin-inline: auto; }

/* ============================================================
   6. BOUTONS (glue blocs core/button)
   ============================================================ */
.nass-seo .wp-block-button__link,
.nass-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 46px; padding: 0 var(--space-5);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
  letter-spacing: .01em; line-height: 1;
  border: var(--bw-med) solid var(--gold-500); border-radius: var(--radius-sm);
  background: var(--gold-500); color: var(--ink-950);
  box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.nass-seo .wp-block-button__link:hover,
.nass-btn:hover { background: var(--gold-400); border-color: var(--gold-400); box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink-950); }
.nass-seo .wp-block-button__link:active { transform: translateY(1px) scale(.99); }
.nass-seo .wp-block-button.is-style-lg .wp-block-button__link { min-height: 56px; padding: 0 var(--space-7); font-size: var(--fs-body); }
.nass-seo .wp-block-button.is-style-sm .wp-block-button__link { min-height: 38px; padding: 0 var(--space-4); font-size: var(--fs-caption); }

/* Variante contour or (fond sombre) */
.nass-seo .wp-block-button.is-style-ghost-gold .wp-block-button__link {
  background: transparent; border-color: var(--gold-500); color: var(--gold-300); box-shadow: none;
}
.nass-seo .wp-block-button.is-style-ghost-gold .wp-block-button__link:hover { background: var(--gold-500); color: var(--ink-950); }

/* Variante contour encre (fond clair) */
.nass-seo .wp-block-button.is-style-outline-ink .wp-block-button__link {
  background: transparent; border-color: var(--ink-900); color: var(--ink-text); box-shadow: none;
}
.nass-seo .wp-block-button.is-style-outline-ink .wp-block-button__link:hover { background: var(--ink-900); color: var(--cream-text); }

/* Modificateurs sur ancres .nass-btn (hors blocs core/button) */
.nass-btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--fs-caption); }
.nass-btn--outline { background: transparent; border-color: var(--ink-900); color: var(--ink-text); box-shadow: none; }
.nass-btn--outline:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--cream-text); }

/* ============================================================
   7. SERVICES
   ============================================================ */
.svc-toggle { display: inline-flex; padding: 4px; background: var(--paper-3); border-radius: var(--radius-pill); margin-bottom: var(--space-7); }
.svc-toggle span { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); padding: 9px 20px; border-radius: var(--radius-pill); color: var(--text-secondary); }
.svc-toggle span.is-active { background: var(--ink-900); color: var(--gold-300); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ns-service {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card); border: var(--bw-hair) solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card); height: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ns-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-300); }
.ns-service--featured { background: var(--ink-800); border-color: var(--ink-600); color: var(--cream-text); box-shadow: var(--glow-soft); }
.ns-service__num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.05rem; color: var(--gold-500); letter-spacing: .04em; }
.ns-service__title { font-family: var(--font-display); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-display); font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }
.ns-service--featured .ns-service__title { color: var(--cream-text); }
.ns-service__desc { font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 0; }
.ns-service--featured .ns-service__desc { color: var(--cream-text-soft); }
.ns-service__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.ns-service__price { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.15rem; }
.ns-service--featured .ns-service__price { color: var(--cream-text); }
.ns-service__price small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--text-tertiary); }
.ns-service--featured .ns-service__price small { color: var(--cream-text-soft); }
.ns-service .nass-btn { width: 100%; }

/* Badges */
.ns-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 11px; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-caption); border-radius: var(--radius-pill); line-height: 1.3; white-space: nowrap; }
.ns-badge--gold { background: var(--gold-100); color: var(--gold-700); }
.ns-badge--purple { background: var(--purple-100); color: var(--purple-600); }
.ns-badge--abs { position: absolute; top: var(--space-4); right: var(--space-4); }

/* ============================================================
   8. MÉTHODE
   ============================================================ */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step { display: flex; flex-direction: column; gap: var(--space-3); }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--ink-800); border: 1px solid var(--ink-600); color: var(--gold-400); }
.step__num { font-family: var(--font-mono); color: var(--gold-400); font-size: 13px; }
.step__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); font-size: var(--fs-h3); margin: var(--space-2) 0 0; color: var(--cream-text); }
.step__d { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--cream-text-soft); margin: 0; }

/* ============================================================
   9. RÉSULTATS / STATS
   ============================================================ */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.ns-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.ns-stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(2.4rem,4vw,3.4rem); line-height: 1; letter-spacing: var(--ls-display); color: var(--text-primary); font-feature-settings: "tnum" 1; }
.ns-stat--on-dark .ns-stat__value { color: var(--cream-text); }
.ns-stat--gold .ns-stat__value { color: var(--gold-500); }
.ns-stat__label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.ns-stat--on-dark .ns-stat__label { color: var(--cream-text-soft); }
.ns-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--positive); }

/* ============================================================
   10. PROGRAMMES
   ============================================================ */
.prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.prog { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); height: 100%; }
.prog__ic { flex: none; width: 56px; height: 56px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--ink-900); color: var(--gold-400); }
.prog__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.prog__d { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-secondary); margin: 0 0 var(--space-4); }

/* ============================================================
   11. QUI SUIS-JE / TIMELINE
   ============================================================ */
.about { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--space-9); align-items: start; }
.about__media { position: sticky; top: 96px; }
.about__lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-secondary); margin: var(--space-4) 0 var(--space-7); max-width: 52ch; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-6); position: relative; display: flex; flex-direction: column; gap: var(--space-6); }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-400), var(--line)); }
.timeline__item { position: relative; margin: 0; }
.timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 1px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px var(--paper); }
.timeline__when { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .07em; color: var(--gold-600); }
.timeline__t { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); font-size: var(--fs-h3); margin: var(--space-1) 0 var(--space-2); color: var(--text-primary); }
.timeline__d { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-secondary); margin: 0; }

/* ============================================================
   12. RESSOURCES (Query Loop)
   ============================================================ */
.res-grid, .wp-block-query.res-query .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.res-query .wp-block-post { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.res-query .wp-block-post-featured-image { margin: 0; }
.res-query .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: block; }
.res-query .wp-block-post-title { font-family: var(--font-body); font-weight: var(--fw-bold); text-transform: none; letter-spacing: 0; font-size: var(--fs-h4); line-height: var(--lh-snug); margin: var(--space-1) 0 0; }
.res-query .wp-block-post-title a { color: var(--text-primary); }
.res-query .wp-block-post-date, .res-query .wp-block-post-terms { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }
/* Cartes article statiques (fallback / V1 sans articles) */
.res { display: flex; flex-direction: column; gap: var(--space-3); }
.res__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-800); border: var(--bw-hair) solid var(--border-on-dark); box-shadow: var(--shadow-md); }
.res__frame img { width: 100%; height: 100%; object-fit: cover; }
.res__tag { position: absolute; left: var(--space-3); top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-950); background: var(--gold-400); padding: 5px 11px; border-radius: var(--radius-pill); }
.res__t { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); margin: var(--space-1) 0 0; color: var(--text-primary); text-wrap: pretty; }
.res__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ============================================================
   13. TÉMOIGNAGE
   ============================================================ */
.quote { max-width: 860px; margin-inline: auto; text-align: center; }
.quote__stars { display: flex; justify-content: center; gap: 6px; margin-bottom: var(--space-3); color: var(--gold-400); }
.quote__stars svg { fill: var(--gold-400); }
.quote__mark { font-family: var(--font-display); font-size: 5rem; line-height: .6; color: var(--gold-500); }
.quote__txt { font-family: var(--font-display); text-transform: uppercase; font-weight: var(--fw-semibold); font-size: var(--fs-display-m); line-height: var(--lh-snug); letter-spacing: var(--ls-display); margin: var(--space-4) 0 var(--space-6); color: var(--cream-text); }
.quote__who { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-500); color: var(--ink-950); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1rem; border: var(--bw-med) solid var(--gold-500); flex: none; }
.quote__name { font-weight: var(--fw-bold); color: var(--cream-text); text-align: left; }
.quote__role { color: var(--cream-text-soft); font-size: var(--fs-body-sm); text-align: left; }

/* ============================================================
   14. CONTACT / CTA
   ============================================================ */
.cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
.cta-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cta-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body); color: var(--cream-text-soft); margin: 0; }
.cta-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: var(--gold-400); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.cta__form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-7); background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-lg); }
.cta__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Champs (formulaire blocs natif ou plugin) */
.cta__form label, .cta__form .ns-field__label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em; color: var(--cream-text-soft); display: block; margin-bottom: var(--space-2); }
.cta__form input, .cta__form select, .cta__form textarea {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--cream-text);
  background: var(--ink-900); border: var(--bw-med) solid var(--ink-600); border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cta__form textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: var(--lh-body); }
.cta__form input::placeholder, .cta__form textarea::placeholder { color: var(--cream-text-faint); }
.cta__form input:focus, .cta__form select:focus, .cta__form textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(193,147,39,.18); }

/* ============================================================
   15. FOOTER (template part)
   ============================================================ */
.site-footer { background: var(--ink-950); color: var(--cream-text-soft); padding-block: var(--space-8); }
.site-footer .nass-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.site-footer .wp-block-site-logo img { height: 40px; }
.ftr__legal { font-size: var(--fs-caption); color: var(--cream-text-faint); }
.ftr__soc { display: flex; gap: var(--space-3); }
.ftr__soc a { width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--ink-600); display: inline-flex; align-items: center; justify-content: center; color: var(--cream-text-soft); transition: all var(--dur-base) var(--ease-out); }
.ftr__soc a:hover { border-color: var(--gold-500); color: var(--gold-300); text-decoration: none; }
.ftr__soc svg { width: 20px; height: 20px; }

/* ============================================================
   16. CADRE PHOTO (MediaFrame)
   ============================================================ */
.ns-media { margin: 0; }
.ns-media__frame { position: relative; aspect-ratio: var(--ns-media-ratio, 4 / 5); border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-800); border: var(--bw-hair) solid var(--border-on-dark); box-shadow: var(--shadow-md); isolation: isolate; }
.ns-media__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ns-media--accent .ns-media__frame { border: 0; }
.ns-media--accent .ns-media__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: var(--bw-bold); background: var(--rule-gold); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ns-media--glow .ns-media__frame { box-shadow: var(--glow-gold); }
.ns-media__eyebrow { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 2; font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-950); background: var(--gold-400); padding: 5px 11px; border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(11,11,13,.25); }
.ns-media__caption { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-body); margin-top: var(--space-3); }
.hero .ns-media__caption { color: var(--cream-text-soft); }

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero__in, .cta { grid-template-columns: 1fr; }
  .svc-grid, .proof-grid, .res-grid, .res-query .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
  .method-grid, .prog-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: var(--space-7); }
  .about__media { position: static; max-width: 420px; }
  .hero__portrait { max-width: 520px; }
}
@media (max-width: 560px) {
  .svc-grid, .proof-grid, .res-grid, .res-query .wp-block-post-template, .cta__row { grid-template-columns: 1fr; }
}

/* ============================================================
   18. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__streak { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}