/* ==========================================================================
   AHVELIOR PARTNERS — CONTINUITÉ OPÉRATIONNELLE AVANT TRANSMISSION
   Site Web Dirigeants-Propriétaires (FR)
   Strict Compliance with BRIEF v2.0 (§4)
   ========================================================================== */

/* 1. Design Tokens (§4.4) */
:root {
  --ivoire: #F8F5EF;       /* Default background */
  --ardoise: #384860;      /* ONLY allowed dark background (max 25% of surface) */
  --ardoise-bloc: #2E3D52; /* Inner card block inside Ardoise section */
  --ardoise-bord: #4C5C74; /* Border inside Ardoise section */
  --navy: #0D1B2A;         /* Primary text, headings, titles — NEVER background */
  --or: #C9A84C;           /* Accents, fillets, key metrics, badges >= 24px bold — NEVER body text on Ivoire */
  --charcoal: #1C1F22;     /* Primary body text */
  --graphite: #2E3033;     /* Secondary text, subtitles, metadata */
  --platinum: #D8D2C4;     /* Architectural dividers, hairline rules, borders */
  --titanium: #B9B7B1;     /* Neutral grid lines, decorative separators (1.8:1 on Ivoire: never for text or input borders) */
  
  --font-title: Georgia, "Gelasio", "Times New Roman", serif;
  --font-body: Arial, "Liberation Sans", Helvetica, sans-serif;
  
  --blanc-chaud: #FFFDF9;  /* Warm white, alternates with Ivoire between home blocks (phase 4 §4.9) */
  --or-30: rgba(201, 168, 76, 0.3);
  --or-40: rgba(201, 168, 76, 0.4);

  /* Single typographic scale (phase 4 §4.1). Display = hero H1 and climax phrases;
     h2 = climax sentences (block 3 closing, final CTA); title = block titles; h3 = question / verb / result. */
  --fs-display: clamp(2.4rem, 3.6vw, 3.25rem);
  --fs-h2: clamp(1.7rem, 2.5vw, 2.25rem);
  --fs-title: clamp(1.45rem, 2.1vw, 1.875rem);
  --fs-h3: clamp(1.3rem, 1.8vw, 1.625rem);
  --fs-lead: clamp(1.1rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --site-max-width: 1120px;
  --header-height: 76px;
  --transition-speed: 0.2s;
}

/* 2. Reset & Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--ivoire);
  color: var(--charcoal);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  background-color: var(--ivoire);
  color: var(--charcoal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Accessibility: Skip to main content */
.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  background: var(--navy);
  color: #FFFFFF;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid var(--or);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 15px;
}

/* Focus Visible (§8.2). Or ring per brand, Navy inner ring for 3:1 non-text contrast on Ivoire */
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--navy);
}

.section-dark :focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: none;
}

[hidden] {
  display: none !important;
}

/* 3. Typography (§4.4) */
h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: normal;
  color: var(--navy);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

p {
  max-width: 68ch; /* Brief rule: max 68 chars per column */
  margin-bottom: 1.25rem;
}

p.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--graphite);
}

/* Overlines & Section tags */
.section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite);
  margin-bottom: 1rem;
}

.kicker {
  font-family: var(--font-title);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 1rem;
  display: block;
}

/* 4. Layout & Containers */
.container {
  width: 100%;
  max-width: var(--site-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-narrow {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--platinum);
}

/* Hero à fond vidéo (2026-09-18).
   Le plan fourni était LUMINEUX (luminance 118-131 sur 255 : bureau parisien
   plein soleil). Mesuré, il aurait fallu un voile à 78 % pour y lire du texte
   clair — autant masquer la vidéo. Le plan a donc été étalonné en amont
   (assombri, désaturé, refroidi vers l'Ardoise) : la zone du texte est
   retombée à 0,20 de luminance au 99e centile, et un voile léger suffit.
   C'est l'étalonnage qui fait le registre feutré, pas le voile.
   Voile à 42 % en Ardoise — la seule couleur sombre de la charte — là où
   32 % suffiraient pour le seuil AA : la marge absorbe les reflets du plan. */
.section-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Hauteur et rythme verticaux : voir `.main-home .section-hero` plus bas,
     plus spécifique — ne pas les redéclarer ici. */
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 4.5rem;
  background-color: var(--navy);
  border-bottom: 1px solid var(--or-30);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero-video,
.hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cadrage haut, pas centré : les visages sont dans le tiers supérieur du
     plan, et l'en-tête fixe masque déjà les 76 premiers pixels. Centré, le
     rognage leur prenait 90 px de plus et coupait les têtes. Ce qui part
     maintenant, c'est le bas du bureau — secondaire. */
  object-position: center 12%;
}

/* L'affiche fixe ne sert qu'au mouvement réduit (voir plus bas). */
.hero-still {
  display: none;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(56, 72, 96, 0.5) 0%,
      rgba(56, 72, 96, 0.36) 30%,
      rgba(56, 72, 96, 0.38) 58%,
      rgba(56, 72, 96, 0.5) 80%,
      rgba(56, 72, 96, 0.54) 100%
    );
}

/* Typographie en clair sur le plan.
   Le kicker reste IVOIRE et non or : mesuré sur la vidéo voilée, l'or de la
   charte ne donne que 2,3:1 à cette taille — et la charte elle-même le
   réserve aux textes de 24 px en gras. L'or reste sur le bouton, où il porte
   de l'encre Navy à 7,6:1. */
.section-hero .kicker {
  color: rgba(248, 245, 239, 0.9);
}

.section-hero .hero-headline {
  color: var(--ivoire);
  text-shadow: 0 1px 30px rgba(13, 27, 42, 0.45);
}

.section-hero .hero-subheadline {
  color: rgba(248, 245, 239, 0.88);
}

/* Boutons sur fond sombre : l'Ardoise du bouton primaire disparaîtrait dans
   le plan. L'or de la charte prend le relais — 7,6:1 avec l'encre Navy. */
.section-hero .btn-primary {
  /* Or éclairci pour cette variante sur fond sombre. L'or de charte (#C9A84C)
     ne donne que 2,5:1 contre le plan voilé, sous le seuil de 3:1 exigé pour
     la bordure d'un élément d'interface (WCAG 1.4.11) ; celui-ci atteint 3:1
     et porte l'encre Navy à 9,1:1. */
  background-color: #D8B95F;
  border-color: #D8B95F;
  color: var(--navy);
  /* Liseré Navy opaque : avec un voile allégé, l'aplat or ne tient plus les
     3:1 exigés pour la bordure d'un élément d'interface (2,7:1 mesuré). Le
     liseré, lui, donne 3,3:1 contre le plan — la limite du bouton redevient
     identifiable sans pâlir l'or. L'ombre douce l'assoit sur l'image. */
  box-shadow: 0 0 0 1px var(--navy), 0 6px 22px rgba(13, 27, 42, 0.35);
}

.section-hero .btn-primary:hover,
.section-hero .btn-primary:focus-visible {
  background-color: #E4C87A;
  border-color: #E4C87A;
  color: var(--navy);
}

.section-hero .btn-secondary {
  color: var(--ivoire);
  /* 0,55 ne donnait que 2,5:1 contre le plan : la bordure doit tenir 3:1. */
  border-color: rgba(248, 245, 239, 0.82);
  background-color: rgba(13, 27, 42, 0.42);
}

.section-hero .btn-secondary:hover,
.section-hero .btn-secondary:focus-visible {
  color: var(--navy);
  background-color: var(--ivoire);
  border-color: var(--ivoire);
}

/* 5. Header & Navigation (phase 4 §2 logo, §3 mobile menu) */
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--ivoire); /* opaque: the brand PNG has its own cream canvas */
  border-bottom: 1px solid var(--platinum);
  z-index: 100;
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-logo {
  height: 44px;
  width: auto;
  display: block;
}

/* Checkbox kept in the accessibility tree and focusable, but visually hidden */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nav-toggle-label {
  display: none;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-speed) ease;
}

.nav-link:hover {
  color: var(--ardoise);
}

.nav-link.nav-active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: var(--or);
  text-decoration-thickness: 2px;
}

/* .btn.header-cta: two classes so these rules beat .btn, declared later in the file */
.btn.header-cta {
  flex-shrink: 0;
  margin-left: 0.5rem;
  white-space: nowrap;
}

.header-cta-short {
  display: none;
}

/* Below 1024 px the five links + the long CTA do not fit on one line:
   compact header with the menu toggle and the short CTA (phase 4 §3). */
@media (max-width: 1023.98px) {
  :root {
    --header-height: 64px;
  }

  .header-inner {
    gap: 0.5rem;
  }

  .header-logo {
    height: 36px;
  }

  .btn.header-cta {
    order: 2;
    margin-left: auto;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .header-cta-full {
    display: none;
  }

  .header-cta-short {
    display: inline;
  }

  .nav-toggle-label {
    order: 3;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.75rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--navy);
    border: 1px solid var(--platinum);
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav-toggle-icon {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 14px;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--transition-speed) ease, top var(--transition-speed) ease;
  }

  .nav-toggle-icon::before {
    top: 0;
    box-shadow: 0 6px 0 currentColor;
  }

  .nav-toggle-icon::after {
    top: 12px;
  }

  .nav-toggle:checked ~ .nav-toggle-label .nav-toggle-icon::before {
    top: 6px;
    box-shadow: none;
    transform: rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-toggle-label .nav-toggle-icon::after {
    top: 6px;
    transform: rotate(-45deg);
  }

  .nav-toggle:focus-visible ~ .nav-toggle-label {
    outline: 2px solid var(--or);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--navy);
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.25rem 0 0.75rem;
    background-color: var(--ivoire);
    border-bottom: 1px solid var(--platinum);
    box-shadow: 0 16px 28px rgba(13, 27, 42, 0.08);
  }

  .nav-toggle:checked ~ .header-nav {
    display: flex;
  }

  .header-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
    font-size: 1.0625rem;
    border-top: 1px solid rgba(216, 210, 196, 0.6);
  }

  .header-nav .nav-link.nav-active {
    text-decoration: none;
    box-shadow: inset 3px 0 0 var(--or);
  }
}

/* 6. Buttons & CTAs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8125rem 1.75rem;
  cursor: pointer;
  transition: background-color var(--transition-speed) ease,
              border-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              box-shadow var(--transition-speed) ease;
  line-height: 1.3;
  border-radius: 0;
}

.btn-primary {
  background-color: var(--ardoise);
  color: #FFFFFF;
  border: 1px solid var(--ardoise);
}

.btn-primary:hover {
  background-color: #263345;
  border-color: #263345;
  color: #FFFFFF;
}

.btn-secondary {
  background-color: transparent;
  color: var(--navy);
  border: 1px solid var(--graphite);
}

.btn-secondary:hover {
  background-color: rgba(46, 48, 51, 0.05);
  border-color: var(--navy);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* 7. Hero Section Specifics */

.hero-headline {
  white-space: pre-line;
}

.hero-subheadline {
  white-space: pre-line;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--graphite);
  margin-bottom: 2rem;
}

/* 8. Questions Section (§5.2) */

.question-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  display: block;
}

/* Recognition Phrase Box (§5.3) */
.recognition-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  border-left: 3px solid var(--or);
  padding: 2rem 2.5rem;
  margin-top: 2rem;
}

.recognition-pivot {
  font-family: var(--font-title);
  font-weight: bold;
  color: var(--navy);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.recognition-conclusion {
  font-size: 1.0625rem;
  color: var(--charcoal);
  line-height: 1.55;
  margin-bottom: 0;
}

/* 9. Gap Table (§5.4) */

/* 10. Steps (§5.5) */

.golden-rule-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 1.75rem 2rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.golden-rule-emphasis {
  font-family: var(--font-title);
  font-size: 1.375rem;
  font-weight: bold;
  color: var(--navy);
}

.golden-rule-desc {
  font-size: 0.9375rem;
  color: var(--charcoal);
  margin-bottom: 0;
}

/* 11. Deliverables & Cas-Type (§5.7 & §5.6) */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.deliverable-card {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 1.75rem;
}

.deliverable-card h3 {
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.deliverable-card p {
  font-size: 0.875rem;
  color: var(--graphite);
  margin-bottom: 0;
}

/* Cas-Type Before/After Box */

.cas-type-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--graphite);
  background-color: rgba(216, 210, 196, 0.4);
  padding: 3px 8px;
  margin-bottom: 0.75rem;
}

.before-after-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.before-after-item {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.ba-col {
  font-size: 0.9375rem;
}

.ba-col-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.25rem;
  display: block;
}

.ba-before {
  color: var(--graphite);
  font-style: italic;
}

.ba-arrow {
  color: var(--or);
  font-size: 1.25rem;
  font-weight: bold;
}

.ba-after {
  color: var(--navy);
  font-weight: 500;
}

/* Services Cards */

/* 12. Buyer Lens Section (BLEU ARDOISE DARK BACKGROUND §5.9) */
/* Surface: ~16% of page area (Strictly <= 25%) */
.section-dark {
  background-color: var(--ardoise);
  color: #FFFFFF;
  border-bottom: none;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #FFFFFF;
}

.section-dark .section-tag {
  color: var(--platinum);
}

.section-dark p {
  color: var(--platinum);
}

.section-dark p.lead {
  color: #FFFFFF;
}

/* 13. Professional Perimeter (§4.1) */
.perimeter-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 2.5rem;
  margin-top: 2rem;
}

.perimeter-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  list-style: none;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.perimeter-item {
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--charcoal);
}

.perimeter-item::before {
  content: "✕";
  color: var(--graphite);
  font-weight: bold;
  margin-right: 0.75rem;
  font-size: 0.8125rem;
}

.perimeter-signature {
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--navy);
  border-top: 1px solid var(--platinum);
  padding-top: 1.25rem;
  margin-bottom: 0;
}

/* 14. FAQ Accordions (§5.12) */
.faq-list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
}

.faq-summary {
  padding: 1.5rem 2rem;
  font-family: var(--font-title);
  font-size: 1.125rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-speed) ease;
}

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

.faq-summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--graphite);
  font-weight: 300;
  line-height: 1;
}

details[open] .faq-summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 2rem 1.5rem 2rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal);
}

.confidentiality-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  border-left: 3px solid var(--navy);
  padding: 2rem;
  margin-top: 3rem;
}

.confidentiality-box h3 {
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.confidentiality-box p {
  font-size: 0.9375rem;
  color: var(--charcoal);
  margin-bottom: 0;
}

/* 15. Form & CTA Final (§7 & §5.13) */

.form-card {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 2.5rem;
}

.form-heading {
  font-size: var(--fs-h3);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Direct Email Neuromarketing Card / Pastille */

/* 16. Footer */
.site-footer {
  background-color: var(--ivoire);
  border-top: 1px solid var(--platinum);
  padding: 3.5rem 0 2.5rem 0;
  margin-top: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--graphite);
  margin-top: 0.75rem;
}

.footer-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: block;
}

.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.footer-col-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.footer-brand-link {
  display: inline-block;
}

.footer-tagline {
  margin-bottom: 0.75rem;
}

.footer-legal-line {
  font-size: 0.8125rem;
  color: var(--graphite);
  margin: 0 0 0.25rem;
}

.footer-link-main-site {
  font-style: italic;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--graphite);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

.footer-links a:hover {
  color: var(--navy);
}

.footer-bottom {
  border-top: 1px solid var(--platinum);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--graphite);
  flex-wrap: wrap;
  gap: 1rem;
}

/* 17. Responsive Breakpoints */
@media (max-width: 960px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  
  
  
  
  .deliverables-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .deliverables-grid,
  .footer-nav-grid {
    grid-template-columns: 1fr;
  }
  
  .before-after-item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .ba-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
  
  .golden-rule-box {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* 18. Motion / Accessibility (§8.2 & §8.5) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Le fond du hero cède la place à son affiche fixe : même image, même
     voile, même contraste — simplement immobile. */
  .hero-video {
    display: none;
  }

  .hero-still {
    display: block;
  }
}

/* Impression : le hero redevient une section ordinaire, encre sombre sur
   blanc. Une vidéo ne s'imprime pas, et un aplat sombre ruine une page. */
@media print {
  .hero-media {
    display: none !important;
  }

  .section-hero {
    background-color: transparent !important;
    border-bottom-color: var(--platinum);
    padding-top: 2rem;
  }

  .section-hero .hero-headline {
    color: var(--navy) !important;
    text-shadow: none;
  }

  .section-hero .kicker,
  .section-hero .hero-subheadline {
    color: var(--graphite) !important;
  }
}

/* 19. Service Pages & Cas-Type Specific Styles */
.page-header {
  padding-top: calc(var(--header-height) + 3.5rem);
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--platinum);
  background-color: var(--ivoire);
}

.phases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.phase-card {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 2rem;
  border-top: 3px solid var(--ardoise);
}

.phase-step-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--graphite);
  display: block;
  margin-bottom: 0.5rem;
}

.phase-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.proof-levels-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.proof-level-item {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: 140px 1fr 1.2fr;
  align-items: center;
  gap: 2rem;
}

.proof-level-badge {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  background-color: rgba(216, 210, 196, 0.4);
  padding: 6px 12px;
  text-align: center;
}

.proof-level-name {
  font-family: var(--font-title);
  font-size: 1.1875rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.proof-level-example {
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--graphite);
}

.proof-level-verdict {
  font-size: 0.9375rem;
  color: var(--charcoal);
  border-left: 2px solid var(--platinum);
  padding-left: 1.5rem;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.pillar-card {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  padding: 1.75rem;
}

.pillar-card h3,
.pillar-card .pillar-card-title {
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.pillar-card p {
  font-size: 0.9375rem;
  color: var(--graphite);
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .phases-grid,
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  
  .proof-level-item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .proof-level-verdict {
    border-left: none;
    border-top: 1px solid var(--platinum);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* 20. Partenaires, A-Propos & Legal Specific Styles */
.legal-notice-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  border-left: 3px solid var(--navy);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--charcoal);
}

/* ==========================================================================
   HOME — six blocks + final CTA (v2.1 §2) · typographic hierarchy (phase 4 §4)
   No cards: rules, numerals and space. One dominant element per block.
   ========================================================================== */

/* Vertical rhythm: alternate Ivoire / warm white, no borders between blocks */
.main-home .section {
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
  border-bottom: none;
}

.section-alt {
  background-color: var(--blanc-chaud);
}

.section-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.block-title {
  font-size: var(--fs-title);
  line-height: 1.25;
  margin-bottom: 0;
  max-width: 34ch;
}

.main-home p {
  max-width: none;
}

/* Hero: no entrance animation (phase 4 §4.9: motion optional; the headline must never be delayed) */

.main-home .section-hero {
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(3.5rem, 7vw, 5rem);
}

@media (min-width: 1024px) {
  .main-home .section-hero {
    /* 70vh rognait 180 px du plan et coupait les têtes. Plus haut = moins de
       rognage vertical par `object-fit: cover`, qui ne dépend que de l'écart
       entre le ratio du hero et le 16/9 de la vidéo. Plafonné en pixels pour
       ne pas avaler un grand écran. */
    min-height: clamp(620px, 86vh, 860px);
  }
}

.hero-inner {
  max-width: 1200px;
  text-align: center;
}

.hero-headline {
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 auto 1.5rem;
  text-wrap: balance;
}

.hero-subheadline {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--graphite);
  max-width: 58ch;
  margin: 0 auto 2rem;
  text-wrap: balance;
}

.hero-btn-group {
  justify-content: center;
}

/* Block 2 — Le point aveugle: two columns split by an Or rule, no cards */
.gap-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.gap-duo-col:first-child {
  padding-right: clamp(2rem, 5vw, 4.5rem);
}

.gap-duo-col + .gap-duo-col {
  padding-left: clamp(2rem, 5vw, 4.5rem);
  border-left: 1px solid var(--or);
}

.gap-duo-heading {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.75rem;
}

.gap-duo-items {
  font-size: var(--fs-small);
  color: var(--graphite);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.gap-duo-question {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 0;
  text-wrap: balance;
}

.gap-note {
  font-family: var(--font-title);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.5;
  color: var(--graphite);
  text-align: center;
  max-width: 60ch;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

/* Block 3 — Four questions: typographic list, Or numerals, thin Or rules */
.questions-list {
  list-style: none;
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--or-30);
}

.questions-list {
  counter-reset: question;
}

.question-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--or-30);
  counter-increment: question;
}

/* Decorative Or numerals as generated content: not in the DOM, not read aloud
   (empty alternative text), hence exempt from text-contrast rules (phase 4 §6) */
.question-row::before,
.result-row::before,
.step-col::before {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--or);
}

.question-row::before {
  content: "0" counter(question) / "";
}

.question-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin-bottom: 0.375rem;
}

.question-details {
  font-size: var(--fs-small);
  color: var(--graphite);
  margin-bottom: 0;
}

.questions-closing {
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--navy);
  text-align: center;
  max-width: 32ch;
  margin: clamp(4rem, 7vw, 5.5rem) auto 0;
  text-wrap: balance;
}

/* Block 4 — Notre travail: four verbs in one row, Or rules, then the golden rule */
.steps-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}

.step-col {
  padding: 0.25rem clamp(1rem, 2.5vw, 2rem);
}

.step-col:first-child {
  padding-left: 0;
}

.step-col + .step-col {
  border-left: 1px solid var(--or);
}

.steps-row {
  counter-reset: step;
}

.step-col {
  counter-increment: step;
}

.step-col::before {
  content: "0" counter(step) / "";
  display: block;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.step-verb {
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.step-text {
  font-size: var(--fs-small);
  color: var(--graphite);
  line-height: 1.5;
  margin-bottom: 0;
}

.golden-rule {
  font-family: var(--font-title);
  font-size: var(--fs-display);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-align: center;
  margin: 0 auto;
  text-wrap: balance;
}

.br-md {
  display: none;
}

@media (min-width: 768px) {
  .br-md {
    display: inline;
  }
}

/* Block 5 — Ce que vous saurez: three results, sentence-case headlines */
.results-list {
  list-style: none;
  max-width: 920px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--or-30);
}

.results-list {
  counter-reset: result;
}

.result-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  border-bottom: 1px solid var(--or-30);
  counter-increment: result;
}

.result-row::before {
  content: "0" counter(result) / "";
}

.result-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: 0.375rem;
}

.result-text {
  font-size: var(--fs-lead);
  color: var(--graphite);
  line-height: 1.5;
  margin-bottom: 0;
}

.result-footer-row {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

.result-deliverables-line,
.result-services-line {
  font-size: var(--fs-small);
  color: var(--graphite);
  margin-bottom: 0;
}

.service-link-discrete {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-link-discrete:hover {
  color: var(--ardoise);
}

.sep-dot {
  margin: 0 0.5rem;
  color: var(--titanium);
}

/* Block 6 — La perspective du repreneur: Ivoire text on Ardoise, Or only on rules and arrows */
.section-dark {
  background-color: var(--ardoise);
  color: var(--ivoire);
}

.section-dark h2,
.section-dark h3,
.section-dark p {
  color: var(--ivoire);
}

.section-dark .section-tag {
  color: var(--platinum);
}

.buyer-title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: 40ch;
  margin-bottom: 0.75rem;
}

.buyer-title-big {
  font-family: var(--font-title);
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -0.012em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}

.buyer-pairs {
  list-style: none;
  border-top: 1px solid var(--or-40);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.buyer-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr);
  gap: 0 1.25rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--or-40);
}

.buyer-pair-statement {
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
}

.buyer-pair-arrow,
.proof-arrow {
  color: var(--or);
  font-size: var(--fs-lead);
}

.buyer-pair-question {
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.proof-sequence {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.proof-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-lead);
}

.proof-arrow {
  font-family: var(--font-body);
  font-style: normal;
}

.buyer-closing {
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.35;
  text-align: center;
  max-width: 36ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* Block 7 — Trust band + final CTA (dominant: the final question) */
.trust-band {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--or-30);
}

.trust-title {
  font-size: var(--fs-title);
  margin-bottom: 1rem;
}

.trust-text,
.trust-line2 {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 auto 0.75rem;
}

.trust-line2 {
  color: var(--graphite);
}

.trust-doctrine {
  display: inline-block;
  font-family: var(--font-title);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--navy);
  text-align: left;
  max-width: 34ch;
  margin: 1.75rem auto 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--or);
}

.cta-final {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.cta-final-title {
  font-size: var(--fs-display);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.cta-final-sub {
  margin: 0 auto 2rem;
}

.cta-final-actions {
  margin-bottom: 1.25rem;
}

.cta-final-email {
  margin: 0;
}

.email-plain-link {
  color: var(--graphite);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.email-plain-link:hover {
  color: var(--navy);
}

/* Preuves page keeps the boxed golden rule (secondary pages are not redesigned) */
.golden-rule-box {
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  border-left: 3px solid var(--or);
  padding: 1.5rem 2rem;
  display: block;
}

.golden-rule-emphasis {
  font-size: var(--fs-h3);
  font-weight: normal;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0;
}

/* Secondary pages: paragraphs moved by phase 4 §5 */
.cadre-exercice-text,
.personal-data-note {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--charcoal);
}

.personal-data-note {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--platinum);
}

.personal-data-note a,
.cadre-exercice-text a {
  color: var(--navy);
}

/* Home responsive */
@media (max-width: 899.98px) {
  .gap-duo {
    grid-template-columns: 1fr;
  }

  .gap-duo-col:first-child {
    padding-right: 0;
    padding-bottom: 2rem;
  }

  .gap-duo-col + .gap-duo-col {
    padding-left: 0;
    padding-top: 2rem;
    border-left: none;
    border-top: 1px solid var(--or);
  }

  .steps-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
  }

  .step-col:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }

  .buyer-pair {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.375rem 0.75rem;
  }

  .buyer-pair-statement {
    grid-column: 1 / -1;
  }

  .proof-sequence {
    flex-direction: column;
    align-items: flex-start;
  }

  .proof-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .proof-arrow {
    display: inline-block;
    transform: rotate(90deg);
  }
}

@media (max-width: 639.98px) {
  .steps-row {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .step-col,
  .step-col + .step-col,
  .step-col:nth-child(odd) {
    padding: 1.25rem 0;
    border-left: none;
    border-top: 1px solid var(--or);
  }

  .step-col:first-child {
    padding-top: 0;
    border-top: none;
  }

  .question-row,
  .result-row {
    grid-template-columns: 2.75rem 1fr;
  }

  .result-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 18bis. Images éditoriales des blocs 2 et 3 (2026-09-18)
   Cadre carré, filet or, ombre discrète : le vocabulaire du site est
   architectural, pas arrondi. Au repos l'image est légèrement désaturée et
   assombrie ; elle reprend ses couleurs au survol. L'effet reste un mouvement
   lent — c'est ce qui fait « sérieux » plutôt que « promotionnel ». */
.duo-figure,
.question-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--or-40);
  box-shadow: 0 2px 18px rgba(13, 27, 42, 0.1);
  background-color: var(--ardoise);
  line-height: 0;
}

.duo-image,
.question-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.02) brightness(0.97);
  transition: transform 600ms ease, filter 600ms ease;
}

/* Le survol ne concerne que les pointeurs précis : sur tactile, un état
   « survolé » resterait collé après le toucher. */
@media (hover: hover) and (pointer: fine) {
  .duo-figure:hover .duo-image,
  .question-row:hover .question-image {
    transform: scale(1.035);
    filter: saturate(1) contrast(1) brightness(1);
  }
}

/* — Bloc 2 : les deux colonnes face à face — */
.duo-figure {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Sans cette respiration, l'image de gauche touchait le filet or qui sépare
   les deux colonnes. */
.gap-duo-col:first-child {
  padding-right: clamp(2rem, 5vw, 4.5rem);
}

/* — Bloc 3 : image et texte côte à côte, côtés alternés — */
@media (min-width: 900px) {
  .question-row--media {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 0.92fr);
    grid-template-areas: "num body figure";
    gap: 0 clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }

  .question-row--media.question-row--reverse {
    grid-template-columns: minmax(0, 0.92fr) 4.5rem minmax(0, 1fr);
    grid-template-areas: "figure num body";
  }

  .question-row--media::before {
    grid-area: num;
  }

  .question-row--media .question-body {
    grid-area: body;
  }

  .question-row--media .question-figure {
    grid-area: figure;
  }
}

/* Sous 900 px, l'image passe au-dessus et occupe toute la largeur : côte à
   côte, elle tomberait sous 300 px et ne raconterait plus rien. */
@media (max-width: 899px) {
  .question-row--media {
    grid-template-areas:
      "figure figure"
      "num body";
  }

  .question-row--media::before {
    grid-area: num;
  }

  .question-row--media .question-body {
    grid-area: body;
  }

  .question-row--media .question-figure {
    grid-area: figure;
    margin-bottom: 1.25rem;
  }
}

/* Les images sont décoratives à l'impression et coûteraient des pages. */
@media print {
  .duo-figure,
  .question-figure {
    display: none !important;
  }

  .gap-duo-col:first-child {
    padding-right: 1.5rem;
  }
}

/* ── Bloc « NOTRE TRAVAIL » : les quatre étapes en cartes (2026-09-18) ──────
   Grille 2 × 2, pas quatre colonnes : ces images portent leur sens DANS
   l'image — cartographie des dépendances, matrice de priorisation, tableau de
   validation. Sur quatre colonnes elles tombent à 245 px et ce contenu
   disparaît ; en 2 × 2 elles occupent 520 px et se lisent. Une colonne sous
   640 px.
   Écrit EN FIN DE FEUILLE : `.step-col` est déclaré plus haut, et à
   spécificité égale c'est l'ordre qui tranche. */
.steps-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  padding: 0;
  counter-reset: step;
}

.step-col {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 0;
  /* Les filets verticaux d'origine séparaient des colonnes de texte nues ;
     entre des cartes espacées, ils feraient doublon. */
  border-left: 0 !important;
}

.step-figure {
  margin: 0 0 0.35rem;
  overflow: hidden;
  border: 1px solid var(--or-40);
  background-color: var(--ardoise);
  box-shadow: 0 2px 16px rgba(13, 27, 42, 0.09);
  line-height: 0;
  transition: box-shadow 300ms ease-in-out, transform 300ms ease-in-out;
}

.step-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.98);
  transition: transform 600ms ease-in-out, filter 600ms ease-in-out;
}

/* Survol réservé aux pointeurs précis : au doigt, l'état resterait collé
   après le toucher. La carte se soulève, l'image avance et reprend ses
   couleurs — un seul mouvement, lent. */
@media (hover: hover) and (pointer: fine) {
  .step-col:hover .step-figure {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(13, 27, 42, 0.17);
  }

  .step-col:hover .step-image {
    transform: scale(1.04);
    filter: saturate(1) brightness(1);
  }
}

.step-num {
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  line-height: 1;
  /* PAS `var(--or)` : l'or de charte ne donne que 2,25:1 sur le blanc chaud,
     et la charte elle-même le réserve aux textes de 24 px en gras. Ce numéro
     est un vrai élément de texte, évalué comme tel — d'où un or assombri à
     4,8:1. (Les compteurs `::before` des autres blocs passent seulement parce
     qu'axe n'évalue pas les pseudo-éléments : ce n'est pas une preuve.) */
  color: #8a6d2f;
  font-variant-numeric: tabular-nums;
}

/* Le compteur automatique d'origine ferait doublon avec le numéro écrit. */
.step-col::before {
  content: none !important;
}

.step-verb {
  font-size: var(--fs-h3);
  line-height: 1.15;
  color: var(--navy);
  margin: 0;
}

.step-text {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--graphite);
  margin: 0;
  max-width: 40ch;
}

@media (max-width: 639px) {
  .steps-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── L'encadré des deux vérités ─────────────────────────────────────────────
   Ardoise — la seule couleur sombre de la charte — barre d'accent or à
   gauche, seconde ligne en or. Le bloc est court : il reste très en deçà de
   la limite de 25 % de surface sombre fixée par la charte. */
.golden-card {
  position: relative;
  background-color: var(--ardoise);
  border: 1px solid var(--ardoise-bord);
  border-left: 3px solid var(--or);
  box-shadow: 0 10px 40px rgba(13, 27, 42, 0.16);
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 3.5rem);
  max-width: 62rem;
  margin: 0 auto;
}

.golden-card .golden-rule {
  display: grid;
  gap: 0.35rem;
  color: var(--ivoire);
  text-align: left;
  margin: 0;
}

.golden-line {
  display: block;
}

.golden-line--accent {
  color: var(--or);
}

@media (max-width: 639px) {
  .golden-card {
    border-left-width: 3px;
  }
}

/* À l'impression, ni images ni aplat sombre : encre noire sur blanc. */
@media print {
  .step-figure {
    display: none !important;
  }

  .steps-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .golden-card {
    background-color: transparent !important;
    border: 1px solid #c9c6bf;
    border-left: 3px solid #8a6d2f;
    box-shadow: none;
    padding: 1rem 1.25rem;
  }

  .golden-card .golden-rule {
    color: #000 !important;
  }

  .golden-line--accent {
    color: #8a6d2f !important;
  }
}

/* ============================================================
   26. Page Diagnostic — mise en page éditoriale (phase C)
   Modificateurs dédiés : .page-header reste inchangée pour les
   sept autres pages de contenu qui la réutilisent.
   ============================================================ */

/* — Hero scindé : texte à gauche, image à droite — */
.page-header-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
}

.page-header-copy > :first-child {
  margin-top: 0;
}

/* L'image du hero reprend le filet or et la retenue du reste du site :
   seule la proportion change (4/3 au lieu de 16/9). */
.duo-image--4x3 {
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .page-header-split {
    grid-template-columns: 46fr 54fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

/* — Respiration éditoriale au milieu des six piliers — */
.pillars-figure {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* — Livrables : trois cartes empilées à gauche, image à droite — */
.deliverables-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .deliverables-split {
    grid-template-columns: 55fr 45fr;
  }

  /* Trois cartes côte à côte dans 55 % de la largeur seraient illisibles. */
  .deliverables-grid--stacked {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0;
  }
}

/* L'image des livrables suit les cartes sur mobile, jamais avant. */
.deliverables-figure {
  margin-top: 0;
}

@media print {
  .page-header-figure,
  .pillars-figure,
  .deliverables-figure {
    display: none !important;
  }

  .page-header-split,
  .deliverables-split {
    display: block !important;
  }
}

/* ============================================================
   27. Page Preuves — bande éditoriale et règle d'or (phase C)
   ============================================================ */

/* — Bande cinématographique sous l'en-tête textuel étroit — */
.preuves-band-wrap {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.preuves-band .duo-image {
  aspect-ratio: 21 / 9;
}

/* — Règle d'or : texte à gauche, preuve à droite — */
.golden-rule-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .golden-rule-split {
    grid-template-columns: 55fr 45fr;
  }
}

@media print {
  .preuves-band,
  .golden-rule-figure {
    display: none !important;
  }

  .golden-rule-split {
    display: block !important;
  }
}

/* ============================================================
   28. Page Cas-type — deux temps d'une même PME (phase C)
   ============================================================ */

.duo-image--3x2 {
  aspect-ratio: 3 / 2;
}

/* — En-tête : le texte ET l'avertissement à gauche, la scène à droite — */
.cas-type-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
}

.cas-type-copy > :first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .cas-type-split {
    grid-template-columns: 50fr 50fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

/* — Second temps : image de clôture sous le résultat, largeur du texte — */
.cas-type-closing {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
}

@media print {
  .cas-type-figure,
  .cas-type-closing {
    display: none !important;
  }

  .cas-type-split {
    display: block !important;
  }
}

/* ============================================================
   29. Page Passation — transfert puis autonomie (phase C)
   ============================================================ */

.passation-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
}

.passation-copy > :first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .passation-split {
    grid-template-columns: 48fr 52fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

/* Clôture de la séquence : quelqu'un d'autre agit réellement.
   La figure est le dernier élément de la grille des six axes : elle doit en
   occuper toute la largeur, sinon elle se rend dans une seule colonne. */
.passation-closing {
  grid-column: 1 / -1;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

@media print {
  .passation-figure,
  .passation-closing {
    display: none !important;
  }

  .passation-split {
    display: block !important;
  }
}

/* ============================================================
   30. Page Travailler ensemble — deux périmètres (phase C)
   ============================================================ */

.travailler-split {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: center;
}

.travailler-copy > :first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .travailler-split {
    grid-template-columns: 48fr 52fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }
}

@media print {
  .travailler-figure {
    display: none !important;
  }

  .travailler-split {
    display: block !important;
  }
}

/* ============================================================
   31. Page À propos — portrait de pair à pair (phase C)
   ============================================================ */

/* Image contenue sous un en-tête étroit : une page d'identité de
   239 mots ne supporte pas une photographie pleine largeur. */
.a-propos-portrait {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

@media print {
  .a-propos-portrait {
    display: none !important;
  }
}

/* -------------------------------------------------------------
   32. Sélecteur de langue FR · ES · EN
   Liens HTML réels : pas de JavaScript, pas de localStorage, pas de
   redirection automatique, pas de drapeaux. Il vit dans #site-nav, donc
   - desktop : dernier élément de la barre, entre la navigation et le CTA ;
   - mobile  : dernière rangée du menu déroulant, avant le CTA qui reste
               visible en dehors du menu.
   ------------------------------------------------------------- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.lang-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--graphite);
  text-decoration: none;
  padding: 0.125rem;
  transition: color var(--transition-speed) ease;
}

.lang-link:hover,
.lang-link:focus-visible {
  color: var(--navy);
}

.lang-link.lang-active {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--or);
}

/* Séparateur décoratif (aria-hidden) : en Platine il tombait à 1,38:1, donc
   invisible à l'œil. Le Graphite atténué reste discret tout en se voyant. */
.lang-sep {
  color: var(--graphite);
  opacity: 0.45;
  font-size: 0.75rem;
  line-height: 1;
}

@media (max-width: 1023.98px) {
  .header-nav .lang-switcher {
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 24px;
    border-top: 1px solid rgba(216, 210, 196, 0.6);
  }

  .header-nav .lang-link {
    font-size: 1rem;
    padding: 0.25rem 0.125rem;
  }
}

/* -------------------------------------------------------------
   33. Barre d'en-tête avec sélecteur de langue
   Le sélecteur ajoute ~90 px dans #site-nav. Le commentaire du §6 reste vrai,
   mais le seuil se déplace : sous 1200 px, les cinq liens + le sélecteur + le
   CTA long ne tiennent plus sur une ligne. On bascule alors sur le libellé
   court, qui existe déjà dans le copy (nav.cta_short), plutôt que de réduire
   la typographie.
   ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .lang-switcher {
    gap: 0.25rem;
  }

  .lang-link {
    padding: 0.125rem 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .header-nav {
    gap: 1.25rem;
  }

  .header-cta-full {
    display: none;
  }

  .header-cta-short {
    display: inline;
  }
}

/* -------------------------------------------------------------
   34. Césure des titres espagnols sur très petits écrans
   Un seul mot dépasse la colonne à 320 px : « Confidencialidad, » mesure
   299 px pour 272 px disponibles. La règle est donc limitée à l'espagnol et
   aux écrans concernés, pour que le rendu français et anglais approuvé reste
   inchangé au pixel près. On césure selon les règles de la langue — que le
   navigateur connaît grâce à `lang="es"` — plutôt que de réduire le corps du
   titre à cause d'un mot plus long que son équivalent français.
   ------------------------------------------------------------- */
@media (max-width: 360px) {
  html[lang="es"] h1,
  html[lang="es"] .hero-headline {
    hyphens: auto;
  }
}

/* -------------------------------------------------------------
   35. Contact direct
   Le site ne comporte plus aucun formulaire : la page de contact se réduit à
   une carte unique, délibérément dimensionnée pour son contenu. Une seule
   colonne centrée, dans cet ordre : titre, texte d'accompagnement, CTA,
   adresse, réassurance. Le bouton domine ; l'adresse reste cliquable mais
   secondaire.
   ------------------------------------------------------------- */
.contact-direct {
  max-width: 760px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
  background-color: #FFFFFF;
  border: 1px solid var(--platinum);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-direct-title {
  max-width: 620px;
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin-bottom: 0.875rem;
}

/* 620 px et non 600 : le texte français demande 606 px pour tenir sur une
   ligne, et six pixels de moins le faisaient retomber sur un mot orphelin.
   620 px reste la borne haute de la largeur de lecture retenue. */
.contact-direct-body {
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--graphite);
  margin-bottom: 2rem;
}

/* Le CTA est l'élément d'action dominant : plus large que le texte du
   libellé ne l'exige, sans aller jusqu'à la pleine largeur en bureau. */
.contact-direct-actions {
  margin-bottom: 1.5rem;
}

.contact-direct-actions .btn {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

/* L'adresse reste visible et cliquable, mais d'un poids inférieur au bouton :
   corps réduit, gris secondaire, soulignement discret hérité. */
.contact-direct-address {
  font-size: 0.9375rem;
  margin-bottom: 0.625rem;
}

.contact-direct-note {
  font-size: var(--fs-small);
  color: var(--graphite);
  margin-bottom: 0;
}

@media (max-width: 639.98px) {
  .contact-direct {
    padding: 2rem 1.75rem;
  }

  /* Sur mobile, une cible de frappe pleine largeur vaut mieux qu'un bouton
     centré étroit. */
  .contact-direct-actions {
    width: 100%;
  }

  /* En pleine largeur, le rembourrage horizontal généreux du bureau ne sert
     plus à rien et faisait passer le libellé espagnol sur deux lignes à
     320 px. On le ramène à la valeur de base. */
  .contact-direct-actions .btn {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}