@charset "UTF-8";
/* =========================================================
   DESIGN SYSTEM — MONOCHROME
   Fond blanc dominant, aucune couleur d'accent.
   Le contraste et le mouvement remplacent la couleur.
   ========================================================= */

/* ---------- Police : une seule famille, variable, auto-hébergée ---------- */
/* Un seul sous-ensemble déclaré : le latin.
   La déclaration « latin-ext » a été retirée le 14 août 2026. Un relevé des
   547 612 caractères des 28 pages n'a trouvé aucun caractère dans sa plage :
   le fichier n'était jamais demandé. Deux caractères sortent du sous-ensemble
   latin — ★ (U+2605) et → (U+2192) — mais ils ne sont couverts par aucun des
   deux fichiers et s'affichaient déjà dans la police de repli du système. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  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;
}

/* ---------- Tokens ---------- */
:root {
  --blanc:    #FFFFFF;
  --blanc-2:  #F6F6F4;
  --encre:    #0D0D0D;
  --gris-900: #1C1C1C;
  --gris-600: #6E6E6A;
  --gris-300: #C9C9C4;
  --gris-150: #E4E4E0;
  /* Fond du CTA secondaire : assez proche du blanc pour rester sobre, assez
     distinct pour que le bouton existe sur une section blanche. */
  --ivoire-bouton: #EDEDEA;

  /* Alias des anciens noms : garantit qu'aucun reste de couleur ne subsiste
     dans les composants existants sans avoir à toucher les 27 gabarits. */
  --ivoire: var(--blanc);
  --surface: var(--blanc);
  --texte-2: var(--gris-600);
  --cobalt: var(--encre);
  --cobalt-hover: var(--gris-900);
  --cobalt-clair: var(--blanc-2);
  --encre-profonde: var(--encre);
  --bordure: var(--gris-150);
  --bordure-sombre: rgba(255, 255, 255, 0.16);
  --succes: var(--encre);

  --font-titre: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-corps: var(--font-titre);

  --t-h1: clamp(2.6rem, 7vw, 5.6rem);
  --t-h2: clamp(1.9rem, 4vw, 3.2rem);
  --t-h3: clamp(1.15rem, 0.9vw + 1rem, 1.45rem);
  --t-lead: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --t-corps: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --t-petit: 0.9375rem;

  --pad-section: clamp(4rem, 3.5vw + 3.5rem, 8rem);
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;     --s8: 3rem;    --s10: 4rem;

  --r-petit: 4px;
  --r-carte: 12px;
  --radius: var(--r-carte);
  --radius-sm: var(--r-petit);
  --radius-pill: 999px;

  --ombre: 0 1px 2px rgba(0, 0, 0, .04);
  --ombre-survol: 0 8px 24px rgba(0, 0, 0, .06);
  --ombre-hover: var(--ombre-survol);

  --largeur: 1180px;
  --header-h: 72px;
  --ease: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-corps);
  font-size: var(--t-corps);
  /* La cible lit majoritairement sur mobile et a entre 35 et 55 ans :
     le corps de texte est en 500, jamais en 400. */
  font-weight: 500;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img, svg, video { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
table { border-collapse: collapse; }

/* ---------- Typographie ---------- */
h1, .h1, h2, .h2, h3, .h3 { font-family: var(--font-titre); color: var(--encre); }
/* Graisse 250-300 uniquement quand le titre depasse 48 px ; en dessous,
   il redevient lisible en 500. */
h1, .h1 { font-size: var(--t-h1); font-weight: 275; line-height: 1.02; letter-spacing: -0.035em; }
@media (max-width: 700px) { h1, .h1 { font-weight: 500; letter-spacing: -0.025em; } }
h2, .h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.06; letter-spacing: -0.025em; }
@media (max-width: 900px) { h2, .h2 { font-weight: 500; letter-spacing: -0.015em; } }
h3, .h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
h4     { font-size: 1.0625rem; font-weight: 600; }
.lead  { font-size: var(--t-lead); line-height: 1.55; color: var(--gris-600); font-weight: 500; }
.eyebrow {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--gris-600); margin-bottom: var(--s4);
}

/* Le soulignement « à la main » devient un filet encre, sans couleur */
.trait-main { position: relative; white-space: nowrap; }
.trait-main::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0.02em; height: 2px;
  background: var(--encre); transform-origin: left;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--s5); }
.section { padding-block: var(--pad-section); }
.section-ivoire  { background: var(--blanc-2); }
.section-blanche { background: var(--blanc); }
.section-encre   { background: var(--encre); color: var(--blanc); }
.section-encre h1, .section-encre h2, .section-encre h3, .section-encre h4 { color: var(--blanc); }
.section-encre .lead, .section-encre .eyebrow { color: var(--gris-300); }
.section-encre p { color: rgba(255, 255, 255, .82); }

.grid { display: grid; gap: var(--s5); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.text-center { text-align: center; }
.entete-section { max-width: 46rem; margin-bottom: var(--s8); }
.entete-section.text-center { margin-inline: auto; }
.entete-section h2 { text-wrap: balance; }
.entete-section .lead { margin-top: var(--s4); max-width: 54ch; }

/* ---------- Boutons : remplissage encre au survol ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 0.95rem 1.7rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  border: 1px solid var(--encre); background: transparent; color: var(--encre);
  transition: color .3s var(--ease), border-color .3s var(--ease);
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--encre);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: var(--blanc); }

.btn-cobalt { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.btn-cobalt::before { background: var(--blanc); }
.btn-cobalt:hover, .btn-cobalt:focus-visible { color: var(--encre); }

/* Le CTA secondaire était transparent bordé de gris clair : sur fond blanc,
   il disparaissait. Il porte désormais un fond propre et une bordure d'encre,
   à la même hauteur et au même rayon que le CTA principal. */
.btn-contour {
  background: var(--ivoire-bouton); color: var(--encre);
  border-width: 1.5px; border-color: var(--encre);
  padding-block: calc(0.95rem - 0.5px);
}
.btn-contour:hover, .btn-contour:focus-visible { color: var(--blanc); border-color: var(--encre); }
.btn-contour::before { background: var(--encre); }

.section-encre .btn { border-color: rgba(255,255,255,.35); color: var(--blanc); }
.section-encre .btn-contour { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.section-encre .btn-contour:hover, .section-encre .btn-contour:focus-visible { color: var(--encre); }
.section-encre .btn-contour::before { background: var(--blanc); }
.section-encre .btn::before { background: var(--blanc); }
.section-encre .btn:hover, .section-encre .btn:focus-visible { color: var(--encre); border-color: var(--blanc); }
.section-encre .btn-cobalt { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.section-encre .btn-cobalt::before { background: var(--encre); }
.section-encre .btn-cobalt:hover { color: var(--blanc); }
.btn-bloc { width: 100%; }

/* Cartes blanches posées dans une section sombre.
   Les règles « .section-encre .btn » inversent les boutons pour qu'ils se
   lisent sur fond d'encre. À l'intérieur du formulaire et du cadre de
   l'agenda, le fond redevient blanc : sans cette remise à l'endroit, le
   bouton d'envoi et le bouton « Afficher l'agenda » redeviennent blancs sur
   blanc — exactement le défaut que le nouveau style du CTA secondaire visait
   à corriger. */
.section-encre .formulaire .btn,
.section-encre .cal-cadre .btn { border-color: var(--encre); color: var(--encre); }
.section-encre .formulaire .btn::before,
.section-encre .cal-cadre .btn::before { background: var(--encre); }
.section-encre .formulaire .btn:hover, .section-encre .formulaire .btn:focus-visible,
.section-encre .cal-cadre .btn:hover, .section-encre .cal-cadre .btn:focus-visible { color: var(--blanc); border-color: var(--encre); }

.section-encre .formulaire .btn-cobalt,
.section-encre .cal-cadre .btn-cobalt { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.section-encre .formulaire .btn-cobalt::before,
.section-encre .cal-cadre .btn-cobalt::before { background: var(--blanc); }
.section-encre .formulaire .btn-cobalt:hover, .section-encre .formulaire .btn-cobalt:focus-visible,
.section-encre .cal-cadre .btn-cobalt:hover, .section-encre .cal-cadre .btn-cobalt:focus-visible { color: var(--encre); }

.section-encre .cal-cadre .btn-contour { background: var(--ivoire-bouton); }

:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.section-encre :focus-visible { outline-color: var(--blanc); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gris-150);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.logo { font-family: var(--font-titre); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--encre); }
.nav-principale { display: none; }
.nav-principale > ul { display: flex; align-items: center; gap: var(--s6); }
.nav-principale > ul > li { position: static; }
.nav-principale > ul > li > a { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; font-size: .9375rem; padding: .5rem 0; }
.nav-principale > ul > li > a:hover { opacity: .6; }
.actions-header { display: none; gap: var(--s3); align-items: center; }
@media (min-width: 1080px) { .nav-principale { display: block; } .actions-header { display: flex; } }
.actions-header .btn { padding: .68rem 1.15rem; font-size: .9375rem; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanc); border-bottom: 1px solid var(--gris-150);
  box-shadow: var(--ombre-survol); padding-block: var(--s6);
  opacity: 0; visibility: hidden; transition: opacity .16s var(--ease), visibility .16s var(--ease);
}
li:hover > .mega, li:focus-within > .mega { opacity: 1; visibility: visible; }
.mega .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.mega-titre { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; color: var(--gris-600); margin-bottom: var(--s4); }
.mega ul { display: flex; flex-direction: column; gap: var(--s1); }
.mega a { display: block; padding: .4rem 0; font-weight: 500; }
.mega a:hover { opacity: .55; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-petit);
  border: 1px solid var(--gris-150); background: var(--blanc);
}
@media (min-width: 1080px) { .burger { display: none; } }
.menu-mobile { display: none; position: fixed; inset: 0; z-index: 200; background: var(--blanc); padding: var(--s5); overflow-y: auto; }
.menu-mobile.ouvert { display: block; }
.menu-mobile-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s6); }
.menu-mobile details { border-bottom: 1px solid var(--gris-150); padding-block: var(--s3); }
.menu-mobile summary { font-family: var(--font-titre); font-weight: 600; font-size: 1.125rem; cursor: pointer; }
.menu-mobile a { display: block; padding: .55rem 0; font-weight: 500; }
.menu-mobile .lien-simple { border-bottom: 1px solid var(--gris-150); padding-block: var(--s3); font-weight: 600; font-size: 1.125rem; }
.menu-mobile-actions { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.lien-telephone { text-align: center; font-size: var(--t-petit); color: var(--gris-600); padding-top: var(--s2); }

.cta-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: flex; gap: var(--s2); padding: .7rem var(--s4);
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--gris-150);
}
.cta-sticky .btn { flex: 1; padding: .75rem .5rem; font-size: .875rem; }
@media (min-width: 1080px) { .cta-sticky { display: none; } }
body { padding-bottom: 72px; }
@media (min-width: 1080px) { body { padding-bottom: 0; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 3vw + 1.5rem, 5rem) clamp(4rem, 5vw + 2rem, 7rem); }
.hero .container { max-width: var(--largeur); }
.hero-grille { display: grid; gap: var(--s10); align-items: center; }
@media (min-width: 1000px) { .hero-grille { grid-template-columns: 1fr 1fr; gap: var(--s8); } }
.hero h1 { margin-bottom: var(--s6); text-wrap: balance; }
.hero .lead { max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 620px) { .hero-actions .btn { flex: 0 0 auto; } }

/* Révélation des mots du h1 par masque */
/* Le débord est masqué pour que les mots montent depuis le bas ; la marge
   négative rend la place aux jambages des lettres p, j et g. */
.mot { display: inline-block; overflow: hidden; vertical-align: bottom;
       padding-bottom: .12em; margin-bottom: -.12em; }
.mot > span { display: inline-block; transform: translateY(105%); }
/* La montée est une animation CSS, pas une transition déclenchée par le JS :
   elle démarre à la première peinture au lieu d'attendre le script de pied de
   page. Le décalage entre mots est plafonné à 280 ms — au-delà, le titre est
   l'élément LCP et chaque milliseconde de retard se paie sur le score. */
.anim .mot > span { animation: monter .62s var(--ease) both; animation-delay: min(calc(var(--i, 0) * 70ms), 280ms); }
@keyframes monter { from { transform: translateY(105%); } to { transform: translateY(0); } }
html:not(.anim) .mot > span { transform: translateY(0); }

.reassurance {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  margin-top: var(--s6); font-size: var(--t-petit); font-weight: 500; color: var(--gris-600);
}
.reassurance .sep { opacity: .4; }

/* ---------- Fenêtre de navigateur animée ---------- */
.fenetre {
  border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  background: var(--blanc); box-shadow: var(--ombre-survol);
  overflow: hidden;
}
.fenetre-barre {
  display: flex; align-items: center; gap: var(--s3);
  padding: .6rem .8rem; border-bottom: 1px solid var(--gris-150); background: var(--blanc-2);
}
.fenetre-points { display: flex; gap: 5px; }
.fenetre-points i { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-300); }
.fenetre-url {
  flex: 1; font-size: 11px; color: var(--gris-600);
  background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--radius-pill);
  padding: .18rem .6rem; text-align: center; letter-spacing: .02em;
}
.fenetre-corps { position: relative; padding: var(--s4); min-height: 328px; }
.fenetre-jour {
  position: absolute; right: var(--s4); bottom: var(--s3);
  font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--gris-600);
}

/* Blocs qui se posent — animation CSS pure, aucun JS.
   Hors écran la boucle est mise en pause, pas remise à zéro. */
.fenetre.hors-vue *, .fenetre.hors-vue { animation-play-state: paused !important; }
.bloc-f { opacity: 0; }
.anim .fenetre .bloc-f { animation: poser 7s var(--ease) infinite; }
.f-nav   { height: 26px; background: var(--blanc-2); border: 1px solid var(--gris-150); border-radius: var(--r-petit); margin-bottom: var(--s3); animation-delay: .5s !important; }
.f-titre { height: 15px; width: 58%; background: var(--encre); border-radius: 3px; margin-bottom: var(--s2); animation-delay: 1.1s !important; }
.f-sous  { height: 9px;  width: 40%; background: var(--gris-300); border-radius: 3px; margin-bottom: var(--s4); animation-delay: 1.35s !important; }
.f-image { height: 96px; background: linear-gradient(135deg, var(--gris-900), var(--encre)); border-radius: 6px; margin-bottom: var(--s4); animation-delay: 1.9s !important; }
.f-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s4); }
.f-carte { height: 58px; border: 1px solid var(--gris-150); border-radius: 6px; background: var(--blanc-2); }
.f-carte:nth-child(1) { animation-delay: 2.5s !important; }
.f-carte:nth-child(2) { animation-delay: 2.62s !important; }
.f-carte:nth-child(3) { animation-delay: 2.74s !important; }
.f-cta { height: 32px; width: 152px; background: var(--encre); border-radius: var(--radius-pill); animation-delay: 3.3s !important; }
.anim .fenetre .f-cta { animation: poser 7s var(--ease) infinite, pulse 7s ease-in-out infinite; }

@keyframes poser {
  0%, 4%   { opacity: 0; transform: translateY(14px) scale(.985); }
  10%, 74% { opacity: 1; transform: translateY(0) scale(1); }
  84%,100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes pulse {
  0%, 48%  { box-shadow: 0 0 0 0 rgba(13,13,13,0); }
  53%      { box-shadow: 0 0 0 7px rgba(13,13,13,.09); }
  58%,100% { box-shadow: 0 0 0 0 rgba(13,13,13,0); }
}
/* Compteur de jours : trois mots superposés qui se relaient.
   Une propriété « content » ne s'anime pas — il faut trois éléments réels. */
.fenetre-jour span { position: absolute; right: 0; bottom: 0; white-space: nowrap; }
.fenetre-jour span:not(:first-child) { opacity: 0; }
.anim .fenetre .fenetre-jour span:nth-child(1) { animation: jour-1 7s linear infinite; }
.anim .fenetre .fenetre-jour span:nth-child(2) { animation: jour-2 7s linear infinite; }
.anim .fenetre .fenetre-jour span:nth-child(3) { animation: jour-3 7s linear infinite; }
@keyframes jour-1 { 0%,6%{opacity:0} 8%,26%{opacity:1} 28%,100%{opacity:0} }
@keyframes jour-2 { 0%,28%{opacity:0} 30%,45%{opacity:1} 47%,100%{opacity:0} }
@keyframes jour-3 { 0%,47%{opacity:0} 49%,78%{opacity:1} 84%,100%{opacity:0} }

/* Parallaxe de souris : une seule couche de composition, sur pointeur fin. */
@media (pointer: fine) { .anim .hero-scene { will-change: transform; } }

/* Mobile : cinq blocs au lieu de huit, et la fenêtre passe sous le titre. */
@media (max-width: 999px) {
  .f-sous, .f-carte:nth-child(2), .f-carte:nth-child(3) { display: none; }
  .f-cartes { grid-template-columns: 1fr; }
  .fenetre-corps { min-height: 250px; }
}

/* ---------- Bandeau garanties ---------- */
.garanties { border-block: 1px solid var(--gris-150); background: var(--blanc); }
.garanties .grid { padding-block: var(--s6); gap: var(--s5); }
.garantie { display: flex; align-items: flex-start; gap: var(--s3); }
.garantie svg { flex-shrink: 0; margin-top: 2px; color: var(--encre); }
.garantie strong { display: block; font-size: 1rem; font-weight: 600; }
.garantie span { font-size: var(--t-petit); color: var(--gris-600); line-height: 1.5; }

/* ---------- Cartes ---------- */
.carte {
  background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  padding: var(--s5); box-shadow: var(--ombre);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.carte:hover { box-shadow: var(--ombre-survol); border-color: var(--gris-300); transform: translateY(-2px); }
.carte h3 { margin-bottom: var(--s2); }
.carte p { color: var(--gris-600); font-size: var(--t-petit); line-height: 1.6; }

.etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--encre); color: var(--blanc); font-weight: 600; font-size: .9375rem;
  margin-bottom: var(--s4);
}
.etape-delai { display: inline-block; margin-top: var(--s3); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-600); }

/* Ligne de progression du process */
.etapes-piste { position: relative; }
.etapes-piste::before {
  content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 1px;
  background: var(--gris-150);
}
.etapes-piste::after {
  content: ""; position: absolute; left: 17px; top: 0; width: 1px;
  height: var(--progression, 0%); background: var(--encre);
  transition: height .18s linear;
}
@media (min-width: 1000px) {
  .etapes-piste::before { left: 0; right: 0; top: 17px; bottom: auto; width: auto; height: 1px; }
  .etapes-piste::after  { left: 0; top: 17px; height: 1px; width: var(--progression, 0%); transition: width .18s linear; }
}
.etapes-piste .carte { background: var(--blanc); }

.avis .etoiles { color: var(--encre); letter-spacing: .1em; margin-bottom: var(--s3); font-size: .875rem; }
.avis .citation { color: var(--encre); font-size: var(--t-corps); margin-bottom: var(--s4); }
.avis .auteur { font-weight: 600; font-size: var(--t-petit); }
.avis .role { font-size: var(--t-petit); color: var(--gris-600); }
.note-chiffre { color: var(--gris-600); font-size: .8125rem; letter-spacing: 0; }

.realisation { border: 1px solid var(--gris-150); border-radius: var(--r-carte); overflow: hidden; background: var(--blanc); }
.realisation img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.realisation figcaption { padding: var(--s4); font-weight: 600; font-size: var(--t-petit); }

/* ---------- Tarifs ---------- */
.tarifs { align-items: stretch; }
.tarif {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  padding: var(--s6) var(--s5); box-shadow: var(--ombre);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.tarif:hover { box-shadow: var(--ombre-survol); border-color: var(--encre); transform: translateY(-3px); }
.tarif.mise-en-avant { border-color: var(--encre); }
.badge-choisie {
  position: absolute; top: -12px; left: var(--s5);
  background: var(--encre); color: var(--blanc);
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: var(--radius-pill);
}
.tarif h3 { margin-bottom: var(--s1); }
.tarif .promesse { color: var(--gris-600); font-size: var(--t-petit); margin-bottom: var(--s5); }
.tarif .montant { font-family: var(--font-titre); font-weight: 250; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s2); }
.tarif .montant .unite { font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
.tarif .modalite { font-size: .8125rem; color: var(--gris-600); margin-bottom: var(--s5); }
.inclus { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); flex-grow: 1; }
.inclus li { display: flex; gap: var(--s3); font-size: var(--t-petit); line-height: 1.5; }
.inclus li::before { content: "—"; color: var(--gris-600); flex-shrink: 0; }
.note-inclus { margin-top: var(--s6); font-size: var(--t-petit); color: var(--gris-600); }

.tarifs-groupe + .tarifs-groupe { margin-top: var(--s10); }
.tarifs-groupe-titre { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--gris-150); }
.tarifs-groupe-titre .rang { font-family: var(--font-titre); font-weight: 250; font-size: 1.6rem; color: var(--gris-600); flex-shrink: 0; }
.tarifs-groupe-titre h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.7rem); font-weight: 400; letter-spacing: -0.02em; }

.encadre-fort {
  margin-top: var(--s6); background: var(--encre); color: var(--blanc);
  border-radius: var(--r-carte); padding: var(--s6) var(--s5);
  font-size: clamp(1.2rem, .7vw + 1rem, 1.45rem); line-height: 1.5; font-weight: 300;
}
.encadre-fort strong { font-weight: 600; }
.encadre-exemple { margin-top: var(--s4); background: var(--blanc-2); border: 1px solid var(--gris-150); border-radius: var(--r-carte); padding: var(--s5); font-size: var(--t-corps); }
.encadre-exemple strong { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--gris-150); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s5); font-weight: 600; font-size: 1.0625rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; color: var(--gris-600); flex-shrink: 0; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: var(--s5); color: var(--gris-600); max-width: 66ch; font-size: var(--t-petit); }

/* ---------- Comparatif ---------- */
.comparatif { width: 100%; margin-top: var(--s6); }
.comparatif th, .comparatif td { padding: var(--s3) var(--s4); text-align: left; font-size: var(--t-petit); border-bottom: 1px solid var(--gris-150); }
.comparatif th { font-weight: 600; }
.section-encre .comparatif th, .section-encre .comparatif td { border-bottom-color: var(--bordure-sombre); }
.comparatif td.oui::before { content: "✓ "; font-weight: 600; }
.comparatif td.non::before { content: "✕ "; font-weight: 600; opacity: .55; }
@media (max-width: 700px) {
  .comparatif thead { display: none; }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: 100%; }
  .comparatif tr { padding-block: var(--s4); border-bottom: 1px solid var(--bordure-sombre); }
  .comparatif tr th[scope="row"] { padding: 0 0 var(--s2); font-size: var(--t-corps); border: 0; }
  .comparatif td { padding: var(--s1) 0; border: 0; }
  .comparatif td::after { font-size: .8125rem; color: var(--gris-300); white-space: nowrap; }
  .comparatif td.oui::after { content: " — nous"; }
  .comparatif td.non::after { content: " — ailleurs"; }
}

/* ---------- Double porte ---------- */
.double-porte { display: grid; gap: var(--s8); align-items: start; }
@media (min-width: 1000px) { .double-porte { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.porte h2 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); margin-bottom: var(--s3); }
.porte .lead { font-size: var(--t-corps); margin-bottom: var(--s5); }
.porte .formulaire { background: var(--blanc); }
.section-encre .porte .formulaire, .section-encre .porte .formulaire label { color: var(--encre); }
/* Le formulaire et l'agenda sont des surfaces claires posées dans une section
   sombre : le texte blanc à 82 % qu'hérite la section y devient illisible. */
.section-encre .formulaire p, .section-encre .cal-cadre p { color: var(--gris-600); }
.section-encre .formulaire p a, .section-encre .cal-cadre p a { color: var(--encre); text-decoration: underline; }

/* ---------- Cal.com ---------- */
/* Hauteur réservée avant que Cal.com ne s'affiche. Les valeurs sont celles
   mesurées une fois l'agenda chargé, à chaque palier : le cadre ne grandit
   plus au chargement, donc rien ne saute sous les yeux du visiteur.
   Cal impose sa propre hauteur à .cal-embed ; c'est le cadre extérieur, qu'il
   ne touche pas, qui porte la réservation. */
.cal-cadre { min-height: 645px; background: var(--blanc); border-radius: var(--r-carte); overflow: hidden; padding: var(--s2); }
@media (min-width: 700px)  { .cal-cadre { min-height: 950px; } }
@media (min-width: 1000px) { .cal-cadre { min-height: 815px; } }
.cal-embed { width: 100%; }
.cal-embed[hidden] { display: none; }

/* ---------- Agenda chargé au clic ----------
   Sur les pages métier et transverses, l'agenda n'est plus intégré d'office :
   la place lui reste réservée, mais elle est occupée par une invitation. Le
   cadre n'a alors aucune raison de mesurer huit cents pixels de haut. */
.cal-cadre-clic { min-height: 0; border: 1px solid var(--gris-150); }
.cal-invite {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding: var(--s6) var(--s5);
}
.cal-invite-texte { font-size: var(--t-corps); color: var(--encre); margin: 0; }
.cal-invite-note { font-size: var(--t-petit); color: var(--gris-600); margin: 0; }
.cal-invite-note a { color: var(--gris-600); text-decoration: underline; }
.cal-invite .btn { align-self: stretch; }
@media (min-width: 560px) { .cal-invite .btn { align-self: flex-start; } }
/* Le cadre reprend sa hauteur dès que l'agenda est posé, pour ne pas
   comprimer le calendrier. */
.cal-cadre-clic.cal-ouvert { min-height: 645px; }
@media (min-width: 700px)  { .cal-cadre-clic.cal-ouvert { min-height: 950px; } }
@media (min-width: 1000px) { .cal-cadre-clic.cal-ouvert { min-height: 815px; } }

/* La porte du formulaire passe devant quand l'agenda attend un clic : c'est
   elle qu'on veut voir en premier, y compris en lecture mobile. */
@media (min-width: 1000px) {
  .double-porte-inversee .porte-formulaire { order: 1; }
  .double-porte-inversee .porte-agenda { order: 2; }
}
@media (max-width: 999px) {
  .double-porte-inversee .porte-formulaire { order: 1; }
  .double-porte-inversee .porte-agenda { order: 2; }
}
.cal-invite[hidden] { display: none; }
.cal-invite { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; background: var(--blanc); border-radius: var(--r-carte); padding: var(--s10) var(--s5); }
.cal-invite-titre { font-weight: 600; font-size: clamp(1.2rem, 1vw + 1rem, 1.45rem); color: var(--encre); }
.cal-invite-texte { color: var(--gris-600); max-width: 46ch; }
.cal-invite-mention { font-size: .8125rem; color: var(--gris-600); max-width: 52ch; margin-top: var(--s2); }
.cal-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); min-height: 320px; padding: var(--s8) var(--s5); text-align: center; background: var(--blanc); color: var(--gris-600); border: 1px dashed var(--gris-150); border-radius: var(--r-carte); }
.cal-placeholder strong { color: var(--encre); font-size: 1.0625rem; }

/* ---------- Formulaires ---------- */
.formulaire { background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--r-carte); padding: var(--s6) var(--s5); box-shadow: var(--ombre); }
.champ { margin-bottom: var(--s4); }
.champ label { display: block; font-weight: 600; font-size: var(--t-petit); margin-bottom: var(--s2); }
.champ input, .champ textarea {
  width: 100%; padding: .85rem 1rem; background: var(--blanc-2);
  border: 1px solid var(--gris-150); border-radius: var(--r-petit);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.champ textarea { resize: vertical; font-family: inherit; }
.champ input:focus, .champ textarea:focus { background: var(--blanc); border-color: var(--encre); }
.mention-rgpd { margin-top: var(--s3); font-size: .8125rem; color: var(--gris-600); line-height: 1.55; }
.mention-rgpd a { text-decoration: underline; text-underline-offset: 2px; }
.message-erreur { border-color: #B42318; color: #B42318; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-succes { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: var(--blanc-2); border: 1px solid var(--encre); border-radius: var(--r-petit); font-size: var(--t-petit); font-weight: 600; }

/* ---------- Fondateur ---------- */
.fondateur { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 800px) { .fondateur { grid-template-columns: 5fr 7fr; gap: var(--s10); } }
.fondateur-visuel { border: 1px solid var(--gris-150); border-radius: var(--r-carte); overflow: hidden; background: var(--blanc); }
.fondateur-visuel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fondateur-texte h2 + p { margin-top: var(--s5); }
.fondateur-texte p { font-size: var(--t-lead); line-height: 1.55; }
.fondateur-texte p + p { margin-top: var(--s4); }
.signature { margin-top: var(--s6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.signature img { height: 56px; width: auto; }
.signature-legende { font-size: var(--t-petit); color: var(--gris-600); }

/* ---------- Footer ---------- */
.site-footer { background: var(--encre); color: rgba(255,255,255,.72); padding-block: var(--pad-section) var(--s6); }
.footer-haut { display: grid; gap: var(--s8); margin-bottom: var(--s10); }
@media (min-width: 900px) { .footer-haut { grid-template-columns: 1fr 2.4fr; } }
.footer-haut .logo { color: var(--blanc); }
.footer-marque p { margin-top: var(--s3); font-size: var(--t-petit); max-width: 34ch; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
@media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col-titre { color: var(--blanc); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; margin-bottom: var(--s4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s2); }
.footer-col a { font-size: var(--t-petit); }
.footer-col a:hover { color: var(--blanc); }
.footer-bas { border-top: 1px solid var(--bordure-sombre); padding-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: .8125rem; color: rgba(255,255,255,.55); }
.footer-bas a:hover { color: var(--blanc); }
.footer-liens-legaux { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ---------- Fil d'Ariane ---------- */
.fil-ariane { border-bottom: 1px solid var(--gris-150); background: var(--blanc); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s3); font-size: .8125rem; color: var(--gris-600); }
.fil-ariane li { display: flex; align-items: center; gap: var(--s2); }
.fil-ariane li + li::before { content: "/"; opacity: .45; }
.fil-ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }

/* ---------- Textes longs ---------- */
.texte-seo, .texte-legal { max-width: 44rem; }
.texte-seo h2, .texte-legal h2 { font-size: clamp(1.6rem, 1.6vw + 1.1rem, 2.2rem); font-weight: 300; margin-top: var(--s10); margin-bottom: var(--s4); text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 1rem); }
.texte-seo > h2:first-child, .texte-legal > h2:first-child { margin-top: 0; }
.texte-seo h3, .texte-legal h3 { font-size: 1.125rem; font-weight: 600; margin-top: var(--s6); margin-bottom: var(--s3); }
.texte-seo p, .texte-legal p { margin-bottom: var(--s4); }
.texte-seo strong { font-weight: 600; }
.texte-seo a, .texte-legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--gris-300); }
.texte-seo a:hover, .texte-legal a:hover { text-decoration-color: var(--encre); }
.texte-seo ul, .texte-legal ul { margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.texte-seo ul li, .texte-legal ul li { display: flex; gap: var(--s3); }
.texte-seo ul li::before, .texte-legal ul li::before { content: "—"; color: var(--gris-600); flex-shrink: 0; }

.page-legale .container { max-width: 52rem; }
/* Sommaire des pages légales : une porte d'entrée dans un document qu'on ne
   lit pas d'une traite. Sobre, sans effet, sans visuel — ces pages n'en
   veulent aucun. */
.page-legale .sommaire {
  margin-bottom: var(--s8); padding: var(--s5) var(--s6);
  background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  max-width: 44rem;
}
.page-legale .sommaire-titre {
  font-size: var(--t-petit); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-600); margin-bottom: var(--s3);
}
.page-legale .sommaire ol {
  margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s2);
  font-size: var(--t-petit);
}
.page-legale .sommaire a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gris-300); }
.page-legale .sommaire a:hover { text-decoration-color: var(--encre); }
.entete-legale { margin-bottom: var(--s8); }
.entete-legale h1 { font-size: clamp(2rem, 2.4vw + 1.2rem, 3.2rem); }
.entete-legale .lead { margin-top: var(--s4); }
.date-maj { margin-top: var(--s4); font-size: var(--t-petit); color: var(--gris-600); }
.sommaire { background: var(--blanc-2); border: 1px solid var(--gris-150); border-radius: var(--r-carte); padding: var(--s5); margin-bottom: var(--s8); }
.sommaire-titre { font-weight: 600; font-size: 1rem; margin-bottom: var(--s3); }
.sommaire ol { list-style: decimal; padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--s2); }
.sommaire li { font-size: var(--t-petit); }
.sommaire a { text-decoration: underline; text-underline-offset: 3px; }
.bloc-editeur { background: var(--blanc-2); border: 1px solid var(--gris-150); border-radius: var(--r-carte); padding: var(--s5); margin-bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.bloc-editeur > div { display: grid; gap: var(--s1); }
@media (min-width: 640px) { .bloc-editeur > div { grid-template-columns: 16rem 1fr; gap: var(--s4); align-items: baseline; } }
.bloc-editeur dt, .bloc-editeur dd { font-size: var(--t-corps); font-weight: 400; color: var(--encre); margin: 0; line-height: 1.6; }
.bloc-editeur dt { color: var(--gris-600); }
.table-scroll { overflow-x: auto; margin-bottom: var(--s5); }
.tableau-legal { width: 100%; min-width: 34rem; background: var(--blanc); border: 1px solid var(--gris-150); border-radius: var(--r-carte); }
.tableau-legal th, .tableau-legal td { padding: var(--s3) var(--s4); text-align: left; font-size: var(--t-petit); border-bottom: 1px solid var(--gris-150); vertical-align: top; }
.tableau-legal th { font-weight: 600; }
.tableau-legal tr:last-child td { border-bottom: 0; }

.galerie { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.metiers-secteur + .metiers-secteur { margin-top: var(--s6); }
.metiers-secteur h4 { font-size: 1.0625rem; margin-bottom: var(--s2); }
.metiers-secteur p { color: var(--gris-600); font-size: var(--t-petit); line-height: 1.6; }
.liens-metiers { display: flex; flex-wrap: wrap; gap: var(--s3); }
.liens-metiers a {
  display: inline-flex; padding: .6rem 1.1rem; border: 1px solid var(--gris-150);
  border-radius: var(--radius-pill); background: var(--blanc); font-weight: 500; font-size: var(--t-petit);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.liens-metiers a:hover { border-color: var(--encre); background: var(--encre); color: var(--blanc); }

/* ---------- Compteurs ---------- */
.compteurs { display: grid; gap: var(--s6); text-align: center; }
@media (min-width: 700px) { .compteurs { grid-template-columns: repeat(3, 1fr); } }
.compteur .valeur { font-family: var(--font-titre); font-weight: 300; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.04em; }
.compteur .etiquette { margin-top: var(--s3); font-size: var(--t-petit); color: var(--gris-600); }

/* ---------- Révélation au scroll ---------- */
.anim [data-anim] { opacity: 0; }
.anim [data-anim="fondu"]   { transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.anim [data-anim="cascade"] { transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.anim [data-anim].vu { opacity: 1; transform: none; }
/* will-change n'est posé que pendant la séquence, jamais en permanence :
   une couche de composition inutile coûte de la mémoire GPU. */
.anim [data-parallaxe].en-vue { will-change: transform; }
.anim .tuiles.en-vue .tuile   { will-change: transform; }

/* ---------- Utilitaires ---------- */
.hidden-until-real { display: none !important; }
.lien-invisible { position: absolute; left: 0; top: -100px; z-index: 300; padding: var(--s3) var(--s5); background: var(--encre); color: var(--blanc); transition: top .15s var(--ease); }
.lien-invisible:focus { top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-6 { margin-top: var(--s6); }

/* ---------- Respect de l'utilisateur : non négociable ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .anim [data-anim], .anim .mot > span, .bloc-f { opacity: 1 !important; transform: none !important; }
  .anim .fenetre .bloc-f { animation: none !important; }
  .carte:hover, .tarif:hover { transform: none !important; }
}

/* =========================================================
   SECTION SIGNATURE — la carte de visite devient un site
   Épinglage en position:sticky (natif, robuste sur Safari iOS
   où la barre d'adresse fait varier la hauteur du viewport).
   ========================================================= */
.signature-sec { position: relative; background: var(--blanc-2); }
/* Hauteur de défilement : la course utile vaut la hauteur moins un écran.
   250vh donnent une séquence qui tient en deux hauteurs d'écran, fin comprise. */
/* Course de défilement de la séquence.
   Portée de 250 à 290 vh le 14 août 2026 : les phrases changeaient avant
   d'avoir été lues. La course utile — hauteur moins un écran, la scène étant
   épinglée — passe ainsi de 150 à 190 vh, et les quatre premiers temps
   gagnent 40 % chacun. Le cinquième garde sa durée : la conclusion et son
   bouton doivent rester directs. Le bandeau total reste sous trois hauteurs
   d'écran. Sur mobile, la piste n'a pas de hauteur imposée : rien ne change. */
.signature-piste { height: 290vh; }
.signature-scene {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
.signature-scene .container { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 1000px) { .signature-scene .container { grid-template-columns: 1fr 1fr; gap: var(--s10); } }

/* Colonne texte : les 5 temps superposés, un seul visible à la fois */
.temps-pile { position: relative; min-height: 12rem; }
.temps {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(14px);
}
.anim .temps { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.temps.actif { opacity: 1; transform: none; }
.temps p {
  font-family: var(--font-titre); font-weight: 250;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.03em;
  color: var(--encre);
}
.temps .cta-temps { margin-top: var(--s6); display: flex; gap: var(--s3); flex-wrap: wrap; }

/* Scène visuelle : tuiles + site reconstitué au même endroit */
.scene-visuel { position: relative; aspect-ratio: 1050 / 680; width: 100%; }

.tuiles { position: absolute; inset: 0; perspective: 1200px; }
.tuile {
  position: absolute; inset: 0;
  /* Une seule ressource SVG, peinte à l'identique par toutes les tuiles ;
     c'est le clip-path posé par le moteur qui donne à chacune sa part. */
  background-image: var(--carte);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backface-visibility: hidden;
}

/* Le site reconstitué : du HTML réel, net à tous les zooms */
.site-final {
  position: absolute; inset: 0; opacity: 0;
  border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  background: var(--blanc); box-shadow: var(--ombre-survol);
  overflow: hidden; display: flex; flex-direction: column;
}
.anim .site-final { transition: opacity .3s var(--ease); }
.site-final .fenetre-barre { flex-shrink: 0; }
.site-final-corps { flex: 1; padding: clamp(.6rem, 1.8vw, 1.4rem); display: flex; flex-direction: column; gap: clamp(.4rem, 1.2vw, .9rem); }
.sf-titre { font-family: var(--font-titre); font-weight: 300; font-size: clamp(.9rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }
.sf-sous { font-size: clamp(.55rem, 1.3vw, .875rem); color: var(--gris-600); }
.sf-bandeau { height: clamp(38px, 9vw, 74px); border-radius: 6px; background: linear-gradient(135deg, var(--gris-900), var(--encre)); }
.sf-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.3rem, 1vw, .7rem); }
.sf-carte { border: 1px solid var(--gris-150); border-radius: 6px; background: var(--blanc-2); padding: clamp(.3rem, .9vw, .6rem); }
.sf-carte b { display: block; font-size: clamp(.5rem, 1.1vw, .75rem); font-weight: 600; }
.sf-carte i { display: block; margin-top: .25em; height: 3px; width: 70%; background: var(--gris-150); border-radius: 2px; }
.sf-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sf-cta { background: var(--encre); color: var(--blanc); border-radius: var(--radius-pill); padding: clamp(.3rem,.9vw,.55rem) clamp(.7rem,2vw,1.2rem); font-size: clamp(.5rem,1.1vw,.8125rem); font-weight: 600; }
.sf-tel { font-size: clamp(.5rem, 1.1vw, .8125rem); color: var(--gris-600); }

/* État statique si le JS échoue ou si le mouvement est refusé :
   carte nette, texte lisible, CTA accessible. Jamais de section vide. */
html:not(.anim) .signature-piste{ height: auto; }
html:not(.anim) .signature-scene{ position: static; height: auto; padding-block: var(--pad-section); }
html:not(.anim) .temps-pile{ min-height: 0; }
html:not(.anim) .temps{ position: static; opacity: 1; transform: none; margin-bottom: var(--s5); }
html:not(.anim) .temps:not(:last-child) p{ font-size: var(--t-lead); font-weight: 400; color: var(--gris-600); }
html:not(.anim) .tuiles, html:not(.anim) .site-final { display: none; }

/* Mouvement refusé : exactement le même état que sans JavaScript — la carte
   intacte, les cinq temps lisibles d'affilée, le site reconstitué retiré. */
@media (prefers-reduced-motion: reduce) {
  .signature-piste { height: auto; }
  .signature-scene { position: static; height: auto; padding-block: var(--pad-section); }
  .temps-pile { min-height: 0; }
  .temps { position: static; opacity: 1; transform: none; margin-bottom: var(--s5); }
  .tuiles, .site-final { display: none; }
}

/* La carte intacte, peinte par CSS : c'est ce que voit un visiteur sans JS,
   et c'est aussi ce qui s'affiche avant que le moteur ne découpe les tuiles. */
.carte-fixe {
  position: absolute; inset: 0;
  background-image: var(--carte);
  background-size: 100% 100%; background-repeat: no-repeat;
  border-radius: var(--r-carte);
}
.scene-visuel.pret .carte-fixe { visibility: hidden; }

/* ---------- Mobile : la section n'est pas épinglée ----------
   Les cinq temps se lisent au défilement normal. La carte se glisse entre le
   premier et le deuxième temps : « Avant, vous donniez ça » doit être suivi de
   la chose, sinon le récit se lit comme un simple pavé de texte. */
@media (max-width: 999px) {
  .signature-piste { height: auto; }
  .signature-scene { position: static; height: auto; padding-block: var(--pad-section); }
  .signature-scene .container { display: flex; flex-direction: column; gap: var(--s10); }
  .temps-pile { display: contents; }
  .temps { position: static; order: 3; margin: 0; }
  .temps:first-child { order: 1; }
  /* La carte est resserrée pour que l'éclatement ait de la marge de chaque
     côté : à pleine largeur, les tuiles des bords sortaient de l'écran. */
  .scene-visuel { order: 2; width: 76%; margin: 0 auto; }
  .tuile { transform-style: flat; }
}

/* Le défilé des métiers s'arrête au survol et au focus clavier. */


/* Transition de page.
   Le fondu d'entrée du document a été retiré le 14 août 2026. Il partait de
   « opacity: 0 » sur <body> : tant que le document est entièrement
   transparent, Chrome n'enregistre aucun premier rendu, et sur les pages où
   la première image tombait dans cette fenêtre de 200 ms, ni FCP ni LCP
   n'étaient jamais émis. Conséquences constatées : hôtel, location
   saisonnière et conciergerie n'étaient pas mesurables en profil mobile, et
   les données de terrain remontées par Chrome auraient été incomplètes pour
   ces pages. Le gain visuel — deux dixièmes de seconde de fondu — ne valait
   pas ce prix. Les révélations au défilement et les titres masqués, eux,
   restent : ils n'affectent pas le rendu de la première image.
   La sortie de page est conservée : elle ne joue qu'après le premier rendu. */
html.sortie body { opacity: 0; transition: opacity .2s var(--ease); }

/* =========================================================
   OUVERTURE DE L'ACCUEIL
   Le héros, le bandeau de maquettes et la séquence de la
   carte forment un bloc. Sur mobile, la carte remonte juste
   sous les boutons : c'est elle qui doit être vue en premier.
   ========================================================= */
.ouverture { display: flex; flex-direction: column; }
@media (max-width: 999px) {
  .ouverture > .hero          { order: 1; }
  .ouverture > .signature-sec { order: 2; }
  .ouverture > .maquettes     { order: 3; }
  /* Le héros est resserré pour que le haut de la carte apparaisse dès le
     premier écran, juste sous les boutons. */
  .hero-v2 { padding-block: 1.75rem .5rem; }
  .hero-v2 h1 { font-size: clamp(1.7rem, 5.4vw, 2.05rem); margin-bottom: var(--s4); }
  .hero-v2 .lead { font-size: 1rem; }
  .hero-v2 .reassurance, .hero-v2 .hero-actions { margin-top: var(--s4); }
  .hero-v2 .rarete { margin-top: var(--s3); }
  /* Le premier temps du récit s'intercale entre les boutons et la carte :
     c'est lui qui l'annonce. On resserre tout ce qui les sépare. */
  .ouverture > .signature-sec .signature-scene { padding-block: 0 var(--pad-section); }
  .ouverture > .signature-sec .signature-scene .container { gap: var(--s5); }
  /* Les phrases ont besoin d'air entre elles pour se lire comme un récit et
     non comme un paragraphe ; seul l'écart entre le premier temps et la carte
     reste serré, pour que la carte entre dans le premier écran. */
  .ouverture > .signature-sec .temps:not(:first-child) { margin-top: var(--s8); }
}

.hero-v2 { padding-block: clamp(2.5rem, 3vw + 1.5rem, 4.5rem) clamp(2rem, 3vw, 3.5rem); }
/* Ce titre fait deux phrases : à l'échelle du jeton --t-h1 il occupait cinq
   lignes et repoussait le bandeau sous la ligne de flottaison. Il garde une
   graisse fine parce qu'il reste au-dessus de 48 px sur écran large. */
.hero-v2 h1 {
  font-size: clamp(2.05rem, 3.7vw, 3.4rem);
  line-height: 1.06; margin-bottom: var(--s5); max-width: 24ch; text-wrap: balance;
}
.hero-v2 .lead { max-width: 52ch; }
.hero-v2 .reassurance { margin-top: var(--s5); }
.hero-v2 .hero-actions { margin-top: var(--s5); }
/* Emplacement du badge d'avis : le balisage est prêt, il ne s'affichera
   qu'une fois JLN_AVIS_REELS passé à true. Aucune étoile inventée. */
.badge-avis { display: inline-flex; align-items: center; gap: var(--s2); }
.rarete {
  margin-top: var(--s4); font-size: var(--t-petit); font-weight: 500; color: var(--gris-600);
}

/* ---------- Bandeau de maquettes ---------- */
.maquettes { padding-block: clamp(1rem, 2vw, 2rem) clamp(3rem, 5vw, 5rem); overflow: hidden; }
.maquettes .eyebrow { margin-bottom: var(--s4); }
.mq-scene { overflow: hidden; padding-block: clamp(2rem, 3.5vw, 3.5rem); }
.mq-rangees { display: grid; gap: 20px; transform: rotate(-8deg); width: 128%; margin-left: -14%; }
.mq-rangee { display: flex; gap: 20px; width: max-content; }
.mq-carte {
  flex: 0 0 auto; width: 340px; margin: 0;
  border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  overflow: hidden; background: var(--blanc); box-shadow: var(--ombre-survol);
}
.mq-carte img { width: 100%; height: auto; display: block; }
.anim .mq-rangee-1 { animation: mq-gauche 46s linear infinite; }
.anim .mq-rangee-2 { animation: mq-droite 52s linear infinite; }
@keyframes mq-gauche { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes mq-droite { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.mq-scene:hover .mq-rangee, .mq-scene:focus-within .mq-rangee { animation-play-state: paused; }
@media (max-width: 999px) {
  .mq-carte { width: 230px; }
  .mq-rangees { gap: 14px; transform: rotate(-6deg); width: 150%; margin-left: -25%; }
  .mq-rangee { gap: 14px; }
}

/* ---------- Six bénéfices, seuls pictogrammes colorés de la page ---------- */
.benefices { border-bottom: 1px solid var(--gris-150); }
.benefices .grid { padding-block: var(--s8); gap: var(--s6) var(--s5); }
@media (min-width: 700px)  { .benefices .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefices .grid { grid-template-columns: repeat(3, 1fr); } }
.benefice { display: flex; align-items: flex-start; gap: var(--s4); }
.benefice svg { flex-shrink: 0; margin-top: 1px; color: var(--teinte); }
.benefice strong { display: block; font-size: 1.0625rem; font-weight: 600; margin-bottom: 3px; }
.benefice span { font-size: var(--t-petit); font-weight: 500; color: var(--gris-600); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .anim .mq-rangee { animation: none !important; }
}

/* =========================================================
   ACCUEIL V3
   ========================================================= */

/* ---------- Héros : texte à gauche, bandeau à droite ---------- */
/* Le bandeau est pleine largeur, sous le héros, à toutes les tailles.
   L'espace à droite du titre reste vide : c'est ce blanc qui aère la page. */
.hero-v2 h1, .hero-v2 .lead { margin-right: auto; }

.mq-titre { margin-bottom: var(--s5); }
.mq-carte { cursor: default; }
/* Le défilement ne s'arrête jamais : ni au survol, ni au focus. */
.anim .mq-rangee { animation-play-state: running !important; }

.rarete-finale {
  max-width: var(--largeur); margin: 0 auto; padding: 0 var(--s5) var(--s4);
  font-size: var(--t-petit); font-weight: 500; color: var(--gris-600);
}

/* ---------- Exemples de design ---------- */
.exemples { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .exemples { grid-template-columns: repeat(3, 1fr); } }
.exemple { margin: 0; }
.exemple a { display: block; border: 1px solid var(--gris-150); border-radius: var(--r-carte); overflow: hidden; background: var(--blanc); box-shadow: var(--ombre); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.exemple a:hover, .exemple a:focus-visible { box-shadow: var(--ombre-survol); transform: translateY(-3px); }
.exemple img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--gris-150); }
.exemple figcaption { padding: var(--s4) var(--s5) var(--s5); }
.exemple strong { display: block; font-size: 1.0625rem; font-weight: 600; }
.exemple span { font-size: var(--t-petit); color: var(--gris-600); font-weight: 500; }
.exemples-mention { margin-top: var(--s5); font-size: var(--t-petit); font-weight: 500; color: var(--gris-600); }

/* ---------- Séquence carte : traitement mobile ---------- */
/* Les phrases montent derrière un masque, mot par mot, quand leur temps
   devient actif — et non au chargement de la page comme les grands titres. */
.anim .temps .mot > span { animation: none; transform: translateY(105%); transition: transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.anim .temps.actif .mot > span, .anim .temps.vu .mot > span { transform: translateY(0); }
/* Sur mobile les temps ne sont pas pilotés par le scrub mais révélés à la
   lecture : sans cette règle ils restent à opacité nulle, puisque « actif »
   n'est jamais posé. */
.anim .temps.vu { opacity: 1; transform: none; }

/* Le dernier temps porte la phrase la plus forte de la séquence, et le bouton
   arrive juste dessous, dans le même écran. */
.temps-final {
  font-family: var(--font-titre); font-weight: 600;
  font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--encre);
}
.temps-conclusion .cta-temps { margin-top: var(--s5); }

@media (max-width: 999px) {
  /* 78 % de la largeur du viewport, centrée, avec des marges latérales
     visibles de part et d'autre. Le conteneur porte déjà 24 px de marge
     interne de chaque côté, d'où le calcul en vw plutôt qu'en pourcentage. */
  .ouverture > .signature-sec .scene-visuel { width: 78vw; margin-inline: auto; }
  .temps p { font-size: clamp(1.75rem, 8vw, 2.125rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
  .temps-final { font-size: clamp(2.125rem, 9.5vw, 2.5rem); }
}

/* =========================================================
   HÉROS — écriture progressive de la deuxième ligne
   Tout est en CSS : le texte est dans le HTML dès le départ,
   il occupe sa place définitive, et l'animation ne fait que
   le rendre visible. Aucune hauteur ne change, donc aucun
   décalage de mise en page.
   ========================================================= */
.machine { position: relative; }
.machine .c { position: relative; }
.machine .curseur-fin { display: none; }

/* Une durée de 1 ms est plus courte qu'une image d'écran : Chrome cessait
   d'appliquer l'état final au-delà des premiers caractères. Un fondu court,
   avec un remplissage « both », tient l'état avant comme après. */
.anim .machine .c {
  opacity: 0;
  animation: machine-taper .05s linear both;
  animation-delay: calc(var(--debut) + var(--i) * var(--pas));
}
@keyframes machine-taper { from { opacity: 0; } to { opacity: 1; } }

/* Le curseur suit la frappe : chaque caractère porte le sien, visible le temps
   d'un pas seulement, ce qui donne un curseur qui avance. */
.anim .machine .c::after {
  content: ""; position: absolute; right: -0.07em; top: 0.1em; bottom: 0.14em;
  width: 0.055em; background: currentColor; opacity: 0;
  /* La durée d'affichage du curseur vaut un pas de frappe, soit 28 ms. Mais
     une animation aussi courte n'est pas fiable : Chrome laissait un curseur
     bloqué en fin de course. On étire donc l'animation à vingt pas et on ne
     rend le curseur visible que sur le premier vingtième — même fenêtre,
     durée réelle assez longue pour être respectée. */
  animation: machine-curseur calc(var(--pas) * 20) linear forwards;
  animation-delay: calc(var(--debut) + var(--i) * var(--pas));
}
@keyframes machine-curseur { 0%, 4.99% { opacity: 1; } 5%, 100% { opacity: 0; } }

/* Puis il clignote trois fois à la fin de la ligne, et disparaît. */
.anim .machine .curseur-fin {
  display: inline-block; width: 0.055em; height: 0.74em; margin-left: 0.05em;
  background: currentColor; vertical-align: -0.04em; opacity: 0;
  animation: machine-clignote .48s steps(1) 3 forwards;
  animation-delay: var(--fin);
}
@keyframes machine-clignote { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .machine .c { opacity: 1 !important; animation: none !important; }
  .machine .c::after, .machine .curseur-fin { display: none !important; animation: none !important; }
}

/* =========================================================
   GABARIT MÉTIER
   ========================================================= */

/* ---------- Héros : texte à gauche, maquette du métier à droite ---------- */
.hero-metier .container { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 1000px) {
  .hero-metier .container { grid-template-columns: 1.05fr .95fr; gap: var(--s10); }
}
/* Deux phrases dans une demi-colonne : à l'échelle du jeton global le titre
   occupait six lignes et repoussait tout sous la ligne de flottaison. */
.hero-metier h1 {
  font-size: clamp(1.95rem, 3.3vw, 3.1rem);
  line-height: 1.06; max-width: 22ch; text-wrap: balance;
}
.hero-metier h1 .machine { font-weight: 500; }
.hero-metier .lead { max-width: 52ch; }
.hero-maquette { margin: 0; }
.hero-maquette img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--gris-150); border-radius: var(--r-carte);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .10);
  transform: rotate(-6deg);
}
.hero-maquette figcaption {
  margin-top: var(--s5); font-size: var(--t-petit); font-weight: 500; color: var(--gris-600); text-align: center;
}

/* ---------- Comparateur avant / après ---------- */
.compare { display: grid; gap: var(--s4); }
@media (min-width: 700px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare figure { margin: 0; border: 1px solid var(--gris-150); border-radius: var(--r-carte); overflow: hidden; background: var(--blanc); }
.compare img { width: 100%; height: auto; display: block; }
.compare figcaption { padding: var(--s3) var(--s4); font-size: var(--t-petit); font-weight: 600; }
.compare-trait, .compare-poignee { display: none; }

/* Une fois le script en place, les deux visuels se superposent et la poignée
   révèle l'un ou l'autre. Sans script, la règle ci-dessus reste seule et les
   deux images restent côte à côte. */
.compare.pret {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--gris-150); border-radius: var(--r-carte); touch-action: pan-y;
}
.compare.pret figure { border: 0; border-radius: 0; }
.compare.pret .compare-apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
/* Les étiquettes étaient trop discrètes pour se lire d'un coup d'œil : elles
   passent en haut de chaque moitié, sur une pastille franchement contrastée.
   Le côté « avant » reste clair, le côté « après » passe en noir plein — la
   lecture se fait alors sans avoir à chercher. */
.compare.pret figcaption {
  position: absolute; top: 14px; padding: 9px 18px; border-radius: var(--radius-pill);
  font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em;
}
.compare.pret .compare-avant figcaption {
  left: 14px; background: var(--gris-150); color: var(--encre);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
}
.compare.pret .compare-apres figcaption {
  right: 14px; background: var(--encre); color: var(--blanc);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
@media (max-width: 560px) { .compare.pret figcaption { font-size: 1rem; padding: 7px 14px; } }
.compare.pret .compare-trait {
  display: block; position: absolute; top: 0; bottom: 0; left: var(--x, 50%);
  width: 2px; background: var(--blanc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); pointer-events: none;
}
/* La poignée porte deux chevrons : sans eux, rien n'indique qu'elle se
   déplace. C'est le premier des trois signaux, avec la démonstration
   automatique au premier passage et l'étiquette ci-dessous. */
.compare.pret .compare-trait::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%; background: var(--blanc);
  border: 2px solid var(--encre);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .34), 0 0 0 6px rgba(255, 255, 255, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6 5 12l5 6'/%3E%3Cpath d='m14 6 5 6-5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 26px;
}

/* Étiquette d'amorce : elle disparaît dès la première manipulation. */
.compare-aide { display: none; }
.compare.pret .compare-aide {
  /* L'étiquette suit la poignée : au centre du bloc, elle donnait l'impression
     de désigner autre chose pendant la démonstration. */
  display: block; position: absolute; left: var(--x, 50%); top: 50%;
  transform: translate(-50%, calc(-50% + 48px));
  background: var(--encre); color: var(--blanc); border-radius: var(--radius-pill);
  padding: 7px 15px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  pointer-events: none; transition: opacity .3s var(--ease);
}
.compare.pret.touche .compare-aide { opacity: 0; }
.compare.pret .compare-poignee {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none;
}
.compare.pret:focus-within { outline: 2px solid var(--encre); outline-offset: 3px; }

/* Rappel « sur mesure » sous la liste de contenu : discret, mais pas au point
   de passer inaperçu — c'est une réserve contractuelle autant qu'une nuance. */
.note-sur-mesure {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-left: 2px solid var(--gris-150);
  font-size: var(--t-petit); font-style: italic; color: var(--gris-600); line-height: 1.6;
}
.section-encre .note-sur-mesure { border-left-color: rgba(255,255,255,.28); }

/* ---------- Photos du corps de page ---------- */
.photo-page { margin: var(--s8) 0; }
.photo-page-cadre { border-radius: var(--r-carte); overflow: hidden; background: var(--blanc-2); }
.photo-page img { width: 100%; height: auto; display: block; filter: saturate(.82) contrast(1.05); }
.photo-page figcaption { margin-top: var(--s3); font-size: var(--t-petit); font-weight: 500; color: var(--gris-600); }

/* ---------- Bandeau défilant des métiers ---------- */
.bandeau-metiers { border-block: 1px solid var(--gris-150); overflow: hidden; padding-block: var(--s5); }
.metiers-piste { display: flex; width: max-content; gap: var(--s6); }
.anim .metiers-piste { animation: metiers-defile 64s linear infinite; }
@keyframes metiers-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bandeau-metiers:hover .metiers-piste,
.bandeau-metiers:focus-within .metiers-piste { animation-play-state: paused; }
.metiers-piste a {
  font-size: var(--t-petit); font-weight: 600; color: var(--gris-600);
  white-space: nowrap; padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.metiers-piste a:hover, .metiers-piste a:focus-visible { color: var(--encre); border-color: var(--encre); }
.metiers-piste span { color: var(--gris-300); }

@media (prefers-reduced-motion: reduce) {
  .anim .metiers-piste { animation: none !important; }
  .hero-maquette img { transform: none; }
}