/* =========================================================
   Evolenia — feuille de styles du site (direction sombre)
   Ambiance crépuscule : bleus profonds à lavande, ivoire pour les titres, champagne pour les accents,
   collines et canopée photographiques (Unsplash, étalonnées) en couches superposées (parallaxe dans script.js).
   Photos : Unsplash (licence Unsplash) — faisceaux lumineux,
   baies de serveurs, réseau de blocs. Paysage : docs/sources-photos.md.
   ========================================================= */

:root {
  /* Couleurs */
  --noir: #0B1535;          /* fond principal : bleu nuit du crépuscule */
  --releve: #101D47;        /* sections légèrement relevées */
  --titre: #F3EFE6;         /* titres (ivoire) */
  --texte: #C5CBE0;         /* texte courant */
  --doux: #9AA3C6;          /* texte secondaire */
  --champagne: #C9B48A;     /* accent : italiques, numéros, labels, bouton principal */
  --champagne-vif: #E6D5B0; /* survol du bouton principal */
  --nuit: #1F3150;          /* lueurs */
  --bleu: #26426E;          /* lueurs plus franches */
  --filet: rgba(214, 222, 255, 0.12);
  --filet-fort: rgba(214, 222, 255, 0.22);
  --verre: rgba(214, 222, 255, 0.05);

  /* Typographie */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-h1: clamp(3rem, min(7vw, 10.5vh), 7rem);
  --t-h2: clamp(2.4rem, 5vw, 4.5rem);
  --t-h3-serif: clamp(1.75rem, 2.6vw, 2.375rem);
  --t-chapeau: clamp(1.125rem, 1.45vw, 1.3125rem);
  --t-texte: 1.0625rem;
  --t-label: 0.75rem;

  /* Espaces et grille */
  --marge: clamp(20px, 5vw, 64px);
  --gouttiere: clamp(16px, 2vw, 24px);
  --section: clamp(104px, 13vw, 200px);
  --largeur: 1320px;
  --rayon: 20px;

  --courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --doux-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Rôles des accents */
  --c-num: var(--champagne);
  --c-label: var(--champagne);
  --c-filet-fort: var(--champagne);
  --c-lien: var(--titre);
  --c-em: var(--champagne);
}

/* ---------- Polices hébergées sur le site (licence SIL Open Font) ---------- */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 200 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/newsreader-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/newsreader-italic-latin.woff2") format("woff2"); }

/* ---------- Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; background: var(--noir); color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-texte);
  line-height: 1.65;
  color: var(--texte);
  background: var(--noir);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-ouvert { overflow: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--champagne); color: var(--noir); }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
.section { position: relative; padding-block: var(--section); }

.evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--titre); color: var(--noir); padding: 12px 18px; text-decoration: none; transition: top 0.2s; }
.evitement:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; border-radius: 4px; }

/* ---------- Typographie ---------- */
h1, h2 { font-family: var(--serif); font-weight: 300; color: var(--titre); font-optical-sizing: auto; }
h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--c-em); }
h3 { color: var(--titre); }
.label {
  display: flex; align-items: center; gap: 14px;
  font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-label);
}
.label::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; transform-origin: left; }
.chapeau { font-size: var(--t-chapeau); line-height: 1.6; max-width: 56ch; }
.num { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--c-num); }

/* ---------- Boutons et liens ---------- */
.bouton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 56px; padding: 16px 28px;
  background: var(--champagne); color: var(--noir);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(201, 180, 138, 0);
  transition: background-color 0.3s ease-out, box-shadow 0.4s var(--courbe), translate 0.4s var(--courbe);
}
/* Reflet qui traverse le bouton au survol */
.bouton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); translate: -120% 0; transition: translate 0.8s var(--courbe); }
.bouton:hover { background: var(--champagne-vif); box-shadow: 0 0 0 6px rgba(201, 180, 138, 0.12), 0 18px 40px -16px rgba(201, 180, 138, 0.55); translate: 0 -2px; }
.bouton:hover::before { translate: 120% 0; }
.bouton .fleche { display: inline-flex; flex: none; transition: transform 0.35s var(--courbe); }
.bouton:hover .fleche, .bouton:focus-visible .fleche { transform: translateX(5px); }

.lien { position: relative; display: inline-block; padding: 12px 0; color: var(--c-lien); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor; opacity: 0.5; transform-origin: left; transition: transform 0.35s var(--courbe), opacity 0.3s; }
.lien:hover::after { transform: scaleX(0.35); opacity: 1; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

/* ---------- En-tête ---------- */
.entete { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-block: 26px; transition: padding 0.5s var(--courbe), background-color 0.5s ease, border-color 0.5s ease; border-bottom: 1px solid transparent; }
.entete.condense { padding-block: 12px; background: rgba(11, 21, 53, 0.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--filet); }
.entete-ligne { display: flex; align-items: center; gap: 32px; }
/* Logotype : capitales fines resserrées, barre du premier E détachée du fût */
.marque { display: inline-block; font-family: var(--sans); font-size: 2.25rem; font-weight: 300; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--titre); text-decoration: none; margin-right: auto; margin-left: -0.08em; padding-block: 6px; transition: font-size 0.5s var(--courbe); }
.entete.condense .marque { font-size: 1.875rem; }
/* La découpe suit les mesures du E de Hanken Grotesk (graisse 300 ici, graisse 200 dans le pied de page) */
.logo-e { display: inline-block; --cx: 0.151em; --cy: 0.452em; --cl: 0.103em; --ch: 0.085em; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--cx) var(--cy), calc(var(--cx) + var(--cl)) var(--cy), calc(var(--cx) + var(--cl)) calc(var(--cy) + var(--ch)), var(--cx) calc(var(--cy) + var(--ch)), var(--cx) var(--cy)); }
.nav { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav a { position: relative; padding: 10px 0; font-size: 0.9375rem; font-weight: 500; color: var(--texte); text-decoration: none; transition: color 0.2s ease-out; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--c-filet-fort); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--courbe); }
.nav a:hover, .nav a.actif { color: var(--titre); }
.nav a:hover::after, .nav a.actif::after { transform: scaleX(1); }
.entete-cta { padding: 10px 20px; font-size: 0.9375rem; font-weight: 500; color: var(--titre); text-decoration: none; margin-left: clamp(8px, 2vw, 24px); border: 1px solid var(--filet-fort); border-radius: 999px; transition: border-color 0.3s, background-color 0.3s, color 0.3s; }
.entete-cta:hover { border-color: var(--champagne); background: rgba(201, 180, 138, 0.1); color: var(--champagne-vif); }

.burger { display: none; position: relative; width: 48px; height: 48px; margin-right: -12px; padding: 0; border: 0; background: none; cursor: pointer; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--titre); transition: transform 0.45s var(--courbe), top 0.45s var(--courbe); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 112px var(--marge) 40px; background: radial-gradient(120% 60% at 50% 100%, rgba(38, 66, 110, 0.35), transparent 70%), var(--noir); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu.ouvert { opacity: 1; visibility: visible; transition: opacity 0.4s ease; }
.menu nav a { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--filet); font-family: var(--serif); font-weight: 300; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.015em; color: var(--titre); text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s var(--courbe); }
.menu nav a span { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--c-num); }
.menu.ouvert nav a { opacity: 1; transform: none; }
.menu.ouvert nav a:nth-child(2) { transition-delay: 0.06s; }
.menu.ouvert nav a:nth-child(3) { transition-delay: 0.12s; }
.menu.ouvert nav a:nth-child(4) { transition-delay: 0.18s; }
.menu .bouton { width: 100%; }

/* =========================================================
   Scènes en couches (hero et appel final)
   Chaque couche reçoit --dy du script : plus elle est lointaine, plus elle traîne.
   ========================================================= */
.scene { position: relative; isolation: isolate; overflow: hidden; }
.scene-fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.couche { position: absolute; left: 50%; max-width: none; pointer-events: none; user-select: none; transform: translate3d(-50%, var(--dy, 0px), 0); will-change: transform; }
.halo { display: block; width: min(1400px, 140vw); height: 70%; bottom: 8%; background: radial-gradient(closest-side, rgba(38, 66, 110, 0.55), rgba(31, 49, 80, 0.2) 55%, transparent); }
.couche-avant { z-index: 3; bottom: -1px; width: max(1600px, 112vw); height: auto; transform: translate3d(-50%, 0, 0); }

/* ---------- Hero ---------- */
.hero { min-height: max(680px, 100vh); min-height: max(680px, 100svh); display: flex; flex-direction: column; padding-top: clamp(96px, 14vh, 128px); background: radial-gradient(90% 60% at 50% 0%, #0A1433 0%, var(--noir) 70%); }
/* Voile qui garde le titre lisible au-dessus de la Terre */
.hero .scene-fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 42%, rgba(11, 21, 53, 0.55), transparent 75%); }
.hero-contenu { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: clamp(72px, 11vh, 170px); transform: translate3d(0, var(--dy, 0px), 0); }
.hero-label { justify-content: center; margin-bottom: clamp(24px, 4vh, 40px); }
.hero-label::after { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }
.hero-titre { font-size: var(--t-h1); line-height: 1; letter-spacing: -0.03em; max-width: 13.5ch; text-wrap: balance; text-shadow: 0 2px 40px rgba(11, 21, 53, 0.6); }
.hero-titre em { position: relative; }
/* Soulignement du mot en italique : se trace de gauche à droite une fois le titre apparu */
.hero-titre em::after { content: ""; position: absolute; left: 0.03em; right: 0.1em; bottom: 0.04em; height: max(1px, 0.018em); background: currentColor; transform-origin: left; }
.hero .chapeau { margin: clamp(20px, 3.4vh, 36px) auto 0; max-width: 54ch; color: #CDD0D7; }
.hero .actions { justify-content: center; margin-top: clamp(24px, 4vh, 40px); }
.hero-pied { position: relative; z-index: 4; padding-bottom: clamp(20px, 3.5vh, 36px); }
.hero-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(20px, 4vw, 56px); font-size: 0.875rem; color: var(--titre); }
.hero-index li { display: flex; align-items: baseline; gap: 12px; }
.hero-index span { font-family: var(--serif); font-size: 0.875rem; color: var(--c-num); font-variant-numeric: tabular-nums; }

/* Apparition mot à mot du titre */
.js .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.16em 0; margin: 0 -0.06em -0.16em 0; }
.js .mot > span { display: inline-block; transform: translateY(108%); animation: monter 0.9s var(--courbe) both; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes monter { to { transform: none; } }
.js .hero-label, .js .hero .chapeau, .js .hero .actions > *, .js .hero-index li { opacity: 0; animation: fondre 0.8s var(--courbe) both; }
.js .hero-label { animation-delay: 0.05s; }
.js .hero .chapeau { animation-delay: 0.7s; }
.js .hero .actions > :nth-child(1) { animation-delay: 0.85s; }
.js .hero .actions > :nth-child(2) { animation-delay: 0.95s; }
.js .hero-index li:nth-child(1) { animation-delay: 1.1s; }
.js .hero-index li:nth-child(2) { animation-delay: 1.2s; }
.js .hero-index li:nth-child(3) { animation-delay: 1.3s; }
.js .hero-titre em::after { transform: scaleX(0); animation: tracer 0.7s var(--courbe) 1.2s both; }
/* Les couches se posent l'une après l'autre au chargement */
.js .hero .couche-avant { animation: lever 1.4s var(--courbe) 0.4s both; }
@keyframes fondre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tracer { to { transform: scaleX(1); } }
@keyframes lever { from { opacity: 0; translate: 0 60px; } }

/* ---------- Têtes de section ---------- */
.tete-section { align-items: end; row-gap: 28px; margin-bottom: clamp(56px, 7vw, 104px); }
.tete-titre { grid-column: 1 / span 7; }
.tete-titre .label, .benefices-titre .label, .etude-titre .label, .problemes-tete .label { margin-bottom: 28px; }
.tete-intro { grid-column: 9 / span 4; max-width: 40ch; padding-bottom: 8px; color: var(--doux); }

/* ---------- Cartes vitrées : lumière qui suit le pointeur ---------- */
.carte {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--filet); border-radius: var(--rayon);
  transition: border-color 0.4s ease, translate 0.5s var(--courbe);
}
.lumiere { --x: 50%; --y: 50%; }
.lumiere::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--x) var(--y), rgba(201, 180, 138, 0.12), transparent 45%); opacity: 0; transition: opacity 0.4s ease; }
@media (hover: hover) {
  .carte:hover { border-color: rgba(201, 180, 138, 0.32); translate: 0 -4px; }
  .lumiere:hover::before { opacity: 1; }
}

/* ---------- À propos : ce que nous observons ---------- */
.problemes .grille { align-items: start; row-gap: 48px; }
.problemes-tete { grid-column: 1 / span 5; position: sticky; top: 130px; }
.problemes h2 { max-width: 13ch; }
.constats { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
.constat { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 36px); min-height: 260px; }
.constat .num { font-size: 0.9375rem; margin-bottom: auto; padding-bottom: 28px; }
.constat .enonce { font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--titre); }
.constat .detail { font-size: 0.9375rem; color: var(--doux); line-height: 1.55; }
.transition { grid-column: 7 / span 6; font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.35; color: var(--titre); padding-left: 24px; border-left: 1px solid var(--champagne); }

/* ---------- Solutions : cartes à image de fond ---------- */
.solutions { background: linear-gradient(180deg, var(--noir), var(--releve) 30%, var(--releve) 70%, var(--noir)); }
.services { display: grid; gap: clamp(24px, 3vw, 40px); }
.service {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border: 1px solid var(--filet); border-radius: calc(var(--rayon) + 6px); overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.service:nth-child(even) .service-visuel { order: 2; }
.service-visuel { position: relative; isolation: isolate; min-height: clamp(380px, 38vw, 520px); overflow: hidden; }
.service-image { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, var(--dy, 0px), 0); scale: 1.02; transition: scale 1.2s var(--courbe), filter 0.8s ease; filter: saturate(0.75) brightness(0.8); }
.service-visuel::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(11, 21, 53, 0.95) 8%, rgba(11, 21, 53, 0.45) 55%, rgba(11, 21, 53, 0.15)); }
.service-visuel.lumiere::before { z-index: 1; }
.service-tete { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(28px, 3.4vw, 48px); }
.service-tete .num { display: block; font-size: 1rem; margin-bottom: 18px; }
.service-tete h3 { font-family: var(--serif); font-weight: 300; font-size: var(--t-h3-serif); line-height: 1.08; letter-spacing: -0.018em; margin-bottom: 14px; max-width: 16ch; text-wrap: balance; }
.service-tete p { max-width: 34ch; color: #D4D6DC; }
.service-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: clamp(28px, 3vw, 40px) var(--gouttiere); padding: clamp(28px, 3.4vw, 52px); }
.service-corps > div { border-top: 1px solid var(--filet-fort); padding-top: 16px; }
.service-corps dt { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); margin-bottom: 10px; }
.service-corps dd { font-size: 0.975rem; line-height: 1.6; }
.service-corps .resultat { grid-column: 1 / -1; border-top-color: var(--champagne); }
.service-corps .resultat dt { color: var(--champagne); }
.service-corps .resultat dd { font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.35; color: var(--titre); }
@media (hover: hover) {
  .service:hover { border-color: rgba(201, 180, 138, 0.3); }
  .service:hover .service-image { scale: 1.08; filter: saturate(0.95) brightness(0.9); }
  .service-visuel:hover::before { opacity: 1; }
}

/* ---------- Exemple concret ---------- */
.fil { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gouttiere); padding-top: 44px; }
.fil::before, .fil::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--filet-fort); }
.fil::after { background: linear-gradient(90deg, var(--champagne), var(--champagne-vif)); box-shadow: 0 0 12px rgba(201, 180, 138, 0.6); transform: scaleX(var(--progression, 0)); transform-origin: left; }
.fil li { position: relative; padding-right: 10%; }
.fil li::before { content: ""; position: absolute; top: -49px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--noir); border: 1px solid var(--champagne); box-shadow: 0 0 0 5px rgba(201, 180, 138, 0.08); }
.fil .heure { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; color: var(--titre); font-variant-numeric: lining-nums; margin-bottom: 24px; }
.fil h3, .temps h3 { font-family: var(--sans); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.fil h3 { margin-bottom: 10px; }
.fil p { font-size: 1rem; line-height: 1.6; color: var(--doux); }

/* ---------- Bénéfices ---------- */
.benefices { border-top: 1px solid var(--filet); }
.benefices .grille { align-items: start; row-gap: 48px; }
.benefices-titre { grid-column: 1 / span 5; position: sticky; top: 130px; }
.benefices-titre h2 { max-width: 12ch; }
.benefices-liste { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
.benefices-liste li { padding: clamp(28px, 3vw, 40px); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.benefices-liste li:nth-child(even) { margin-top: clamp(0px, 5vw, 64px); margin-bottom: calc(-1 * clamp(0px, 5vw, 64px)); }
.benefices-liste h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.1vw, 1.875rem); line-height: 1.12; letter-spacing: -0.012em; }
.benefices-liste p { font-size: 0.975rem; line-height: 1.6; color: var(--doux); }

/* ---------- Confiance : méthode et engagements ---------- */
.confiance { position: relative; background: radial-gradient(80% 50% at 50% 0%, rgba(31, 49, 80, 0.4), transparent 70%), var(--releve); border-top: 1px solid var(--filet); }
.temps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.temps li { padding: clamp(28px, 3vw, 40px); }
.temps .num { display: block; font-weight: 300; font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: clamp(24px, 3vw, 40px); }
.temps h3 { margin-bottom: 12px; }
.temps p { color: var(--doux); }

.etude { padding-top: 0; }
.etude .grille { align-items: start; row-gap: 48px; padding-top: var(--section); border-top: 1px solid var(--filet); }
.etude-titre { grid-column: 1 / span 6; }
.etude-titre h2 { margin-bottom: 32px; }
.etude-titre .chapeau { color: var(--titre); }
.etude-corps { grid-column: 8 / span 5; }
.etude-liste { display: grid; gap: 12px; margin-bottom: 36px; counter-reset: e; }
.etude-liste li { counter-increment: e; display: grid; grid-template-columns: 44px 1fr; padding: 20px 22px; border: 1px solid var(--filet); border-radius: 14px; background: var(--verre); line-height: 1.55; color: var(--titre); }
.etude-liste li::before { content: "0" counter(e); font-family: var(--serif); font-size: 0.9375rem; color: var(--c-num); padding-top: 1px; }
@media (hover: hover) { .etude-liste li:hover { border-color: rgba(201, 180, 138, 0.32); } }

/* ---------- Appel final ---------- */
.contact { padding-bottom: clamp(240px, 26vw, 360px); background: var(--noir); }
.contact .scene-fond::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(to bottom, var(--noir) 10%, transparent); }
.contact .halo { bottom: 0; height: 80%; }
.contact-contenu { position: relative; z-index: 2; }
.filet-champagne { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, var(--champagne), transparent); margin-bottom: clamp(40px, 5vw, 64px); transform-origin: left; }
.contact .label { margin-bottom: 32px; }
.contact h2 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.contact-bas { margin-top: clamp(40px, 5vw, 72px); align-items: start; row-gap: 32px; }
.contact-bas .chapeau { grid-column: 1 / span 6; color: #CDD0D7; }
.contact-actions { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ---------- Pied de page ---------- */
.pied { position: relative; padding: clamp(40px, 5vw, 72px) 0 32px; background: var(--noir); font-size: 0.9375rem; overflow-x: clip; }
.pied-haut { row-gap: 40px; align-items: start; }
.pied-phrase { grid-column: 1 / span 5; font-family: var(--serif); font-weight: 300; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--titre); max-width: 22ch; }
.pied-nav { grid-column: 8 / span 2; }
.pied-contact { grid-column: 10 / span 3; }
.pied-nav, .pied-contact { display: flex; flex-direction: column; align-items: flex-start; }
.pied-nav a, .pied-contact a { padding: 7px 0; color: var(--texte); text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom 5px / 0 1px no-repeat; transition: background-size 0.35s var(--courbe), color 0.2s ease-out; }
.pied-nav a:hover, .pied-contact a:hover { color: var(--titre); background-size: 100% 1px; }
.pied-marque { container-type: inline-size; margin: clamp(56px, 8vw, 112px) 0 0; user-select: none; -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%); mask-image: linear-gradient(to bottom, #000 20%, transparent 100%); }
.pied-marque > span { display: block; margin-left: -0.088em; font-family: var(--sans); font-weight: 200; font-size: 19cqw; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: rgba(243, 239, 230, 0.5); }
.pied-marque .logo-e { --cx: 0.135em; --cy: 0.464em; --cl: 0.09em; --ch: 0.064em; }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--filet); font-size: 0.8125rem; color: var(--doux); }
.pied-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pied-legal a { padding: 6px 0; color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom 4px / 0 1px no-repeat; transition: background-size 0.35s var(--courbe), color 0.2s ease-out; }
.pied-legal a:hover { color: var(--titre); background-size: 100% 1px; }
/* Pages sans scène finale : un filet sépare le contenu du pied de page */
.page-texte + .pied { border-top: 1px solid var(--filet); }

/* ---------- Pages de texte (mentions légales, confidentialité, page introuvable) ---------- */
.page-texte { padding: clamp(168px, 18vw, 240px) 0 var(--section); background: radial-gradient(70% 40% at 50% 0%, rgba(31, 49, 80, 0.45), transparent 70%); }
.page-texte .label { grid-column: 1 / span 3; align-self: start; padding-top: 14px; }
.page-texte h1 { grid-column: 4 / span 8; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.022em; margin-bottom: clamp(40px, 5vw, 72px); text-wrap: balance; }
.prose { grid-column: 4 / span 7; max-width: 68ch; }
.prose h2 { font-family: var(--sans); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--filet); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-bottom: 16px; }
.prose ul { padding-left: 20px; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--champagne); }
.prose a { color: var(--champagne); text-underline-offset: 3px; }
.prose .maj { margin-top: 48px; font-size: 0.875rem; color: var(--doux); }
.page-texte .actions { grid-column: 4 / span 8; margin-top: 8px; }
@media (max-width: 1080px) {
  .page-texte .label, .page-texte h1, .prose, .page-texte .actions { grid-column: 1 / -1; }
  .page-texte .label { padding-top: 0; margin-bottom: 28px; }
}
@media (max-width: 760px) { .page-texte { padding-top: 128px; } }

/* ---------- Apparitions au défilement ---------- */
.js .apparait { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--courbe), transform 0.9s var(--courbe), border-color 0.4s ease, translate 0.5s var(--courbe); transition-delay: var(--retard, 0s), var(--retard, 0s), 0s, 0s; }
.js .apparait.visible { opacity: 1; transform: none; }
.js .service.apparait { transform: translateY(48px) scale(0.98); }
.js .service.apparait.visible { transform: none; }
.js .label.apparait::before { transform: scaleX(0); transition: transform 0.7s var(--courbe) 0.2s; }
.js .label.apparait.visible::before { transform: scaleX(1); }
.js .filet-champagne { transform: scaleX(0); transition: transform 1.2s var(--courbe); }
.js .contact.vue .filet-champagne { transform: scaleX(1); }

/* Constats : le numéro s'allume au moment de l'apparition */
.js .constat.apparait .num { color: var(--doux); transition: color 0.8s var(--doux-ease); transition-delay: calc(var(--retard, 0s) + 0.3s); }
.js .constat.apparait.visible .num { color: var(--c-num); }

/* Exemple : la ligne relie les étapes au fil du défilement ; chaque étape se révèle quand la ligne l'atteint */
.fil::after { transition: transform 0.5s var(--doux-ease); }
.js .fil li::before { transform: scale(0); transition: transform 0.45s var(--courbe); transition-delay: var(--retard, 0s); }
.js .fil li .heure, .js .fil li h3, .js .fil li p { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--courbe), transform 0.7s var(--courbe); }
.js .fil li.atteint::before { transform: scale(1); }
.js .fil li.atteint .heure, .js .fil li.atteint h3, .js .fil li.atteint p { opacity: 1; transform: none; }
.js .fil li.atteint .heure { transition-delay: var(--retard, 0s); }
.js .fil li.atteint h3 { transition-delay: calc(var(--retard, 0s) + 0.2s); }
.js .fil li.atteint p { transition-delay: calc(var(--retard, 0s) + 0.3s); }

/* Méthode : le numéro s'affiche, puis le titre et le texte */
.js .temps li.apparait .num, .js .temps li.apparait h3, .js .temps li.apparait p { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--courbe), transform 0.7s var(--courbe); }
.js .temps li.apparait.visible .num, .js .temps li.apparait.visible h3, .js .temps li.apparait.visible p { opacity: 1; transform: none; }
.js .temps li.apparait.visible .num { transition-delay: calc(var(--retard, 0s) + 0.3s); }
.js .temps li.apparait.visible h3 { transition-delay: calc(var(--retard, 0s) + 0.45s); }
.js .temps li.apparait.visible p { transition-delay: calc(var(--retard, 0s) + 0.55s); }

/* ---------- Illustrations au trait (repassées en trait clair) ---------- */
.illus { display: block; height: auto; color: var(--titre); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.illus .a { stroke: var(--champagne); }               /* l'élément qui agit */
.illus .g { stroke: #6D78A3; }                        /* ce qui reste en retrait */
.illus .pt { fill: var(--champagne); stroke: none; }  /* petits points pleins */
.illus .plein { fill: var(--noir); }                  /* forme qui masque ce qui passe derrière elle */
.js .illus .t { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.9s var(--doux-ease), opacity 0.01s linear; transition-delay: calc(var(--retard, 0s) + var(--k, 0) * 70ms); }
.js .illus .f { opacity: 0; transition: opacity 0.6s var(--doux-ease); transition-delay: calc(var(--retard, 0s) + var(--k, 0) * 70ms); }
.js .illus.visible .t, .js .visible .illus .t { stroke-dashoffset: 0; opacity: 1; }
.js .illus.visible .f, .js .visible .illus .f { opacity: 1; }
.illus-constats { width: 100%; max-width: 240px; margin-top: clamp(40px, 5vw, 64px); }
.illus-temps { width: 100%; max-width: 180px; margin-bottom: 28px; }

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .nav { gap: 20px; }
  .problemes-tete, .constats, .transition { grid-column: 1 / -1; }
  .problemes-tete { position: static; }
  .problemes h2 { max-width: 16ch; }
  .illus-constats { display: none; }
  .transition { max-width: 36ch; }
  .service { grid-template-columns: 1fr; }
  .service:nth-child(even) .service-visuel { order: 0; }
  .service-visuel { min-height: clamp(340px, 52vw, 460px); }
  .benefices-titre, .benefices-liste { grid-column: 1 / -1; }
  .benefices-titre { position: static; }
  .benefices-liste li:nth-child(even) { margin: 0; }
  .temps { grid-template-columns: 1fr; }
  .temps li { display: grid; grid-template-columns: 160px 1fr; column-gap: 32px; align-items: start; }
  .temps .illus-temps { grid-row: 1 / span 3; max-width: 160px; margin: 0; }
  .temps .num { font-size: 3rem; margin-bottom: 16px; }
  .etude-titre, .etude-corps { grid-column: 1 / -1; }
  .etude-corps { max-width: 640px; }
  .pied-nav { grid-column: 7 / span 3; }
}

/* ---------- Navigation : menu replié sous 920 px ---------- */
@media (max-width: 920px) {
  .nav, .entete-cta { display: none; }
  .burger { display: block; }
  .tete-titre, .tete-intro { grid-column: 1 / -1; }
}

/* ---------- Fil de l'exemple : vertical sous 900 px ---------- */
@media (max-width: 900px) {
  .fil { grid-template-columns: 1fr; padding-top: 0; padding-left: 32px; max-width: 560px; }
  .fil::before, .fil::after { width: 1px; height: 100%; }
  .fil::after { background: linear-gradient(180deg, var(--champagne), var(--champagne-vif)); transform: scaleY(var(--progression, 0)); transform-origin: top; }
  .fil li { padding: 0 0 44px; }
  .fil li:last-child { padding-bottom: 0; }
  .fil li::before { top: 10px; left: -37px; }
  .fil .heure { font-size: 2.25rem; margin-bottom: 12px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .entete { padding-block: 14px; }
  .entete.condense { padding-block: 8px; }
  .marque, .entete.condense .marque { font-size: 1.75rem; }

  .hero { padding-top: 104px; }
  .hero-titre { font-size: clamp(2.6rem, 12.4vw, 3.5rem); line-height: 1.02; }
  .hero .chapeau { font-size: 1.0625rem; }
  .hero-contenu { padding-bottom: 56px; }
  .hero-index { flex-direction: column; align-items: center; gap: 6px; font-size: 0.8125rem; }
  .hero-pied { padding-bottom: 96px; }
  .hero .couche-avant, .contact .couche-avant { width: 1100px; }
  .actions { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
  .actions .bouton { width: 100%; }
  .actions .lien { align-self: center; }

  .tete-section { margin-bottom: 44px; }
  .tete-titre .label, .benefices-titre .label, .etude-titre .label, .problemes-tete .label { margin-bottom: 20px; }

  .constats, .benefices-liste { grid-template-columns: 1fr; }
  .constat, .benefices-liste li { min-height: 0; }
  .constat .num { padding-bottom: 12px; }
  .transition { padding-left: 18px; }

  .service-visuel { min-height: 360px; }
  .service-corps { grid-template-columns: 1fr; }

  .temps li { display: block; }
  .temps .illus-temps { max-width: 140px; margin-bottom: 20px; }

  .etude-corps .bouton { width: 100%; }
  .etude-liste li { grid-template-columns: 36px 1fr; padding: 18px; }

  .contact { padding-bottom: 220px; }
  .contact h2 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .contact-bas .chapeau, .contact-actions { grid-column: 1 / -1; }
  .contact-actions { align-items: stretch; }
  .contact-actions .lien { align-self: flex-start; }

  .pied-phrase, .pied-nav, .pied-contact { grid-column: 1 / -1; }
  .pied-nav a, .pied-contact a { padding: 11px 0; }
  .pied-nav { border-top: 1px solid var(--filet); padding-top: 16px; }
  .pied-haut { row-gap: 24px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .apparait, .js .service.apparait, .js .mot > span, .js .hero-label, .js .hero .chapeau, .js .hero .actions > *, .js .hero-index li { opacity: 1; transform: none; }
  .js .label.apparait::before, .js .filet-champagne, .js .hero-titre em::after, .js .fil li::before { transform: none; }
  .js .fil li .heure, .js .fil li h3, .js .fil li p, .js .temps li.apparait .num, .js .temps li.apparait h3, .js .temps li.apparait p { opacity: 1; transform: none; }
  .js .illus .t, .js .illus .f { stroke-dashoffset: 0; opacity: 1; }
  .js .constat.apparait .num { color: var(--c-num); }
  .carte:hover, .bouton:hover { translate: none; }
  .fil::after { transform: none; }
}

/* =========================================================
   Site en plusieurs pages
   ========================================================= */

/* ---------- Page en cours dans la navigation ---------- */
.entete-cta.actif { border-color: var(--champagne); color: var(--champagne-vif); background: rgba(201, 180, 138, 0.08); }
.menu nav a.actif { color: var(--champagne-vif); }
.menu nav a.actif span { color: var(--champagne-vif); }
.pied-nav a[aria-current="page"], .pied-contact a[aria-current="page"], .pied-legal a[aria-current="page"] { color: var(--titre); background-size: 100% 1px; }

/* ---------- Petit hero des pages intérieures : mêmes couches que l'accueil ---------- */
.page-hero { min-height: max(560px, 78vh); min-height: max(560px, 78svh); display: flex; flex-direction: column; justify-content: center; padding: clamp(130px, 18vh, 170px) 0 clamp(150px, 20vh, 220px); background: radial-gradient(90% 60% at 50% 0%, #0A1433 0%, var(--noir) 70%); }
.page-hero .scene-fond::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 45%, rgba(11, 21, 53, 0.6), transparent 75%); }
.page-hero-contenu { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translate3d(0, var(--dy, 0px), 0); }
.page-hero-titre { font-size: clamp(2.8rem, min(6.4vw, 10.5vh), 6rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 40px rgba(11, 21, 53, 0.6); }
.page-hero .chapeau { margin: clamp(24px, 3.5vh, 36px) auto 0; max-width: 52ch; padding: 0; color: #CDD0D7; }
.js .page-hero .hero-label, .js .page-hero .chapeau { opacity: 0; animation: fondre 0.8s var(--courbe) both; }
.js .page-hero .chapeau { animation-delay: 0.6s; }
.js .page-hero .couche-avant { animation: lever 1.4s var(--courbe) 0.4s both; }
/* La première section suit le hero de près */
.page-hero + .section { padding-top: clamp(64px, 8vw, 120px); border-top: 0; }

/* Bénéfices seuls sur leur page : quatre cartes sur toute la largeur */
.benefices-liste:first-child { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefices-liste:first-child li { min-height: 300px; }
/* Votre situation seule sur sa page */
.page-hero + .etude .grille { padding-top: 0; border-top: 0; }
.etude-corps:first-child { grid-column: 3 / span 8; }

/* ---------- Page contact : l'appel final occupe tout l'écran ---------- */
.contact h1 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: 1; letter-spacing: -0.03em; max-width: 12ch; }
.contact-page { min-height: max(680px, 100vh); min-height: max(680px, 100svh); padding-top: clamp(150px, 20vh, 220px); }

/* ---------- Accueil : aperçu des rubriques ---------- */
.apercus-titre { max-width: 18ch; margin-bottom: clamp(48px, 6vw, 88px); }
.apercus-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); }
.apercus-liste > li { display: flex; }
.apercu {
  position: relative; isolation: isolate; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 56px;
  min-height: clamp(360px, 32vw, 440px); padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--filet); border-radius: calc(var(--rayon) + 6px);
  color: var(--texte); text-decoration: none;
  transition: border-color 0.4s ease;
}
.apercu-image { position: absolute; left: 0; top: -8%; z-index: -2; width: 100%; height: 116%; object-fit: cover; transform: translate3d(0, var(--dy, 0px), 0); scale: 1.02; filter: saturate(0.75) brightness(0.72); transition: scale 1.2s var(--courbe), filter 0.8s ease; }
.apercu::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 21, 53, 0.95) 22%, rgba(11, 21, 53, 0.45) 65%, rgba(11, 21, 53, 0.15)); }
.apercu.lumiere::before { z-index: 0; }
.apercu-tete, .apercu-corps { position: relative; z-index: 1; }
.apercu-tete { display: flex; align-items: center; gap: 16px; padding-right: 64px; }
.apercu .num { font-size: 1rem; }
.apercu-corps { display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.apercu-titre { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--titre); text-wrap: balance; }
.apercu-titre em { font-style: italic; color: var(--champagne); }
.apercu-intro { font-size: 0.975rem; line-height: 1.6; color: #C4C7CE; }
.apercu-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu-liste span { padding: 6px 14px; border: 1px solid var(--filet-fort); border-radius: 999px; background: rgba(11, 21, 53, 0.45); font-size: 0.8125rem; color: var(--titre); }
.apercu-fleche { position: absolute; z-index: 1; top: clamp(20px, 2.4vw, 36px); right: clamp(20px, 2.4vw, 36px); display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--filet-fort); border-radius: 50%; color: var(--titre); transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, rotate 0.5s var(--courbe); }
.apercu:focus-visible { border-radius: calc(var(--rayon) + 6px); }
@media (hover: hover) {
  .apercu:hover { border-color: rgba(201, 180, 138, 0.35); }
  .apercu:hover .apercu-image { scale: 1.07; filter: saturate(0.9) brightness(0.72); }
  .apercu:hover .apercu-fleche { background: var(--champagne); border-color: var(--champagne); color: var(--noir); rotate: -45deg; }
}

@media (max-width: 1080px) {
  .benefices-liste:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etude-corps:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-hero { min-height: 0; padding: 128px 0 150px; }
  .page-hero-titre { font-size: clamp(2.5rem, 11.6vw, 3.25rem); }
  .page-hero .chapeau { font-size: 1.0625rem; }
  .page-hero .couche-avant { width: 1100px; }
  .benefices-liste:first-child { grid-template-columns: 1fr; }
  .benefices-liste:first-child li { min-height: 0; }
  .contact h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .contact-page { min-height: 0; padding-top: 128px; }
  .apercus-liste { grid-template-columns: 1fr; }
  .apercu { min-height: 340px; gap: 40px; }
  .apercu-fleche { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-hero .hero-label, .js .page-hero .chapeau { opacity: 1; transform: none; }
}
/* Un mot en italique et la ponctuation qui le suit ne se séparent pas en fin de ligne */
.insecable { white-space: nowrap; }
.contact-page { padding-top: clamp(130px, 17vh, 180px); padding-bottom: clamp(200px, 26vh, 300px); }
@media (max-width: 760px) { .contact-page { padding-top: 120px; padding-bottom: 220px; } }

/* =========================================================
   Bénéfices : mises en situation et dimensions
   ========================================================= */
.scenarios { border-top: 1px solid var(--filet); }
.scenarios-liste { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.scenario { padding: clamp(24px, 3vw, 44px); border: 1px solid var(--filet); border-radius: calc(var(--rayon) + 6px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); }
.scenario-tete { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.scenario-tete .num { font-size: 1rem; }
.scenario-tete h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.1; letter-spacing: -0.018em; }
.scenario-grille { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.25fr); align-items: stretch; }
.scenario-etiquette { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); margin-bottom: 16px; }
.scenario-avant { padding: clamp(22px, 2.4vw, 32px); border: 1px dashed var(--filet-fort); border-radius: 18px; }
.scenario-recit { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; color: #A9ADB6; }
.scenario-lien { display: grid; place-items: center; }
.scenario-lien svg { width: 60px; height: 18px; fill: none; stroke: var(--champagne); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.scenario-lien .flux { stroke-dasharray: 3 6; animation: flux 1.2s linear infinite; }
@keyframes flux { to { stroke-dashoffset: -18; } }
.scenario-apres { position: relative; isolation: isolate; padding: clamp(22px, 2.4vw, 32px); border: 1px solid rgba(201, 180, 138, 0.28); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, rgba(201, 180, 138, 0.09), transparent 60%), rgba(255, 255, 255, 0.02); }
.scenario-apres .scenario-etiquette { color: var(--champagne); }
.conversation { display: flex; flex-direction: column; gap: 12px; }
.bulle { position: relative; max-width: 90%; padding: 14px 18px; border-radius: 16px; font-size: 0.9375rem; line-height: 1.55; }
.bulle-qui { display: block; margin-bottom: 4px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doux); }
.bulle-vous { align-self: flex-end; background: rgba(230, 234, 255, 0.08); border-bottom-right-radius: 4px; color: var(--titre); }
.bulle-assistant { align-self: flex-start; background: rgba(201, 180, 138, 0.09); border: 1px solid rgba(201, 180, 138, 0.24); border-bottom-left-radius: 4px; color: var(--titre); }
.bulle-assistant .bulle-qui { color: var(--champagne); }
.saisie { display: none; }
.fait { display: grid; gap: 8px; margin-top: 6px; padding-left: 4px; font-size: 0.875rem; color: var(--texte); }
.fait li { display: flex; align-items: center; gap: 12px; }
.fait li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(201, 180, 138, 0.5); background: radial-gradient(circle, var(--champagne) 0 3px, transparent 3.5px); }
.scenarios-note { max-width: 62ch; margin-top: clamp(28px, 3vw, 40px); font-size: 0.9375rem; color: var(--doux); padding-left: 18px; border-left: 1px solid var(--champagne); }

/* La conversation se déroule quand la carte apparaît : la question, l'assistant écrit, sa réponse, puis ce qu'il a fait */
.js .scenario .bulle, .js .scenario .fait li { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--courbe), transform 0.6s var(--courbe); }
.js .scenario.visible .bulle, .js .scenario.visible .fait li { opacity: 1; transform: none; }
.js .scenario.visible .bulle-vous { transition-delay: 0.35s; }
.js .scenario.visible .bulle-assistant { transition-delay: 1s; }
.js .scenario .bulle-texte { opacity: 0; transition: opacity 0.6s ease; }
.js .scenario.visible .bulle-texte { opacity: 1; transition-delay: 2s; }
.js .saisie { display: flex; position: absolute; left: 18px; bottom: 16px; gap: 5px; opacity: 0; }
.js .saisie i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); animation: point 1s ease-in-out infinite; }
.js .saisie i:nth-child(2) { animation-delay: 0.15s; }
.js .saisie i:nth-child(3) { animation-delay: 0.3s; }
.js .scenario.visible .saisie { animation: saisir 1s linear 1s both; }
@keyframes point { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes saisir { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.js .scenario.visible .fait li:nth-child(1) { transition-delay: 2.3s; }
.js .scenario.visible .fait li:nth-child(2) { transition-delay: 2.5s; }
.js .scenario.visible .fait li:nth-child(3) { transition-delay: 2.7s; }

.dimensions { padding-bottom: clamp(240px, 26vw, 360px); border-top: 1px solid var(--filet); }
.dimensions .halo { bottom: 30%; height: 60%; opacity: 0.7; }
.dimensions-contenu { position: relative; z-index: 2; }
.dimensions-liste { display: grid; gap: clamp(56px, 7vw, 112px); }
.dimension { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 5vw, 88px); }
.dimension:nth-child(even) .dimension-visuel { order: 2; }
.dimension-visuel { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--filet); border-radius: calc(var(--rayon) + 6px); background: radial-gradient(60% 60% at 50% 50%, rgba(201, 180, 138, 0.1), transparent 70%), rgba(255, 255, 255, 0.018); }
.illus-dimension { width: 78%; max-width: 360px; }
.illus .aiguille { stroke: var(--champagne); stroke-width: 1.6; }
.dimension-corps .num { display: block; font-size: 1rem; margin-bottom: 16px; }
.dimension-corps h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 18px; }
.dimension-corps p { max-width: 52ch; margin-bottom: 24px; }
.dimension-corps ul, .etape-bloc ul { display: grid; gap: 10px; }
.dimension-corps li, .etape-bloc li { position: relative; padding-left: 26px; font-size: 0.975rem; color: var(--titre); }
.dimension-corps li::before, .etape-bloc li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: var(--champagne); }

/* =========================================================
   Méthode : étapes détaillées, démarche rassurante, questions
   ========================================================= */
.etapes-section { border-top: 1px solid var(--filet); }
.etapes { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.etape { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); padding: clamp(26px, 3.2vw, 48px); border: 1px solid var(--filet); border-radius: calc(var(--rayon) + 6px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); }
/* Un filet champagne relie les étapes entre elles */
.etape + .etape::before { content: ""; position: absolute; left: clamp(52px, 5vw, 76px); top: calc(-1 * clamp(20px, 2.4vw, 32px) - 1px); width: 1px; height: calc(clamp(20px, 2.4vw, 32px) + 1px); background: linear-gradient(var(--champagne), transparent); }
.etape-tete .num { display: block; font-weight: 300; font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 20px; }
.etape-tete h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 24px; }
.etape-duree { display: inline-block; padding: 12px 16px; border: 1px solid var(--filet-fort); border-radius: 14px; font-size: 0.9375rem; line-height: 1.45; color: var(--titre); max-width: 30ch; }
.etape-duree span { display: block; margin-bottom: 4px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); }
.etape-corps { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px); align-content: start; }
.etape-bloc { padding-top: 16px; border-top: 1px solid var(--filet-fort); }
.etape-bloc:first-child { grid-row: span 2; }
.etape-bloc h4 { margin: 0 0 14px; font-size: var(--t-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); }
.etape-bloc p { font-size: 0.975rem; color: var(--titre); }
.etape-recu { border-top-color: var(--champagne); }
.etape-recu h4 { color: var(--champagne); }

.rassurance { border-top: 1px solid var(--filet); }
.rassurance .halo { bottom: 20%; height: 70%; opacity: 0.8; }
.rassurance-contenu { position: relative; z-index: 2; }
.rassurance-citation { margin: 28px 0 clamp(56px, 7vw, 96px); }
.rassurance-citation p { max-width: 28ch; font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3.25rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--titre); text-wrap: balance; }
.rassurance-citation em { font-style: italic; color: var(--champagne); }
.piliers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gouttiere); }
.piliers li { padding: clamp(24px, 2.6vw, 36px); }
.illus-pilier { width: 96px; margin-bottom: 24px; }
.piliers h3 { font-family: var(--sans); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; margin-bottom: 12px; }
.piliers p { font-size: 0.9375rem; color: var(--doux); }

:root { interpolate-size: allow-keywords; }
.faq { border-top: 1px solid var(--filet); }
.faq .grille { align-items: start; row-gap: 40px; }
.faq-tete { grid-column: 1 / span 4; position: sticky; top: 130px; }
.faq-tete .label { margin-bottom: 28px; }
.faq-liste { grid-column: 6 / span 7; border-top: 1px solid var(--filet-fort); }
.faq-item { border-bottom: 1px solid var(--filet-fort); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; color: var(--titre); transition: color 0.3s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--champagne-vif); }
.faq-signe { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--filet-fort); border-radius: 50%; transition: border-color 0.3s ease, background-color 0.3s ease; }
.faq-signe::before, .faq-signe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: var(--champagne); translate: -50% -50%; transition: rotate 0.4s var(--courbe); }
.faq-signe::after { rotate: 90deg; }
.faq-item[open] .faq-signe { border-color: var(--champagne); background: rgba(201, 180, 138, 0.1); }
.faq-item[open] .faq-signe::after { rotate: 0deg; }
/* Ouverture en douceur dans les navigateurs récents ; ailleurs, la réponse s'affiche simplement */
.faq-item::details-content { height: 0; overflow: clip; transition: height 0.5s var(--courbe), content-visibility 0.5s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.faq-reponse p { max-width: 60ch; padding: 0 56px 28px 0; }

@media (max-width: 1080px) {
  .scenario-grille { grid-template-columns: 1fr; }
  .scenario-lien { height: 48px; }
  .scenario-lien svg { rotate: 90deg; }
  .dimension, .dimension:nth-child(even) { grid-template-columns: 1fr; }
  .dimension:nth-child(even) .dimension-visuel { order: 0; }
  .dimension-visuel { max-width: 560px; }
  .etape { grid-template-columns: 1fr; }
  .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-tete, .faq-liste { grid-column: 1 / -1; }
  .faq-tete { position: static; }
}
@media (max-width: 760px) {
  .bulle { max-width: 100%; }
  .etape-corps { grid-template-columns: 1fr; }
  .etape-bloc:first-child { grid-row: auto; }
  .etape-duree { max-width: none; }
  .piliers { grid-template-columns: 1fr; }
  .dimensions { padding-bottom: 200px; }
  .faq-reponse p { padding-right: 0; }
  .faq-item summary { padding: 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .scenario .bulle, .js .scenario .fait li, .js .scenario .bulle-texte { opacity: 1; transform: none; }
  .js .saisie { display: none; }
  .scenario-lien .flux { animation: none; }
}

/* =========================================================
   Passe mobile : tout ce qui suit ne s'applique qu'aux écrans étroits.
   L'affichage sur ordinateur n'est pas concerné.
   ========================================================= */
@media (max-width: 920px) {
  /* En-tête : « Échangeons » reste visible à côté du bouton de menu */
  .entete-ligne { gap: 10px; }
  .entete-cta { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; padding: 0 18px; font-size: 0.875rem; }
  .marque { display: inline-flex; align-items: center; min-height: 44px; }
  .burger { width: 48px; height: 48px; margin-right: -10px; -webkit-tap-highlight-color: transparent; }
  .burger span { left: 13px; right: 13px; }
  /* Menu plein écran : l'en-tête reste au-dessus et le bouton devient une croix */
  body.menu-ouvert .entete { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-ouvert .entete-cta { opacity: 0; pointer-events: none; }
  .entete-cta { transition: opacity 0.3s ease, border-color 0.3s, background-color 0.3s, color 0.3s; }
  .menu { padding: 104px var(--marge) max(32px, env(safe-area-inset-bottom)); }
  .menu nav a { min-height: 72px; align-items: center; padding: 12px 0; font-size: clamp(1.875rem, 8.4vw, 2.5rem); -webkit-tap-highlight-color: transparent; }
  .menu nav a:active { color: var(--champagne-vif); }
  .menu nav a.actif { position: relative; }
  .menu nav a.actif::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 6px rgba(201, 180, 138, 0.14); translate: 0 -50%; }
  .menu .bouton { min-height: 60px; }
}

@media (max-width: 760px) {
  /* ---------- Lisibilité ---------- */
  :root { --marge: 22px; }
  h1, h2, .apercu-titre, .scenario-tete h3, .dimension-corps h3, .etape-tete h3 { overflow-wrap: break-word; hyphens: manual; }
  h2 { font-size: clamp(2.1rem, 9.4vw, 2.75rem); line-height: 1.06; }
  .chapeau { font-size: 1.0625rem; line-height: 1.65; }
  .tete-intro { font-size: 1rem; }
  .hero-index { font-size: 0.9375rem; }
  .apercu-liste span { font-size: 0.875rem; padding: 7px 14px; }
  .fait { font-size: 0.9375rem; }
  .bulle { font-size: 1rem; }
  .bulle-qui, .etape-duree span { font-size: 0.75rem; }
  .scenario-etiquette { font-size: 0.75rem; margin-bottom: 12px; }
  .pied-bas { font-size: 0.875rem; }
  .constat .detail, .benefices-liste p, .fil p, .temps p, .piliers p { font-size: 1rem; }

  /* ---------- Confort tactile : 44 px minimum ---------- */
  .marque, .entete.condense .marque { font-size: 1.5rem; }
  .lien { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
  .lien::after { bottom: 8px; }
  .pied-nav a, .pied-contact a { display: flex; align-items: center; min-height: 48px; padding: 0; background-position: left bottom 10px; }
  .pied-legal { gap: 0 28px; }
  .pied-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background-position: left bottom 10px; }
  .actions { gap: 8px; }
  .contact-actions { gap: 8px; }
  .faq-item summary { min-height: 64px; -webkit-tap-highlight-color: transparent; }
  .faq-item summary:active { color: var(--champagne-vif); }
  .faq-signe { width: 40px; height: 40px; }

  /* ---------- Couches d'images : plus étroites, pour garder de la profondeur sans couvrir le texte ---------- */
  .halo { width: 130vw; }
  .hero .scene-fond::after, .page-hero .scene-fond::after { background: radial-gradient(90% 55% at 50% 40%, rgba(11, 21, 53, 0.62), transparent 80%); }

  /* ---------- Sections complexes, en une colonne ---------- */
  .scenario { padding: 22px 18px; }
  .scenario-tete { gap: 14px; margin-bottom: 18px; }
  .scenario-avant, .scenario-apres { padding: 20px 18px; }
  .scenario-lien { height: 44px; }
  .conversation { gap: 10px; }
  .bulle { padding: 12px 16px; }
  .dimensions-liste { gap: 64px; }
  .dimension { gap: 24px; }
  .dimension-visuel { aspect-ratio: 16 / 10; }
  .etape { padding: 26px 20px; gap: 28px; }
  .etape-tete .num { font-size: 3.25rem; margin-bottom: 12px; }
  .etape-tete h3 { margin-bottom: 18px; }
  .etape-corps { gap: 26px; }
  .etape + .etape::before { left: 38px; }

  /* ---------- Allègement ---------- */
  /* Le flou d'arrière-plan de l'en-tête coûte cher au défilement : fond presque opaque à la place */
  .entete.condense { background: rgba(11, 21, 53, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .service-image, .apercu-image { will-change: auto; }
}

@media (max-width: 360px) {
  :root { --marge: 18px; }
  .marque, .entete.condense .marque { font-size: 1.3125rem; }
  .entete-cta { padding: 0 14px; font-size: 0.8125rem; }
  .hero-titre, .page-hero-titre { font-size: 2.35rem; }
  .contact h1, .contact h2 { font-size: 2.35rem; }
}
@media (max-width: 760px) {
  .page-hero { padding-bottom: 116px; }
  .page-hero + .section { padding-top: 40px; }
}

/* =========================================================
   Ambiance « crépuscule » : ciel dégradé de bleus, halo de lumière douce,
   collines et canopée photographiques détourées et étalonnées (docs/atelier-paysage.html), en couches parallaxe.
   ========================================================= */
:root {
  --ciel-haut: #091230;
  --ciel-degrade: linear-gradient(180deg, #091230 0%, #112157 24%, #213481 46%, #475AB3 64%, #8090D8 79%, #AEB7EA 90%, #CDD0F0 100%);
  --voile: rgba(10, 20, 51, 0.5);
}

/* ---------- Scènes : ciel quasi fixe, collines lentes, canopée rapide ---------- */
.hero, .page-hero, .contact.scene { background: var(--ciel-haut); }
.ciel { display: block; top: -14%; width: 100%; height: 128%; background: var(--ciel-degrade); }
.halo { display: block; width: min(1500px, 150vw); height: 60%; bottom: 12%; background: radial-gradient(closest-side, rgba(255, 234, 210, 0.55), rgba(218, 204, 255, 0.24) 45%, transparent); }
.collines-loin { bottom: 15%; width: max(1600px, 120vw); height: auto; opacity: 0.95; }
.collines-milieu { bottom: 6%; width: max(1600px, 116vw); height: auto; }
.collines-proches { bottom: 2%; width: max(1600px, 112vw); height: auto; }
.couche-avant { width: max(1600px, 110vw); }

/* Voile bleu nuit derrière les titres : le texte reste net même sur la partie claire du ciel */
.hero .scene-fond::after { background: radial-gradient(62% 48% at 50% 40%, var(--voile), transparent 78%); }
.page-hero .scene-fond::after { background: radial-gradient(64% 54% at 50% 44%, var(--voile), transparent 78%); }
.hero-titre, .page-hero-titre, .contact h1, .contact h2 { text-shadow: 0 2px 36px rgba(10, 20, 51, 0.55); }
.hero .chapeau, .page-hero .chapeau { color: #E3E6F2; text-shadow: 0 1px 18px rgba(10, 20, 51, 0.6); }
.hero-index { text-shadow: 0 1px 10px rgba(10, 20, 51, 0.8); }

/* Les couches se posent l'une après l'autre au chargement */
.js .hero .collines-loin, .js .page-hero .collines-loin { animation: lever 1.8s var(--courbe) 0.05s both; }
.js .hero .collines-milieu, .js .page-hero .collines-milieu { animation: lever 1.6s var(--courbe) 0.2s both; }
.js .hero .collines-proches, .js .page-hero .collines-proches { animation: lever 1.5s var(--courbe) 0.3s both; }

/* Appel final : le ciel prend le relais de la section précédente, en fondu */
.contact .scene-fond::after { height: 45%; background: linear-gradient(to bottom, var(--noir) 5%, transparent); }
.contact .halo { bottom: 4%; height: 70%; }

/* Sections intérieures à fond de scène : lueur douce et collines estompées */
.dimensions .halo, .rassurance .halo { background: radial-gradient(closest-side, rgba(140, 155, 226, 0.28), rgba(80, 100, 190, 0.12) 55%, transparent); }
.dimensions .collines-loin { bottom: 0; opacity: 0.22; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, #000 30%, transparent 95%); }

/* ---------- Harmonisation des tons bleus ---------- */
body { background: var(--noir); }
.solutions { background: linear-gradient(180deg, var(--noir), var(--releve) 30%, var(--releve) 70%, var(--noir)); }
.confiance, .benefices, .scenarios, .faq { background-color: transparent; }
.carte, .scenario, .etape { background: linear-gradient(180deg, rgba(214, 222, 255, 0.06), rgba(214, 222, 255, 0.02)); }
.service, .apercu { background: rgba(214, 222, 255, 0.03); }
.dimension-visuel { background: radial-gradient(60% 60% at 50% 50%, rgba(201, 180, 138, 0.12), transparent 70%), rgba(214, 222, 255, 0.04); }
.scenario-apres { background: radial-gradient(120% 90% at 100% 0%, rgba(201, 180, 138, 0.1), transparent 60%), rgba(214, 222, 255, 0.04); }
.scenario-recit { color: #B3BAD4; }
.bulle-vous { background: rgba(214, 222, 255, 0.1); }
.menu { background: radial-gradient(120% 60% at 50% 100%, rgba(127, 144, 220, 0.38), transparent 70%), linear-gradient(180deg, var(--ciel-haut), var(--noir)); }
.entete.condense { background: rgba(11, 21, 53, 0.74); }
.page-texte { background: radial-gradient(70% 45% at 50% 0%, rgba(140, 155, 226, 0.3), transparent 70%), linear-gradient(180deg, var(--ciel-haut), #13245E 38%, var(--noir) 85%); }
.pied { background: var(--noir); }
.pied-marque > span { color: rgba(214, 222, 255, 0.42); }

/* Carte d'aperçu « Votre situation » : un petit paysage à la place d'une photo */
.apercu-paysage { position: absolute; left: 0; top: -8%; z-index: -2; width: 100%; height: 116%; overflow: hidden; background: var(--ciel-degrade); transform: translate3d(0, var(--dy, 0px), 0); transition: scale 1.2s var(--courbe); }
.apercu-paysage img { position: absolute; left: 50%; bottom: 0; width: 180%; max-width: none; translate: -50% 0; }
.apercu-paysage img:nth-child(1) { bottom: 22%; }
.apercu-paysage img:nth-child(2) { bottom: 10%; }
@media (hover: hover) { .apercu:hover .apercu-paysage { scale: 1.05; } }

/* ---------- Téléphone : paysage allégé ---------- */
@media (max-width: 760px) {
  .hero .couche-avant, .page-hero .couche-avant, .contact .couche-avant { width: 1000px; }
  .halo { width: 160vw; }
  .ciel { will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ciel, .collines-loin, .collines-milieu, .collines-proches { --dy: 0px; }
}
.hero-contenu { padding-bottom: clamp(140px, 22vh, 250px); }
/* Appel final : halo plus bas et voile derrière le texte, qui se trouve sur la partie claire du ciel */
.contact .halo { bottom: -6%; height: 62%; }
.contact .scene-fond::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 50% at 35% 42%, var(--voile), transparent 80%); }
.contact .chapeau { color: #E3E6F2; text-shadow: 0 1px 18px rgba(10, 20, 51, 0.6); }
.contact .lien { text-shadow: 0 1px 12px rgba(10, 20, 51, 0.7); }
.dimensions .collines-loin { opacity: 0.28; -webkit-mask-image: linear-gradient(to bottom, #000 5%, transparent 70%); mask-image: linear-gradient(to bottom, #000 5%, transparent 70%); }
/* La canopée déborde légèrement : aucun liseré de ciel ne reste visible dessous */
.scene > .couche-avant { bottom: -3px; }

/* ---------- Relief : trois plans de collines brumeuses, canopée au premier plan ---------- */
.collines-loin { bottom: 17%; width: max(1600px, 122vw); height: auto; opacity: 1; }
.collines-milieu { bottom: 9%; width: max(1600px, 118vw); height: auto; }
.collines-proches { bottom: 3%; width: max(1600px, 114vw); height: auto; }
/* Brume atmosphérique entre les plans */
.scene-fond .collines-milieu, .scene-fond .collines-proches { filter: drop-shadow(0 -18px 26px rgba(178, 187, 236, 0.28)); }
.couche-avant { width: max(1600px, 108vw); }
.hero-contenu { padding-bottom: clamp(150px, 24vh, 260px); }
.apercu-paysage img:nth-child(1) { bottom: 26%; }
.apercu-paysage img:nth-child(2) { bottom: 12%; }
@media (max-width: 760px) {
  .collines-loin { width: 1150px; bottom: 16%; }
  .collines-milieu { display: none; }
  .collines-proches { width: 1050px; bottom: 5%; }
  .scene-fond .collines-proches { filter: none; }
  .hero .couche-avant, .page-hero .couche-avant, .contact .couche-avant { width: 1000px; }
}
/* Plans de collines mieux étagés, sans halo blanc sur leurs crêtes */
.collines-loin { bottom: 25%; }
.collines-milieu { bottom: 15%; }
.collines-proches { bottom: 7%; }
.scene-fond .collines-milieu, .scene-fond .collines-proches { filter: none; }
@media (max-width: 760px) { .collines-loin { bottom: 20%; } .collines-proches { bottom: 8%; } }
.collines-loin { bottom: 21%; }
.collines-milieu { bottom: 12%; }
.collines-proches { bottom: 5%; }
/* Petits heros : collines un peu plus basses, pour que l'introduction reste sur le bleu profond */
.page-hero .collines-loin { bottom: 14%; }
.page-hero .collines-milieu { bottom: 8%; }
.page-hero .collines-proches { bottom: 3%; }
@media (max-width: 760px) {
  .page-hero .collines-loin { bottom: 6%; }
  .page-hero .collines-proches { bottom: 0; }
  .page-hero { padding-bottom: 150px; }
}
@media (max-width: 760px) {
  .hero .collines-loin { bottom: 21%; }
  .hero .collines-proches { bottom: 9%; }
}
/* Téléphone : on décale les collines pour montrer leurs rondeurs plutôt que leur creux central */
@media (max-width: 760px) {
  .collines-loin { margin-left: 170px; }
  .collines-proches { margin-left: -240px; }
}
/* Téléphone : positions en pixels, les heros y sont très hauts et les pourcentages décollaient les plans */
@media (max-width: 760px) {
  .hero .collines-loin, .page-hero .collines-loin, .contact .collines-loin { bottom: 120px; }
  .hero .collines-proches, .page-hero .collines-proches, .contact .collines-proches { bottom: 36px; }
}

/* Relief photographique : collines étagées au-dessus de la canopée, positions en pixels depuis le bas de la scène */
.hero .collines-loin, .contact .collines-loin, .contact-page .collines-loin { bottom: 190px; }
.hero .collines-milieu, .contact .collines-milieu, .contact-page .collines-milieu { bottom: 135px; }
.hero .collines-proches, .contact .collines-proches, .contact-page .collines-proches { bottom: 95px; }
.page-hero .collines-loin { bottom: 150px; }
.page-hero .collines-milieu { bottom: 105px; }
.page-hero .collines-proches { bottom: 70px; }
.couche-avant { width: max(1600px, 104vw); }
@media (max-width: 760px) {
  .hero .collines-loin, .page-hero .collines-loin, .contact .collines-loin, .contact-page .collines-loin { bottom: 110px; }
  .hero .collines-proches, .page-hero .collines-proches, .contact .collines-proches, .contact-page .collines-proches { bottom: 55px; }
}
.hero .collines-loin, .contact .collines-loin, .contact-page .collines-loin { bottom: 80px; }
.hero .collines-milieu, .contact .collines-milieu, .contact-page .collines-milieu { bottom: 50px; }
.hero .collines-proches, .contact .collines-proches, .contact-page .collines-proches { bottom: 20px; }
.page-hero .collines-loin { bottom: 60px; }
.page-hero .collines-milieu { bottom: 35px; }
.page-hero .collines-proches { bottom: 10px; }
@media (max-width: 760px) {
  .hero .collines-loin, .page-hero .collines-loin, .contact .collines-loin, .contact-page .collines-loin { bottom: 70px; }
  .hero .collines-proches, .page-hero .collines-proches, .contact .collines-proches, .contact-page .collines-proches { bottom: 25px; }
}
/* Petits heros : le titre reste au-dessus du relief */
.page-hero { padding-bottom: clamp(220px, 30vh, 300px); }
.page-hero .collines-loin { bottom: 40px; }
.page-hero .collines-milieu { bottom: 20px; }
.page-hero .collines-proches { bottom: 0; }
@media (max-width: 760px) { .page-hero { padding-bottom: 170px; } }

/* ---------- Pied de page : grand logotype réduit, centré, discret ---------- */
.pied-marque { margin-top: clamp(48px, 6vw, 88px); text-align: center; }
/* L'espacement des lettres ajoute un blanc après la dernière : on le compense à gauche pour un centrage exact */
.pied-marque > span { display: inline-block; margin-left: 0; padding-left: 0.12em; font-size: clamp(2.5rem, 6.5vw, 5.75rem); line-height: 1.15; }

/* ---------- Médaillon chouette dans l'en-tête ----------
   Le nom garde exactement sa taille, sa police et son espacement ; seul le médaillon s'ajoute,
   plus haut que les capitales, de sorte qu'il déborde au-dessus et en dessous de la ligne du nom. */
.marque { display: inline-flex; align-items: center; gap: 0.3em; }
.marque-medaillon { flex: none; width: 56px; height: 56px; border-radius: 50%; }
.entete.condense .marque-medaillon { width: 46px; height: 46px; transition: width 0.5s var(--courbe), height 0.5s var(--courbe); }
@media (max-width: 760px) {
  .marque-medaillon { width: 44px; height: 44px; }
  .entete.condense .marque-medaillon { width: 38px; height: 38px; }
}
@media (max-width: 360px) { .marque-medaillon { width: 36px; height: 36px; } }
/* Le nom reste un seul bloc : la barre du É et la suite ne se séparent pas */
.marque-nom { display: inline-block; }
/* Téléphone : le médaillon se fait plus discret pour que le bouton de menu garde sa place */
.burger { flex: none; }
@media (max-width: 760px) {
  .marque { gap: 0.22em; }
  .marque-medaillon { width: 34px; height: 34px; }
  .entete.condense .marque-medaillon { width: 30px; height: 30px; }
  .entete-cta { padding: 0 13px; font-size: 0.8125rem; min-height: 40px; }
}
/* Sous 400 px, la ligne ne peut plus tout contenir : « Échangeons » reste accessible dans le menu */
@media (max-width: 400px) { .entete-cta { display: none; } }
@media (max-width: 360px) { .marque-medaillon, .entete.condense .marque-medaillon { width: 30px; height: 30px; } }

/* ---------- Médaillon du pied de page ----------
   Le grand nom garde exactement sa taille, sa police et son espacement ; le médaillon est simplement
   mis à son échelle (même rapport que dans l'en-tête : une fois et demie la hauteur du nom). */
:root { --nom-pied: clamp(2.5rem, 6.5vw, 5.75rem); }
.pied-marque { display: flex; align-items: center; justify-content: center; gap: 0.3em; font-size: var(--nom-pied); }
.pied-marque > span { font-size: 1em; }
.pied-medaillon { flex: none; width: calc(var(--nom-pied) * 1.56); height: calc(var(--nom-pied) * 1.56); border-radius: 50%; }
/* Téléphone : médaillon de l'en-tête plus discret, pour que « Échangeons » reste visible partout */
@media (max-width: 760px) {
  .marque-medaillon { width: 28px; height: 28px; }
  .entete.condense .marque-medaillon { width: 26px; height: 26px; }
  .entete-cta { display: inline-flex; }
}
@media (max-width: 400px) { .entete-cta { display: inline-flex; } }
@media (max-width: 360px) { .marque-medaillon, .entete.condense .marque-medaillon { width: 26px; height: 26px; } }
/* Le médaillon du pied de page s'accorde au nom en filigrane */
.pied-medaillon { opacity: 0.8; }
/* Les images des cartes sont déjà étalonnées : plus besoin de les assombrir au survol de la mise en page */
.apercu-image { filter: none; }
@media (hover: hover) { .apercu:hover .apercu-image { filter: none; } }

/* =========================================================
   Ajustements « dirigeant pressé » (septembre 2026)
   1. Cartes de l'accueil : bandeau sombre en bas, numéro et rubrique en champagne.
   2. Lisibilité : fonds de cartes éclaircis, textes explicatifs plus clairs.
   ========================================================= */

/* ---------- 1. Cartes de l'accueil ---------- */
.apercu { justify-content: flex-end; gap: 0; padding: 0; min-height: clamp(300px, 28vw, 390px); }
/* Le voile général s'allège : c'est le bandeau qui porte la lisibilité du titre */
.apercu::after { background: linear-gradient(to top, rgba(11, 21, 53, 0.5) 28%, rgba(11, 21, 53, 0.22) 68%, rgba(11, 21, 53, 0.08)); }
.apercu-corps {
  width: 100%; max-width: none; gap: 0;
  padding: 30px clamp(78px, 8vw, 108px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.8vw, 40px);
  background: linear-gradient(to top, rgba(5, 9, 26, 0.95) 45%, rgba(5, 9, 26, 0.74) 80%, rgba(5, 9, 26, 0));
}
.apercu-titre { font-size: clamp(1.85rem, 3.1vw, 2.9rem); line-height: 1.05; color: var(--champagne); letter-spacing: -0.01em; }
.apercu-num { font-variant-numeric: tabular-nums; }
.apercu-fleche { top: auto; bottom: clamp(22px, 2.6vw, 34px); right: clamp(20px, 2.4vw, 34px); }

/* ---------- 2. Lisibilité générale ---------- */
:root { --texte: #DDE3F5; --doux: #B9C1DC; --filet: rgba(214, 222, 255, 0.16); --filet-fort: rgba(214, 222, 255, 0.26); }
.carte, .scenario, .etape { background: linear-gradient(180deg, rgba(214, 222, 255, 0.085), rgba(214, 222, 255, 0.035)); }
.service { background: rgba(214, 222, 255, 0.06); }
.dimension-visuel { background: radial-gradient(60% 60% at 50% 50%, rgba(201, 180, 138, 0.14), transparent 70%), rgba(214, 222, 255, 0.07); }
.scenario-avant { background: rgba(214, 222, 255, 0.045); }
.scenario-apres { background: radial-gradient(120% 90% at 100% 0%, rgba(201, 180, 138, 0.13), transparent 60%), rgba(214, 222, 255, 0.06); }
/* Les textes explicatifs passent en clair : plus de bleu sur bleu */
.constat .detail, .scenario-recit, .service-tete p, .service-corps dd,
.dimension-corps p, .etape-bloc p, .faq-reponse p, .scenarios-note,
.apercu-intro, .tete-intro, .etape-duree { color: #DFE4F5; }
.scenario-recit { color: #E4E8F7; }
/* Les intitulés en petites capitales restent secondaires, mais lisibles */
.scenario-etiquette, .service-corps dt, .bulle-qui { color: #C3CAE4; }

/* ---------- Méthode : les trois temps portent désormais la durée et les livrables ---------- */
.temps li { display: flex; flex-direction: column; }
.temps p { color: var(--texte); }
.temps .etape-duree { margin: 20px 0 24px; }
.temps .etape-bloc + .etape-bloc { margin-top: 22px; }
.temps .etape-bloc:last-child { margin-top: auto; padding-top: 16px; }
.temps .etape-bloc h4 { margin-bottom: 12px; }

/* ---------- Téléphone : pages plus courtes à parcourir ---------- */
@media (max-width: 760px) {
  :root { --section: clamp(72px, 12vw, 104px); }
  /* Les hauts de page occupent moins d'un écran entier */
  .page-hero { min-height: 74vh; }
  /* Les illustrations au trait restent lisibles sans manger la hauteur */
  .illus-temps { max-width: 132px; margin-bottom: 20px; }
  .dimension-visuel { aspect-ratio: 16 / 9; }
  .illus-dimension { max-width: 190px; margin: 0 auto; }
  .dimensions-liste { gap: clamp(40px, 9vw, 64px); }
  .dimensions { padding-bottom: clamp(160px, 34vw, 240px); }
  .temps li { padding: 24px; }
  .temps .num { font-size: 3rem; margin-bottom: 18px; }
  .etapes { gap: 16px; }
  .apercus-liste { gap: 14px; }
  .apercu { min-height: 230px; }
  .apercu-titre { font-size: 1.6rem; }
  .apercu-corps { padding: 24px 68px 22px 22px; }
  .apercu-fleche { bottom: 20px; right: 18px; }
  .service-visuel { min-height: clamp(260px, 46vw, 340px); }
  .service-corps { padding: 24px; gap: 22px; }
  .apercus-titre { margin-bottom: 32px; }
}
@media (max-width: 760px) {
  .constat { min-height: 0; padding: 22px; gap: 10px; }
  .constat .num { padding-bottom: 14px; }
  .constats { gap: 12px; }
  .service-visuel { min-height: clamp(210px, 40vw, 280px); }
  .etape { padding: 24px; }
  .faq-reponse p { padding-bottom: 22px; }
  .rassurance-citation { margin: 20px 0 clamp(36px, 8vw, 56px); }
}
@media (max-width: 760px) {
  .illus-temps { max-width: 108px; margin-bottom: 16px; }
  .temps .num { font-size: 2.4rem; margin-bottom: 12px; }
  .temps .etape-duree { margin: 16px 0 18px; padding: 10px 14px; }
  .temps .etape-bloc + .etape-bloc { margin-top: 16px; }
  .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .piliers li { padding: 20px; }
  .piliers h3 { font-size: 1.0625rem; margin-bottom: 8px; }
  .piliers p { font-size: 0.9375rem; }
}

/* =========================================================
   Série 10 — cartes qui se détachent, superposition au défilement (Solutions), Méthode plus vivante
   ========================================================= */

/* ---------- 3. Cartes nettement plus claires : teinte ardoise-lavande, opaque, qui se détache du bleu nuit ---------- */
:root {
  --carte-haut: #414F93;    /* haut des cartes : ardoise lavande, deux tons plus clair que le fond */
  --carte-bas: #34427E;     /* bas des cartes */
  --carte-filet: rgba(214, 222, 255, 0.32);
}
.carte, .scenario, .etape {
  background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas));
  border-color: var(--carte-filet);
  box-shadow: 0 18px 48px -24px rgba(4, 8, 24, 0.7);
}
.carte .num, .temps .num { color: var(--champagne-vif); }
.etape-duree { background: rgba(11, 21, 53, 0.35); border-color: rgba(214, 222, 255, 0.3); }
.service { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); border-color: var(--carte-filet); box-shadow: 0 30px 70px -30px rgba(4, 8, 24, 0.85); }
.service-corps > div { border-top-color: rgba(214, 222, 255, 0.36); }
.carte .detail, .carte p, .service-corps dt, .etape-bloc h4, .constat .detail, .piliers p, .benefices-liste p, .temps p { color: #E6EAF8; }
.service-corps dt, .etape-bloc h4 { color: #D3D9EE; }
.etape-bloc:not(:first-child), .etape-bloc { border-top-color: rgba(214, 222, 255, 0.36); }
.etape-duree { background: rgba(11, 21, 53, 0.42); border-color: rgba(214, 222, 255, 0.38); }
.faq-item, .faq-item summary { color: var(--titre); }
/* Petits textes champagne dans les cartes : version plus vive, lisible sur le fond éclairci */
.service-corps .resultat dt, .etape-duree span, .constat .num, .carte .label, .scenario-apres .scenario-etiquette { color: var(--champagne-vif); }
.service-visuel::after { background: linear-gradient(to top, rgba(22, 32, 78, 0.96) 8%, rgba(22, 32, 78, 0.5) 55%, rgba(22, 32, 78, 0.12)); }
.service-image { filter: saturate(0.85) brightness(0.85); }

/* ---------- 1. Solutions : les trois cartes s'empilent au défilement ----------
   Chaque carte est collée sous l'en-tête ; la suivante, dans le flux normal, glisse par-dessus et la recouvre.
   La carte recouverte recule légèrement (échelle, voile) grâce à la variable --recul calculée dans script.js.
   Effet actif sur tous les écrans (24 septembre 2026 : étendu au téléphone). Quand une carte est plus haute que
   l'écran, script.js lui donne un point de collage négatif (--colle) : elle défile entièrement, puis se cale sur le
   bas de l'écran avant d'être recouverte. Rien n'est jamais caché sans avoir été lu. */
[data-pile] { --empile-haut: 88px; --empile-pas: 14px; }
.js [data-pile]:not(.pile-plate) { gap: clamp(48px, 6vw, 96px); padding-bottom: clamp(24px, 4vw, 56px); }
.js [data-pile]:not(.pile-plate) > * {
  position: sticky;
  top: var(--colle, calc(var(--empile-haut) + var(--rang, 0) * var(--empile-pas)));
  transform-origin: 50% 0;
  scale: calc(1 - var(--recul, 0) * 0.045);
}
.js [data-pile]:not(.pile-plate) > *::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: var(--noir); opacity: calc(var(--recul, 0) * 0.6);
}
.js [data-pile]:not(.pile-plate) > :nth-child(1) { --rang: 0; }
.js [data-pile]:not(.pile-plate) > :nth-child(2) { --rang: 1; }
.js [data-pile]:not(.pile-plate) > :nth-child(3) { --rang: 2; }
/* L'apparition ne doit pas déplacer la carte collée : un simple fondu suffit */
.js [data-pile]:not(.pile-plate) > .apparait { transform: none; }
@media (min-width: 1081px) {
  /* Cartes un peu plus compactes, pour tenir dans un écran d'ordinateur portable */
  .js .services[data-pile]:not(.pile-plate) .service-visuel { min-height: clamp(360px, 34vw, 480px); }
  .js .services[data-pile]:not(.pile-plate) .service-corps:not(.rubs-c) { padding: clamp(24px, 2.6vw, 40px); gap: clamp(20px, 2.2vw, 30px) var(--gouttiere); }
}
@media (max-width: 760px) {
  /* Téléphone : point de collage juste sous l'en-tête condensé, décalage réduit entre les cartes,
     écart plus court pour que la carte suivante arrive vite. Chaque carte a sa propre couche de composition
     (will-change) : l'échelle et le voile se calculent sans redessiner la photo à chaque image. */
  [data-pile] { --empile-haut: 64px; --empile-pas: 10px; }
  .js [data-pile]:not(.pile-plate) { gap: clamp(28px, 7vw, 40px); padding-bottom: 24px; }
  .js [data-pile]:not(.pile-plate) > * { will-change: transform; }
  .js [data-pile]:not(.pile-plate) > *::after { will-change: opacity; }
  .js .services[data-pile]:not(.pile-plate) .service-corps:not(.rubs-c) { padding: 20px; gap: 14px; }
  .js .services[data-pile]:not(.pile-plate) .service-corps:not(.rubs-c) > div { padding-top: 12px; }
  .js .services[data-pile]:not(.pile-plate) .service-corps:not(.rubs-c) dt { margin-bottom: 6px; }
  .js .services[data-pile]:not(.pile-plate) .service-corps dd { line-height: 1.5; }
}
/* Écrans étroits, toutes piles : une carte qui arrive recouvre aussitôt la précédente, elle apparaît donc sans fondu
   (la première carte garde le sien). */
@media (max-width: 1080px) {
  .js [data-pile]:not(.pile-plate) > .apparait:not(:first-child) { opacity: 1; transition-duration: 0s, 0s, 0.4s, 0.5s; }
}
@media (max-width: 760px) {
  /* Le bandeau photo prend la hauteur de son texte (numéro, titre, phrase) au lieu de le rogner par le haut */
  .service-visuel { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
  .service-tete { position: relative; inset: auto; z-index: 2; padding: 22px 20px 20px; }
  .service-tete .num { margin-bottom: 12px; }
  .service-tete h3 { margin-bottom: 10px; }
}

/* ---------- 4. Méthode : arrivée en cascade, fil qui relie les trois temps, numéros qui s'allument ---------- */
.temps-cadre { position: relative; }
.temps-fil { position: absolute; left: 0; right: 0; top: -36px; height: 1px; pointer-events: none; }
.temps-fil::before, .temps-fil::after { content: ""; position: absolute; inset: 0; }
.temps-fil::before { background: var(--filet-fort); }
.temps-fil::after { background: linear-gradient(90deg, var(--champagne), var(--champagne-vif)); box-shadow: 0 0 12px rgba(201, 180, 138, 0.6); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--doux-ease) 0.2s; }
.temps-fil span { position: absolute; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--noir); border: 1px solid var(--champagne); box-shadow: 0 0 0 5px rgba(201, 180, 138, 0.08); transform: scale(0); transition: transform 0.5s var(--courbe); }
.temps-fil span:nth-child(1) { left: calc((100% - 2 * var(--gouttiere)) / 6); transition-delay: 0.3s; }
.temps-fil span:nth-child(2) { left: 50%; transition-delay: 0.8s; }
.temps-fil span:nth-child(3) { left: calc(100% - (100% - 2 * var(--gouttiere)) / 6); transition-delay: 1.3s; }
.temps-fil span { margin-left: -5px; }
.temps-cadre.vue .temps-fil::after { transform: scaleX(1); }
.temps-cadre.vue .temps-fil span { transform: scale(1); }
.methode .temps-cadre { padding-top: 40px; }
/* Les cartes arrivent de bas en haut, légèrement rétrécies, l'une après l'autre */
.js .temps li.apparait { transform: translateY(56px) scale(0.965); transition-duration: 1s, 1s, 0.4s, 0.5s; }
.js .temps li.apparait.visible { transform: none; }
/* Le grand numéro s'allume : il part du bleu doux et prend la teinte champagne, avec un halo bref */
.js .temps li.apparait .num { color: var(--doux); transition: opacity 0.7s var(--courbe), transform 0.7s var(--courbe), color 0.9s var(--doux-ease), text-shadow 0.9s var(--doux-ease); }
.js .temps li.apparait.visible .num { color: var(--champagne-vif); text-shadow: 0 0 28px rgba(230, 213, 176, 0.35); transition-delay: calc(var(--retard, 0s) + 0.3s); }
/* Durée et livrables suivent le texte */
.js .temps li.apparait .etape-duree, .js .temps li.apparait .etape-bloc { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--courbe), transform 0.7s var(--courbe); }
.js .temps li.apparait.visible .etape-duree, .js .temps li.apparait.visible .etape-bloc { opacity: 1; transform: none; }
.js .temps li.apparait.visible .etape-duree { transition-delay: calc(var(--retard, 0s) + 0.65s); }
.js .temps li.apparait.visible .etape-bloc { transition-delay: calc(var(--retard, 0s) + 0.75s); }
.js .temps li.apparait.visible .etape-bloc:last-child { transition-delay: calc(var(--retard, 0s) + 0.85s); }
/* Au survol : la carte se soulève un peu plus et l'illustration respire */
.illus-temps { transition: transform 0.8s var(--courbe); }
@media (hover: hover) {
  .temps li:hover { translate: 0 -6px; border-color: rgba(201, 180, 138, 0.4); }
  .temps li:hover .illus-temps { transform: translateY(-4px) scale(1.03); }
}
/* Écrans étroits (24 septembre 2026) : les trois temps sont en colonne, le fil devient vertical, le long des cartes,
   et se trace au fil du défilement (variable --progression calculée dans script.js) ; chaque pastille s'allume
   quand la ligne l'atteint. Les pastilles sont placées par script.js à la hauteur du numéro de chaque carte. */
@media (max-width: 1080px) {
  .methode .temps-cadre { padding-top: 0; }
  .temps { padding-left: 24px; }
  .temps-fil { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .temps-fil::after { background: linear-gradient(180deg, var(--champagne), var(--champagne-vif)); transform: scaleY(var(--progression, 0)); transform-origin: top; transition: none; will-change: transform; }
  .temps-fil span { top: 34px; left: 0; margin-left: -5px; transition-delay: 0s !important; }
  .temps-cadre.vue .temps-fil::after { transform: scaleY(var(--progression, 0)); }
  .temps-cadre.vue .temps-fil span { transform: scale(0); }
  .temps-cadre .temps-fil span.atteint { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-pile] > * { position: static; scale: none; }
  .js [data-pile] > *::after { display: none; }
  .js .temps li.apparait .etape-duree, .js .temps li.apparait .etape-bloc, .js .temps li.apparait .num { opacity: 1; transform: none; color: var(--champagne-vif); }
  .temps-fil::after { transform: scaleX(1); transition: none; }
  .temps-fil span { transform: scale(1); transition: none; }
  .temps-cadre .temps-fil span, .temps-cadre.vue .temps-fil span { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1080px) {
  .temps-fil::after, .temps-cadre.vue .temps-fil::after { transform: scaleY(1); }
}

/* =========================================================
   Série 11 — Grands titres : proposition A « éditorial resserré » (choix de Sabrina, 23 septembre 2026)
   Même serif, graisse normale, tailles divisées par deux, titres à gauche sous un filet, introduction alignée à droite.
   Les titres des cartes (h3) ne changent pas.
   ========================================================= */
:root {
  --t-h1: clamp(2.2rem, 3.8vw, 3.4rem);   /* hauts de page */
  --t-h2: clamp(1.7rem, 2.5vw, 2.4rem);   /* sections */
}
h1, h2 { font-weight: 400; }
h1 em, h2 em { font-weight: 400; }
h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.012em; max-width: 26ch; }
.problemes h2, .benefices-titre h2, .faq-tete h2 { max-width: 22ch; }
.apercus-titre { max-width: 26ch; }

/* Hauts de page : à gauche, plus contenus */
.hero-titre, .page-hero-titre, .contact h1, .contact h2 {
  font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch;
}
.hero-contenu, .page-hero-contenu { align-items: flex-start; text-align: left; }
.hero-label { justify-content: flex-start; }
.hero-label::after { display: none; }
.hero .chapeau, .page-hero .chapeau { margin: 20px 0 0; max-width: 48ch; }
.hero .actions { justify-content: flex-start; }
.hero-index { justify-content: flex-start; }
.page-texte h1 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.012em; }

/* Têtes de section : filet pleine largeur, titre sur six colonnes, introduction à droite au pied du titre */
.tete-section { padding-top: 24px; border-top: 1px solid var(--filet-fort); margin-bottom: clamp(48px, 6vw, 88px); }
.tete-titre { grid-column: 1 / span 6; }
.tete-intro { grid-column: 8 / span 5; max-width: 46ch; padding-bottom: 4px; color: var(--texte); }
.tete-titre .label, .benefices-titre .label, .etude-titre .label, .problemes-tete .label, .faq-tete .label, .contact .label { margin-bottom: 18px; }
.problemes .grille, .benefices .grille, .faq .grille { padding-top: 24px; border-top: 1px solid var(--filet-fort); }
.problemes-tete, .benefices-titre, .faq-tete { top: 120px; }
.etude-titre h2 { margin-bottom: 24px; }
.apercus-titre { padding-top: 24px; border-top: 1px solid var(--filet-fort); margin-bottom: clamp(40px, 5vw, 72px); }
.contact-bas { margin-top: clamp(32px, 4vw, 56px); }

/* La citation de la page Méthode suit la même échelle */
.rassurance-citation p { font-size: clamp(1.6rem, 2.4vw, 2.2rem); max-width: 32ch; }

@media (max-width: 760px) {
  :root { --t-h1: clamp(1.9rem, 7.6vw, 2.3rem); --t-h2: clamp(1.55rem, 6vw, 1.85rem); }
  .hero-titre, .page-hero-titre, .contact h1, .contact h2 { font-size: var(--t-h1); }
  .hero-index { flex-direction: row; align-items: baseline; }
  .tete-section, .problemes .grille, .benefices .grille, .faq .grille, .apercus-titre { padding-top: 18px; }
}
/* Le haut de page de l'accueil respire un peu plus sous l'en-tête, maintenant que le texte est à gauche */
.hero { padding-top: clamp(120px, 18vh, 168px); }
/* Le filet au-dessus du titre de l'aperçu court sur toute la largeur, pas seulement sur le titre */
.apercus-titre { padding-top: 0; border-top: 0; }
.apercus .conteneur { padding-top: 24px; border-top: 1px solid var(--filet-fort); }

/* ---------- Téléphone : dernière passe, pages Solutions et Méthode un peu plus courtes ---------- */
@media (max-width: 760px) {
  :root { --section: clamp(56px, 10vw, 84px); }
  .service-corps { padding: 20px; gap: 18px; }
  .service-corps dd { font-size: 0.9375rem; }
  .temps li { padding: 20px; }
  .temps .etape-duree { margin: 12px 0 14px; }
  .temps .etape-bloc + .etape-bloc { margin-top: 14px; }
  .temps .etape-bloc:last-child { padding-top: 12px; }
  .services { gap: 18px; }
}

/* =========================================================
   24 septembre 2026 — Solutions, « Ce que nous observons » : les quatre constats en liste pliable sur téléphone
   Sur ordinateur, rien ne change : <details> et <summary> se fondent dans la carte (display: contents) et restent
   ouverts (attribut open, remis par script.js). Sous 760 px, les quatre constats forment une seule carte : chaque
   ligne montre le numéro et l'énoncé, l'explication se déplie au toucher (un seul constat ouvert à la fois).
   ========================================================= */
.constat-pli, .constat-tete { display: contents; }
.constat-tete { list-style: none; pointer-events: none; cursor: default; }
.constat-tete::-webkit-details-marker { display: none; }
.constat-signe { display: none; }
.constat .enonce { display: block; }
@media (max-width: 760px) {
  .constats {
    gap: 0; overflow: hidden; border: 1px solid var(--carte-filet); border-radius: calc(var(--rayon) + 4px);
    background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); box-shadow: 0 18px 48px -24px rgba(4, 8, 24, 0.7);
  }
  .constat { display: block; min-height: 0; padding: 0; gap: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .constat + .constat { border-top: 1px solid rgba(214, 222, 255, 0.22); }
  .constat-pli { display: block; }
  .constat-tete {
    display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 13px 18px 13px 18px;
    pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .constat-tete:active { background: rgba(214, 222, 255, 0.06); }
  .constat .num { flex: none; width: 26px; margin: 0; padding: 0; font-size: 0.8125rem; }
  .constat .enonce { flex: 1; font-size: 1.0625rem; line-height: 1.25; }
  .constat-signe {
    display: block; flex: none; width: 9px; height: 9px; margin: 0 4px 0 2px; translate: 0 -2px;
    border-right: 1.25px solid var(--champagne-vif); border-bottom: 1.25px solid var(--champagne-vif); rotate: 45deg;
    transition: rotate 0.35s var(--courbe), translate 0.35s var(--courbe);
  }
  .constat-pli[open] .constat-signe { rotate: 225deg; translate: 0 2px; }
  .constat .detail { margin: 0; padding: 0 44px 16px 58px; font-size: 0.9375rem; line-height: 1.5; animation: constat-fondu 0.4s var(--courbe) both; }
  @keyframes constat-fondu { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
  /* L'apparition en cascade glisse chaque ligne dans la carte, sans la sortir de son cadre */
  .js .constat.apparait { transform: translateY(16px); }
  .js .constat.apparait.visible { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .constat .detail { animation: none; } }
/* Écrans étroits : voile plus léger sur la carte recouverte d'un empilement (elle reste plus longtemps visible qu'au grand écran) */
@media (max-width: 1080px) {
  .js [data-pile]:not(.pile-plate) > *::after { opacity: calc(var(--recul, 0) * 0.42); }
}

/* =========================================================
   Série 12 — 24 septembre 2026 : tous les encadrés du site en bleu-lavande, même teinte que les cartes
   Référence choisie par Sabrina : la carte des quatre constats (Solutions, « Ce que nous observons »).
   Restaient sombres : les pictogrammes des cinq bénéfices, les trois encadrés de « Votre situation », l'encadré
   « Durée indicative » des cartes Méthode (rendu plus clair que sa carte, au lieu de plus sombre), et des composants
   de réserve (scénarios, bulles) alignés par cohérence.
   ========================================================= */
.dimension-visuel {
  background: radial-gradient(60% 60% at 50% 50%, rgba(201, 180, 138, 0.14), transparent 70%), linear-gradient(180deg, var(--carte-haut), var(--carte-bas));
  border-color: var(--carte-filet); box-shadow: 0 18px 48px -24px rgba(4, 8, 24, 0.7);
}
.etude-liste li { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); border-color: var(--carte-filet); box-shadow: 0 18px 48px -24px rgba(4, 8, 24, 0.7); color: var(--titre); }
.etude-liste li::before { color: var(--champagne-vif); }
.etape-duree { background: rgba(214, 222, 255, 0.09); border-color: rgba(214, 222, 255, 0.36); }
.scenario { background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); border-color: var(--carte-filet); }
.scenario-avant { background: rgba(214, 222, 255, 0.07); }
.scenario-apres { background: radial-gradient(120% 90% at 100% 0%, rgba(201, 180, 138, 0.14), transparent 60%), rgba(214, 222, 255, 0.1); }
.bulle-vous { background: rgba(214, 222, 255, 0.12); }
.bulle-assistant { background: rgba(201, 180, 138, 0.14); }
/* Traits « en retrait » des pictogrammes : un peu plus clairs, pour rester lisibles sur le fond lavande */
.dimension-visuel .illus .g, .piliers .illus .g { stroke: #98A4D8; }

/* Têtes de section sur écran étroit : le titre puis l'introduction, chacun sur toute la largeur
   (les règles « Série 11 » remettaient deux colonnes étroites sous 920 px) */
@media (max-width: 920px) {
  .tete-section { align-items: start; row-gap: 14px; }
  .tete-titre, .tete-intro { grid-column: 1 / -1; max-width: none; }
}

/* =========================================================
   Série 13 — 24 septembre 2026, choix de Sabrina
   1. Bénéfices : les cinq bénéfices en grille de cartes (proposition A). Trois cartes puis deux centrées sur
      ordinateur, deux colonnes sur tablette, une colonne de cartes horizontales sur téléphone.
   2. Solutions : les rubriques des grandes cartes en parcours numéroté (proposition B). Pastilles 1 à 4 sur une
      ligne champagne, « Le résultat » en encadré champagne ; quand la carte entre à l'écran, la ligne se trace et les
      rubriques se révèlent l'une après l'autre.
   ========================================================= */

/* ---------- 1. Bénéfices : grille de cartes ---------- */
.dimensions { padding-bottom: clamp(160px, 18vw, 260px); }
.benef { list-style: none; margin: 0; padding: 0; }
.benef .illus-benef { display: block; height: auto; }
.js .benef .apparait { transform: translateY(20px); }
.benef-a { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gouttiere); }
.benef-a .benef-carte {
  grid-column: span 2; display: flex; flex-direction: column; gap: 22px; padding: 26px; border-radius: calc(var(--rayon) + 4px);
  background: linear-gradient(180deg, var(--carte-haut), var(--carte-bas)); border: 1px solid var(--carte-filet); box-shadow: 0 18px 48px -24px rgba(4, 8, 24, 0.7);
  transition: translate 0.5s var(--courbe), border-color 0.4s ease;
}
.benef-a .benef-carte:nth-child(4) { grid-column: 2 / span 2; }
.benef-a .benef-carte:nth-child(5) { grid-column: 4 / span 2; }
@media (hover: hover) { .benef-a .benef-carte:hover { translate: 0 -4px; border-color: rgba(201, 180, 138, 0.45); } }
.benef-a .benef-picto {
  display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 14px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(201, 180, 138, 0.16), transparent 70%), rgba(11, 21, 53, 0.22); border: 1px solid rgba(214, 222, 255, 0.18);
}
.benef-a .illus-benef { width: 62%; max-width: 200px; }
.benef-a .num { display: block; font-size: 0.875rem; color: var(--champagne-vif); margin-bottom: 10px; }
.benef-a h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 1.7vw, 1.7rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 10px; }
.benef-a p { font-size: 0.95rem; line-height: 1.55; color: #E6EAF8; }
@media (max-width: 1080px) {
  .benef-a { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benef-a .benef-carte, .benef-a .benef-carte:nth-child(4), .benef-a .benef-carte:nth-child(5) { grid-column: auto; }
}
@media (max-width: 760px) {
  .dimensions { padding-bottom: clamp(140px, 30vw, 200px); }
  .benef-a { grid-template-columns: 1fr; gap: 12px; }
  .benef-a .benef-carte { flex-direction: row; align-items: center; gap: 16px; padding: 16px; }
  .benef-a .benef-picto { flex: none; width: 96px; aspect-ratio: 1; border-radius: 12px; }
  .benef-a .illus-benef { width: 78%; }
  .benef-a .num { font-size: 0.75rem; margin-bottom: 4px; }
  .benef-a h3 { font-size: 1.125rem; margin-bottom: 4px; }
  .benef-a p { font-size: 0.875rem; line-height: 1.45; }
}

/* ---------- 2. Solutions : avant, après, résultat (proposition C) ----------
   Lecture de gauche à droite : « Le problème » en encadré sombre pointillé, une flèche champagne en flux continu,
   « Ce qu'il fait » et « Comment il vous aide » empilés sur lavande clair, « Le résultat » en bandeau champagne plein.
   La flèche est faite des deux pseudo-éléments du <dl>, placés dans la zone « fleche » de la grille. */
.rub-icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.service-corps.rubs-c {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr); grid-template-areas: "prob fleche fait" "prob fleche aide" "res res res";
  gap: 12px; padding: 20px; align-content: start;
}
.service-corps.rubs-c > .rub { border-top: 0; padding: 16px 18px; border-radius: 14px; transition: background-color 0.4s ease, border-color 0.4s ease; }
.service-corps.rubs-c dt { display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #F3EFE6; margin-bottom: 10px; }
.rubs-c .rub-icone { color: var(--champagne-vif); }
.service-corps.rubs-c > .rub-probleme { grid-area: prob; background: rgba(11, 21, 53, 0.42); border: 1px dashed rgba(214, 222, 255, 0.34); }
.rubs-c .rub-probleme dd { color: #CBD2EC; }
.service-corps.rubs-c > .rub-fait { grid-area: fait; }
.service-corps.rubs-c > .rub-aide { grid-area: aide; }
.service-corps.rubs-c > .rub-fait, .service-corps.rubs-c > .rub-aide { background: rgba(214, 222, 255, 0.1); border: 1px solid rgba(214, 222, 255, 0.2); }
@media (hover: hover) { .service-corps.rubs-c > .rub-fait:hover, .service-corps.rubs-c > .rub-aide:hover { background: rgba(214, 222, 255, 0.16); border-color: rgba(214, 222, 255, 0.34); } }
.service-corps.rubs-c::before { content: ""; grid-area: fleche; place-self: center; width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--champagne) 0 3px, transparent 3px 9px); animation: rubs-flux 1.2s linear infinite; }
.service-corps.rubs-c::after { content: ""; grid-area: fleche; place-self: center; width: 8px; height: 8px; border-right: 1.5px solid var(--champagne); border-top: 1.5px solid var(--champagne); rotate: 45deg; translate: 14px 0; }
@keyframes rubs-flux { to { background-position: 9px 0; } }
.service-corps.rubs-c > .rub-resultat { grid-area: res; margin: 0; background: linear-gradient(135deg, #D9C69C, #C2AB7C); border: 0; color: var(--noir); padding: 18px 22px; }
.service-corps.rubs-c .rub-resultat dt { color: rgba(11, 21, 53, 0.72); }
.service-corps.rubs-c .rub-resultat dd { color: var(--noir); font-size: clamp(1.25rem, 1.7vw, 1.45rem); }
.rubs-c .rub-resultat .rub-icone { color: var(--noir); }
@media (prefers-reduced-motion: reduce) { .service-corps.rubs-c::before { animation: none; } }
@media (max-width: 760px) {
  .service-corps.rubs-c { grid-template-columns: 1fr; grid-template-areas: "prob" "fleche" "fait" "aide" "res"; grid-template-rows: auto 26px auto auto auto; gap: 10px; padding: 16px; }
  .service-corps.rubs-c > .rub { padding: 14px 16px; }
  .service-corps.rubs-c dd { line-height: 1.5; }
  .service-corps.rubs-c::before { width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--champagne) 0 3px, transparent 3px 9px); animation-name: rubs-flux-bas; }
  .service-corps.rubs-c::after { rotate: 135deg; translate: 0 10px; }
  @keyframes rubs-flux-bas { to { background-position: 0 9px; } }
}

/* ---------- Accueil, 24 septembre 2026 : haut de page épuré (titre, introduction, paysage) ----------
   Le bouton, le lien et la ligne des trois points ont été retirés ; le texte garde sa place dans le tiers haut,
   au-dessus du paysage, grâce à une réserve basse un peu plus grande. */
.hero-contenu { padding-bottom: clamp(200px, 30vh, 320px); }
@media (max-width: 760px) { .hero-contenu { padding-bottom: clamp(230px, 36vh, 300px); } }

/* =========================================================
   Assistant IA : bulle en bas à droite et fenêtre de discussion (assets/assistant.js)
   Réutilise les bulles .bulle, .bulle-vous, .bulle-assistant et l'animation « point ».
   ========================================================= */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.assistant { position: fixed; right: 24px; bottom: 24px; z-index: 60; font-family: var(--sans); }
body.menu-ouvert .assistant { display: none; }
@media print { .assistant { display: none; } }

/* Bouton flottant : pilule champagne, comme le bouton principal du site */
.assistant-bouton {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 24px 0 18px;
  border: 0; border-radius: 999px; background: var(--champagne); color: var(--noir);
  font: 600 0.9375rem/1 var(--sans); letter-spacing: 0.01em; cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(4, 8, 24, 0.85);
  transition: background-color 0.3s ease-out, box-shadow 0.4s var(--courbe), translate 0.4s var(--courbe);
}
.assistant-bouton:hover { background: var(--champagne-vif); box-shadow: 0 0 0 6px rgba(201, 180, 138, 0.12), 0 18px 40px -16px rgba(201, 180, 138, 0.55); translate: 0 -2px; }
.assistant-bouton svg { width: 22px; height: 22px; flex: none; }

/* Fenêtre de discussion */
.assistant-panneau {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  display: flex; flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 140px));
  height: min(620px, calc(100dvh - 140px));
  background: linear-gradient(180deg, var(--releve), var(--noir));
  border: 1px solid var(--filet-fort); border-radius: calc(var(--rayon) + 4px);
  box-shadow: 0 30px 80px -30px rgba(2, 6, 20, 0.9);
  overflow: hidden;
  opacity: 0; transform: translateY(12px); transform-origin: bottom right;
  transition: opacity 0.3s var(--courbe), transform 0.3s var(--courbe);
}
.assistant-panneau[hidden] { display: none; }
.assistant.ouvert .assistant-panneau { opacity: 1; transform: none; }

.assistant-tete { display: flex; align-items: center; gap: 4px; padding: 14px 10px 12px 20px; border-bottom: 1px solid var(--filet); }
.assistant-tete-texte { flex: 1; min-width: 0; }
.assistant-statut { font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); }
.assistant-titre { max-width: none; margin-top: 2px; font-family: var(--serif); font-size: 1.375rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: var(--titre); }
.assistant-titre:focus { outline: none; }
.assistant-icone {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: var(--texte); cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.assistant-icone:hover { background: rgba(214, 222, 255, 0.1); color: var(--titre); }
.assistant-icone:disabled { opacity: 0.4; cursor: not-allowed; }
.assistant-icone svg { width: 20px; height: 20px; }

/* Fil de la conversation */
.assistant-fil { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 14px; scrollbar-width: thin; scrollbar-color: var(--filet-fort) transparent; }
.assistant-fil:focus-visible { outline-offset: -3px; }
.assistant-fil .bulle { max-width: 92%; font-size: 0.9375rem; line-height: 1.55; }
.assistant-texte > * + * { margin-top: 0.6em; }
.assistant-texte ul, .assistant-texte ol { padding-left: 1.25em; }
.assistant-texte ul { list-style: disc; }
.assistant-texte ol { list-style: decimal; }
.assistant-texte li + li { margin-top: 4px; }
.assistant-texte li::marker { color: var(--champagne); }
.assistant-texte strong { font-weight: 600; color: var(--titre); }
.assistant-texte a, .assistant-accord a, .assistant-mention a { color: var(--champagne-vif); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.assistant-texte a:hover, .assistant-accord a:hover, .assistant-mention a:hover { color: var(--titre); }
.assistant-fil .assistant-erreur { background: rgba(214, 222, 255, 0.08); border: 1px solid rgba(255, 190, 170, 0.45); }
.assistant-fil .assistant-erreur .bulle-qui { color: #F2C9BC; }

/* Points d'attente pendant que l'assistant écrit */
.assistant-attente { display: flex; gap: 5px; padding: 16px 18px; }
.assistant-attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); animation: point 1s ease-in-out infinite; }
.assistant-attente i:nth-child(2) { animation-delay: 0.15s; }
.assistant-attente i:nth-child(3) { animation-delay: 0.3s; }

/* Avertissement à confirmer avant le premier message */
.assistant-accord { padding: 14px 16px; border: 1px dashed rgba(201, 180, 138, 0.5); border-radius: 14px; background: rgba(201, 180, 138, 0.06); font-size: 0.875rem; line-height: 1.55; color: var(--texte); }
.assistant-accord-bouton {
  margin-top: 12px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--champagne); color: var(--noir);
  font: 600 0.875rem/1 var(--sans); cursor: pointer; transition: background-color 0.3s ease-out;
}
.assistant-accord-bouton:hover { background: var(--champagne-vif); }
.assistant-zone-accord { padding: 0 16px 12px; }
.assistant-zone-accord:empty { display: none; }
.assistant-zone-accord .assistant-accord { padding: 12px 14px; font-size: 0.8125rem; line-height: 1.5; }
.assistant-zone-accord .assistant-accord-bouton { margin-top: 10px; }

/* Suggestions de questions */
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.assistant-suggestions[hidden] { display: none; }
.assistant-puce {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--filet-fort); border-radius: 999px; background: transparent; color: var(--titre);
  font: 500 0.8125rem/1.2 var(--sans); text-align: left; cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
}
.assistant-puce:hover:not(:disabled) { border-color: var(--champagne); background: rgba(201, 180, 138, 0.1); color: var(--champagne-vif); }
.assistant-puce:disabled { opacity: 0.45; cursor: not-allowed; }

/* Zone de saisie */
.assistant-formulaire { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--filet-fort); border-radius: 22px; background: rgba(214, 222, 255, 0.06); transition: border-color 0.2s; }
.assistant-formulaire:focus-within { border-color: var(--champagne); }
.assistant-champ { flex: 1; min-width: 0; min-height: 32px; max-height: 150px; padding: 8px 0 6px; border: 0; outline: none; resize: none; overflow-y: hidden; background: transparent; color: var(--titre); font: 400 1rem/1.45 var(--sans); }
.assistant-champ::placeholder { color: var(--doux); opacity: 1; }
.assistant-champ:disabled { cursor: not-allowed; }
.assistant-envoyer { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--champagne); color: var(--noir); cursor: pointer; transition: background-color 0.3s ease-out, opacity 0.2s; }
.assistant-envoyer:hover:not(:disabled) { background: var(--champagne-vif); }
.assistant-envoyer:disabled { opacity: 0.4; cursor: not-allowed; }
.assistant-envoyer svg { width: 20px; height: 20px; }
.assistant-compteur { padding: 4px 18px 0; font-size: 0.75rem; text-align: right; color: var(--doux); }
.assistant-compteur[hidden] { display: none; }
.assistant-mention { padding: 8px 18px 14px; font-size: 0.75rem; line-height: 1.45; color: var(--doux); }

/* Le bouton ne doit pas cacher les liens du bas de page */
.pied-bas { padding-bottom: 96px; }

/* Téléphone : bouton rond, fenêtre en plein écran */
@media (max-width: 760px) {
  .assistant { right: 16px; bottom: 16px; }
  .assistant-bouton { width: 56px; padding: 0; justify-content: center; }
  .assistant-bouton-texte { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assistant-panneau { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; transform: translateY(16px); }
  .assistant-tete { padding-top: max(12px, env(safe-area-inset-top)); }
  .assistant-mention { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.assistant-plein-ecran { overflow: hidden; }
  body.assistant-plein-ecran .assistant-bouton { display: none; }
  .pied-bas { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panneau, .assistant.ouvert .assistant-panneau { transform: none; }
  .assistant-bouton:hover { translate: none; }
}