/**
 * Design system — Institut Psychoneuro / Dr Vincent Paquette
 * Couleurs officielles — DESIGN_SYSTEM.md §3
 * Typographie — §4 | Layout & classes de base — §5 | Cartes — §7 | CTA — §8
 * Traduction code : variables :root, classes réutilisables (.container, .section, .card, .btn),
 * harmonisation Tailwind (sélecteurs [class*="…"]) — pas de doublon par section.
 */

/* Défilement — une seule zone (document), pas de scroll piégé dans <main> */
html {
  overflow-x: clip;
  scroll-padding-top: var(--site-nav-offset, 6rem);
}

.accueil-page {
  scroll-snap-type: y proximity;
}

@media (prefers-reduced-motion: reduce) {
  .accueil-page {
    scroll-snap-type: none;
  }
}

:root {
  --site-nav-offset: 4.5rem;

  /* Couleurs principales — DESIGN_SYSTEM.md §3.18 */
  --color-bg-main: #f7f0e6;
  --color-bg-soft: #fff9f0;
  --color-surface: #fffcf6;
  --color-bg-card: var(--color-surface);
  --color-text-main: #241f1a;
  --color-text-muted: #746a5f;
  --color-dark: #292215;
  --color-dark-deep: #1e1a16;
  --color-dark-alt: #2a211b;
  --color-accent: #b9975b;
  --color-accent-soft: #d8c08a;
  --color-accent-light: var(--color-accent-soft);
  --color-accent-deep: #8a6a3e;
  --color-border: #e6d8c7;
  --color-on-dark: var(--color-bg-soft);

  /* Translucides */
  --color-accent-12: rgba(185, 151, 91, 0.12);
  --color-accent-20: rgba(185, 151, 91, 0.2);
  --color-champagne-16: rgba(216, 192, 138, 0.16);
  --color-ivory-08: rgba(255, 249, 240, 0.08);
  --color-ivory-72: rgba(255, 249, 240, 0.72);
  --color-ivory-82: rgba(255, 249, 240, 0.82);
  --color-text-main-72: rgba(36, 31, 26, 0.72);

  /* Boutons primaires — or officiel (§3.7) */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-hover: var(--color-accent-deep);
  --btn-primary-text: var(--color-text-main);
  --btn-primary-focus: var(--color-accent-soft);

  /* Variante charbon premium (header, hero, CTA sombres) */
  --btn-charcoal-bg: var(--color-dark-deep);
  --btn-charcoal-hover: var(--color-dark-alt);
  --btn-charcoal-text: var(--color-bg-soft);

  /* Alias compat (code existant) */
  --bg-main: var(--color-bg-main);
  --bg-soft: var(--color-bg-soft);
  --bg-card: var(--color-surface);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  --border-soft: var(--color-border);
  --border-soft-2: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --accent-gold: var(--color-accent);
  --accent-gold-hover: var(--color-accent-deep);
  --accent-gold-soft: var(--color-accent-soft);
  --accent-ink: var(--color-accent);
  --accent-sage: var(--color-accent-soft);
  --bg-dark: var(--color-dark-deep);
  --text-on-dark: var(--color-bg-soft);
  --brand-primary: var(--color-accent);
  --brand-surface: var(--color-bg-main);
  --brand-on-surface: var(--color-text-main);
  --brand-outline-variant: var(--color-border);

  /* Typographie officielle — DESIGN_SYSTEM.md §4 */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: var(--font-heading);
  --font-sans: var(--font-body);

  --tracking-display: -1px;
  --tracking-body: 0;
  --tracking-cta: 1px;
  --tracking-wide: 0.08em;

  --leading-display: 1;
  --leading-title: 1.1;
  --leading-body: 1.5;
  --leading-ui: 1.4;
  --paragraph-gap: 1rem;

  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.7rem;
  --text-4xl: 3.6rem;
  --text-hero: clamp(3rem, 6vw, 5.8rem);

  /* Layout officiel — DESIGN_SYSTEM.md §5 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --container-max: 1180px;
  --container-wide-max: 1320px;
  --container-gutter: var(--space-4);

  --section-padding-y: clamp(3.5rem, 6.5vw, 5rem);
  --section-padding-y-md: clamp(5rem, 7.5vw, 7rem);
  --section-padding-y-lg: clamp(5.5rem, 8vw, 8rem);
  --section-header-max: 50rem;
  --section-header-margin: clamp(2.5rem, 4vw, 4rem);

  --card-padding: clamp(1.25rem, 3vw, 1.75rem);
  --card-padding-lg: clamp(2rem, 3.5vw, 2.5rem);
  --card-radius: 1.25rem;
  --card-radius-lg: 1.75rem;

  --grid-gap: var(--space-4);
  --grid-gap-lg: var(--space-6);

  /* Ombres — cartes & surfaces (§5.10, §7) */
  --shadow-card: 0 12px 32px -24px rgba(36, 31, 26, 0.12);
  --shadow-card-hover: 0 16px 40px -28px rgba(36, 31, 26, 0.16);
  --shadow-ambient: 0 24px 52px rgba(36, 31, 26, 0.075);
}

@media (min-width: 768px) {
  :root {
    --site-nav-offset: 4.75rem;
  }
}

/* Material Symbols — réglages uniformes */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  background: var(--color-bg-main);
  color: var(--color-text-main);
}

/* ——— Couleurs officielles — textes & liens (§3) ——— */
p,
.type-prose p {
  color: var(--color-text-muted);
}

li {
  color: var(--color-text-muted);
}

main a[href]:where(
    :not(.site-nav__cta):not(.home-motion-btn):not(.home-svc-cta):not([class*="bg-"])
  ) {
  color: var(--color-accent-deep);
}

main a[href]:where(
    :not(.site-nav__cta):not(.home-motion-btn):not(.home-svc-cta):not([class*="bg-"])
  ):hover {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
.home-motion-btn:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent-20);
  outline-offset: 0;
}

/* ——— Typographie officielle — base interface (Inter) ——— */
p,
li,
a,
nav,
button,
input,
textarea,
select,
label,
small,
footer,
.card,
.badge,
.pill,
.font-body,
.font-sans,
.font-label {
  font-family: var(--font-body);
}

/* Titres principaux (Playfair Display) — DESIGN_SYSTEM.md, règle line-height */
h1,
h2,
.hero-title,
.section-title,
.editorial-title,
.font-headline,
.font-serif,
.serif-font {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-text-main);
}

/* Display / grands titres — ratio 1:1 */
h1,
h1.font-headline,
.hero-title,
.accueil-hero-title,
.display-title,
h2.section-title--display,
#signature-heading,
.accueil-tagline-heading {
  line-height: var(--leading-display);
}

h1,
h1.font-headline,
.hero-title,
.accueil-hero-title {
  font-size: var(--text-hero);
}

/* Titres standards — ratio ~1.1 */
h2,
h2.font-headline,
.section-title {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: var(--leading-title);
}

/* Titres de cartes & repères (Inter par défaut) */
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-size: clamp(var(--text-md), 1.6vw, var(--text-xl));
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-main);
}

h3.font-semibold {
  font-size: clamp(var(--text-md), 1.8vw, var(--text-xl));
}

/* Sous-titres (Inter) */
.hero-subtitle,
.section-subtitle,
.accueil-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(var(--text-md), 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  max-width: min(760px, 72ch);
  color: var(--color-text-muted);
}

/* Surtitres / eyebrows (Inter) */
.section-eyebrow,
.eyebrow,
.site-section-label {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 600;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

/* Boutons & CTA (Inter) — letter-spacing pour cliquabilité */
button,
[type="button"],
[type="submit"],
[type="reset"],
.home-motion-btn,
.site-nav__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.95rem, 1vw, 1rem);
  letter-spacing: var(--tracking-cta);
}

/* Badges & pastilles (Inter) */
.badge,
.pill,
.home-svc-path__pill,
.research-img-meta__badge,
.research-step-num {
  font-family: var(--font-body);
  font-size: clamp(var(--text-xs), 1vw, 0.9rem);
  font-weight: 500;
  line-height: var(--leading-ui);
}

.badge,
.pill {
  background: var(--color-accent-12);
  color: var(--color-accent-deep);
  border: 1px solid var(--color-champagne-16);
}

.signature-section .badge,
.signature-section .pill,
.credibility-section .badge,
.credibility-section .pill {
  background: var(--color-ivory-08);
  color: var(--color-accent-soft);
  border-color: var(--color-champagne-16);
}

/* Paragraphes — ratio 1:1.5, espacement uniforme */
p {
  font-size: clamp(var(--text-base), 1vw, var(--text-md));
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  margin-top: 0;
  margin-bottom: 0;
}

p + p,
.type-prose p + p {
  margin-top: var(--paragraph-gap);
}

.type-prose p {
  line-height: var(--leading-body);
  margin-top: 0;
  margin-bottom: 0;
}

/* Paragraphes consécutifs dans blocs space-y — même écart que p + p */
main [class*="space-y"] > p + p {
  margin-top: var(--paragraph-gap) !important;
}

main section > p,
.type-prose p {
  max-width: 72ch;
}

li {
  line-height: var(--leading-body);
}

/* Tailwind — aligne leading-relaxed sur le ratio corps officiel */
.leading-relaxed {
  line-height: var(--leading-body);
}

/* Textes dans les cartes */
.card p,
.service-card p,
.approach-card p,
.timeline-card p,
.motive-card p,
.proof-card p,
.feature-card p,
.step-card p,
.research-card p {
  line-height: var(--leading-body);
  margin-top: 0;
  margin-bottom: 0;
}

.card p + p,
.service-card p + p,
.approach-card p + p,
.timeline-card p + p,
.motive-card p + p,
.proof-card p + p,
.feature-card p + p,
.step-card p + p,
.research-card p + p {
  margin-top: var(--paragraph-gap);
}

/* En-têtes de section — espacements : § Layout officiel (.section-header, .section-eyebrow, etc.) */

/* ——— Contextes éditoriaux (Playfair Display) ——— */
.timeline-card h3,
.accueil-motif-category__title,
.credibility-slide-card__title,
.research-step-header__title,
.accueil-tagline-heading,
.type-editorial,
.editorial-title,
.research-quote__text,
.research-intro-pull,
.scrub-copy {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}

.timeline-card h3,
.research-step-header__title {
  line-height: var(--leading-title);
}

/* Accroches (citation latérale) */
[class*="border-l-2"].font-headline,
blockquote.font-headline,
p[class*="border-l-2"].font-semibold,
p[class*="border-l-2"].italic {
  font-family: var(--font-heading);
}

/* Lockup marque — header (Playfair + Inter, exception §4) */
.site-nav__brand .site-logo-name,
.site-nav__brand .brand-name {
  display: block;
  width: max-content;
  max-width: min(72vw, 15.5rem);
  margin-inline: auto;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(0.975rem, 1.65vw, 1.1875rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text-main);
  text-align: center;
  white-space: nowrap;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.site-nav__brand .site-logo-tagline,
.site-nav__brand .brand-subtitle {
  display: block;
  width: max-content;
  max-width: min(92vw, 22rem);
  margin-top: 0.3rem;
  margin-inline: auto;
  margin-inline-end: -0.24em;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.65rem, 1.1vw, 0.72rem);
  font-weight: 600;
  line-height: var(--leading-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 640px) {
  .site-nav__brand .site-logo-tagline,
  .site-nav__brand .brand-subtitle {
    font-size: clamp(0.48rem, 1.9vw, 0.54rem);
    letter-spacing: 0.06em;
    margin-inline-end: -0.06em;
    white-space: nowrap;
  }
}

.dark .site-nav__brand .site-logo-tagline,
.dark .site-nav__brand .brand-subtitle {
  color: var(--color-text-muted);
}

/* Pied de page — interface (Inter) */
footer .site-footer-name {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-body);
}

/* Cartes services accueil (Inter) */
.home-svc-path,
.home-svc-path h3,
.home-svc-path__title,
.home-svc-path__num {
  font-family: var(--font-body);
}

/* Parcours — titres de sous-section (éditorial) */
#parcours-professionnel > div > section > header > h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Page Services — titres de fiches dans les cartes (Inter) */
section[aria-label="Services détaillés"] article h2 {
  font-family: var(--font-body);
  font-size: clamp(var(--text-md), 1.8vw, var(--text-xl));
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-body);
}

/* Page Services — texte clair sur fonds espresso (#241F1A) */
.service-card-header--dark,
section[aria-label="Services détaillés"] article [class*="bg-[#241F1A]"] {
  color: var(--color-bg-soft);
  background-color: #241f1a;
}

/* h2 — la règle globale Playfair force #241F1A ; blanc explicite sur fond sombre */
.service-card-header--dark h2,
section[aria-label="Services détaillés"] .service-card-header--dark h2,
section[aria-label="Services détaillés"] article [class*="bg-[#241F1A]"] h2 {
  color: #ffffff !important;
}

/* Services 01, 04, 07 — titres en or sur fond espresso */
.service-card-header--dark h2.service-card-title--gold,
section[aria-label="Services détaillés"] .service-card-header--dark h2.service-card-title--gold {
  color: var(--color-accent-soft) !important;
}

.service-card-header--dark [class*="text-\\[\\#D8C08A\\]"],
section[aria-label="Services détaillés"] article [class*="bg-[#241F1A]"] [class*="text-\\[\\#D8C08A\\]"] {
  color: var(--color-accent-soft) !important;
}

/* Page Services — corps de texte sur fond espresso */
.service-article--dark {
  background-color: var(--color-dark) !important;
  border-color: color-mix(in srgb, var(--color-bg-soft) 14%, transparent) !important;
}

.service-card-body--dark {
  background-color: var(--color-dark);
  color: var(--color-bg-soft);
}

.service-card-body--dark p,
.service-card-body--dark li,
.service-card-body--dark [class*="text-stone-300"],
.service-card-body--dark [class*="text-on-surface-variant"] {
  color: var(--color-bg-soft) !important;
}

/* Encadrés CTA charbon — titres et corps lisibles sur fond #1E1A16 */
[class*="bg-[#1E1A16]"].text-white h2.font-headline,
[class*="bg-[#1E1A16]"].text-white h2.font-headline.section-title--compact {
  color: var(--color-bg-soft) !important;
}

[class*="bg-[#1E1A16]"].text-white p,
[class*="bg-[#1E1A16]"].text-white [class*="text-stone-300"] {
  color: var(--color-ivory-82) !important;
}

[class*="bg-[#1E1A16]"].text-white .btn.btn-secondary {
  background: color-mix(in srgb, var(--color-bg-soft) 11%, transparent);
  color: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-accent-soft) 42%, var(--color-champagne-16));
}

[class*="bg-[#1E1A16]"].text-white .btn.btn-secondary:hover,
[class*="bg-[#1E1A16]"].text-white .btn.btn-secondary:focus-visible {
  background: color-mix(in srgb, var(--color-bg-soft) 18%, transparent);
  color: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-accent-soft) 55%, transparent);
}

/* H1 pages intérieures — largeur de lecture maîtrisée */
h1.font-headline:not(.accueil-hero-title) {
  text-wrap: balance;
}

/* H2 compact — sous-sections et blocs secondaires */
h2.section-title--compact,
h2.font-headline.section-title--compact {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: var(--leading-title);
}

/* H2 display — fermetures signature / impact éditorial */
h2.section-title--display,
#signature-heading {
  font-size: clamp(2.7rem, 5.5vw, var(--text-4xl));
}

/* Tagline accueil — accroche éditoriale (p.font-headline) */
.accueil-tagline-heading {
  font-size: clamp(2rem, 7vw, 3.85rem);
  font-style: italic;
}

/* Citation — section recherche accueil (lecture = corps) */
.home-quote-block.font-headline {
  font-size: clamp(1.15rem, 2vw, 1.25rem);
  line-height: var(--leading-body);
  font-style: italic;
}

/* Responsive typographique — DESIGN_SYSTEM.md §4.12 */
@media (max-width: 767px) {
  :root {
    --text-hero: clamp(2.4rem, 11vw, 3.6rem);
  }

  h2,
  h2.font-headline,
  .section-title {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: var(--leading-title);
  }

  h2.section-title--compact,
  h2.font-headline.section-title--compact {
    font-size: clamp(1.65rem, 5.5vw, 2rem);
  }

  h2.section-title--display,
  #signature-heading {
    font-size: clamp(2.2rem, 8vw, 2.85rem);
  }

  .accueil-tagline-heading {
    font-size: clamp(1.85rem, 9vw, 2.75rem);
  }
}

/* ——— Layout officiel — DESIGN_SYSTEM.md §5 ——— */

.container {
  width: min(100% - 2rem, var(--container-max));
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container-wide {
  width: min(100% - 2rem, var(--container-wide-max));
  max-width: var(--container-wide-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Harmonise les wrappers Tailwind existants (max-w-7xl / max-w-6xl) */
main .mx-auto.max-w-7xl,
footer .mx-auto.max-w-7xl {
  width: min(100% - 2rem, var(--container-max));
  max-width: var(--container-max);
}

main .mx-auto.max-w-6xl {
  width: min(100% - 2rem, var(--container-wide-max));
  max-width: var(--container-wide-max);
}

.section {
  padding-block: var(--section-padding-y);
  padding-inline: var(--container-gutter);
}

.section--spacious {
  padding-block: var(--section-padding-y-lg);
}

.section--compact {
  padding-block: clamp(var(--space-8), 5vw, var(--space-12));
}

.section-inner {
  width: 100%;
}

.section-header {
  max-width: var(--section-header-max);
  margin-bottom: var(--section-header-margin);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

.section-eyebrow,
.site-section-wayfinder {
  margin-bottom: var(--space-3);
}

.section-title,
h2.section-title,
h2.section-title--compact,
h2.section-title--display {
  margin-bottom: var(--space-2);
}

.section-subtitle {
  max-width: min(100%, 47.5rem);
  margin-bottom: var(--space-6);
}

/* Grille officielle */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

.grid-4 {
  grid-template-columns: 1fr;
}

.cards-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

.split-layout {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: 1fr;
  align-items: start;
}

.split-layout__main,
.split-layout__aside {
  min-width: 0;
}

@media (min-width: 640px) {
  .grid-2,
  .cards-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4,
  .cards-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .split-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }

  .split-layout__main {
    grid-column: 1 / span 7;
  }

  .split-layout__aside {
    grid-column: 8 / span 5;
  }

  .grid-3,
  .cards-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-4,
  .cards-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sections page d’accueil — padding vertical cohérent */
section[data-home-section]:not(#accueil-hero) {
  padding-block: var(--section-padding-y);
}

@media (min-width: 768px) {
  section[data-home-section]:not(#accueil-hero) {
    padding-block: var(--section-padding-y-md);
  }
}

section[data-home-section].credibility-section:not(.credibility-section--above-fold):not(.credibility-section--viewport),
section[data-home-section].premium-gold-section,
section[data-home-section].accueil-services-editorial {
  padding-block: var(--section-padding-y-lg);
}

@media (min-width: 768px) {
  section[data-home-section].accueil-motifs-section {
    padding-block: var(--section-padding-y-lg);
  }
}

/* Cartes — structure layout (couleurs : §3.8) */
.card,
.service-card,
.motive-card,
.proof-card,
.feature-card,
.step-card,
.research-card,
.stat-card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-card);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.card h3,
.card h4,
.service-card h3,
.motive-card h3,
.proof-card h3,
.feature-card h3,
.step-card h3,
.research-card h3,
.stat-card h3 {
  color: var(--color-text-main);
}

@media (hover: hover) {
  .card:hover,
  .service-card:hover,
  .motive-card:hover,
  .proof-card:hover,
  .feature-card:hover,
  .step-card:hover,
  .research-card:hover,
  .stat-card:hover {
    border-color: var(--color-accent-20);
    box-shadow: var(--shadow-card-hover);
  }
}

.card-large,
.card--lg {
  padding: var(--card-padding-lg);
  border-radius: var(--card-radius-lg);
}

.home-svc-path,
.credibility-pillar {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  text-align: left;
}

.signature-section .credibility-card {
  padding: var(--card-padding-lg);
  border-radius: var(--card-radius-lg);
}

/* ——— Boutons officiels — §6.4, §8, §3.7 ——— */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1vw, 1rem);
  font-weight: 600;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-cta);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primaire — or (CTA dominant sur fond clair) */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: transparent;
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-text);
}

.btn-primary:focus-visible {
  outline-color: var(--btn-primary-focus);
}

/* Primaire charbon — hero, pages intérieures, CTA rendez-vous */
.btn-primary.btn-primary--charcoal,
.btn-primary--charcoal {
  background: var(--btn-charcoal-bg);
  color: var(--btn-charcoal-text);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(30, 26, 22, 0.14);
}

.btn-primary.btn-primary--charcoal:hover,
.btn-primary--charcoal:hover {
  background: var(--btn-charcoal-hover);
  color: var(--btn-charcoal-text);
}

/* Primaire clair — fond sombre (recherche, signature) */
.btn-primary.btn-primary--on-dark,
.btn-primary--on-dark {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.btn-primary.btn-primary--on-dark:hover,
.btn-primary--on-dark:hover {
  background: var(--color-accent-soft);
  color: var(--color-text-main);
}

/* Secondaire — fond clair */
.btn-secondary {
  background: color-mix(in srgb, var(--color-bg-soft) 80%, transparent);
  color: var(--color-text-main);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.btn-secondary:hover {
  background: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border));
  color: var(--color-text-main);
}

.btn-secondary:focus-visible {
  outline-color: var(--color-accent-soft);
}

/* Secondaire — fond sombre */
.signature-section .btn-secondary,
.credibility-section .btn-secondary,
#accueil-approche.premium-gold-section .btn.btn-secondary,
[class*="bg-[#1E1A16]"] .btn.btn-secondary,
[class*="bg-[#292215]"] .btn.btn-secondary,
.bg-inverse-surface .btn.btn-secondary {
  background: var(--color-ivory-08);
  color: var(--color-bg-soft);
  border-color: var(--color-champagne-16);
}

.signature-section .btn-secondary:hover,
.credibility-section .btn-secondary:hover,
#accueil-approche.premium-gold-section .btn.btn-secondary:hover,
[class*="bg-[#1E1A16]"] .btn.btn-secondary:hover,
[class*="bg-[#292215]"] .btn.btn-secondary:hover,
.bg-inverse-surface .btn.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-bg-soft) 12%, transparent);
  color: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
}

/* Modificateurs layout */
.btn--block {
  width: 100%;
  justify-content: space-between;
  white-space: normal;
}

.btn--pill {
  border-radius: 9999px;
  padding: 1.15rem 2.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  min-height: 3.5rem;
}

/* Alias historique */
.btn.btn-charcoal {
  background: var(--btn-charcoal-bg);
  color: var(--btn-charcoal-text);
}

.btn.btn-charcoal:hover {
  background: var(--btn-charcoal-hover);
}

.home-svc-paths {
  gap: var(--grid-gap);
}

.home-svc-header {
  max-width: var(--section-header-max);
  margin-bottom: var(--section-header-margin);
}

.accueil-motifs-header {
  max-width: var(--section-header-max);
  margin-inline: auto;
  margin-bottom: var(--section-header-margin);
  text-align: center;
}

#accueil-cta-final .mx-auto.max-w-3xl {
  max-width: min(100%, 42rem);
}

#accueil-cta-final [data-home-cta="block"] {
  margin-bottom: var(--space-6);
}

.accueil-hero-actions,
#accueil-cta-final .mt-10.flex {
  gap: var(--space-3);
}

.accueil-hero-actions a,
#accueil-cta-final .home-motion-btn {
  min-height: 3.25rem;
}

.accueil-hero-actions {
  align-items: flex-start;
  justify-content: flex-start;
}

.accueil-hero-cta-primary {
  border-radius: 9999px;
  padding-inline: 1.5rem 1.35rem;
}

.accueil-hero-cta-primary__icon {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.accueil-hero-cta-primary:hover .accueil-hero-cta-primary__icon,
.accueil-hero-cta-primary:focus-visible .accueil-hero-cta-primary__icon {
  transform: translate(2px, -2px);
}

/* Visuels — largeur et respiration */
.layout-media {
  max-width: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
}

main section img {
  max-width: 100%;
  height: auto;
}

.glass-nav {
  background: color-mix(in srgb, var(--color-bg-main) 86%, transparent);
  backdrop-filter: blur(20px);
}

.ambient-shadow {
  box-shadow: var(--shadow-ambient);
}

/* Palette globale — tokens DESIGN_SYSTEM.md */
.bg-surface,
.bg-background,
.bg-surface-bright,
[class*="bg-[#fbf9f5]"],
[class*="bg-[#fdfbf7]"],
[class*="bg-[#f8f4ec]"],
[class*="bg-[#F7F0E6]"],
[class*="bg-[#f7f0e6]"] {
  background-color: var(--color-bg-main) !important;
}

.bg-surface-container-low,
.bg-surface-container,
.bg-surface-variant,
.bg-secondary-container,
[class*="bg-[#faf8f4]"],
[class*="bg-[#f5f3ef]"],
[class*="bg-[#f1eadc]"],
[class*="bg-[#ebe9e4]"],
[class*="bg-[#eae1d3]"],
[class*="bg-[#FFF9F0]"],
[class*="bg-[#fff9f0]"],
[class*="bg-[#f0f4f1]"],
[class*="bg-[#eef1f5]"],
[class*="bg-[#f5f0e6]"] {
  background-color: var(--color-bg-soft) !important;
}

.bg-surface-container-lowest {
  background-color: var(--color-surface) !important;
}

[class*="bg-[#F6EFE4]"],
[class*="bg-[#f6efe4]"],
[class*="bg-[#FFFCF6]"],
[class*="bg-[#fffcf6]"] {
  background-color: var(--color-surface) !important;
}

/* Accent or — badges, repères (pas les CTA) */
.bg-primary:not(a):not(button),
.bg-tertiary:not(a):not(button),
div.bg-primary,
span.bg-primary {
  background-color: var(--color-accent) !important;
}

.bg-primary-container,
.bg-tertiary-container,
.bg-primary-fixed,
.bg-tertiary-fixed,
[class*="bg-[#fde49e]"],
[class*="bg-[#eec675]"],
[class*="bg-[#c5a059]"] {
  background-color: color-mix(in srgb, var(--color-accent-soft) 35%, var(--color-surface)) !important;
}

.bg-primary-fixed-dim,
.bg-tertiary-fixed-dim {
  background-color: var(--color-accent-12) !important;
}

.hover\:bg-\[\#fde49e\]:hover,
[class*="hover:bg-[#fde49e]"]:hover {
  background-color: color-mix(in srgb, var(--color-accent-soft) 40%, var(--color-surface)) !important;
}

/* Sections sombres — espresso (#292215) */
[class*="bg-[#141c2c]"],
[class*="bg-[#141C2C]"],
[class*="bg-[#1b1c1a]"],
[class*="bg-[#1B1C1A]"],
[class*="bg-[#292215]"],
[class*="bg-[#241F1A]"],
[class*="bg-[#241f1a]"],
.bg-inverse-surface {
  background-color: var(--color-dark) !important;
}

/* Charbon profond — footer, hero, CTA premium */
[class*="bg-[#1E1A16]"],
[class*="bg-[#1e1a16]"],
[class*="bg-[#2A211B]"],
[class*="bg-[#2a211b]"],
[class*="bg-[#1E1A17]"] {
  background-color: var(--color-dark-deep) !important;
}

.text-on-surface,
.text-on-background,
[class*="text-on-surface"],
[class*="text-on-background"],
[class*="text-[#1b1c1a]"],
[class*="text-[#251e00]"],
[class*="text-[#2a1e05]"],
[class*="text-[#2A1E05]"],
[class*="text-[#241F1A]"],
[class*="text-[#241f1a]"] {
  color: var(--color-text-main) !important;
}

.text-on-surface-variant,
.text-secondary,
[class*="text-on-surface-variant"],
[class*="text-secondary"],
[class*="text-[#685d4a]"],
[class*="text-[#4a473e]"],
[class*="text-[#746A5F]"],
[class*="text-[#746a5f]"] {
  color: var(--color-text-muted) !important;
}

.text-primary,
.text-tertiary,
.text-on-primary-container,
.text-on-tertiary-container,
.text-on-primary-fixed-variant,
.text-on-tertiary-fixed-variant,
[class*="text-primary"],
[class*="text-tertiary"],
[class*="text-[#775a19]"],
[class*="text-[#c5a059]"],
[class*="text-[#B79249]"],
[class*="text-[#b79249]"],
[class*="text-[#B9975B]"],
[class*="text-[#b9975b]"],
[class*="text-[#eec675]"],
[class*="text-[#fde49e]"] {
  color: var(--color-accent) !important;
}

/* Anciens bleus / verts — ramenés à la palette */
[class*="text-[#2c4a5e]"],
[class*="text-[#2C4A5E]"],
[class*="text-[#5f7161]"] {
  color: var(--color-text-main) !important;
}

[class*="text-[#5a4511]"] {
  color: var(--color-accent-deep) !important;
}

[class*="text-[#F5EEDF]"],
[class*="text-[#f5eedf]"] {
  color: var(--color-on-dark) !important;
}

[class*="text-[#DDD2BF]"],
[class*="text-[#ddd2bf]"] {
  color: var(--color-ivory-82) !important;
}

[class*="hover:text-[#775a19]"]:hover,
[class*="hover:text-[#B79249]"]:hover,
[class*="hover:text-[#c5a059]"]:hover,
[class*="focus-visible:text-[#775a19]"]:focus-visible,
[class*="focus-visible:text-[#c5a059]"]:focus-visible {
  color: var(--color-accent) !important;
}

[class*="hover:border-[#775a19]"]:hover,
[class*="focus-visible:border-[#775a19]"]:focus-visible,
[class*="hover:border-[#c5a059]"]:hover {
  border-color: var(--border-soft-2) !important;
}

.group:hover [class*="group-hover:text-[#B79249]"] {
  color: var(--color-accent-soft) !important;
}

[class*="decoration-[#B79249]"],
[class*="decoration-[#b79249]"],
[class*="decoration-[#B9975B]"],
[class*="decoration-[#b9975b]"],
[class*="decoration-primary"] {
  text-decoration-color: color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
}

[class*="shadow-\[#775a19\]"],
[class*="shadow-primary"] {
  --tw-shadow-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

[class*="text-white"],
[class*="text-stone-100"],
[class*="text-stone-200"],
[class*="text-stone-300"] {
  color: var(--text-on-dark) !important;
}

/* Texte atténué sur fond clair uniquement */
:not(footer):not([class*="bg-[#1E1A16]"]):not([class*="bg-[#141c2c]"]):not([class*="bg-[#1b1c1a]"]):not([class*="bg-[#1B1C1A]"]):not([class*="bg-[#1E1A17]"]):not([class*="bg-[#2A211B]"]) [class*="text-stone-400"],
:not(footer):not([class*="bg-[#1E1A16]"]):not([class*="bg-[#141c2c]"]):not([class*="bg-[#1b1c1a]"]):not([class*="bg-[#1B1C1A]"]):not([class*="bg-[#1E1A17]"]):not([class*="bg-[#2A211B]"]) [class*="text-stone-500"] {
  color: var(--color-text-muted) !important;
}

footer [class*="text-stone-300"],
footer [class*="text-stone-400"],
footer [class*="text-stone-500"],
[class*="bg-[#1E1A16]"] [class*="text-stone-400"],
[class*="bg-[#141c2c]"] [class*="text-stone-400"],
[class*="bg-[#1b1c1a]"] [class*="text-stone-400"],
[class*="bg-[#1B1C1A]"] [class*="text-stone-400"],
[class*="bg-[#1E1A17]"] [class*="text-stone-400"],
[class*="bg-[#2A211B]"] [class*="text-stone-400"],
[class*="bg-[#292215]"] [class*="text-stone-400"] {
  color: var(--color-ivory-82) !important;
}

footer [class*="text-stone-500"],
[class*="bg-[#1E1A16]"] [class*="text-stone-500"],
[class*="bg-[#141c2c]"] [class*="text-stone-500"],
[class*="bg-[#1b1c1a]"] [class*="text-stone-500"],
[class*="bg-[#1B1C1A]"] [class*="text-stone-500"],
[class*="bg-[#292215]"] [class*="text-stone-500"],
[class*="bg-[#241F1A]"] [class*="text-stone-500"] {
  color: var(--color-ivory-82) !important;
}

/* Texte secondaire sur fonds charbon / espresso */
.text-on-dark-muted,
.signature-section [class*="text-white/72"],
[class*="bg-[#241F1A]"] [class*="text-white/72"],
[class*="bg-[#1E1A16]"] [class*="text-white/72"],
[class*="bg-inverse-surface"] [class*="text-white/72"] {
  color: var(--color-ivory-82) !important;
}

.signature-section__panel:not(.signature-section__panel--light) {
  border-color: color-mix(in srgb, var(--color-bg-soft) 16%, transparent) !important;
  background: color-mix(in srgb, var(--color-dark-deep) 78%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 240, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.22);
}

/* SVG & décorations inline */
svg[fill="#775a19"],
svg [fill="#775a19"],
svg[fill="#775A19"],
svg [fill="#775A19"],
svg [fill="#B9975B"],
svg [fill="#b9975b"] {
  fill: var(--color-accent) !important;
}

svg[stroke="#775a19"],
svg [stroke="#775a19"],
svg[stroke="#2c4a5e"],
svg [stroke="#2C4A5E"] {
  stroke: var(--color-accent) !important;
}

[class*="ring-offset-[#fbf9f5]"],
[class*="ring-offset-[#F7F0E6]"] {
  --tw-ring-offset-color: var(--color-bg-main) !important;
}

[class*="ring-offset-[#141c2c]"],
[class*="ring-offset-[#292215]"] {
  --tw-ring-offset-color: var(--color-dark) !important;
}

[class*="ring-offset-[#1E1A16]"] {
  --tw-ring-offset-color: var(--color-dark-deep) !important;
}

/* Bouton secondaire sur fond sombre (§3) */
[class*="bg-[#1E1A16]"] a[class*="bg-white/"],
[class*="bg-[#141c2c]"] a[class*="bg-white/"],
[class*="bg-[#292215]"] a[class*="bg-white/"],
[class*="bg-[#1b1c1a]"] a[class*="border-white"] {
  border-color: var(--color-accent-soft) !important;
  color: var(--color-bg-soft) !important;
}

[class*="bg-[#1E1A16]"] a[class*="bg-white/"]:hover,
[class*="bg-[#141c2c]"] a[class*="bg-white/"]:hover,
[class*="bg-[#292215]"] a[class*="bg-white/"]:hover {
  background-color: var(--color-ivory-08) !important;
}

[class*="bg-[#141c2c]"] .text-on-surface-variant,
[class*="bg-[#1b1c1a]"] .text-on-surface-variant,
.bg-inverse-surface .text-on-surface-variant,
[class*="bg-[#141c2c]"] [class*="text-on-surface-variant"],
[class*="bg-[#1b1c1a]"] [class*="text-on-surface-variant"],
.bg-inverse-surface [class*="text-on-surface-variant"],
[class*="bg-[#141c2c]"] [class*="text-stone-400"],
[class*="bg-[#1b1c1a]"] [class*="text-stone-400"],
.bg-inverse-surface [class*="text-stone-400"] {
  color: var(--color-ivory-82) !important;
}

[class*="bg-[#141c2c]"] [class*="text-stone-500"],
[class*="bg-[#1b1c1a]"] [class*="text-stone-500"],
.bg-inverse-surface [class*="text-stone-500"] {
  color: var(--color-ivory-72) !important;
}

.border-outline-variant,
.border-outline,
[class*="border-outline-variant"],
[class*="border-[#d3c2a6]"],
[class*="border-[#d3cbc0]"],
[class*="border-[#d9d0c2]"],
[class*="border-[#ebe5d8]"],
[class*="bg-[#d3c2a6]"],
[class*="bg-[#d9d0c2]"],
[class*="bg-[#ebe5d8]"],
[class*="border-[#CFC2B1]"],
[class*="border-[#cfc2b1]"],
[class*="border-[#E6D8C7]"],
[class*="border-[#e6d8c7]"] {
  border-color: var(--color-border) !important;
}

[class*="border-white"] {
  border-color: color-mix(in srgb, var(--color-on-dark) 22%, transparent) !important;
}

[class*="border-[#775a19]"],
[class*="border-primary"],
[class*="border-[#2c4a5e]"],
[class*="border-[#2C4A5E]"],
[class*="border-[#B79249]"],
[class*="border-[#b79249]"],
[class*="border-[#B9975B]"],
[class*="border-[#b9975b]"] {
  border-color: var(--border-soft-2) !important;
}

[class*="ring-[#775a19]"],
[class*="ring-primary"],
[class*="ring-[#B9975B]"],
[class*="ring-[#c5a059]"] {
  --tw-ring-color: color-mix(in srgb, var(--color-accent) 42%, transparent) !important;
}

/* CTA primaires — or officiel (§3.7) */
a[class*="bg-[#775a19]"],
button[class*="bg-[#775a19]"],
a.bg-primary:not([class*="bg-[#1E1A16]"]):not([class*="bg-[#1e1a16]"]),
button.bg-primary:not([class*="bg-[#1E1A16]"]):not([class*="bg-[#1e1a16]"]),
a.bg-tertiary:not([class*="bg-[#1E1A16]"]):not([class*="bg-[#1e1a16]"]),
button.bg-tertiary:not([class*="bg-[#1E1A16]"]):not([class*="bg-[#1e1a16]"]),
.bg-primary.text-white:not([class*="bg-[#1E1A16]"]),
.bg-primary.text-on-primary:not([class*="bg-[#1E1A16]"]),
.bg-tertiary.text-white:not([class*="bg-[#1E1A16]"]) {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

a[class*="bg-[#775a19]"]:hover,
button[class*="bg-[#775a19]"]:hover,
a.bg-primary:not([class*="bg-[#1E1A16]"]):hover,
button.bg-primary:not([class*="bg-[#1E1A16]"]):hover,
a.bg-tertiary:not([class*="bg-[#1E1A16]"]):hover,
button.bg-tertiary:not([class*="bg-[#1E1A16]"]):hover,
.bg-primary.text-white:not([class*="bg-[#1E1A16]"]):hover,
.bg-primary.text-on-primary:not([class*="bg-[#1E1A16]"]):hover,
.bg-tertiary.text-white:not([class*="bg-[#1E1A16]"]):hover,
[class*="hover:bg-[#5a4511]"]:hover {
  background-color: var(--btn-primary-hover) !important;
}

a.bg-primary:focus-visible,
button.bg-primary:focus-visible,
a.bg-tertiary:focus-visible,
button.bg-tertiary:focus-visible {
  outline: 2px solid var(--btn-primary-focus);
  outline-offset: 2px;
}

.text-on-primary,
[class*="text-on-primary"] {
  color: var(--btn-primary-text) !important;
}

/* Compat Tailwind — CTA charbon sans classes .btn */
a[class*="bg-[#1E1A16]"]:not(.btn),
button[class*="bg-[#1E1A16]"]:not(.btn),
a[class*="bg-[#1e1a16]"]:not(.btn),
button[class*="bg-[#1e1a16]"]:not(.btn) {
  background-color: var(--btn-charcoal-bg) !important;
  color: var(--btn-charcoal-text) !important;
}

a[class*="bg-[#1E1A16]"]:not(.btn):hover,
button[class*="bg-[#1E1A16]"]:not(.btn):hover,
a[class*="bg-[#1e1a16]"]:not(.btn):hover,
button[class*="bg-[#1e1a16]"]:not(.btn):hover,
[class*="hover:bg-[#2A211B]"]:hover,
[class*="hover:bg-[#2a211b]"]:hover {
  background-color: var(--btn-charcoal-hover) !important;
}

/* Bouton secondaire — fond clair */
a[class*="border-[#775a19]"][class*="bg-transparent"],
a[class*="border-primary"][class*="bg-transparent"],
button[class*="border-primary"][class*="bg-transparent"] {
  background-color: transparent !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-deep) !important;
}

a[class*="border-[#775a19]"][class*="bg-transparent"]:hover,
a[class*="border-primary"][class*="bg-transparent"]:hover {
  background-color: var(--color-accent-12) !important;
  color: var(--color-text-main) !important;
}

/* Reveal au scroll — discret et non intrusif */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.62s ease,
    transform 0.62s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.06s;
}

.reveal-delay-2 {
  transition-delay: 0.12s;
}

.reveal-delay-3 {
  transition-delay: 0.18s;
}

.reveal-delay-4 {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ——— Repères de section (wayfinder) ——— */
.site-section-wayfinder {
  margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
}

.site-section-wayfinder--center {
  display: flex;
  justify-content: center;
}

.site-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  border-radius: 0.65rem;
  background: var(--color-surface);
  box-shadow:
    0 1px 2px rgba(36, 31, 26, 0.04),
    0 10px 28px -18px rgba(36, 31, 26, 0.12);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--color-accent-deep, #8a6a3e);
}

.site-section-label::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-accent, #b9975b);
}

.site-section-label__text {
  display: inline-block;
}

.site-section-label--on-dark {
  border-color: var(--color-champagne-16);
  background: color-mix(in srgb, var(--color-dark-deep) 72%, var(--color-dark-alt));
  color: var(--color-accent-soft);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
}

.site-section-label--on-dark::before {
  background: var(--color-accent-soft);
}

/* ——— Animations page d’accueil (home-animations.js) ——— */
@media (prefers-reduced-motion: no-preference) {
  .accueil-motif-category.home-motif--image-pending::before {
    opacity: 0;
    transform: scale(0.98);
    transition:
      opacity 0.34s cubic-bezier(0.42, 0, 0.58, 1),
      transform 0.36s cubic-bezier(0.42, 0, 0.58, 1);
  }

  .accueil-motif-category.home-motif--image-visible::before {
    opacity: 1;
    transform: scale(1);
  }
}

/* Sections signature — fond sombre premium (à propos, etc.) */
.signature-section {
  position: relative;
  isolation: isolate;
  background-color: var(--color-dark-deep);
  color: var(--color-bg-soft);
}

.signature-section h1,
.signature-section h2,
.signature-section h3,
.signature-section .section-title,
.signature-section .section-eyebrow {
  color: var(--color-bg-soft);
}

.signature-section p,
.signature-section li,
.signature-section .section-subtitle {
  color: var(--color-ivory-82);
}

.signature-section a:not([class*="bg-"]):not(.home-motion-btn) {
  color: var(--color-accent-soft);
}

.signature-section a:not([class*="bg-"]):not(.home-motion-btn):hover {
  color: var(--color-bg-soft);
}

/* Crédibilité — au-dessus du scrim scroll ; fond motif (spec client) */
.credibility-section.signature-section {
  position: relative;
  z-index: 30;
  background-color: #292215;
  opacity: 1;
  background-image:
    repeating-radial-gradient(circle at 0 0, transparent 0, #292215 40px),
    repeating-linear-gradient(#49371755, #493717);
}

/* Ancien fond image + voile — conservé dans le HTML, désactivé */
.credibility-section__bg {
  display: none;
}

/* Lisibilité du contenu sur fond motif — cartes et textes secondaires uniquement */
.credibility-section.signature-section .credibility-card {
  border-color: var(--color-champagne-16);
  background: color-mix(in srgb, var(--color-dark-deep) 62%, transparent);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 var(--color-ivory-08);
}

.credibility-section.signature-section .credibility-card .home-quote-block {
  border-color: var(--color-champagne-16);
  background: color-mix(in srgb, var(--color-dark-deep) 45%, transparent);
}

.credibility-section.signature-section .credibility-pillar {
  border-color: var(--color-champagne-16);
  background: color-mix(in srgb, var(--color-dark-deep) 55%, transparent);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 var(--color-ivory-08);
}

@media (hover: hover) {
  .credibility-section.signature-section .credibility-pillar:hover {
    border-color: color-mix(in srgb, var(--color-accent-soft) 36%, transparent);
    background: color-mix(in srgb, var(--color-dark-deep) 68%, transparent);
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 var(--color-ivory-08);
  }
}

.credibility-section.signature-section .credibility-trust-line,
.credibility-section.signature-section #accueil-recherche-heading,
.credibility-section.signature-section #accueil-recherche-heading + p,
.credibility-section.signature-section .credibility-section__intro {
  color: var(--color-bg-soft);
}

.credibility-section.signature-section #accueil-recherche-heading + p,
.credibility-section.signature-section .credibility-section__intro,
.credibility-section.signature-section .credibility-section__intro p {
  color: var(--color-ivory-82);
}

.credibility-section .text-white\/72,
.credibility-section [class*="text-white/72"] {
  color: var(--color-ivory-72) !important;
}

.credibility-section .font-medium.text-\[\#D8C08A\],
.credibility-section [class*="text-[#D8C08A]"] {
  color: var(--color-accent-soft) !important;
}

.accueil-motifs-header h2,
#accueil-motifs-heading {
  color: var(--color-text-main);
}

#accueil-cta-final {
  background-color: var(--color-bg-soft);
  border-top-color: color-mix(in srgb, var(--color-border) 50%, transparent);
}

#accueil-cta-final-heading,
#accueil-cta-final [data-home-cta="block"] p {
  margin-inline: auto;
}

#accueil-cta-final [data-home-cta="block"] p {
  max-width: 42rem;
  color: var(--color-text-muted);
}

.site-scroll-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background-color: #0a0806;
  opacity: 0;
  will-change: opacity;
}

.signature-section > :not([aria-hidden="true"]) {
  position: relative;
  z-index: 26;
}

.credibility-section__inner {
  position: relative;
  z-index: 26;
  gap: var(--grid-gap-lg);
}

.signature-section .credibility-card {
  padding: var(--card-padding-lg);
  border-radius: var(--card-radius-lg);
  border: 1px solid var(--color-champagne-16);
  background: var(--color-ivory-08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.signature-section .credibility-card .home-quote-block {
  border-color: var(--color-champagne-16);
  background: var(--color-ivory-08);
  box-shadow: none;
}

.signature-section .home-quote-block__line {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent-soft) 95%, transparent),
    color-mix(in srgb, var(--color-accent) 55%, transparent)
  );
}

.signature-section .credibility-pillar {
  margin: 0;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--color-ivory-08);
  border: 1px solid var(--color-champagne-16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

@media (hover: hover) {
  .signature-section .credibility-pillar:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--color-accent-soft) 28%, transparent);
    background: color-mix(in srgb, var(--color-bg-soft) 10%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .signature-section .credibility-card {
    background: rgba(46, 40, 34, 0.92);
  }

  .signature-section .credibility-pillar {
    background: rgba(46, 40, 34, 0.88);
  }

  .credibility-section.signature-section .credibility-card {
    background: rgba(20, 16, 12, 0.88);
  }

  .credibility-section.signature-section .credibility-pillar {
    background: rgba(20, 16, 12, 0.85);
  }
}

/* Accueil — Repère de confiance : typographie (DESIGN_SYSTEM.md §4) */
.credibility-section {
  font-family: var(--font-body);
}

.credibility-section__header {
  margin-inline: auto;
  text-align: center;
}

.credibility-section__header .site-section-wayfinder {
  display: flex;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.credibility-section .credibility-carousel {
  margin-top: clamp(1.5rem, 2.8vw, 2rem);
}

.credibility-section__title,
.credibility-section__header #accueil-recherche-heading {
  margin: 0;
  max-width: none;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.2vw, 3.2rem);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  text-wrap: nowrap;
  color: var(--color-bg-soft);
}

.credibility-section__intro {
  margin-top: clamp(0.75rem, 1.5vw, 1rem);
  margin-inline: auto;
  max-width: 65ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ivory-82);
}

.credibility-section__intro p {
  margin: 0;
}

.credibility-section__intro p + p {
  margin-top: var(--paragraph-gap);
}

/* Accueil — Repère de confiance : carrousel de cartes */

.credibility-carousel {
  width: 100%;
  max-width: min(88rem, 100%);
  margin-inline: auto;
}

.credibility-carousel__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem);
}

.credibility-carousel__counter {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 600;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ivory-72);
}

.credibility-carousel__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.credibility-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-champagne-16);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-dark-deep) 78%, transparent);
  color: var(--color-bg-soft);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.credibility-carousel__btn .material-symbols-outlined {
  font-size: 1.2rem;
}

@media (hover: hover) {
  .credibility-carousel__btn:hover {
    border-color: color-mix(in srgb, var(--color-accent-soft) 42%, transparent);
    background: color-mix(in srgb, var(--color-dark-deep) 88%, transparent);
    transform: translateY(-1px);
  }
}

.credibility-carousel__btn:active {
  transform: scale(0.94);
}

.credibility-carousel__btn:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.credibility-carousel:focus {
  outline: none;
}

.credibility-carousel:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 4px;
  border-radius: var(--card-radius-lg);
}

.credibility-carousel__viewport {
  overflow: hidden;
}

.credibility-carousel__track {
  display: flex;
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.credibility-slide-card {
  flex: 0 0 100%;
  min-width: 0;
}

.credibility-slide-card__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.15rem, 2.8vw, 1.75rem);
  min-height: clamp(22rem, 68vw, 26rem);
  padding: clamp(1.15rem, 2.8vw, 1.65rem);
  border: 1px solid var(--color-champagne-16);
  border-radius: clamp(1.35rem, 2.2vw, 1.75rem);
  background: color-mix(in srgb, var(--color-dark-deep) 78%, transparent);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 var(--color-ivory-08);
  overflow: hidden;
}

@media (min-width: 768px) {
  .credibility-slide-card__layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
    gap: clamp(1.5rem, 3.2vw, 2.25rem);
    min-height: clamp(24rem, 38vw, 30rem);
    padding: clamp(1.35rem, 2.8vw, 2rem);
  }
}

@media (min-width: 1024px) {
  .credibility-slide-card__layout {
    min-height: clamp(26rem, 32vw, 32rem);
    padding: clamp(1.5rem, 3vw, 2.35rem);
  }
}

/* Zone média — plein bord gauche et bas (toutes les cartes) */
.credibility-slide-card__layout:has(.credibility-slide-card__media) {
  padding-left: 0;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .credibility-slide-card__layout:has(.credibility-slide-card__media) {
    padding-top: clamp(1.35rem, 2.8vw, 2rem);
    padding-right: clamp(1.35rem, 2.8vw, 2rem);
    padding-bottom: 0;
    padding-left: 0;
    column-gap: clamp(1.5rem, 3.2vw, 2.5rem);
  }

  .credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__body {
    padding-bottom: clamp(1.35rem, 2.8vw, 2rem);
  }
}

@media (min-width: 1024px) {
  .credibility-slide-card__layout:has(.credibility-slide-card__media) {
    padding-top: clamp(1.5rem, 3vw, 2.35rem);
    padding-right: clamp(1.5rem, 3vw, 2.35rem);
  }

  .credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__body {
    padding-bottom: clamp(1.5rem, 3vw, 2.35rem);
  }
}

@media (max-width: 767px) {
  .credibility-slide-card__layout:has(.credibility-slide-card__media) {
    padding-top: 0;
    padding-right: clamp(1.15rem, 2.8vw, 1.65rem);
    padding-bottom: clamp(1.15rem, 2.8vw, 1.65rem);
    gap: clamp(1rem, 2.5vw, 1.35rem);
  }
}

.credibility-slide-card__media {
  display: flex;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(1rem, 1.8vw, 1.35rem);
}

.credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__media {
  align-self: stretch;
  border-radius: 0 clamp(1rem, 1.8vw, 1.25rem) 0 0;
}

.credibility-slide-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(14rem, 42vw, 18rem);
  border-radius: inherit;
  object-fit: cover;
  object-position: center 28%;
}

.credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__img,
.credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__media-placeholder {
  border-radius: inherit;
}

@media (min-width: 768px) {
  .credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__img {
    min-height: 100%;
    aspect-ratio: auto;
    object-position: center 22%;
  }

  .credibility-slide-card__layout:has(.credibility-slide-card__media) .credibility-slide-card__media-placeholder {
    min-height: 100%;
    aspect-ratio: auto;
  }
}

.credibility-slide-card__media-placeholder {
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(14rem, 42vw, 18rem);
  border-radius: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px dashed color-mix(in srgb, var(--color-champagne-16) 85%, transparent);
  border-left: none;
  border-bottom: none;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-dark-alt) 55%, transparent),
      color-mix(in srgb, var(--color-dark-deep) 88%, transparent)
    );
}

.credibility-slide-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: clamp(0.15rem, 0.8vw, 0.65rem);
}

/* Colonne titre + texte — largeur resserrée (réf. carrousel éditorial) */
.credibility-slide-card__copy {
  width: 100%;
  max-width: min(34ch, 100%);
}

@media (min-width: 768px) {
  .credibility-slide-card__copy {
    width: min(68%, 38ch);
    max-width: 38ch;
    margin-inline: auto 0;
    padding-inline-end: clamp(0.5rem, 6%, 2.5rem);
  }
}

/* Titres de cartes éditoriales — Playfair §4 (H3 narratif) */
.credibility-slide-card__title {
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 2.85vw, 2.25rem);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--color-bg-soft);
  background-image: linear-gradient(
    100deg,
    var(--color-bg-soft) 0%,
    color-mix(in srgb, var(--color-bg-soft) 88%, var(--color-dark-deep)) 28%,
    color-mix(in srgb, var(--color-bg-soft) 58%, var(--color-dark-deep)) 58%,
    color-mix(in srgb, var(--color-bg-soft) 34%, var(--color-dark-deep)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .credibility-slide-card__title {
    -webkit-text-fill-color: currentcolor;
    color: var(--color-bg-soft);
    background-image: none;
  }
}

@media (min-width: 1024px) {
  .credibility-slide-card__title {
    font-size: clamp(1.85rem, 2.5vw, 2.35rem);
  }
}

/* Corps de cartes — Inter §4 (60–72ch, resserré dans .copy) */
.credibility-slide-card__text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ivory-72);
}

.credibility-slide-card__text p {
  margin: 0;
}

.credibility-slide-card__text p + p {
  margin-top: var(--paragraph-gap);
}

.credibility-carousel.is-animating .credibility-slide-card.is-entering-from-right .credibility-slide-card__layout {
  animation: credibility-slide-enter-right 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.credibility-carousel.is-animating .credibility-slide-card.is-entering-from-left .credibility-slide-card__layout {
  animation: credibility-slide-enter-left 0.52s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.credibility-carousel.is-animating .credibility-slide-card.is-leaving .credibility-slide-card__layout {
  animation: credibility-slide-leave 0.38s ease forwards;
}

@keyframes credibility-slide-enter-right {
  from {
    opacity: 0.35;
    transform: translateX(1.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes credibility-slide-enter-left {
  from {
    opacity: 0.35;
    transform: translateX(-1.25rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes credibility-slide-leave {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .credibility-carousel__track {
    transition: none;
  }

  .credibility-carousel.is-animating .credibility-slide-card__layout {
    animation: none !important;
  }
}

/* Accueil — fond cerveau + lignes neuronales (section Approche) */
.approach-section__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.approach-brain-bg {
  position: absolute;
  left: clamp(0.25rem, 2.5vw, 2rem);
  top: 50%;
  z-index: 0;
  width: min(46vw, 560px);
  max-height: 90%;
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
  background-color: #000;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.45) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.45) 88%,
    transparent 100%
  );
}

.approach-brain-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle at 40% 50%,
    rgba(215, 183, 106, 0.14),
    rgba(0, 0, 0, 0.85) 48%,
    #000 72%
  );
  filter: blur(20px);
}

.approach-brain-bg__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: min(78vh, 540px);
  height: auto;
  object-fit: contain;
  object-position: left center;
  opacity: 0.48;
  filter: drop-shadow(0 0 32px rgba(215, 183, 106, 0.1));
}

.approach-section-content {
  position: relative;
}

.approach-section__copy-col {
  margin-inline: auto;
  max-width: 40rem;
  text-align: center;
}

.approach-neural-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.65) 55%,
    rgba(0, 0, 0, 0.22) 74%,
    transparent 92%
  );
}

.approach-neural-lines__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.approach-neural-line {
  fill: none;
  stroke: url(#approach-neural-stroke);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(215, 183, 106, 0.14));
}

.approach-neural-line.is-soft {
  stroke-width: 0.75;
  filter: drop-shadow(0 0 4px rgba(255, 232, 180, 0.1));
}

.approach-neural-node {
  fill: rgba(255, 232, 180, 0.55);
  filter: drop-shadow(0 0 5px rgba(215, 183, 106, 0.22));
}

.approach-section.approach-neural-lines--static .approach-neural-lines {
  opacity: 0.42;
}

.approach-section.approach-neural-lines--static .approach-neural-line {
  stroke-dashoffset: 0;
  opacity: 0.38;
}

@media (max-width: 767px) {
  .approach-brain-bg {
    top: auto;
    bottom: -4%;
    left: 50%;
    width: min(92vw, 420px);
    max-height: 42%;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(
      to top,
      #000 0%,
      rgba(0, 0, 0, 0.35) 70%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to top,
      #000 0%,
      rgba(0, 0, 0, 0.35) 70%,
      transparent 100%
    );
  }

  .approach-brain-bg__img {
    max-height: 240px;
    margin-inline: auto;
    object-position: center bottom;
  }

  .approach-section__copy-col {
    max-width: none;
  }

  .approach-neural-lines {
    mask-image: linear-gradient(
      to right,
      #000 0%,
      rgba(0, 0, 0, 0.45) 48%,
      transparent 90%
    );
  }

  .approach-neural-line--hide-mobile,
  .approach-neural-node--hide-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .approach-neural-lines {
    opacity: 0.32;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      rgba(0, 0, 0, 0.35) 55%,
      transparent 90%
    );
  }

  .approach-neural-line--hide-mobile,
  .approach-neural-node--hide-mobile {
    display: none;
  }
}

/* Accueil — Mon approche : fond noir chaud + doré premium */
.premium-gold-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 12%, rgba(201, 164, 90, 0.14), transparent 32%),
    radial-gradient(circle at 12% 88%, rgba(184, 138, 59, 0.08), transparent 36%),
    radial-gradient(circle at 28% 52%, rgba(0, 0, 0, 0.55), transparent 48%),
    linear-gradient(135deg, #000 0%, #050505 42%, #0a0a0a 72%, #111 100%);
}

.premium-gold-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 232, 180, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 232, 180, 0.02) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.32;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 84%);
}

.premium-gold-section::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 31%,
      rgba(201, 164, 90, 0.06) 37%,
      rgba(255, 232, 180, 0.1) 42%,
      rgba(184, 138, 59, 0.05) 47%,
      transparent 56%,
      transparent 100%
    ),
    linear-gradient(
      128deg,
      transparent 0%,
      transparent 46%,
      rgba(184, 138, 59, 0.07) 51%,
      rgba(255, 220, 145, 0.08) 55%,
      rgba(184, 138, 59, 0.03) 60%,
      transparent 69%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(255, 220, 145, 0.12),
      transparent 44%
    );
  filter: blur(16px);
  transform: rotate(-8deg);
  opacity: 0.72;
}

.premium-gold-section .gold-curves {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background: repeating-linear-gradient(
    125deg,
    transparent 0px,
    transparent 84px,
    rgba(214, 183, 106, 0.035) 86px,
    rgba(214, 183, 106, 0.07) 88px,
    transparent 92px,
    transparent 170px
  );
  filter: blur(0.6px);
  mask-image: radial-gradient(circle at 58% 48%, #000 0%, transparent 78%);
}

#accueil-approche.premium-gold-section .site-section-label {
  border-color: color-mix(in srgb, #c9a45a 32%, rgba(255, 244, 220, 0.18));
  background: color-mix(in srgb, #1b150d 78%, #2a1e12);
  color: #d7b76a;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
}

#accueil-approche.premium-gold-section .site-section-label::before {
  background: #c9a45a;
}

#accueil-approche.premium-gold-section h2 {
  color: #f8eedc;
}

#accueil-approche.premium-gold-section [data-home-approche="copy"] > p {
  color: rgba(248, 238, 220, 0.76);
}

#accueil-approche.premium-gold-section .home-approche-cta {
  margin-inline: auto;
}

/* Accueil — Approche : pleine hauteur d’écran une fois Crédibilité hors vue */
#accueil-approche.approach-section--viewport {
  --approach-viewport-height: calc(100svh - var(--site-nav-offset));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--approach-viewport-height);
  padding-block: clamp(1.25rem, 3vh, 2rem) !important;
  scroll-margin-top: var(--site-nav-offset);
  scroll-snap-align: start;
}

@supports (height: 100dvh) {
  #accueil-approche.approach-section--viewport {
    --approach-viewport-height: calc(100dvh - var(--site-nav-offset));
  }
}

#accueil-approche.approach-section--viewport .approach-section-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.home-approche-cta .material-symbols-outlined {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .home-approche-cta:hover .material-symbols-outlined {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-approche-cta .material-symbols-outlined {
    transition: none;
  }
}

.approach-section.approach-neural-lines--static .approach-brain-bg__img {
  opacity: 0.72;
}

.home-quote-block__line {
  position: absolute;
  left: 1.35rem;
  right: 1.35rem;
  bottom: 1.15rem;
  height: 1.5px;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent-light) 88%, var(--color-accent)) 100%
  );
}

@media (min-width: 768px) {
  .home-quote-block__line {
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.25rem;
  }
}

.home-quote-block--line-visible .home-quote-block__line,
html.home-motion-static .home-quote-block__line {
  transform: scaleX(1);
}

.home-motion-btn.btn:hover {
  transform: translateY(-2px);
}

.home-motion-btn.btn:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.home-motion-static .accueil-motif-category::before,
  .accueil-motif-category.home-motif--image-pending::before,
  .accueil-motif-category.home-motif--image-visible::before {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-motion-btn.btn:hover,
  .home-motion-btn.btn:active {
    transform: none;
  }
}

/* Hero À propos — fond sombre premium */
.page-hero--dark__bg {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(154, 116, 40, 0.38), transparent 44%),
    radial-gradient(circle at 84% 72%, rgba(245, 238, 223, 0.1), transparent 40%),
    linear-gradient(165deg, var(--color-dark-deep) 0%, var(--color-dark) 48%, #241f1a 100%);
}

.page-hero--dark .page-hero--dark__bg {
  opacity: 1;
}

.page-hero--dark h1,
.page-hero--dark h1.font-headline {
  color: var(--color-bg-soft) !important;
}

.page-hero--dark .bg-neural-pattern {
  background-image: radial-gradient(
    circle at 2px 2px,
    rgba(216, 192, 138, 0.07) 1px,
    transparent 0
  );
  background-size: 28px 28px;
}

.page-hero--dark .page-hero--dark__copy {
  text-align: center;
}

.page-hero--dark .page-hero--dark__copy h1,
.page-hero--dark .page-hero--dark__copy .max-w-3xl,
.page-hero--dark .page-hero--dark__copy .space-y-3 {
  margin-left: auto;
  margin-right: auto;
}

/* Hero À propos — texte centré, panneaux latéraux (modèle référence) */
.page-hero--apropos__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-block: clamp(0.35rem, 1.2vh, 0.85rem);
}

.page-hero--apropos__stage .site-section-wayfinder {
  margin-bottom: 0;
}

.page-hero--apropos__center {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(54rem, 94vw);
}

.page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__title {
  max-width: min(56rem, 100%) !important;
  font-size: clamp(2.15rem, 6.8vh + 0.35rem, 4.5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.02em;
}

.page-hero--apropos__title-main,
.page-hero--apropos__title-sub {
  display: block;
}

.page-hero--apropos__title-main {
  font-weight: 500;
}

.page-hero--apropos__title-sub {
  margin-top: clamp(0.65rem, 2vh, 1.15rem);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-size: inherit;
  font-weight: 400;
  font-style: italic;
  line-height: inherit;
  color: color-mix(in srgb, var(--color-bg-soft) 88%, var(--color-accent-soft));
}

/* Panneaux verticaux + portrait carré en coin */
.page-hero--apropos__panel {
  display: none;
  pointer-events: none;
}

.page-hero--apropos__panel--start {
  position: relative;
}

.page-hero--apropos__panel-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-bg-soft) 14%, transparent);
  border-radius: clamp(1.75rem, 3.2vw, 2.75rem);
  background: var(--color-dark-deep);
  box-shadow:
    0 32px 80px -40px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 color-mix(in srgb, var(--color-bg-soft) 8%, transparent);
}

.page-hero--apropos__panel-surface--placeholder {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-dark-alt) 88%, #2a211b) 0%, var(--color-dark-deep) 55%, #1a1613 100%);
}

.page-hero--apropos__panel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.page-hero--apropos__panel-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-bg-soft) 4%, transparent) 0%,
    transparent 38%,
    color-mix(in srgb, #000 28%, transparent) 100%
  );
  pointer-events: none;
}

.page-hero--apropos__chip {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-bg-soft) 22%, transparent);
  box-shadow:
    0 18px 48px -24px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--color-dark-deep) 40%, transparent);
}

.page-hero--apropos__chip--portrait {
  right: clamp(0.5rem, 1.6vw, 1rem);
  bottom: clamp(0.5rem, 1.6vw, 1rem);
  width: clamp(4.25rem, 6.5vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: clamp(0.85rem, 1.4vw, 1.1rem);
  background: var(--color-dark-deep);
}

.page-hero--apropos__chip--portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

@media (min-width: 1024px) {
  .page-hero--apropos__center {
    max-width: min(58rem, 56vw);
    padding-inline: clamp(1rem, 2vw, 1.5rem);
  }

  .page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__title {
    font-size: clamp(2.5rem, 7.2vh + 0.25rem, 4.75rem) !important;
  }

  .page-hero--apropos__panel {
    display: block;
    position: absolute;
    top: 50%;
    z-index: 1;
    width: clamp(16rem, 26vw, 24rem);
    height: min(calc(var(--page-hero-height) + 2rem), 40rem);
  }

  .page-hero--apropos__panel--start {
    left: 0;
    width: clamp(15.5rem, 22vw, 20.5rem);
    max-height: min(calc(var(--page-hero-height) - 1.5rem), 42rem);
    height: auto;
    transform: translate(-34%, -50%);
  }

  .page-hero--apropos__panel--start .page-hero--apropos__panel-surface {
    width: 100%;
    height: auto;
    max-height: min(calc(var(--page-hero-height) - 1.5rem), 42rem);
    aspect-ratio: 4 / 5;
  }

  .page-hero--apropos__panel--start .page-hero--apropos__panel-veil {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg-soft) 2%, transparent) 0%,
      transparent 62%,
      color-mix(in srgb, #000 10%, transparent) 100%
    );
  }

  .page-hero--apropos__panel--end {
    right: 0;
    left: auto;
    width: clamp(18rem, 25vw, 24rem);
    max-height: min(calc(var(--page-hero-height) - 1.5rem), 42rem);
    height: auto;
    transform: translate(34%, -50%);
  }

  .page-hero--apropos__panel--end .page-hero--apropos__panel-surface {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 185;
  }

  .page-hero--apropos__panel--end .page-hero--apropos__panel-veil {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg-soft) 2%, transparent) 0%,
      transparent 62%,
      color-mix(in srgb, #000 10%, transparent) 100%
    );
  }

  .page-hero--apropos__panel-surface {
    width: 100%;
    height: 100%;
  }
}

@media (min-width: 1280px) {
  .page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__title {
    font-size: clamp(2.75rem, 7.8vh, 5rem) !important;
  }
}

.page-hero[aria-labelledby="apropos-hero-heading"] {
  align-items: stretch;
}

.page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__inner {
  flex: 1 1 auto;
  align-self: stretch;
  max-height: 100%;
}

.page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead,
.page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead p {
  font-size: 16px !important;
  line-height: var(--leading-body) !important;
}

.page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead {
  max-width: min(36rem, 100%) !important;
}

@media (max-height: 820px) {
  .page-hero--apropos__panel {
    height: min(calc(var(--page-hero-height) + 1rem), 30rem);
  }

  .page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead .hidden,
  .page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead > p[class*="hidden"] {
    display: none !important;
  }
}

/* Hero pages intérieures — above the fold (≠ accueil, ≠ contact) */
.page-hero {
  --page-hero-height: calc(100svh - var(--site-nav-offset));
  box-sizing: border-box;
  height: var(--page-hero-height);
  min-height: var(--page-hero-height);
  max-height: var(--page-hero-height);
  padding-block: clamp(0.5rem, 1.5vh, 1rem) !important;
}

@supports (height: 100dvh) {
  .page-hero {
    --page-hero-height: calc(100dvh - var(--site-nav-offset));
  }
}

.page-hero > .relative,
.page-hero > .max-w-7xl,
.page-hero .mx-auto.max-w-7xl,
.page-hero .relative.mx-auto {
  width: 100%;
  max-height: 100%;
  min-height: 0;
}

.page-hero [class*="grid"] {
  min-height: 0;
  max-height: 100%;
  align-items: center;
}

.page-hero [class*="gap-8"],
.page-hero [class*="gap-10"],
.page-hero [class*="gap-12"],
.page-hero [class*="gap-14"] {
  gap: clamp(0.65rem, 2vh, 1.35rem) !important;
}

.page-hero h1,
.page-hero h1.font-headline {
  max-width: min(52rem, 100%);
  font-size: clamp(1.9rem, 5.2vh + 0.25rem, 3.25rem);
  line-height: var(--leading-display);
}

.page-hero .max-w-2xl,
.page-hero .max-w-3xl,
.page-hero .max-w-4xl,
.page-hero .max-w-5xl,
.page-hero .max-w-\[58rem\],
.page-hero .max-w-\[64rem\] {
  max-width: min(46rem, 100%) !important;
}

.page-hero .mt-2,
.page-hero .mt-3,
.page-hero .mt-4,
.page-hero .mt-5 {
  margin-top: clamp(0.4rem, 1.4vh, 0.9rem) !important;
}

.page-hero .mt-6,
.page-hero .mt-7,
.page-hero .mt-8 {
  margin-top: clamp(0.55rem, 2vh, 1.15rem) !important;
}

.page-hero .mt-10 {
  margin-top: clamp(0.65rem, 2.4vh, 1.4rem) !important;
}

.page-hero .mb-3,
.page-hero .mb-4 {
  margin-bottom: clamp(0.35rem, 1vh, 0.75rem) !important;
}

.page-hero p.text-lg,
.page-hero p.md\:text-lg,
.page-hero p.md\:text-xl,
.page-hero .text-base.leading-relaxed {
  font-size: clamp(1rem, 1.9vh + 0.38rem, 1.2rem) !important;
  line-height: var(--leading-body) !important;
  max-width: min(42rem, 100%) !important;
}

.page-hero .rounded-2xl.px-5 p.text-xl,
.page-hero .rounded-2xl.px-5 p.md\:text-2xl {
  font-size: clamp(1.08rem, 2.2vh + 0.4rem, 1.45rem) !important;
  line-height: var(--leading-body) !important;
}

.page-hero .rounded-2xl.px-5,
.page-hero .rounded-2xl.border.px-5 {
  padding: clamp(0.55rem, 1.4vh, 0.9rem) clamp(0.85rem, 2vw, 1.15rem) !important;
}

.page-hero .space-y-3 > p,
.page-hero .space-y-5 > p {
  font-size: clamp(0.975rem, 1.75vh + 0.35rem, 1.125rem) !important;
  line-height: var(--leading-body) !important;
}

.page-hero .space-y-3 > p + p,
.page-hero .space-y-5 > p + p {
  margin-top: var(--paragraph-gap) !important;
}

.page-hero .flex.flex-col.gap-3,
.page-hero .flex.flex-col.gap-4 {
  gap: clamp(0.45rem, 1.2vh, 0.75rem) !important;
}

.page-hero .btn {
  min-height: 2.75rem;
  font-size: clamp(0.875rem, 1.15vh + 0.38rem, 0.975rem);
}

.page-hero figure {
  max-width: min(38vw, 24rem);
}

.page-hero figure img {
  max-height: min(46vh, 21rem);
  width: 100%;
  object-fit: cover;
}

.page-hero[aria-labelledby="recodex-hero-heading"] .relative.mx-auto.grid {
  gap: clamp(0.75rem, 2.5vw, 2rem) !important;
}

@media (min-width: 1024px) {
  .page-hero[aria-labelledby="recodex-hero-heading"] .relative.mx-auto.grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.68fr);
  }

}

.page-hero[aria-labelledby="recodex-hero-heading"] [aria-label*="Aperçu"] {
  max-height: min(58vh, 26rem);
  transform: scale(0.84);
  transform-origin: center center;
}

@media (max-height: 820px) {
  .page-hero[aria-labelledby="services-hero-heading"] .mt-5.flex.flex-wrap,
  .page-hero[aria-labelledby="services-hero-heading"] p.mt-4.text-sm,
  .page-hero[aria-labelledby="services-hero-heading"] a[href="#choix-service-heading"] {
    display: none;
  }

  .page-hero[aria-labelledby="apropos-hero-heading"] .page-hero--apropos__lead > p[class*="hidden"] {
    display: none !important;
  }

  .page-hero#approche-hero .mt-10.flex.flex-wrap {
    display: none;
  }
}

@media (max-height: 700px) {
  .page-hero[aria-labelledby="recodex-hero-heading"] [aria-label*="Aperçu"] {
    display: none;
  }

  .page-hero[aria-labelledby="recodex-hero-heading"] .relative.mx-auto.grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Accueil — crédibilité : une hauteur d’écran (contenu condensé, DESIGN_SYSTEM § preuves) */
.credibility-section--viewport {
  --credibility-viewport-height: calc(100svh - var(--site-nav-offset));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--credibility-viewport-height);
  min-height: var(--credibility-viewport-height);
  max-height: var(--credibility-viewport-height);
  padding-block: clamp(0.75rem, 2vh, 1.35rem) !important;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .credibility-section--viewport {
    --credibility-viewport-height: calc(100dvh - var(--site-nav-offset));
  }
}

.credibility-section--viewport .credibility-section__inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-items: center;
  gap: clamp(0.65rem, 1.8vh, 1.25rem);
  overflow: hidden;
}

.credibility-section--viewport .credibility-card {
  min-height: 0;
  padding: clamp(0.85rem, 1.8vh, 1.25rem);
}

.credibility-section--viewport #accueil-recherche-heading {
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.12;
}

.credibility-section--viewport .credibility-section__intro {
  margin-top: clamp(0.5rem, 1.2vh, 0.85rem);
  font-size: clamp(0.875rem, 1.35vw, 1rem);
  line-height: 1.5;
}

.credibility-section--viewport .credibility-section__quote {
  margin-top: clamp(0.55rem, 1.4vh, 0.85rem);
  padding: clamp(0.65rem, 1.4vh, 0.9rem) clamp(0.85rem, 2vw, 1.1rem);
}

.credibility-section--viewport .credibility-section__quote .home-quote-block__text {
  font-size: clamp(0.9rem, 1.45vw, 1.05rem);
  line-height: 1.45;
}

.credibility-section--viewport .credibility-section__cta {
  margin-top: clamp(0.55rem, 1.3vh, 0.85rem);
}

.credibility-section--viewport .credibility-section__cta .btn {
  min-height: 2.65rem;
  padding-block: 0.5rem;
  font-size: 0.9rem;
}

.credibility-section--viewport .credibility-pillar {
  padding: clamp(0.6rem, 1.4vh, 0.85rem);
}

.credibility-section--viewport .credibility-pillar p:first-child {
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.2;
}

.credibility-section--viewport .credibility-trust-line {
  margin-top: 0.35rem;
  font-size: clamp(0.72rem, 1.1vw, 0.82rem);
  line-height: 1.35;
}

.credibility-section--viewport .site-section-wayfinder {
  margin-bottom: clamp(0.25rem, 0.8vh, 0.5rem);
}

@media (max-width: 767px) {
  .credibility-section--viewport .credibility-section__quote,
  .credibility-section--viewport .credibility-section__cta {
    display: none;
  }

  .credibility-section--viewport .credibility-section__intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .credibility-section--viewport .home-recherche-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .credibility-section--viewport .credibility-pillar p:first-child {
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .credibility-section--viewport .credibility-trust-line {
    display: none;
  }

  .credibility-section--viewport .home-recherche-cards .credibility-pillar:last-child {
    grid-column: span 1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .credibility-section--viewport .credibility-section__intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

@media (max-height: 760px) and (min-width: 768px) {
  .credibility-section--viewport .credibility-section__quote {
    display: none;
  }

  .credibility-section--viewport .credibility-section__intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

@media (min-width: 1024px) {
  .credibility-section--viewport .credibility-section__inner {
    gap: clamp(1rem, 2vh, 1.5rem);
  }

  .credibility-section--viewport .home-recherche-cards {
    gap: clamp(0.5rem, 1vh, 0.75rem);
  }
}

/* Accueil — crédibilité above the fold (position DOM après services, épinglage JS) */
.credibility-fold-spacer {
  display: block;
  height: 0;
  pointer-events: none;
}

.credibility-section--fold-pinned {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 35;
  max-height: min(46vh, 32rem);
  overflow: hidden;
  padding-block: clamp(1rem, 2.5vh, 1.5rem) !important;
  box-shadow: 0 -20px 56px rgba(0, 0, 0, 0.28);
}

html.accueil-cred-fold-active #accueil-hero.accueil-hero {
  min-height: 0;
  padding-block: clamp(1.25rem, 3.5vh, 2.75rem);
}

html.accueil-cred-fold-active #accueil-hero .accueil-hero-title {
  font-size: clamp(2rem, 4.8vw, 3.25rem);
  line-height: 1.1;
}

html.accueil-cred-fold-active #accueil-hero .accueil-hero__lead {
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
}

html.accueil-cred-fold-active #accueil-hero .accueil-hero-actions {
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

html.accueil-cred-fold-active #accueil-hero .accueil-hero-orientation {
  margin-top: clamp(0.75rem, 2vh, 1.15rem);
}

.credibility-section--above-fold .credibility-section__inner {
  gap: clamp(1rem, 2.5vh, 1.75rem);
}

.credibility-section--above-fold .credibility-card {
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

.credibility-section--above-fold #accueil-recherche-heading {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.15;
}

.credibility-section--above-fold .credibility-pillar {
  padding: clamp(0.75rem, 1.8vw, 1rem);
}

@media (max-width: 767px) {
  html.accueil-cred-fold-active #accueil-hero .accueil-hero-orientation {
    display: none;
  }

  .credibility-section--above-fold .credibility-section__quote,
  .credibility-section--above-fold .credibility-section__cta {
    display: none;
  }

  .credibility-section--above-fold .credibility-section__intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .credibility-section--above-fold .home-recherche-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .credibility-section--above-fold .credibility-pillar p:first-child {
    font-size: 0.7rem;
    line-height: 1.22;
  }

  .credibility-section--above-fold .credibility-trust-line {
    display: none;
  }

  .credibility-section--above-fold .home-recherche-cards .credibility-pillar:last-child {
    grid-column: span 1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .credibility-section--above-fold .credibility-section__quote {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
  }

  .credibility-section--above-fold .credibility-section__quote .home-quote-block__text {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .credibility-section--above-fold .credibility-section__cta {
    margin-top: 0.75rem;
  }

  .credibility-section--above-fold .credibility-section__cta .btn {
    min-height: 2.75rem;
    padding-block: 0.5rem;
  }
}

@media (min-width: 1024px) {
  html.accueil-cred-fold-active #accueil-hero .accueil-hero-title {
    font-size: clamp(2.15rem, 3.4vw, 3rem);
  }

  .credibility-section--fold-pinned {
    max-height: min(44vh, 30rem);
  }

  .credibility-section--above-fold .credibility-section__inner {
    align-items: center;
  }
}

/* Hero accueil — fond crème uniforme (DESIGN_SYSTEM.md §3) */
#accueil-hero,
.accueil-hero {
  background-color: var(--color-bg-main);
}

/* Hero — image en fond (desktop), texte centré (mobile) */
.accueil-hero__media {
  display: none;
}

.accueil-hero__inner {
  width: 100%;
}

.accueil-hero__copy {
  max-width: min(96vw, 42rem);
  margin-inline: auto;
  text-align: center;
}

.accueil-hero__lead {
  margin-inline: auto;
  max-width: 38rem;
}

.accueil-hero-orientation {
  margin-inline: auto;
  max-width: none;
  width: 100%;
}

.accueil-hero-photo-overlay {
  background: linear-gradient(
    90deg,
    var(--color-bg-main) 0%,
    color-mix(in srgb, var(--color-bg-main) 92%, transparent) 18%,
    color-mix(in srgb, var(--color-bg-main) 45%, transparent) 32%,
    transparent 48%
  );
}

@media (min-width: 1024px) {
  .accueil-hero__media {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 34%;
    right: -4rem;
    display: block;
    overflow: hidden;
  }

  .accueil-hero__media .accueil-hero-photo {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  .accueil-hero__inner {
    padding-inline: clamp(0.5rem, 2vw, 1.25rem);
  }

  .accueil-hero__copy {
    max-width: 46rem;
    margin-inline: 0;
    text-align: left;
  }

  .accueil-hero__lead {
    margin-inline: 0;
    max-width: 42rem;
  }

  .accueil-hero-orientation {
    margin-inline: 0;
    max-width: none;
  }

  .accueil-hero-title {
    margin-inline: 0;
  }

  .accueil-hero-actions {
    align-items: center;
    justify-content: flex-start;
  }
}

/* Hero accueil — titre éditorial, largeur horizontale maîtrisée */
.accueil-hero-title {
  max-width: min(94vw, 44rem);
  margin-inline: auto;
  color: var(--color-dark);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}

.accueil-hero-title__line {
  display: block;
}

.accueil-hero-title__line + .accueil-hero-title__line {
  margin-top: 0.06em;
}

/* Emphase — « liberté d'être » et « d'agir » : bronze profond, italique */
.accueil-hero-title__gold {
  color: var(--color-accent-deep);
  font-style: italic;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .accueil-hero-title {
    max-width: none;
    margin-inline: 0;
  }
}

/* Hero — photo nette, sans voile global */
.accueil-hero-photo {
  opacity: 1;
  filter: contrast(1.08) brightness(1.02) saturate(1.04);
}

/* Hero — repères + preuve de confiance */
.accueil-hero-orientation {
  padding-top: 1.35rem;
  border-top: 1px solid rgba(185, 151, 91, 0.28);
  max-width: none;
  width: 100%;
}

.accueil-hero-micro {
  display: flex;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.accueil-hero-micro__viewport {
  width: min(100%, var(--accueil-hero-micro-window, 36rem));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.accueil-hero-micro__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: accueil-hero-micro-scroll 26s linear infinite;
}

.accueil-hero-micro__list {
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  padding-inline-end: 2.25rem;
  list-style: none;
}

.accueil-hero-micro__item {
  display: inline-block;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.accueil-hero-micro__item:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin-inline: 0.42em;
  color: var(--color-accent);
  font-weight: 600;
  opacity: 0.92;
  letter-spacing: 0;
  vertical-align: baseline;
}

.accueil-hero-micro__label {
  letter-spacing: inherit;
}

@keyframes accueil-hero-micro-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-hero-micro__track {
    animation: none;
    transform: none;
  }

  .accueil-hero-micro__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .accueil-hero-micro__list + .accueil-hero-micro__list {
    display: none;
  }
}

@media (min-width: 1024px) {
  .accueil-hero-micro {
    justify-content: flex-start;
  }
}

/* Hero accueil — mobile : above the fold + CTA centrés */
@media (max-width: 767px) {
  :root {
    --site-nav-offset: 4.75rem;
  }

  #accueil-hero.accueil-hero {
    min-height: calc(100svh - var(--site-nav-offset));
    max-height: calc(100svh - var(--site-nav-offset));
    padding-block: clamp(0.65rem, 1.8vh, 1.1rem) !important;
    padding-inline: 1.25rem !important;
    align-items: center;
    overflow: hidden;
  }

  #accueil-hero .accueil-hero__inner,
  #accueil-hero .accueil-hero__copy,
  #accueil-hero [data-hero-copy] {
    min-width: 0;
    width: 100%;
  }

  #accueil-hero .accueil-hero-title {
    font-size: clamp(1.8rem, 8.8vw, 2.55rem);
    line-height: 1.04;
    max-width: 100%;
  }

  #accueil-hero .accueil-hero-title__line + .accueil-hero-title__line {
    margin-top: 0.04em;
  }

  #accueil-hero .accueil-hero__lead {
    margin-top: clamp(0.45rem, 1.4vh, 0.7rem) !important;
    font-size: clamp(0.84rem, 3.6vw, 0.92rem);
    line-height: 1.42;
    max-width: 34rem;
  }

  #accueil-hero .accueil-hero-actions {
    margin-top: clamp(0.6rem, 1.6vh, 0.9rem) !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
  }

  #accueil-hero .accueil-hero-actions .btn {
    width: min(100%, 17.5rem);
    min-height: 2.75rem;
  }

  #accueil-hero .accueil-hero-orientation {
    margin-top: clamp(0.6rem, 1.6vh, 0.9rem) !important;
    padding-top: clamp(0.55rem, 1.4vh, 0.75rem);
    max-width: 100%;
  }

  #accueil-hero .accueil-hero-micro {
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }
}

@media (max-width: 767px) and (max-height: 740px) {
  #accueil-hero .accueil-hero-title {
    font-size: clamp(1.65rem, 8.2vw, 2.2rem);
  }

  #accueil-hero .accueil-hero__lead {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  #accueil-hero .accueil-hero-actions .btn {
    min-height: 2.5rem;
    padding-block: 0.45rem;
  }

  #accueil-hero .accueil-hero-micro {
    font-size: 0.6rem;
  }
}

/* Section Motifs de consultation — fond premium introspectif */
#accueil-suite.accueil-motifs-section,
#accueil-suite.consultation-reason-section {
  background-color: #f1e7d8;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 250, 238, 0.92), transparent 34%),
    radial-gradient(circle at 86% 84%, rgba(190, 150, 92, 0.12), transparent 38%),
    linear-gradient(180deg, #f7f1e8 0%, #f1e7d8 100%);
}

#accueil-suite.accueil-motifs-section > .bg-neural-pattern {
  display: none;
}

#accueil-suite.accueil-motifs-section::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 22% 20%,
      rgba(255, 255, 248, 0.72) 0%,
      rgba(255, 248, 232, 0.28) 34%,
      transparent 62%
    ),
    radial-gradient(
      ellipse at 78% 86%,
      rgba(151, 112, 68, 0.1) 0%,
      rgba(151, 112, 68, 0.06) 36%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 52% 55%,
      rgba(255, 252, 246, 0.35) 0%,
      rgba(214, 183, 126, 0.04) 42%,
      transparent 72%
    );
  filter: blur(22px);
  pointer-events: none;
}

#accueil-suite.accueil-motifs-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.16) 0%,
      transparent 32%,
      transparent 68%,
      rgba(255, 250, 242, 0.1) 100%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(115, 88, 55, 0.007) 4px,
      rgba(115, 88, 55, 0.007) 5px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 4px,
      rgba(115, 88, 55, 0.005) 4px,
      rgba(115, 88, 55, 0.005) 5px
    ),
    linear-gradient(rgba(115, 88, 55, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 88, 55, 0.01) 1px, transparent 1px);
  background-size: 100% 100%, auto, auto, 112px 112px, 112px 112px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  mask-image: radial-gradient(ellipse 92% 82% at 42% 38%, #000 0%, transparent 78%);
  opacity: 0.42;
  pointer-events: none;
}

#accueil-suite.accueil-motifs-section .accueil-motifs-section__content {
  position: relative;
  z-index: 1;
}

#accueil-suite.accueil-motifs-section .accueil-motifs-header {
  position: relative;
  isolation: isolate;
}

#accueil-suite.accueil-motifs-section .accueil-motifs-header::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  left: 50%;
  z-index: -1;
  width: min(720px, 120%);
  height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(255, 252, 246, 0.55) 0%,
    rgba(255, 248, 232, 0.14) 40%,
    transparent 68%
  );
  filter: blur(26px);
  opacity: 0.65;
  pointer-events: none;
}

/* Section motifs — titre pleine largeur */
.accueil-motifs-header {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.accueil-motifs-header h2 {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.accueil-motifs-header p {
  margin-inline: auto;
}

/* Motifs — 4 catégories, image en arrière-plan */
.accueil-motifs-categories {
  display: flex;
  flex-direction: column;
  gap: clamp(5.5rem, 11vw, 9.5rem);
}

.accueil-motif-category {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  overflow: visible;
}

/* Cadre éditorial — image pleine, bordure douce, ombre premium */
.accueil-motif-category::before {
  content: "";
  display: block;
  grid-row: 2;
  grid-column: 1;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1024 / 682;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background-color: transparent;
  background-image: var(--motif-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow:
    0 28px 60px -16px rgba(36, 31, 26, 0.22),
    0 14px 36px -10px rgba(36, 31, 26, 0.16),
    0 6px 18px -4px rgba(36, 31, 26, 0.12),
    0 2px 8px -1px rgba(36, 31, 26, 0.09);
  pointer-events: none;
}

/* Pas de panneau blanc — le texte repose sur le fond de section */
.accueil-motif-category::after {
  display: none;
}

.accueil-motif-category--media-end::before {
  background-position: center center;
}

.accueil-motif-category__intro {
  position: relative;
  z-index: 2;
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 1.75rem);
  row-gap: 0;
  align-items: start;
  margin-bottom: 0;
  max-width: none;
  padding-bottom: clamp(1rem, 2.5vw, 1.35rem);
  border-bottom: none;
}

.accueil-motif-category__intro::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-border) 82%, var(--color-text-main));
  pointer-events: none;
}

.accueil-motif-category__index {
  margin: 0;
  padding-top: 0.2em;
  line-height: 1;
}

.accueil-motif-category__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 5vw, 3.15rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
}

.accueil-motif-category__title {
  margin: 0;
  padding-top: 0.12em;
  font-size: clamp(1.75rem, 3.8vw, 2.65rem);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--color-text-main);
}

.accueil-motif-category__row {
  position: relative;
  z-index: 1;
  grid-row: 3;
  grid-column: 1;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.accueil-motif-category--motif-01 {
  --motif-bg-image: url("../assets/motif01.png");
}

.accueil-motif-category--motif-02 {
  --motif-bg-image: url("../assets/motif02.png");
}

.accueil-motif-category--motif-03 {
  --motif-bg-image: url("../assets/motif03.png");
}

.accueil-motif-category--motif-04 {
  --motif-bg-image: url("../assets/motif04.png");
}

.accueil-motif-category__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.accueil-motif-category__text {
  margin: 0;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.accueil-motif-category__pills {
  margin: clamp(1.65rem, 3.8vw, 2.25rem) 0 0;
}

@media (min-width: 768px) {
  .accueil-motif-category {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
  }

  .accueil-motif-category::before {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    background-size: cover;
    background-position: center center;
    box-shadow:
      0 36px 72px -14px rgba(36, 31, 26, 0.24),
      0 18px 44px -10px rgba(36, 31, 26, 0.18),
      0 8px 22px -4px rgba(36, 31, 26, 0.13),
      0 3px 10px -1px rgba(36, 31, 26, 0.1);
  }

  .accueil-motif-category__intro {
    grid-column: 1;
    grid-row: 1;
  }

  .accueil-motif-category__row {
    grid-column: 1;
    grid-row: 2;
  }

  .accueil-motif-category--media-end::before {
    grid-column: 1;
    background-position: center center;
  }

  .accueil-motif-category--media-end .accueil-motif-category__intro,
  .accueil-motif-category--media-end .accueil-motif-category__row {
    grid-column: 2;
  }

  .accueil-motif-category--media-end .accueil-motif-category__intro {
    width: 100%;
    justify-self: stretch;
  }

  .accueil-motif-category--media-end .accueil-motif-category__content {
    margin-left: 0;
  }

  .accueil-motif-category--offset-end .accueil-motif-category__intro,
  .accueil-motif-category--offset-mid-end .accueil-motif-category__intro {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .accueil-motif-category--offset-end .accueil-motif-category__index,
  .accueil-motif-category--offset-mid-end .accueil-motif-category__index {
    order: 2;
    padding-top: 0.2em;
  }

  .accueil-motif-category--offset-end .accueil-motif-category__title,
  .accueil-motif-category--offset-mid-end .accueil-motif-category__title {
    order: 1;
    text-align: right;
  }
}

@media (max-width: 767px) {
  .accueil-motif-category::before {
    max-width: min(100%, 22rem);
    margin-inline: auto;
    background-size: cover;
    background-position: center center;
  }

  .accueil-motif-category__row {
    min-height: 0;
    padding-top: 0;
  }

  .accueil-motif-category__content {
    width: 100%;
    max-width: 100%;
  }
}

#accueil-recherche-heading + p {
  max-width: 36rem;
}

/* Bandeau tagline accueil — fond charbon (section sombre) */
.accueil-tagline-bg {
  background-image:
    radial-gradient(circle at 24% 20%, rgba(154, 116, 40, 0.44), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(245, 238, 223, 0.14), transparent 38%);
}

.accueil-tagline-inner.reveal {
  opacity: 0;
  transform: translateY(3.25rem) scale(0.9);
  filter: blur(6px);
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.accueil-tagline-inner.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}

.accueil-tagline-rule {
  height: 3px;
  width: 0;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 249, 241, 0.25),
    rgba(218, 184, 108, 0.95),
    rgba(255, 249, 241, 0.25),
    transparent
  );
  box-shadow:
    0 0 32px rgba(183, 146, 73, 0.45),
    0 0 64px rgba(183, 146, 73, 0.2);
  transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.accueil-tagline-inner.is-visible .accueil-tagline-rule {
  width: min(20rem, 88vw);
}

/* Tagline — apparition séquentielle au rythme de lecture */
.accueil-tagline-heading {
  margin: 0;
  /* tailles : voir bloc typographie officielle (.accueil-tagline-heading) */
}

.accueil-tagline-line {
  display: block;
  opacity: 0;
  transform: translateY(0.65rem);
  will-change: opacity, transform;
}

.accueil-tagline-line--2 {
  margin-top: clamp(0.35rem, 1.2vw, 0.55rem);
}

.accueil-tagline-accent {
  font-style: italic;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-accent-light) 28%, white);
  text-shadow: 0 0 0 rgba(216, 192, 138, 0);
  transition:
    color 0.92s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.98s cubic-bezier(0.22, 1, 0.36, 1);
}

.accueil-tagline-line--1 .accueil-tagline-accent {
  transition-delay: 0.05s;
}

.accueil-tagline-line--2 .accueil-tagline-accent {
  transition-delay: 0.5s;
}

.accueil-tagline-inner.is-visible .accueil-tagline-line--1 {
  animation: accueil-tagline-line-in 0.32s cubic-bezier(0.42, 0, 0.58, 1) 0.05s forwards;
}

.accueil-tagline-inner.is-visible .accueil-tagline-line--2 {
  animation: accueil-tagline-line-in 0.32s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
}

.accueil-tagline-inner.is-visible .accueil-tagline-accent {
  color: var(--color-accent-light);
  text-shadow:
    0 0 32px rgba(216, 192, 138, 0.28),
    0 0 64px rgba(185, 151, 91, 0.12);
}

@keyframes accueil-tagline-line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .accueil-tagline-inner.reveal,
  .accueil-tagline-inner.reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .accueil-tagline-inner.is-visible .accueil-tagline-rule {
    width: min(20rem, 88vw);
    transition: none;
  }

  .accueil-tagline-line {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .accueil-tagline-accent {
    color: var(--color-accent-light);
    text-shadow: 0 0 24px rgba(216, 192, 138, 0.2);
    transition: none;
  }
}

/* Section accueil — services (fond abstrait premium) */
#accueil-services-editorial.accueil-services-editorial {
  background-color: #ecdfd0;
  background-image:
    radial-gradient(circle at 50% 6%, rgba(255, 250, 240, 1), transparent 48%),
    radial-gradient(circle at 12% 92%, rgba(180, 136, 72, 0.14), transparent 42%),
    radial-gradient(circle at 94% 88%, rgba(120, 91, 54, 0.12), transparent 40%),
    linear-gradient(180deg, #f5ebe0 0%, #ecdfd0 100%);
  background-repeat: no-repeat;
}

#accueil-services-editorial.accueil-services-editorial::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  background:
    radial-gradient(
      ellipse at 18% 78%,
      rgba(155, 115, 68, 0.28) 0%,
      rgba(155, 115, 68, 0.18) 28%,
      transparent 66%
    ),
    radial-gradient(
      ellipse at 62% 88%,
      rgba(111, 82, 52, 0.24) 0%,
      rgba(111, 82, 52, 0.14) 30%,
      transparent 70%
    ),
    radial-gradient(
      ellipse at 98% 75%,
      rgba(194, 154, 96, 0.26) 0%,
      rgba(194, 154, 96, 0.14) 32%,
      transparent 72%
    ),
    radial-gradient(
      ellipse at 4% 18%,
      rgba(255, 252, 246, 0.82) 0%,
      rgba(214, 183, 126, 0.14) 38%,
      transparent 76%
    ),
    radial-gradient(
      ellipse at 88% 12%,
      rgba(185, 151, 91, 0.2) 0%,
      rgba(185, 151, 91, 0.09) 36%,
      transparent 74%
    );
  filter: blur(12px);
  opacity: 1;
  pointer-events: none;
}

#accueil-services-editorial.accueil-services-editorial::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -42%;
  z-index: 0;
  width: 130%;
  height: 80%;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(126, 94, 58, 0.12) 26%,
    rgba(126, 94, 58, 0.22) 46%,
    rgba(255, 250, 240, 0.32) 60%,
    transparent 82%
  );
  border-radius: 50% 50% 0 0;
  transform: rotate(-6deg);
  filter: blur(4px);
  pointer-events: none;
}

#accueil-services-editorial.accueil-services-editorial > * {
  position: relative;
  z-index: 1;
}

.home-svc-header::before {
  content: "";
  position: absolute;
  top: -3.5rem;
  left: 50%;
  z-index: -1;
  width: min(640px, 110%);
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(255, 248, 232, 0.42) 0%,
    rgba(214, 183, 126, 0.08) 42%,
    transparent 62%
  );
  filter: blur(28px);
  opacity: 0.75;
  pointer-events: none;
}

.home-svc-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.home-svc-header {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.home-svc-header .site-section-wayfinder {
  margin-bottom: clamp(1.15rem, 3vw, 1.5rem);
}

.home-svc-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--color-text-main);
}

.home-svc-header__intro {
  margin: clamp(1rem, 2.5vw, 1.35rem) auto 0;
  max-width: min(760px, 72ch);
  font-size: clamp(var(--text-base), 1.8vw, var(--text-md));
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.home-svc-header__reassurance {
  margin: clamp(0.75rem, 2vw, 1rem) auto 0;
  max-width: 32rem;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  font-style: italic;
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-accent-deep) 48%, var(--color-text-muted));
}

.home-svc-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.35rem);
}

.home-svc-path {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.1rem);
  margin: 0;
  min-height: 100%;
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, rgba(255, 255, 255, 0.52));
  background: linear-gradient(
    145deg,
    rgba(255, 252, 248, 0.55) 0%,
    rgba(255, 249, 241, 0.4) 52%,
    rgba(248, 238, 224, 0.34) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
  box-shadow:
    0 24px 70px rgba(64, 47, 28, 0.08),
    0 4px 18px rgba(64, 47, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -12px 28px rgba(255, 255, 255, 0.06);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.home-svc-path::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 36%,
    transparent 58%
  );
  pointer-events: none;
}

.home-svc-path > * {
  position: relative;
  z-index: 1;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-svc-path {
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-main) 100%);
  }
}

.home-svc-path__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem 0.9rem;
  align-items: start;
}

.home-svc-path__num {
  margin: 0;
  padding-top: 0.12em;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--tracking-body);
  color: var(--color-accent);
}

.home-svc-path__head {
  min-width: 0;
}

.home-svc-path__title {
  margin: 0;
  font-size: clamp(var(--text-md), 2.2vw, var(--text-xl));
  font-weight: 600;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-body);
  text-wrap: balance;
  color: var(--color-text-main);
}

.home-svc-path__rule {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin-top: 0.65rem;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent-light) 55%, transparent) 100%
  );
}

.home-svc-path__body {
  margin: 0;
  font-size: clamp(0.92rem, 1.45vw, 1rem);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.home-svc-path__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-svc-path__pills-item {
  margin: 0;
}

.home-svc-path__pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-accent) 18%);
  background: var(--color-accent-12);
  color: var(--color-accent-deep);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-ui);
  text-decoration: none;
  transition:
    color 0.32s ease,
    border-color 0.32s ease,
    box-shadow 0.32s ease;
}

.home-svc-path__pill-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent-soft) 42%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-accent) 24%, var(--color-surface)) 100%
  );
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.42, 0, 0.58, 1);
}

.home-svc-path__pill-label {
  position: relative;
  z-index: 1;
}

.home-svc-path__pill:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.home-svc-path__micro {
  margin: auto 0 0;
  padding-top: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent-deep) 70%, var(--color-text-muted));
}

.home-svc-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

.home-svc-note {
  margin: 0;
  max-width: 36rem;
  text-align: center;
  font-size: clamp(0.92rem, 1.4vw, 1rem);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

.home-svc-footer {
  display: flex;
  justify-content: center;
}

/* Services accueil — CTA secondaire (base : .btn.btn-secondary) */
.home-svc-cta.btn {
  padding: 0.9rem 2rem;
  box-shadow: 0 12px 32px -24px rgba(36, 31, 26, 0.2);
}

.home-svc-cta .material-symbols-outlined {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.home-svc-cta:hover {
  transform: translateY(-1px);
}

.home-svc-cta:hover .material-symbols-outlined {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .home-svc-paths {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: stretch;
  }
}

@media (hover: hover) {
  .home-svc-path__pill:hover,
  .home-svc-path__pill:focus-visible {
    color: var(--color-text-main);
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--color-border));
    box-shadow: 0 6px 16px -10px rgba(36, 31, 26, 0.14);
  }

  .home-svc-path__pill:hover .home-svc-path__pill-fill,
  .home-svc-path__pill:focus-visible .home-svc-path__pill-fill {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-svc-path,
  .home-svc-cta,
  .home-svc-path__pill,
  .home-svc-path__pill-fill {
    transition: none;
  }

  .home-svc-cta:hover {
    transform: none;
  }

  .home-svc-path__pill:hover .home-svc-path__pill-fill,
  .home-svc-path__pill:focus-visible .home-svc-path__pill-fill {
    opacity: 1;
  }

  .home-svc-cta .material-symbols-outlined {
    transition: none;
  }
}

/* Navigation principale */
nav.site-nav {
  width: 100%;
  padding-top: env(safe-area-inset-top, 0);
}

@media (max-width: 767px) {
  nav.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    box-shadow: none;
  }

  .site-nav__bar {
    background: rgba(255, 249, 240, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(185, 151, 91, 0.16);
  }
}

@media (min-width: 768px) {
  nav.fixed,
  nav.site-nav,
  nav[class*="bg-[#fbf9f5]"] {
    position: fixed;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg-main) 90%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  }
}

.site-nav__bar {
  position: relative;
  z-index: 51;
  padding-top: 0.625rem !important;
  padding-bottom: 0.625rem !important;
}

@media (min-width: 640px) {
  .site-nav__bar {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }
}

@media (min-width: 768px) {
  .site-nav__bar {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

@media (min-width: 768px) {
  .site-nav__bar {
    justify-content: space-between;
  }

  .site-nav__links {
    flex: 1;
    justify-content: center;
  }
}

.site-nav__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: max-content;
  max-width: min(92vw, 22rem);
}

@media (max-width: 767px) {
  .site-nav__bar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.5rem;
  }

  .site-nav__brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-items: center;
    text-align: center;
    flex: none;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  }

  .site-nav__brand .site-logo-name,
  .site-nav__brand .brand-name {
    font-size: clamp(0.9rem, 3.2vw, 1.05rem);
    max-width: none;
    width: max-content;
    margin-inline: 0;
    text-align: center;
  }

  .site-nav__brand .site-logo-tagline,
  .site-nav__brand .brand-subtitle {
    margin-top: 0.24rem;
    margin-inline: 0;
    margin-inline-end: -0.08em;
    width: max-content;
    max-width: 100%;
    font-size: clamp(0.5rem, 2.1vw, 0.58rem);
    text-align: center;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .site-nav__tools {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
    flex-shrink: 0;
    z-index: 2;
  }
}

@media (min-width: 768px) {
  .site-nav__brand {
    max-width: none;
  }
}

.site-nav__tools {
  flex-shrink: 0;
}

/* Header — dimensions spécifiques (hérite de .btn + .btn-primary--charcoal) */
.site-nav__cta {
  padding: 0.5rem 0.9rem;
  min-height: 2.5rem;
  font-size: clamp(0.875rem, 1vw, 0.9375rem);
  box-shadow: none;
}

@media (max-width: 767px) {
  .site-nav__tools {
    gap: 0.25rem;
  }

  .site-nav__tools > .site-nav__cta {
    min-height: 1.625rem;
    padding: 0.14rem 0.38rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border-radius: 0.375rem;
    box-shadow: none;
    white-space: nowrap;
  }

  .site-nav__tools > .site-nav__cta.btn-primary--charcoal {
    box-shadow: none;
  }
}

@media (max-width: 767px) and (min-width: 420px) {
  .site-nav__tools > .site-nav__cta {
    min-height: 1.5rem;
    padding: 0.12rem 0.3rem;
    font-size: 0.58rem;
    letter-spacing: 0.01em;
  }

  .site-nav__brand .site-logo-tagline,
  .site-nav__brand .brand-subtitle {
    font-size: clamp(0.46rem, 1.8vw, 0.52rem);
    letter-spacing: 0.05em;
    margin-inline-end: -0.05em;
    white-space: nowrap;
  }
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  transform: none;
}

.site-nav__toggle {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  background: var(--color-surface);
  color: var(--color-dark-deep);
  touch-action: manipulation;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

.site-nav__toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 1.25rem;
  height: 1rem;
}

.site-nav__toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-dark-deep);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-nav--open .site-nav__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav--open .site-nav__toggle-line:nth-child(2) {
  opacity: 0;
}

.site-nav--open .site-nav__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__toggle,
  .site-nav__toggle-line {
    transition: none;
  }
}

.site-nav__panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: color-mix(in srgb, var(--color-bg-main) 98%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.site-nav__panel[hidden] {
  display: none !important;
}

.site-nav__panel:not([hidden]) {
  display: block;
}

@media (max-width: 767px) {
  .site-nav__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 60;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--site-nav-offset, 4.5rem));
    background: var(--color-bg-soft);
    border-top: none;
    box-shadow: 0 16px 40px -20px rgba(36, 31, 26, 0.18);
  }
}

.site-nav__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1rem 2rem;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
  .site-nav__panel-inner {
    padding-inline: 1.5rem;
  }
}

.site-nav-link--mobile {
  display: flex;
  min-height: 2.875rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-main) !important;
  text-decoration: none;
}

.site-nav-link--mobile[aria-current="page"] {
  color: var(--color-accent-deep) !important;
}

.site-nav__cta--panel {
  margin-top: 0.75rem;
  min-height: 3.25rem;
  width: 100%;
}

html.site-nav-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  body > main {
    padding-top: var(--site-nav-offset, 5.75rem) !important;
  }
}

/* Mobile — lisibilité et médias */
img,
video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  #services-navigation .mx-auto {
    gap: 0.5rem;
  }

  #services-navigation a {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.125rem;
  border-bottom: 2px solid transparent !important;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: var(--leading-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted) !important;
  text-decoration: none;
  outline: none;
  transition: none;
  transform: none !important;
}

.site-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-in-out;
}

.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  color: var(--color-text-main) !important;
  transform: none !important;
  border-bottom-color: transparent !important;
}

.site-nav-link[aria-current="page"] {
  color: var(--color-accent-deep) !important;
}

.site-nav-link:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

footer {
  background: var(--color-dark-deep) !important;
  color: var(--color-bg-soft) !important;
  border-top: 1px solid var(--color-champagne-16);
}

footer h2,
footer h3,
footer .site-footer-name,
footer [class*="font-semibold"] {
  color: var(--color-bg-soft) !important;
}

footer a,
footer p {
  color: var(--color-ivory-72) !important;
}

footer a:hover {
  color: var(--color-accent-soft) !important;
}

footer [class*="text-white"],
[class*="bg-[#141c2c]"] [class*="text-white"],
[class*="bg-[#1b1c1a]"] [class*="text-white"],
[class*="bg-[#292215]"] [class*="text-white"] {
  color: var(--color-bg-soft) !important;
}

[class*="bg-[#141c2c]"] [class*="bg-white"],
[class*="bg-[#1b1c1a]"] [class*="bg-white"],
[class*="bg-[#292215]"] [class*="bg-white"],
footer [class*="bg-white"] {
  background-color: var(--color-ivory-08) !important;
}

[class*="bg-[#141c2c]"] [class*="border-white"],
[class*="bg-[#1b1c1a]"] [class*="border-white"],
[class*="bg-[#292215]"] [class*="border-white"],
footer [class*="border-white"] {
  border-color: var(--color-champagne-16) !important;
}

/* Liens sur fond sombre */
[class*="bg-[#1E1A16]"] a:not([class*="bg-"]),
[class*="bg-[#141c2c]"] a:not([class*="bg-"]),
[class*="bg-[#292215]"] a:not([class*="bg-"]),
.bg-inverse-surface a:not([class*="bg-"]) {
  color: var(--color-accent-soft);
}

[class*="bg-[#1E1A16]"] a:not([class*="bg-"]):hover,
[class*="bg-[#141c2c]"] a:not([class*="bg-"]):hover,
[class*="bg-[#292215]"] a:not([class*="bg-"]):hover,
.bg-inverse-surface a:not([class*="bg-"]):hover {
  color: var(--color-bg-soft);
}

@keyframes scroll-hint-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.scroll-hint-arrow {
  animation: scroll-hint-bob 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow {
    animation: none;
  }
}

/* Fonds décoratifs */
.bg-neural-pattern {
  background-image: radial-gradient(
    circle at 2px 2px,
    rgba(180, 122, 75, 0.06) 1px,
    transparent 0
  );
  background-size: 42px 42px;
}

.grain-overlay {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.22) 1px,
    transparent 0
  );
  background-size: 18px 18px;
}

/* Page Approche */
.elysian-gradient {
  background: radial-gradient(
    circle at 2px 2px,
    rgba(180, 122, 75, 0.075) 1px,
    transparent 0
  );
  background-size: 48px 48px;
}

.gold-shimmer {
  background: linear-gradient(135deg, var(--accent-gold-hover) 0%, var(--accent-gold-soft) 52%, var(--accent-gold-hover) 100%);
}

.sepia-glow {
  filter: sepia(0.2) contrast(1.05) brightness(0.95);
}

/* Timeline — À propos : fond narratif (section #parcours) */
#parcours {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(185, 151, 91, 0.2), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(41, 34, 21, 0.1), transparent 30%),
    radial-gradient(circle at 22% 48%, rgba(216, 192, 138, 0.16), transparent 26%),
    radial-gradient(circle at 78% 68%, rgba(36, 31, 26, 0.12), transparent 32%),
    radial-gradient(circle at 50% 94%, rgba(185, 151, 91, 0.14), transparent 34%),
    linear-gradient(
      180deg,
      #fff9f0 0%,
      #f7f0e6 24%,
      #efe2d0 48%,
      #f7f0e6 74%,
      #fff9f0 100%
    );
  box-shadow:
    inset 0 80px 120px rgba(36, 31, 26, 0.06),
    inset 0 -80px 120px rgba(36, 31, 26, 0.05);
}

#parcours::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(36, 31, 26, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 31, 26, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, rgba(36, 31, 26, 0.045) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(185, 151, 91, 0.05) 0 1px, transparent 1px);
  background-size:
    56px 56px,
    56px 56px,
    18px 18px,
    22px 22px;
  opacity: 0.32;
  mix-blend-mode: multiply;
}

/* Ancien voile jaune/blanc — remplacé par le fond narratif */
#parcours > .pointer-events-none.absolute.inset-0 {
  display: none;
}

#parcours > .relative.mx-auto {
  position: relative;
  z-index: 1;
}

#parcours .timeline-card:not(.is-current) {
  box-shadow:
    0 20px 48px rgba(36, 31, 26, 0.1),
    0 6px 18px rgba(36, 31, 26, 0.06);
}

#parcours .timeline-line {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    180deg,
    rgba(185, 151, 91, 0.08),
    rgba(185, 151, 91, 0.22) 14%,
    rgba(36, 31, 26, 0.2) 52%,
    rgba(185, 151, 91, 0.18) 86%,
    rgba(185, 151, 91, 0.08)
  );
}

/* Timeline — contraste texte (cartes claires & sombres) */
#parcours #timeline-heading {
  color: var(--color-text-main) !important;
}

#parcours .mx-auto.max-w-4xl > p {
  color: color-mix(in srgb, var(--color-text-main) 88%, var(--color-text-muted)) !important;
}

#parcours .timeline-card.bg-surface-container-lowest .text-on-surface,
#parcours .timeline-card.bg-surface-container-lowest h3 {
  color: var(--color-text-main) !important;
}

#parcours .timeline-card.bg-surface-container-lowest .text-on-surface-variant,
#parcours .timeline-card.bg-surface-container-lowest .text-secondary,
#parcours .timeline-card.bg-surface-container-lowest [class*="text-on-surface-variant"],
#parcours .timeline-card.bg-surface-container-lowest [class*="text-secondary"] {
  color: color-mix(in srgb, var(--color-text-main) 86%, var(--color-text-muted)) !important;
}

#parcours .timeline-card.bg-surface-container-lowest .text-primary,
#parcours .timeline-card.bg-surface-container-lowest [class*="text-primary"] {
  color: var(--color-accent-deep) !important;
}

#parcours .timeline-card.bg-\[\#241F1A\],
#parcours .timeline-card.bg-\[\#1E1A16\] {
  color: var(--color-bg-soft);
}

#parcours .timeline-card.bg-\[\#241F1A\] h3,
#parcours .timeline-card.bg-\[\#1E1A16\] h3,
#parcours .timeline-card.bg-\[\#241F1A\] .text-white,
#parcours .timeline-card.bg-\[\#1E1A16\] .text-white {
  color: var(--color-bg-soft) !important;
}

#parcours .timeline-card.bg-\[\#241F1A\] [class*="text-white/74"],
#parcours .timeline-card.bg-\[\#1E1A16\] [class*="text-white/74"] {
  color: var(--color-bg-soft) !important;
}

#parcours .timeline-card.bg-\[\#241F1A\] [class*="text-\\[\\#D8C08A\\]"],
#parcours .timeline-card.bg-\[\#1E1A16\] [class*="text-\\[\\#D8C08A\\]"] {
  color: var(--color-accent-soft) !important;
}

#parcours .timeline-card.bg-\[\#241F1A\] .text-sm.font-semibold,
#parcours .timeline-card.bg-\[\#1E1A16\] .text-sm.font-semibold {
  color: var(--color-accent-soft) !important;
}

/* À propos — apparitions médiatiques (après timeline) */
.apropos-media-spotlight {
  position: relative;
  z-index: 1;
}

.apropos-media-spotlight .site-section-wayfinder {
  margin-bottom: 0;
}

.apropos-media-carousel {
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 4vw, 3rem));
}

.apropos-media-carousel__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(2rem, 8vw, 4.5rem);
  pointer-events: none;
}

.apropos-media-carousel__fade--start {
  left: 0;
  background: linear-gradient(90deg, var(--color-surface-container-low) 0%, transparent 100%);
}

.apropos-media-carousel__fade--end {
  right: 0;
  background: linear-gradient(270deg, var(--color-surface-container-low) 0%, transparent 100%);
}

.apropos-media-carousel__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.5rem, 4vw, 3rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-accent) 35%, transparent) transparent;
}

.apropos-media-carousel__scroller::-webkit-scrollbar {
  height: 6px;
}

.apropos-media-carousel__scroller::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}

.apropos-media-carousel__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  width: max-content;
  min-width: 100%;
  padding: 0.35rem clamp(1.5rem, 4vw, 3rem) 1.5rem;
}

.apropos-media-card {
  flex: 0 0 clamp(22rem, 92vw, 30rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.8vw, 1.15rem);
  min-height: clamp(15.5rem, 42vw, 19rem);
  padding: clamp(1.65rem, 4vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--color-surface-container-lowest);
  box-shadow:
    0 2px 4px rgba(36, 31, 26, 0.05),
    0 22px 48px -24px rgba(36, 31, 26, 0.16);
}

.apropos-media-card__year,
.apropos-media-card__badge {
  margin: 0;
  font-size: clamp(0.72rem, 1.2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-deep, #8a6a3e);
}

.apropos-media-card__outlet {
  margin: 0;
  font-size: clamp(0.875rem, 1.5vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.apropos-media-card__title {
  margin: 0;
  font-family: var(--font-headline, "Playfair Display", Georgia, serif);
  font-size: clamp(1.45rem, 3.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text-main);
}

.apropos-media-card__title em {
  font-style: italic;
  font-weight: 400;
}

.apropos-media-card__text {
  margin: 0;
  margin-top: auto;
  font-size: clamp(1rem, 1.8vw, 1.0625rem);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.apropos-media-card:has(.apropos-media-card__cta) .apropos-media-card__text {
  margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
}

.apropos-media-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Carte photo — fond sombre, luminosité au survol */
.apropos-media-card--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  background-color: #14110e;
  box-shadow:
    0 2px 6px rgba(20, 17, 14, 0.2),
    0 24px 52px -24px rgba(20, 17, 14, 0.45);
}

.apropos-media-card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(0.36) saturate(0.9);
  transform: scale(1.006);
  transition:
    filter 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.apropos-media-card--photo-salut-bonjour::before {
  background-image: url("../assets/salut-bonjour-messmer-studio.png");
}

.apropos-media-card--photo-marina-orsini::before {
  background-image: url("../assets/marina-orsini-tva-studio.png");
}

.apropos-media-card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    165deg,
    rgba(20, 17, 14, 0.72) 0%,
    rgba(20, 17, 14, 0.58) 42%,
    rgba(20, 17, 14, 0.88) 100%
  );
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.apropos-media-card--photo > * {
  position: relative;
  z-index: 2;
}

.apropos-media-card--photo .apropos-media-card__badge {
  color: var(--color-accent-soft);
}

.apropos-media-card--photo .apropos-media-card__title {
  color: var(--color-on-dark);
}

.apropos-media-card--photo .apropos-media-card__outlet {
  color: color-mix(in srgb, var(--color-on-dark) 82%, transparent);
}

.apropos-media-card--photo .apropos-media-card__text {
  color: color-mix(in srgb, var(--color-on-dark) 88%, transparent);
}

.apropos-media-card--photo .btn.btn-secondary {
  background: var(--color-ivory-08);
  color: var(--color-bg-soft);
  border-color: var(--color-champagne-16);
}

.apropos-media-card--photo .btn.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-bg-soft) 12%, transparent);
  color: var(--color-bg-soft);
  border-color: color-mix(in srgb, var(--color-accent-soft) 40%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .apropos-media-card--photo:hover::before,
  .apropos-media-card--photo:focus-within::before {
    filter: brightness(0.9) saturate(0.96);
    transform: scale(1);
  }

  .apropos-media-card--photo:hover::after,
  .apropos-media-card--photo:focus-within::after {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apropos-media-card--photo::before,
  .apropos-media-card--photo::after {
    transition: none;
  }
}

@media (min-width: 768px) {
  .apropos-media-card {
    flex-basis: clamp(26rem, 62vw, 34rem);
    min-height: 18rem;
  }
}

@media (min-width: 1024px) {
  .apropos-media-carousel__track {
    padding-inline: clamp(2rem, 5vw, 3.5rem);
    gap: clamp(1.25rem, 2vw, 2rem);
  }

  .apropos-media-card {
    flex-basis: clamp(28rem, 44vw, 36rem);
    min-height: 20rem;
    padding: 2.5rem 2.75rem;
  }

  .apropos-media-card__title {
    font-size: clamp(1.65rem, 2.4vw, 2rem);
  }

  .apropos-media-card__text {
    font-size: 1.125rem;
    line-height: 1.65;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .apropos-media-carousel__scroller {
    scroll-behavior: smooth;
  }
}

.timeline {
  position: relative;
  z-index: 1;
}

.timeline-track {
  position: relative;
}

.timeline-line,
.timeline-progress {
  position: absolute;
  top: 0;
  left: 1.25rem;
  border-radius: 9999px;
}

.timeline-line {
  z-index: 1;
  height: 100%;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(180, 122, 75, 0.06),
    rgba(180, 122, 75, 0.16) 14%,
    rgba(36, 31, 27, 0.16) 52%,
    rgba(180, 122, 75, 0.14) 86%,
    rgba(180, 122, 75, 0.06)
  );
  opacity: 0.9;
}

.timeline-progress {
  z-index: 2;
  height: 0;
  width: 3px;
  transform-origin: top center;
  background: linear-gradient(
    180deg,
    rgba(180, 122, 75, 0.82),
    rgba(155, 102, 63, 0.98) 26%,
    rgba(180, 122, 75, 0.98) 72%,
    rgba(180, 122, 75, 0.78)
  );
  box-shadow:
    0 0 0 1px rgba(180, 122, 75, 0.18),
    0 10px 26px rgba(155, 102, 63, 0.24);
}

.timeline-marker {
  position: absolute;
  top: 2rem;
  left: 1.25rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.65rem;
  height: 2.65rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg-soft));
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1;
  color: color-mix(in srgb, var(--color-text-muted) 52%, var(--color-bg-soft));
  box-shadow: 0 4px 14px -10px rgba(36, 31, 26, 0.2);
  transition:
    color 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.timeline-marker.is-active .timeline-num {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
  background: radial-gradient(
    circle at 38% 28%,
    color-mix(in srgb, var(--color-accent-soft) 42%, var(--color-bg-soft)) 0%,
    color-mix(in srgb, var(--color-surface) 88%, var(--color-bg-soft)) 100%
  );
  color: var(--color-accent-deep, #8a6a3e);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--color-accent) 14%, transparent),
    0 10px 26px color-mix(in srgb, var(--color-accent) 22%, transparent);
  transform: scale(1.06);
}

.timeline-card-inner {
  will-change: transform;
}

.timeline-card {
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

/* Mots-clés en cartes timeline */
.timeline-card .timeline-key {
  font-weight: 800;
  letter-spacing: var(--tracking-body);
}

.timeline-card .text-white\/74 .timeline-key,
.timeline-card.bg-\[\#241F1A\] .timeline-key {
  color: var(--color-bg-soft);
}

.timeline-card .text-on-surface-variant .timeline-key,
#parcours .timeline-card.bg-surface-container-lowest .timeline-key {
  color: var(--color-text-main) !important;
}

.timeline-card.is-current {
  border-color: var(--color-accent-20);
  box-shadow:
    0 30px 70px rgba(36, 31, 26, 0.16),
    0 0 0 1px var(--color-accent-20),
    0 0 34px var(--color-accent-12);
  filter: saturate(1.02) contrast(1.02) brightness(1.01);
}

.timeline-card-media,
.timeline-card-content {
  will-change: opacity, transform;
}

@media (min-width: 1024px) {
  .timeline-line,
  .timeline-progress {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-marker {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-marker.is-active .timeline-num {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-num,
  .timeline-marker.is-active .timeline-num {
    transition: none;
  }
}

/* Accordéons — À propos */
details.ap-acc summary {
  list-style: none;
}

details.ap-acc summary::-webkit-details-marker {
  display: none;
}

details.ap-acc .ap-acc-icon {
  transition: transform 0.25s ease;
}

details.ap-acc[open] .ap-acc-icon {
  transform: rotate(180deg);
}

.scrub-word {
  display: inline-block;
  opacity: 0.16;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .site-scroll-scrim {
    display: none;
  }

  .scrub-word {
    opacity: 1;
    transform: none;
  }
}

/* Accordéons — section Recherche (À propos) */
details.research-details summary:focus-visible {
  outline: 2px solid rgba(180, 122, 75, 0.45);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

/* ——— Trajectoire scientifique (#recherche-about-root) — crème / or / charbon — */
.research-science-section {
  color: var(--color-text-main);
}

#recherche-about-root .research-step-header__badge-wrap {
  margin-bottom: 1.35rem;
}

@media (min-width: 768px) {
  #recherche-about-root .research-step-header__badge-wrap {
    margin-bottom: 1.6rem;
  }
}

.research-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-accent-deep);
  background: linear-gradient(180deg, var(--color-bg-card) 0%, var(--color-bg-main) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 9999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.research-step-header__title {
  margin-top: 0.15rem;
}

/* Rail desktop : ligne affinée */
.research-rail-lg__line {
  background: linear-gradient(
    180deg,
    rgba(185, 151, 91, 0) 0%,
    rgba(185, 151, 91, 0.2) 10%,
    rgba(230, 216, 199, 0.75) 50%,
    rgba(185, 151, 91, 0.16) 90%,
    rgba(185, 151, 91, 0) 100%
  );
  opacity: 0.88;
}

.research-rail-lg__mark {
  box-shadow: 0 6px 20px rgba(30, 26, 22, 0.05);
}

/* Rail mobile : variante légère */
@media (max-width: 1023px) {
  .research-step-shell {
    position: relative;
    padding-left: 1.35rem;
  }

  .research-step-shell::before {
    content: "";
    position: absolute;
    left: 0.2rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background: linear-gradient(
      180deg,
      rgba(185, 151, 91, 0) 0%,
      rgba(230, 216, 199, 0.95) 12%,
      rgba(230, 216, 199, 0.75) 50%,
      rgba(185, 151, 91, 0.12) 100%
    );
  }

  .research-step-shell::after {
    content: "";
    position: absolute;
    left: 0.02rem;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: radial-gradient(circle at 35% 30%, #d8c08a 0%, #b9975b 55%, #8a7348 100%);
    border: 1.5px solid #fffcf6;
    box-shadow: 0 0 0 2px rgba(185, 151, 91, 0.12);
  }
}

/* Citation d’étape */
.research-quote {
  position: relative;
  margin: 0;
}

.research-quote__inner {
  position: relative;
  margin: 0;
  padding: 1.5rem 1.5rem 1.5rem 1.35rem;
  border-radius: 0.75rem;
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(135deg, rgba(255, 252, 246, 1) 0%, rgba(247, 237, 218, 0.65) 48%, rgba(255, 249, 238, 0.92) 100%);
  border-top: 1px solid rgba(230, 216, 199, 0.65);
  border-right: 1px solid rgba(230, 216, 199, 0.45);
  border-bottom: 1px solid rgba(230, 216, 199, 0.45);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(30, 26, 22, 0.05);
}

.research-quote__inner::before {
  content: "\201C";
  position: absolute;
  right: 0.85rem;
  top: 0.35rem;
  font-family: var(--font-heading);
  font-size: 4.25rem;
  line-height: 1;
  color: rgba(185, 151, 91, 0.09);
  pointer-events: none;
  user-select: none;
}

@media (min-width: 768px) {
  .research-quote__inner {
    padding: 1.65rem 1.75rem 1.65rem 1.5rem;
    border-radius: 0.85rem;
  }
}

.research-quote__text {
  position: relative;
  max-width: 38rem;
}

/* Cartes figures scientifiques — zone image maximisée, légende compacte */
#recherche-about-root .research-img-card {
  display: flex;
  flex-direction: column;
}

#recherche-about-root .research-img-card > div:first-child {
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(10.5rem, 34vw, 18rem);
}

#recherche-about-root .research-gallery-grid .research-img-card > div:first-child {
  min-height: clamp(11.5rem, 38vw, 20rem);
}

@media (min-width: 768px) {
  #recherche-about-root .research-img-card > div:first-child {
    min-height: clamp(11rem, 28vw, 19rem);
  }

  #recherche-about-root .research-gallery-grid .research-img-card > div:first-child {
    min-height: clamp(12rem, 22vw, 21rem);
  }
}

@media (min-width: 1024px) {
  #recherche-about-root .research-gallery-grid .research-img-card > div:first-child {
    min-height: clamp(13rem, 18vw, 22rem);
  }

  #recherche-about-root .research-editorial-stack .research-img-card--primary > div:first-child {
    min-height: clamp(12rem, 20vw, 20rem);
  }

  #recherche-about-root .research-editorial-stack .research-img-card--secondary > div:first-child {
    min-height: clamp(11rem, 18vw, 18rem);
  }
}

#recherche-about-root .research-spotlight-fig > div:first-child {
  min-height: clamp(12rem, 36vw, 22rem);
}

.research-img-frame {
  border-radius: 0.35rem;
  padding: 0.25rem 0.35rem;
}

@media (min-width: 768px) {
  .research-img-frame {
    padding: 0.35rem 0.5rem;
  }
}

.research-img-frame__img {
  border-radius: 0.25rem;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#recherche-about-root .research-img-card__legend {
  flex: 0 0 auto;
}

#recherche-about-root .research-img-card__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
}

#recherche-about-root .research-img-card--dense .research-img-card__legend h4 {
  font-size: 0.98rem;
}

#recherche-about-root .research-spotlight-fig figcaption {
  padding: 1rem 1.15rem 1.15rem;
}

@media (min-width: 768px) {
  #recherche-about-root .research-spotlight-fig figcaption {
    padding: 1.1rem 1.25rem 1.2rem;
  }
}

.research-img-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-top: 0.4rem;
}

.research-img-meta__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent-deep);
  background: var(--color-accent-12);
  border: 1px solid var(--color-champagne-16);
  border-radius: 9999px;
}

.research-img-card--secondary {
  box-shadow: 0 8px 26px rgba(30, 26, 22, 0.04);
}

.research-intro-pull {
  font-style: normal;
}

.research-steps-stack > .research-step:first-child .research-step-shell::before {
  top: 0.15rem;
}

#recherche-about-root {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* À propos — fin de page : contrastes de lecture renforcés */
#recherche-about-root .research-outro {
  background: var(--color-surface) !important;
  color: var(--color-text-main) !important;
}

#recherche-about-root .research-outro__title,
#recherche-about-root .research-outro h3 {
  color: var(--color-text-main) !important;
}

#recherche-about-root .research-outro .text-on-surface-variant,
#recherche-about-root .research-outro p {
  color: color-mix(in srgb, var(--color-text-main) 80%, var(--color-text-muted)) !important;
}

section[aria-labelledby="pratique-heading"] .text-on-surface-variant {
  color: color-mix(in srgb, var(--color-text-main) 72%, var(--color-text-muted)) !important;
}

section[aria-labelledby="pratique-heading"] .text-primary {
  color: var(--color-accent-deep) !important;
}

section[aria-labelledby="recodex-heading"] .text-on-surface-variant {
  color: color-mix(in srgb, var(--color-text-main) 72%, var(--color-text-muted)) !important;
}

section[aria-labelledby="recodex-heading"] .bg-\[\#D8C08A\] p {
  color: var(--color-text-main) !important;
}

section[aria-labelledby="recodex-heading"] .bg-\[\#D8C08A\] p.text-\[\#241F1A\]\/88 {
  color: color-mix(in srgb, var(--color-text-main) 88%, transparent) !important;
}

section[aria-labelledby="recodex-heading"] .bg-\[\#241F1A\] .text-on-dark-muted,
section[aria-labelledby="recodex-heading"] .bg-\[\#241F1A\] p {
  color: var(--color-ivory-82) !important;
}

section[aria-labelledby="explorer-recodex-heading"] #explorer-recodex-heading,
section[aria-labelledby="explorer-recodex-heading"] h2.font-headline {
  color: var(--color-bg-soft) !important;
}

/* Section signature — À propos (sans assombrissement scroll, contraste lisible) */
.signature-section--apropos {
  background-color: var(--color-dark-deep);
  isolation: isolate;
}

.signature-section--apropos__glow {
  opacity: 1;
}

.signature-section--apropos__title,
.signature-section--apropos #signature-heading {
  color: var(--color-bg-soft) !important;
  text-shadow: none;
}

.signature-section--apropos .signature-section__panel--light {
  border-color: var(--color-border) !important;
  background: var(--color-surface) !important;
  box-shadow: 0 20px 48px rgba(20, 17, 14, 0.18);
}

.signature-section--apropos .signature-section__panel--light > p:first-child {
  color: var(--color-text-main) !important;
}

.signature-section--apropos .signature-section__panel--light .text-on-surface-variant,
.signature-section--apropos .signature-section__panel--light p {
  color: color-mix(in srgb, var(--color-text-main) 72%, var(--color-text-muted)) !important;
}

.signature-section--apropos .btn.btn-secondary {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.signature-section--apropos .btn.btn-secondary:hover {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border));
}

footer.bg-\[\#1E1A16\] .text-stone-400 {
  color: color-mix(in srgb, var(--color-bg-soft) 78%, var(--color-ivory-82)) !important;
}