/* ==========================================================================
   M'oreau — style.css
   Fond #1F1E1B · Accent or #F2C838 · Texte #F5F5F0 (verrouillés)
   ========================================================================== */

/* ---- Polices auto-hébergées (subset latin, couvre le français et le €) ----
   Attention si vous touchez à ces polices : Instrument Serif n'existe qu'en 400
   et Inter s'arrête à 500. Demander un gras à l'une des deux ne charge rien —
   le navigateur épaissit les lettres lui-même, et le rendu est empâté. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
}

/* ---- Base ---- */
:root {
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
  --foreground: #F5F5F0;
  --muted: #ADADA7;
  --gold: #F2C838;
  --gold-hover: #F7D555;
  --bg: #1F1E1B;
  --surface: #2B2A26;
  --line: #3E3D38;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--muted); text-decoration: none; }
a:hover { color: var(--foreground); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Icônes trait (coche, flèche) */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Navigation fixe (effet verre)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  box-sizing: border-box;
}
@media (min-width: 900px) { .site-header { padding: 20px 32px; } }
.nav-glass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 6px 6px 6px 22px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
/* Liseré dégradé du verre (pseudo-élément masqué en anneau) */
.glass::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  box-sizing: border-box;
  color: var(--foreground);
  line-height: 0;
}
.logo-svg { display: block; height: 26px; width: auto; }
@media (max-width: 767px) { .logo-svg { height: 22px; } }
.nav-links { display: none; }
.nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  transition: color 200ms;
  /* zone cliquable >= 44px de haut sans changer le rendu */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-links a:hover { color: var(--foreground); }
.nav-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 18px;
  border-radius: 9999px;
  border: none;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background-color: var(--gold);
  color: #1F1E1B;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  cursor: pointer;
  transition: transform .3s ease, background-color .2s ease;
}
.nav-cta:hover { transform: scale(1.03); background-color: var(--gold-hover); color: #1F1E1B; }
.label-mobile { display: inline; }
.label-desktop { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-cta { padding: 8px 22px; font-size: 14px; }
  .label-mobile { display: none; }
  .label-desktop { display: inline; }
}

/* ==========================================================================
   Hero (vidéo épinglée, H1 en deux temps)
   ========================================================================== */
#hero-wrap {
  position: relative;
  z-index: 60;
  /* 260svh : le hero reste collé pendant 1,6 écran de défilement, ce qui laisse
     la place de retarder l'apparition de la 2e ligne du titre (voir data-step). */
  height: 260vh;
  height: 260svh;
  background: var(--bg);
  color: var(--foreground);
  font-family: var(--font-body);
}
@media (max-width: 767px) { #hero-wrap { height: 220vh; height: 220svh; } }
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 9vh, 90px) 24px;
  padding-bottom: clamp(96px, 22vh, 240px);
  min-height: 0;
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.05;
  max-width: none;
  margin: 0 auto;
  white-space: nowrap;
  letter-spacing: -1px;
}
@media (min-width: 768px) { .hero-h1 { letter-spacing: -2.46px; } }
.h1-l1, .h1-l2 {
  display: block;
  color: var(--foreground);
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'wght' 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}
/* Sous 700px le H1 est dimensionné en vw pour tenir sur une ligne sans déborder */
@media (max-width: 700px) {
  .h1-l1, .h1-l2 { font-size: clamp(1.375rem, 6.9vw, 2.5rem); }
}
.h1-l2 {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.h1-l2.revealed { opacity: 1; transform: translateY(0); }
.hero-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 25%;
  background: linear-gradient(to bottom, rgba(31, 30, 27, 0) 0%, rgba(31, 30, 27, 0.55) 55%, #1F1E1B 100%);
  z-index: 2;
  pointer-events: none;
}
.sentinel { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; }
/* Position du déclencheur de la 2e ligne du H1. Le calcul : la ligne apparaît
   après (top% × hauteur du hero − 0,5 écran) de défilement.
   69% × 2,60 − 0,5 = 1,29 écran sur ordinateur · 66% × 2,20 − 0,5 = 0,95 mobile.
   PLAFOND : le hero se décolle après (hauteur − 1 écran), soit 1,60 ici et 1,20
   sur mobile. Ne dépassez jamais cette valeur, sinon la ligne apparaîtrait alors
   que le titre a déjà quitté l'écran — et personne ne la verrait. */
#hero-wrap [data-step="2"] { top: 69%; }
@media (max-width: 767px) { #hero-wrap [data-step="2"] { top: 66%; } }

/* ==========================================================================
   Manifeste (mots rotatifs pilotés par le défilement)
   ========================================================================== */
#manifeste { background: var(--bg); padding: 0 24px; text-align: center; }
/* 76rem et non 1100px : .pr-wrap demande déjà 76rem pour la grille des tarifs,
   et se retrouvait bridé par ce conteneur. Les blocs plus étroits (témoignage,
   vitrine, phrases de conviction) gardent chacun leur propre largeur maximale. */
.manifeste-inner { max-width: 76rem; margin: 0 auto; }
/* 700svh : 100svh de défilement par mot, soit un écran complet pour passer
   d'une profession à la suivante. La formule est (hauteur - 100svh) / 6 mots ;
   si vous ajoutez ou retirez une profession, ajustez la hauteur pour garder
   ce rythme. */
.words-pin { position: relative; height: 700vh; height: 700svh; }
.words-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sélecteur composé : doit gagner sur .reveal-line (display, min-height) */
.reveal-line.hero-sub {
  display: block;
  min-height: 0;
  font-family: var(--font-body);
  color: var(--muted);
  font-size: clamp(20px, 2.7vw, 42px);
  max-width: none;
  margin: 0 auto;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
/* Sous 768px la phrase s'autorise à passer à la ligne (sinon débordement) */
@media (max-width: 767px) { .reveal-line.hero-sub { white-space: normal; } }
.w-frame { position: relative; display: inline-block; vertical-align: bottom; margin-left: 0.35em; }
.w-edge { position: absolute; width: 0.42em; height: 0.42em; border: 1.5px solid var(--gold); pointer-events: none; }
.w-edge.e1 { top: -0.18em; left: -0.16em; border-right: 0; border-bottom: 0; }
.w-edge.e2 { top: -0.18em; right: -0.16em; border-left: 0; border-bottom: 0; }
.w-edge.e3 { bottom: -0.18em; left: -0.16em; border-right: 0; border-top: 0; }
.w-edge.e4 { bottom: -0.18em; right: -0.16em; border-left: 0; border-top: 0; }
/* NOTE PERF : la largeur du cadre est animée (propriété width) — seule entorse
   à la règle transform/opacity dans les animations de défilement, impossible à
   reproduire sans recalcul de mise en page car la ligne entière se recentre.
   Absente sur mobile, coupée par prefers-reduced-motion, ~6 déclenchements sur
   toute la page. (Les transitions de couleur au survol — background-color,
   border-color, color — ne repeignent qu'un élément survolé, jamais pendant le
   défilement : elles ne coûtent aucune image perdue.) */
.w-mask {
  display: inline-block;
  overflow: hidden;
  height: 1.7em;
  vertical-align: bottom;
  margin-left: 0;
  width: 0;
  transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* 450ms et non 900 : la transition consommait la moitié du temps d'affichage
   de chaque mot. Plus courte, le mot se pose vite et reste lisible plus longtemps. */
.w-list { display: block; transform: translateY(0); transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1); }
.w-item {
  display: block;
  width: max-content;
  height: 1.7em;
  line-height: 1.7em;
  white-space: nowrap;
  color: var(--foreground);
}
@media (max-width: 639px) {
  .w-frame { display: block; width: 100%; margin-left: 0; }
  .w-mask { display: block; width: 100% !important; margin-left: 0; text-align: center; transition: none; }
  .w-item { width: 100%; text-align: center; }
}

/* Lignes de conviction révélées au défilement */
.reveal-line {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45vh;
  min-height: 45svh;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.reveal-line.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) { .reveal-line { min-height: 38vh; min-height: 38svh; } }

/* ==========================================================================
   Vitrine (site encadré, aplati puis parcouru au défilement)
   ========================================================================== */
#travail { position: relative; z-index: 1; }
.cs-pin { position: relative; height: 260vh; height: 260svh; }
.cs-container {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 112px 8px 8px;
}
.cs-perspective { width: 100%; position: relative; perspective: 1000px; }
.cs-header { max-width: 64rem; margin: 0 auto; text-align: center; }
.cs-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.cs-header p {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.cs-card {
  /* 100% et non 92vw : vw inclut la barre de défilement et ignore les marges
     intérieures du conteneur, ce qui débordait entre 768 et 1113 px. */
  /* Le 300px réserve la hauteur du bandeau fixe, de l'en-tête (titre +
     légende) et des marges : au-delà, la carte rétrécit au lieu de déborder. */
  width: min(64rem, 100%, calc((100svh - 300px) * 1.6));
  margin: 0 auto;
  /* Cadre volontairement fin : 2px de bordure + la marge intérieure ci-dessous.
     Le rayon extérieur vaut rayon intérieur (16px) + épaisseur du cadre, pour
     que les arrondis restent concentriques. */
  border: 2px solid var(--line);
  border-radius: 23px;
  background: var(--surface);
  padding: 5px;
  box-sizing: border-box;
  box-shadow: 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a;
}
.cs-screen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg);
}
/* Safari avant 15 ignore aspect-ratio : sans ce repli, le cadre aurait 0 px de
   haut et la vitrine disparaîtrait. 62.5 % = 900 / 1440. */
@supports not (aspect-ratio: 1 / 1) {
  .cs-screen { height: 0; padding-top: 62.5%; }
  .cs-inner { position: absolute; top: 0; left: 0; }
  .tm-photo { height: 0; padding-top: 100%; }
}
/* Lien superposé : couvre tout le cadre, par-dessus la capture. */
.cs-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 2; display: block; cursor: pointer; }
/* L'anneau de focus global (outline extérieur) serait rogné par l'overflow:hidden
   du cadre : on le dessine vers l'intérieur pour ce lien. */
.cs-link:focus-visible { outline-offset: -4px; }
.cs-inner { position: relative; width: 1280px; height: 2000px; transform-origin: top left; }
.cs-inner img { width: 1280px; height: 2000px; display: block; pointer-events: none; }
/* Pastille « Ouvrir le site » : rien n'indiquait que le cadre était cliquable.
   pointer-events:none pour que le clic traverse jusqu'au lien qui la recouvre. */
.cs-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 9999px;
  background: rgba(31, 30, 27, 0.85);
  border: 1px solid var(--line);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cs-hint svg { flex: 0 0 auto; }
/* Au survol du cadre, la pastille passe en or : le lien devient évident. */
.cs-screen:hover .cs-hint { background: var(--gold); border-color: var(--gold); color: #1F1E1B; }
/* Le lien reçoit le focus clavier : la pastille doit réagir aussi. */
.cs-link:focus-visible ~ .cs-hint { background: var(--gold); border-color: var(--gold); color: #1F1E1B; }
@media (max-width: 767px) {
  .cs-hint { right: 8px; bottom: 8px; padding: 7px 11px; font-size: 11px; gap: 5px; }
}
@media (min-width: 768px) {
  .cs-container { padding: 112px 40px 40px; }
  .cs-card { padding: 12px; border-radius: 30px; }
}

/* ==========================================================================
   Simulateurs (vitrine des outils) — 8 cartes menant aux pages /simulateurs/
   ========================================================================== */
.sim-wrap { max-width: 68rem; margin: 0 auto; padding: 10vh 0 4vh; padding: 10svh 0 4svh; scroll-margin-top: 112px; }
.sim-header { text-align: center; max-width: 44rem; margin: 0 auto; }
.sim-header h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--foreground); }
.sim-header p { margin: 16px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--muted); }
.sim-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
@media (min-width: 640px) { .sim-grid { grid-template-columns: repeat(2, 1fr); } }
.sim-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  color: inherit; text-decoration: none; text-align: left;
  /* apparition : fondu + montée de 16 px, décalage réglé par le script ; survol : montée de 4 px */
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out, border-color 200ms ease-out;
}
.sim-card.is-visible { opacity: 1; transform: none; transition: opacity 500ms ease-out, transform 200ms ease-out, border-color 200ms ease-out; }
.sim-card.is-visible:hover, .sim-card.is-visible:focus-visible { transform: translateY(-4px); border-color: #4A4944; }
.sim-card svg { width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sim-card h3 { margin: 4px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--foreground); }
.sim-card p { margin: 0; flex: 1; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted); }
.sim-card .sim-link { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--gold); }

/* ==========================================================================
   Témoignage
   ========================================================================== */
/* Offres des simulateurs : trois lignes de prix, volontairement plus discrètes
   que les cartes de la section Tarifs — c'est un complément, pas une formule. */
.sim-offres { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.sim-offres h3 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.sim-offres-intro {
  margin: 10px auto 0;
  max-width: 38rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.sim-tarifs { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
@media (min-width: 720px) { .sim-tarifs { grid-template-columns: repeat(3, 1fr); } }
.sim-tarif {
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sim-tarif h4 { margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); }
.sim-tarif-prix {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.sim-tarif p { margin: 4px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--muted); }
.sim-offres-inclus {
  margin: 16px auto 0;
  max-width: 46rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.tm-wrap { max-width: 64rem; margin: 0 auto; padding: 10vh 0 4vh; padding: 10svh 0 4svh; }
.tm-row { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.tm-photo {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  flex: 0 0 auto;
}
.tm-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 30rem;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.tm-card .tm-name { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--foreground); }
.tm-role { margin: 0 0 20px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--muted); }
.tm-text { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--foreground); }
@media (min-width: 768px) {
  /* justify-content: center — sans lui, le duo photo + carte reste collé à
     gauche des 64rem du conteneur et paraît décalé dans la page. */
  .tm-row { flex-direction: row; justify-content: center; gap: 0; }
  .tm-photo { width: 360px; height: 360px; max-width: none; }
  .tm-card { margin-left: -64px; }
}

/* ==========================================================================
   Tarifs
   ========================================================================== */
/* 68rem et non 76rem : la grille des trois offres respire mieux avec de vraies
   marges latérales. Ne descendez pas sous 68rem sans revérifier le bouton :
   « Demander mon audit gratuit » doit rester sur une ligne (voir .pr-cta). */
.pr-wrap { max-width: 68rem; margin: 0 auto; padding: 10vh 0 6vh; padding: 10svh 0 6svh; }
#tarifs { scroll-margin-top: 112px; }
.pr-intro { text-align: center; max-width: 44rem; margin: 0 auto; }
.pr-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.pr-intro p { margin: 16px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--muted); }
.pr-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 64px; }
/* 1140px et non 1024 : en dessous, une colonne sur trois est trop étroite pour
   que « Demander mon audit gratuit » tienne sur une ligne. Le seuil laisse
   ~20px de réserve au libellé ; ne le baissez pas sans revérifier le bouton. */
@media (min-width: 1140px) { .pr-grid { grid-template-columns: repeat(3, 1fr); } }
.pr-card {
  position: relative;
  /* Cibles des liens du pied de page : la carte s'arrête sous la barre fixe. */
  scroll-margin-top: 112px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
}
.pr-card.feat { border-color: var(--gold); }
/* Sur petit écran, 32px de marge intérieure de chaque côté ne laissaient plus
   la place au libellé du bouton sur une ligne. */
@media (max-width: 480px) { .pr-card { padding: 24px; } }
.pr-body { flex: 1 1 auto; }
.pr-card h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--foreground); }
.pr-who { margin: 12px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-style: italic; color: var(--muted); }
.pr-price { margin-top: 24px; }
.pr-amount { display: block; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--foreground); }
.pr-delay { display: block; margin-top: 8px; font-family: var(--font-body); font-size: 15px; color: var(--muted); }
.pr-badge {
  position: absolute;
  top: 0;
  left: 32px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: var(--gold);
  color: #1F1E1B;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pr-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pr-item svg { flex: 0 0 auto; color: var(--gold); margin-top: 2px; }
.pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 32px;
  padding: 14px 12px;
  box-sizing: border-box;
  /* Le libellé doit rester sur une seule ligne : la grille passe à une colonne
     sous 1140px précisément pour que la place ne manque jamais. Le bouton est
     pleine largeur et son contenu centré, donc réduire ce padding latéral ne
     change rien à l'œil mais libère la place nécessaire. */
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #34332E;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.pr-cta:hover { background: var(--line); color: var(--foreground); }
.pr-cta.feat { background: var(--gold); border-color: var(--gold); color: #1F1E1B; }
.pr-cta.feat:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #1F1E1B; }
/* Ces deux règles doivent rester APRÈS le bloc .pr-cta ci-dessus, sinon elles
   sont écrasées (même spécificité, c'est la dernière déclarée qui gagne). */
@media (max-width: 480px) { .pr-cta { font-size: 14px; } }
/* Sous 360px la place manque même à 14px : on laisse le libellé revenir à la
   ligne plutôt que de le faire déborder du bouton. */
@media (max-width: 360px) { .pr-cta { white-space: normal; } }
/* ==========================================================================
   Les abonnements — récurrent mensuel, distinct des forfaits ponctuels ci-dessus
   ========================================================================== */
.pr-subs { margin-top: 80px; padding-top: 48px; border-top: 1px solid var(--line); }
.pr-subs h3 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--muted);
}
.pr-subs-intro {
  margin: 12px auto 0;
  max-width: 40rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* Sélecteur mensuel / annuel : deux boutons dans une pilule, l'actif en or. */
.pr-cycle {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: var(--surface);
}
.pr-cycle[hidden] { display: none; }
.pr-cycle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.pr-cycle button:hover { color: var(--foreground); }
.pr-cycle button[aria-pressed="true"] { background: var(--gold); color: #1F1E1B; }
/* Pastille de remise, affichée dans chaque carte en facturation annuelle.
   Le taux vient du script, pour qu'il n'existe qu'à un seul endroit. */
.pr-remise {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--gold);
  color: #1F1E1B;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.pr-remise[hidden] { display: none; }

/* Ancien tarif barré, affiché à gauche du prix annuel. Le <s> porte déjà le
   sens « n'est plus exact » pour les lecteurs d'écran. */
.pr-old {
  margin-right: 10px;
  font-size: 0.6em;
  color: var(--muted);
  text-decoration-thickness: 1px;
}
.pr-old[hidden] { display: none; }

/* Prix unitaire de l'article, maintenance déduite : rend l'échelle tarifaire
   vérifiable d'un coup d'œil — utile face à une clientèle de comptables. */
.pr-unit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
}
/* Ligne « soit X € par an », affichée seulement en facturation annuelle. */
.pr-billed {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.pr-billed[hidden] { display: none; }

.pr-subs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
/* 860px et non 1140 : ces cartes n'ont pas de bouton, elles tiennent en 3 colonnes
   bien plus tôt que les forfaits. */
@media (min-width: 860px) { .pr-subs-grid { grid-template-columns: repeat(3, 1fr); } }
/* Cartes plus sobres que les forfaits : ce sont des compléments, pas l'offre principale. */
.pr-card.sub { padding: 26px; }
.pr-card.sub h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--foreground);
}
.pr-card.sub .pr-price { margin-top: 16px; }
.pr-card.sub .pr-amount { font-size: 34px; }
.pr-per {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}
.pr-card.sub .pr-list { margin-top: 24px; gap: 14px; }

/* 68rem comme .pr-wrap : la bande de l'option a exactement la largeur des
   grilles de tarifs et d'abonnements qui l'entourent. */
.pr-options { max-width: 68rem; margin: 48px auto 0; }
.pr-options h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-align: center;
}
/* Une seule option : une bande basse plutôt qu'une carte. Titre puis les deux
   formules, chacune sur une ligne — trois lignes de texte en tout. */
.opt-ligne {
  display: grid;
  gap: 6px 24px;
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  /* la section est centrée ; un paragraphe de quatre lignes centré se lit mal */
  text-align: left;
}
/* Le titre occupait une colonne de 240 px à gauche, ce qui ne laissait que
   778 px aux textes — or le premier en réclame 946 pour tenir sur une ligne.
   Titre placé au-dessus : les textes disposent des 1042 px de la bande. */
.opt-ligne h4 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--foreground);
}
.opt-ligne p { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--muted); }
.opt-ligne b { font-weight: 500; color: var(--gold); white-space: nowrap; }

.pr-reassurance { margin: 40px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--muted); text-align: center; }

/* ==========================================================================
   Contact
   ========================================================================== */
#contact { background: var(--bg); padding: 12vh 24px 14vh; padding: 12svh 24px 14svh; scroll-margin-top: 112px; }
.ct-inner { max-width: 40rem; margin: 0 auto; }
.ct-inner h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
  text-align: center;
}
.ct-sub { margin: 16px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--muted); text-align: center; }
.ct-form { display: flex; flex-direction: column; gap: 20px; margin-top: 48px; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-label { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); }
.ct-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 200ms ease;
}
/* #ADADA7 et non un gris plus sombre : contraste 6,37:1 sur le fond des champs. */
.ct-input::placeholder { color: var(--muted); opacity: 1; }
.ct-input:focus { outline: none; border-color: var(--gold); }
/* appearance:none supprime le chevron natif du navigateur : on le redessine en
   fond, sinon le champ est visuellement identique à une saisie de texte.
   Le padding droit réserve sa place pour que les intitulés longs ne passent
   pas dessous. */
select.ct-input {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ADADA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
/* Tant qu'aucune profession n'est choisie, le champ prend le gris des textes
   d'exemple pour se distinguer d'une valeur réellement saisie. */
select.ct-input:invalid { color: var(--muted); }
.ct-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.ct-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.ct-gotcha { display: none; }
.ct-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 32px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--gold);
  color: #1F1E1B;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.ct-submit:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.ft {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 56px 24px 64px;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  overflow: hidden;
}
@media (min-width: 768px) { .ft { padding: 72px 40px 80px; } }
/* Halo diffus au centre du bord supérieur */
.ft-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 128px;
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 245, 240, 0.08), transparent 70%);
  pointer-events: none;
}
/* Trait lumineux flouté posé sur la bordure */
.ft-line {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 33%;
  height: 1px;
  border-radius: 9999px;
  background: rgba(245, 245, 240, 0.2);
  filter: blur(1px);
  pointer-events: none;
}
.ft-grid { position: relative; display: grid; gap: 40px; }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: 1fr 2.8fr; gap: 32px; } }
.ft-logo { display: block; height: 28px; width: auto; color: var(--foreground); }
.ft-copy { margin: 24px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--muted); }
.ft-cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 560px) { .ft-cols { grid-template-columns: repeat(2, 1fr); } }
/* 4 colonnes seulement au-delà de 900px : en dessous, « Cabinet + Éditorial »
   et « Politique de confidentialité » se chevauchaient. */
@media (min-width: 900px) { .ft-cols { grid-template-columns: repeat(4, 1fr); } }
.ft-col h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foreground);
}
.ft-col ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.ft-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  transition: color 300ms ease;
}
.ft-col a:hover { color: var(--foreground); }
/* Apparition au défilement, décalée colonne par colonne */
.ft-rise {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}
.ft-rise:nth-child(2) { transition-delay: 100ms; }
.ft-rise:nth-child(3) { transition-delay: 200ms; }
.ft-rise.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Mouvement réduit : toutes les animations sont coupées, tout reste visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #hero-wrap { height: 100vh; height: 100svh; }
  .hero-sticky { position: static; }
  .words-pin, .cs-pin { height: auto; }
  .words-sticky { position: static; height: auto; padding: 14vh 0 2vh; padding: 14svh 0 2svh; }
  .cs-container { position: static; height: auto; padding: 12vh 8px; padding: 12svh 8px; }
  .cs-card, .cs-header { transform: none !important; }
  .h1-l2, .hero-sub, .reveal-line, .ft-rise, .sim-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ft-rise { transition-delay: 0ms !important; }
  .w-mask { width: auto !important; transition: none !important; }
  .w-list { transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Pages légales (mentions légales, confidentialité)
   Texte courant long : une colonne étroite, une hiérarchie de titres nette.
   ========================================================================== */
.lg-header { max-width: 44rem; margin: 0 auto; padding: 32px 24px 0; }
.lg-logo { display: inline-block; line-height: 0; }
.lg-logo img { display: block; width: auto; height: 26px; }
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}
.legal h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.legal h2 {
  margin: 48px 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--foreground);
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { font-weight: 500; color: var(--foreground); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--gold-hover); }
.legal-maj { font-size: 14px; }
.legal-retour { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
/* Pied de page réduit sur ces pages : une seule ligne, pas de colonnes. */
.lg-ft { padding-top: 32px; padding-bottom: 40px; text-align: center; }
.lg-ft .ft-copy { margin: 0; }
.lg-ft .ft-copy a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.lg-ft .ft-copy a:hover { color: var(--foreground); }

/* ==========================================================================
   Impression : sans ces règles, les sections épinglées (jusqu'à 7 écrans de
   haut) sortaient des pages vides, et les textes révélés au défilement
   restaient invisibles.
   ========================================================================== */
@media print {
  .site-header, .hero-video, .hero-fade, .cs-hint, .pr-cycle { display: none !important; }
  #hero-wrap, .words-pin, .cs-pin { height: auto !important; }
  .hero-sticky, .words-sticky, .cs-container { position: static !important; height: auto !important; overflow: visible !important; }
  .cs-card, .cs-header { transform: none !important; }
  .h1-l2, .hero-sub, .reveal-line, .ft-rise, .sim-card { opacity: 1 !important; transform: none !important; }
  .w-mask { width: auto !important; }
  .pr-card, .opt-ligne, .tm-card { break-inside: avoid; }
}