/* ============================================================================
   LtCi Consulting — CSS résiduel des sections (non exprimable en theme.json)
   Direction : Premium minimaliste — « minimal radical »
   Porté depuis la maquette Claude Design (styles.css + sections.css).
   Le panneau « Tweaks », les variantes de polices (data-typeduo) et les @import
   de polices CDN du prototype sont volontairement ABSENTS (RGPD : polices
   auto-hébergées déclarées dans theme.json).
   ============================================================================ */

/* ----------------------------------------------------------------- SHIM ---
   Aliase les variables générées par WordPress (depuis theme.json) vers les
   noms de tokens du prototype, pour porter la CSS de sections quasi telle quelle.
   (Si une règle « ne s'applique pas », vérifier ici le nom de la variable WP.) */
:root {
  /* couleurs */
  --base: var(--wp--preset--color--base);
  --surface: var(--wp--preset--color--surface);
  --contrast: var(--wp--preset--color--contrast);
  --muted: var(--wp--preset--color--muted);
  --primary: var(--wp--preset--color--primary);
  --on-primary: var(--wp--preset--color--on-primary);
  --on-contrast: var(--wp--preset--color--on-contrast);

  /* dérivations (pas de preset équivalent) — rgba dérivés du contrast #1f1f1f */
  --line: rgba(31, 31, 31, 0.12);
  --line-strong: rgba(31, 31, 31, 0.24);
  --press: var(--wp--preset--color--accent);
  --primary-soft: color-mix(in oklab, var(--primary), white 88%);

  /* typo */
  --font-heading: var(--wp--preset--font-family--sans);
  --font-body: var(--wp--preset--font-family--sans);
  --font-mono: var(--wp--preset--font-family--mono);

  --fs-sm: var(--wp--preset--font-size--sm);
  --fs-base: var(--wp--preset--font-size--base);
  --fs-lg: var(--wp--preset--font-size--lg);
  --fs-xl: var(--wp--preset--font-size--xl);
  --fs-2xl: var(--wp--preset--font-size--2-xl);
  --fs-3xl: var(--wp--preset--font-size--3-xl);
  --fs-section: var(--wp--preset--font-size--section); /* taille de titre de section (= hero), token theme.json */

  /* espacement */
  --sp-xs: var(--wp--preset--spacing--xs);
  --sp-sm: var(--wp--preset--spacing--sm);
  --sp-md: var(--wp--preset--spacing--md);
  --sp-lg: var(--wp--preset--spacing--lg);
  --sp-xl: var(--wp--preset--spacing--xl);
  --sp-2xl: var(--wp--preset--spacing--2-xl);

  --radius-sm: 6px;
  --radius-md: 12px;

  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06);
  --shadow-md: 0 18px 48px -16px rgba(31, 31, 31, 0.20);

  --content: 760px;
  --wide: 1240px;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --ls-label: 0.14em;
  --ls-head: -0.02em;
}

/* ----------------------------------------------------------------- RESET ---
   box-sizing : WordPress ne le pose que sur ses propres blocs (.wp-block-*).
   On le rétablit globalement pour le markup brut (header/footer/carrousel en
   wp:html), sinon le padding de .wrap déborde (overflow horizontal mobile). */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary); color: var(--on-primary); }

/* focus visible — partout, accessible */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--base), 0 0 0 5px var(--primary);
  border-radius: 3px;
}
.band-dark :focus-visible {
  box-shadow: 0 0 0 3px var(--contrast), 0 0 0 5px color-mix(in oklab, var(--primary), white 35%);
}

/* lien d'évitement */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--contrast); color: var(--on-contrast);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font: 500 var(--fs-sm)/1 var(--font-mono); letter-spacing: 0.04em;
  transform: translateY(-160%); transition: transform 0.18s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------- LAYOUT ----- */
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }
.wrap--content { max-width: calc(var(--content) + 6rem); }

/* eyebrow / sur-titre */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.6em;
  margin: 0;
}
.eyebrow::before {
  content: ""; width: 1.75em; height: 1px; background: currentColor; opacity: 0.5;
}
.band-dark .eyebrow { color: color-mix(in oklab, var(--on-contrast), transparent 30%); }
/* Ces 4 « eyebrows » sont en réalité des TITRES DE SECTION → MÊME typo que le hero : IBM Plex Sans
   (var(--font-heading)), graisse 600, casse normale, interlettrage serré (var(--ls-head)), sans le
   tiret de label mono. Taille = référence --fs-section. — demande Laurent.
   Ciblage par section : « PROCHAINE ÉTAPE » (.finalcta) et « PRENDRE CONTACT » (.contactpage) restent
   de vrais eyebrows (mono/majuscule/petit, intacts). */
.sectors .eyebrow,
.casestudies .eyebrow,
.pillars .eyebrow,
.stack .eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-section);
  font-weight: 600;
  text-transform: none;
  letter-spacing: var(--ls-head);
  color: var(--contrast);
}
.sectors .eyebrow::before,
.casestudies .eyebrow::before,
.pillars .eyebrow::before,
.stack .eyebrow::before { display: none; }

/* titres surdimensionnés (au-delà des presets theme.json) */
.h-display { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-head); text-wrap: balance; margin: 0; }
/* .h-xl (uniquement « Les outils du quotidien… », competences.php) : demandé PLUS PETIT que la
   référence de section → clamp ~80 % de --fs-section à chaque palier. */
.h-xl { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 2.6rem); line-height: var(--lh-snug); letter-spacing: var(--ls-head); text-wrap: balance; margin: 0; }
/* .h-lg (uniquement « Une expertise rare… », bandeau-preuve.php) : aligné sur la référence de section. */
.h-lg { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-section); line-height: 1.2; letter-spacing: var(--ls-head); margin: 0; }
.lead { font-size: var(--fs-lg); line-height: 1.5; color: color-mix(in oklab, var(--contrast), transparent 18%); max-width: 36ch; text-wrap: pretty; margin: 0; }

/* ----------------------------------------------------- PARAGRAPHES JUSTIFIÉS ----- */
/* TOUS les paragraphes de corps justifiés, sur toutes les pages (demande Laurent 2026-06-26 —
   override de la reco Rodin « drapeau »). Garde-fou Rodin appliqué : `hyphens: auto` + `lang="fr-FR"`
   (forcé en front via functions.php) pour éviter les « rivières » de blanc, surtout en colonne étroite/mobile.
   Portée = `main` uniquement → header/footer (qui utilisent `.wrap`) ne sont PAS touchés. */
main p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
/* Exceptions : titres (belt-and-suspenders), labels, méta, notes courtes, chips et champs de formulaire restent ferrés à gauche. */
main h1, main h2, main h3, main h4,
main .h-display, main .h-xl, main .h-lg, main .h-section,
main .eyebrow,
main .hero__note,
main .sectorband__note,
main .sectorband__trust,
main .casestudies__note,
main .stack__label,
main .refcase__meta,
main .lineage-sec__lead,
main .lineage-accroche__sub,
main .contact-reassure,
main .chip,
main .wpcf7-form p,
main .wpcf7 p { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.band-dark .lead { color: color-mix(in oklab, var(--on-contrast), transparent 22%); }

/* ----------------------------------------------------------- COMPONENTS --- */
/* boutons — couvre les boutons core (.wp-block-button__link) ET les ancres .btn (wp:html) */
.btn,
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500;
  line-height: 1; padding: 0.95em 1.5em; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; background: var(--primary); color: var(--on-primary);
  white-space: nowrap; text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover,
.wp-block-button__link:hover { background: var(--press); color: var(--on-primary); }
.btn:active,
.wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

/* flèche animée (CTA marqués .btn-arrow) */
.btn .arr { transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1); }
.btn:hover .arr { transform: translateX(4px); }
.btn-arrow .wp-block-button__link::after {
  content: "→"; display: inline-block; margin-left: 0.1em;
  transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.btn-arrow:hover .wp-block-button__link::after { transform: translateX(4px); }

/* variantes */
.btn--ghost {
  background: transparent; color: var(--contrast);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: transparent; border-color: var(--contrast); color: var(--contrast); }
.band-dark .btn--ghost { color: var(--on-contrast); border-color: color-mix(in oklab, var(--on-contrast), transparent 60%); }
.band-dark .btn--ghost:hover { border-color: var(--on-contrast); background: color-mix(in oklab, var(--on-contrast), transparent 92%); color: var(--on-contrast); }

/* lien fléché / texte */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 500; color: var(--primary); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--primary), transparent 65%);
  padding-bottom: 2px; transition: border-color 0.18s ease, gap 0.18s ease;
}
.tlink:hover { border-color: var(--primary); gap: 0.75em; }
.band-dark .tlink { color: color-mix(in oklab, var(--primary), white 45%); border-color: color-mix(in oklab, var(--on-contrast), transparent 70%); }
.band-dark .tlink:hover { border-color: currentColor; }

/* chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0.01em; color: var(--contrast);
  padding: 0.55em 0.9em; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); margin: 0;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex: none; }
.band-dark .chip { color: var(--on-contrast); background: transparent; border-color: color-mix(in oklab, var(--on-contrast), transparent 70%); }

/* placeholder image rayé + légende mono */
.ph {
  position: relative; overflow: hidden;
  background: var(--surface);
  background-image: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 11px);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
}
.ph__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
  padding: 0.7em 0.9em; background: color-mix(in oklab, var(--surface), transparent 8%);
  border-top: 1px dashed var(--line-strong); margin: 0;
}

/* motif data subtil (fond) */
.dotfield {
  background-image: radial-gradient(color-mix(in oklab, var(--contrast), transparent 88%) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.band-dark.dotfield { background-image: radial-gradient(color-mix(in oklab, var(--on-contrast), transparent 90%) 1px, transparent 1.4px); }

/* ------------------------------------------------------------- SECTIONS --- */
.band-dark { background: var(--contrast); color: var(--on-contrast); }
.band-light { background: var(--base); color: var(--contrast); }
/* Air entre grands blocs — resserré (revue Rodin 2026-06-25 : garder le rythme, couper le « vent »). */
.pad-block { padding-block: clamp(3.25rem, 6.5vw, 6rem); }

.rule { height: 1px; background: var(--line); border: 0; }
.band-dark .rule { background: color-mix(in oklab, var(--on-contrast), transparent 86%); }

/* ------------------------------------------------------------- HEADER ----- */
/* Sticky posé sur le WRAPPER de template-part (sélecteur unique : footer = <footer>),
   sinon le sticky sur .site-header ne tient pas — son parent <header> fait sa hauteur. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 80; }
.site-header {
  background: color-mix(in oklab, var(--base), transparent 4%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-scrolled { border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-lg); min-height: 72px; }

.wordmark {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--contrast); text-decoration: none; margin: 0;
}
.wordmark b { color: var(--primary); font-weight: 600; }
.wordmark .tm { font-family: var(--font-mono); font-size: 0.7rem; vertical-align: super; color: var(--muted); margin-left: 0.25em; letter-spacing: 0; }
/* logo (gris, transparent) à la place du texte — sur fond clair. URL relative à ce fichier CSS. */
.wordmark--logo { display: block; height: 48px; aspect-ratio: 513 / 376; background: url(../images/logo-gris.png) no-repeat left center / contain; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); margin-left: auto; }
.nav__links { display: flex; gap: clamp(1rem, 2.2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: 0.95rem; font-weight: 450; color: color-mix(in oklab, var(--contrast), transparent 18%);
  padding: 0.4em 0; position: relative; transition: color 0.16s ease; text-decoration: none;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--primary); transition: right 0.22s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.nav__links a:hover { color: var(--contrast); }
.nav__links a:hover::after { right: 0; }

.header-cta { padding: 0.7em 1.2em; }
.menu-btn { display: none; }

/* ------------------------------------------------------------- HERO ------- */
/* Hero plein texte (photo retirée) : on abandonne le min-height plein écran — il laissait
   un grand vide sous le slogan (« scroll dans le vide », revue Rodin 2026-06-25). */
.hero { position: relative; padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 7vw, 5rem); min-height: clamp(22rem, 54vh, 34rem); display: flex; align-items: center; }
.hero .wrap { display: block; width: 100%; }
.hero__body { max-width: none; display: flex; flex-direction: column; }
.hero__eyebrow { margin-bottom: var(--sp-lg); }
/* Titre hero = TAILLE DE RÉFÉRENCE des titres de section (token `--fs-section`, theme.json).
   La bande CTA finale (« Travaillons ensemble. ») reste juste SOUS la référence. */
.hero h1 { margin: 0 0 var(--sp-md); font-size: var(--fs-section); }
.finalcta .h-display { font-size: clamp(1.2rem, 2.8vw, 3rem); }
.hero h1 .accentword { color: var(--primary); }
.hero__support { margin-bottom: var(--sp-lg); max-width: 46ch; }
.hero__cta { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; }
.hero__cta .wp-block-button { margin: 0; }
.hero__note { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.portrait { aspect-ratio: 3 / 4; width: 100%; margin: 0; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ------------------------------------------------------------- PROOF ------ */
/* Bandeau de preuve : colonne unique (le bloc chiffre/arc de gauche a été retiré) */
.proof .wrap { max-width: 62ch; }
.proof__copy { display: flex; flex-direction: column; gap: var(--sp-lg); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

/* -------------------------------------------------------- SECTOR BAND ----- */
/* Largeur sectorielle anonyme (remplace l'ancien carrousel de logos — revue Rodin 2026-06-25).
   Icônes SVG inline, zéro dépendance, zéro problème de droits, aucun nom de client. */
.sectors { padding-block: clamp(2.6rem, 5vw, 4rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Traits de séparation entre les grands blocs de contenu de l'accueil (demande Laurent) :
   Études de cas | Expertise | Stack technique. Hairline pleine largeur, comme la bande secteurs.
   (« Études de cas » est déjà borné en haut par la bordure basse de .sectors → pas de double trait.) */
.pillars,
.stack { border-top: 1px solid var(--line); }
.sectorband__head { margin-bottom: var(--sp-lg); }
.sectorband__head .eyebrow { margin: 0; }
.sectorband__note { display: block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.sectorband__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-sm); }
.sector {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.6rem; min-height: 104px; padding: var(--sp-md) var(--sp-xs);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color 0.18s ease;
}
.sector:hover { border-color: var(--line-strong); }
.sector svg { width: 38px; height: 38px; color: var(--primary); flex: none; } /* agrandies : 30 → 33 (+10 %) → 38px (demandes Laurent 2026-06-26) */
.sector__label { font-size: var(--fs-sm); line-height: 1.3; color: var(--contrast); }
/* Note sous les icônes : l'anonymat retourné en signal de confiance + hameçon (copy validée Rodin 2026-06-26).
   Réduite + italique pour tenir sur UNE ligne au desktop (demande Laurent) ; pas de max-width (sinon wrap). */
.sectorband__trust,
.casestudies__note { margin: var(--sp-lg) 0 0; font-size: var(--fs-sm); font-style: italic; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) { .sectorband__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .sectorband__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ PILLARS ----- */
/* Triptyque 3 colonnes DÉPLIABLE (revue Rodin 2026-06-26, validé) — disclosure inline accessible.
   align-items:start : déplier une carte n'étire pas les deux autres. */
.pillars > .wrap > .eyebrow { margin: 0 0 var(--sp-lg); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); align-items: start; }
.pillar-card {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color 0.18s ease;
}
.pillar-card:hover { border-color: var(--line-strong); }
.pillar-card:focus-within { border-color: var(--line-strong); }
.pillar-card__h { margin: 0; }
/* head = bouton plein largeur (affordance disclosure, pas un lien de navigation) */
.pillar-card__head {
  appearance: none; -webkit-appearance: none; background: none; border: 0; width: 100%; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: var(--sp-md);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
}
.pillar-card__meta { grid-column: 1; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.01em; color: var(--muted); margin: 0 0 0.5rem; }
.pillar-card__title { grid-column: 1; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: var(--ls-head); text-wrap: balance; margin: 0; color: var(--contrast); }
.pillar-card__chevron {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--primary);
  transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pillar-card__head:hover .pillar-card__chevron { border-color: var(--primary); }
.pillar-card__head[aria-expanded="true"] .pillar-card__chevron { transform: rotate(180deg); background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pillar-card__chevron svg { width: 20px; height: 20px; }
/* panneau partagé sous le triptyque (single-open accordion) */
.pillars__panel { overflow: hidden; transition: height 0.32s cubic-bezier(0.3, 0.7, 0.3, 1); margin-top: var(--sp-sm); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pillars__panel[hidden] { display: none; }
/* inner : hérité de pillar-card__detail-inner (contenu injecté par JS) */
.pillar-card__detail-inner { padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); }
.pillar-card__detail-inner p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.6; }
.pillar-card__case { margin-top: 0.25rem !important; }
.pillar-card__case a { color: var(--primary); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--primary), transparent 70%); }
.pillar-card__case a:hover { border-bottom-color: var(--primary); }
@media (max-width: 860px) { .pillars__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .pillars__panel { transition: none; }
  .pillar-card__chevron { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}

/* ------------------------------------------------------------ LINEAGE ----- */
/* Encart COMPACT à fond léger (revue Rodin v0.5, 2026-06-26) : LtCi-Lineage est SUBORDONNÉ —
   sorti de la bande sombre full-width, il pèse désormais MOINS que les cartes de cas et les piliers. */
.lineage-section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.lineage {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center; padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--contrast), transparent 96%);
  text-decoration: none; color: inherit; transition: border-color 0.18s ease;
}
.lineage:hover { border-color: var(--line-strong); }
.lineage__copy { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.lineage__tag { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--primary); margin: 0; }
.lineage__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: var(--ls-head); text-wrap: balance; margin: 0; color: var(--contrast); }
.lineage__lead { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; max-width: 72ch; }
.lineage__arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--primary);
  transition: transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lineage:hover .lineage__arrow { background: var(--primary); color: var(--on-primary); border-color: var(--primary); transform: rotate(-45deg); }
.lineage__arrow svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- STACK / SKILLS - */
.stack__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-lg); margin-top: var(--sp-lg); }
.stack__group { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stack__label { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin: 0; }
.stack .chips { gap: var(--sp-xs); }

/* ------------------------------------------------------------- CTA -------- */
.finalcta { text-align: center; }
.finalcta .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-lg); }
.finalcta h2 { max-width: 16ch; }
.finalcta .wp-block-button { margin: 0; }

/* ------------------------------------------------------------ FOOTER ------ */
.site-footer { background: var(--contrast); color: var(--on-contrast); padding-block: clamp(3rem, 6vw, 5rem) var(--sp-xl); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-lg); }
.site-footer .wordmark { color: var(--on-contrast); }
/* logo blanc (transparent) dans le pied — sur fond foncé. URL relative à ce fichier CSS. */
.site-footer .footer-logo {
	display: inline-block; width: 120px; aspect-ratio: 513 / 376;
	background: url(../images/logo-blanc.png) no-repeat left center / contain;
}
.site-footer h5 { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: color-mix(in oklab, var(--on-contrast), transparent 45%); margin: 0 0 var(--sp-sm); font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.site-footer a { color: color-mix(in oklab, var(--on-contrast), transparent 22%); transition: color 0.16s ease; text-decoration: none; }
.site-footer a:hover { color: var(--on-contrast); }
.footer-bottom { margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: 1px solid color-mix(in oklab, var(--on-contrast), transparent 86%); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-sm); font-family: var(--font-mono); font-size: var(--fs-sm); color: color-mix(in oklab, var(--on-contrast), transparent 45%); }

/* ----------------------------------------------------- ENTRÉE / REVEAL ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .reveal[data-in="1"] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- MENU MOBILE ---- */
.mobile-menu { display: none; }

/* ----------------------------------------------------------- RESPONSIVE --- */
@media (max-width: 900px) {
  .site-header .wrap { gap: var(--sp-sm); }
  .nav__links { display: none; }
  .nav__links.open { display: flex; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--contrast); }
  .menu-btn svg { width: 22px; height: 22px; }
  .header-cta { display: none; }

  /* menu mobile déployé */
  .mobile-menu { position: fixed; inset: 72px 0 auto 0; z-index: 79; background: var(--base); border-bottom: 1px solid var(--line); padding: var(--sp-md) clamp(1.25rem, 5vw, 3.5rem) var(--sp-lg); display: none; flex-direction: column; gap: var(--sp-sm); }
  .mobile-menu[data-open="1"] { display: flex; }
  .mobile-menu a { font-size: var(--fs-lg); font-weight: 500; padding: 0.3em 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--contrast); }
  .mobile-menu .btn { margin-top: var(--sp-sm); justify-content: center; }

  .hero__body { max-width: 100%; }
  .lineage { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer .wrap { grid-template-columns: 1fr; }
  .hero__cta { gap: var(--sp-sm); }
}
@media (min-width: 901px) { .mobile-menu { display: none !important; } }

/* ----------------------------------------------------- FORMULAIRE (CF7) ---
   Style aligné sur les tokens du thème. Le rouge est réservé aux erreurs
   (couleur strictement sémantique). */
.wpcf7 { margin-top: var(--sp-lg); max-width: 40rem; }
.wpcf7-form p { margin: 0 0 var(--sp-md); display: flex; flex-direction: column; gap: 0.45em; font-size: var(--fs-sm); color: var(--muted); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--contrast);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.75em 0.9em; width: 100%; transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.wpcf7-form textarea { min-height: 9em; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary), transparent 80%); }
.wpcf7-form input[type="submit"] {
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500; line-height: 1;
  margin-top: 0.4em; padding: 0.95em 1.5em; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; background: var(--primary); color: var(--on-primary);
  transition: background 0.18s ease, transform 0.18s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--press); }
.wpcf7-form input[type="submit"]:active { transform: translateY(1px); }
.wpcf7-form .wpcf7-not-valid { border-color: #b00020; }
.wpcf7-not-valid-tip { color: #b00020; font-size: var(--fs-sm); }
.wpcf7-response-output { font-size: var(--fs-sm); border-radius: var(--radius-sm); padding: 0.8em 1em !important; margin: var(--sp-md) 0 0 !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border: 1px solid #b00020; color: #b00020; }
.wpcf7 form.sent .wpcf7-response-output { border: 1px solid var(--primary); color: var(--contrast); }

/* ----------------------------------------- ÉTUDES DE CAS (home, 4 cartes) -- */
.casestudies .wrap { display: flex; flex-direction: column; gap: var(--sp-md); }
.casegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.casecard {
  display: flex; flex-direction: column; gap: 0.55em; padding: var(--sp-md);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  text-decoration: none; color: var(--contrast);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.casecard:hover, .casecard:focus-visible { border-color: var(--contrast); transform: translateY(-3px); }
.casecard__meta { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.casecard__title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; line-height: 1.18; letter-spacing: var(--ls-head); text-wrap: balance; }
.casecard__hook { font-size: var(--fs-sm); line-height: 1.5; color: color-mix(in oklab, var(--contrast), transparent 25%); flex: 1 1 auto; }
.casecard__cta { margin-top: auto; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--primary); }
.casecard:hover .casecard__cta { color: var(--accent); }
@media (max-width: 900px) { .casegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .casegrid { grid-template-columns: 1fr; } }

/* page Références — padding du bandeau (corrige le slug WP cassé « spacing--2xl » → 0 ;
   le bas égale l'espacement inter-cas = 2 × sp-xl, pour respirer comme entre les cartes) */
.refpage { padding-top: var(--sp-2xl); padding-bottom: calc(var(--sp-xl) * 2); }

/* page Références : 4 cas au MÊME gabarit (option C) — série séparée par une hairline (pas de box) */
.refcase { border-top: 1px solid var(--line); padding-top: var(--sp-xl); margin-top: var(--sp-xl); }
.refcase:first-of-type { border-top: none; padding-top: 0; margin-top: var(--sp-lg); }
.refcase__meta { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin: 0 0 0.6em; }
.refcase__title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.12; letter-spacing: var(--ls-head); text-wrap: balance; margin: 0 0 var(--sp-md); }
.refcase h3 { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin: var(--sp-md) 0 0.3em; }
.refcase p { margin: 0; line-height: 1.6; }
.refcase p strong { font-weight: 600; color: var(--contrast); }
/* cas ciblé par une ancre (clic depuis l'accueil) : titre surligné */
.refcase:target .refcase__title { color: var(--primary); }

/* page /ltci-lineage/ : §1 accroche (problème d'abord) + §2 genèse (copy validée Rodin 2026-06-26).
   §3-6 (dont l'animation « révélation d'impact ») à venir. */
.lineagepage { padding-top: var(--sp-2xl); padding-bottom: calc(var(--sp-xl) * 2); }
.lineagepage .eyebrow { margin: 0 0 var(--sp-md); }
/* §1 accroche : déclaration d'ouverture (la question, calme), pas un cri — graisse 500 */
.lineage-accroche { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.45rem, 2.6vw, 2.2rem); line-height: 1.4; letter-spacing: var(--ls-head); text-wrap: balance; margin: 0; color: var(--contrast); }
.lineage-accroche__sub { font-size: var(--fs-lg); line-height: 1.55; color: color-mix(in oklab, var(--contrast), transparent 22%); max-width: 56ch; margin: var(--sp-md) 0 0; text-wrap: pretty; }
.lineage-sec { margin-top: calc(var(--sp-xl) * 1.6); border-top: 1px solid var(--line); padding-top: var(--sp-xl); }
.lineage-sec__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-section); line-height: 1.1; letter-spacing: var(--ls-head); margin: 0 0 var(--sp-md); color: var(--contrast); }
.lineage-sec__lead { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.3; text-wrap: balance; margin: 0 0 var(--sp-md); color: var(--contrast); }
.lineage-sec p { margin: 0 0 var(--sp-md); line-height: 1.7; color: var(--muted); }
.lineage-sec p:last-child { margin-bottom: 0; }
.lineage-sec strong { font-weight: 600; color: var(--contrast); }
/* créneau §4 animation « révélation d'impact » — masqué tant que vide (animation à intégrer) */
.lineage-anim:empty { display: none; }
.lineage-anim { margin: var(--sp-lg) 0; }

/* Animation LtCi-Lineage (CSS SVG v3 — SVG rendu par le theme via filtre the_content, JS dans app.js). */
.lin3{--lin-surface:#ffffff;--lin-ink:#1f1f1f;--lin-muted:#666666;--lin-line:#d8d8d8;width:100%;height:auto;display:block;font-family:'IBM Plex Sans',system-ui,sans-serif}
.lin3 .edge{fill:none;stroke:#d8d8d8;stroke-width:1.4;stroke-linecap:round}
.lin3 .deliver{stroke-dasharray:3 4;opacity:.7}
.lin3 .card{fill:#ffffff;stroke:#d8d8d8;stroke-width:1}
.lin3 .ref-emph{stroke:#666666;stroke-width:1.5}
.lin3 .trio-box{fill:none;stroke:#d8d8d8;stroke-width:1;opacity:.6}
.lin3 .glyph{fill:none;stroke:#1f1f1f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lin3 .glyph-f{fill:#1f1f1f;stroke:none}
.lin3 .label{fill:#666666;font-size:11.5px;font-weight:500;text-anchor:middle}
.lin3 .sublabel{fill:#666666;font-size:9px;text-anchor:middle;opacity:.8;font-family:'IBM Plex Mono',ui-monospace,monospace}
.lin3 .tlabel{text-anchor:start;font-size:11px}
.lin3 .eyebrow-anim{fill:#666666;font-size:9.5px;letter-spacing:.08em;text-anchor:middle;text-transform:uppercase;font-family:'IBM Plex Mono',ui-monospace,monospace}
.lin3 .knode{fill:#ffffff;stroke:#d8d8d8;stroke-width:1}
.lin3 .klink{stroke:#d8d8d8;stroke-width:1;fill:none}
.lin3 .dust{fill:#666666;opacity:0}
.lin3 .flow{fill:#1f1f1f;opacity:0}
.lin3 .reveal{transform-box:fill-box;transform:translateY(0)}
.lin3 .boundary{stroke:#d8d8d8;stroke-width:1;opacity:.5;stroke-dasharray:2 4}
.lin3 .zone{font-size:12px;font-family:'IBM Plex Mono',ui-monospace,monospace;text-anchor:middle;fill:#666666}
.lin3 .leg-clear{fill:#1f1f1f}
/* Défaut = CARTE RÉSOLUE (reduced-motion + no-JS). */
@media (prefers-reduced-motion: no-preference){
  .lin3.lin-run .dust{animation:d3dust 2.4s ease forwards}
  .lin3.lin-run .edge{stroke-dasharray:480;animation:d3edge 1s ease 1.1s both}
  .lin3.lin-run .deliver{animation:d3deliv 1s ease 1.5s both}
  .lin3.lin-run .reveal{animation:d3reveal .8s ease 1.1s both}
  .lin3.lin-run .kfloat{animation:d3float 6s ease-in-out 2.6s infinite}
  .lin3.lin-run .flow{animation:d3flow 3.4s linear 2.6s infinite}
}
@keyframes d3dust{0%{opacity:.5;transform:translate(var(--dx),var(--dy))}55%{opacity:.45;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
@keyframes d3edge{from{stroke-dashoffset:480}to{stroke-dashoffset:0}}
@keyframes d3deliv{from{opacity:0}to{opacity:.7}}
@keyframes d3reveal{from{opacity:0}to{opacity:1}}
@keyframes d3float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes d3flow{0%{opacity:0;offset-distance:0%}10%{opacity:.85}90%{opacity:.85}100%{opacity:0;offset-distance:100%}}
/* §6 CTA en clôture de page : espace avant le bouton « Parlons-en » */
.lineage-cta .wp-block-buttons { margin-top: var(--sp-md); }

/* page /a-propos/ : récit d'expérience (ACTION-01). H1 = baseline « Comprendre avant de transformer ». */
.aboutpage { padding-top: var(--sp-2xl); padding-bottom: calc(var(--sp-xl) * 2); }
.aboutpage .h-display { font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; color: var(--contrast); }
.aboutpage h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.18; letter-spacing: var(--ls-head); text-wrap: balance; margin: calc(var(--sp-xl) * 1.3) 0 var(--sp-md); color: var(--contrast); }
.aboutpage p { margin: 0 0 var(--sp-md); line-height: 1.7; color: color-mix(in oklab, var(--contrast), transparent 10%); }
.aboutpage ul { margin: 0 0 var(--sp-md); padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--sp-sm); }
.aboutpage li { line-height: 1.65; color: var(--muted); }
.aboutpage li strong { color: var(--contrast); }
.aboutpage a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.aboutpage a:hover { color: var(--contrast); }

/* page /contact/ : panneau « parlons-en » — suréticule, titre, formulaire LEAN.
   Nom | E-mail sur une ligne, le reste pleine largeur ; « Votre besoin » en chips (radio). */
.contactpage .eyebrow { margin: 0 0 var(--sp-sm); }
.contactpage .h-display { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.04; }
.contactpage .wpcf7 { margin-top: var(--sp-md); }
.contactpage .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm) var(--sp-md); }
.contactpage .wpcf7-form p { margin: 0; grid-column: 1 / -1; }                /* pleine largeur par défaut */
/* Nom et E-mail pleine largeur (chacun sur sa ligne) */
.contactpage .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; margin: var(--sp-xs) 0 0; }
/* libellé de champ empilé au-dessus de l'input (label entoure texte + input) */
.contactpage .cf-name label, .contactpage .cf-email label,
.contactpage .cf-org label, .contactpage .cf-message label {
  display: flex; flex-direction: column; gap: 0.3em; font-size: var(--fs-sm); color: var(--muted);
}
.contactpage .wpcf7-form input[type="text"],
.contactpage .wpcf7-form input[type="email"],
.contactpage .wpcf7-form textarea { width: 100%; padding: 0.55em 0.8em; }
.contactpage .wpcf7-form textarea { height: 6em; min-height: 6em; }
.contactpage .wpcf7-form input[type="submit"] { padding: 0.7em 1.7em; }

/* honeypot : retiré du flux (invisible aux humains, présent pour les bots) — PAS display:none */
.contactpage .ltci-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* « Votre besoin » : MULTI-SELECT optionnel ([checkbox]) en grille 2 colonnes, état coché net (revue v0.5) */
.contactpage .contact-fieldlabel { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.5em; }
.contactpage .contact-hint { color: color-mix(in oklab, var(--muted), transparent 25%); }
.contactpage .wpcf7-checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.contactpage .wpcf7-checkbox .wpcf7-list-item { margin: 0; }
.contactpage .wpcf7-checkbox .wpcf7-list-item > label {
  display: flex; align-items: center; gap: 0.55em; width: 100%; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0.55em 0.8em;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.25;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.contactpage .wpcf7-checkbox .wpcf7-list-item > label::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em; border-radius: 5px;
  border: 1px solid var(--line-strong); transition: background 0.16s ease, border-color 0.16s ease;
}
.contactpage .wpcf7-checkbox .wpcf7-list-item > label:hover { border-color: var(--contrast); }
.contactpage .wpcf7-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.contactpage .wpcf7-checkbox .wpcf7-list-item > label:has(input:checked) {
  border-color: var(--primary); background: color-mix(in oklab, var(--primary), transparent 90%); color: var(--contrast);
}
.contactpage .wpcf7-checkbox .wpcf7-list-item > label:has(input:checked)::before {
  border-color: var(--primary); background: var(--primary) no-repeat center / 0.8em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-9'/%3E%3C/svg%3E");
}

/* réassurance sous le bouton */
.contactpage .contact-reassure { margin: var(--sp-sm) 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }

/* page /contact/ : panneau « parlons-en » (photo approchable | corps + formulaire) */
/* 2 colonnes ÉQUILIBRÉES (revue v0.5) : GAUCHE = intro (photo + suréticule + titre + ligne + réassurance) ;
   DROITE = formulaire seul. Plus de desktop « tout en longueur » ni de vide bas-gauche. */
.contactpanel { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.contactpanel__intro { display: flex; flex-direction: column; }
.contactpanel__form { min-width: 0; }
.contactphoto { margin: 0 0 var(--sp-md); width: 100%; max-width: 260px; aspect-ratio: 3 / 4; border-radius: var(--radius-md); overflow: hidden; background: var(--base); }
.contactphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contactpanel__line { margin: var(--sp-sm) 0 0; max-width: 46ch; }
@media (max-width: 860px) {
  .contactpanel { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .contactphoto { max-width: 200px; }
  .contactpage .wpcf7-checkbox { grid-template-columns: 1fr; }
}

/* Pages constrained (contact, références) : le .lead a un max-width (36ch) et la mise en page
   « constrained » de WP le CENTRE via `margin: auto !important`. On le ré-aligne à gauche
   (d'où le !important, pour battre la règle WP) + un filet d'air sous le H1. */
.is-layout-constrained > .lead { margin-inline: 0 !important; margin-top: var(--sp-md); }

/* ---- Retours home 2026-06-30 ---- */
/* CTA final : titre « Travaillons ensemble. » + bouton sur le même axe horizontal */
.finalcta__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }
/* Footer : « Me contacter » masqué uniquement sur la home (redondant avec le grand CTA) */
.home .footer-contact-link { display: none; }
/* Footer bas : « Aucun cookie de suivi » au-dessus, ligne légale en dessous (empilées) */
.site-footer .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.4rem; }

/* Gras parcimonieux GLOBAL (directive forme & structure #1, 2026-06-25) : <strong> dans le corps =
   poids 600 (pas le 700 par défaut) + teinte near-ink (--contrast, un cran + foncé que le texte). */
main p strong, main li strong { font-weight: 600; color: var(--contrast); }

/* ---- Page 404 ---- */
.page404 { padding: clamp(5rem, 12vw, 10rem) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md); }
.page404__title { font-size: var(--fs-section); font-weight: 700; letter-spacing: var(--ls-head); margin: 0; }
.page404__text { color: var(--muted); margin: 0; }
.page404__cta { margin-top: var(--sp-sm); }