/* ==========================================================================
   NSC Strategy - feuille de styles
   Thème verrouillé en mode clair (le blanc domine, conformément à la charte).
   Rayon d'angle unique : 8px sur toutes les surfaces et tous les contrôles.
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --nsc-navy: #002D75;
  --nsc-navy-54: rgba(0, 45, 117, 0.54);
  --nsc-gold: #D4AC0D;
  --nsc-gold-deep: #C8960A;
  --nsc-bronze: #8B6B08;
  --nsc-royal: #00398A;

  /* Dégradé signature, version décorative complète (filets, nœuds, éléments graphiques) */
  --nsc-gradient: linear-gradient(90deg,
    var(--nsc-gold) 0%,
    var(--nsc-gold-deep) 20%,
    var(--nsc-bronze) 45%,
    var(--nsc-royal) 70%,
    var(--nsc-navy) 100%);

  /* Version radiale, centrée, répartition 50 / 50 */
  --nsc-gradient-radial: radial-gradient(circle at 50% 50%,
    var(--nsc-gold) 0%,
    var(--nsc-bronze) 50%,
    var(--nsc-navy) 100%);

  /* Version texte : même ramp, amorcée au bronze pour garantir le contraste AA
     sur fond blanc. L'or pur reste réservé aux accents sur fond marine. */
  --nsc-gradient-text: linear-gradient(90deg,
    var(--nsc-bronze) 0%,
    var(--nsc-royal) 58%,
    var(--nsc-navy) 100%);

  /* Neutres */
  --white: #FFFFFF;
  --surface: #F7F8FB;
  --text: #1F2937;
  --text-soft: #5B6475;
  --hairline: rgba(0, 45, 117, 0.14);

  /* Sémantique de la matrice */
  --go: #1E7A4B;
  --watch: #B06E00;
  --stop: #A32020;

  /* Système */
  --radius: 8px;
  --shell: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-section: 74px;
}

@media (min-width: 1024px) {
  :root { --pad-section: 136px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Les composants ci-dessous déclarent display: flex ; sans cette règle,
   l'attribut hidden des replis de logo serait sans effet. */
[hidden] { display: none !important; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 30px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 768px) { body { font-size: 18px; } }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) { .shell { padding-inline: 40px; } }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--nsc-royal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nsc-navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* Repère d'ancrage sans emprise : placé au niveau du titre de section, il
   évite d'atterrir dans le retrait haut de la section, où il n'y a rien à lire. */
.ancre { display: block; height: 0; overflow: hidden; }

/* ---------- Typographie partagée ---------- */

.section-title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  background: var(--nsc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 20ch;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .section-title { color: var(--nsc-navy); }
}

.sub-title {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nsc-navy);
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nsc-bronze);
}
.eyebrow-light { color: var(--nsc-gold); }

.rule {
  display: block;
  width: 180px;
  height: 2px;
  margin-top: 26px;
  background: var(--nsc-gradient);
  border-radius: 2px;
}

.section-lead {
  margin-top: 28px;
  max-width: 62ch;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--text-soft);
}

.section-head { margin-bottom: 56px; }

@media (min-width: 1024px) { .section-head { margin-bottom: 80px; } }

.section-sign {
  margin-top: 64px;
  text-align: right;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  background: var(--nsc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold { color: var(--nsc-gold); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.2s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--nsc-gold); color: var(--nsc-navy); }
.btn-gold:hover { background: var(--nsc-gold-deep); }

.btn-outline-white { border-color: rgba(255, 255, 255, 0.75); color: var(--white); background: transparent; }
.btn-outline-white:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white); }

.btn-outline-navy { border-color: var(--nsc-navy); color: var(--nsc-navy); background: transparent; }
.btn-outline-navy:hover { background: var(--nsc-navy); color: var(--white); }

.btn-block { width: 100%; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
              backdrop-filter 0.35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--hairline);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-stuck { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }

/* Le logo officiel, sur fond blanc. La baseline du fichier carré est
   illisible à cette taille : on recadre le bas pour agrandir le globe. */
/* Le logotype est entièrement typographique : le fichier carré ne tient pas
   à la hauteur d'une barre de navigation. L'emblème vit sur la photo du hero. */

/* La barre fait 76 px : a 52 px le logo garde 12 px d air de part et
   d autre. Au-dela il touche les bords, en deca il ne se lit plus. */
.brand-logo { height: 52px; width: auto; display: block; }

/* Sous 480 px la barre se resserre : le logo suit, sans quoi il mange
   la place du bouton de menu. */
@media (max-width: 479px) { .brand-logo { height: 44px; } }

.brand-lockup { display: flex; align-items: baseline; gap: 7px; }

.brand-mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--nsc-navy);
}

/* "Strategy" reprend le degrade du logotype, amorce au bronze pour le contraste. */
.brand-word {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  padding-bottom: 2px;
  background: var(--nsc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-desktop { display: none; }

.nav-desktop ul { display: flex; align-items: center; gap: 30px; }

.nav-desktop a {
  position: relative;
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding-block: 6px;
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--nsc-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-desktop a:hover::after, .nav-desktop a:focus-visible::after { transform: scaleX(1); }

.header-cta { display: none; padding: 11px 20px; font-size: 0.88rem; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--nsc-navy);
  font-size: 1.5rem;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .header-cta { display: inline-flex; }
  .burger { display: none; }
}

/* ---------- Panneau mobile ---------- */

.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 45, 117, 0.45);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.panel-scrim.is-open { opacity: 1; }

.mobile-panel {
  position: fixed;
  top: 0; right: 0;
  z-index: 70;
  width: min(84vw, 360px);
  height: 100dvh;
  padding: 24px;
  background: var(--white);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.mobile-panel.is-open { transform: translateX(0); }

.mobile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }

.panel-close {
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--nsc-navy);
  font-size: 1.4rem;
  cursor: pointer;
}

.mobile-panel nav ul { display: grid; gap: 4px; }

.mobile-panel nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.05rem;
  color: var(--nsc-navy);
  text-decoration: none;
}

.panel-cta { margin-top: 32px; }
.panel-foot { margin-top: auto; font-size: 0.82rem; color: var(--text-soft); word-break: break-all; }

body.no-scroll { overflow: hidden; }

/* ---------- Voiles photo ---------- */

.veil { position: absolute; inset: 0; background: var(--nsc-navy-54); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Surtout pas 100dvh ici. Sur telephone, la barre d'adresse se retracte au
     defilement et l'unite dynamique suit ce mouvement : le hero se redimensionne
     pendant qu'on fait defiler, et toute la page tressaute. 100svh est la
     hauteur barre visible, elle ne bouge jamais. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 88px;
  padding-bottom: 72px;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Scrim d'appoint : garantit le contraste AA du texte à gauche, le voile de
   marque à 54 % restant la couche de référence. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 45, 117, 0.80) 0%, rgba(0, 45, 117, 0.42) 58%, rgba(0, 45, 117, 0.16) 100%);
}

/* Emblème sans fond, posé discrètement sur la photo, côté opposé au texte. */
.hero-emblem {
  position: absolute;
  right: 20px;
  bottom: 28px;
  z-index: 2;
  width: 76px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-emblem { right: 40px; bottom: 44px; width: 110px; opacity: 0.5; }
}

.hero-inner { position: relative; z-index: 3; }

.hero-title {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 16ch;
}

.hero-sub {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
}

.hero-actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sections ---------- */

.section { position: relative; padding-block: var(--pad-section); }
.section-tint { background: var(--surface); }

/* Motif filigrane : réseau de points, rappel discret du globe du logo. */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(0, 45, 117, 0.16) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 88% 8%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 88% 8%, #000 0%, transparent 70%);
  opacity: 0.5;
}

/* ---------- Le cabinet ----------
   Le portrait devient un simple rond posé à côté de la citation : la photo
   pleine hauteur étirait la section sans rien ajouter. Une seconde image,
   architecturale, accompagne le propos sans concurrencer le portrait. */

.founder { display: grid; gap: 36px; }

@media (min-width: 900px) {
  .founder { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
}

.founder-portrait { margin: 0; }

.founder-portrait img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}

@media (min-width: 900px) { .founder-portrait img { width: 150px; height: 150px; } }

.founder-quote { margin: 26px 0 0; }

.founder-quote p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 2.5vw, 1.68rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.42;
  padding-bottom: 6px;
  color: var(--nsc-navy);
}

.founder-quote cite {
  display: block;
  margin-top: 16px;
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Hauteur bornée plutôt qu'un rapport fixe : en 4:3 sur une colonne large,
   l'image imposait 480px à la rangée et étirait la section. */
.founder-context { margin: 0; border-radius: var(--radius); overflow: hidden; }

.founder-context img {
  width: 100%;
  height: clamp(220px, 28vw, 340px);
  object-fit: cover;
}

/* Les trois piliers passent en rangée : ils prenaient toute une colonne. */

.pillars { margin-top: 56px; display: grid; gap: 0; }

.pillar { padding-block: 26px; border-top: 1px solid var(--hairline); }

@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; }
  .pillar { padding: 26px 34px 0 0; border-top: 1px solid var(--hairline); }
  .pillar:last-child { padding-right: 0; }
}

.pillar h3 { font-size: 1.08rem; font-weight: 600; color: var(--nsc-navy); }
.pillar p { margin-top: 10px; font-size: 0.95rem; color: var(--text-soft); }

.human { margin-top: 80px; }
.stairs { margin-top: 36px; display: grid; gap: 14px; }

/* Escalier en 4 marches */

.human { margin-top: 88px; }
.stairs { margin-top: 40px; display: grid; gap: 14px; }

/* Pas de conteneur : la photo et le texte se posent directement sur la page.
   Le liseré de couleur passe sous le titre, il n'encadre plus rien. */
.stair {
  background: none;
  border: 0;
  border-radius: 0;
}

/* La photo porte l'idée de l'étape. Au repos elle est tenue sous le voile
   marine de la charte ; au survol elle retrouve ses couleurs réelles. */
.stair-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Filet de couleur sous la photo, seul vestige du repère chromatique. */
.stair-media::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 3px;
  background: var(--etape);
}

.stair-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.65) contrast(1.04);
  transition: filter 0.55s var(--ease), transform 0.7s var(--ease);
}

.stair-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--nsc-navy-54);
  transition: opacity 0.55s var(--ease);
}

@media (hover: hover) {
  .stair:hover .stair-media img { filter: none; transform: scale(1.04); }
  .stair:hover .stair-media::after { opacity: 0; }
}

/* Sans survol possible, la photo s'affiche d'emblée en couleurs réelles :
   le voile n'apporterait rien et masquerait le sujet. */
@media (hover: none) {
  .stair-media img { filter: none; }
  .stair-media::after { opacity: 0; }
}

/* Le texte se pose sous la photo, sans retrait latéral : il s'aligne sur
   le bord de l'image, comme une légende. */
.stair h4 { padding: 18px 0 0; font-size: 1.08rem; font-weight: 600; color: var(--nsc-navy); }
.stair p { margin-top: 8px; font-size: 0.94rem; color: var(--text-soft); }

.stair-1 { --etape: var(--nsc-gold); }
.stair-2 { --etape: var(--nsc-bronze); }
.stair-3 { --etape: var(--nsc-royal); }
.stair-4 { --etape: var(--nsc-navy); }

@media (min-width: 900px) {
  .stairs { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 18px; }
  .stair-1 { margin-top: 0; }
  .stair-2 { margin-top: 26px; }
  .stair-3 { margin-top: 52px; }
  .stair-4 { margin-top: 78px; }
}

/* Bandeau valeurs */

.values {
  margin-top: 88px;
  padding-block: 30px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 40px;
}

.values p {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--nsc-navy);
}

.values i { font-size: 1.5rem; color: var(--nsc-bronze); }

/* ---------- Méthodologie ---------- */

/* ---------- Méthodologie : frise ----------
   Quatre jalons sous un filet horizontal, nœuds colorés le long du dégradé.
   Se replie en colonne unique avec filet vertical sous 900px. */

.timeline { display: grid; gap: 0; }

.milestone { position: relative; padding: 0 0 34px 34px; border-left: 1px solid var(--hairline); }
.milestone:last-child { padding-bottom: 0; }

.node {
  position: absolute;
  left: -7px; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--nsc-navy);
}

.m1 .node { background: var(--nsc-gold); }
.m2 .node { background: var(--nsc-bronze); }
.m3 .node { background: var(--nsc-royal); }
.m4 .node { background: var(--nsc-navy); }

.milestone-num {
  font-family: Spectral, Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.milestone h3 { margin-top: 6px; font-size: 1.2rem; font-weight: 600; color: var(--nsc-navy); }

/* Chaque titre reprend exactement la teinte de son point.

   Le premier fait exception aux règles de contraste suivies partout ailleurs
   sur le site : l'or atteint 2,3:1 sur blanc, là où un texte de cette taille
   en demande 3. Choix assumé du propriétaire du site, qui a préféré la
   continuité chromatique avec le point. Ne pas étendre ce traitement à
   d'autres textes : ailleurs, l'or reste aux filets et aux pastilles. */
.m1 h3 { color: var(--nsc-gold); }
.m2 h3 { color: var(--nsc-bronze); }
.m3 h3 { color: var(--nsc-royal); }
.m4 h3 { color: var(--nsc-navy); }
.milestone p:last-child { margin-top: 10px; font-size: 0.95rem; color: var(--text-soft); }

@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .milestone {
    padding: 34px 26px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .milestone:last-child { padding-bottom: 0; }
  .node { left: 0; top: -7px; }
}

/* Matrice */

.matrix-block { margin-top: 96px; }
.matrix-block .sub-title { max-width: 30ch; }

.table-wrap { margin-top: 30px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); }

.matrix { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--white); }

.matrix caption {
  caption-side: bottom;
  padding: 16px 20px;
  text-align: left;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.matrix th, .matrix td { padding: 16px 20px; text-align: left; font-size: 0.92rem; }

.matrix thead th {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--white);
  background: var(--nsc-navy);
}
.matrix thead th:first-child { background: var(--nsc-navy); }

.matrix tbody th { font-weight: 500; color: var(--nsc-navy); width: 34%; }
.matrix tbody tr + tr th, .matrix tbody tr + tr td { border-top: 1px solid var(--hairline); }
.matrix tbody td { color: var(--text-soft); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; vertical-align: 1px; }
.dot-go { background: var(--go); }
.dot-watch { background: var(--watch); }
.dot-stop { background: var(--stop); }

/* Chiffres clés */

/* Chiffres clés */

.kpis { margin-top: 96px; display: grid; gap: 34px; }

@media (min-width: 640px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(4, 1fr); gap: 30px; } }

.kpi { padding-top: 24px; border-top: 2px solid transparent; position: relative; }

.kpi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nsc-gradient);
}

.kpi-figure {
  font-family: Spectral, "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(3rem, 7vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--nsc-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kpi-sep { padding-inline: 2px; }
.kpi-label { margin-top: 14px; font-size: 0.92rem; color: var(--text-soft); max-width: 24ch; }

/* ---------- Offre ---------- */

/* ---------- Offre : chevrons photographiques ----------
   Chaque flèche est monochrome dans sa propre couleur : le voile part de la
   même teinte en haut et en bas, seule l'opacité varie pour laisser la photo
   respirer en partie haute. Le texte s'adapte : marine sur l'or, blanc sur
   le bronze et le marine. */

.offer-1 {
  --accent: var(--nsc-bronze);
  --accent-rgb: 139, 107, 8;
  --sur-accent: var(--white);
  --sur-accent-doux: rgba(255, 255, 255, 0.92);
  /* Sur le bronze, l'or ne tient que 2,4:1 : la question reste en blanc.
     Le tiret, purement décoratif, peut garder l'or. */
  --sur-accent-vif: var(--white);
  --sur-accent-tiret: var(--nsc-gold);
  --sur-accent-trait: rgba(255, 255, 255, 0.5);
}

.offer-2 {
  --accent: var(--nsc-royal);
  --accent-rgb: 0, 57, 138;
  --sur-accent: var(--white);
  --sur-accent-doux: rgba(255, 255, 255, 0.92);
  --sur-accent-vif: var(--nsc-gold);
  --sur-accent-tiret: var(--nsc-gold);
  --sur-accent-trait: rgba(255, 255, 255, 0.5);
}

.offer-3 {
  --accent: var(--nsc-navy);
  --accent-rgb: 0, 45, 117;
  --sur-accent: var(--white);
  --sur-accent-doux: rgba(255, 255, 255, 0.92);
  --sur-accent-vif: var(--nsc-gold);
  --sur-accent-tiret: var(--nsc-gold);
  --sur-accent-trait: rgba(255, 255, 255, 0.5);
}

.journey { display: grid; gap: 22px; }

.offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  min-height: 320px;
  padding: 26px 26px 28px;
  border-radius: var(--radius);
  color: var(--sur-accent);
}

.offer-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}

/* Voile d'une seule teinte. Opaque sous le texte, translucide en haut :
   la photo se lit sans jamais compromettre la lisibilité. */
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(var(--accent-rgb), 1) 0%,
    rgba(var(--accent-rgb), 0.97) 34%,
    rgba(var(--accent-rgb), 0.46) 100%);
  opacity: 0.9;
  transition: opacity 0.5s var(--ease);
}

/* Seconde couche, unie : elle se lève à l'ouverture pour que le détail, qui
   descend dans la zone claire du voile, reste lisible partout. */
.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(var(--accent-rgb));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.offer-body { position: relative; z-index: 2; width: 100%; }

/* Empilement imposé : titre, puis durée, puis filet. En laissant l'alignement
   se faire au fil du texte, la première flèche, plus étroite, plaçait sa durée
   sur la même ligne que son titre alors que les deux autres la renvoyaient
   dessous. */
.offer-head { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }

.offer h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  color: var(--sur-accent);
}

.offer-duration {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sur-accent-doux);
}

/* Filet sous le titre, il s'étire à l'ouverture. */
.offer-head::after {
  content: "";
  flex: none;
  align-self: stretch;
  height: 1px;
  margin-top: 3px;
  background: var(--sur-accent-trait);
  transform: scaleX(0.16);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.offer-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.55s var(--ease),
              opacity 0.4s var(--ease),
              margin-top 0.55s var(--ease);
}

.offer-detail-inner { overflow: hidden; min-height: 0; }

.offer-question {
  font-size: 0.99rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  padding-bottom: 3px;
  color: var(--sur-accent-vif);
}

.offer-list { margin-top: 14px; display: grid; gap: 9px; }

.offer-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--sur-accent-doux);
}

.offer-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 9px; height: 1px;
  background: var(--sur-accent-tiret);
}

/* ---- Ouverture : survol, focus clavier, ou absence de survol possible ---- */

.offer:hover .offer-detail,
.offer:focus-visible .offer-detail,
.offer:focus-within .offer-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 16px;
}

.offer:hover::before,
.offer:focus-visible::before,
.offer:focus-within::before { opacity: 1; }

.offer:hover::after,
.offer:focus-visible::after,
.offer:focus-within::after { opacity: 0.96; }

.offer:hover .offer-media,
.offer:focus-within .offer-media { transform: scale(1.05); filter: grayscale(0); }

.offer:hover .offer-head::after,
.offer:focus-within .offer-head::after { transform: scaleX(1); }

/* L'anneau de focus serait rogné par le découpage : on le place à
   l'intérieur de la forme, autour du contenu. */
.offer:focus-visible { outline: none; }
.offer:focus-visible .offer-body {
  outline: 2px solid var(--sur-accent);
  outline-offset: 9px;
  border-radius: 2px;
}

/* Sur un ecran tactile il n'y a pas de survol : le detail reste ouvert en
   permanence et le texte occupe presque toute la hauteur de la fleche. La
   couche unie qui assurait sa lisibilite masquait alors la photo du debut a la
   fin. On inverse la methode : au lieu d'opacifier le voile, on plafonne la
   luminosite de la photo. Une image dont aucun pixel ne depasse 107 porte deja
   le blanc a plus de 5:1 ; le voile n'a plus qu'a teinter, et peut donc
   s'alleger jusqu'a laisser transparaitre l'image derriere le texte.
   Pire cas mesure, photo entierement blanche sous le bronze, la plus claire des
   trois teintes : 4,64:1 pour le blanc pur comme pour le blanc adouci a 92 %,
   contre 4,33:1 avec la couche unie precedente. La transparence ameliore donc
   le contraste au lieu de le degrader. */
@media (hover: none) {
  .offer-detail { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
  .offer-media { filter: grayscale(0.55) brightness(0.42); }
  .offer::before {
    opacity: 1;
    background: linear-gradient(to bottom,
      rgba(var(--accent-rgb), 0.74) 0%,
      rgba(var(--accent-rgb), 0.65) 45%,
      rgba(var(--accent-rgb), 0.56) 100%);
  }
  .offer::after { opacity: 0; }
  .offer-head::after { transform: scaleX(1); }

  /* L'article porte tabindex="0" : une simple pression lui donne le focus et
     les regles de survol, plus specifiques, rendraient le voile opaque et la
     photo a pleine luminosite, de facon durable puisque le focus ne se retire
     pas. On les neutralise ici, ou le survol n'existe pas. */
  .offer:focus-within::after { opacity: 0; }
  .offer:focus-within .offer-media {
    transform: none;
    filter: grayscale(0.55) brightness(0.42);
  }
}

/* ---- Chevrons emboîtés à partir de 1024px ----
   La pointe est profonde : l'arête devient franchement diagonale et la
   flèche se lit comme une flèche, non comme une carte entaillée. */

@media (min-width: 1024px) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }

  .offer {
    --pointe: 58px;
    --ecart: 10px;
    /* Les retraits doivent dépasser la profondeur de la pointe, sinon le texte
       entre dans la zone découpée à mi-hauteur. */
    min-height: 420px;
    border-radius: 0;
    padding: 24px 70px 26px 76px;
    clip-path: polygon(
      0 0,
      calc(100% - var(--pointe)) 0,
      100% 50%,
      calc(100% - var(--pointe)) 100%,
      0 100%,
      var(--pointe) 50%);
    margin-left: calc((var(--pointe) - var(--ecart)) * -1);
  }

  /* Première flèche : bord gauche droit, rien ne la précède. */
  .offer-1 {
    margin-left: 0;
    padding-left: 50px;
    clip-path: polygon(
      0 0,
      calc(100% - var(--pointe)) 0,
      100% 50%,
      calc(100% - var(--pointe)) 100%,
      0 100%);
  }
}

@media (min-width: 1200px) {
  .offer { min-height: 378px; padding: 26px 74px 28px 80px; }
  .offer-1 { padding-left: 56px; }
}

/* ---------- Offre : les approfondissements ----------
   Quatre entrées en rangée, un seul panneau de détail. On occupe la largeur
   au lieu d'empiler quatre pavés, et le clic déroule le texte complet. */

.options { margin-top: 88px; }
.options-lead { margin-top: 16px; max-width: 64ch; font-size: 1.02rem; font-weight: 300; color: var(--text-soft); }

.opt { margin-top: 36px; }

/* ---------- Les approfondissements ----------
   Deux mises en forme écartées avant celle-ci : une rangée de quatre cartes
   identiques, puis un moyeu et ses rayons. La première relevait du kit de
   cartes retiré partout ailleurs ; la seconde imposait des libellés dans les
   angles, ce qu'un intitulé de deux lignes ne supporte pas.

   Ces quatre options ne sont ni une suite ni un choix exclusif : ce sont
   quatre compléments indépendants. Un tableau de deux sur deux le dit mieux
   qu'un sélecteur, et supprime la question de savoir lequel est ouvert.

   Aucun cadre, aucune ombre, aucun rayon : seuls des filets séparent les
   quatre entrées, comme dans l'index des secteurs et dans l'échange. */

.appro {
  display: grid;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 820px) {
  .appro {
    grid-template-columns: 1fr 1fr;
    column-gap: 58px;
  }

  /* Le filet du haut est déjà posé sur le conteneur : les deux premières
     entrées ne doivent pas le doubler. */
  .appro-1, .appro-2 { border-top: 0; }
}

.appro-item {
  padding: 28px 0 30px;
  border-top: 1px solid var(--hairline);
}

@media (min-width: 820px) {
  .appro-item { padding: 30px 0 34px; }
}

/* Une bande photographique ouvre chaque entrée : la section n'offrait que du
   texte sur fond clair, et quatre blocs identiques y paraissaient vides.
   L'image illustre la question posée juste en dessous, elle ne la répète pas.

   Pas de cadre, pas de rayon, pas d'ombre : la bande touche les bords de sa
   colonne. C'est ce qui la distingue d'une carte, motif ecarté deux fois sur
   cette section. Aucun texte ne passe dessus, le voile n'a donc pas à porter
   de contraste : il sert seulement à faire tenir ensemble quatre
   photographies d'origines différentes. */
.appro-media {
  position: relative;
  margin: 0 0 18px;
  overflow: hidden;
}

.appro-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3.2;
  object-fit: cover;
  filter: grayscale(0.55) brightness(0.62);
}

.appro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 45, 117, 0.25) 0%,
    rgba(0, 45, 117, 0.47) 100%);
}

.appro-item h4 {
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--nsc-navy);
}

/* La question est la voix du dirigeant, comme dans l'échange : même serif,
   même italique, pour qu'on entende la même personne d'une section à l'autre. */
.appro-q {
  margin-top: 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.36;
  color: var(--appro-teinte, var(--nsc-bronze));
}

.appro-1 { --appro-teinte: var(--nsc-bronze); }
.appro-2 { --appro-teinte: var(--nsc-bronze); }
.appro-3 { --appro-teinte: var(--nsc-royal); }
.appro-4 { --appro-teinte: var(--nsc-navy); }

.appro-item p:last-child {
  margin-top: 13px;
  font-size: 0.98rem;
  line-height: 1.66;
  color: var(--text-soft);
}

.pricing-note { margin-top: 30px; font-size: 0.93rem; font-style: italic; color: var(--text-soft); }

/* ---------- Pourquoi NSC : trois situations à ouvrir ----------
   Trois colonnes plutôt que trois bandes : la section occupe la largeur au
   lieu de s'étirer. La réponse se déplie au clic, dans une hauteur déjà
   réservée pour qu'aucune ligne ne saute. */

/* ---------- L'échange ----------
   Le contenu est un dialogue : le client parle, le cabinet répond. Il tenait
   dans trois cartes identiques, bord arrondi, filet coloré en tête et bouton
   « + », soit le motif de FAQ le plus répandu du web. Trois boîtes côte à côte
   n'ont rien dit de ce rapport, et le repli cachait précisément les réponses
   qui font la démonstration.

   Les deux voix se font maintenant face, une situation par ligne : la parole
   du client à gauche, dans le serif du site, et la réponse à droite, marquée
   d'un filet. Les réponses tiennent en deux phrases, rien ne justifiait de les
   masquer derrière un clic. */

.echanges { margin-top: 44px; }

/* Chaque situation prend un cran de la rampe. Le bronze, et non l'or, est le
   premier ton à passer le seuil de lisibilité sur blanc. */
.echange-1 { --situation: var(--nsc-bronze); }
.echange-2 { --situation: var(--nsc-royal); }
.echange-3 { --situation: var(--nsc-navy); }

.echange {
  display: grid;
  gap: 20px;
  padding: 38px 0;
  border-top: 1px solid var(--hairline);
}

.echange:last-child { border-bottom: 1px solid var(--hairline); }

@media (min-width: 900px) {
  .echange {
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 44px 0;
  }
}

.echange-voix {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.32rem, 2.5vw, 1.72rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.34;
  color: var(--nsc-navy);
}

/* Le filet marque la seconde voix : on voit qu'on répond, sans l'écrire. */
.echange-reponse {
  padding-left: 24px;
  border-left: 2px solid var(--situation);
}

.echange-acte {
  margin: 0 0 9px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--situation);
}

.echange-reponse p + p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--text-soft);
}

/* ---------- Bande de rupture ---------- */

.chapter { position: relative; padding-block: 76px; overflow: hidden; }
.chapter-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 45, 117, 0.82) 0%, rgba(0, 45, 117, 0.46) 100%);
}

.chapter-inner { position: relative; z-index: 2; max-width: 980px; }

.chapter-title {
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--white);
}

.chapter-text {
  margin-top: 24px;
  max-width: 60ch;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 1024px) { .chapter { padding-block: 132px; } }

/* ---------- Offre : bloc accompagnement ---------- */

.support { margin-top: 88px; display: grid; gap: 32px; align-items: center; }

@media (min-width: 900px) {
  .support { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.support-media { margin: 0; border-radius: var(--radius); overflow: hidden; }
.support-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.support-copy p { margin-top: 18px; font-size: 1rem; color: var(--text-soft); }
.support-copy p:last-child { color: var(--nsc-navy); font-style: italic; font-weight: 300; padding-bottom: 4px; }

/* ---------- Appel à l'action ---------- */

.cta { position: relative; padding-block: var(--pad-section); overflow: hidden; }
.cta-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 45, 117, 0.78) 0%, rgba(0, 45, 117, 0.52) 100%);
}

.cta-inner { position: relative; z-index: 2; display: grid; gap: 44px; }

/* Alignées par le haut : centrée sur un formulaire plus haut, la colonne de
   texte descendait de 250px et le titre disparaissait sous l'en-tête à
   l'arrivée par le menu. */
@media (min-width: 1024px) { .cta-inner { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }

.cta-title {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--white);
}

.cta-text { margin-top: 22px; max-width: 46ch; font-size: 1.05rem; font-weight: 300; color: rgba(255, 255, 255, 0.92); }

.cta-contact { margin-top: 32px; display: grid; gap: 4px; }
.cta-contact li { display: flex; align-items: center; gap: 12px; padding-block: 8px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); }
.cta-contact i { font-size: 1.2rem; color: var(--nsc-gold); }
.cta-contact a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Formulaire */

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  border-top: 2px solid transparent;
  padding: 32px 26px 34px;
  position: relative;
}

.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nsc-gradient);
  border-radius: var(--radius) var(--radius) 0 0;
}

@media (min-width: 768px) { .form-card { padding: 40px 36px 42px; } }

.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field-row { display: grid; gap: 20px; }

@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, 1fr); } }

.field label { font-size: 0.85rem; font-weight: 600; color: var(--nsc-navy); }

.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid rgba(0, 45, 117, 0.28);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--text);
  transition: border-color 0.25s var(--ease);
}

.field input:hover, .field textarea:hover { border-color: var(--nsc-royal); }
.field textarea { resize: vertical; min-height: 110px; }

.field .hint { font-size: 0.8rem; color: var(--text-soft); }
.field .error { font-size: 0.8rem; font-weight: 500; color: var(--stop); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: var(--stop); }

/* Piege a robots. Deporte hors cadre et non masque : un automate qui lit le
   style ignore volontiers display:none, mais remplit ce qu'il croit visible.
   aria-hidden et tabindex le retirent du clavier et des lecteurs d'ecran. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 16px; font-size: 0.9rem; min-height: 1.2em; }
.form-status.is-ok { color: var(--go); }
.form-status.is-error { color: var(--stop); }

/* ---------- Pied de page ---------- */

.site-footer { background: var(--nsc-navy); color: rgba(255, 255, 255, 0.82); padding-top: 72px; }

.footer-inner { display: grid; gap: 40px; padding-bottom: 56px; }

@media (min-width: 768px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; } }

/* La version sans fond, sur le marine du pied de page. Contrairement a
   l ancien logo, celui-ci ne porte que "NSC" : le logotype texte reprend donc
   le nom complet en dessous, sans quoi "Strategy" disparaitrait du pied de
   page. */
.footer-logo-img { width: auto; height: 96px; max-width: 260px; object-fit: contain; margin-bottom: 14px; }

/* Sur fond marine, le degrade bronze passerait sous le seuil de contraste :
   "Strategy" repasse en or plein, qui tient 5,8:1. */
.site-footer .brand-word {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--nsc-gold);
  font-size: 1.25rem;
}
/* Le logotype du pied de page : sur marine, le marine du .brand-mark serait
   invisible. Le blanc tient 13,6:1, l or de "Strategy" 5,8:1. */
.footer-lockup { margin-top: 2px; }
.site-footer .brand-mark { color: var(--white); }

.footer-signature { margin-top: 10px; font-size: 0.88rem; font-style: italic; font-weight: 300; color: var(--nsc-gold); }

.site-footer h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }

/* Les liens de pied de page ne faisaient que 18px de haut : sous le seuil
   tactile. Le retrait vertical les porte a 40px sans changer le rythme. */
.site-footer ul { display: grid; gap: 0; }
.site-footer li a { display: inline-block; padding-block: 11px; }
.site-footer a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--nsc-gold); text-decoration: underline; text-underline-offset: 4px; }
.footer-contact p { font-size: 0.92rem; word-break: break-word; }
.footer-contact p a { display: inline-block; padding-block: 11px; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-block: 24px; }
.footer-bottom p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

/* ---------- Ajustements petit écran ----------
   Les libellés les plus fins descendaient sous 12px : difficilement lisibles
   sur téléphone. */

@media (max-width: 767px) {
  .eyebrow { font-size: 0.78rem; }
  .offer-duration { font-size: 0.8rem; }
  .section-sign { font-size: 0.72rem; margin-top: 48px; }
  .sources { font-size: 0.82rem; margin-top: 36px; }
  .matrix caption { font-size: 0.82rem; }
  .field .hint, .field .error { font-size: 0.85rem; }
  .footer-bottom p { font-size: 0.85rem; }
  .milestone-num { font-size: 1.05rem; }
}

/* ---------- Apparitions au défilement ----------

   Un seul motif, décliné : fondu, remontée courte et netteté qui revient.
   Le flou est ce qui rend l'entrée douce plutôt que mécanique ; il se termine
   sur `filter: none` et non sur `blur(0)`, pour ne laisser derrière lui aucun
   bloc de rendu isolé.

   L'état masqué est porté par `.anim`, que seul le script ajoute : sans
   JavaScript, rien n'est jamais caché. Le script décide aussi, d'après la
   hauteur mesurée, si un bloc entre d'un tenant (`.cascade` pour ses
   éléments) ou s'il laisse entrer ses éléments un à un (`.traverse`). */

:root { --entree: cubic-bezier(0.22, 0.61, 0.36, 1); }

.anim .reveal,
.anim .reveal-item { opacity: 0; }

.anim .reveal.is-visible,
.anim .reveal-item.is-visible { animation: entree 0.68s var(--entree) both; }

/* Bloc plus haut qu'un écran : il ne bouge pas, ses éléments s'en chargent. */
.anim .reveal.traverse { opacity: 1; animation: none; }

/* Bloc qui tient dans l'écran : ses éléments entrent en séquence.
   Le pas est court, 80 ms : au-delà, l'attente devient perceptible et
   l'ensemble paraît lent au lieu de paraître fluide. */
.anim .reveal.cascade.is-visible { opacity: 1; animation: none; }
.anim .reveal.cascade.is-visible > * { animation: entree 0.64s var(--entree) both; }
.anim .cascade.is-visible > *:nth-child(1) { animation-delay: 0.02s; }
.anim .cascade.is-visible > *:nth-child(2) { animation-delay: 0.09s; }
.anim .cascade.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.anim .cascade.is-visible > *:nth-child(4) { animation-delay: 0.23s; }
.anim .cascade.is-visible > *:nth-child(5) { animation-delay: 0.30s; }
.anim .cascade.is-visible > *:nth-child(6) { animation-delay: 0.37s; }

@keyframes entree {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  45%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Le filet de section se trace de gauche à droite, après le titre. */
.anim .section-head.cascade.is-visible > .rule {
  transform-origin: left;
  animation: trait 0.78s var(--entree) 0.12s both;
}

@keyframes trait {
  from { opacity: 1; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* Les photographies se posent plus lentement que le texte : un léger retrait
   d'échelle, qui donne à l'image le poids que le texte n'a pas. */
.anim .support-media.is-visible > img,
.anim .founder-context.is-visible > img,
.anim .support.cascade.is-visible > .support-media > img {
  animation: pose 1.05s var(--entree) both;
}

@keyframes pose {
  from { transform: scale(1.055); }
  to   { transform: none; }
}

/* Les lignes de la matrice se posent l'une après l'autre. */
.anim .matrix-block.is-visible .matrix tbody tr { animation: entree 0.5s var(--entree) both; }
.anim .matrix-block.is-visible .matrix tbody tr:nth-child(1) { animation-delay: 0.22s; }
.anim .matrix-block.is-visible .matrix tbody tr:nth-child(2) { animation-delay: 0.28s; }
.anim .matrix-block.is-visible .matrix tbody tr:nth-child(3) { animation-delay: 0.34s; }
.anim .matrix-block.is-visible .matrix tbody tr:nth-child(4) { animation-delay: 0.40s; }
.anim .matrix-block.is-visible .matrix tbody tr:nth-child(5) { animation-delay: 0.46s; }

/* Le hero s'ouvre au chargement, dans l'ordre de lecture du message. */
.anim .hero-title, .anim .hero-sub, .anim .hero-actions {
  animation: entree 0.8s var(--entree) both;
}
.anim .hero-title { animation-delay: 0.1s; }
.anim .hero-sub { animation-delay: 0.25s; }
.anim .hero-actions { animation-delay: 0.4s; }
.anim .hero-emblem { animation: embleme 1.1s var(--entree) 0.85s both; }

@keyframes embleme {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

/* Dérive lente des trois photos pleine largeur. Elle donne au défilement une
   profondeur que le reste de la page n'a pas, sans jamais bouger de texte.
   Pilotée par la position dans le champ de vision, donc sans aucun écouteur.
   L'agrandissement de 8 % couvre le déplacement de plus ou moins 4 %. */

@supports (animation-timeline: view()) {
  .anim .hero-media, .anim .chapter-media, .anim .cta-media, .anim .page-hero-media {
    animation: derive linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
}

/* La derive et le flou anime sont les deux postes qui coutent cher a chaque
   image affichee. Sur un ordinateur ils passent inapercus ; sur un telephone,
   ils font tomber des images et le defilement devient saccade. On les retire
   la ou ils coutent le plus et se voient le moins. */
@media (max-width: 899px), (hover: none) {
  .anim .hero-media,
  .anim .chapter-media,
  .anim .cta-media,
  .anim .page-hero-media {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .anim .reveal.is-visible,
  .anim .reveal-item.is-visible,
  .anim .reveal.cascade.is-visible > * { animation-name: entree-sobre; }
}

/* Meme entree, sans le flou : c'est lui qui impose une passe de composition
   supplementaire a chaque image de l'animation. */
@keyframes entree-sobre {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes derive {
  from { transform: translateY(-4%) scale(1.08); }
  to { transform: translateY(4%) scale(1.08); }
}

/* Mouvement réduit : tout est neutralisé, sauf si la relecture a été
   demandée explicitement par ?animations=1, auquel cas `.anim` est posée. */
@media (prefers-reduced-motion: reduce) {
  html:not(.anim) { scroll-behavior: auto; }
  html:not(.anim) .hero-emblem { opacity: 0.5; }
  html:not(.anim) .hero-media,
  html:not(.anim) .chapter-media,
  html:not(.anim) .cta-media,
  html:not(.anim) .page-hero-media { transform: none; animation: none; }
  html:not(.anim) *,
  html:not(.anim) *::before,
  html:not(.anim) *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .mobile-panel, .panel-scrim, .hero-actions { display: none; }
  .reveal, .reveal-item { opacity: 1; transform: none; filter: none; }
}

/* ---------- Pages légales ---------- */

.legal { padding-top: 64px; }
.legal .rule { margin-bottom: 44px; }
.legal-body { max-width: 72ch; }

.legal-body h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--nsc-navy);
}

/* Deux paragraphes consecutifs se touchaient : la page n'en comptait aucun
   avant que la politique de confidentialite n'en enchaine. */
.legal-body p { font-size: 1rem; color: var(--text); }
.legal-body p + p { margin-top: 14px; }
.legal-body a { color: var(--nsc-royal); text-underline-offset: 3px; }

/* La liste des sous-traitants. Un filet or remplace la puce ronde du
   navigateur, qui jurerait avec les filets employes partout ailleurs. */
.legal-body ul { list-style: none; margin: 14px 0 0; padding: 0; }

.legal-body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
}

.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 11px;
  height: 1px;
  background: var(--nsc-gold);
}

.legal-body li strong { font-weight: 600; color: var(--nsc-navy); }

.legal-body code {
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}

/* =============================================================================
   PAGE SECTEURS ET MARCHÉS COUVERTS
   ========================================================================== */

/* ---------- Ouverture chiffrée ----------
   Trois cartes alignées auraient fait catalogue. Les trois nombres forment ici
   un seul objet, découpé par deux filets verticaux : on lit une progression,
   du secteur au marché, et non trois informations indépendantes. */

.couv-tete { padding-bottom: 0; }
.couv-intro { max-width: 68ch; }

.chiffres {
  position: relative;
  display: grid;
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

/* Le filet supérieur porte le dégradé signature sur toute la largeur. */
.chiffres::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nsc-gradient);
}

@media (min-width: 820px) {
  .chiffres { grid-template-columns: repeat(3, 1fr); }
}

.chiffre { padding: 40px 34px 38px; border-top: 1px solid var(--hairline); }
.chiffre:first-child { border-top: 0; }

@media (min-width: 820px) {
  .chiffre { border-top: 0; border-left: 1px solid var(--hairline); }
  .chiffre:first-child { border-left: 0; }
}

.chiffre-nb {
  font-family: "Spectral", Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--nsc-navy);
}

.chiffre-nom {
  margin-top: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nsc-bronze);
}

.chiffre-sens {
  margin-top: 18px;
  max-width: 42ch;
  font-size: 0.97rem;
  color: var(--text-soft);
}

/* ---------- Grille des secteurs ----------
   Les traits sous chaque nom donnent la profondeur du secteur avant même la
   lecture du nombre : cinq, six ou sept, on compare sans lire. */

/* ---------- Le rail des secteurs ----------
   Quatre travers de la version precedente, nommes puis retires.

   1. Les treize photographies disparaissaient sous le meme voile marine :
      ble, portant de vetements, baies de serveurs et carriere devenaient
      quatre rectangles bleus interchangeables. Le titre quitte l'image, donc
      le voile n'a plus de contraste a porter : il disparait, et un niveau de
      gris leger suffit a tenir la serie ensemble sans effacer les sujets.

   2. « 6 SOUS-SECTEURS » en capitales espacees et dorees, treize fois. Le
      compte repasse en bas de casse, discret, a sa place de legende.

   3. Un filet sous chaque ligne de la liste. Un seul filet reste, sous le
      titre : il separe la ou il y a quelque chose a separer.

   4. La boite blanche a coin arrondi. Il n'y a plus de boite : l'image, le
      titre et la liste se suivent, et l'ecart seul separe deux secteurs.
      C'est ce qui distingue un rail editorial d'un jeu de cartes. */

.sect-rail {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  padding-bottom: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 45, 117, 0.3) transparent;
}

/* La zone se parcourt au clavier : elle doit montrer qu'elle a le focus. */
.sect-rail:focus-visible { outline: 2px solid var(--nsc-royal); outline-offset: 8px; }

.sect-rail::-webkit-scrollbar { height: 4px; }
.sect-rail::-webkit-scrollbar-track { background: var(--hairline); }
.sect-rail::-webkit-scrollbar-thumb { background: rgba(0, 45, 117, 0.3); }

.sect-carte {
  flex: 0 0 296px;
  scroll-snap-align: start;
}

@media (max-width: 719px) {
  .sect-carte { flex-basis: min(78vw, 290px); }
}

/* Le niveau de gris est leger : il accorde treize photographies d'origines
   differentes sans les vider de leur sujet. */
.sect-carte-vue {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.38) contrast(1.03);
}

/* Le serif du site, celui des citations : c'est la voix editoriale, et elle
   distingue le nom du secteur de la liste qui le suit, en sans. */
.sect-carte h3 {
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  font-family: Spectral, "Cormorant Garamond", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--nsc-navy);
}

.sect-carte-compte {
  margin-top: 11px;
  font-size: 0.86rem;
  color: var(--text-soft);
}

.sect-carte-liste {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.sect-carte-liste li {
  padding: 7px 0;
  font-size: 0.93rem;
  line-height: 1.44;
  color: var(--text);
}

/* ---------- Couverture géographique ----------
   Une bande unique portant le dégradé, découpée au prorata des volumes : les
   proportions se lisent d'un coup, sans graphique rapporté. */

.geo-tete { max-width: 66ch; }
.geo-lead { margin-top: 20px; font-size: 1.02rem; color: var(--text-soft); }

/* La bande degradee disait les proportions, pas les lieux. La carte dit les
   deux : la position situe la region, l'aire du disque donne le volume.

   Elle est servie en image, non en SVG inline : 27 Ko qui se mettent en cache
   une semaine au lieu d'alourdir chaque chargement de la page. La conversion
   de la topologie se fait hors ligne, donc aucune bibliotheque et aucun
   fichier de donnees ne partent vers le navigateur. */
.geo-carte {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 46px;
}

.geo-liste {
  list-style: none;
  margin-top: 30px;
  display: grid;
  gap: 0 48px;
}

@media (min-width: 760px) { .geo-liste { grid-template-columns: 1fr 1fr; } }

.geo-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}

.geo-nom { font-size: 0.97rem; color: var(--nsc-navy); }

.geo-nb {
  font-family: "Spectral", Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: 1.15rem;
  font-weight: 300;
  color: var(--nsc-bronze);
}

.geo-note { margin-top: 26px; max-width: 70ch; font-size: 0.95rem; color: var(--text-soft); }

/* ---------- Bloc de méthode ----------
   Le propos tient à gauche, les quatre couches défilent à droite : la colonne
   de texte reste en vue pendant qu'on parcourt le détail. */

.methode-inner { display: grid; gap: 44px; }

@media (min-width: 1000px) {
  .methode-inner { grid-template-columns: 0.85fr 1fr; gap: 72px; align-items: start; }
  .methode-copy { position: sticky; top: 118px; }
}

.methode-copy p { margin-top: 18px; max-width: 54ch; font-size: 1rem; color: var(--text-soft); }
.methode-chute { color: var(--nsc-navy); font-style: italic; font-weight: 300; padding-bottom: 4px; }

.couches { list-style: none; }

.couches li {
  position: relative;
  padding: 26px 0 26px 66px;
  border-top: 1px solid var(--hairline);
}
.couches li:first-child { border-top: 0; padding-top: 0; }

.couche-num {
  position: absolute;
  left: 0;
  top: 26px;
  font-family: "Spectral", Georgia, serif;
  font-variant-numeric: lining-nums;
  font-size: 1.5rem;
  font-weight: 200;
  color: var(--nsc-bronze);
}
.couches li:first-child .couche-num { top: 0; }

.couches h3 { font-size: 1.05rem; font-weight: 600; color: var(--nsc-navy); }
.couches p { margin-top: 10px; max-width: 58ch; font-size: 0.97rem; color: var(--text-soft); }

/* ---------- Bande de suite ---------- */

.suite { padding-block: 72px; }

.suite-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 38px 36px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--nsc-bronze);
  border-radius: var(--radius);
}

.suite-title { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 300; letter-spacing: -0.02em; color: var(--nsc-navy); }
.suite-inner p { margin-top: 10px; max-width: 60ch; font-size: 0.98rem; color: var(--text-soft); }

@media (max-width: 640px) {
  .chiffre { padding: 32px 24px 30px; }
  .suite-inner { padding: 30px 24px; }
  .couches li { padding-left: 52px; }

}

/* ---------- Bandeau de titre des pages intérieures ----------
   Même grammaire que le hero de l'accueil, mais à mi-hauteur : une page
   intérieure ne réclame pas un plein écran avant d'entrer dans son sujet.
   Le texte se pose en bas, d'où un voile dégradé montant plutôt que latéral. */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 52vh, 560px);
  padding-top: 128px;
  padding-bottom: 72px;
  overflow: hidden;
}

.page-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Le voile de marque est allégé ici, sinon la photographie disparaît sous le
   bleu et le bandeau redevient un aplat. Le contraste est reporté sur un scrim
   latéral, dense à gauche sous le texte, presque nul à droite où l'image doit
   rester lisible. Pire cas calculé sur une photo entièrement blanche : 9,7:1
   au bord gauche, 4,7:1 à l'aplomb de la fin du texte. */
.page-hero .veil { background: rgba(0, 45, 117, 0.34); }

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(0, 45, 117, 0.86) 0%,
              rgba(0, 45, 117, 0.48) 56%,
              rgba(0, 45, 117, 0.10) 100%);
}

.page-hero-inner { position: relative; z-index: 2; }

/* Surtitre sur photographie : l'or plafonne a 3,4:1 sur le voile mobile, sous
   le seuil des petits textes. Il reste donc au filet degrade, decoratif, et le
   surtitre passe en blanc legerement retenu. */
.eyebrow-clair { color: rgba(255, 255, 255, 0.88); }

.page-hero-title {
  margin-top: 16px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 18ch;
}

.page-hero-inner .rule { margin-top: 24px; }

.page-hero-lead {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.93);
}

@media (min-width: 900px) {
  .page-hero { padding-bottom: 136px; }
}

/* En dessous, le texte occupe toute la largeur : un scrim lateral ne le
   couvrirait plus. Il devient vertical et le voile se renforce.
   Pire cas sur photographie blanche : 7,5:1 au point le plus clair. */
@media (max-width: 899px) {
  .page-hero .veil { background: rgba(0, 45, 117, 0.42); }
  .page-hero::after {
    background: linear-gradient(to top,
                rgba(0, 45, 117, 0.88) 0%,
                rgba(0, 45, 117, 0.78) 55%,
                rgba(0, 45, 117, 0.68) 100%);
  }
}

/* La bande chiffrée chevauche la photo : elle appartient au titre autant qu'à
   la page, et la jonction cesse d'être une simple ligne de démarcation. */
.couv-tete { padding-top: 0; }
.chiffres { position: relative; z-index: 2; margin-top: 40px; }

@media (min-width: 900px) {
  .chiffres { margin-top: -78px; box-shadow: 0 18px 44px rgba(0, 45, 117, 0.1); }
}

/* ---------- Sélecteur de langue ----------
   Deux liens plutôt qu'une liste déroulante : avec deux langues, le menu
   coûterait un clic de plus pour la même information. La langue courante est
   marquée mais reste cliquable, ce qui évite un lien mort dans la barre. */

.lang-switch { display: none; align-items: center; margin-left: 4px; }

@media (min-width: 1024px) { .lang-switch { display: inline-flex; } }

/* Les pages legales n'ont pas de panneau mobile : le selecteur y reste
   visible a toutes les largeurs, sans quoi il n'y serait nulle part. */
body:not(:has(#mobile-panel)) .lang-switch { display: inline-flex; }

.lang-switch a {
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.lang-switch a + a { border-left: 1px solid var(--hairline); }
.lang-switch a[aria-current] { color: var(--nsc-navy); }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--nsc-bronze); }

/* Dans le panneau mobile, les langues s'écrivent en toutes lettres : la place
   ne manque pas et deux capitales isolées y seraient plus obscures qu'utiles. */

.panel-lang {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.panel-lang a {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-soft);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.panel-lang a[aria-current] {
  border-color: rgba(0, 45, 117, 0.5);
  color: var(--nsc-navy);
  font-weight: 600;
}

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


/* ---------- Fenetre de confirmation ----------

   Fond marine plutot que blanc : la page derriere elle est deja blanche, et
   une carte blanche sur voile bleu se lit comme une boite de dialogue de
   systeme. Le marine la rattache au site et lui donne du poids.

   Elle ne s'ouvre qu'apres un envoi reussi. Le voile arrete le defilement
   derriere elle, et la mise au point passe au bouton de fermeture : sans cela
   le clavier resterait derriere la fenetre, sur un formulaire devenu inerte. */

.modale {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modale[hidden] { display: none; }

.modale-voile {
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 54, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modale-boite {
  position: relative;
  width: min(100%, 520px);
  padding: 52px 48px 40px;
  /* Marine d'encre plutot qu'un bleu franc. Trois couches : une descente
     diagonale du marine de la charte vers un ton plus profond, une lueur
     rasante en haut a droite, et la trame de points du site. L'ensemble se
     regarde de loin comme une surface unie, et de pres comme une matiere. */
  background:
    radial-gradient(120% 90% at 82% 4%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(158deg, #01275F 0%, #001736 100%);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px rgba(0, 12, 32, 0.52);
  overflow: hidden;
}

/* La trame, tres en retrait : elle se devine, elle ne se lit pas. */
.modale-boite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Le contenu repasse devant la trame. */
.modale-boite > * { position: relative; z-index: 1; }

/* Le degrade signature, pleine largeur, au bord superieur. */
.modale-filet {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nsc-gradient);
}

/* Sceau de confirmation : un trait fin, pas une pastille verte. */
.modale-sceau {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(212, 172, 13, 0.55);
  border-radius: 50%;
  color: var(--nsc-gold);
  font-size: 1.5rem;
}

.modale-surtitre {
  margin-top: 26px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nsc-gold);
}

.modale-titre {
  margin-top: 14px;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--white);
}

.modale-texte {
  margin-top: 18px;
  max-width: 42ch;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.modale-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.modale-signature {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.34);
}

.modale:not([hidden]) .modale-voile { animation: fondu 0.36s var(--entree) both; }
.modale:not([hidden]) .modale-boite { animation: fenetre 0.5s var(--entree) both; }

@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

@keyframes fenetre {
  from { opacity: 0; transform: translateY(18px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .modale-boite { padding: 40px 28px 32px; }
  .modale-pied { flex-direction: column; align-items: flex-start; gap: 18px; }
  .modale-fermer { width: 100%; text-align: center; }
}

/* La preference de mouvement reduit vaut aussi ici. */
@media (prefers-reduced-motion: reduce) {
  .modale:not([hidden]) .modale-voile,
  .modale:not([hidden]) .modale-boite { animation: none; }
}