/* ==========================================================================
   France Web Studio — Design System « Clair »
   Fond blanc, texte noir, accents bleu et vert.
   Blocs : 0) Polices  1) Tokens  2) Base  3) Composants
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. POLICES — toutes hébergées avec le site, aucun appel à Google
   -------------------------------------------------------------------------- */

/* Figtree, variable de 300 à 900, utilisée pour TOUT le site : titres compris.
   Parti pris minimaliste — une seule famille, la hiérarchie se fait par la
   graisse, la taille et l'approche, jamais par un changement de police.
   (Bepory est sortie du dossier déployé, voir ~/francewebstudio-reserve.) */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. TOKENS — toutes les couleurs / tailles / rayons se règlent ici
   -------------------------------------------------------------------------- */
:root {
  /* Fonds */
  --bg:         #ffffff;   /* fond de page */
  --bg-soft:    #f5f8fa;   /* sections alternées */
  --surface:    #ffffff;   /* cartes */
  --surface-2:  #f9fbfc;   /* cartes survolées, champs de formulaire */

  /* Texte */
  --text:       #0b0f14;   /* noir */
  --text-muted: #4c5762;   /* contraste 8:1 sur blanc */
  --text-soft:  #6b7681;   /* labels, mentions légales — 5,2:1 sur blanc */

  /* Traits */
  --line:        #e4e9ee;
  --line-strong: #cfd7e0;

  /* Accent principal — bleu (boutons, liens, icônes) */
  --blue:       #1d6fe0;   /* 4,8:1 sur blanc */
  --blue-hover: #175bbc;
  --blue-ink:   #ffffff;   /* texte posé sur le bleu */
  --blue-soft:  #eaf2fe;
  --blue-line:  #c3dbfb;

  /* Accent secondaire — vert (sur-titres, validations, étapes) */
  --green:       #0a7d52;  /* 5,2:1 sur blanc */
  --green-hover: #086943;
  --green-ink:   #ffffff;
  --green-soft:  #e7f5ee;
  --green-line:  #b7e0cd;

  /* Rayons */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Ombres (neutres et discrètes sur fond clair) */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 12px 28px -14px rgba(16, 24, 40, 0.22);
  --shadow-lg: 0 30px 60px -30px rgba(16, 24, 40, 0.28);
  --shadow-blue: 0 12px 26px -12px rgba(29, 111, 224, 0.45);

  /* Grille */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --gutter: 24px;

  /* Rythme d'animation : trois durées, pas une de plus. Sept valeurs
     différentes traînaient dans la feuille — c'est ce qui donne une
     impression de flottement quand on passe d'un élément à l'autre. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-court: 180ms;   /* couleur, opacité : doit être imperceptible */
  --dur:     240ms;   /* le cas général */
  --t-long:  420ms;   /* déplacements amples, panneaux, pastille de nav */
  /* Deux exceptions assumées hors échelle : la révélation au scroll (620ms)
     et le reflet qui balaie le bouton (780ms). Ce sont des effets de mise en
     scène, pas des retours d'interaction — ils doivent se voir. */

  /* Typographie */
  --font-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;   /* approche resserrée : l'essentiel du côté « minimal » */
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.28rem); letter-spacing: -0.02em; line-height: 1.25; }

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

button { font: inherit; cursor: pointer; }

/* Focus clavier visible partout (jamais supprimé) */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--blue); color: var(--blue-ink); }

/* Lien d'évitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--blue-ink);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   3. COMPOSANTS
   -------------------------------------------------------------------------- */

/* --- Grille ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 11vw, 130px); }
.section--tight { padding-block: clamp(56px, 8vw, 90px); }
.section--alt { background: var(--bg-soft); }

/* Filet de séparation entre deux sections de même fond */
.section--ruled { border-top: 1px solid var(--line); }

/* --- En-tête de section ------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}

.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: scale(0.975); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--blue);
  color: var(--blue-ink);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover { background: var(--blue-hover); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover {
  background: var(--blue-soft);
  border-color: var(--blue-line);
  color: var(--blue-hover);
}

.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Lien fléché discret */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
}
.arrow-link:hover { color: var(--blue-hover); }
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --- Pastille / badge --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px var(--green-soft);
  flex: none;
}

/* --- Barre de navigation « verre liquide » ------------------------------ */
/* L'en-tête lui-même est transparent : c'est la capsule .glass à l'intérieur
   qui porte tout l'effet (flou, saturation, arêtes lumineuses, liseré dégradé). */
.header {
  position: sticky;
  top: 14px;
  z-index: 100;
  margin-top: 14px;
  pointer-events: none;   /* les clics traversent la gouttière autour de la capsule */
}
.header .wrap { pointer-events: none; }

.glass {
  position: relative;
  pointer-events: auto;
  padding: 9px 9px 9px 26px;
  border-radius: var(--r-pill);
  overflow: hidden;       /* découpe les reflets et la barre de progression */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  backdrop-filter: blur(20px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),   /* arête lumineuse en haut */
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),  /* rebond de lumière en bas */
    0 2px 6px rgba(16, 24, 40, 0.04),
    0 14px 34px -14px rgba(16, 24, 40, 0.20);
  transition: background var(--t-long) var(--ease), box-shadow var(--t-long) var(--ease),
              padding var(--t-long) var(--ease), transform var(--t-long) var(--ease);
}

/* Liseré dégradé : un cadre de 1 px découpé au masque, façon bord réfractant */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(130deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(29, 111, 224, 0.40) 30%,
    rgba(10, 125, 82, 0.32) 62%,
    rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Barre de progression de lecture, collée au bas de la capsule */
.glass-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: 0.85;
  pointer-events: none;
}

/* État défilé : la capsule se resserre et se densifie */
.header.is-stuck .glass {
  padding: 7px 7px 7px 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px rgba(16, 24, 40, 0.05),
    0 22px 48px -20px rgba(16, 24, 40, 0.28);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
}

.logo {
  /* inline-block et non inline-flex : un conteneur flex supprime les nœuds de
     texte vides, ce qui collait les mots (« FranceWebStudio. »). */
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.045em;
}
/* « France » et « Studio » en noir, « Web » en bleu, le point final en vert. */
.logo .logo-web { color: var(--blue); }
.logo .logo-dot {
  color: var(--green);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.logo:hover .logo-dot { transform: translateY(-3px) scale(1.25); color: var(--blue); }

/* Le nom complet est bien plus long que l'ancien sigle : on resserre l'approche
   et on réduit la taille dès que la place manque dans la capsule. */
@media (max-width: 1050px) { .nav .logo { font-size: 1.05rem; } }
@media (max-width: 420px)  { .nav .logo { font-size: 0.95rem; } }
/* Zone tactile d'au moins 44 px de haut pour le logo de l'en-tête */
.nav .logo { padding-block: 6px; }

/* Conteneur des liens : sert de repère à la pastille coulissante */
.nav-center { position: relative; display: flex; }

.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 38px;
  border-radius: var(--r-pill);
  background: rgba(29, 111, 224, 0.10);
  box-shadow: inset 0 0 0 1px rgba(29, 111, 224, 0.20);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--pill-x, 0px), -50%);
  transition: transform var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1),
              width var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1),
              opacity var(--dur) var(--ease);
}
.nav-pill.is-on { opacity: 1; }

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--blue); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
/* Ombre resserrée : la capsule rogne ce qui dépasse */
.header .btn--primary { box-shadow: 0 5px 14px -7px rgba(29, 111, 224, 0.85); }

/* Bouton hamburger — masqué au-dessus de 900px */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px -4px rgba(16, 24, 40, 0.3);
  color: var(--text);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.95); }
.nav-toggle svg path { transition: transform var(--dur) var(--ease); transform-origin: center; }
.nav-toggle[aria-expanded="true"] { transform: rotate(90deg); }

/* Tiroir mobile — même matière que la capsule */
.mobile-menu {
  position: fixed;
  top: 88px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 99;
  padding: 12px 24px 28px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 30px 60px -24px rgba(16, 24, 40, 0.32);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-14px) scale(0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1),
              visibility var(--t-long);
}
.mobile-menu.is-open { opacity: 1; transform: none; visibility: visible; }
/* :not(.btn) pour ne pas écraser la couleur du bouton d'appel à l'action */
.mobile-menu a:not(.btn) {
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu a:not(.btn):hover { transform: translateX(8px); color: var(--blue); }
.mobile-menu .btn { margin-top: 20px; }

/* Chaque entrée du tiroir arrive en cascade */
.mobile-menu.is-open > * { animation: menuIn 420ms var(--ease) both; }
.mobile-menu.is-open > *:nth-child(2) { animation-delay: 50ms; }
.mobile-menu.is-open > *:nth-child(3) { animation-delay: 100ms; }
.mobile-menu.is-open > *:nth-child(4) { animation-delay: 150ms; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(70px, 11vw, 130px) clamp(60px, 9vw, 100px);
  text-align: center;
  overflow: hidden;
}

/* Aurore : deux masses de couleur qui dérivent lentement derrière le titre.
   Pas de filtre blur — les dégradés radiaux sont déjà doux, et on n'anime
   que des transform, donc tout reste sur le GPU. */
.aura {
  position: absolute;
  top: -220px;
  left: 50%;
  width: min(1150px, 150vw);
  height: 760px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.aura i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.aura i:nth-child(1) {
  width: 620px;
  height: 520px;
  left: 6%;
  top: 90px;
  background: radial-gradient(circle at 50% 50%, rgba(29, 111, 224, 0.30), transparent 68%);
  animation: auraA 24s ease-in-out infinite;
}
.aura i:nth-child(2) {
  width: 560px;
  height: 500px;
  right: 4%;
  top: 130px;
  background: radial-gradient(circle at 50% 50%, rgba(10, 125, 82, 0.26), transparent 68%);
  animation: auraB 30s ease-in-out infinite;
}
.aura i:nth-child(3) {
  width: 420px;
  height: 380px;
  left: 38%;
  top: 40px;
  background: radial-gradient(circle at 50% 50%, rgba(120, 90, 220, 0.16), transparent 70%);
  animation: auraC 26s ease-in-out infinite;
}

/* La grille de filets qui traînait ici a été retirée : sur un hero qui n'est
   ni un plan ni une carte, elle n'apportait qu'une texture sans signification.
   Les capsules flottantes portent déjà le fond. */

.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { margin-top: 26px; }
.hero h1 .hl { color: var(--blue); }
.hero h1 .hl-green { color: var(--green); }

.hero-lead {
  max-width: 620px;
  margin: 26px auto 0;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

/* Bandeau de réassurance sous le hero */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 44px;
  list-style: none;
  padding: 0;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
}
.trust svg { color: var(--green); flex: none; }

/* --- Cartes ------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--blue-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-muted); font-size: 0.98rem; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border: 1px solid var(--blue-line);
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
}

/* Variante « service » : liste de livrables sous la description */
.card-list {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 9px;
}
.card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.card-list svg { margin-top: 5px; color: var(--green); flex: none; }

/* --- Cartes « offre » : les deux produits phares ------------------------- */
/* Plus grandes et plus contrastées que les cartes de services : la hiérarchie
   doit dire tout de suite ce qu'on vend en premier. */
.offres { gap: 24px; }

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.offre:hover {
  border-color: var(--blue-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.offre--app:hover { border-color: var(--green-line); }

/* Le numéro d'ordre, discret, en haut à droite */
.offre-rang {
  position: absolute;
  top: 26px;
  right: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
}

.offre h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin-bottom: 8px;
}
.offre-role {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 22px;
}
.offre .card-list {
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
}
.offre .card-list li { font-size: 0.95rem; }
/* La liste pousse le lien en bas : les deux cartes finissent alignées */
.offre .arrow-link { margin-top: auto; align-self: flex-start; }

.offre--app .card-list svg { color: var(--green); }
.offre--app .card-icon {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green);
}
.offre--app .arrow-link { color: var(--green); }
.offre--app .arrow-link:hover { color: var(--green-hover); }

/* Rappel sur la page contact : pas de liste ni de lien, donc pas besoin de la
   hauteur d'une vraie carte offre. Sans ça, 60px de vide traînent en bas. */
.offre--resume { padding-bottom: 26px; }
.offre--resume .offre-role { margin-bottom: 0; }

/* Les deux cartes du constat : plus aérées, le texte y est plus long */
/* Même padding que les autres cartes : la différence de 2px ne se justifiait pas */
.card--constat { padding: 30px; }
.card--constat p { font-size: 1rem; line-height: 1.7; }

@media (max-width: 700px) {
  .offre { padding: 28px 24px 26px; }
  .offre-rang { top: 22px; right: 24px; }
}

/* --- Promesses : bande de réassurance compacte de l'accueil -------------- */
.promesses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
  margin-inline: auto;
}
.promesse { display: flex; gap: 14px; align-items: flex-start; }
.promesse-coche {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}
.promesse b { font-weight: 700; letter-spacing: -0.015em; }
.promesse span { color: var(--text-muted); }
.promesses-lien { text-align: center; margin-top: 34px; }

@media (max-width: 700px) { .promesses { grid-template-columns: 1fr; gap: 16px; } }

/* --- Chiffres ----------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat {
  padding: 32px 26px;
  background: var(--surface);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- Étapes ------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.step {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover { border-color: var(--green-line); box-shadow: var(--shadow-md); }
.step-num {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green);
  padding: 5px 12px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-pill);
  background: var(--green-soft);
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-muted); font-size: 0.98rem; }

/* --- Équipe ------------------------------------------------------------- */
.person {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.person-head { display: flex; align-items: center; gap: 16px; }
.person-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--green));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}
.person-head h3 { margin: 0; }
.person-role {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--text-soft);
}
.person blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--green-line);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--blue-line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  color: var(--blue);
  /* Icône « + » dessinée en masque : pas d'image externe */
  -webkit-mask: linear-gradient(currentColor, currentColor) center/13px 2px no-repeat,
                linear-gradient(currentColor, currentColor) center/2px 13px no-repeat;
  mask: linear-gradient(currentColor, currentColor) center/13px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 13px no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq-body {
  padding: 0 26px 24px;
  color: var(--text-muted);
  font-size: 0.99rem;
}

/* --- Bloc CTA ----------------------------------------------------------- */
.cta-band {
  position: relative;
  padding: clamp(48px, 7vw, 76px) clamp(28px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 120% at 25% 0%, rgba(29, 111, 224, 0.13), transparent 62%),
    radial-gradient(60% 120% at 78% 10%, rgba(10, 125, 82, 0.12), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
  overflow: hidden;
}
.cta-band p {
  max-width: 520px;
  margin: 20px auto 0;
  color: var(--text-muted);
}
.cta-band .hero-cta { margin-top: 34px; }

/* --- Contact ------------------------------------------------------------ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: start;
}

.contact-info { display: grid; gap: 12px; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.contact-item:hover { border-color: var(--blue-line); box-shadow: var(--shadow-md); }
.contact-item .card-icon { width: 44px; height: 44px; margin: 0; border-radius: var(--r-sm); }
.contact-item small { display: block; color: var(--text-soft); font-size: 0.82rem; }
.contact-item strong { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }

/* Formulaire */
.form {
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}
.field .req { color: var(--blue); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* évite le zoom auto sur iOS */
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-soft); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.form-note { margin-top: 14px; font-size: 0.85rem; color: var(--text-soft); text-align: center; }

/* --- Page de contenu long (mentions légales) ---------------------------- */
.prose { max-width: var(--maxw-narrow); margin-inline: auto; }
.prose h2 {
  margin-top: 52px;
  margin-bottom: 16px;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.prose p,
.prose li { color: var(--text-muted); }
.prose p + p { margin-top: 14px; }
.prose ul {
  margin: 14px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--blue-hover); }
.prose dl {
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 10px 24px;
}
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--text-muted); }

/* Encadré « information à compléter » */
.notice {
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid var(--green-line);
  border-radius: var(--r-md);
  background: var(--green-soft);
  font-size: 0.93rem;
  color: var(--text-muted);
}
.notice strong { color: var(--text); }

/* Valeur restant à renseigner par le client */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: #fdf1d6;
  border: 1px solid #f0d59a;
  color: #7a5306;
  font-size: 0.88em;
  font-weight: 600;
}

/* --- Pied de page ------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: clamp(50px, 7vw, 72px) 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-tag { margin-top: 16px; max-width: 300px; color: var(--text-muted); font-size: 0.95rem; }
.footer h4 {
  margin-bottom: 16px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; }
.footer ul li { display: flex; }
/* padding vertical plutôt que hauteur fixe : la zone tactile atteint 44 px
   sans décoller le texte de sa ligne. */
.footer ul a,
.footer ul li { min-height: 44px; align-items: center; }
.footer ul a {
  display: inline-flex;
  align-items: center;
  padding-block: 12px;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.footer ul a:hover { color: var(--blue); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-size: 0.85rem;
  color: var(--text-soft);
}
.footer-bottom a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--blue); }

/* --- Révélation au scroll ----------------------------------------------- */
/* Le contenu n'est masqué que si le JS a pris la main (classe .js sur <html>),
   pour qu'il reste toujours lisible sans JavaScript. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 620ms var(--ease), transform 620ms cubic-bezier(0.22, 0.9, 0.28, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3 bis. ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-10px); }
}

/* Entrée du hero : chaque élément monte à la suite du précédent */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
}
.js .hero .pill      { animation: heroRise 820ms var(--ease) both; }
.js .hero h1         { animation: heroRise 820ms var(--ease) 90ms both; }
.js .hero .hero-lead { animation: heroRise 820ms var(--ease) 180ms both; }
.js .hero .hero-cta  { animation: heroRise 820ms var(--ease) 270ms both; }
.js .hero .trust     { animation: heroRise 820ms var(--ease) 360ms both; }
.js .aura            { animation: heroRise 1400ms var(--ease) both; }

/* Dérive de l'aurore */
@keyframes auraA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(90px, 46px, 0) scale(1.12); }
  66%      { transform: translate3d(-40px, 22px, 0) scale(0.94); }
}
@keyframes auraB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-96px, 54px, 0) scale(1.16); }
  75%      { transform: translate3d(34px, -18px, 0) scale(0.92); }
}
@keyframes auraC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { transform: translate3d(30px, 70px, 0) scale(1.2); }
}

/* Le point vert de la pastille respire */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--green-soft); }
  50%      { box-shadow: 0 0 0 8px rgba(10, 125, 82, 0.06); }
}
.pill .dot { animation: dotPulse 2.6s ease-in-out infinite; }

/* Reflet qui balaie le bouton principal au survol */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 780ms var(--ease);
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost:hover { transform: translateY(-2px); }

/* La flèche des boutons avance au survol */
.btn:hover svg { transform: translateX(3px); }
.btn svg { transition: transform var(--dur) var(--ease); }

/* Icônes de carte : léger basculement au survol */
.card-icon { transition: transform var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1), background var(--dur) var(--ease); }
.card:hover .card-icon,
a.contact-item:hover .card-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* Numéro d'étape : petit rebond */
.step-num { transition: transform var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1); }
.step:hover .step-num { transform: translateY(-3px) scale(1.06); }

/* Chiffres clés : légère mise en avant */
.stat { transition: background var(--dur) var(--ease); }
.stat:hover { background: var(--surface-2); }
.stat b { display: block; transition: transform var(--t-long) cubic-bezier(0.22, 0.9, 0.28, 1); }
.stat:hover b { transform: scale(1.08); }

/* Ouverture de la FAQ */
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
}
.faq details[open] .faq-body { animation: faqOpen 380ms var(--ease); }
.faq summary { transition: color var(--dur) var(--ease); }
.faq summary:hover { color: var(--blue); }

/* Le bandeau CTA respire doucement */
@keyframes ctaGlow {
  0%, 100% { background-position: 0% 0%, 100% 10%; }
  50%      { background-position: 20% 8%, 80% 0%; }
}
.cta-band {
  background-size: 160% 160%, 160% 160%, auto;
  animation: ctaGlow 16s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3 ter. EFFETS REPRIS DE infinity-views.agency
   Leur direction est sombre (blanc sur bleu nuit) ; tout est retranscrit ici
   pour un fond clair — les traînées et le halo passent en bleu/vert.
   -------------------------------------------------------------------------- */

/* --- Titres : les mots montent un par un -------------------------------- */
/* Le découpage en mots est fait en JS (voir main.js). Chaque mot reçoit son
   rang dans --i, ce qui décale son entrée de 70 ms. */
.title-anim .w {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.js .title-anim .w { opacity: 0; }
.js .title-anim[data-visible="true"] .w {
  animation: wordRise 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes wordRise {
  from { opacity: 0; filter: blur(8px); transform: translateY(0.55em) rotate(4deg); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
/* Le titre du hero est porté par ses mots : on coupe l'entrée du bloc entier. */
.js .hero h1.title-anim { animation: none; }

/* --- Pastille de mots pivotants ----------------------------------------- */
/* Les mots sont empilés dans la même cellule de grille et défilent en boucle. */
.word-rotator {
  position: relative;
  display: inline-grid;
  grid-template-areas: "stack";
  overflow: hidden;
  isolation: isolate;
  vertical-align: baseline;
  margin: 0 0.12em;
  padding: 0.14em 0.5em 0.18em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.42em;
  background: linear-gradient(180deg, #4a8bff, #1553b8);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  transform: rotate(-3deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 12px 34px -12px rgba(21, 83, 184, 0.75),
    0 0 32px rgba(74, 139, 255, 0.30);
}
/* Reflet qui traverse la pastille en continu */
.word-rotator::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(120deg,
    transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%) 0 0 / 250% 100%;
  animation: pillShine 5s ease-in-out infinite;
}
.word-rotator i {
  grid-area: stack;
  font-style: normal;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(110%);
  will-change: transform, opacity, filter;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  animation: wordRotate var(--cycle, 8.8s) cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes wordRotate {
  0%        { opacity: 0; filter: blur(6px); transform: translateY(110%); }
  4%, 22%   { opacity: 1; filter: blur(0);   transform: none; }
  26%, 100% { opacity: 0; filter: blur(6px); transform: translateY(-110%); }
}
@keyframes pillShine {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -100% 0; }
}

/* Réservé aux lecteurs d'écran : la pastille animée leur est masquée,
   on leur donne la liste des mots en clair à la place. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-audience {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.5;
  color: var(--text);
}

/* --- Reflet qui traverse un titre --------------------------------------- */
.title-shine {
  color: transparent;
  background-image: linear-gradient(100deg,
    var(--text) 0%, var(--text) 42%,
    var(--blue) 50%,
    var(--text) 58%, var(--text) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: titleShine 6s ease-in-out infinite;
}
@keyframes titleShine {
  from { background-position: -150% 0; }
  to   { background-position: 250% 0; }
}

/* --- Bandeau défilant ---------------------------------------------------- */
.marquee {
  --fade: 90px;
  position: relative;
  overflow: hidden;
  /* Fondu sur les deux bords, pour que le texte n'apparaisse pas d'un coup */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade),
              #000 calc(100% - var(--fade)), transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 14px 40px;
  animation: marqueeX 38s linear infinite;
}
/* On met en pause au survol, pour laisser le temps de lire */
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > li {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee-track svg { color: var(--green); flex: none; }
/* Le bandeau de réassurance sous le hero */
.trust-marquee { margin-top: 44px; }
@keyframes marqueeX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Fond du hero : trois états exclusifs ---------------------------------- */
/* Une seule classe sur la <section class="hero"> décide du fond :
     (aucune)         -> l'aurore dégradée
     .hero--video     -> la vidéo
     .hero--shapes    -> les capsules flottantes
   Les cumuler donnait un hero illisible : deux fonds animés qui se disputent
   l'attention derrière le même titre. */
.hero .shapes,
.hero .hero-media { display: none; }
.hero--video  .hero-media { display: block; }
.hero--shapes .shapes     { display: block; }
.hero--video .aura,
.hero--shapes .aura { display: none; }

/* --- Formes flottantes ---------------------------------------------------- */
/* Portage en CSS pur du composant « HeroGeometric » (React + framer-motion).
   Deux différences assumées par rapport à l'original :
   · sa version est blanche sur fond noir — ici les capsules sont teintées de
     bleu/vert, sinon elles seraient invisibles sur blanc ;
   · pas de backdrop-filter : sur cinq grandes surfaces posées au-dessus d'une
     vidéo, le coût de rendu ne valait pas la différence visuelle sur fond clair.

   Structure : <i> porte l'entrée (une fois), <b> la flottaison (en boucle).
   Deux éléments imbriqués, comme les deux motion.div de l'original — une seule
   balise ne peut pas jouer deux animations de transform en même temps. */
.shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.shapes i {
  position: absolute;
  display: block;
  animation: formeEntree 2.4s cubic-bezier(0.23, 0.86, 0.39, 0.96) both;
  animation-delay: var(--d, 0s);
}

.shapes b {
  display: block;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r-pill);
  animation: formeFlotte 12s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  background: linear-gradient(90deg, var(--teinte), transparent);
  border: 1.5px solid var(--bord);
  box-shadow: 0 8px 32px rgba(16, 24, 40, 0.06);
  position: relative;
}
/* Reflet interne, comme le ::after de l'original */
.shapes b::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55), transparent 70%);
}

@keyframes formeEntree {
  from { opacity: 0; transform: translateY(-150px) rotate(calc(var(--rot) - 15deg)); }
  to   { opacity: 1; transform: translateY(0)      rotate(var(--rot)); }
}
@keyframes formeFlotte {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(15px); }
}

/* Les cinq capsules, aux positions et tailles de l'original */
.shapes i:nth-child(1) {
  --w: clamp(260px, 42vw, 600px); --h: clamp(64px, 10vw, 140px); --rot: 12deg; --d: 0.3s;
  --teinte: rgba(29, 111, 224, 0.16); --bord: rgba(29, 111, 224, 0.18);
  left: -10%; top: 15%;
}
.shapes i:nth-child(2) {
  --w: clamp(220px, 35vw, 500px); --h: clamp(56px, 8.5vw, 120px); --rot: -15deg; --d: 0.5s;
  --teinte: rgba(10, 125, 82, 0.15); --bord: rgba(10, 125, 82, 0.18);
  right: -5%; top: 70%;
}
.shapes i:nth-child(3) {
  --w: clamp(150px, 22vw, 300px); --h: clamp(40px, 5.6vw, 80px); --rot: -8deg; --d: 0.4s;
  --teinte: rgba(120, 90, 220, 0.14); --bord: rgba(120, 90, 220, 0.16);
  left: 5%; bottom: 5%;
}
.shapes i:nth-child(4) {
  --w: clamp(110px, 15vw, 200px); --h: clamp(32px, 4.2vw, 60px); --rot: 20deg; --d: 0.6s;
  --teinte: rgba(29, 111, 224, 0.13); --bord: rgba(29, 111, 224, 0.15);
  right: 15%; top: 10%;
}
.shapes i:nth-child(5) {
  --w: clamp(90px, 11vw, 150px); --h: clamp(26px, 2.8vw, 40px); --rot: -25deg; --d: 0.7s;
  --teinte: rgba(10, 125, 82, 0.13); --bord: rgba(10, 125, 82, 0.15);
  left: 20%; top: 5%;
}

@media (max-width: 700px) {
  /* Sur petit écran, les deux plus petites encombrent plus qu'elles n'apportent */
  .shapes i:nth-child(4),
  .shapes i:nth-child(5) { display: none; }
}

/* --- Vidéo de fond du hero ----------------------------------------------- */
/* Voir le bloc « trois états exclusifs » plus haut pour l'activation. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-soft);   /* évite un flash noir avant le premier plan */
}
/* L'image d'attente est la couche de base, la vidéo se pose par-dessus.
   Sur mobile la vidéo est masquée : c'est l'image qui reste visible. */
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile blanc : la vidéo devient une texture et le texte reste lisible.
   0.82 est un plancher mesuré, pas un réglage à l'œil : le point le plus
   sombre de la vidéo est à Y=54/255 ; sous 82% de blanc, le texte secondaire
   (#4c5762) garde 5,3:1 de contraste, donc au-dessus du minimum AA (4,5:1).
   Descendre --voile rend la vidéo plus présente mais fait passer le texte
   sous le seuil : en dessous de 0.78, ce n'est plus accessible. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, calc(var(--voile, 0.82) + 0.06)) 0%,
      rgba(255, 255, 255, var(--voile, 0.82)) 45%,
      rgba(255, 255, 255, calc(var(--voile, 0.82) + 0.1)) 100%);
}

/* La vidéo n'apparaît que si main.js l'a activée (grand écran, animations non
   réduites). Par défaut — et sans JavaScript — seule l'image d'attente est là. */
.hero-media video { display: none; }
.hero-media video.is-on { display: block; }

/* --- Carrousel des réalisations ------------------------------------------ */
/* Même mécanique que le bandeau de réassurance : une piste dupliquée qui
   défile en boucle, avec fondu sur les bords et pause au survol. */
.showcase-marquee { --fade: 120px; }
.showcase-marquee .marquee-track {
  gap: 22px;
  animation-duration: 60s;   /* des cartes larges : il faut ralentir */
  align-items: stretch;
}

.realisation {
  flex: none;
  width: clamp(260px, 34vw, 420px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: block;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
a.realisation:hover {
  transform: translateY(-4px);
  border-color: var(--blue-line);
  box-shadow: var(--shadow-md);
}

.realisation img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.realisation-txt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 18px;
}
.realisation-txt b {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.realisation-txt span {
  font-size: 0.85rem;
  color: var(--text-soft);
  white-space: nowrap;
}

/* --- Équipe : photos et fiches ------------------------------------------- */
/* Les deux cartes partagent les mêmes lignes de grille : la ligne du haut
   porte la photo, celle du bas le texte. Les deux photos font donc
   exactement la même hauteur et les deux visages restent alignés, même
   quand un texte est plus long que l'autre. */
.equipe {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.membre {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* La photo occupe toute la largeur de la carte, sans cadre et sans
   recadrage : son format 4/5 est celui du fichier, donc rien n'est rogné
   sur les côtés et le buste reste entier. */
.membre .person-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0;
  border: none;
  border-radius: 0;
}

/* Le texte remonte sur le bas de la photo et le fondu s'accroche à lui :
   la zone lisible commence toujours juste au-dessus du premier mot, quelle
   que soit la longueur du texte. Le fondu ne mange que le bas de l'image,
   sous la ceinture. */
.membre-txt {
  position: relative;
  z-index: 1;
  margin-top: -84px;
  padding: 0 30px 30px;
  background: var(--surface);
}
.membre-txt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 150px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.72) 62%,
    var(--surface) 100%
  );
  pointer-events: none;
}

.membre h3 { margin-bottom: 4px; }
.membre .person-role { margin-bottom: 16px; }
.membre blockquote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--green-line);
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.7;
}

/* Emplacement si un associé arrive avant sa photo : dégradé au même format */
.person-photo--vide {
  display: grid;
  place-items: start center;
  aspect-ratio: 4 / 5;
  padding-top: 60px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  letter-spacing: -0.04em;
  color: #fff;
  background: linear-gradient(150deg, var(--blue), var(--green));
}

@media (max-width: 1000px) { .equipe { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .membre-txt { margin-top: -60px; padding: 0 24px 24px; }
  .membre-txt::before { height: 110px; }
}

/* --- Halo qui se propage depuis le point vert ---------------------------- */
.pill .dot { position: relative; }
.pill .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: pingSoft 2.6s ease-out infinite;
}
@keyframes pingSoft {
  from { opacity: 0.55; transform: scale(1); }
  to   { opacity: 0;    transform: scale(2.6); }
}

/* --- Souligné qui se déploie au survol ----------------------------------- */
.arrow-link, .footer ul a { position: relative; }
.arrow-link::after,
.footer ul a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--souligne-bas, -3px);
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.arrow-link:hover::after,
.footer ul a:hover::after { transform: scaleX(1); }
/* La flèche du lien ne doit pas être soulignée */
.arrow-link::after { width: calc(100% - 24px); }

/* --------------------------------------------------------------------------
   3 quater. ERGONOMIE MULTI-PLATEFORMES
   -------------------------------------------------------------------------- */

/* Le souligné du pied de page se cale sur le texte, pas sur le bas du padding */
.footer ul a { --souligne-bas: 9px; }

/* Lien fléché : même logique, zone tactile de 44 px */
.arrow-link {
  min-height: 46px;
  --souligne-bas: 12px;
}

/* Les deux derniers liens sous les 44 px : mentions légales du bas de page
   et logo du pied de page. */
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer .logo { padding-block: 6px; }

/* Encoche et bords arrondis : sur iPhone en paysage, le contenu passerait
   sous l'encoche sans ces marges. */
.wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.mobile-menu {
  left: max(var(--gutter), env(safe-area-inset-left));
  right: max(var(--gutter), env(safe-area-inset-right));
  /* En paysage le tiroir dépassait de l'écran et le bouton du bas devenait
     inatteignable (le fond est verrouillé pendant l'ouverture). */
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }

/* Pas de flash bleu au tap sur iOS : les états de survol/appui suffisent */
* { -webkit-tap-highlight-color: transparent; }

/* Écran bas et large (téléphone en paysage) : le hero prenait 1,8 écran,
   les boutons tombaient loin sous la ligne de flottaison. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-block: 44px 36px; }
  .hero-audience { margin-top: 14px; }
  .hero-lead { margin-top: 16px; }
  .hero-cta { margin-top: 22px; }
  .trust-marquee { margin-top: 26px; }
  .section { padding-block: 56px; }
  .aura { height: 420px; top: -140px; }
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE — le desktop est la base, on adapte vers le bas
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .nav-links,
  .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .grid--3, .steps { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .glass { padding: 8px 8px 8px 20px; border-radius: 26px; }
  .header.is-stuck .glass { padding: 7px 7px 7px 18px; }
  .mobile-menu { top: 82px; }
  .aura { top: -180px; height: 560px; }
  .marquee { --fade: 40px; }
  .marquee-track { gap: 10px 26px; animation-duration: 26s; }
  .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .hero-cta .btn { width: 100%; }
  .trust { gap: 10px 22px; }
  .prose dl { grid-template-columns: 1fr; gap: 4px 0; }
  .prose dd { margin-bottom: 10px; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .card, .step, .person { padding: 24px; }
}

/* --------------------------------------------------------------------------
   5. PRÉFÉRENCES SYSTÈME
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;   /* stoppe les boucles infinies */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* Les décors purement animés s'arrêtent au lieu de rester figés */
  .aura i { animation: none; }
  .pill .dot::after, .word-rotator::after { display: none; }
  /* Les capsules restent en place : on rejoue l'état final de l'entrée à la
     main, sinon couper l'animation leur retirerait aussi leur rotation. */
  .shapes i { animation: none; opacity: 1; transform: rotate(var(--rot)); }
  .shapes b { animation: none; }
  /* Une vidéo de fond qui tourne en boucle est exactement ce que ce réglage
     demande d'éviter. main.js ne la charge même pas dans ce cas ; cette règle
     est le filet de sécurité si le réglage change après le chargement. */
  .hero-media video { display: none !important; }
  .marquee-track { animation: none; }
  /* Les mots des titres restent simplement lisibles */
  .js .title-anim .w { opacity: 1 !important; filter: none !important; transform: none !important; }
  /* La pastille n'affiche plus qu'un seul mot, fixe */
  .word-rotator i { animation: none; opacity: 0; filter: none; transform: none; }
  .word-rotator i:first-child { opacity: 1; }
  .title-shine { color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
}

/* --------------------------------------------------------------------------
   6. IMPRESSION (utile pour les mentions légales)
   -------------------------------------------------------------------------- */
@media print {
  .header, .mobile-menu, .footer, .cta-band, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero::before, .hero::after { display: none; }
}

/* ======================================================================
   7. TARIFS (page Offres)
   Cartes de prix, options et petites mentions de périmètre. Tout vient
   des tokens de :root, aucune couleur en dur.
   ====================================================================== */

.tarifs {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  align-items: stretch;
}

.tarif {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tarif:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.tarif--phare {
  border-color: var(--blue-line);
  box-shadow: var(--shadow-blue);
}
.tarif--phare:hover { border-color: var(--blue); }

.tarif-etiquette {
  position: absolute;
  top: -11px;
  left: 24px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  line-height: 1.5;
}
.tarif--phare .tarif-etiquette {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: var(--blue-line);
}

.tarif h3 {
  font-size: 1.24rem;
  margin: 0 0 6px;
}
.tarif-role {
  color: var(--text-muted);
  font-size: .95rem;
  margin: 0 0 18px;
  min-height: 3.4em;   /* les prix restent alignés d'une carte à l'autre */
}

.tarif-prix {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tarif-prix b {
  font-size: clamp(1.9rem, 3.4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarif--phare .tarif-prix b { color: var(--blue); }
.tarif-prix span {
  font-size: .82rem;
  color: var(--text-soft);
}
.tarif-des {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 4px;
}
.tarif-cible {
  font-size: .84rem;
  color: var(--text-soft);
  margin: 0 0 20px;
}

.tarif .card-list { margin-bottom: 22px; }
.tarif .arrow-link { margin-top: auto; }

.tarif-note {
  font-size: .84rem;
  color: var(--text-soft);
  margin: 18px 0 0;
}

/* Options vendues en plus d'une offre */
.options {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.options li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 18px;
}
.options b {
  font-size: .96rem;
  font-weight: 600;
}
.options span {
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .tarif { padding: 24px 20px; }
}

/* Prix rappelé sur les deux cartes d'offres de l'accueil */
.offre-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: -6px 0 16px;
}
.offre-prix span {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.offre-prix b {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

/* Listes déroulantes du formulaire : même boîte que les champs texte,
   avec le chevron dessiné en fond (aucune image externe). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7681' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* --- Chiffres « Pourquoi être présent en ligne » : cinq cases ------------- */
/* Grille à six colonnes sous 1000 px : 2 cases en haut, 3 en bas, aucune
   case orpheline sur une ligne. */
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats--5 .stat { padding: 30px 22px; }
.stats--5 .stat span { font-size: 0.9rem; }
.stats-source {
  margin-top: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-soft);
}
.stats-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.stats-source a:hover { color: var(--blue); }

@media (max-width: 1000px) {
  .stats--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats--5 .stat { grid-column: span 2; }
  .stats--5 .stat:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 560px) {
  .stats--5 { grid-template-columns: 1fr; }
  .stats--5 .stat,
  .stats--5 .stat:nth-child(-n+2) { grid-column: auto; }
}

/* Titre de section plus long que la moyenne (deux phrases) */
.section-head--large { max-width: 780px; }

/* --- Page Offres : une prestation = présentation + liste ------------------ */
.prestation {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.prestation-intro { position: sticky; top: 120px; }
.prestation-intro p {
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.prestation-intro .btn { margin-top: 28px; max-width: 100%; white-space: normal; text-align: center; }

.prestation-liste {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.prestation-liste h3 {
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}
.prestation-liste .card-list li { font-size: 0.97rem; }
.prestation-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text-soft);
}
.prestation--app .card-list svg { color: var(--green); }

@media (max-width: 900px) {
  .prestation { grid-template-columns: minmax(0, 1fr); }
  .prestation-intro { position: static; }
}
@media (max-width: 560px) {
  .prestation-liste { padding: 26px 22px; }
}