/* =========================================================================
   Oversales : systeme visuel de la page d'accueil.
   Isole de styles.css, qui sert toutes les autres pages : rien ici ne peut
   faire regresser un pilier, un article ou l'Espace Agent.
   Verrous assumes : UN accent (le bleu de marque), UN rayon (14px surfaces,
   pill interactifs), UN theme clair sur toute la page.
   ========================================================================= */

:root {
  /* Neutres : legerement chauds, pour sortir du blanc clinique */
  --ink:        #101419;
  --ink-2:      #3d4653;
  --ink-3:      #6b7684;
  --paper:      #fbfbfa;
  --paper-2:    #f4f4f2;
  --line:       #e4e4e0;
  --line-2:     #d2d2cd;

  /* Accent unique : le bleu Oversales, inchange */
  --accent:     #2563eb;
  --accent-ink: #1d4ed8;
  --accent-wash:#eef3ff;

  /* Formes : une seule regle, documentee */
  --r-surface:  14px;
  --r-pill:     999px;

  /* Rythme vertical : volontairement irregulier */
  --gap-s:      clamp(3rem, 5vw, 4.5rem);
  --gap-m:      clamp(4.5rem, 8vw, 7.5rem);
  --gap-l:      clamp(6rem, 11vw, 10rem);

  --ease:       cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: 860px; }

/* ---------- Typographie : le contraste vient de l'echelle et de la graisse ---------- */

.display {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 800;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.h3 {
  font-size: 1.16rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 700;
  margin: 0 0 .5rem;
}

.lead  { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 62ch; margin: 1.25rem 0 0; }
.body  { color: var(--ink-2); max-width: 64ch; }
.muted { color: var(--ink-3); }

/* L'oeil de rappel : reserve a DEUX endroits sur toute la page */
.kicker {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}

/* ---------- Boutons : une seule forme, retour tactile ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.5rem;
  border-radius: var(--r-pill);
  font-size: .97rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .12s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #000; box-shadow: 0 8px 24px -10px rgba(16,20,25,.5); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(16,20,25,.03); }
.btn:active { transform: translateY(1px) scale(.988); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow i { transition: transform .2s var(--ease); }
.link-arrow:hover i { transform: translateX(3px); }

/* ---------- En-tete ---------- */

.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,251,250,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.top.is-stuck { border-bottom-color: var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1.5rem; }
.top__nav { display: flex; align-items: center; gap: 1.6rem; }
.top__nav a { color: var(--ink-2); text-decoration: none; font-size: .94rem; font-weight: 500; white-space: nowrap; transition: color .18s var(--ease); }
.top__nav a:hover { color: var(--ink); }
@media (max-width: 900px) { .top__nav { display: none; } }

/* ---------- Sections : filets, pas de fonds alternes ---------- */

.sec { padding-block: var(--gap-m); }
.sec--tight { padding-block: var(--gap-s); }
.sec--wide  { padding-block: var(--gap-l); }
.sec--ruled { border-top: 1px solid var(--line); }

/* ---------- 1. Hero : asymetrique, pas centre ---------- */

.hero { padding-block: clamp(3.5rem, 7vw, 6rem) var(--gap-m); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
/* .hero__aside : remplace a l'iteration 3 par .hero__trust, voir plus bas. */

/* ---------- 2. Le constat : une affirmation pleine largeur ---------- */

.claim { font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.24; letter-spacing: -.028em; font-weight: 600; max-width: 22ch; margin: 0; text-wrap: balance; }
.claim em { font-style: normal; color: var(--accent); }
.claim-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .claim-grid { grid-template-columns: 1fr; } .claim { max-width: none; } }

.tri { display: grid; gap: 0; margin-top: var(--gap-s); border-top: 1px solid var(--line); }
.tri__item { display: grid; grid-template-columns: 2.6rem minmax(0,1fr) minmax(0,1.5fr); gap: clamp(1rem,3vw,2.5rem); align-items: start; padding-block: 1.9rem; border-bottom: 1px solid var(--line); }
.tri__n { font-size: .82rem; font-weight: 700; color: var(--accent); padding-top: .2rem; }
.tri__item p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@media (max-width: 760px) { .tri__item { grid-template-columns: 2rem 1fr; } .tri__item p { grid-column: 2; } }

/* ---------- 3. Les paliers : empilement colle au scroll ---------- */

.stack { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.stack__intro { position: sticky; top: 120px; }
.stack__cards { display: flex; flex-direction: column; gap: 1.1rem; }

.step {
  position: sticky;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 1px 2px rgba(16,20,25,.04);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step:nth-child(1) { top: 108px; }
.step:nth-child(2) { top: 134px; }
.step:nth-child(3) { top: 160px; }
.step__top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.step__n {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
  background: var(--accent-wash); color: var(--accent-ink);
}
.step__name { font-size: 1.28rem; font-weight: 800; letter-spacing: -.02em; }
.step__scope { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.step p { margin: 0; color: var(--ink-2); }
/* Empilement physique : chaque carte est posee sur la precedente.
   L'ancien etat actif s'allumait sur les trois a la fois. */
.step:nth-child(1) { box-shadow: 0 2px 4px -2px rgba(16,20,25,.07); }
.step:nth-child(2) { box-shadow: 0 10px 22px -14px rgba(16,20,25,.22); }
.step:nth-child(3) { box-shadow: 0 20px 40px -22px rgba(16,20,25,.3); }
@media (max-width: 860px) {
  .stack { grid-template-columns: 1fr; }
  .stack__intro { position: static; }
  .step { position: static; }
}

/* ---------- 4. Le cycle : rail horizontal, defilement natif ---------- */

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .5rem 1.5rem; margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); padding-inline: clamp(1.25rem, 4vw, 2.5rem); scrollbar-width: thin; }
.rail__card { scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-surface); padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .2s var(--ease), border-color .2s var(--ease); }
.rail__card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.rail__step { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.rail__card p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.rail__hint { font-size: .85rem; color: var(--ink-3); display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }

/* ---------- 5. La preuve : le chiffre EST le design ---------- */

.proof-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,6vw,5rem); align-items: end; }
@media (max-width: 860px) { .proof-head { grid-template-columns: 1fr; } }

.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin-top: var(--gap-s); border-top: 1px solid var(--ink); }
.fig { padding: 1.9rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.fig__n { display: block; font-size: clamp(3.1rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.05em; line-height: .92; font-variant-numeric: tabular-nums; }
.fig--key .fig__n { color: var(--accent); }
.fig__n span { font-size: .42em; letter-spacing: -.02em; color: var(--ink-3); margin-left: .12em; }
.fig__l { display: block; margin-top: .7rem; font-size: .88rem; font-weight: 500; color: var(--ink-3); }
.fig__n [data-compte] { font-size: 1em; letter-spacing: inherit; color: inherit; margin-left: 0; }

/* Les titres de l'intervenant : secteurs et declaration d'activite.
   Des faits, pas des boutons : etiquettes neutres, jamais d'orange. */
.creds { margin: .6rem 0 0; display: grid; gap: 0; }
.creds__row { display: grid; grid-template-columns: minmax(150px, 13rem) 1fr; gap: .4rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.creds dt { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.creds dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.creds__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.creds__tags li { font-size: .85rem; font-weight: 500; color: var(--ink); padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); }
.creds__legal { color: var(--ink-3); }
@media (max-width: 640px) { .creds__row { grid-template-columns: 1fr; } }

.shift { margin-top: var(--gap-s); display: grid; gap: 1.6rem; max-width: 780px; }
.shift__row { display: grid; grid-template-columns: minmax(0,1fr) 88px; gap: 1.2rem; align-items: center; }
.shift__label { font-size: .97rem; color: var(--ink-2); }
.shift__bar { position: relative; height: 6px; background: var(--line); border-radius: var(--r-pill); grid-column: 1 / -1; overflow: hidden; }
.shift__fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: var(--r-pill); width: 0; transition: width 1.1s var(--ease); }
.shift__nums { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.shift__nums b { color: var(--accent); }

/* ---------- Surfaces generiques ---------- */

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-surface); padding: 1.6rem; }
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.cards-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.2rem; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

.band { background: var(--accent-wash); border: 1px solid #dbe6ff; border-radius: var(--r-surface); padding: clamp(2rem, 5vw, 3.4rem); }

.tools { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.tools span { font-size: .87rem; font-weight: 500; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .42rem .95rem; }

.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; font-weight: 600; font-size: 1.04rem; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .22s var(--ease); }
.qa details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa details p { margin: 0 0 1.4rem; color: var(--ink-2); max-width: 70ch; }

.closer { border: 1px solid var(--ink); border-radius: var(--r-surface); padding: clamp(2.2rem, 5vw, 3.6rem); display: grid; gap: 1.6rem; }

/* ---------- Mouvement : revelations au defilement ---------- */

/* Le masquage est conditionne a la classe .js posee par home.js. Sans
   JavaScript, rien n'est masque et la page reste entierement lisible :
   c'est la condition du referencement et de la citation par les IA. */
html.js [data-rise] { opacity: 0; transform: translateY(18px); transition: opacity .62s var(--ease), transform .62s var(--ease); transition-delay: var(--d, 0ms); }
html.js [data-rise].is-in { opacity: 1; transform: none; }

/* ---------- Le garde-fou que le site actuel n'a pas ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-rise] { opacity: 1; transform: none; }
  .step { position: static; }
  .shift__fill { transition: none; }
}

/* =========================================================================
   ITERATION 2 (retours Stephane) : trop blanc, section cycle a revoir,
   guides a rendre visuels avec les logos des editeurs.
   ========================================================================= */

:root {
  --wash-cool:  #f2f5fb;   /* fond teinte froid, dans la famille de l'accent */
  --wash-warm:  #f7f5f1;   /* fond teinte chaud, pour rompre la monotonie */
  --deep:       #0c1220;   /* l'ancre sombre : UNE seule section sur la page */
  --deep-2:     #16203a;
  --on-deep:    #e8ecf5;
  --on-deep-2:  #97a3bd;
}

/* Le fond general n'est plus le blanc clinique : les sections claires
   posent leur propre surface au-dessus. */
.sec, .hero { background: var(--paper); }

/* Fonds de section : des teintes, plus le metronome blanc-gris */
.ground-cool { background: var(--wash-cool); }
.ground-warm { background: var(--wash-warm); }
.ground-deep { background: var(--deep); color: var(--on-deep); }

.hero {
  background:
    radial-gradient(900px 420px at 88% -10%, #e4ecff 0%, rgba(228,236,255,0) 62%),
    radial-gradient(700px 380px at 4% 8%, #f6f2ea 0%, rgba(246,242,234,0) 58%);
}

/* ---------- LE CYCLE : ancre sombre et ligne de vie qui s'allume ---------- */

.cycle { padding-block: var(--gap-l); }
.cycle .h2 { color: #fff; }
.cycle .body { color: var(--on-deep-2); }

.spine { position: relative; margin-top: clamp(2.5rem, 6vw, 4rem); padding-left: 3.4rem; }
.spine::before {
  content: ''; position: absolute; left: 1.05rem; top: .6rem; bottom: .6rem;
  width: 2px; background: rgba(255,255,255,.1);
}

.stage { position: relative; padding-bottom: clamp(2rem, 4vw, 3rem); }
.stage:last-child { padding-bottom: 0; }

.stage__dot {
  position: absolute; left: -3.4rem; top: .1rem;
  width: 2.15rem; height: 2.15rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--deep-2); border: 2px solid rgba(255,255,255,.14);
  color: var(--on-deep-2); font-size: 1rem;
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.stage__line {
  position: absolute; left: -2.35rem; top: 2.25rem; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease);
}
.stage:last-child .stage__line { display: none; }

.stage__name { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0 0 .4rem; }
.stage p { margin: 0; color: var(--on-deep-2); max-width: 56ch; font-size: .98rem; }

.stage.is-live .stage__dot {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 6px rgba(37,99,235,.16);
  transform: scale(1.06);
}
.stage.is-live .stage__line { transform: scaleY(1); }

.cycle__foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cycle .link-arrow { color: #7aa5ff; }
.cycle .btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.cycle .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.07); }

/* Une seule colonne, toujours : un fil qui se lit de haut en bas.
   En deux colonnes l'ordre devenait 1-2 / 3-4 et la seconde colonne
   n'avait aucun fil : la metaphore ne tenait plus. */
.stage__body { max-width: 62ch; }

@media (min-width: 900px) {
  .stage { display: grid; grid-template-columns: 13rem minmax(0, 1fr); column-gap: 2.5rem; align-items: baseline; padding-bottom: 1.75rem; }
  .stage__name { margin: 0; }
  .spine { padding-left: 3.9rem; }
  .stage__dot { left: -3.9rem; }
  .stage__line { left: -2.85rem; }
  .spine::before { left: 1.05rem; }
}

/* Le bouclage : un cycle qui s'arrete n'est pas un cycle. */
.loop { position: relative; margin-top: .4rem; padding-left: .2rem; display: flex; align-items: center; gap: .75rem; color: var(--on-deep-2); font-size: .94rem; }
.loop__ring { position: absolute; left: -3.9rem; width: 2.15rem; height: 2.15rem; border-radius: var(--r-pill); display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.22); color: var(--on-deep-2); font-size: .95rem; }
.loop strong { color: #fff; font-weight: 600; }
@media (max-width: 899px) { .loop__ring { left: -3.4rem; } }

/* ---------- LES GUIDES : logos des editeurs, a leur couleur ---------- */

.guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .guides { grid-template-columns: repeat(3, 1fr); } }

.guide {
  position: relative; overflow: hidden;
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 1.6rem 1.5rem 1.4rem;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.guide::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.guide:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--brand) 60%, transparent); }
.guide:hover::after { transform: scaleX(1); }

.guide__mark {
  width: 2.9rem; height: 2.9rem; border-radius: var(--r-surface);
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--brand) 11%, #fff);
}
.guide__mark i {
  display: block; width: 1.5rem; height: 1.5rem;
  background: var(--brand);
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
}
.guide__name { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .35rem; }
.guide p { margin: 0; font-size: .92rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .stage__line { transform: scaleY(1); transition: none; }
  .stage__dot { transition: none; }
  .guide, .guide::after { transition: none; }
}

/* =========================================================================
   ITERATION 3 : le hero. Objectif, inviter a descendre sans jamais ecrire
   "scroll" ni poser une fleche clignotante. Deux leviers seulement :
   1. la composition tient sous ~82vh, donc l'affirmation de la section
      suivante depasse du bas de l'ecran et appelle le geste ;
   2. une chose bouge, et ce qui bouge DIT le positionnement : le cycle de
      vente tourne, chaque etape s'allume a son tour, le fil se tire vers
      la suivante. Boucle infinie assumee : un cycle est perpetuel.
   Aucune dependance, SVG plus CSS, tout s'arrete sous reduced-motion.
   ========================================================================= */

.hero {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  /* Meme calcul que les cinq autres pages : 68px d'en-tete, 84px d'amorce
     pour la section suivante, le reste pour le hero. Le debord est donc
     identique partout, et c'est une soustraction, pas un reglage a l'oeil. */
  min-height: calc(100svh - 68px - 84px);
  display: grid;
  align-content: center;
}

.hero__grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(2rem, 3.5vw, 3.2rem);
}

/* Le titre tient sur deux lignes : au-dela, c'est une erreur de corps. */
.hero .display { font-size: clamp(2.3rem, 3.85vw, 3.25rem); letter-spacing: -.038em; }
.hero .lead { max-width: 38ch; margin-top: 1.1rem; }
.hero__actions { margin-top: 1.9rem; align-items: center; }

/* La preuve n'est plus une colonne : elle soutient le bouton. */
.hero__trust {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .3rem .8rem;
  margin: 1.7rem 0 0;
  font-size: .92rem; line-height: 1.45; color: var(--ink-3);
  max-width: 44ch;
}
.hero__trust b {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); line-height: 1;
}
.hero__trust b span { font-size: .6em; font-weight: 600; color: var(--ink-3); }
.hero__trust a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; }

/* L'affirmation qui suit doit depasser du bas de l'ecran, pas une bande vide :
   on rapproche son premier mot du bord du hero. */
.hero + .sec { padding-top: 2.75rem; }
@supports not (height: 100svh) {
  .hero { min-height: calc(100vh - 68px - 84px); }
}

/* Ecran large mais court (portable 13 pouces) : on resserre, sinon
   l'affirmation suivante ne depasse plus et l'appel au geste tombe. */
@media (min-width: 901px) and (max-height: 820px) {
  /* On resserre le contenu, mais la hauteur reste celle du calcul :
     sinon l'amorce redevient un reglage a l'oeil. */
  .hero { padding-block: 1.1rem; }
  .hero .display { font-size: clamp(2.05rem, 3.3vw, 2.8rem); }
  .hero .lead { font-size: 1.08rem; margin-top: .9rem; }
  .hero__actions { margin-top: 1.4rem; }
  .hero__trust { margin-top: 1.2rem; }
  .hero__ring { max-width: 350px; }
  .hero + .sec { padding-top: 2.25rem; }
}

/* ---------- Le cycle en mouvement ---------- */

.hero__ring { position: relative; width: 100%; max-width: 430px; aspect-ratio: 1; justify-self: end; }
.ring { display: block; width: 100%; height: 100%; overflow: visible; }

.ring__track { fill: none; stroke: var(--line-2); stroke-width: 1.1; }
.ring__arc {
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 60 405;
  animation: ringArc 14s linear infinite;
}
.ring__seed { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.1; }
.ring__live { fill: var(--accent); opacity: 0; animation: ringLive 14s var(--ease) infinite; }
.ring__halo { fill: var(--accent); opacity: 0; animation: ringHalo 14s var(--ease) infinite; }
.ring__live, .ring__halo { animation-delay: calc(var(--i) * 2s); }

@keyframes ringArc  { to { stroke-dashoffset: -465; } }
@keyframes ringLive { 0%, .5% { opacity: 0 } 3% { opacity: 1 } 14.28% { opacity: 1 } 16.5%, 100% { opacity: 0 } }
@keyframes ringHalo { 0%, .5% { opacity: 0 } 4% { opacity: .16 } 14.28% { opacity: .1 } 17%, 100% { opacity: 0 } }

/* Le centre : le nom de l'etape en cours. Les sept noms sont dans le HTML,
   lisibles par un robot comme par un lecteur d'ecran ; seul l'affichage
   tourne. On ne fabrique jamais du texte en JavaScript. */
.ring__center {
  position: absolute; inset: 22%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .55rem;
}
.ring__caption, .ring__foot {
  font-size: .73rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.ring__foot { color: var(--accent-ink); }
.ring__names {
  position: relative; display: block; width: 100%;
  height: 2.1rem;
}
.ring__names span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700;
  letter-spacing: -.022em; color: var(--ink);
  opacity: 0;
  animation: ringName 14s var(--ease) infinite;
  animation-delay: calc(var(--i) * 2s);
}
.ring__names span:first-child { opacity: 1; }

@keyframes ringName {
  0%, .5%   { opacity: 0; transform: translateY(7px) }
  3.5%      { opacity: 1; transform: none }
  12.5%     { opacity: 1; transform: none }
  15.5%     { opacity: 0; transform: translateY(-7px) }
  100%      { opacity: 0; transform: translateY(-7px) }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: clamp(2.5rem, 7vw, 4rem) clamp(2.5rem, 7vw, 4rem); }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid { gap: 1.5rem; }
  .hero__ring { justify-self: center; max-width: 272px; margin-top: 0; }
  .ring__names { height: 1.9rem; }
  .hero .lead { max-width: 46ch; }
}

@media (prefers-reduced-motion: reduce) {
  .ring__arc { stroke-dasharray: none; stroke: var(--line-2); animation: none; }
  .ring__live, .ring__halo, .ring__names span { animation: none; }
  .ring__live { opacity: 1; }
  .ring__halo { opacity: .1; }
  .ring__names span { opacity: 0; }
  .ring__names span:first-child { opacity: 1; transform: none; }
}

/* =========================================================================
   MISE EN PRODUCTION (2026-09-23) : ce qui manquait a la page d'apercu pour
   tenir comme vraie page d'accueil. Menu mobile, formulaire, pied de page,
   bandeau Espace Agent. Cette feuille ne sert QUE la page d'accueil : les
   autres pages restent sur styles.css, rien ne peut regresser ailleurs.
   ========================================================================= */

/* ---------- Navigation : le menu mobile qui manquait ---------- */

.top__burger {
  display: none;
  appearance: none; border: 1px solid var(--line-2); background: var(--paper);
  color: var(--ink); border-radius: 10px;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  font-size: 1.3rem; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.top__burger:hover { border-color: var(--ink-3); }
.top__nav a.is-active { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .top__burger { display: inline-flex; }
  .top__nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: .5rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem;
    box-shadow: 0 18px 30px -24px rgba(16, 20, 25, .35);
  }
  .top__nav.is-open { display: flex; }
  .top__nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .top__nav a:last-child { border-bottom: 0; }
  .top__nav .btn { margin-top: .9rem; justify-content: center; }
}

/* ---------- Le bandeau Espace Agent : la capture d'email, objectif n1 ---------- */

.magnet {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  background: var(--accent); color: #fff;
  border-radius: var(--r-surface);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.magnet h2 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15; letter-spacing: -.028em; margin: 0 0 .6rem; }
.magnet p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 56ch; font-size: .98rem; }
.magnet .btn--primary { background: #fff; color: var(--accent-ink); }
.magnet .btn--primary:hover { background: var(--accent-wash); }
@media (max-width: 760px) { .magnet { grid-template-columns: 1fr; } }

/* ---------- Le formulaire ---------- */

.form { display: grid; gap: 1.1rem; max-width: 720px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form__group { display: flex; flex-direction: column; gap: .4rem; }
.form__label { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.form__input, .form__select, .form__textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: .78rem .95rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form__textarea { min-height: 130px; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.form__note { font-size: .86rem; color: var(--ink-3); margin: 0; max-width: 60ch; }
.form__status { font-size: .93rem; margin: 0; }
.form__status--error { color: #b42318; }
.form .btn { justify-self: start; }

/* ---------- Le pied de page ---------- */

.foot { background: var(--deep); color: var(--on-deep-2); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.foot__brand p { margin: 1rem 0 0; font-size: .93rem; max-width: 34ch; }
.foot h3 { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep); margin: 0 0 1rem; }
.foot__col { display: flex; flex-direction: column; gap: .6rem; }
.foot a { color: var(--on-deep-2); text-decoration: none; font-size: .93rem; transition: color .18s var(--ease); }
.foot a:hover { color: #fff; }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
}
.foot__bottom p { margin: 0; }
@media (max-width: 760px) { .foot__in { grid-template-columns: 1fr; gap: 2.25rem; } }

/* =========================================================================
   ITERATION 4 (retours Stephane, 2026-09-23) : le lien d'evitement visible,
   le bouton d'en-tete illisible, le lien "Voir le detail" moche, et surtout
   le noir des appels a l'action qui n'est pas la couleur d'Oversales.
   ========================================================================= */

/* ---------- 1. L'orange devient la couleur de l'action ----------
   D'ou il vient : l'etincelle orange du modele de vignette maison
   (scripts/vignette-template.html), seul orange existant dans l'univers
   Oversales. Il est fonce ici a #cf4a08 pour tenir 4,53 contre 1 avec du
   blanc, soit le meme niveau de lisibilite que le bleu de marque.
   Le partage est net : le BLEU dit la marque (liens, reperes, structure),
   l'ORANGE dit "cliquez ici". Deux roles, jamais melanges. */

:root {
  --action:     #cf4a08;
  --action-ink: #a8380a;
  --action-wash:#fdf1eb;
}

.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-ink); box-shadow: 0 10px 26px -12px rgba(207, 74, 8, .65); }
.btn:focus-visible { outline-color: var(--action); }

/* Sur le bandeau bleu de l'Espace Agent, l'orange reste l'action : c'est
   l'element le plus saillant de la page, et c'est voulu (objectif n1). */
.magnet .btn--primary { background: var(--action); color: #fff; }
.magnet .btn--primary:hover { background: var(--action-ink); }

/* ---------- 2. Le bouton de l'en-tete etait illisible ----------
   .top__nav a imposait sa couleur de texte au bouton, plus specifique que
   .btn. Le libelle s'affichait en gris fonce sur fond fonce. */
.top__nav a.btn--primary { color: #fff; }
.top__nav a.btn--primary:hover { color: #fff; }

/* ---------- 3. Le lien d'evitement : utile au clavier, invisible sinon ----------
   Il sert aux personnes qui naviguent sans souris : la premiere tabulation
   saute la navigation et va au contenu. Il doit rester dans la page, mais
   ne se montrer qu'au moment ou il recoit le focus. */
.skip-link {
  position: absolute; left: .75rem; top: .75rem; z-index: 100;
  transform: translateY(-250%);
  background: var(--ink); color: #fff;
  padding: .7rem 1.15rem; border-radius: 10px;
  font-size: .92rem; font-weight: 600; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; outline: 2px solid var(--action); outline-offset: 3px; }

/* ---------- 4. La ligne de preuve du hero ----------
   Le lien souligne faisait tache. Il reprend la fleche utilisee partout
   ailleurs sur la page, et la ligne se lit d'un bloc. */
.hero__trust { display: block; }
.hero__trust b { display: inline; }
.hero__trust > span { display: block; margin-top: .3rem; }
.hero__trust .link-arrow { font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--accent); }
.hero__trust .link-arrow:hover { border-bottom-color: currentColor; }

/* Meme passe de finition que styles.css : police de titre, chiffres alignes,
   veuves, grain. Voir le commentaire detaille dans styles.css. */

:root { --titre: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; }

h1, h2, h3, .display, .h2, .h3, .claim,
.hero__trust b, .fig__n, .stage__name, .step__name, .guide__name,
.ring__names span, .magnet h2 {
  font-family: var(--titre);
  font-optical-sizing: auto;
}

.fig__n, .hero__trust b, .shift__nums, .step__n, .stage__dot {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

p, li, .lead, .body { text-wrap: pretty; }

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- La preuve : la note de methode et les verbatims ----------
   Le badge de note est BLEU : c'est de la structure, pas un appel a cliquer.
   Les cartes sont a double bordure (coque exterieure teintee, coeur blanc
   avec un liseré interieur) pour avoir de l'epaisseur sans ombre lourde.
   Rien n'anime autre chose que transform et opacity.                     */

.voix__titre { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: var(--gap-s); }

.voix { margin-top: 2rem; display: grid; gap: 1rem; }

/* La coque : c'est elle qui porte la teinte et la bordure fine */
.voix__lead,
.voix__q {
  margin: 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: calc(var(--r-surface) + 6px);
  padding: 6px;
}

/* Le coeur : blanc, liseré interieur, rayon concentrique */
.voix__lead blockquote,
.voix__q blockquote {
  margin: 0;
  background: #fff;
  border-radius: var(--r-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,20,25,.04);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
}
.voix__lead blockquote p,
.voix__q blockquote p { margin: 0; color: var(--ink); text-wrap: pretty; }

.voix__lead blockquote p {
  font-family: var(--titre);
  font-size: clamp(1.12rem, 2.1vw, 1.5rem);
  line-height: 1.38;
  letter-spacing: -.012em;
}
.voix__q blockquote p { font-size: .98rem; line-height: 1.55; color: var(--ink-2); }

.voix__lead figcaption { padding: .85rem 6px .25rem; font-size: .82rem; color: var(--ink-3); }

/* Le badge de note, pose au-dessus du coeur */
.voix__note {
  display: inline-flex; align-items: baseline; gap: .1em;
  padding: .3rem .7rem .32rem; margin: .35rem 0 .6rem .4rem;
  border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.voix__note b { font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; }
.voix__note span { font-size: .76rem; font-weight: 600; opacity: .8; }
.voix__note--s { margin: .2rem 0 .45rem .35rem; padding: .22rem .6rem .24rem; }
.voix__note--s b { font-size: .98rem; }

.voix + h3, .voix + .h2 { margin-top: 2.8rem; }

.voix__q { display: flex; flex-direction: column; }
.voix__q blockquote { flex: 1; }

.voix__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }

/* Le poids : la carte s'installe au lieu d'apparaitre */
html.js .voix__lead[data-rise],
html.js .voix__q[data-rise] {
  transform: translateY(22px) scale(.985);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: var(--d, 0ms);
}
html.js .voix__lead[data-rise].is-in,
html.js .voix__q[data-rise].is-in { transform: none; }

@media (max-width: 640px) {
  .voix__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .voix__lead[data-rise], html.js .voix__q[data-rise] { transform: none; }
}