/* ============================================================
   Kayden Couverture — site.css
   Design system étendu pour les pages internes :
   sous-menu Services, fil d'Ariane, variantes de hero,
   blocs de contenu, composant de navigation entre services.
   Chargé sur toutes les pages (homepage incluse).
   ============================================================ */

/* ============================================================
   1. NAVIGATION — sous-menu Services (desktop)
   ============================================================ */
.nav__item { position: relative; }

.nav__sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  /* même couleur que les liens du header : clair avant le scroll */
  color: var(--text-on-dark);
  padding: 0.4rem 0;
}

.nav__sub-toggle .chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease);
  opacity: 0.8;
}

.nav__item.is-open .nav__sub-toggle .chev { transform: rotate(-135deg) translateY(-1px); }

.nav__sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(540px, 80vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 0.5rem;
  background: rgba(11, 32, 53, 0.97);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s var(--ease);
  z-index: 50;
}

.nav__sub::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.nav__item.is-open .nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__sub a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__sub a::after { display: none; }

.nav__sub a:hover,
.nav__sub a:focus-visible { background: rgba(234, 166, 35, 0.16); }

.nav__sub-name {
  font-family: var(--font-title);
  font-size: 1.02rem;
  color: var(--text-on-dark);
}
.nav__sub a:hover .nav__sub-name { color: var(--or-light); }

.nav__sub-desc {
  font-size: 0.78rem;
  color: var(--text-on-dark-soft);
  line-height: 1.4;
}

.nav__sub-all {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  border-top: 1px solid var(--line-dark);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--or-light) !important;
  font-size: var(--step--1);
}
.nav__sub-all .arrow { transition: transform var(--dur) var(--ease); }
.nav__sub-all:hover .arrow { transform: translateX(4px); }

/* ============================================================
   2. NAVIGATION — sous-menu Services (mobile)
   ============================================================ */
.mobile-sub { width: 100%; }

.mobile-sub__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-title);
  font-size: var(--step-3);
  color: var(--text-on-dark);
}
.mobile-sub__toggle .chev {
  width: 12px; height: 12px;
  border-right: 2px solid var(--or-light);
  border-bottom: 2px solid var(--or-light);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.mobile-sub.is-open .mobile-sub__toggle .chev { transform: rotate(-135deg); }

.mobile-sub__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s var(--ease);
}
.mobile-sub.is-open .mobile-sub__panel { max-height: 30rem; }

.mobile-sub__panel a {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  color: var(--text-on-dark-soft) !important;
  padding: 0.55rem 0 0.55rem 1rem;
  border-left: 2px solid var(--line-dark);
  margin-left: 0.2rem;
}
.mobile-sub__panel a:first-child { margin-top: 0.8rem; }
.mobile-sub__panel a:hover { color: var(--or-light) !important; border-color: var(--or); }

/* Bouton « Services » : foncé une fois le header sur fond clair (comme les liens) */
.header.is-scrolled .nav__sub-toggle { color: var(--text); }

/* parent Services actif (page service) */
.nav__item.is-active .nav__sub-toggle { color: var(--or-light); }
.header.is-scrolled .nav__item.is-active .nav__sub-toggle { color: var(--or); }

/* lien actif */
.nav__list a[aria-current="page"] { color: var(--or-light); }
.header.is-scrolled .nav__list a[aria-current="page"] { color: var(--or); }
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================
   3. FIL D'ARIANE
   ============================================================ */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.65); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--or-light); }
.breadcrumb [aria-current] { color: var(--or-light); }
.breadcrumb .sep { opacity: 0.5; }

/* ============================================================
   4. HERO DE PAGE — variantes
   ============================================================ */

/* 4a. Hero plein cadre (image de fond) */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 70vh, 680px);
  /* l'en-tête fixe mesure ~102 px depuis l'agrandissement du logo :
     on garde une vraie respiration sous lui */
  padding-top: 142px;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
  color: var(--blanc);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Le contenu d'un page-hero est toujours aligné en bas : le voile est donc
   soutenu sur toute la bande basse (fil d'Ariane compris) et s'ouvre en haut,
   où l'image peut respirer. Ce profil vaut quelle que soit la photo.
   Il corrige un vrai défaut : sur la page Couverture, le fil d'Ariane et le
   sur-titre doré tombaient sur la ligne d'horizon (luminance 0,34, pointes à
   0,93) et n'atteignaient que 1,87:1. */
.page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 40% at 78% 20%, rgba(255, 190, 92, 0.22), transparent 72%),
    linear-gradient(to top,
      rgba(14, 28, 39, 0.78) 0%,
      rgba(14, 28, 39, 0.75) 30%,
      rgba(14, 28, 39, 0.74) 48%,
      rgba(14, 28, 39, 0.63) 68%,
      rgba(14, 28, 39, 0.26) 100%);
}
.page-hero__inner { width: 100%; }
.page-hero__eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-light);
  margin-bottom: 1rem;
}
.page-hero__title {
  font-size: clamp(2.3rem, 1.7rem + 3vw, 4rem);
  font-weight: 400;
  max-width: 18ch;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.page-hero__intro {
  margin-top: 1.4rem;
  font-size: var(--step-1);
  max-width: 52ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
}
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* 4b. Hero éditorial (typographie sur fond sombre + image latérale) */
.hero-split {
  background:
    radial-gradient(80% 60% at 90% 10%, rgba(234, 166, 35, 0.15), transparent 60%),
    linear-gradient(165deg, #30597a, var(--anthracite-deep));
  color: var(--text-on-dark);
  padding-top: clamp(140px, 16vh, 180px);
  padding-bottom: var(--section-y);
  overflow: hidden;
}
.hero-split__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero-split__title {
  font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-split__intro { margin-top: 1.4rem; font-size: var(--step-1); color: var(--text-on-dark-soft); max-width: 48ch; }
.hero-split__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.8);
}
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-split__tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(14, 28, 39, 0.7); backdrop-filter: blur(6px);
  color: var(--blanc); font-size: var(--step--1);
  padding: 0.5rem 1rem; border-radius: 50px; border: 1px solid var(--line-dark);
}

/* ============================================================
   5. BLOCS DE CONTENU réutilisables
   ============================================================ */

/* Section générique claire / sombre */
.block { padding-block: var(--section-y); }
.block--light { background: var(--blanc); }
.block--paper {
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(234, 166, 35, 0.08), transparent 55%),
    linear-gradient(180deg, var(--blanc-casse), var(--paper));
}
.block--dark {
  background:
    radial-gradient(80% 60% at 85% 5%, rgba(234, 166, 35, 0.14), transparent 55%),
    linear-gradient(165deg, #30597a, var(--anthracite-deep));
  color: var(--text-on-dark);
}
.block--dark .section-title { color: var(--text-on-dark); }
.block--dark .section-lede { color: var(--text-on-dark-soft); }
/* Bandeau court (chiffres, rappel) : respire sans occuper une pleine section */
.block--tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }

.block__head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.block__head--center { margin-inline: auto; text-align: center; }
.block__head--center .section-title,
.block__head--center .section-lede { margin-inline: auto; }
.block__head--center .section-kicker::after {
  content: ""; display: block; width: 38px; height: 2px;
  margin: 0.9rem auto 0; background: var(--or);
}

/* Split image / texte alterné */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.split__media:hover img { transform: scale(1.04); }
.split__media--framed { box-shadow: -18px 18px 0 0 var(--paper), -18px 18px 0 2px var(--or); }
.split + .split { margin-top: clamp(3rem, 7vw, 7rem); }
.split__title { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-family: var(--font-title); font-weight: 500; line-height: 1.15; }
.split__text { margin-top: 1.2rem; color: var(--text-soft); }
.block--dark .split__text { color: var(--text-on-dark-soft); }
.split__text p + p { margin-top: 1rem; }

/* Liste à puces or */
.checklist { margin-top: 1.5rem; display: grid; gap: 0.9rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--text-soft); }
.block--dark .checklist li { color: var(--text-on-dark-soft); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 12px; height: 7px; border-left: 2px solid var(--or); border-bottom: 2px solid var(--or);
  transform: rotate(-45deg);
}

/* Grille de cartes (prestations détaillées) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.feature-card {
  background: var(--blanc);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.block--dark .feature-card { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.35); border-color: var(--or); }
.feature-card__icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; background: rgba(234, 166, 35, 0.12); color: var(--or);
  margin-bottom: 1.1rem;
}
.feature-card__icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: var(--step--1); color: var(--text-soft); }
.block--dark .feature-card p { color: var(--text-on-dark-soft); }

/* Étapes numérotées */
.steps { counter-reset: step; display: grid; gap: 1.5rem; }
.steps--row { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-dark);
}
.block--light .step, .block--paper .step { background: var(--blanc); border-color: var(--line); }
/* Numéro d'étape : l'or pur ne donnait que 2,1:1 sur fond clair — le chiffre
   se lisait à peine. Chiffre bleu nuit (16:1) + filet or : plus visible, et
   l'accent doré reste présent. Sur fond sombre, l'or clair reprend la main. */
.step__num {
  position: relative;
  font-family: var(--font-title);
  font-size: clamp(2.3rem, 1.9rem + 1.5vw, 3.2rem);
  color: var(--anthracite);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  letter-spacing: -0.03em;
}
.step__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--or);
}
.block--dark .step__num { color: var(--or-light); }
.step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.step p { font-size: var(--step--1); color: var(--text-soft); }
.block--dark .step p { color: var(--text-on-dark-soft); }

/* Bande de faits / engagements (faits réels uniquement) */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.fact { background: var(--anthracite-deep); padding: 1.8rem; text-align: center; }
.block--light .fact, .block--paper .fact { background: var(--blanc-casse); }
.fact__big { display: block; font-family: var(--font-title); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); color: var(--or); }
/* Sur fond clair, l'or pur tombe à 2,1:1 — on passe à l'or soutenu (4,4:1). */
.block--light .fact__big, .block--paper .fact__big { color: var(--or-deep); }
.fact__label { font-size: var(--step--1); color: var(--text-soft); }
.block--dark .fact__label { color: var(--text-on-dark-soft); }

/* Citation / parole */
.quote-band { text-align: center; max-width: 900px; margin-inline: auto; }
.quote-band blockquote {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.quote-band cite { display: block; margin-top: 1.5rem; font-style: normal; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }

/* Bande CTA finale */
.cta-band {
  position: relative;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(234, 166, 35, 0.2), transparent 60%),
    var(--anthracite-deep);
  color: var(--text-on-dark);
  padding-block: clamp(4rem, 8vw, 7rem);
}
.cta-band h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 400; max-width: 20ch; margin-inline: auto; }
.cta-band p { margin: 1.2rem auto 2.2rem; max-width: 48ch; color: var(--text-on-dark-soft); }
.cta-band__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta-band__phone { font-family: var(--font-title); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--blanc); display: inline-block; margin-top: 1.4rem; }
.cta-band__phone:hover { color: var(--or-light); }

/* ============================================================
   6. COMPOSANT « Autres prestations » (maillage interne premium)
   ============================================================ */
.service-nav {
  background:
    radial-gradient(70% 60% at 15% 10%, rgba(234, 166, 35, 0.1), transparent 55%),
    linear-gradient(180deg, var(--anthracite), #1a2f57);
  color: var(--text-on-dark);
  padding-block: var(--section-y);
}
.service-nav__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.service-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Dernière ligne incomplète : avec 7 prestations dans une grille de 3, la
   septième restait seule avec deux cases vides à côté. On lui fait occuper
   la largeur restante. La règle se cale sur la position réelle de l'élément
   dans sa ligne, donc elle reste juste si le nombre de prestations change. */
.service-nav__grid > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.service-nav__grid > :last-child:nth-child(3n + 2) { grid-column: span 2; }
/* Sur une tuile élargie, le nom cesse de pousser la flèche à l'autre bout :
   le groupe numéro + nom + flèche reste centré et lisible d'un bloc. */
.service-nav__grid > :last-child:nth-child(3n + 1),
.service-nav__grid > :last-child:nth-child(3n + 2) { justify-content: center; }
.service-nav__grid > :last-child:nth-child(3n + 1) .service-link__name,
.service-nav__grid > :last-child:nth-child(3n + 2) .service-link__name { flex: 0 1 auto; }

@media (max-width: 860px) {
  .service-nav__grid { grid-template-columns: repeat(2, 1fr); }
  .service-nav__grid > :last-child:nth-child(3n + 1),
  .service-nav__grid > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .service-nav__grid > :last-child:nth-child(2n + 1) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .service-nav__grid { grid-template-columns: 1fr; }
  /* Sélecteur aussi spécifique que celui du palier 860 px : sans cela il
     ne l'emporte pas, malgré sa position plus bas dans la feuille. */
  .service-nav__grid > :last-child:nth-child(2n + 1),
  .service-nav__grid > :last-child:nth-child(3n + 1),
  .service-nav__grid > :last-child:nth-child(3n + 2) {
    grid-column: auto;
    justify-content: flex-start;
  }
}
.service-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  background: var(--anthracite-deep);
  overflow: hidden;
  isolation: isolate;
  transition: background var(--dur) var(--ease);
}
.service-link__bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.1);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.service-link::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14, 28, 39, 0.9), rgba(14, 28, 39, 0.55));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.service-link:hover .service-link__bg,
.service-link:focus-visible .service-link__bg { opacity: 0.5; transform: scale(1); }
.service-link:hover::after,
.service-link:focus-visible::after { opacity: 1; }

.service-link__num { font-family: var(--font-title); font-size: 1.1rem; color: var(--or); min-width: 1.5rem; }
.service-link__name { font-family: var(--font-title); font-size: 1.25rem; color: var(--text-on-dark); flex: 1; }
.service-link:hover .service-link__name { color: var(--or-light); }
.service-link__arrow {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-dark); color: var(--or-light);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service-link:hover .service-link__arrow { transform: translateX(3px); background: var(--or); color: var(--blanc); border-color: var(--or); }
.service-link.is-current { pointer-events: none; }
/* Page courante, volontairement en retrait — mais --text-muted ne tenait que
   3,75:1 sur le bleu éclairci. Ce ton reste discret et repasse à 4,9:1. */
.service-link.is-current .service-link__name { color: #8fa5b8; }
.service-link.is-current .service-link__tag {
  margin-left: auto; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--or); border: 1px solid var(--border, rgba(234, 166, 35,.4)); padding: 0.2rem 0.6rem; border-radius: 50px;
}

/* ============================================================
   6b. GALERIE RÉALISATIONS (mosaïque)
   ============================================================ */
.work-grid {
  columns: 3 280px;
  column-gap: 1.25rem;
}
.work-card {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.work-card img { width: 100%; height: auto; display: block; transition: transform 0.8s var(--ease); }
.work-card:hover img { transform: scale(1.05); }
.work-card__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(14, 28, 39, 0.85), transparent);
  color: var(--blanc);
}
.work-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-light);
  margin-bottom: 0.3rem;
}
.work-card__title { font-family: var(--font-title); font-size: 1.15rem; }

/* ============================================================
   7. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero-split__inner { grid-template-columns: 1fr; }
  .hero-split__media { aspect-ratio: 16 / 10; max-height: 440px; order: -1; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: -1; }
  .split__media { order: -1; aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
  .page-hero { min-height: clamp(380px, 72vh, 540px); padding-top: 112px; }
  /* Le page-hero est bien plus court sur mobile : le bloc de texte occupe
     une part beaucoup plus haute de la section, et le fil d'Ariane remonte
     dans la partie claire du dégradé. On soutient donc le voile sur toute
     la hauteur, en laissant juste le haut respirer. */
  .page-hero__veil {
    background:
      radial-gradient(60% 34% at 70% 12%, rgba(255, 190, 92, 0.18), transparent 74%),
      linear-gradient(to top,
        rgba(14, 28, 39, 0.80) 0%,
        rgba(14, 28, 39, 0.78) 45%,
        rgba(14, 28, 39, 0.72) 72%,
        rgba(14, 28, 39, 0.50) 100%);
  }
  .page-hero__title { font-size: clamp(2rem, 1.5rem + 4vw, 2.8rem); }
  .service-link__name { font-size: 1.1rem; }
  .split__media--framed { box-shadow: -12px 12px 0 0 var(--paper), -12px 12px 0 2px var(--or); }
}

/* ============================================================
   8. ENRICHISSEMENT ÉDITORIAL
   Prose SEO, encarts pédagogiques, comparatif bons réflexes /
   erreurs, bande immersive, séparateurs, piliers, mini-FAQ.
   ============================================================ */

/* 8a. Prose éditoriale — texte long lisible et rythmé */
.prose { max-width: 72ch; }
.prose--center { margin-inline: auto; }
.prose > * + * { margin-top: 1.15rem; }
.prose p { line-height: 1.72; color: var(--text-soft); }
.block--dark .prose p { color: var(--text-on-dark-soft); }
.prose h3 {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 2.6rem;
  /* en colonnes (.prose--cols), ne jamais laisser un sous-titre orphelin
     en bas de colonne, séparé de son paragraphe */
  break-after: avoid;
  break-inside: avoid;
}
.block--dark .prose h3 { color: var(--text-on-dark); }
.prose > h3:first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.block--dark .prose strong { color: var(--text-on-dark); }
/* Liens dans le texte : l'or pur ne donnait que 2,10:1 sur fond clair, en
   plein corps de texte. L'or soutenu monte à 4,4:1 tout en restant doré. */
.prose a {
  color: var(--or-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(160, 106, 18, 0.5);
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.block--dark .prose a { color: var(--or-light); text-decoration-color: rgba(255, 209, 102, 0.5); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul { display: grid; gap: 0.7rem; margin-block: 1.2rem; }
.prose ul li { position: relative; padding-left: 1.6rem; color: var(--text-soft); }
.block--dark .prose ul li { color: var(--text-on-dark-soft); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--or);
}
/* Deux colonnes au-delà du large (lecture aérée) */
.prose--cols { max-width: 100%; }
@media (min-width: 880px) {
  .prose--cols { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .prose--cols p { break-inside: avoid; }
  .prose--cols > * + * { margin-top: 0; }
  .prose--cols p + p { margin-top: 1.15rem; }
}

/* 8b. Encart pédagogique « Bon à savoir » / « À noter » */
.callout {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem 1.6rem;
  background: rgba(234, 166, 35, 0.08);
  border: 1px solid rgba(234, 166, 35, 0.22);
  border-left: 3px solid var(--or);
  border-radius: var(--radius-sm);
}
.block--dark .callout { background: rgba(234, 166, 35, 0.13); border-color: rgba(234, 166, 35, 0.32); }
.callout + .callout { margin-top: 1.25rem; }
.callout__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: rgba(234, 166, 35, 0.16);
  color: var(--or);
}
.callout__icon svg { width: 22px; height: 22px; }
.callout__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: var(--step-1);
  color: var(--text);
  margin-bottom: 0.3rem;
}
.block--dark .callout__title { color: var(--text-on-dark); }
.callout__body { color: var(--text-soft); font-size: var(--step--1); line-height: 1.6; }
.block--dark .callout__body { color: var(--text-on-dark-soft); }
.callout__body p + p { margin-top: 0.6rem; }

/* 8c. Comparatif « Les bons réflexes » / « Les erreurs à éviter » */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.dodont__col {
  padding: 1.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--blanc);
}
.block--dark .dodont__col { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); }
.block--paper .dodont__col { background: var(--blanc); }
.dodont__head {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.block--dark .dodont__head { color: var(--text-on-dark); }
.dodont__mark {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
}
.dodont__col--do .dodont__mark { background: rgba(76, 138, 99, 0.16); color: #4c8a63; }
.dodont__col--dont .dodont__mark { background: rgba(178, 86, 47, 0.16); color: #b5562f; }
.dodont__mark svg { width: 17px; height: 17px; }
.dodont__col ul { display: grid; gap: 0.8rem; }
.dodont__col li { position: relative; padding-left: 1.7rem; color: var(--text-soft); font-size: var(--step--1); line-height: 1.55; }
.block--dark .dodont__col li { color: var(--text-on-dark-soft); }
.dodont__col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.dodont__col--do li::before { content: "✓"; color: #4c8a63; }
.dodont__col--dont li::before { content: "✕"; color: #b5562f; }

/* 8d. Bande immersive plein cadre (respiration / alternance) */
.media-feature {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 52vh, 520px);
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  color: var(--blanc);
}
.media-feature__media { position: absolute; inset: 0; z-index: -2; }
.media-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.media-feature__veil {
  position: absolute; inset: 0; z-index: -1;
  /* Bleu nuit de marque, et non un gris neutre.
     Le bloc de texte fait 620 px : selon la largeur d'écran il s'arrête
     entre 51 % (1440 px) et 64 % (1024 px) de la section. Le voile reste
     donc soutenu jusqu'à ~65 %, puis s'ouvre franchement pour laisser
     la photo respirer sur sa droite. */
  background: linear-gradient(90deg,
    rgba(14, 28, 39, 0.80) 0%,
    rgba(14, 28, 39, 0.72) 40%,
    rgba(14, 28, 39, 0.62) 64%,
    rgba(14, 28, 39, 0.34) 82%,
    rgba(14, 28, 39, 0.18) 100%);
}
.media-feature__inner { max-width: 620px; }
.media-feature__title { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.media-feature__text { margin-top: 1.1rem; font-size: var(--step-1); color: rgba(255, 255, 255, 0.9); }
.media-feature__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* 8e. Piliers numérotés (réutilise feature-card) */
.feature-card__num {
  display: block;
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--or-deep);
  margin-bottom: 0.5rem;
}
.block--dark .feature-card__num { color: var(--or-light); }

/* 8f. Mini-FAQ intégrée à une section de service */
.faq-inline { max-width: 820px; margin-inline: auto; }
.block--dark .faq-inline [data-faq-item] { border-color: var(--line-dark); }
.block--dark .faq-inline [data-faq-item] summary { color: var(--text-on-dark); }
.block--dark .faq-inline [data-faq-item] summary:hover { color: var(--or-light); }
.block--dark .faq-inline .faq__panel { color: var(--text-on-dark-soft); }

/* ---------- Responsive enrichissement ---------- */
@media (max-width: 720px) {
  .dodont { grid-template-columns: 1fr; }
}

/* prefers-reduced-motion : neutralise les mouvements ajoutés ici */
@media (prefers-reduced-motion: reduce) {
  .nav__sub, .mobile-sub__panel, .service-link__bg, .split__media img { transition: none !important; }
  .split__media:hover img { transform: none !important; }
}

/* ============================================================
   9. DIRECTION ARTISTIQUE — relief, texture, mise en scène
   « L'heure dorée », poussée : grain filmique, motifs de toit,
   chiffres éditoriaux, cartes en relief, primitives premium.
   ============================================================ */

/* 9a. Grain filmique global — supprime l'effet « aplat » trop plat.
   Très léger, en soft-light, sans gêner la lisibilité ni les clics. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
/* Grain coupé sur petit écran (gain de perf, invisible à cette taille) */
@media (max-width: 600px) { body::after { display: none; } }

/* 9b. Motifs « métier » réutilisables (textures discrètes de fond) */
:root {
  --tex-roofline: linear-gradient(135deg, transparent calc(50% - 0.5px), rgba(234, 166, 35, 0.22) 50%, transparent calc(50% + 0.5px)),
                  linear-gradient(-135deg, transparent calc(50% - 0.5px), rgba(234, 166, 35, 0.22) 50%, transparent calc(50% + 0.5px));
  --tex-grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* Filet doré horizontal — séparateur premium en tête de bande sombre */
.block--dark, .services, .proof, .contact, .service-nav, .cta-band {
  position: relative;
}
.block--dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 166, 35, 0.55), transparent);
}

/* Trame d'ingénieur très discrète sur les grandes bandes sombres */
.services::after, .proof::after, .contact::after, .service-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--tex-grid);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.6;
}
.services > .container, .proof > .container, .contact > .container, .service-nav > .container { position: relative; z-index: 1; }

/* 9c. Chiffre éditorial géant (contour or) en tête de section */
.section-figure {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(234, 166, 35, 0.45);
  margin-bottom: 0.5rem;
}
.block--dark .section-figure, .services .section-figure, .proof .section-figure {
  -webkit-text-stroke-color: rgba(255, 209, 102, 0.42);
}

/* Étiquette/kicker premium : pastille à filet doré */
.kicker-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  border: 1px solid rgba(234, 166, 35, 0.32);
  border-radius: 50px;
  background: rgba(234, 166, 35, 0.07);
}
.kicker-tab::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 0 3px rgba(234, 166, 35, 0.18);
}
.block--dark .kicker-tab, .services .kicker-tab { color: var(--or-light); background: rgba(234, 166, 35, 0.12); }

/* 9d. Cartes en relief (feature-card enrichie, globale) */
.feature-card { position: relative; overflow: hidden; }
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--or), var(--or-light), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.feature-card:hover::before, .feature-card:focus-within::before { transform: scaleX(1); }
.feature-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 209, 102, 0.24), rgba(234, 166, 35, 0.08));
  border: 1px solid rgba(234, 166, 35, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -12px rgba(234, 166, 35, 0.7);
  transition: transform 0.5s var(--ease);
}
.feature-card:hover .feature-card__icon { transform: translateY(-2px) scale(1.04); }
.block--dark .feature-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); }

/* 9e. Cadre photo « atelier » — image + filet doré + ombre profonde */
.framed-shot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
}
.framed-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 209, 102, 0.25);
  border-radius: inherit;
  pointer-events: none;
}
.framed-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carte-statistique flottante (superposition sur image) */
.stat-chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1rem 1.25rem;
  background: rgba(14, 28, 39, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 209, 102, 0.3);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.8);
}
.stat-chip__big { font-family: var(--font-title); font-size: 1.7rem; color: var(--or-light); line-height: 1; }
.stat-chip__label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-soft); }

/* 9f. Piliers (composition « intro + grille » dense) */
.pillars {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.pillars__intro { position: sticky; top: 110px; }
.pillars__intro .section-title { margin-top: 1.2rem; }
.pillars__intro .section-lede { margin-top: 1.2rem; }
.pillars__intro .btn { margin-top: 1.9rem; }
.pillars__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.pillars .feature-card { padding: 1.85rem; }
/* Piliers numérotés : le contour doré translucide était pensé pour un fond
   sombre. Or `.pillars` est sur fond clair sur 7 pages sur 8 — les numéros y
   étaient quasi invisibles. Chiffre plein + filet or par défaut ; le contour
   élégant est conservé là où il fonctionne, sur fond sombre. */
.pillars .feature-card__num {
  position: relative;
  font-size: clamp(2rem, 1.7rem + 1.3vw, 2.8rem);
  line-height: 1;
  color: var(--anthracite);
  -webkit-text-stroke: 0;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
}
.pillars .feature-card__num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--or);
}
.block--dark .pillars .feature-card__num {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 209, 102, 0.75);
}
.block--dark .pillars .feature-card__num::after { background: var(--or-light); }
.pillars .feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* 9g. Bande de chiffres premium (icône + relief) */
.fact { position: relative; transition: background 0.5s var(--ease); }
.fact::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 2px;
  background: var(--or);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.fact:hover::before { opacity: 1; }
.block--dark .fact:hover, .block--dark .fact:focus-within { background: rgba(255, 255, 255, 0.03); }
.fact__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 0.95rem;
  border-radius: 50%;
  color: var(--or-light);
  background: radial-gradient(circle at 32% 26%, rgba(255, 209, 102, 0.24), rgba(234, 166, 35, 0.06));
  border: 1px solid rgba(234, 166, 35, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.block--light .fact__ico, .block--paper .fact__ico { color: var(--or); }
.fact__ico svg { width: 23px; height: 23px; }

/* 9h. Credo — citation plein cadre, image + voile fort */
.creed__quote {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--blanc);
  text-wrap: balance;
  margin-top: 1.2rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.creed__by {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or-light);
}
.creed__by::before { content: ""; width: 28px; height: 1px; background: var(--or); }
.creed__chips { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; }
.creed__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  font-size: var(--step--1);
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  backdrop-filter: blur(6px);
}
.creed__chips svg { width: 16px; height: 16px; color: var(--or-light); flex-shrink: 0; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars__intro { position: static; }
}
@media (max-width: 520px) {
  .pillars__grid { grid-template-columns: 1fr; }
}

/* Voile uniforme sur les bandeaux immersifs dès que l'écran se resserre.
   Le bloc de texte fait 620 px de large : à 1440 px il n'occupe que la
   moitié gauche, et le dégradé horizontal suffit ; à 900 px il couvre déjà
   plus de 70 % de la largeur et débordait sur la partie claire du dégradé.
   Le seuil est donc calé sur 980 px, pas sur le breakpoint mobile. */
@media (max-width: 980px) {
  .media-feature__veil {
    background: linear-gradient(180deg, rgba(14, 28, 39, 0.62) 0%, rgba(14, 28, 39, 0.74) 100%);
  }
}
@media (max-width: 760px) {
  .media-feature { min-height: clamp(340px, 64vh, 480px); }
}

/* Grands écrans : on laisse respirer un peu plus large, sans casser la mesure de lecture */
@media (min-width: 1700px) {
  :root { --container: 1340px; }
}

/* ============================================================
   10. REFONTE PAGES SERVICES — composants dynamiques
   Contraste de fonds, transitions diagonales, index éditorial,
   rail de process animé, puces → chips, dossiers de cas, stagger.
   ============================================================ */

/* 10a. Fond « nuit » — contraste fort, plus profond que --dark */
.block--night {
  position: relative;
  background:
    radial-gradient(110% 85% at 50% -15%, rgba(255, 209, 102, 0.16), transparent 60%),
    linear-gradient(180deg, #0d1d38 0%, #060f1f 100%);
  color: var(--text-on-dark);
}
.block--night .section-title,
.block--night .split__title { color: var(--text-on-dark); }
.block--night .section-lede,
.block--night .split__text,
.block--night .prose p { color: var(--text-on-dark-soft); }
.block--night .section-kicker { color: var(--text-on-dark-soft); }
.block--night .section-kicker--gold { color: var(--or-light); }

/* 10b. Transition diagonale — la section « tranche » la précédente.
   Le bord supérieur est coupé en biais ; on compense par un padding-top.
   À poser sur une section qui suit une section de tonalité différente. */
.block--slice {
  --slice: clamp(26px, 4vw, 68px);
  clip-path: polygon(0 var(--slice), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--slice) * -1);
  padding-top: calc(var(--section-y) + var(--slice));
  position: relative;
  z-index: 1;
}
.block--slice-rev {
  --slice: clamp(26px, 4vw, 68px);
  clip-path: polygon(0 0, 100% var(--slice), 100% 100%, 0 100%);
  margin-top: calc(var(--slice) * -1);
  padding-top: calc(var(--section-y) + var(--slice));
  position: relative;
  z-index: 1;
}
/* la coupe remplace le filet doré horizontal (sinon il serait tronqué) */
.block--slice::before,
.block--slice-rev::before { display: none !important; }

/* 10c. En-tête de section éditorial gauche (alterne avec les heads centrés) */
.lead-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.lead-head .section-title { max-width: 24ch; }

/* 10d. Index éditorial de prestations (remplace une grille de cartes) */
.spec { border-top: 1px solid var(--line); }
.block--dark .spec,
.block--night .spec { border-color: var(--line-dark); }
.spec__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.25rem, 2.3vw, 1.9rem) 0.4rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}
.block--dark .spec__row,
.block--night .spec__row { border-color: var(--line-dark); }
.spec__row::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px;
  background: var(--or); transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .spec__row:hover { padding-left: 1.4rem; }
  .spec__row:hover::before { transform: scaleY(1); }
}
.spec__num {
  font-family: var(--font-title); font-weight: 400; line-height: 1;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  color: transparent; -webkit-text-stroke: 1px rgba(234, 166, 35, 0.55);
  min-width: 2.2ch;
}
.block--dark .spec__num,
.block--night .spec__num { -webkit-text-stroke-color: rgba(255, 209, 102, 0.5); }
.spec__name {
  font-family: var(--font-title); font-size: clamp(1.18rem, 1rem + 0.7vw, 1.55rem);
  color: var(--text); transition: color 0.4s var(--ease);
}
.block--dark .spec__name,
.block--night .spec__name { color: var(--text-on-dark); }
.spec__row:hover .spec__name { color: var(--or); }
.block--dark .spec__row:hover .spec__name,
.block--night .spec__row:hover .spec__name { color: var(--or-light); }
.spec__desc { margin-top: 0.4rem; color: var(--text-soft); font-size: var(--step--1); max-width: 60ch; line-height: 1.6; }
.block--dark .spec__desc,
.block--night .spec__desc { color: var(--text-on-dark-soft); }

/* 10e. Rail de process — ligne qui se remplit quand la section apparaît */
.rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); margin-top: 0.5rem; }
.rail__line { position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: var(--line); overflow: hidden; }
.block--dark .rail__line,
.block--night .rail__line { background: var(--line-dark); }
.rail__line::after {
  content: ""; position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--or), var(--or-light));
  transition: right 1.7s var(--ease);
}
.rail.is-in .rail__line::after { right: 0; }
.rail__step { position: relative; }
.rail__dot {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-title); font-size: 1.4rem; color: var(--blanc);
  /* Pastille pleine bleue cerclée d'or : le chiffre or sur fond blanc ne
     donnait que 2,10:1 et se lisait à peine ; la pastille tout en or, elle,
     chargeait la page de jaune. Le bleu porte le chiffre (9,4:1) et l'or
     ne reste qu'en liseré. */
  background: var(--anthracite); border: 2px solid var(--or);
  box-shadow: 0 6px 18px -10px rgba(234, 166, 35, 0.7);
}
.block--dark .rail__dot,
.block--night .rail__dot { background: var(--anthracite-deep); color: var(--or-light); border-color: var(--or-light); }
.rail__step h3 { margin-top: 1.1rem; font-size: 1.12rem; }
.rail__step p { margin-top: 0.4rem; font-size: var(--step--1); color: var(--text-soft); }
.block--dark .rail__step p,
.block--night .rail__step p { color: var(--text-on-dark-soft); }
@media (max-width: 760px) {
  .rail { grid-template-columns: 1fr; gap: 0; }
  .rail__line { display: none; }
  .rail__step { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1.2rem; padding-bottom: 1.8rem; }
  .rail__step:not(:last-child)::before {
    content: ""; position: absolute; left: 26px; top: 54px; bottom: 0; width: 2px; background: var(--line);
  }
  .block--dark .rail__step:not(:last-child)::before,
  .block--night .rail__step:not(:last-child)::before { background: var(--line-dark); }
  .rail__step h3 { margin-top: 0.3rem; }
  .rail__step p { grid-column: 2; }
}

/* 10f. Chips (remplace certaines listes à puces du split d'intro) */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.7rem; }
.chips li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.05rem; border-radius: 50px; font-size: var(--step--1); line-height: 1.3;
  background: rgba(234, 166, 35, 0.08); border: 1px solid rgba(234, 166, 35, 0.28); color: var(--text);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex-shrink: 0; }
@media (hover: hover) { .chips li:hover { background: rgba(234, 166, 35, 0.14); transform: translateY(-2px); } }
.block--dark .chips li,
.block--night .chips li { background: rgba(255, 209, 102, 0.12); border-color: rgba(255, 209, 102, 0.3); color: var(--text-on-dark); }

/* 10g. Dossiers de cas — « case files » (remplace une 3e grille de cartes) */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.case {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--or);
  overflow: hidden;
}
.block--light .case, .block--paper .case { background: var(--blanc); border-color: var(--line); border-left-color: var(--or); }
.case__tag { font-family: var(--font-title); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); margin-bottom: 0.9rem; }
.block--dark .case__tag, .block--night .case__tag { color: var(--or-light); }
.case h3 { font-size: 1.18rem; margin-bottom: 0.7rem; line-height: 1.25; }
.case p { font-size: var(--step--1); color: var(--text-soft); }
.block--dark .case p, .block--night .case p { color: var(--text-on-dark-soft); }
/* Chiffre en filigrane : le contour à 0,16 d'opacité était calibré pour un
   fond sombre et disparaissait complètement sur les cartes blanches. */
.case__big {
  position: absolute; right: -0.4rem; top: -1.2rem;
  font-family: var(--font-title); font-size: 5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(234, 166, 35, 0.42); z-index: 0; pointer-events: none;
}
.block--dark .case__big, .block--night .case__big {
  -webkit-text-stroke: 1px rgba(255, 209, 102, 0.3);
}
.case > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .cases { grid-template-columns: 1fr; } }

/* 10h. Bandeau-citation contrasté (remplace la citation à plat) */
.creed-band {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 120% at 80% 0%, rgba(255, 209, 102, 0.18), transparent 60%),
    linear-gradient(150deg, #101d38, var(--anthracite-deep));
  color: var(--text-on-dark);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.creed-band__inner { max-width: 880px; }
.creed-band blockquote {
  font-family: var(--font-title); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); line-height: 1.25; text-wrap: balance;
}
.creed-band blockquote .gold { font-style: italic; }
.creed-band cite { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem; font-style: normal; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-light); }
.creed-band cite::before { content: ""; width: 30px; height: 1px; background: var(--or); }
.creed-band__mark { position: absolute; right: clamp(1rem, 5vw, 4rem); top: 50%; transform: translateY(-50%); font-family: var(--font-title); font-size: clamp(8rem, 22vw, 16rem); line-height: 0.7; color: rgba(255, 209, 102, 0.07); pointer-events: none; }

/* 10i. Stagger : retards en cascade pilotés par JS (var --i) */
[data-stagger] > [data-reveal] { transition-delay: calc(var(--i, 0) * 0.07s); }

@media (prefers-reduced-motion: reduce) {
  .block--slice, .block--slice-rev { clip-path: none; margin-top: 0; padding-top: var(--section-y); }
  .rail__line::after { transition: none; right: 0 !important; }
  [data-stagger] > [data-reveal] { transition-delay: 0s !important; }
}

/* ============================================================
   11. COMPATIBILITÉ WORDPRESS / DIVI
   ------------------------------------------------------------
   Divi impose une couleur aux h1–h6, aux liens et aux paragraphes.
   Cela ÉCRASE l'héritage de couleur du site sur les FONDS SOMBRES
   (le hero, les titres « --light », les liens du footer…), qui
   apparaissent alors foncés/bleus au lieu de blanc/ivoire.

   On ré-affirme ici les couleurs claires attendues, en s'appuyant
   sur la spécificité (conteneur + élément) — SANS !important.
   Ces règles ne ciblent QUE des éléments TOUJOURS sur fond sombre :
   les titres et textes sur fond clair ne sont jamais touchés, et
   le doré (.gold, kickers) reste défini par ses propres règles.
   Sur le site statique, ces valeurs sont identiques à l'héritage
   d'origine : aucun changement visuel, aucune régression.
   ============================================================ */

/* Grands titres clairs sur fond sombre (reposaient sur l'héritage) */
.hero .hero__title { color: var(--blanc); }
.page-hero .page-hero__title { color: var(--blanc); }
.hero-split .hero-split__title { color: var(--text-on-dark); }
.media-feature .media-feature__title { color: var(--blanc); }
.cta-band .container h2 { color: var(--text-on-dark); }
.creed-band .creed-band__inner blockquote { color: var(--text-on-dark); }

/* Variantes « claires » des titres et chapôs de section (renfort de spécificité) */
.section-title.section-title--light { color: var(--text-on-dark); }
.section-lede.section-lede--light { color: var(--text-on-dark-soft); }

/* Liens du pied de page (fond sombre) : rétablir la couleur du site
   face au bleu de lien par défaut de Divi */
.footer .footer__col a,
.footer .footer__legal a { color: inherit; }

/* ============================================================
   11. GALERIE DE RÉALISATIONS
   Grille filtrable à cadence régulière + visionneuse plein écran.
   Remplace l'ancienne maçonnerie `columns`, dont les ratios
   d'image hétérogènes donnaient une page désordonnée.
   ============================================================ */

/* 11a. Filtres par métier */
.gal-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 2.6rem;
}
.gal-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--blanc);
  color: var(--text-soft);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  transition: color 0.35s var(--ease), background 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.gal-filter .count {
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: color 0.35s var(--ease);
}
.gal-filter:hover {
  border-color: var(--anthracite-soft);
  color: var(--anthracite);
  transform: translateY(-1px);
}
.gal-filter.is-active {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: var(--blanc);
}
.gal-filter.is-active .count { color: var(--or-light); }

/* 11b. Grille — cadence régulière, un seul ratio pour toute la page */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.1rem;
}
.gal-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--anthracite-deep);
  isolation: isolate;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.gal-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.5s var(--ease);
}
.gal-item:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(14, 28, 39, 0.55); }
.gal-item:hover img { transform: scale(1.06); }

.gal-item__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(14, 28, 39, 0.9) 0%, rgba(14, 28, 39, 0.55) 45%, transparent 100%);
  color: var(--blanc);
  text-align: left;
  pointer-events: none;
}
.gal-item__tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--or-light);
  margin-bottom: 0.25rem;
}
.gal-item__title {
  display: block;
  font-family: var(--font-title);
  font-size: 1.05rem;
  line-height: 1.2;
}
/* Loupe : signale que la carte ouvre la visionneuse */
.gal-item__zoom {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(14, 28, 39, 0.55);
  backdrop-filter: blur(4px);
  color: var(--or-light);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.gal-item:hover .gal-item__zoom,
.gal-item:focus-visible .gal-item__zoom { opacity: 1; transform: scale(1); }

/* Masquage par filtre : retrait du flux, sans saut brutal */
.gal-item[hidden] { display: none; }
.gal-item.is-entering { animation: galIn 0.45s var(--ease) both; }
@keyframes galIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.gal-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-soft);
  padding: 2rem 0;
}

/* 11c. Visionneuse plein écran */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* colonne : figure centrée, compteur dans le flux juste en dessous —
     en absolu il chevauchait la légende sur les écrans courts */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-y: auto;
  background: rgba(6, 13, 26, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(1100px, 100%);
  /* pas de max-height ici : le contenu débordait de la boîte et venait
     se superposer au compteur placé juste après. L'image est déjà bornée. */
  margin: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: min(62vh, 680px);
  width: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.lightbox__cap {
  text-align: center;
  color: var(--text-on-dark);
}
.lightbox__cap .tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-light);
  margin-bottom: 0.35rem;
}
.lightbox__cap .title { display: block; font-family: var(--font-title); font-size: 1.25rem; }
.lightbox__cap .link {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--or-light);
  border-bottom: 1px solid rgba(255, 209, 102, 0.45);
  padding-bottom: 2px;
}
.lightbox__cap .link:hover { color: var(--blanc); border-color: var(--blanc); }

.lightbox__btn {
  position: absolute;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--blanc);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lightbox__btn:hover { background: var(--or); border-color: var(--or); color: var(--anthracite-deep); }
.lightbox__close { top: clamp(0.9rem, 3vw, 1.8rem); right: clamp(0.9rem, 3vw, 1.8rem); }
.lightbox__prev { left: clamp(0.5rem, 2.5vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2.5vw, 1.8rem); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__counter {
  flex: none;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--text-on-dark-soft);
}
body.lb-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox__prev { left: 0.4rem; }
  .lightbox__next { right: 0.4rem; }
  .lightbox__btn { width: 40px; height: 40px; }
  .lightbox__img { max-height: 56vh; }
}

/* 11d. Chantiers racontés — bandeaux éditoriaux alternés */
.story-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.story {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.story:nth-child(even) .story__media { order: 2; }
.story__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -35px rgba(14, 28, 39, 0.6);
}
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(14, 28, 39, 0.82);
  backdrop-filter: blur(4px);
  color: var(--or-light);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.story__kicker {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-deep);
  margin-bottom: 0.8rem;
}
.block--dark .story__kicker { color: var(--or-light); }
.story__title {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.story__text { margin-top: 1rem; color: var(--text-soft); }
.block--dark .story__text { color: var(--text-on-dark-soft); }
.story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.block--dark .story__meta { border-color: var(--line-dark); }
.story__meta div { display: flex; flex-direction: column; gap: 0.15rem; }
.story__meta dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.block--dark .story__meta dt { color: var(--text-on-dark-soft); }
.story__meta dd { margin: 0; font-family: var(--font-title); font-size: 1.05rem; color: var(--text); }
.block--dark .story__meta dd { color: var(--text-on-dark); }
.story__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.4rem;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--or-deep);
  border-bottom: 1px solid rgba(160, 106, 18, 0.4);
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.block--dark .story__link { color: var(--or-light); border-color: rgba(255, 209, 102, 0.4); }
.story__link:hover { gap: 0.75rem; color: var(--anthracite); border-color: var(--anthracite); }
.block--dark .story__link:hover { color: var(--blanc); border-color: var(--blanc); }

@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: 1.5rem; }
  .story:nth-child(even) .story__media { order: -1; }
  .story__media { order: -1; }
}

/* ============================================================
   12. PAGES LÉGALES
   Encarts « à compléter » : volontairement voyants pour qu'aucune
   mention obligatoire ne parte en production non renseignée.
   ============================================================ */
.todo {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 4px;
  background: rgba(234, 166, 35, 0.16);
  border: 1px dashed var(--or-deep);
  color: var(--or-deep);
  font-size: 0.92em;
  font-style: italic;
}
.prose__note {
  margin-top: 2.6rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--or);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--blanc-casse);
  color: var(--text-soft);
  font-size: var(--step--1);
}
.prose__note strong { color: var(--text); }

/* Hero éditorial sans visuel (pages légales) : la grille attend deux
   colonnes ; sans image, le texte restait coincé sur la moitié gauche. */
.hero-split--solo .hero-split__inner { grid-template-columns: 1fr; }
.hero-split--solo .hero-split__title { max-width: 20ch; }
.hero-split--solo .hero-split__intro { max-width: 62ch; }

/* ============================================================
   13. SLIDER EN COLONNE + CTA INTERCALAIRE
   ============================================================ */

/* Un slider avant/après logé dans la colonne image d'un bloc .story :
   il doit remplir la colonne, pas garder sa largeur maximale ni son
   ratio 16/10 d'origine. */
.story__media--slider {
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
.story__media--slider .ba {
  max-width: none;
  margin-inline: 0;
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -35px rgba(14, 28, 39, 0.6);
}

/* CTA intercalaire : une relance en milieu de page, moins solennelle
   qu'une bande pleine largeur, plus visible qu'un simple lien. */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 2.6rem);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 160% at 100% 0%, rgba(234, 166, 35, 0.14), transparent 62%),
    linear-gradient(120deg, var(--anthracite) 0%, var(--anthracite-deep) 100%);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
/* Filet doré en tête : le rappel de marque, sans surcharge de jaune */
.cta-inline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--or), rgba(234, 166, 35, 0));
}
.cta-inline__text { flex: 1 1 320px; }
.cta-inline__title {
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.2;
  color: var(--blanc);
}
.cta-inline__sub {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--text-on-dark-soft);
  max-width: 56ch;
}
.cta-inline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  flex: 0 1 auto;
}
/* Sur ce fond bleu, le bouton « sombre » doit s'en détacher : on l'inverse */
.cta-inline .btn--dark {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.5);
}
.cta-inline .btn--dark:hover {
  background: var(--blanc);
  color: var(--anthracite-deep);
  border-color: var(--blanc);
}

@media (max-width: 640px) {
  .cta-inline { flex-direction: column; align-items: flex-start; }
  .cta-inline__actions { width: 100%; }
  .cta-inline__actions .btn { flex: 1 1 auto; justify-content: center; }
}