/* Azimut Agency, site de l'agence
   Mot directeur : la démonstration.
   Navy #001A45 pour les moments d'affirmation, ivoire pour la lecture,
   jaune #F9C602 réservé à trois usages : les chiffres, les filets, le bouton. */

:root {
  --navy: #001A45;
  --navy-deep: #00112E;
  --navy-line: rgba(255, 255, 255, 0.14);
  --yellow: #F9C602;
  --yellow-deep: #C99C00;
  --ivory: #F2EDE2;
  --ivory-dim: #E7E0D2;
  --ink: #0E1420;
  --ink-soft: #4C566A;
  --white: #FFFFFF;

  --font-title: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;

  --container: 1384px;
  --header-h: 88px;
  --radius: 3px;
  --radius-media: 10px;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --section-y: clamp(5rem, 10vw, 9.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 5.9vw, 5.1rem); line-height: 1.02; }
h2 { font-size: clamp(2.05rem, 4.1vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }

p { margin: 0 0 1.2rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }
.measure { max-width: 36rem; }

.eyebrow {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }
.on-navy .eyebrow, .hero .eyebrow { color: var(--yellow); }

/* L'accroche est en serif légère, parfois en italique : c'est elle qui donne
   le relief entre le titre et le texte courant. */
.lead {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(1.22rem, 1.7vw, 1.55rem);
  line-height: 1.42;
  letter-spacing: -0.004em;
  color: var(--ink);
}
.lead em, .lead i { font-style: italic; }
.on-navy .lead, .on-deep .lead, .hero .lead { color: rgba(255, 255, 255, 0.92); }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 300; }
p em, li em { font-style: italic; }
strong { font-weight: 500; }
.muted { color: var(--ink-soft); }
.on-navy .muted { color: rgba(255, 255, 255, 0.64); }

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

.section-services { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.included { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.on-navy, .on-deep { color: rgba(255, 255, 255, 0.84); }
.on-navy { background: var(--navy); }
.on-deep { background: var(--navy-deep); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4,
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep h4 { color: var(--white); }
.on-deep .eyebrow { color: var(--yellow); }
.on-deep .muted { color: rgba(255, 255, 255, 0.66); }
.on-deep .tick-list li { border-color: var(--navy-line); }
.on-white { background: var(--white); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn-primary { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }
.btn-primary:hover { background: transparent; color: var(--yellow); }
.on-light .btn-primary:hover { color: var(--navy); border-color: var(--navy); }
/* Le bouton fantôme se remplit de gauche à droite, et son texte bascule en
   bleu à mesure que le blanc arrive. Le voile est un pseudo-élément mis à
   l'échelle plutôt qu'une largeur animée : la mise à l'échelle se joue sur
   le compositeur, donc sans recalcul de mise en page à chaque image. */
.btn-ghost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.38);
  color: var(--white);
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.btn-ghost:hover { border-color: var(--white); color: var(--navy); }
.btn-ghost:hover::before { transform: scaleX(1); }
/* Ces deux variantes étaient employées dans le formulaire et sur l'accueil
   sans avoir jamais été définies : les boutons sortaient sans bordure. */
.btn-outline-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--navy);
  border-color: rgba(0, 26, 69, 0.45);
}
/* Même geste que le bouton fantôme du hero : le fond arrive de la gauche et
   le texte bascule au passage, plutôt qu'un aplat qui apparaît d'un coup. */
.btn-outline-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease);
}
.btn-outline-dark:hover { border-color: var(--navy); color: var(--white); }
.btn-outline-dark:hover::before { transform: scaleX(1); }
.btn-dark { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-dark:hover { background: transparent; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--yellow-deep);
  transition: gap 0.35s var(--ease);
}
.on-navy .link-arrow { color: var(--yellow); }
.link-arrow::after { content: "\2192"; transition: transform 0.35s var(--ease); }
.link-arrow:hover { gap: 0.9rem; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height 0.45s var(--ease), background 0.45s var(--ease), backdrop-filter 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -110px 0;
  background: linear-gradient(to bottom, rgba(0, 12, 32, 0.4) 0%, rgba(0, 12, 32, 0.37) 14%, rgba(0, 12, 32, 0.32) 27%, rgba(0, 12, 32, 0.26) 39%, rgba(0, 12, 32, 0.2) 50%, rgba(0, 12, 32, 0.14) 61%, rgba(0, 12, 32, 0.09) 72%, rgba(0, 12, 32, 0.05) 82%, rgba(0, 12, 32, 0.02) 91%, rgba(0, 12, 32, 0) 100%);
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.site-header.is-stuck {
  height: 70px;
  background: rgba(0, 17, 46, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--navy-line);
}
.site-header.is-stuck::before { opacity: 0; }

.header-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 3rem, var(--container));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.header-nav { display: flex; align-items: center; gap: 1.8rem; }

.header-logo { display: block; }
.header-logo img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: height 0.45s var(--ease);
}
.site-header.is-stuck .header-logo img { height: 28px; }

.nav-link {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.84);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--yellow);
  transition: width 0.4s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--white); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

.lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.lang a { text-decoration: none; padding: 13px 5px; }
.lang a[aria-current="true"] { color: var(--white); border-bottom: 1px solid var(--yellow); }
.lang-sep { opacity: 0.4; }

.header-cta { padding: 0.78rem 1.4rem; font-size: 0.68rem; }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 0; background: none; cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
}
.burger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: transform 0.35s var(--ease), opacity 0.2s var(--ease); }
/* Menu ouvert : l'en-tête devient opaque, sinon le contenu du tiroir qui
   défile dessous apparaît à travers, derrière le logo. */
body.is-open .site-header { background: var(--navy-deep); }
body.is-open .site-header::before { opacity: 0; }
body.is-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.is-open .burger span:nth-child(2) { opacity: 0; }
body.is-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Le tiroir était centré verticalement. Depuis que les quatre services y
   ont leurs liens, son contenu dépasse la hauteur d'un téléphone : un bloc
   centré qui déborde se décale vers le haut, et « Accueil » passait sous le
   logo sans qu'on puisse le faire redescendre. Il part donc du haut, sous
   l'en-tête, et défile en interne quand il est plus grand que l'écran. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 7rem 2rem 3rem;
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0.6s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a.drawer-link {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  text-decoration: none;
  color: var(--white);
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--navy-line);
}
.drawer-foot { margin-top: 2.2rem; display: grid; gap: 1.2rem; justify-items: start; }
.drawer-lang { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); margin-left: -10px; }
.drawer-lang a { padding: 14px 10px; text-decoration: none; }
.drawer-lang a[aria-current="true"] { color: var(--white); border-bottom: 1px solid var(--yellow); }
.drawer-foot .btn { width: 100%; }
.drawer-foot a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.9rem; }

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

.hero {
  position: relative;
  /* Plein écran, sans plafond : le hero occupe la hauteur réelle de l'écran.
     svh évite le saut au moment où la barre du navigateur se rétracte. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(1.6rem, 2.4vw, 2.2rem);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
/* Deux voiles : un vertical pour le header et le bas de page, un horizontal
   qui creuse la colonne de gauche où se pose le texte. Contrôlé en capture,
   pas au jugé : les traits fins de la serif blanche disparaissent sinon sur
   les zones claires de la photo (lustres, fenêtres). */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 26, 69, 0.84) 0%, rgba(0, 26, 69, 0.68) 38%, rgba(0, 26, 69, 0.32) 70%, rgba(0, 26, 69, 0.4) 100%),
    /* La dernière étape tombe exactement sur le navy de la section suivante,
       sinon les deux bleus se touchent et dessinent une bande visible. */
    linear-gradient(to bottom, rgba(0, 26, 69, 0.42) 0%, rgba(0, 26, 69, 0.06) 42%, rgba(0, 26, 69, 0.62) 82%, rgba(0, 26, 69, 1) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero h1 {
  color: var(--white);
  max-width: 17ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 26px rgba(0, 0, 0, 0.5);
}
.hero .lead {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 1.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 14px rgba(0, 0, 0, 0.45);
}
.hero .eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.hero .lead, .hero .btn-row, .hero .trust-bar, .hero .eyebrow, .hero h1 { will-change: transform, opacity; }

.page-hero {
  min-height: min(56vh, 620px);
  /* De la place sous le texte pour que le fondu vers le bloc suivant tienne
     dans le vide, et non par-dessus le chapeau. */
  padding-bottom: clamp(4.5rem, 7vw, 7.5rem);
}
.page-hero .container > * { animation: bannerIn 0.45s var(--ease) both; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-hero h1 { max-width: 20ch; }

/* ---------- Cadre navigateur ---------- */

.proof { position: relative; }
.proof-frame { margin-top: clamp(-9rem, -7vw, -4rem); position: relative; z-index: 4; }

.browser {
  border-radius: var(--radius-media);
  overflow: hidden;
  background: #061A38;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 50px 110px -45px rgba(0, 0, 0, 0.85);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.1rem;
  background: rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.browser-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); flex: none; }
.browser-url {
  margin-left: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 0.28rem 0.95rem;
}
/* Aucune hauteur imposée : la capture s'affiche à sa proportion réelle. */
.browser-viewport { display: block; }
.browser-viewport img { width: 100%; height: auto; display: block; }

.figure-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: baseline;
  margin-top: 1.3rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.figure-caption strong { font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.figure-caption a { color: var(--yellow); text-decoration: none; border-bottom: 1px solid rgba(249, 198, 2, 0.35); }

/* ---------- Chiffres ---------- */

/* Le tableau des garanties est posé sur une section bleue. En bleu sur bleu,
   il se fondait dans le fond et ne se lisait plus comme un bloc : il passe en
   ivoire, ce qui en fait la seule zone claire de la section, donc la première
   que l'oeil trouve. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0, 26, 69, 0.16);
  border-radius: var(--radius-media);
  /* Pas de découpe : la case survolée grandit et doit pouvoir dépasser. Ce
     sont donc les cases des extrémités qui portent les coins arrondis. */
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
}
.stat:first-child { border-radius: var(--radius-media) 0 0 var(--radius-media); }
.stat:last-child { border-radius: 0 var(--radius-media) var(--radius-media) 0; }
.stat { background: var(--ivory); padding: clamp(2rem, 3.4vw, 2.9rem); }
.stat > .stat-figure { color: var(--navy); }
.stat-figure {
  font-family: var(--font-title);
  font-size: clamp(2.8rem, 4.6vw, 4.1rem);
  line-height: 1;
  /* Le bleu ne vaut que dans le tableau ivoire. Le même chiffre sert ailleurs
     sur fond bleu (les résultats de Passiflorart), où il doit rester clair :
     la couleur est donc posée sur la case, pas sur le chiffre. */
  color: var(--white);
  letter-spacing: -0.03em;
  margin-bottom: 0.9rem;
}
.stat-figure::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--yellow-deep);
}
.stat p { font-size: 0.93rem; color: var(--ink-soft); }

/* Les cartes de la deuxième année réagissent au survol : elles se soulèvent
   d'un cheveu, leur bord se marque et l'icône avance. Assez pour qu'on sente
   que la carte est vivante, pas assez pour bousculer la grille. */
.after-card {
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.after-card:hover {
  /* L'apparition au défilement laisse un transform en style en ligne sur la
     carte : sans !important, le survol ne peut plus la déplacer du tout. */
  transform: translateY(-6px) scale(1.018) !important;
  border-color: rgba(14, 20, 32, 0.3);
  box-shadow: 0 26px 50px -30px rgba(0, 26, 69, 0.45);
}
.after-card-icon { transition: transform 0.45s var(--ease); }
.after-card:hover .after-card-icon { transform: translateY(-3px) scale(1.06); }

/* Le récit d'origine se lit sur deux colonnes : deux paragraphes d'affilée
   sur toute la largeur feraient des lignes trop longues pour l'oeil. */
/* Le récit tient la colonne de gauche, le résumé et l'origine du nom la
   colonne de droite, l'un en haut et l'autre en bas : les deux colonnes
   commencent et finissent ensemble, au lieu de laisser un trou en bas à
   droite. */
.origin-grid {
  margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}
.origin-side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 4vw, 3.4rem); }
.origin-side .lead { margin: 0; }
.lead-fort { font-weight: 500; color: var(--navy); }
.origin-text p { margin-bottom: 1rem; color: var(--ink-soft); max-width: 60ch; }
.origin-text p:last-child { margin-bottom: 0; }
/* L'origine du nom tient la colonne de droite plutôt qu'une bande sous le
   texte : posée dessous, elle laissait la moitié droite du bloc vide. */
.origin-note {
  margin: 0;
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
  border-left: 2px solid var(--yellow-deep);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  color: var(--navy);
}
@media (max-width: 900px) {
  .origin-grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 2.2rem); }
}

/* ---------- Citation ---------- */

.quote-block { margin-top: clamp(3.5rem, 6vw, 5rem); display: grid; gap: 1.6rem; justify-items: start; }
.quote {
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3.1vw, 2.6rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  max-width: 30ch;
  margin: 0;
  color: var(--white);
}
.quote-source { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

/* ---------- Grilles ---------- */

.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.split-center { align-items: center; }

/* Deux encadrés séparés et arrondis, sur blanc, plutôt qu'un bloc crème
   coupé d'un filet : l'aplat beige soudé faisait daté. Au survol, la carte
   se soulève, son bord se marque en jaune et un filet court en haut. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.service {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(14, 20, 32, 0.1);
  border-radius: var(--radius-media);
  padding: clamp(2rem, 3.4vw, 3rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  box-shadow: 0 1px 2px rgba(0, 26, 69, 0.04);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px; width: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.service:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(201, 156, 0, 0.45);
  box-shadow: 0 24px 48px -28px rgba(0, 26, 69, 0.35);
}
.service:hover::before { transform: scaleX(1); }
.service h3 { transition: color 0.4s var(--ease); }
.service:hover h3 { color: var(--navy); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }
.service-index { font-family: var(--font-title); font-size: 0.95rem; color: var(--yellow-deep); letter-spacing: 0.1em; }
.service h3 { margin: 0; }
.service p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }
.service .link-arrow { margin-top: 0.5rem; }

/* ---------- Listes ---------- */

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* Le puce est posée en absolu : une li en flex transformerait chaque bout de
   texte inline (un <strong> suivi d'une phrase) en élément flex distinct, et
   la ligne se casserait mot par mot. */
.tick-list li {
  position: relative;
  padding: 0.78rem 0 0.78rem 1.5rem;
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(14, 20, 32, 0.1);
}
.on-navy .tick-list li { border-color: var(--navy-line); }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.32rem;
  width: 5px; height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.tick-two { display: block; columns: 2; column-gap: 3.5rem; }
.tick-two li { break-inside: avoid; }

/* ---------- Bande photo ---------- */

.photo-band { position: relative; height: clamp(320px, 46vw, 560px); overflow: hidden; }
.photo-band img { width: 100%; height: 118%; object-fit: cover; position: absolute; top: -9%; left: 0; will-change: transform; }
/* Pas de voile propre sur la bande photo : son ::after sert au fondu vers le
   bloc suivant, et deux règles sur le même pseudo-élément se marchaient
   dessus (le inset: 0 du voile étirait le fondu sur toute la hauteur, ce qui
   noircissait la photo entière). La bande ne porte aucun texte, elle n'a
   donc besoin d'aucun voile. */

/* ---------- Étapes ---------- */

.steps { margin-top: clamp(3rem, 5vw, 4.5rem); border-top: 1px solid rgba(14, 20, 32, 0.14); }
.step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.7rem, 2.8vw, 2.5rem);
  border-bottom: 1px solid rgba(14, 20, 32, 0.14);
  align-items: baseline;
}
.step-index { font-family: var(--font-title); font-size: 1.05rem; color: var(--yellow-deep); }
.step h3 { margin: 0; }
.step p { font-size: 0.98rem; color: var(--ink-soft); margin: 0; }

/* ---------- Portrait ---------- */

.portrait { border-radius: var(--radius-media); overflow: hidden; background: var(--ivory-dim); }
.portrait img { width: 100%; height: auto; }
.portrait-placeholder {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px dashed rgba(14, 20, 32, 0.25);
}
.signature { font-family: var(--font-title); font-size: 1.5rem; margin-top: 2rem; }

/* ---------- FAQ ---------- */

.faq { margin-top: clamp(3rem, 5vw, 4rem); border-top: 1px solid rgba(14, 20, 32, 0.14); }
.faq details { border-bottom: 1px solid rgba(14, 20, 32, 0.14); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.5rem;
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--yellow-deep); font-family: var(--font-body); font-size: 1.25rem; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 1.6rem; max-width: 60ch; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Bandeau d'appel ---------- */

.cta-band { text-align: center; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lead { max-width: 46ch; margin-inline: auto; color: rgba(255, 255, 255, 0.72); text-wrap: balance; }
.cta-band .btn-row { justify-content: center; }

.constat-cta {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.constat-cta span { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Le point gratuit ---------- */
.diag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.diag-form {
  background: var(--white);
  border: 1px solid rgba(14, 20, 32, 0.14);
  border-radius: var(--radius-media);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.diag-title { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 1.6rem; }
.diag-texte h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 1.2rem; }
.diag-texte h2 + p, .diag-texte p { color: var(--ink-soft); margin-bottom: 1rem; }
.diag-texte .tick-list { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
@media (max-width: 900px) { .diag-grid { grid-template-columns: 1fr; } }

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

.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.58); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: 0.92rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--navy-line); }
.site-footer img { height: 42px; width: auto; margin-bottom: 1.5rem; }
.site-footer .footer-titre { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 1.2rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.site-footer a { text-decoration: none; transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--yellow); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); }
.footer-bottom p { margin: 0; }

/* ---------- Bandeau cookies ---------- */

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 70;
  width: min(100% - 2rem, 42rem);
  display: none;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-media);
  padding: 1.15rem 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner p { margin: 0; font-size: 0.86rem; flex: 1 1 22rem; }
.cookie-banner a { color: var(--yellow); }

/* ---------- Animations ---------- */

.reveal { opacity: 0; transform: translateY(24px); }
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}
.split-word { display: inline-block; }
.hero h1.is-split, .hero h1 { text-wrap: balance; }
.no-anim .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .header-nav { display: none; }
  .burger { display: flex; margin-right: -10px; }
  .split { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step p { grid-column: 2; }
  .tick-two { columns: 1; }
}

@media (max-width: 760px) {
  :root { --header-h: 74px; --section-y: clamp(3.5rem, 12vw, 5rem); }
  body { font-size: 1rem; }
  .hero { min-height: calc(100svh - 60px); align-items: flex-end; }
  .hero h1 { max-width: none; font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .hero .lead { font-size: 1.02rem; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .stats { grid-template-columns: 1fr; }
  .stat:first-child { border-radius: var(--radius-media) var(--radius-media) 0 0; }
  .stat:last-child { border-radius: 0 0 var(--radius-media) var(--radius-media); }
  .footer-top { grid-template-columns: 1fr; gap: 2.2rem; }
  .proof-frame { margin-top: -3rem; }
  .browser-url { font-size: 0.62rem; }
  /* En colonne, le flex-basis du paragraphe devient une HAUTEUR : sans ce
     flex: none, le bandeau fait 22rem de haut et recouvre le hero. */
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookie-banner p { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ======================================================================
   Composants ajoutés à la refonte du 19/09/2026
   ====================================================================== */

/* ---------- Ligne de progression de lecture ---------- */
.header-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--yellow);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 3;
}
.site-header.is-stuck .header-progress { opacity: 1; }

/* ---------- Hero : masque d'ouverture et dérive lente ---------- */
.hero-media img {
  transform: scale(1.06);
  transform-origin: center 60%;
}
.hero-media.is-ready img { animation: heroDrift 26s ease-in-out infinite alternate; }
/* Le grossissement de 6 % prépare la dérive lente du hero d'accueil. Les
   bannières des pages intérieures ne dérivent pas : le garder revenait à
   afficher leur photo agrandie sans raison, donc plus floue et plus rognée. */
.page-hero .hero-media img { transform: none; }
@keyframes heroDrift {
  from { transform: scale(1.06); }
  to { transform: scale(1.16); }
}

.trust-bar {
  list-style: none;
  margin: clamp(3.2rem, 5.5vw, 4.6rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.6rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  max-width: 62rem;
}
.trust-bar strong { color: var(--white); font-weight: 500; }

/* ---------- Réalisation ---------- */
/* La section prolonge le navy du hero : sans ce resserrage, les deux
   respirations s'additionnent et laissent 240 px de bleu vide. */
.case { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.case-shot { display: block; text-decoration: none; }
.case-shot .browser { display: block; }
.case-shot .browser-bar { display: flex; }
.case-shot .browser-viewport { display: block; }

.case-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.case-thumb { margin: 0; }
/* L'image zoome dans cette enveloppe, qui porte l'arrondi et la découpe :
   la figure entière ne pouvait pas le faire, elle contient aussi la
   légende, et ses coins du bas tombaient sous la légende, pas sous l'image. */
.case-thumb-media {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--navy-line);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.case-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.case-thumb figcaption {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.case-figures {
  display: grid;
  gap: 1.6rem;
  margin: clamp(2rem, 3vw, 2.6rem) 0;
  padding: 1.8rem 0;
  border-block: 1px solid var(--navy-line);
}
.case-figure { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.4rem; align-items: baseline; }
.case-figure .stat-figure { margin: 0; font-size: clamp(2.2rem, 3.2vw, 2.9rem); }
.case-figure p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.66); }

.quote-line { margin: 0 0 1.8rem; padding-left: 1.4rem; border-left: 2px solid var(--yellow); }
.quote-line p { font-family: var(--font-title); font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.35; color: var(--white); margin-bottom: 0.7rem; }
.quote-line cite { font-style: normal; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }

/* ---------- Bloc photo + texte ---------- */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
.media-frame { margin: 0; border-radius: var(--radius-media); overflow: hidden; }
.media-frame img { width: 100%; height: auto; }

/* Le bloc de titre occupait toute la largeur avec du texte sur la moitié
   gauche seulement : le titre tient la colonne de gauche, l'accroche prend
   la droite, et la section gagne 150 px de hauteur au passage. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head h2 { margin-bottom: 0; max-width: 18ch; }
.section-head .lead { margin-top: 0; padding-bottom: 0.35rem; }
.section-head .lead.measure { max-width: 34rem; }
.section-head:not(:has(.lead)) { display: block; max-width: 52rem; }
/* Sans chapeau à côté, un titre n'a pas à tenir dans 18 caractères : il se
   serrait sur trois lignes, en bloc, au milieu d'une page vide. */
.section-head:not(:has(.lead)) h2 { max-width: 26ch; }

/* ---------- Bandes de service ---------- */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 4.5vw, 4rem);
  border-bottom: 1px solid rgba(14, 20, 32, 0.1);
}
.band:first-of-type { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.band:last-of-type { border-bottom: 0; }
.band-reverse .band-media { order: 2; }
.band-media { margin: 0; border-radius: var(--radius-media); overflow: hidden; }
.band-media img { width: 100%; height: auto; display: block; }
.band-text { max-width: 34rem; }
.band-index { font-family: var(--font-title); font-size: 0.95rem; color: var(--yellow-deep); letter-spacing: 0.12em; display: block; margin-bottom: 1rem; }
.band-text h3 { margin-bottom: 0.9rem; }
.band-text p { color: var(--ink-soft); margin-bottom: 1.4rem; }

.browser-flat { display: block; background: #0B1C36; }
.browser-flat .browser-bar { display: flex; }
.browser-flat img { width: 100%; height: auto; }

/* ---------- Ce qui est compris ---------- */
.included-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.included-text .tick-list { margin-top: 1.6rem; }
.included-note { margin-top: 1.6rem; font-size: 0.92rem; }
.included-media { margin: 0; border-radius: var(--radius-media); overflow: hidden; }
.included-media img { width: 100%; height: auto; }

/* ---------- Frise ---------- */
.timeline {
  list-style: none;
  margin: clamp(3rem, 5vw, 4.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  position: relative;
}
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  height: 1px;
}
.timeline::before {
  width: 100%;
  background: rgba(14, 20, 32, 0.16);
  transition: opacity 0.5s var(--ease);
}
/* Pendant qu'une étape est survolée, le filet gris s'efface aussi : sinon il
   continue de relier les quatre points et le trait jaune a l'air de se
   rétracter sur un rail qui, lui, ne bouge pas. */
.timeline:has(.timeline-step:hover)::before { opacity: 0; }
/* Au repos, le trait jaune relie les quatre points. Dès qu'une étape est
   survolée, il se rétracte des deux bords vers le point de cette étape : ses
   deux extrémités sont donc pilotées séparément, en left et en right, et non
   par une largeur qui ne pourrait se refermer que d'un côté. Le JS pose la
   position du point survolé. */
.timeline::after {
  width: auto;
  left: var(--from, 0px);
  right: var(--to, 0px);
  background: var(--yellow-deep);
  /* Les deux bords ont leur propre retard : en passant d'une étape à sa
     voisine, celui qui va vers le nouveau point part le premier et celui qui
     quitte l'ancien attend. Le trait relie donc les deux boules avant de se
     refermer sur la seconde, au lieu de glisser à largeur nulle, invisible. */
  transition: left 0.55s var(--ease) var(--retard-gauche, 0s),
              right 0.55s var(--ease) var(--retard-droite, 0s);
}
.timeline-step { position: relative; padding-top: 2.6rem; }

/* Un cadre qui se dessine autour de l'étape survolée. Le trait est un seul
   rectangle SVG : pathLength="100" ramène son périmètre à 100 quelle que
   soit la taille de la case, donc un simple stroke-dashoffset de 100 à 0
   suffit à le faire courir, et la vitesse reste la même d'une colonne à
   l'autre. */
.timeline-trace {
  position: absolute;
  top: 2rem;
  left: -0.9rem;
  width: calc(100% + 1.8rem);
  height: calc(100% - 1.4rem);
  pointer-events: none;
  overflow: visible;
}
.timeline-trace rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: 14px;
  ry: 14px;
  fill: none;
  stroke: var(--yellow-deep);
  stroke-width: 1.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 0.75s var(--ease), opacity 0.3s var(--ease) 0.45s;
}
.timeline-step:hover .timeline-trace rect {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.75s var(--ease), opacity 0.2s var(--ease);
}
.timeline-step::before {
  content: "";
  position: absolute;
  top: 3px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--yellow-deep);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
  transform-origin: center;
}
.timeline-step:hover::before { transform: scale(1.9); background: var(--yellow); }
.timeline-step h3 { transition: color 0.4s var(--ease); }
.timeline-step:hover h3 { color: var(--yellow-deep); }
.timeline-mark {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 0.9rem;
}
.timeline-step h3 { font-size: clamp(1.15rem, 1.5vw, 1.35rem); margin-bottom: 0.7rem; }
.timeline-step p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Portrait ---------- */
.portrait-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
.portrait { margin: 0; border-radius: var(--radius-media); overflow: hidden; background: var(--ivory-dim); max-width: 340px; }
.portrait img { width: 100%; height: auto; }
.portrait-text { max-width: 36rem; }
.signature {
  font-family: var(--font-title);
  font-size: 1.9rem;
  color: var(--ink);
  margin-top: 1.8rem;
  margin-bottom: 1.4rem;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.cta-phone { margin-top: 2rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }
.cta-phone a { color: var(--yellow); text-decoration: none; border-bottom: 1px solid rgba(249, 198, 2, 0.35); }

/* ---------- Curseur personnalisé ---------- */
.cursor-cue {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  will-change: transform;
}
.cursor-cue span { transform: translate(-50%, -50%) scale(0.86); transition: transform 0.3s var(--ease); }
.cursor-cue.is-visible span { transform: translate(-50%, -50%) scale(1); }
.cursor-cue span {
  display: block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cursor-cue.is-visible { opacity: 1; }

/* ---------- Transition entre pages ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fadeOut 0.28s ease forwards; }
::view-transition-new(root) { animation: fadeIn 0.34s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- Responsive des nouveaux composants ---------- */
@media (max-width: 1100px) {
  .case-grid, .media-split, .included-grid, .portrait-grid { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; gap: 2rem; }
  .band-reverse .band-media { order: 0; }
  .timeline { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
  .timeline::before, .timeline::after { display: none; }
  .timeline-step { padding-top: 1.8rem; border-top: 1px solid rgba(14, 20, 32, 0.16); }
  .timeline-step::before { top: -5px; }
  /* L'étape n'a plus que 1,8 rem de marge haute sur tablette et téléphone :
     le cadre, calé sur les 2,6 rem du bureau, passait sur « Semaine 1 ». */
  .timeline-trace { top: 0.8rem; height: calc(100% - 0.4rem); }
  .cursor-cue { display: none; }
}

@media (max-width: 760px) {
  .trust-bar { gap: 0.9rem; flex-direction: column; border-top-width: 1px; }
  .case-figure { grid-template-columns: 1fr; gap: 0.5rem; }
  .timeline { grid-template-columns: 1fr; }
  .signature { font-size: 1.6rem; }
}

/* ======================================================================
   Pages intérieures, formulaire en trois étapes, journal
   ====================================================================== */

.page-hero-short { min-height: min(52vh, 540px); }

.page-banner {
  background: var(--navy);
  color: var(--white);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.page-banner h1 { color: var(--white); font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.page-banner .muted { color: rgba(255, 255, 255, 0.55); font-size: 0.86rem; }

.stats-four { grid-template-columns: repeat(4, 1fr); }
.stats-four .stat-figure { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }

.included-plain .tick-list { margin-top: 2rem; }
.included-plain .tick-list li { align-items: baseline; }
.included-plain strong { font-weight: 600; }

/* ---------- Corps de texte long ---------- */
.legal-body, .article-body { max-width: 44rem; }
.legal-body h2, .article-body h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
}
.legal-body h2:first-child, .article-body h2:first-child { margin-top: 0; }
.legal-body p, .article-body p { color: var(--ink-soft); }
.legal-body a, .article-body a { color: var(--ink); text-decoration-color: var(--yellow-deep); text-underline-offset: 3px; }
.article-body .tick-list { margin-block: 1.6rem 2rem; }
.article-note {
  margin-top: clamp(2.5rem, 4vw, 3.2rem);
  padding: 1.4rem 1.6rem;
  background: var(--ivory-dim);
  border-left: 2px solid var(--yellow);
  font-size: 0.93rem;
}

/* Un bloc entier cliquable sans toucher à son balisage : un lien transparent
   posé par-dessus, qui porte le libellé pour les lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lien-bloc { position: absolute; inset: 0; z-index: 3; }
.after-card, .timeline-step { position: relative; }
/* Le repère de focus ne s'affiche qu'à la navigation au clavier : au clic
   de souris, :focus-within dessinait un cadre jaune autour du bloc. */
.lien-bloc:focus { outline: none; }
.after-card:has(.lien-bloc:focus-visible),
.timeline-step:has(.lien-bloc:focus-visible) { outline: 2px solid var(--yellow-deep); outline-offset: 6px; }
/* Sur fond bleu, le texte des étapes gardait le gris prévu pour l'ivoire :
   il se lisait à peine. */
.on-navy .timeline-step p { color: rgba(255, 255, 255, 0.72); }

/* ---------- Rythme des articles ----------
   Un article n'est pas une page d'aide : il se parcourt avant de se lire. Il
   lui faut donc des points d'accroche, faute de quoi l'oeil ne s'arrête nulle
   part et la page paraît longue. Quatre repères : un chapitre numéroté, un
   premier paragraphe plus grand, une photo au milieu et une phrase détachée. */
.article-body { counter-reset: chapitre; }
.article-body h2 { counter-increment: chapitre; }
.article-body h2::before {
  content: counter(chapitre, decimal-leading-zero);
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-title);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--yellow-deep);
}
.article-body > p:first-of-type {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
}
.article-figure {
  margin: clamp(2.4rem, 4vw, 3.4rem) 0;
}
.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-media);
}
.article-figure figcaption {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.article-pull {
  margin: clamp(2.4rem, 4vw, 3.4rem) 0;
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
  border-left: 2px solid var(--yellow-deep);
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.35;
  color: var(--navy);
}
.article-cta {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding: clamp(1.8rem, 3.4vw, 3rem);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-media);
}
.article-cta .eyebrow { color: var(--yellow); }
.article-cta h2 { color: var(--white); margin: 0.8rem 0 0.9rem; }
.article-cta h2::before { content: none; }
.article-cta p { color: rgba(255, 255, 255, 0.78); max-width: 46ch; }
.article-cta .btn-row { margin-top: 1.8rem; }
.article-cta .btn-outline-dark { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.article-cta .btn-outline-dark::before { background: var(--white); }
.article-cta .btn-outline-dark:hover { color: var(--navy); border-color: var(--white); }

/* ---------- Journal ---------- */
/* ---------- Page d'erreur ---------- */
.erreur { padding-block: clamp(7rem, 14vw, 12rem); }
.erreur h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0.8rem 0 1.2rem; }
.erreur .btn-row { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.erreur-liens { max-width: 34rem; }

/* ---------- Recherche du journal ---------- */
.blog-search {
  display: grid;
  gap: 0.5rem;
  max-width: 32rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.blog-search label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.blog-search input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(14, 20, 32, 0.16);
  border-radius: var(--radius-media);
  padding: 0.95rem 1.1rem;
  transition: border-color 0.3s var(--ease);
}
.blog-search input:focus { outline: none; border-color: var(--navy); }
.blog-count { font-size: 0.85rem; color: var(--ink-soft); min-height: 1.2em; margin: 0; }

.article-list { display: grid; gap: 0; border-top: 1px solid rgba(14, 20, 32, 0.14); }
.article-card { border-bottom: 1px solid rgba(14, 20, 32, 0.14); }
.article-card a {
  display: grid;
  gap: 0.9rem;
  padding-block: clamp(2rem, 3.2vw, 2.8rem);
  text-decoration: none;
  transition: padding-left 0.4s var(--ease);
}
.article-card a:hover { padding-left: 1rem; }
.article-meta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow-deep); }
.article-title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0; max-width: 28ch; }
.article-card p { max-width: 58ch; color: var(--ink-soft); margin: 0; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.75fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: start;
}
.contact-aside { display: grid; gap: 1.2rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.contact-card {
  border: 1px solid rgba(14, 20, 32, 0.14);
  border-radius: var(--radius-media);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
}
.contact-card h3 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.contact-card .quote-line { margin: 0; border-color: var(--yellow-deep); }
.contact-card .quote-line p { color: var(--ink); }
.contact-card .quote-line cite { color: var(--ink-soft); }
.contact-card-dark { background: var(--navy); border-color: var(--navy); color: rgba(255, 255, 255, 0.8); }
.contact-card-dark h3 { color: var(--white); }
.contact-card-dark .contact-line { border-color: var(--navy-line); }
.contact-card-dark .contact-line a { color: var(--white); }
.contact-card-dark .muted { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; margin-top: 1rem; }

.next-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.next-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.next-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-title);
  color: var(--yellow-deep);
  line-height: 1.5;
}
.next-steps strong { color: var(--ink); font-weight: 500; }

/* ---------- Formulaire en trois étapes ---------- */
.wizard {
  border: 1px solid rgba(14, 20, 32, 0.14);
  border-radius: var(--radius-media);
  background: var(--white);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  gap: 0;
}
.wizard-progress { display: flex; gap: 0.5rem; }
.wizard-bar { height: 3px; flex: 1; background: rgba(14, 20, 32, 0.12); border-radius: 2px; transition: background 0.4s var(--ease); }
.wizard-bar.is-done { background: var(--yellow-deep); }
.wizard-count {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wizard-step { display: none; border: 0; margin: 0; padding: 0; }
.wizard-step.is-active { display: block; }
.wizard-title { font-family: var(--font-title); font-size: clamp(1.4rem, 2.3vw, 1.9rem); line-height: 1.1; padding: 0; margin-bottom: 0.7rem; }
.wizard-help { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 1.8rem; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.choice {
  display: grid;
  gap: 0.35rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid rgba(14, 20, 32, 0.14);
  border-radius: var(--radius-media);
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.choice span { font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); }
.choice:hover { border-color: var(--navy); background: var(--white); }
.choice.is-selected { border-color: var(--yellow-deep); background: #FDF6DE; }

/* Les champs de formulaire n'avaient aucun style : seules les vignettes de
   choix en avaient. Les libellés se posaient à côté des champs, et les champs
   gardaient la taille par défaut du navigateur. */
.field { display: grid; gap: 0.45rem; margin-bottom: 1.1rem; }
.field > label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid rgba(14, 20, 32, 0.16);
  border-radius: var(--radius-media);
  padding: 0.95rem 1.1rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: rgba(14, 20, 32, 0.38); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-legal {
  margin-top: 1.4rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

.field-inline { margin-top: 1.8rem; }
.field-optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); opacity: 0.8; }
.choice.is-chosen { border-color: var(--navy); background: rgba(0, 26, 69, 0.05); }
.form-feedback { margin-top: 1rem; font-size: 0.93rem; min-height: 1.2em; }
.form-feedback.is-ok { color: var(--navy); font-weight: 600; }
.form-feedback.is-error { color: #a12b2b; }
.wizard.is-sent .wizard-progress, .wizard.is-sent .wizard-count { display: none; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.wizard-actions .btn { flex: 0 0 auto; }
.form-feedback.is-visible { display: block; }


@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .stats-four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .stats-four { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .wizard-actions .btn { flex: 1 1 100%; }
  .article-card a:hover { padding-left: 0; }
}

/* ======================================================================
   Les quatre leviers : une liste qui se parcourt, pas quatre photos
   empilées. Au survol, l'aperçu du levier suit le curseur.
   ====================================================================== */

.levers { margin-top: clamp(2rem, 3.2vw, 3rem); border-top: 1px solid rgba(14, 20, 32, 0.16); }
.lever {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: 1px solid rgba(14, 20, 32, 0.16);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.5s var(--ease);
}
.lever:hover { padding-left: 1.2rem; }
.lever::before {
  content: "";
  position: absolute;
  /* Le lavis s'arrête pile sur les filets : il débordait de 1,2 rem de chaque
     côté et ses coins arrondis coupaient la ligne grise. */
  inset: 0 0 1px;
  /* Un blanc seul ne se voyait pas sur l'ivoire : la ligne survolée prend en
     plus un lavis jaune très faible, qui s'éteint vers la droite. */
  background:
    linear-gradient(to right,
      rgba(201, 156, 0, 0.15) 0%,
      rgba(201, 156, 0, 0.08) 34%,
      rgba(201, 156, 0, 0.03) 62%,
      rgba(201, 156, 0, 0) 84%),
    var(--white);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: -1;
}
.lever:hover::before { opacity: 1; }
.lever-index { font-family: var(--font-title); font-size: 1rem; color: var(--yellow-deep); letter-spacing: 0.1em; }
.lever-title {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.1vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.lever-desc { font-size: 0.97rem; color: var(--ink-soft); max-width: 46ch; }
.lever-go {
  justify-self: end;
  font-size: 1.4rem;
  color: var(--yellow-deep);
  transform: translateX(-8px);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.lever:hover .lever-go { transform: translateX(0); opacity: 1; }

.lever-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: 320px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
}
.lever-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lever-preview img { width: 100%; height: auto; display: block; }

/* ---------- Bande de faits, en bas de page ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(14, 20, 32, 0.12);
  border: 1px solid rgba(14, 20, 32, 0.12);
}
.fact { background: var(--ivory); padding: clamp(1.8rem, 3vw, 2.6rem); }
.fact-figure {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1;
  color: var(--yellow-deep);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}
.fact p { font-size: 0.93rem; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .section-head { display: block; }
  .section-head h2 { max-width: none; margin-bottom: 1rem; }
  .section-head .lead { margin-top: 1.2rem; }
  .lever { grid-template-columns: 2.6rem 2.2rem minmax(0, 1fr); row-gap: 0.6rem; }
  .lever-title { grid-column: 3; }
  .lever-desc { grid-column: 3; }
  .lever-go { display: none; }
  .lever-preview { display: none; }
  .lever:hover { padding-left: 0; }
  .facts { grid-template-columns: 1fr; }
}

/* ---------- Grille de services (page Services) ---------- */
/* ---------- Les quatre services, en un écran ----------
   Quatre cartes empilées faisaient 1 414 px de haut : on n'en voyait jamais
   plus d'une et demie, alors que la page promet quatre leviers. Elles
   deviennent quatre panneaux photo de même taille, deux par deux. Le détail
   ne disparaît pas, il se déplie au survol, et reste ouvert partout où il
   n'y a pas de survol (téléphone, tablette). */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.2vw, 1.3rem);
  margin-top: clamp(2.5rem, 4vw, 3.6rem);
}
/* Un bloc qui ouvre sa section, sans titre au-dessus, garde une marge haute
   prévue pour le cas où il en suit un : elle s'ajoute au rembourrage de la
   section et laisse 200 px de vide, dont la moitié après la fin du fondu.
   Cette marge saute, et le rembourrage du haut est ramené de moitié. */
.container > .service-grid:first-child,
.container > .stats:first-child,
.container > .blog-search:first-child { margin-top: 0; }
.section:has(> .container > .service-grid:first-child),
.section:has(> .container > .stats:first-child),
.section:has(> .container > .blog-search:first-child) {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.service-panel {
  position: relative;
  display: block;
  min-height: clamp(280px, 36vh, 400px);
  padding: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  text-decoration: none;
  background: var(--navy);
}
.service-panel-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.service-panel-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 17, 46, 0.9) 0%,
    rgba(0, 17, 46, 0.84) 24%,
    rgba(0, 17, 46, 0.71) 44%,
    rgba(0, 17, 46, 0.51) 62%,
    rgba(0, 17, 46, 0.28) 82%,
    rgba(0, 17, 46, 0.2) 100%
  );
  transition: opacity 0.6s var(--ease);
}
.service-panel-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: inherit;
  padding: clamp(1.3rem, 2vw, 2rem);
}
.service-panel-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: auto;
}
.service-panel-icon { display: block; width: 26px; color: var(--yellow); }
.service-panel-icon svg { display: block; width: 100%; height: auto; }
.service-panel-index {
  font-family: var(--font-title);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}
.service-panel h3 {
  color: var(--white);
  margin: 1.4rem 0 0.5rem;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
}
.service-panel > .service-panel-body > p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 34ch;
}
.service-panel-fold { display: grid; grid-template-rows: 1fr; }
.service-panel-inner { overflow: hidden; }
.service-panel-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 1rem 0 1.1rem;
}
.service-panel-items span {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.service-panel-items span::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--yellow);
}
.service-panel .link-arrow { color: var(--white); }

/* Le repli ne vaut que là où il y a un survol ET la place de deux colonnes :
   en dessous, le détail reste ouvert, sinon il devient inatteignable. */
@media (hover: hover) and (min-width: 901px) {
  /* Deux courbes, une par sens. À l'ouverture, une sortie rapide qui donne
     le geste. À la fermeture, la même courbe repliait 80 % de la hauteur
     dans les 150 premières millisecondes : ça se lisait comme un retour sec.
     Le repli prend donc une courbe symétrique, plus lente, et le texte
     s'efface avant que la hauteur ne bouge. */
  .service-panel-fold {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.06s,
                opacity 0.28s ease;
  }
  .service-panel:hover .service-panel-fold,
  .service-panel:focus-visible .service-panel-fold {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.5s var(--ease),
                opacity 0.45s ease 0.14s;
  }
  .service-panel:hover .service-panel-media,
  .service-panel:focus-visible .service-panel-media { transform: scale(1.05); }
  /* Le voile ne s'allège pas au survol : c'est au moment où les trois
     lignes de détail apparaissent qu'il faut le plus de contraste. */
}

@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-panel { min-height: clamp(300px, 52vh, 420px); }
}
}

/* ======================================================================
   Icônes, survols et volet des services
   ====================================================================== */

/* ---------- Icônes de levier ---------- */
.lever-icon {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--yellow-deep);
  flex: none;
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}
.lever-icon svg { width: 100%; height: 100%; display: block; }
.lever:hover .lever-icon { transform: translateY(-3px) scale(1.06); }
.lever { grid-template-columns: 3rem 2.4rem minmax(0, 16rem) minmax(0, 1fr) 2rem; gap: clamp(0.9rem, 2.4vw, 2.2rem); }

.service-card-icon {
  display: block;
  width: 30px; height: 30px;
  color: var(--yellow-deep);
  margin-bottom: 1rem;
}
.service-card-icon svg { width: 100%; height: 100%; display: block; }

/* ---------- Les images respirent au survol ---------- */
.media-frame, .included-media, .band-media, .portrait, .browser, .article-visuel {
  overflow: hidden;
  /* Une image qui zoome passe sur son propre calque : sans isolation, le
     parent ne la découpe plus pendant l'animation et les coins arrondis
     redeviennent droits le temps du zoom (défaut connu de Safari et Chrome).
     L'isolation et le masque rétablissent la découpe. */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.media-frame img, .included-media img, .case-thumb img, .band-media img, .portrait img {
  transition: transform 1.1s var(--ease);
}
.media-frame:hover img,
.included-media:hover img,
.case-thumb:hover img,
.band-media:hover img,
.portrait:hover img { transform: scale(1.045); }
.case-shot .browser img { transition: transform 1.2s var(--ease); }
.case-shot:hover .browser img { transform: scale(1.03); }
.case-thumb figcaption { transition: color 0.4s var(--ease); }
.case-thumb:hover figcaption { color: var(--yellow); }

/* ---------- Les listes réagissent ---------- */
.tick-list li {
  transition: padding-left 0.45s var(--ease), color 0.4s var(--ease);
}
.tick-list li::before { transition: transform 0.45s var(--ease), background 0.4s var(--ease); }
.tick-list li:hover { padding-left: 2rem; color: var(--ink); }
.on-navy .tick-list li:hover, .on-deep .tick-list li:hover { color: var(--white); }
.tick-list li:hover::before { transform: scale(2); }

.next-steps li { transition: padding-left 0.45s var(--ease); }
.next-steps li:hover { padding-left: 2.3rem; }
.next-steps li::before { transition: transform 0.45s var(--ease); }
.next-steps li:hover::before { transform: scale(1.35); }

.service-card li { transition: padding-left 0.4s var(--ease); }
.service-card li:hover { padding-left: 1.5rem; }

/* ---------- FAQ ---------- */
.faq summary { transition: padding-left 0.45s var(--ease), color 0.4s var(--ease); }
.faq summary:hover { padding-left: 0.9rem; color: var(--yellow-deep); }
.faq summary::after { transition: transform 0.45s var(--ease); }
.faq summary:hover::after { transform: rotate(90deg); }

/* ---------- Chiffres ---------- */
.fact, .stat { transition: background 0.5s var(--ease); }
.fact:hover { background: var(--white); }
/* Au survol, la case s'avance : elle grandit, passe en bleu, et son texte
   s'inverse. Le transform porte un !important parce que l'apparition au
   défilement laisse un transform en style en ligne sur la case. */
.stat {
  position: relative;
  /* Les quatre propriétés partagent la même durée et la même courbe : c'est
     ce qui garde les intervalles égaux pendant tout le mouvement, la case qui
     grandit et les voisines qui s'écartent avançant du même pas. */
  transition: background 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease), border-radius 0.35s var(--ease);
  will-change: transform;
}
.stat:hover {
  background: var(--navy);
  transform: scale(1.045) !important;
  border-radius: var(--radius-media);
  /* Le filet blanc est posé en ombre intérieure : une vraie bordure
     décalerait le contenu d'un pixel à chaque survol. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5),
              0 26px 55px -26px rgba(0, 0, 0, 0.55);
  z-index: 2;
}

/* La case survolée gagne 4,5 % de largeur, soit environ 8 px de chaque côté.
   Sans rien faire, elle mord sur ses voisines et les intervalles deviennent
   inégaux. Les voisines s'écartent donc d'autant : celles d'après par le
   combinateur général, celles d'avant par :has(). */
@media (hover: hover) and (min-width: 901px) {
  .stat:hover ~ .stat { transform: translateX(8px) !important; }
  .stats:has(.stat:nth-child(2):hover) .stat:nth-child(-n + 1),
  .stats:has(.stat:nth-child(3):hover) .stat:nth-child(-n + 2),
  .stats:has(.stat:nth-child(4):hover) .stat:nth-child(-n + 3) {
    transform: translateX(-8px) !important;
  }
}
.stat:hover .stat-figure { color: var(--white); }
.stat:hover .stat-figure::after { background: var(--yellow); }
.stat:hover p { color: rgba(255, 255, 255, 0.78); }
.stat-figure, .stat p { transition: color 0.45s var(--ease); }
.stat-figure::after { transition: background 0.45s var(--ease); }

/* ---------- Volet des services dans le header ---------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  /* Assez bas pour que le bord du panneau ne se confonde pas avec la jauge
     jaune posée sous le header. */
  margin-top: 1.85rem;
  min-width: 17rem;
  padding: 0.7rem;
  background: rgba(0, 17, 46, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-media);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.nav-item:hover .nav-drop,
.nav-item.is-open .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-drop::before {
  content: "";
  position: absolute;
  /* Le vide entre le lien et le panneau fait 23 px : une passerelle de 16 px
     laissait une bande morte de 7 px, la souris y perdait le survol et le
     menu se refermait en descendant. Elle couvre maintenant le vide entier,
     et mord sur le lien. */
  /* La passerelle couvre exactement le vide entre le bas du mot « Services »
     et le haut du panneau (38 px mesurés), pas davantage. À 3 rem, elle
     remontait de 10 px sur le mot : posée par-dessus sans être un lien, elle
     y remettait la flèche au lieu de la main. */
  left: 0; right: 0; top: -2.35rem;
  height: 2.35rem;
}
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-drop a:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); }
.nav-drop a::after { display: none; }
.nav-drop-index { font-family: var(--font-title); font-size: 0.75rem; color: var(--yellow); }

@media (max-width: 1180px) {
  .nav-drop { display: none; }
}

/* ---------- Tiroir mobile : sous-menu des services ---------- */
/* Services se déplie : la flèche ouvre et referme les quatre sous-pages,
   repliées à l'ouverture du menu. Le mot lui-même reste un lien vers la
   page services. Le repli passe par une grille de 0fr à 1fr, ce qui anime
   la hauteur sans avoir à la connaître. */
.drawer-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--navy-line);
}
.drawer .drawer-group a.drawer-link { border-bottom: 0; flex: 1; }
.drawer-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
}
.drawer-toggle svg { width: 22px; height: 22px; transition: transform 0.35s var(--ease); }
.drawer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.drawer-sub.is-open { grid-template-rows: 1fr; border-bottom: 1px solid var(--navy-line); }
.drawer-sub-inner { overflow: hidden; min-height: 0; }
.drawer-sub-list { display: grid; gap: 0.2rem; padding: 0.4rem 0 0.9rem 0.9rem; }
.drawer-sub a {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  padding-block: 0.55rem;
  border: 0;
}

/* ---------- Pied de page ---------- */
/* Le bandeau d'appel et le pied de page partageaient le même bleu : les deux
   se fondaient en un seul bloc sombre sans frontière lisible. */
.site-footer { border-top: 1px solid var(--navy-line); }
.cta-band.on-deep { background: var(--navy); }

.footer-social { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-line);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.footer-social a:hover { color: var(--yellow); border-color: var(--yellow); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; display: block; }

.site-footer ul li a { display: inline-block; transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.site-footer ul li a:hover { transform: translateX(4px); }

/* ---------- Les trois faits, en tête de pied de page ---------- */
.site-footer .footer-facts {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  padding: 0 0 clamp(2rem, 3vw, 2.8rem);
  border-bottom: 1px solid var(--navy-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 2.5rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer .footer-facts li { transition: color 0.4s var(--ease); }
.site-footer .footer-facts li:hover { color: rgba(255, 255, 255, 0.8); }
.site-footer .footer-facts strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}

@media (max-width: 760px) {
  .site-footer .footer-facts { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- L'offre : les quatre garanties et la deuxième année ---------- */
.offer-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.included .stats-four { margin-bottom: clamp(2.2rem, 3.5vw, 3.2rem); }

.after-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.after-card {
  border: 1px solid rgba(14, 20, 32, 0.14);
  border-radius: var(--radius-media);
  background: var(--white);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.after-card:hover { border-color: rgba(14, 20, 32, 0.3); transform: translateY(-3px); }
.after-card-icon { display: block; width: 32px; height: 32px; color: var(--yellow-deep); margin-bottom: 1.2rem; }
.after-card-icon svg { width: 100%; height: 100%; display: block; }
.after-card h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); margin-bottom: 0.4rem; }
.after-price {
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 1rem;
}
.after-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.after-line {
  margin-top: clamp(2rem, 3vw, 2.6rem);
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  color: var(--ink);
}
.after-line strong { font-weight: 400; color: var(--yellow-deep); }

@media (max-width: 900px) {
  .after-cards { grid-template-columns: 1fr; }
}

/* ======================================================================
   Header à deux teintes : il prend le ton de la section qu'il survole
   ====================================================================== */

.header-logo { position: relative; display: block; }
.header-logo img { transition: opacity 0.45s var(--ease), height 0.45s var(--ease); }
.header-logo .logo-on-light {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  filter: none;
}
.site-header.is-light .header-logo .logo-on-dark { opacity: 0; }
.site-header.is-light .header-logo .logo-on-light { opacity: 1; }

.site-header.is-stuck.is-light {
  background: rgba(242, 237, 226, 0.8);
  box-shadow: 0 1px 0 rgba(14, 20, 32, 0.12);
}
.site-header.is-light .nav-link {
  color: var(--ink-soft);
  text-shadow: none;
}
.site-header.is-light .nav-link:hover,
.site-header.is-light .nav-link[aria-current="page"] { color: var(--navy); }
.site-header.is-light .nav-link::after { background: var(--yellow-deep); }
.site-header.is-light .lang { color: rgba(14, 20, 32, 0.45); text-shadow: none; }
.site-header.is-light .lang a[aria-current="true"] { color: var(--navy); border-bottom-color: var(--yellow-deep); }
.site-header.is-light .burger span { background: var(--navy); }
.site-header.is-light .header-progress { background: var(--yellow-deep); }
.site-header.is-light .header-cta { background: var(--navy); color: var(--white); border-color: var(--navy); }
.site-header.is-light .header-cta:hover { background: transparent; color: var(--navy); }

/* Le volet des services suit la même bascule */
.site-header.is-light .nav-drop {
  background: rgba(242, 237, 226, 0.97);
  border-color: rgba(14, 20, 32, 0.12);
  box-shadow: 0 28px 60px -28px rgba(14, 20, 32, 0.25);
}
.site-header.is-light .nav-drop a { color: var(--ink-soft); }
.site-header.is-light .nav-drop a:hover { background: rgba(14, 20, 32, 0.05); color: var(--navy); }
.site-header.is-light .nav-drop-index { color: var(--yellow-deep); }

/* Tiroir ouvert : le header reprend toujours le ton sombre */
/* Le menu mobile prend la couleur de l'en-tête au moment où on l'ouvre :
   bleu sur une section bleue, ivoire sur une section claire. Il était
   toujours bleu, sous un en-tête resté clair. */
body.is-open.menu-clair .site-header { background: var(--ivory); box-shadow: none; }
body.is-open .header-progress { opacity: 0; }
.drawer.is-light { background: var(--ivory); }
.drawer.is-light a.drawer-link { color: var(--navy); border-bottom-color: rgba(14, 20, 32, 0.14); }
.drawer.is-light .drawer-group { border-bottom-color: rgba(14, 20, 32, 0.14); }
.drawer.is-light .drawer-toggle { color: var(--navy); }
.drawer.is-light .drawer-sub a { color: var(--ink-soft); }
.drawer.is-light .drawer-sub.is-open { border-bottom-color: rgba(14, 20, 32, 0.14); }
.drawer.is-light .drawer-foot a:not(.btn) { color: var(--ink-soft); }
.drawer.is-light .drawer-lang { color: rgba(14, 20, 32, 0.45); }
.drawer.is-light .drawer-lang a[aria-current="true"] { color: var(--navy); border-bottom-color: var(--yellow-deep); }

/* ---------- Fondus de fond entre les sections ---------- */
/* Posés au chargement selon le ton des voisines : sombre contre claire, mais
   aussi ivoire contre blanc. La couleur du fondu est écrite en style inline
   par le script, de sorte qu'une même section puisse fondre vers une couleur
   en haut et vers une autre en bas.

   Deux précautions qui font toute la différence :
   1. On interpole vers la MÊME couleur en alpha 0, jamais vers `transparent`.
      `transparent` vaut rgba(0,0,0,0) : le dégradé passe par du noir et
      dessine une bande grise au milieu du fondu.
   2. Les étapes suivent une courbe adoucie plutôt qu'une progression
      linéaire. Un dégradé linéaire laisse voir son début et sa fin, une
      courbe en S ne laisse voir ni l'un ni l'autre. */
/* Le voile se place DERRIÈRE le contenu par un z-index négatif isolé, et non
   en remontant les enfants : forcer `position: relative` sur tous les enfants
   directs sortait l'image de fond du hero de sa position absolue, qui se
   retrouvait alors dans le flux, à gauche et à moitié large. */
.fade-top, .fade-bottom { position: relative; isolation: isolate; }

/* Sur un hero ou une bande photo, l'image est posée par-dessus le fond du
   bloc : un fondu laissé à z-index -1 passe dessous et ne se voit pas, si
   bien que le bas du hero se coupe net (c'est la bande bleue à arête vive
   signalée le 20/09/2026). Le fondu monte donc entre la photo et le texte. */
.hero.fade-bottom::after,
.photo-band.fade-bottom::after,
.photo-band.fade-top::before { z-index: 1; }
.fade-top::before, .fade-bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--fade-h, clamp(120px, 12vw, 180px));
  pointer-events: none;
  z-index: -1;
}
.fade-top::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(
    to bottom,
    rgba(var(--fade-top-rgb, 242, 237, 226), 1) 0%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.985) 8%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.94) 17%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.86) 26%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.74) 35%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.6) 44%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.44) 54%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.29) 64%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.17) 74%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.08) 84%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0.025) 93%,
    rgba(var(--fade-top-rgb, 242, 237, 226), 0) 100%
  );
}
.fade-bottom::after {
  bottom: 0;
  top: auto;
  background: linear-gradient(
    to top,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 1) 0%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.985) 8%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.94) 17%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.86) 26%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.74) 35%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.6) 44%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.44) 54%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.29) 64%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.17) 74%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.08) 84%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0.025) 93%,
    rgba(var(--fade-bottom-rgb, 242, 237, 226), 0) 100%
  );
}
/* La bande photo garde le voile de couleur plutôt qu'un masque : un masque
   la ferait disparaître dans le fond du document, pas dans la couleur de la
   section voisine, ce qui rouvrirait une couture de l'autre côté. */
.photo-band.fade-top::before, .photo-band.fade-bottom::after { height: clamp(100px, 13vw, 200px); }

/* ---------- Journal : chaque article montre son image ---------- */
.article-card a {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: center;
}
.article-visuel {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--ivory-dim);
}
.article-visuel img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.article-card a:hover .article-visuel img { transform: scale(1.05); }
.article-corps { display: grid; gap: 0.9rem; align-content: center; }

@media (max-width: 760px) {
  .article-card a { grid-template-columns: 1fr; row-gap: 1.2rem; }
}