/* ==========================================================================
   Algoria — Variante 5 « Cinétique / immersif »
   Système de design complet. Fond blanc dominant, palette Algoria stricte.
   Display : Bricolage Grotesque (caractériel) · Texte : Hanken Grotesk.
   Atmosphère : grain léger + mesh cyan/navy très subtil. Cyan = accent rare.
   --------------------------------------------------------------------------
   Sommaire
     1.  Tokens (:root)
     2.  Reset & base
     3.  Typographie & échelle fluide
     4.  Layout : conteneur, grille, sections
     5.  Atmosphère : grain, mesh
     6.  Composants : eyebrow, boutons, cartes, filets
     7.  Header + navigation + menu mobile
     8.  Hero
     9.  Sections de page d'accueil (preuve, services, etc.)
     10. Galerie horizontale épinglée (signature)
     11. Séquence immersive navy (signature)
     12. FAQ accordéon
     13. Bandeau CTA navy
     14. Footer
     15. Utilitaires reveal / motion
     16. Focus & accessibilité
     17. Responsive
     18. prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Palette Algoria (charte stricte) */
  --navy:      #0B1E2A;
  --slate:     #2F2937;
  --gray:      #687280;
  --gray-100:  #F2F4F7;
  --cyan:      #00C2D4;
  --white:     #FFFFFF;

  /* Dérivés contrôlés (opacités basses uniquement) */
  --navy-90:   rgba(11, 30, 42, 0.90);
  --navy-08:   rgba(11, 30, 42, 0.08);
  --navy-04:   rgba(11, 30, 42, 0.04);
  --cyan-12:   rgba(0, 194, 212, 0.12);
  --cyan-08:   rgba(0, 194, 212, 0.08);
  --line:      rgba(11, 30, 42, 0.10);
  --line-soft: rgba(11, 30, 42, 0.06);
  --line-on-navy: rgba(255, 255, 255, 0.14);

  /* Texte */
  --ink:       var(--navy);
  --ink-2:     var(--slate);
  --ink-3:     var(--gray);
  --paper:     var(--white);

  /* Typographies */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-text:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Échelle typographique fluide (clamp min/idéal/max) */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.78vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 3rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 4.2rem);
  --step-5:  clamp(3rem, 2.1rem + 4.5vw, 6rem);
  --step-hero: clamp(2.2rem, 1.2rem + 2.8vw, 4rem);

  /* Espacements (rythme vertical cinétique : généreux) */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 8rem);
  --space-3xl: clamp(6rem, 4rem + 8vw, 11rem);

  /* Conteneur & grille */
  --container:   1280px;
  --container-w: 1180px;
  --gutter:      clamp(1.25rem, 0.8rem + 2.2vw, 3rem);

  /* Rayons */
  --radius-s:  6px;
  --radius-m:  14px;
  --radius-l:  22px;
  --radius-xl: 30px;

  /* Ombres (douces, jamais lourdes) */
  --shadow-s:  0 1px 2px rgba(11, 30, 42, 0.05);
  --shadow-m:  0 18px 40px -24px rgba(11, 30, 42, 0.28);
  --shadow-l:  0 40px 80px -40px rgba(11, 30, 42, 0.34);

  /* Transitions */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  0.2s;
  --t-base:  0.4s;
  --t-slow:  0.7s;

  /* Header */
  --header-h: 76px;

  /* Focus */
  --focus: var(--cyan);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis gère le scroll lissé en JS ; on neutralise le natif quand Lenis est actif. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol { list-style: none; padding: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--cyan);
  color: var(--navy);
}

/* ==========================================================================
   3. Typographie & échelle fluide
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); font-weight: 800; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.1; }
h4 { font-size: var(--step-1); line-height: 1.18; }

p { text-wrap: pretty; }

strong { font-weight: 700; color: var(--ink); }

.u-lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}

.u-mono {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Mot-clé surligné cyan — cinétique signature (souligné qui se trace) */
.u-mark {
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
.u-mark::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.08em;
  height: 0.16em;
  background: var(--cyan);
  border-radius: 2px;
  transform: scaleX(var(--mark, 1));
  transform-origin: left center;
  z-index: -1;
}

/* Mot en italique caractérielle (optical du Bricolage) */
.u-em {
  font-style: italic;
  font-weight: 600;
}

/* ==========================================================================
   4. Layout : conteneur, grille, sections
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }
.container--wide   { max-width: 1440px; }

.section {
  position: relative;
  padding-block: var(--space-3xl);
}
.section--tight { padding-block: var(--space-2xl); }
.section--flush-top { padding-top: 0; }

.section--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy strong { color: var(--white); }

/* En-tête de section commun (eyebrow + titre + intro) */
.section-head {
  max-width: 760px;
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head .section-intro {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-3);
}
.section--navy .section-intro { color: rgba(255, 255, 255, 0.66); }

/* Grilles utilitaires */
.grid { display: grid; gap: var(--space-l); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   5. Atmosphère : grain + mesh
   ========================================================================== */
/* Grain global très léger (overlay ~4 %), non interactif. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section--navy .grain,
.grain--on-navy {
  mix-blend-mode: screen;
  opacity: 0.06;
}

/* Mesh : dégradé radial cyan/navy en coin de section, opacité basse. */
.mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px); transform: translateZ(0); will-change: transform;
}
.mesh::before {
  width: 46vw;
  height: 46vw;
  top: -16vw;
  right: -10vw;
  background: radial-gradient(circle, var(--cyan-12) 0%, transparent 68%);
}
.mesh::after {
  width: 40vw;
  height: 40vw;
  bottom: -18vw;
  left: -12vw;
  background: radial-gradient(circle, var(--navy-08) 0%, transparent 70%);
}
.section--navy .mesh::before {
  background: radial-gradient(circle, rgba(0, 194, 212, 0.22) 0%, transparent 66%);
}
.section--navy .mesh::after {
  background: radial-gradient(circle, rgba(0, 194, 212, 0.08) 0%, transparent 70%);
}

/* Conteneur au-dessus de l'atmosphère */
.section > .container,
.section > .section-rail { position: relative; z-index: 2; }

/* ==========================================================================
   6. Composants
   ========================================================================== */

/* Eyebrow : libellé de section en petites capitales, point cyan animé */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 0 var(--cyan-12);
  flex: none;
}
.section--navy .eyebrow { color: rgba(255, 255, 255, 0.62); }

/* Filet cyan (se trace en JS via scaleX) */
.rule {
  height: 2px;
  background: var(--cyan);
  border: 0;
  transform-origin: left center;
  transform: scaleX(var(--rule, 1));
  border-radius: 2px;
}
.rule--full { width: 100%; }
.rule--soft { background: var(--line); height: 1px; }

/* Boutons */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  padding: 1.05em 2em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bg);
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-base) var(--ease-soft),
              color var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              filter var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active { transform: translateY(0); }

.btn .btn__arrow {
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Bouton primaire = cyan profond avec relief (dégradé + glow), accent fort */
.btn--primary {
  --btn-bg: var(--cyan);
  --btn-fg: var(--navy);
  font-weight: 700;
  border-color: transparent;
  background-image: linear-gradient(180deg, #18CCDE 0%, #00B4C5 100%);
  box-shadow: 0 10px 26px -12px rgba(0, 180, 200, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 16px 34px -12px rgba(0, 180, 200, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:active { filter: brightness(0.98); }

/* Bouton secondaire fantôme */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--navy);
  background: var(--navy-04);
  box-shadow: none;
}
/* Ghost sur fond sombre (sections navy, CTA band, hero, immersif) : lisible */
.section--navy .btn--ghost,
.cta-band .btn--ghost,
.hero--cover .btn--ghost,
.immersive .btn--ghost {
  --btn-fg: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}
.section--navy .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.hero--cover .btn--ghost:hover,
.immersive .btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
/* Bouton primaire sur fond sombre : texte blanc (lisibilité demandée) */
.section--navy .btn--primary,
.cta-band .btn--primary,
.hero--cover .btn--primary,
.immersive .btn--primary {
  --btn-fg: #fff;
}
/* Liens-flèche sur fond sombre non couverts par .section--navy : en blanc */
.cta-band .link-arrow,
.hero--cover .link-arrow,
.immersive .link-arrow {
  color: var(--white);
}
.cta-band .link-arrow:hover,
.hero--cover .link-arrow:hover,
.immersive .link-arrow:hover {
  color: var(--cyan);
}

.btn--lg { font-size: var(--step-1); padding: 1.2em 2.7em; }

/* Lien-flèche souligné cyan animé */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow svg { transition: transform var(--t-base) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--navy .link-arrow { color: var(--white); }

/* Carte générique */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft);
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 194, 212, 0.4);
  box-shadow: var(--shadow-m);
}

/* Carte service : numéro cinétique + titre + bénéfice + lien */
.service-card {
  overflow: hidden;
}
.service-card__num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0;
}
.service-card__title {
  margin-top: var(--space-m);
  font-size: var(--step-2);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.service-card__desc {
  margin-top: var(--space-xs);
  color: var(--ink-3);
  font-size: var(--step-0);
}
.service-card__price {
  margin-top: var(--space-s);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--step-0);
}
.service-card__foot {
  margin-top: auto;
  padding-top: var(--space-m);
}

/* Carte « pourquoi » (différenciateur) */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  border-top: 2px solid var(--line);
  transition: border-color var(--t-base) var(--ease-soft);
}
.feature:hover { border-top-color: var(--cyan); }
.feature__index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.feature__title { font-size: var(--step-1); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.feature__text { color: var(--ink-3); font-size: var(--step-0); }

/* Capsule réponse-d'abord (answer-first citable) */
.answer {
  border-left: 3px solid var(--cyan);
  padding: var(--space-s) 0 var(--space-s) var(--space-l);
  margin-top: var(--space-l);
  max-width: 720px;
}
.answer p { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }

/* Liste de prix indicatifs (pages service détail) */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 0.7em 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  color: var(--ink-2);
}
.price-list li:last-child { border-bottom: 0; }
.price-list strong { color: var(--ink); white-space: nowrap; }

/* Mention illustrative discrète */
.illus-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.illus-note::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gray);
  opacity: 0.5;
}

/* Pied de média : légende */
.media {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--gray-100);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media__cap {
  position: absolute;
  left: var(--space-m);
  bottom: var(--space-m);
  right: var(--space-m);
  font-size: var(--step--1);
  color: var(--white);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(11, 30, 42, 0.6);
}

/* ==========================================================================
   7. Header + navigation + menu mobile
   ========================================================================== */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: height var(--t-base) var(--ease-soft),
              background var(--t-base) var(--ease-soft),
              border-color var(--t-base) var(--ease-soft),
              transform var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-soft);
}
.site-header.is-scrolled {
  height: 64px;
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
}

/* Barre de progression de lecture (fil cyan en haut) */
.readbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 101;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__word { line-height: 1; }

/* Nav desktop */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1.3vw, 2.1rem);
}
.nav__link {
  position: relative;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-2);
  padding: 0.4em 0;
  transition: color var(--t-fast) var(--ease-soft);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

/* Burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  background: var(--white);
}
.burger__lines,
.burger__lines::before,
.burger__lines::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-fast) var(--ease-soft),
              top var(--t-base) var(--ease-out);
}
.burger__lines { top: 50%; margin-top: -1px; }
.burger__lines::before { top: -6px; }
.burger__lines::after  { top: 6px; }
body.nav-open .burger__lines { background: transparent; }
body.nav-open .burger__lines::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.nav-open .burger__lines::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Menu mobile plein écran */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--t-slow) var(--ease-out),
              visibility 0s linear var(--t-slow);
  overflow-y: auto;
}
body.nav-open .mobile-nav {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--t-slow) var(--ease-out), visibility 0s;
}
body.nav-open { overflow: hidden; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.mobile-nav__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 4vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 0.16em 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              color var(--t-fast) var(--ease-soft);
}
body.nav-open .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}
/* stagger d'apparition */
body.nav-open .mobile-nav__link:nth-child(1) { transition-delay: 0.12s; }
body.nav-open .mobile-nav__link:nth-child(2) { transition-delay: 0.18s; }
body.nav-open .mobile-nav__link:nth-child(3) { transition-delay: 0.24s; }
body.nav-open .mobile-nav__link:nth-child(4) { transition-delay: 0.30s; }
body.nav-open .mobile-nav__link:nth-child(5) { transition-delay: 0.36s; }
.mobile-nav__link:hover { color: var(--cyan); }
.mobile-nav__foot {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: var(--ink-3);
  font-size: var(--step-0);
}
.mobile-nav__foot a { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1rem, 0.6rem + 2vw, 2.5rem));
  padding-bottom: var(--space-2xl);
  overflow: clip;
}
.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow { margin-bottom: var(--space-s); }

.hero__title {
  font-size: var(--step-hero);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: none;
}
/* lignes masquées pour la révélation cinétique */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.hero__line > span {
  display: block;
}

.hero__geo {
  margin-top: var(--space-l);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink-2);
}
.hero__geo [data-geo-ville] {
  color: var(--cyan);
  font-weight: 700;
}

.hero__sub {
  margin-top: var(--space-m);
  max-width: 64ch;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-3);
}

.hero__actions {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
.hero__reassurance {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* Média du hero : grande image révélée + scale au scroll */
.hero__media-wrap {
  margin-top: var(--space-2xl);
  position: relative;
  z-index: 2;
}
.hero__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--navy);
  box-shadow: var(--shadow-l);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero__media-tag {
  position: absolute;
  left: var(--space-l);
  bottom: var(--space-l);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy-90);
  padding: 0.6em 1em;
  border-radius: 999px;
}
.hero__media-tag::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
}

/* ==========================================================================
   9. Sections d'accueil
   ========================================================================== */

/* Bandeau preuve / chiffres */
.proof {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
}
.proof__item {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.proof__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.proof__num .u-unit { color: var(--cyan); }
.proof__label {
  font-size: var(--step-0);
  color: var(--ink-3);
  line-height: 1.4;
}

/* Bloc problème → promesse (deux colonnes) */
.pp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.pp__col h3 { font-size: var(--step-2); margin-bottom: var(--space-m); }
.pp__col p { color: var(--ink-3); font-size: var(--step-1); line-height: 1.55; }
.pp__col--problem { color: var(--ink-3); }
.pp__tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-s);
}
.pp__tag--promise { color: var(--cyan); }
.pp__transition {
  grid-column: 1 / -1;
  margin-top: var(--space-l);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  color: var(--ink);
}

/* Méthode en bref (timeline 01→05) */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-l);
  padding: var(--space-l) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--cyan);
  letter-spacing: 0;
}
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
}
.step__text { color: var(--ink-3); margin-top: 0.3em; }

/* Aperçu réalisations — bloc honnête */
.cases-note {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.cases-note__media { aspect-ratio: 4 / 3; }
.cases-note__viz { display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.cases-note__viz .cases-note__media { width: 100%; }
.cases-note__detail { margin: 0; text-align: center; }

/* Bloc fondateur */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.founder__media {
  aspect-ratio: 4 / 5;
  max-width: 420px;
}
.founder__quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.founder__sign {
  margin-top: var(--space-l);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.founder__name { font-weight: 700; color: var(--ink); }
.founder__role { color: var(--ink-3); font-size: var(--step--1); }
.founder__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  flex: none;
}

/* ==========================================================================
   10. Galerie horizontale épinglée (signature 1)
   ========================================================================== */
.h-gallery {
  position: relative;
  background: var(--white);
}
.h-gallery__head {
  padding-top: var(--space-3xl);
}
.h-gallery__pin {
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.h-gallery__rail {
  display: flex;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.h-card {
  position: relative;
  flex: 0 0 min(78vw, 560px);
  height: min(67vh, 515px);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-m);
}
.h-card__img {
  position: absolute;
  inset: 0;
}
.h-card__img img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  will-change: transform; /* parallax interne */
}
.h-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(11, 30, 42, 0.82) 100%);
}
.h-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-l);
  color: var(--white);
}
.h-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.h-card__title {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--white);
}
.h-card__result {
  margin-top: var(--space-s);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--step-0);
}
.h-gallery__progress {
  margin: var(--space-l) auto 0;
  width: min(100%, var(--container-w));
  padding-inline: var(--gutter);
}
.h-gallery__progress-track {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.h-gallery__progress-fill {
  height: 100%;
  width: 100%;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left center;
}
.h-gallery__hint {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}

/* Fallback non-épinglé (mobile / reduced-motion) : scroll-snap horizontal */
.h-gallery--static .h-gallery__pin {
  height: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-l);
}
.h-gallery--static .h-card { scroll-snap-align: center; }

/* ==========================================================================
   11. Séquence immersive navy (signature 2)
   ========================================================================== */
.immersive {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  overflow: clip;
}
.immersive__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.immersive__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  will-change: transform;
}
.immersive__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 30, 42, 0.7) 0%, rgba(11, 30, 42, 0.92) 100%);
}
.immersive__inner {
  position: relative;
  z-index: 3;
}
.immersive__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--white);
  max-width: 18ch;
}
.immersive__lead .u-mark { color: var(--white); }
.immersive__steps {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}
.imm-step {
  border-top: 2px solid var(--line-on-navy);
  padding-top: var(--space-m);
}
.imm-step__k {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cyan);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
}
.imm-step__t {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--white);
}
.imm-step__d {
  margin-top: 0.4em;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--step-0);
}

/* ==========================================================================
   12. FAQ accordéon
   ========================================================================== */
.faq {
  max-width: 880px;
  margin-inline: auto;
}
.faq__item {
  border-top: 1px solid var(--line);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  text-align: left;
  padding: var(--space-l) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.faq__icon {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--cyan);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.faq__icon::before { width: 16px; height: 2px; }
.faq__icon::after  { width: 2px; height: 16px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-slow) var(--ease-soft);
}
.faq__a-inner {
  padding-bottom: var(--space-l);
  color: var(--ink-3);
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: 68ch;
}
.faq__q[aria-expanded="true"] + .faq__a { /* hauteur posée en JS via scrollHeight */ }

/* ==========================================================================
   13. Bandeau CTA navy
   ========================================================================== */
.cta-band {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  overflow: clip;
}
.cta-band__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.cta-band__title {
  font-size: var(--step-4);
  color: var(--white);
  letter-spacing: -0.03em;
}
.cta-band__text {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  color: rgba(255, 255, 255, 0.7);
}
.cta-band__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding-block: var(--space-2xl) var(--space-xl);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-xl) var(--space-l);
}
.footer__brand .brand { font-size: 1.4rem; }
.footer__pitch {
  margin-top: var(--space-m);
  color: var(--ink-3);
  font-size: var(--step-0);
  max-width: 36ch;
}
.footer__nap {
  margin-top: var(--space-l);
  font-style: normal;
  color: var(--ink-3);
  font-size: var(--step-0);
  line-height: 1.7;
}
.footer__nap a { color: var(--ink); font-weight: 600; }
.footer__nap a:hover { color: var(--cyan); }

.footer__col h3 {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-m);
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.7em; }
.footer__col a {
  color: var(--ink-3);
  font-size: var(--step-0);
  transition: color var(--t-fast) var(--ease-soft);
}
.footer__col a:hover { color: var(--cyan); }

.footer__bottom {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.footer__legal a:hover { color: var(--cyan); }
.footer__nlpd {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.footer__nlpd::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
}

/* ==========================================================================
   14b. Contact WhatsApp
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 98;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 52px;
  min-height: 52px;
  padding: 0.55rem 1rem 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(11, 30, 42, 0.16);
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft),
              opacity var(--t-fast) var(--ease-soft);
}
.whatsapp-float__icon {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.whatsapp-float:hover {
  border-color: rgba(37, 211, 102, 0.62);
  box-shadow: 0 14px 32px rgba(11, 30, 42, 0.22);
  transform: translateY(-2px);
}
.whatsapp-float:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 999px;
}
body.nav-open .whatsapp-float,
body.r-modal-open .whatsapp-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

@media (max-width: 560px) {
  .whatsapp-float {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 11px;
  }
  .whatsapp-float__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { transition: none; }
  .whatsapp-float:hover { transform: none; }
}

@media print {
  .whatsapp-float { display: none !important; }
}

/* ==========================================================================
   15. Utilitaires reveal / motion
   ========================================================================== */
/* État de départ posé par engine.js via gsap.set ; ici, fallback CSS si JS absent. */
.js-ready [data-reveal],
.js-ready [data-reveal-item] { will-change: transform, opacity; }

/* Mot enveloppé par engine.js (splitLines) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word__in { display: inline-block; will-change: transform; }

/* Avant init JS : le contenu reste visible (anti-flash, anti-CLS). */
html:not(.js-ready) [data-reveal],
html:not(.js-ready) [data-reveal-item],
html:not(.js-ready) [data-split] { opacity: 1 !important; transform: none !important; }

/* Fallback reveal SANS GSAP : engine.js ajoute .reveal-css sur <html> puis .is-in
   sur chaque élément via IntersectionObserver ; la transition CSS fait le fondu. */
html.reveal-css [data-reveal],
html.reveal-css [data-reveal-item],
html.reveal-css [data-split] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.reveal-css [data-reveal].is-in,
html.reveal-css [data-reveal-item].is-in,
html.reveal-css [data-split].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-css [data-reveal],
  html.reveal-css [data-reveal-item],
  html.reveal-css [data-split] { transform: none; } /* fondu seul, pas de déplacement */
}

/* ==========================================================================
   16. Focus & accessibilité
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 0.8em 1.2em;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  font-weight: 600;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus { top: 0; }

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

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .proof__grid { grid-template-columns: repeat(2, 1fr); }
  .immersive__steps { grid-template-columns: 1fr; gap: 0; }
  .imm-step { border-top: 1px solid var(--line-on-navy); padding-block: var(--space-m); }
}

@media (max-width: 860px) {
  .nav,
  .header-actions .btn { display: none; }
  .burger { display: block; }

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

  .pp { grid-template-columns: 1fr; gap: var(--space-xl); }
  .cases-note { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .founder__media { max-width: 320px; }

  .hero__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  :root { --space-3xl: 4.5rem; }
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .h-card { flex-basis: 84vw; }
}

/* ==========================================================================
   17b. Page services — fil d'Ariane + chaîne des 5 services
   ========================================================================== */
.hero--page { padding-bottom: var(--space-xl); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-l);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--cyan); }
.crumbs span[aria-current] { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--cyan); }

.chain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-s);
}
.chain__link {
  position: relative;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-l);
  background: var(--paper);
}
.chain__link--accent { border-top-color: var(--cyan); }
/* connecteur visuel entre les maillons (desktop) */
.chain__link:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(var(--space-s) * -0.5 - 0.4em);
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyan);
  font-weight: 700;
  z-index: 1;
}
.chain__k {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.chain__t {
  margin: var(--space-s) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.25;
  color: var(--ink);
}

@media (max-width: 980px) {
  .chain { grid-template-columns: 1fr 1fr; }
  .chain__link::after { display: none; }
}
@media (max-width: 560px) {
  .chain { grid-template-columns: 1fr; }
}

/* ==========================================================================
   17c. Page réalisations — grille de projets + étude de cas chiffrée
   ========================================================================== */
.projects { align-items: stretch; }

/* Carte projet : média + type en surimpression, méta, titre, KPI, lien */
.project-card { padding: 0; overflow: hidden; }
.project-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gray-100);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow, 0.6s) var(--ease-out);
}
.project-card:hover .project-card__media img { transform: scale(1.04); }
a.project-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 30, 42, 0.28) 100%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-soft);
}
a.project-card__media:hover::after { opacity: 1; }
.project-card__type {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--navy-90);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l);
  flex: 1 1 auto;
}
.project-card__meta {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan);
}
.project-card__title {
  margin: 0.1em 0 0;
  font-size: var(--step-1);
  line-height: 1.18;
}
.project-card__desc {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--step-0);
  line-height: 1.5;
}
.project-card__result {
  margin: var(--space-s) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.45;
}
.project-card__kpi {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.project-card__foot { margin: var(--space-s) 0 0; }
.projects__note { margin-top: var(--space-l); }

/* Étude de cas : intro, composition des résultats sur fond navy */
.immersive__case-intro {
  position: relative;
  z-index: 3;
  margin-top: var(--space-l);
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--step-1);
  line-height: 1.6;
}
.immersive__results {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line-on-navy);
}
.immersive__results-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 var(--space-m);
}
.case-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-l);
}
.case-kpi {
  border-left: 2px solid var(--cyan);
  padding-left: var(--space-m);
}
.case-kpi__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
}
.case-kpi__num .u-unit {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0;
}
.case-kpi__label {
  margin: var(--space-s) 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--step-0);
  line-height: 1.5;
}
.case-stack {
  margin: var(--space-l) 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}
.case-disclaimer {
  margin: var(--space-m) 0 0;
  max-width: 70ch;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--step--1);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .case-kpis { grid-template-columns: 1fr; gap: var(--space-m); }
}

/* ==========================================================================
   18. prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { display: none; }
  .hero__media img,
  .h-card__img img,
  .project-card__media img,
  .immersive__bg img { transform: none !important; }
  /* Galerie : passe en défilement statique (pas de pin) */
  .h-gallery__pin { height: auto; overflow-x: auto; }
}

/* ==========================================================================
   19. Pages légales & plan du site (mentions, confidentialité, sitemap)
   Sobres, lisibles, cohérentes avec la variante cinétique.
   ========================================================================== */
.legal-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: var(--space-m);
}
.legal-crumb a { color: var(--ink-3); }
.legal-crumb a:hover { color: var(--cyan); }
.legal-crumb [aria-current="page"] { color: var(--ink-2); font-weight: 600; }
.legal-crumb span[aria-hidden="true"] { opacity: 0.4; }

.legal-title { font-size: var(--step-4); margin-top: var(--space-2xs); }

.legal-lede {
  margin-top: var(--space-m);
  max-width: 40ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
}
.legal-prose .legal-lede,
.legal-lede { max-width: 62ch; }

.legal-updated {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Corps de texte légal — colonne étroite, hiérarchie nette */
.legal-prose { max-width: 720px; }
.legal-prose h2 {
  font-size: var(--step-2);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.legal-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-prose h3 {
  font-size: var(--step-1);
  margin-top: var(--space-l);
}
.legal-prose p {
  margin-top: var(--space-s);
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.62;
}
.legal-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); transition: text-decoration-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.legal-prose a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.legal-prose ul:not(.legal-defs):not(.sitemap-list) {
  margin-top: var(--space-s);
  padding-left: 1.25em;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.62;
}
.legal-prose ul:not(.legal-defs):not(.sitemap-list) li { margin-top: 0.4em; }
.legal-prose ul:not(.legal-defs):not(.sitemap-list) li::marker { color: var(--cyan); }

/* Carte d'adresse / coordonnées */
.legal-card {
  display: block;
  margin-top: var(--space-m);
  padding: var(--space-m) var(--space-l);
  background: var(--gray-100);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--cyan);
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-2);
  font-size: var(--step-0);
}
.legal-card strong { color: var(--ink); }

/* Liste de définitions (clé / valeur) */
.legal-defs {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
}
.legal-defs li {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) 1fr;
  gap: var(--space-m);
  padding: 0.85em 0;
  border-bottom: 1px solid var(--line);
}
.legal-defs li:first-child { border-top: 1px solid var(--line); }
.legal-defs__k {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.legal-defs__v { color: var(--ink-2); font-size: var(--step-0); }

/* Plan du site — groupes en grille de cartes */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
  margin-top: var(--space-l);
}
.sitemap-group {
  padding: var(--space-l);
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  border-radius: var(--radius-m);
  transition: border-top-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.sitemap-group:hover { border-top-color: var(--cyan); transform: translateY(-2px); }
.sitemap-group__title {
  font-size: var(--step-1);
  margin-bottom: var(--space-s);
}
.sitemap-group__note {
  margin-top: -0.2em;
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li {
  border-bottom: 1px solid var(--line);
}
.sitemap-list li:last-child { border-bottom: 0; }
.sitemap-list a {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.7em 0;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--step-0);
  transition: color var(--t-base) var(--ease-out), padding-left var(--t-base) var(--ease-out);
}
.sitemap-list a:hover { color: var(--cyan); padding-left: 0.3em; }
.sitemap-list a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 0.45em;
  border-radius: 1px;
  background: var(--cyan);
  opacity: 0.55;
  transition: opacity var(--t-base) var(--ease-out);
}
.sitemap-list a:hover::before { opacity: 1; }

@media (max-width: 720px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .legal-defs li { grid-template-columns: 1fr; gap: 0.2em; }
}


/* ===== PERF SCROLL (correctif lag) — ajouté automatiquement ===== */
/* Header sans backdrop-filter : fond opaque propre quand on a défilé. */
.header.is-scrolled, .site-header.is-scrolled,
header.is-scrolled, .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 0 rgba(11, 30, 42, 0.06);
}
/* Lissage du rendu pendant le smooth-scroll (compositing). */
.hero img, [data-parallax], .parallax, .gallery img, .gallery__slide img { backface-visibility: hidden; }

/* =======================================================================
 * RÉVISION ACCUEIL — logo réel, hero à image de fond, marquee, section trust
 * (ajout du 2026-06-21)
 * ===================================================================== */

/* Logo réel (image) à la place du SVG */
.brand__logo { height: 30px; width: auto; display: block; }
.footer__brand .brand__logo { height: 36px; }

/* Header toujours lisible (fond clair) — il passe au-dessus du hero sombre */
.site-header { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.97); }

/* HERO COVER : image de fond sombre + voile pour la lisibilité du texte blanc */
.hero--cover { color: #fff; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.hero--cover .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero--cover .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; backface-visibility: hidden; }
/* Vidéo de fond du hero (injectée par engine.js ; l'image .jpg reste le poster/fallback) */
.hero--cover .hero__bg video.hero__video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; backface-visibility: hidden; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.hero--cover .hero__bg video.hero__video.is-playing { opacity: 1; }
.hero--cover .hero__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,20,29,0.80) 0%, rgba(8,20,29,0.60) 44%, rgba(8,20,29,0.88) 100%),
    radial-gradient(120% 90% at 12% 18%, rgba(0,194,212,0.12), transparent 55%);
}
.hero--cover .mesh--hero { z-index: 1; opacity: 0.45; }
.hero--cover .hero__inner { color: #fff; }
.hero--cover .hero__title { color: #fff; }
.hero--cover .hero__title .u-mark { color: #fff; }
.hero--cover .hero__sub { color: rgba(255, 255, 255, 0.84); }
.hero--cover .eyebrow, .eyebrow--on-dark { color: rgba(255, 255, 255, 0.74); }
.hero--cover .hero__reassurance { color: rgba(255, 255, 255, 0.62); }
.link-arrow--on-dark { color: #fff; }
.link-arrow--on-dark:hover { color: var(--cyan); }

/* MARQUEE (bande défilante — motion) */
.marquee { border-block: 1px solid var(--line); padding-block: 1.05rem; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; align-items: center; gap: 1.5rem; animation: alg-marquee 34s linear infinite; will-change: transform; }
.marquee__track span { font-size: clamp(1.05rem, 0.8rem + 1.5vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em; color: var(--slate, #2F2937); }
.marquee__dot { color: var(--cyan); font-size: 0.55em; transform: translateY(-0.15em); }
@keyframes alg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* SECTION TRUST (Algoria prend tout en charge) : image qui remplit la hauteur */
.trust__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: stretch; }
.trust__media { margin: 0; border-radius: 16px; overflow: hidden; line-height: 0; box-shadow: 0 24px 60px -34px rgba(11,30,42,0.45); min-height: 100%; }
.trust__media img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: center; display: block; }
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1rem + 1.8vw, 2.6rem) clamp(1.6rem, 1rem + 2vw, 3rem); align-content: center; }
.trust .feature__text { color: var(--ink-3); }
@media (max-width: 880px) { .trust__inner { grid-template-columns: 1fr; } .trust__media img { min-height: 280px; } }
@media (max-width: 560px) { .trust__grid { grid-template-columns: 1fr; } }

/* Carte service « accent » (la chaîne reliée) */
.service-card--accent { background: linear-gradient(180deg, rgba(0,194,212,0.07), rgba(0,194,212,0)); border-color: rgba(0,194,212,0.38); }

/* Carte de fin de galerie (CTA, sans image) */
.h-card--end { background: var(--navy); color: #fff; display: flex; align-items: center; }
.h-card__body--end { position: static; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.h-card--end .h-card__meta { color: var(--cyan); }
.h-card--end .h-card__title, .h-card--end .h-card__result { color: #fff; }
.h-card__body--end .btn { margin-top: 1.4rem; }

/* =======================================================================
 * RÉALISATIONS — cartes projets avec révélation au survol (slider)
 * ===================================================================== */
.h-gallery--proj .h-card { cursor: pointer; }
.h-gallery--proj .h-card__shade { transition: opacity .45s ease; }
.h-gallery--proj .h-card:hover .h-card__shade,
.h-gallery--proj .h-card:focus-within .h-card__shade { opacity: 1; }
.h-gallery--proj .h-card__title { transition: transform .4s var(--ease-soft, ease); }
.h-gallery--proj .h-card__reveal {
  max-height: 0; opacity: 0; transform: translateY(10px); overflow: hidden;
  transition: max-height .5s var(--ease-soft, ease), opacity .4s ease, transform .45s ease;
}
.h-gallery--proj .h-card:hover .h-card__reveal,
.h-gallery--proj .h-card:focus-within .h-card__reveal { max-height: 18rem; opacity: 1; transform: none; }
.h-gallery--proj .h-card__desc { color: rgba(255,255,255,0.92); font-size: var(--step--1, 0.92rem); line-height: 1.5; margin-top: 0.5em; }
.h-gallery--proj .h-card__metric { color: var(--cyan); font-weight: 600; font-size: var(--step--1, 0.92rem); margin-top: 0.7em; }
.h-gallery--proj .h-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Tactile / statique : tout visible (pas de survol possible) */
@media (hover: none) {
  .h-gallery--proj .h-card__reveal { max-height: none; opacity: 1; transform: none; }
}
.h-gallery--static.h-gallery--proj .h-card__reveal { max-height: none; opacity: 1; transform: none; }

/* =======================================================================
 * HEADER v2 (2026-06-22) — logo agrandi, lien Accueil, méga-menu Services
 * ===================================================================== */

/* 1. Logo plus présent dans le header (le footer garde sa taille : 36px). */
.brand__logo { height: 46px; transition: height var(--t-base) var(--ease-soft); }
.site-header.is-scrolled .brand__logo { height: 40px; }

/* 2. Méga-menu Services — desktop : survol souris + focus clavier --------- */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__link--mega { display: inline-flex; align-items: center; gap: 0.34em; cursor: pointer; }
.nav__chev { width: 0.7em; height: 0.7em; opacity: 0.65;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-soft); }
.nav__item:hover .nav__chev,
.nav__item:focus-within .nav__chev { transform: rotate(180deg); opacity: 1; }

/* Pont invisible déclencheur -> panneau : le survol ne se coupe pas dans le vide. */
.nav__item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 14px;
  width: min(384px, 88vw);
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s linear var(--t-base);
  z-index: 120;
}
.nav__item:hover .mega,
.nav__item:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s;
}
.mega__item { display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.7rem 0.8rem; border-radius: var(--radius-s);
  transition: background var(--t-fast) var(--ease-soft); }
.mega__item:hover,
.mega__item:focus-visible { background: var(--cyan-08); outline: none; }
.mega__num { flex: none; font-size: 0.72rem; line-height: 1; padding-top: 0.34rem;
  color: var(--cyan); letter-spacing: 0.04em; }
.mega__txt { display: flex; flex-direction: column; gap: 0.1rem; }
.mega__title { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  line-height: 1.25; color: var(--ink); }
.mega__desc { font-size: 0.82rem; line-height: 1.4; color: var(--ink-3); }
.mega__all { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem;
  padding: 0.75rem 0.8rem 0.55rem; border-top: 1px solid var(--line);
  font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.mega__all svg { width: 0.95em; height: 0.95em;
  transition: transform var(--t-base) var(--ease-out); }
.mega__all:hover { color: var(--cyan); }
.mega__all:hover svg { transform: translateX(4px); }

/* 3. Accordéon « Services » du menu mobile (pas de survol sur tactile) ---- */
.mnav-acc__sum { display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; cursor: pointer; list-style: none; }
.mnav-acc__sum::-webkit-details-marker { display: none; }
.mnav-acc__chev { width: 0.5em; height: 0.5em; flex: none; opacity: 0.7;
  transition: transform var(--t-base) var(--ease-out); }
.mnav-acc[open] .mnav-acc__chev { transform: rotate(180deg); }
.mnav-acc__list { display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.5rem 0 0.8rem 0.15rem; }
.mnav-acc__list a { display: block; font-family: var(--font-text); font-weight: 500;
  font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.45rem); line-height: 1.3;
  color: var(--ink-2); padding: 0.3em 0; transition: color var(--t-fast) var(--ease-soft); }
.mnav-acc__list a:hover { color: var(--cyan); }

/* 4. Bascule burger plus tôt (la nav desktop est plus large : Accueil + méga). */
@media (max-width: 960px) {
  .site-header .nav,
  .site-header .header-actions .btn { display: none; }
  .site-header .burger { display: block; }
}

/* ==========================================================================
   16. RÉALISATIONS RÉELLES — cartes cliquables, modale projet, lightbox
   (Facturia, MsFid, StockPilot ; données : #realisations-data)
   ========================================================================== */

/* --- En-tête de la galerie --- */
.h-gallery__lead {
  margin-top: var(--space-s);
  max-width: 64ch;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --- Cartes projet : bouton plein cadre ouvrant la modale --- */
.h-card__open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.h-card__open:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
  border-radius: var(--radius-l);
}
/* Dégradé bas renforcé pour la lisibilité du titre par-dessus une vraie capture */
.h-card--real .h-card__shade {
  background: linear-gradient(180deg, transparent 28%, rgba(11, 30, 42, 0.45) 58%, rgba(11, 30, 42, 0.92) 100%);
}
.h-card--real .h-card__img img { object-position: top center; }
.h-card__dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--accent, var(--cyan));
  box-shadow: 0 0 0 4px rgba(0, 194, 212, 0.18);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, var(--cyan)) 26%, transparent);
}
.h-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.9em;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: #fff;
}
.h-card__cta svg { transition: transform var(--t-fast) var(--ease-out); }
.h-card--real:hover .h-card__cta svg,
.h-card--real:focus-within .h-card__cta svg { transform: translateX(4px); }
/* Liseré couleur de marque qui se trace au survol */
.h-card--real::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 3;
  background: var(--accent, var(--cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-base) var(--ease-out);
}
.h-card--real:hover::after,
.h-card--real:focus-within::after { transform: scaleX(1); }

/* --- MODALE PROJET --- */
body.r-modal-open { overflow: hidden; }
.r-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-soft), visibility var(--t-base);
}
@media (min-width: 720px) { .r-modal { align-items: center; } }
.r-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.r-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 26, 0.62);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.r-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-l);
  transform: translateY(30px) scale(0.985);
  transition: transform var(--t-base) var(--ease-out);
}
@media (min-width: 720px) {
  .r-modal__dialog { border-radius: var(--radius-xl); max-height: 90vh; }
}
.r-modal.is-open .r-modal__dialog { transform: none; }
.r-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-m);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.r-modal__close:hover { transform: rotate(90deg); background: #fff; }
.r-modal__close:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.r-modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Contenu de la modale (injecté par variant.js) --- */
.r-proj__hero {
  position: relative;
  padding: clamp(1.6rem, 1rem + 3vw, 2.8rem);
  padding-top: clamp(2.2rem, 1.4rem + 3vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: #fff;
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--accent, #00C2D4) 15%, #fff) 0%, #fff 62%);
}
.r-proj__logo {
  height: clamp(30px, 1.4vw + 24px, 42px);
  width: auto;
  max-width: 60%;
  display: block;
  margin-bottom: 1rem;
}
.r-proj__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.04;
  color: var(--navy);
}
.r-proj__tagline {
  margin-top: 0.5rem;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.4;
}
.r-proj__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.r-chip {
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.32em 0.78em;
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--navy-04);
  border: 1px solid var(--line);
}
.r-chip--accent {
  color: #fff;
  background: var(--accent, var(--navy));
  border-color: transparent;
}
.r-proj__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.15em;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.r-btn--primary { color: #fff; background: var(--accent, var(--navy)); box-shadow: var(--shadow-m); }
.r-btn--ghost { color: var(--navy); background: #fff; border: 1px solid var(--line); }
.r-btn:hover { transform: translateY(-2px); }
.r-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.r-btn svg { flex: 0 0 auto; }

.r-proj__body {
  padding: clamp(1.4rem, 1rem + 3vw, 2.6rem);
  display: grid;
  gap: clamp(1.6rem, 1rem + 3vw, 2.4rem);
}
.r-section__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--navy);
}
.r-section__title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1.05em;
  border-radius: 3px;
  background: var(--accent, var(--cyan));
}
.r-proj__desc {
  max-width: 74ch;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.7;
}
.r-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .r-features { grid-template-columns: 1fr 1fr; } }
.r-features li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.5;
}
.r-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--accent, var(--cyan));
}
.r-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.r-stack span {
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.35em 0.75em;
  border-radius: 8px;
  color: var(--ink-2);
  background: var(--gray-100);
  border: 1px solid var(--line);
}

/* --- Galerie WEB (cadres navigateur) --- */
.r-gallery {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1.5vw, 1.3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .r-gallery { grid-template-columns: 1fr 1fr; } }
.r-shot { display: block; }
.r-browser {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-m);
  cursor: zoom-in;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.r-browser:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.r-browser:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.r-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--line);
}
.r-browser__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #cfd6dd; }
.r-browser img { display: block; width: 100%; height: auto; }
.r-shot__cap {
  margin-top: 0.45rem;
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --- Galerie MOBILE (cadres téléphone, défilement horizontal) --- */
.r-gallery--mobile {
  display: flex;
  gap: clamp(0.9rem, 0.5rem + 1.6vw, 1.5rem);
  overflow-x: auto;
  padding: 0.2rem 0.1rem 0.7rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.r-phone {
  flex: 0 0 auto;
  width: clamp(152px, 42vw, 198px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  scroll-snap-align: center;
}
.r-phone:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 30px; }
.r-phone__frame {
  position: relative;
  padding: 8px;
  border-radius: 28px;
  background: #0B1E2A;
  box-shadow: var(--shadow-l);
  transition: transform var(--t-fast) var(--ease-out);
}
.r-phone:hover .r-phone__frame { transform: translateY(-3px); }
.r-phone__frame::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 2;
}
.r-phone__frame img { display: block; width: 100%; height: auto; border-radius: 20px; }
.r-phone__cap {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-align: center;
}

/* --- LIGHTBOX (zoom image) --- */
.r-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 2rem);
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(5, 12, 18, 0.93);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-soft), visibility var(--t-base);
}
.r-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.r-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-width: min(1100px, 92vw);
}
.r-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.r-lightbox__cap {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--step-0);
  text-align: center;
}
.r-lightbox__btn {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--t-fast), transform var(--t-fast);
}
.r-lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); }
.r-lightbox__btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.r-lightbox__close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
@media (max-width: 620px) {
  .r-lightbox__nav { position: absolute; bottom: clamp(1rem, 5vw, 2.4rem); }
  .r-lightbox__prev { left: 18%; }
  .r-lightbox__next { right: 18%; }
}

/* --- Préférence : mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  .r-modal,
  .r-modal__dialog,
  .r-lightbox,
  .r-modal__close,
  .r-btn,
  .r-browser,
  .r-phone__frame,
  .h-card__cta svg,
  .h-card--real::after { transition: none !important; }
  .r-modal__dialog { transform: none !important; }
}

/* ==========================================================================
   17. SHOWCASE RÉALISATIONS — blocs verticaux, captures ENTIÈRES (v2)
   Remplace l'ancienne galerie de cartes rognées. Capture web en cadre
   navigateur (jamais coupée) + téléphone en incrustation. Texte à côté.
   ========================================================================== */
.r-showcase { background: var(--white); padding-block: var(--space-2xl) var(--space-3xl); }
.r-showcase__head { margin-bottom: clamp(2rem, 1rem + 4vw, 4rem); max-width: var(--container-w); }
.r-showcase__head h1 { font-size: var(--step-4); font-weight: 700; line-height: 1.04; }
.r-lead { margin-top: var(--space-s); max-width: 64ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; }

.r-show {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.4rem, 1.4rem + 4vw, 5rem);
  border-top: 1px solid var(--line);
}
.r-show:first-of-type { border-top: 0; padding-top: var(--space-s); }
@media (min-width: 920px) {
  .r-show { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
  .r-show:nth-child(even) .r-show__media { order: 2; }
}

.r-show__media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: clamp(1.3rem, 0.8rem + 2.4vw, 3rem);
  padding-bottom: clamp(1.9rem, 1rem + 3vw, 3.6rem);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-xl);
  background: var(--gray-100);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--cyan)) 26%, #fff) 0%, color-mix(in srgb, var(--accent, var(--cyan)) 8%, #fff) 52%, #fff 100%);
  -webkit-tap-highlight-color: transparent;
}
.r-show__media:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.r-show__browser {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-l);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.r-show__media:hover .r-show__browser { transform: translateY(-6px); box-shadow: 0 50px 90px -42px rgba(11, 30, 42, 0.5); }
.r-show__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.8rem; background: #eef1f4; border-bottom: 1px solid var(--line); }
.r-show__bar i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #c9d2da; }
.r-show__browser img { display: block; width: 100%; height: clamp(220px, 23vw, 350px); object-fit: cover; object-position: top center; }   /* HAUTEUR FIXE -> uniforme entre projets quelle que soit la largeur de colonne */
.r-show__phone {
  position: absolute;
  right: clamp(0.4rem, 0.6vw, 1.1rem);
  bottom: clamp(-0.6rem, 0vw, 0.4rem);
  width: clamp(84px, 9vw, 130px);
  z-index: 2;
  filter: drop-shadow(0 24px 36px rgba(11, 30, 42, 0.36));
}
.r-show__phone-in { position: relative; display: block; padding: 5px; border-radius: 20px; background: #0B1E2A; }
.r-show__phone-in::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 32%; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); }
.r-show__phone-in img { display: block; width: 100%; height: auto; border-radius: 15px; }

.r-show__eyebrow { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--ink-3); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--1); }
.r-show__num { color: var(--accent, var(--cyan)); }
.r-show__title { margin: 0.7rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.02; color: var(--navy); }
.r-show__tagline { margin: 0.5rem 0 0; max-width: 44ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.4; }
.r-show__points { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.r-show__points li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-size: var(--step-0); line-height: 1.45; }
.r-show__points li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--accent, var(--cyan)); }
.r-show__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
.r-show__tags span { font-size: var(--step--1); font-weight: 600; padding: 0.32em 0.72em; border-radius: 8px; background: var(--gray-100); border: 1px solid var(--line); color: var(--ink-2); }
.r-show__cta { margin-top: 1.5rem; }
.r-btn.r-show__cta { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .r-show__browser { transition: none !important; }
}
/* la vignette média est un lien (et non un bouton) */
.r-show__media { text-decoration: none; color: inherit; }

/* Catalogue des réalisations : trois familles clairement séparées. */
.r-catalog-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-m);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 50px -34px rgba(11, 30, 42, 0.48);
}
.r-catalog-nav a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 70px;
  padding: 0.9rem 1.1rem;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.2;
  transition: background var(--t-fast), color var(--t-fast);
}
.r-catalog-nav a:hover { background: #123448; color: var(--cyan); }
.r-catalog-nav a:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.r-catalog-nav a > span { color: var(--cyan); font-size: 0.72rem; letter-spacing: 0.12em; }
.r-catalog-nav a > strong {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  font-size: 0.72rem;
}

.r-category {
  scroll-margin-top: 92px;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
  border-top: 1px solid var(--line);
}
.r-showcase__head + .r-category { border-top: 0; padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.r-category__head {
  display: grid;
  grid-template-columns: clamp(70px, 8vw, 118px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  max-width: 900px;
  margin-bottom: clamp(1.8rem, 1rem + 3vw, 3.5rem);
}
.r-category__num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--cyan) 28%, #fff);
}
.r-category__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--cyan);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.r-category__title {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.35rem + 3vw, 4rem);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.r-category__intro {
  max-width: 58ch;
  margin: 0.8rem 0 0;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.6;
}
.r-category__list > .r-show:first-child { border-top: 0; padding-top: 0; }

/* Sites vitrines : grandes captures homogènes, carte entière visitable. */
.r-category--sites {
  position: relative;
  margin-inline: 0;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  background: linear-gradient(180deg, rgba(235, 246, 249, 0.48), rgba(255, 255, 255, 0));
  border-radius: var(--radius-xl);
}
.r-sites { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 0.8rem + 2vw, 2.2rem); }
@media (min-width: 780px) { .r-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-site {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 28px 60px -44px rgba(11, 30, 42, 0.5);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-fast);
}
.r-site:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 42px 82px -46px rgba(11, 30, 42, 0.6);
}
.r-site:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.r-site__visual {
  display: block;
  padding: clamp(0.65rem, 0.4rem + 1vw, 0.9rem) clamp(0.65rem, 0.4rem + 1vw, 0.9rem) 0;
  background: color-mix(in srgb, var(--accent) 9%, #eef3f5);
}
.r-site__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding-inline: 0.65rem;
  border-radius: 10px 10px 0 0;
  background: #eef1f4;
  border: 1px solid rgba(11, 30, 42, 0.08);
  border-bottom: 0;
}
.r-site__bar i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #c4cdd5; }
.r-site__bar em {
  min-width: 0;
  margin-left: 0.35rem;
  overflow: hidden;
  color: var(--ink-3);
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r-site__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(11, 30, 42, 0.08);
  border-radius: 0 0 10px 10px;
  transition: transform var(--t-slow) var(--ease-out);
}
.r-site:hover .r-site__visual img { transform: scale(1.018); }
.r-site__meta { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.5rem 1rem; padding: clamp(1.2rem, 0.8rem + 1.5vw, 1.7rem); }
.r-site__domain {
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.r-site__name {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 750;
  line-height: 1.05;
}
.r-site__tagline { grid-column: 1 / -1; max-width: 54ch; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.r-site__visit {
  grid-column: 2;
  grid-row: 2;
  color: var(--navy);
  font-size: var(--step--1);
  font-weight: 750;
  white-space: nowrap;
}
.r-site:hover .r-site__visit { color: var(--accent); }

@media (max-width: 720px) {
  .r-catalog-nav { grid-template-columns: 1fr; }
  .r-catalog-nav a { min-height: 58px; }
  .r-category__head { grid-template-columns: 1fr; }
  .r-category__num { font-size: 3rem; }
  .r-category--sites { padding-inline: 0.5rem; }
  .r-site__meta { grid-template-columns: 1fr; }
  .r-site__visit { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .r-site, .r-site__visual img { transition: none !important; }
}

/* ==========================================================================
   18. PAGE DÉDIÉE RÉALISATION (realisation-<slug>.html)
   Réutilise .r-proj__*, .r-gallery, .r-gallery--mobile, .r-lightbox.
   ========================================================================== */
.r-detail { background: var(--white); padding-block: var(--space-l) var(--space-3xl); }
.r-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: clamp(1rem, 0.5rem + 2vw, 2rem); font-size: var(--step--1); color: var(--ink-3); }
.r-crumb a { color: var(--ink-2); text-decoration: none; }
.r-crumb a:hover { color: var(--cyan); }
.r-crumb [aria-current] { color: var(--navy); font-weight: 600; }

.r-proj__hero--page { border: 1px solid var(--line); border-radius: var(--radius-xl); }
.r-proj__hero--page .r-proj__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.r-proj__body--page { padding: clamp(2rem, 1rem + 3vw, 3rem) 0 0; }
.r-section__lead { margin: -0.4rem 0 1rem; color: var(--ink-3); font-size: var(--step--1); }
.r-proj--page .r-section__title { font-size: var(--step-2); }

.r-detail__cta { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); padding: clamp(1.8rem, 1rem + 3vw, 3rem); border-radius: var(--radius-xl); background: var(--navy); color: #fff; text-align: center; }
.r-detail__cta h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: #fff; }
.r-detail__cta p { margin: 0.6rem auto 0; max-width: 60ch; color: rgba(255, 255, 255, 0.82); font-size: var(--step-0); }
.r-detail__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.4rem; }
.r-detail__cta .r-btn--primary { background: var(--cyan); color: var(--navy); }
.r-detail__cta .r-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }

/* ==========================================================================
   19. AJUSTEMENTS v4 — vignettes web uniformes, logos, scroll immersif
   ========================================================================== */
/* Vignettes web à hauteur homogène (la capture entière reste visible au clic) */
.r-gallery .r-browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* Logo de marque dans la vitrine (listing, fond clair) */
.r-show__logo { height: clamp(26px, 1.4vw + 20px, 34px); width: auto; display: block; margin-bottom: 0.8rem; }

/* Logo sur les cartes de la galerie (fond sombre -> pastille blanche lisible) */
.h-card__logo { display: inline-flex; align-items: center; background: #fff; border-radius: 9px; padding: 6px 11px; margin-bottom: 0.7rem; box-shadow: var(--shadow-s); }
.h-card__logo img { height: 20px; width: auto; display: block; }

/* Cartes d'accueil cliquables vers la page dédiée */
.h-card--link { display: block; text-decoration: none; color: inherit; }
.h-card--link .h-card__img img { object-position: top center; }
.h-card--link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: var(--accent, var(--cyan)); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-base) var(--ease-out); }
.h-card--link:hover::after, .h-card--link:focus-visible::after { transform: scaleX(1); }
.h-card--link:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.h-card--link .h-card__title { transition: transform var(--t-fast) var(--ease-out); }
.h-card--link:hover .h-card__title { transform: translateY(-2px); }

/* Scroll immersif des galeries de page dédiée : géré par variant.js via
   gsap.from(immediateRender:false) -> les éléments sont TOUJOURS visibles par
   défaut (aucun contenu caché), l'animation ne fait que les révéler au scroll. */
[data-r-detail] .r-gallery .r-shot,
[data-r-detail] .r-gallery--mobile .r-phone { will-change: transform, opacity; }

/* ==========================================================================
   20. v5 (2026-06-29) — Scènes web immersives, colonne mobile (slides App
   Store), cartes d'accueil refaites (mockup navigateur sur dégradé de marque).
   Remplace l'affichage « grille »/« cartes rognées » des galeries détaillées.
   ========================================================================== */

/* GARDE STRUCTURELLE : les sections de la page détail sont des items de la
   grille .r-proj__body. Sans min-width:0, un enfant en largeur intrinsèque
   (piste de carrousel width:max-content, ou capture large) fait EXPLOSER la
   largeur de toute la grille -> médias géants + carrousel qui ne déborde plus
   (shift=0, pas d'épinglage). min-width:0 laisse la grille rester à sa largeur. */
.r-proj__body > * { min-width: 0; }

/* --- SCÈNES WEB : une capture plein format + un petit texte, alternées,
       révélées une à une au scroll (cf. initDetailGalleries). --- */
.r-scenes {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 1.6rem + 6vw, 7rem);
  margin-top: clamp(0.8rem, 0.4rem + 2vw, 1.8rem);
}
.r-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 0.6rem + 2.2vw, 2.2rem);
  align-items: center;
}
@media (min-width: 860px) {
  /* impair : grand média à gauche, texte à droite ; pair : on inverse — mais le
     média garde TOUJOURS la piste large (1.32fr), le texte la piste étroite.
     grid-row:1 explicite sur LES DEUX : sans ça, le placement « sparse » de Grid
     ne revient pas en arrière (média en col.2 d'abord), et pousse le texte en
     col.1 sur la ligne SUIVANTE -> texte décalé vers le bas (scènes paires). */
  .r-scene { grid-template-columns: 1.32fr 0.68fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
  .r-scene__media { grid-column: 1; grid-row: 1; }
  .r-scene__text { grid-column: 2; grid-row: 1; }
  .r-scene:nth-child(even) { grid-template-columns: 0.68fr 1.32fr; }
  .r-scene:nth-child(even) .r-scene__media { grid-column: 2; grid-row: 1; }
  .r-scene:nth-child(even) .r-scene__text { grid-column: 1; grid-row: 1; }
}
.r-scene__media { margin: 0; will-change: transform, opacity; }
.r-scene .r-browser {
  border-radius: var(--radius-l);
  box-shadow: 0 44px 90px -44px rgba(11, 30, 42, 0.5);
}
.r-scene .r-browser:hover { box-shadow: 0 56px 110px -46px rgba(11, 30, 42, 0.58); }
.r-scene .r-browser img {
  display: block;
  width: 100%;
  height: auto;
}
.r-scene__text { will-change: transform, opacity; }
.r-scene__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--accent, var(--cyan));
}
.r-scene__title {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.r-scene__desc {
  margin: 0.7rem 0 0;
  max-width: 42ch;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --- CARROUSEL MOBILE : slides App Store (déjà cadrées) ou écrans bruts dans un
       cadre épuré. Aucun « trait noir » : pas de notch dessiné.
       DÉFAUT (sans JS) = swipe horizontal natif -> contenu TOUJOURS visible et
       parcourable. Le JS « améliore » en mode épinglé (.r-mcarousel--pinned) où
       le scroll vertical translate la piste de droite à gauche. --- */
/* Section mobile SORTIE de la grille .r-proj__body : un bloc plein (pas un item
   de grille) -> l'épinglage ScrollTrigger du carrousel est fiable (pas de
   pin-spacer coincé dans une grille -> plus de translation avant la section). */
.r-mobile { margin-top: clamp(2.4rem, 1.4rem + 4vw, 4.5rem); }
.r-mobile__head { margin-bottom: clamp(0.8rem, 0.4rem + 1.5vw, 1.6rem); }
.r-mobile .r-section__title { font-size: var(--step-2); }

.r-mcarousel { position: relative; margin-top: clamp(1rem, 0.5rem + 2vw, 2rem); }
.r-mcarousel__pin {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-block: 0.4rem;
}
.r-mcarousel__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: clamp(1.4rem, 0.8rem + 3vw, 3.4rem);
  padding-inline: clamp(0.6rem, 3vw, 3.5rem);
  will-change: transform;
}
.r-mshot {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(236px, 62vw, 320px);
  scroll-snap-align: center;
}
/* Mode épinglé (activé par JS sur desktop) : le pin remplit l'écran et ne défile
   plus nativement ; JS translate la piste. */
.r-mcarousel--pinned .r-mcarousel__pin {
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-snap-type: none;
  padding-block: 0;
}
/* Indice / progression sous le carrousel */
.r-mcarousel__cue { margin: clamp(1rem, 0.5rem + 1.5vw, 1.8rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.r-mcarousel__cue-track { width: min(220px, 56vw); height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.r-mcarousel__cue-fill { display: block; height: 100%; width: 100%; background: var(--accent, var(--cyan)); transform: scaleX(1); transform-origin: left center; }
.r-mcarousel__cue-text { font-size: var(--step--1); color: var(--ink-3); text-align: center; }
.r-mshot__media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.r-mshot__media img { display: block; width: 100%; height: auto; }
.r-mshot__media:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 24px; }

/* slide App Store : déjà cadrée -> coins arrondis + ombre douce, AUCUN cadre ajouté */
.r-mshot--slide .r-mshot__media {
  border-radius: clamp(22px, 5vw, 34px);
  overflow: hidden;
  box-shadow: 0 40px 80px -34px rgba(11, 30, 42, 0.5);
}
.r-mshot--slide .r-mshot__media:hover { transform: translateY(-6px); box-shadow: 0 56px 100px -38px rgba(11, 30, 42, 0.56); }

/* écran brut : cadre téléphone épuré (léger biseau, PAS de notch -> aucun trait noir) */
.r-mshot--screen .r-mshot__media {
  padding: clamp(8px, 1.6vw, 11px);
  border-radius: clamp(30px, 6vw, 42px);
  background: linear-gradient(150deg, #1c2e3b, #0B1E2A);
  box-shadow: 0 40px 80px -34px rgba(11, 30, 42, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.r-mshot--screen .r-mshot__media img { border-radius: clamp(22px, 4.6vw, 32px); }
.r-mshot--screen .r-mshot__media:hover { transform: translateY(-6px); }

.r-mshot__cap {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--navy);
  text-align: center;
}
.r-mshot__cap::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  margin: 0 auto 0.7rem;
  background: var(--accent, var(--cyan));
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .r-scene .r-browser,
  .r-mshot__media { transition: none !important; }
}

/* --- CARTES D'ACCUEIL : même traitement que la vitrine de la page réalisations
       — fond dégradé clair teinté marque + capture web dans un cadre navigateur
       (même forme paysage pour les 3) + petit téléphone en bas à droite. Au
       repos : logo + nom ; au survol : le navigateur se soulève et les détails
       (catégorie + pitch + CTA) se révèlent. Aucun aplat sombre « vide ». --- */
.h-card--show {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--navy);
  padding: clamp(1.05rem, 0.7rem + 1.3vw, 1.7rem);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent, var(--cyan)) 24%, #fff) 0%,
    color-mix(in srgb, var(--accent, var(--cyan)) 8%, #fff) 50%, #fff 100%);
  -webkit-tap-highlight-color: transparent;
}
.h-card--show:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
/* Zone média : navigateur + téléphone. */
.h-card__stage { position: relative; display: block; }
.h-card__browser {
  position: relative; display: block;
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 58px -30px rgba(11, 30, 42, 0.46);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.h-card--show:hover .h-card__browser,
.h-card--show:focus-visible .h-card__browser { transform: translateY(-6px); box-shadow: 0 48px 84px -36px rgba(11, 30, 42, 0.52); }
.h-card__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.72rem; background: #eef1f4; border-bottom: 1px solid var(--line); }
.h-card__bar i { width: 0.56rem; height: 0.56rem; border-radius: 50%; background: #c9d2da; }
/* Capture web : hauteur fixe assez courte pour ne JAMAIS rogner les côtés
   (la box est plus large que toutes les captures -> remplie par la largeur). */
.h-card__shot { display: block; width: 100%; height: clamp(168px, 20vw, 214px); object-fit: cover; object-position: top center; }
/* Petit téléphone ancré en bas à droite de la carte, débordant sur le navigateur. */
.h-card__phone {
  position: absolute; right: clamp(0.55rem, 1vw, 1rem);
  bottom: clamp(0.7rem, 1.4vw, 1.2rem);
  width: clamp(92px, 11.5vw, 120px); z-index: 3;
  filter: drop-shadow(0 22px 30px rgba(11, 30, 42, 0.36));
}
.h-card__phone-in { position: relative; display: block; padding: 4px; border-radius: 18px; background: #0B1E2A; }
.h-card__phone-in::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 30%; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.28); z-index: 1; }
.h-card__phone-in img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* Bloc info sous le navigateur ; réservé à gauche pour ne pas passer sous le tél. */
.h-card__info { position: relative; z-index: 2; margin-top: auto; padding-top: clamp(0.9rem, 0.5rem + 1.1vw, 1.35rem); padding-right: clamp(96px, 11vw, 124px); }
.h-card--show .h-card__logo { height: clamp(23px, 1.1vw + 17px, 29px); width: auto; display: block; margin-bottom: 0.5rem; }
.h-card__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.04; color: var(--navy); }
.h-card--show .h-card__meta { display: block; margin-top: 0.25rem; font-size: var(--step--1); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent, var(--cyan)); }
.h-card__pitch { display: block; margin-top: 0.3rem; max-width: 38ch; color: var(--ink-2); font-size: var(--step-0); line-height: 1.36; }
.h-card__go { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.6rem; font-weight: 700; font-size: var(--step--1); color: var(--accent, var(--cyan)); }
.h-card__go svg { transition: transform var(--t-fast) var(--ease-out); }
.h-card--show:hover .h-card__go svg,
.h-card--show:focus-visible .h-card__go svg { transform: translateX(4px); }
/* Liseré de marque qui se trace en bas au survol. */
.h-card--show::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 4;
  background: var(--accent, var(--cyan));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.h-card--show:hover::after,
.h-card--show:focus-visible::after { transform: scaleX(1); }
/* Détails masqués au repos -> révélés au survol/focus. */
.h-card__reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease-soft), opacity .4s ease; }
.h-card__reveal-in { display: block; padding-top: 0.35rem; transform: translateY(10px); transition: transform .55s var(--ease-soft); }
.h-card--show:hover .h-card__reveal,
.h-card--show:focus-visible .h-card__reveal,
.h-card--show:focus-within .h-card__reveal { max-height: 20rem; opacity: 1; }
.h-card--show:hover .h-card__reveal-in,
.h-card--show:focus-visible .h-card__reveal-in,
.h-card--show:focus-within .h-card__reveal-in { transform: none; }
/* Tactile (pas de survol) ou galerie statique : tout visible. */
@media (hover: none) {
  .h-card--show .h-card__reveal { max-height: none; opacity: 1; }
  .h-card--show .h-card__reveal-in { transform: none; }
}
.h-gallery--static .h-card--show .h-card__reveal { max-height: none; opacity: 1; }
.h-gallery--static .h-card--show .h-card__reveal-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .h-card__browser, .h-card__reveal, .h-card__reveal-in,
  .h-card--show::after, .h-card__go svg { transition: none !important; }
}

/* ==========================================================================
   21. RÉALISATION FORMAT EXCEL — avant/après, bandeau de stats, carte empilée
   (Gex SA). Réutilise .r-browser (cadre fenêtre) + la lightbox existante.
   --accent porté par .r-detail / .r-show (style inline).
   ========================================================================== */

/* Wordmark : projets sans logo image (le nom devient la marque) */
.r-proj__wordmark { display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: .01em; line-height: 1;
  color: var(--accent, var(--navy)); margin-bottom: .7rem; }
.r-show__wordmark { display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); letter-spacing: .01em; color: var(--accent, var(--navy)); margin-bottom: .7rem; }

/* Bandeau de KPI (preuves chiffrées) */
.r-statband { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
@media (min-width: 760px) { .r-statband { grid-template-columns: repeat(4, 1fr); } }
.r-stat { background: #fff; padding: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
.r-stat__val { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); color: var(--accent, var(--navy)); }
.r-stat__lbl { display: block; margin-top: .45rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.4; }

/* Volet = un bloc avant/après */
.r-volet { margin-top: clamp(2.4rem, 1.4rem + 4vw, 5rem); }
.r-volet__head { margin-bottom: clamp(1rem, .6rem + 1.6vw, 1.9rem); }
.r-volet__num { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: var(--step-1); color: var(--accent, var(--cyan)); }
.r-volet .r-section__title { font-size: var(--step-2); margin-top: .2rem; }
.r-volet .r-section__lead { margin-top: .5rem; max-width: 70ch; font-size: var(--step-0); color: var(--ink-2); }

/* Grille avant -> flèche -> après */
.r-ba { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, .6rem + 2vw, 1.6rem); align-items: start; }
@media (min-width: 880px) {
  .r-ba { grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1rem, .4rem + 1.6vw, 2rem); }
}
.r-ba__col { margin: 0; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.r-ba__tag { align-self: flex-start; font-size: var(--step--1); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: .3em .8em; border-radius: 999px; }
.r-ba__tag--before { color: #9a3412; background: #fdf3ee; border: 1px solid #f3d6c4; }
.r-ba__tag--after { color: var(--accent, var(--cyan));
  background: color-mix(in srgb, var(--accent, var(--cyan)) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 28%, #fff); }
.r-ba__arrow { display: flex; align-items: center; justify-content: center; color: var(--accent, var(--cyan)); }
.r-ba__arrow svg { width: 34px; height: 34px; flex: 0 0 auto; }
@media (max-width: 879px) { .r-ba__arrow { transform: rotate(90deg); margin: -.2rem auto; } }
.r-ba figcaption { color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.r-ba figcaption strong { color: var(--navy); }
.r-ba .r-browser { border-radius: var(--radius-m); box-shadow: 0 30px 60px -34px rgba(11, 30, 42, .42); }

/* Captures complémentaires (ex. table de métré, pleine largeur) */
.r-volet__extra { margin-top: clamp(1.2rem, .8rem + 2vw, 2rem); display: grid; gap: clamp(1rem, .6rem + 1.5vw, 1.6rem); }
.r-volet__extra figure { margin: 0; }
.r-volet__extra figcaption { margin-top: .6rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.55; }
.r-volet__extra figcaption strong { color: var(--navy); }
.r-volet__extra .r-browser { border-radius: var(--radius-m); box-shadow: 0 30px 60px -34px rgba(11, 30, 42, .42); }

/* Carte de listing EXCEL : une seule fenêtre tableur (soumission), qui remplit
   tout l'espace — pas d'incrustation (le projet est 100 % desktop, aucun mobile). */
.r-show__media--excel { display: block; padding-bottom: clamp(1.3rem, 0.8rem + 2.4vw, 3rem); }
.r-xl-stack { position: relative; display: block; }
.r-xl-win { display: block; border-radius: 11px; overflow: hidden; background: #fff; }
.r-xl-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; background: #eef1f4; border-bottom: 1px solid var(--line); }
.r-xl-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #c9d2da; }
.r-xl-win img { display: block; width: 100%; height: auto; }
.r-xl-win--front { position: relative; width: 100%; z-index: 2; box-shadow: var(--shadow-l);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.r-show__media:hover .r-xl-win--front { transform: translateY(-6px); box-shadow: 0 50px 90px -42px rgba(11, 30, 42, .5); }
@media (prefers-reduced-motion: reduce) { .r-xl-win--front { transition: none !important; } }

/* ==========================================================================
   22. CORRECTIFS GLOBAUX
   - Titres de cartes : casser les mots longs (« Automatisation ») au lieu de
     les rogner (l'overflow:hidden des cartes coupait le mot).
   - Liens-flèche / eyebrow lisibles sur fond sombre (immersif, CTA, hero).
   ========================================================================== */
.service-card__title, .feature__title, .imm-step__t,
.h-card__name, .h-card__title, .r-show__title {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.cta-band .link-arrow, .hero--cover .link-arrow, .immersive .link-arrow { color: #fff; }
.cta-band .link-arrow:hover, .hero--cover .link-arrow:hover, .immersive .link-arrow:hover { color: var(--cyan); }
.cta-band .eyebrow, .immersive .eyebrow { color: rgba(255, 255, 255, 0.74); }

/* Carte d'accueil EXCEL : aucune incrustation (projet 100 % desktop) — la fenêtre
   tableur s'étire et remplit toute la carte, le texte occupe la pleine largeur. */
.h-card--excel .h-card__stage { flex: 1 1 auto; min-height: 0; display: block; position: relative; }
.h-card--excel .h-card__duo { position: absolute; inset: 0; }
.h-card--excel .h-card__win { position: absolute; display: flex; flex-direction: column;
  border-radius: 9px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.h-card--excel .h-card__win .h-card__bar { padding: .4rem .55rem; }
.h-card--excel .h-card__winshot { position: relative; flex: 1 1 auto; min-height: 0; }
.h-card--excel .h-card__winshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.h-card--excel .h-card__win--back { top: 0; right: 0; width: 62%; height: 86%; z-index: 1;
  box-shadow: 0 16px 34px -18px rgba(11, 30, 42, .45); }
.h-card--excel .h-card__win--front { bottom: 0; left: 0; width: 76%; height: 88%; z-index: 2;
  box-shadow: 0 30px 60px -26px rgba(11, 30, 42, .5);
  transition: transform var(--t-base) var(--ease-out); }
.h-card--excel:hover .h-card__win--front { transform: translateY(-5px); }
.h-card--excel .h-card__info { padding-right: 0; margin-top: 0; }