/* =============================================================================
   ArtiFacile.FR — site vitrine
   Feuille de style unique (cf. cahier des charges § 2 : un seul CSS, un seul JS).

   Deux règles de marque tiennent tout le fichier :
   1. ZÉRO BLEU. Tout le marché (Tolteck, Obat, Batappli, EBP…) est bleu ; l'écart
      visuel est le seul actif gratuit dont on dispose. Encre + vert niveau, rien d'autre.
   2. Pas de dégradé, pas de gros arrondi hors de la pilule du logo. Le niveau à bulle
      est la seule forme ronde de la page — c'est ce qui le rend lisible en un coup d'œil.
   ============================================================================= */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --encre:        #171A21;   /* textes, fiole du logo, fonds sombres */
  --vert:         #A6D80B;   /* bulle, accents — JAMAIS pour du texte sous 18 px */
  --vert-profond: #5c7a06;   /* petits textes accentués, liens */
  --fond:         #f6f5f2;
  --blanc:        #ffffff;

  --gris-texte:  #4e535b;    /* corps de texte secondaire, contraste ≥ 7:1 sur --fond */
  --gris-trait:  #dedbd4;
  --gris-repere: #b4b8be;    /* repères du niveau tant que ça travaille */
  --gris-fonce:  #2a2e36;    /* cartes sur fond encre */

  --large:  1180px;
  --gouttiere: clamp(1.25rem, 5vw, 3rem);

  --nav-h: 64px;
}

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

html {
  scroll-behavior: smooth;
  /* Les ancres ne doivent pas passer sous la barre fixe. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;         /* 17 px de base, 18 px dès la tablette */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

/* Titres flush left, graisse 800, interlettrage resserré. */
h1, h2, h3 {
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 6vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); letter-spacing: -0.015em; }
p  { margin: 0 0 1.1em; }

a { color: var(--vert-profond); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--vert-profond);
  outline-offset: 3px;
}

.conteneur {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(4rem, 11vw, 8rem); }

.lien-evitement {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--blanc);
  padding: 0.75rem 1rem; z-index: 100;
}
.lien-evitement:focus { left: 0; top: 0; }

/* ---------- Le niveau (logo) -------------------------------------------- */
/* L'état par défaut est TOUJOURS l'état final : bulle centrée, repères verts.
   Les animations ne font que retarder cet état — sans JS, sans animation, ou en
   « mouvement réduit », le signe reste juste. */
.niveau { display: block; overflow: visible; }
.niveau__fiole  { fill: none; stroke: var(--encre); stroke-width: 7; }
.niveau__repere { stroke: var(--vert); stroke-width: 4; }
.niveau__bulle  { fill: var(--vert); transform-box: view-box; }

.niveau--petit  { width: 46px; }
/* Taille et marges resserrées à dessein : les deux CTA du hero doivent rester
   au-dessus de la ligne de flottaison sur un portable 1280 x 800. */
.niveau--hero   { width: min(220px, 58%); margin: 1.25rem 0 1.5rem; }
.niveau--moment { width: 58px; flex: none; }
.niveau--cta    { width: 132px; margin: 0 auto 2rem; }

/* Hero : la bulle part de la gauche, dépasse le centre, se pose (~3,5 s, une fois). */
.niveau--hero.est-anime .niveau__bulle {
  animation: bulle-se-pose 3.5s cubic-bezier(.34, 1.4, .5, 1) both;
}
.niveau--hero.est-anime .niveau__repere {
  animation: repere-passe-au-vert 3.5s linear both;
}
@keyframes bulle-se-pose {
  from { transform: translateX(-46px); }
  to   { transform: translateX(0); }
}
@keyframes repere-passe-au-vert {
  0%, 68%   { stroke: var(--gris-repere); }
  82%, 100% { stroke: var(--vert); }
}

/* ---------- Logo composé ------------------------------------------------- */
.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--encre);
}
.logo__mot {
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Extension EN CAPITALES et en couleur d'accent : le .com est déposé sans rien
   derrière, c'est le .FR qui doit se lire. Un seul point de réglage. */
.logo__ext { color: var(--vert-profond); }

/* ---------- Boutons ------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;                 /* cible tactile largement ≥ 44 px */
  padding: 0.75rem 1.6rem;
  border: 2px solid var(--encre);
  border-radius: 3px;               /* pas d'arrondi marqué hors logo */
  font: inherit; font-weight: 800; font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.bouton--primaire {
  background: var(--vert); border-color: var(--encre); color: var(--encre);
}
.bouton--primaire:hover { background: var(--encre); color: var(--vert); }
.bouton--secondaire {
  background: transparent; color: var(--encre);
}
.bouton--secondaire:hover { background: var(--encre); color: var(--blanc); }
.bouton:active { transform: translateY(1px); }
.bouton--compact { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.95rem; }
.bouton--large   { width: 100%; }

/* ---------- Barre de navigation ----------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(246, 245, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.est-decollee { border-bottom-color: var(--gris-trait); }
.nav__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__liens { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.nav__liens > a:not(.bouton) {
  color: var(--encre); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  border-bottom: 2px solid transparent; padding-block: 2px;
}
.nav__liens > a:not(.bouton):hover { border-bottom-color: var(--vert); }

/* Sous 560 px, le lien « Le portail client » cède la place au bouton. */
@media (max-width: 559px) {
  .nav__liens > a:not(.bouton) { display: none; }
}

/* ---------- S1 — Hero ---------------------------------------------------- */
.hero { padding-block: calc(var(--nav-h) + clamp(2rem, 6vw, 3.5rem)) clamp(3rem, 8vw, 6rem); }
.hero__grille { display: grid; gap: clamp(2rem, 6vw, 4rem); }

.surtitre {
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris-texte); margin-bottom: 1.4rem;
}
.surtitre__ext { color: var(--vert-profond); }

.hero__sous-titre {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--gris-texte);
  max-width: 34ch;
  margin-top: 1.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Photos : noir et blanc uniquement.
   `aspect-ratio` + `object-fit` : la vraie photo remplacera le placeholder sans
   rien casser, quel que soit son cadrage d'origine. */
.photo { filter: grayscale(1) contrast(1.05); width: 100%; }
.hero__photo, .fondateur__photo { margin: 0; position: relative; }
.hero__photo .photo { aspect-ratio: 4 / 5; object-fit: cover; }

/* Le portrait du fondateur est une PHOTO DE CHANTIER en paysage (~16/9), pas un
   portrait studio : cadre 4/3 et point d'ancrage remonté sur le buste et le
   visage. Avec un cadre portrait, `object-fit: cover` rognait les deux tiers de
   la scène et il ne restait qu'un torse. */
.fondateur__photo .photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 55% 32%;
}
/* L'étiquette ne s'affiche QUE lorsque la vraie photo manque et que `onerror`
   a fait retomber l'image sur le dessin d'attente. Le jour où le fichier est
   déposé, l'étiquette disparaît d'elle-même — rien à penser à retirer. */
.photo__note { display: none; }
.photo--attente .photo__note {
  display: block;
  position: absolute; left: 0; bottom: 0;
  background: var(--encre); color: var(--blanc);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}

/* ---------- S2 — La journée --------------------------------------------- */
.journee { background: var(--blanc); border-block: 1px solid var(--gris-trait); }
.journee__fil { list-style: none; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; gap: 2.5rem; }

.moment {
  border-top: 2px solid var(--gris-trait);
  padding-top: 1.75rem;
  transition: border-color .35s ease;
}
.moment.est-actif { border-top-color: var(--vert); }

.moment__heure { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.moment__label { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.moment__label strong { font-weight: 800; }
.moment__texte { max-width: 46ch; color: var(--gris-texte); }

/* Pilotage par le scroll : c'est site.js qui pose `est-pilotee`. Sans JS,
   les trois bulles restent centrées et vertes plutôt que bloquées à gauche. */
.journee__fil.est-pilotee .niveau--moment .niveau__bulle  { transform: translateX(-30px); }
.journee__fil.est-pilotee .niveau--moment .niveau__repere { stroke: var(--gris-repere); }
.journee__fil.est-pilotee .niveau--moment .niveau__bulle,
.journee__fil.est-pilotee .niveau--moment .niveau__repere {
  transition: transform .8s cubic-bezier(.34, 1.4, .5, 1), stroke .4s ease .35s;
}
.journee__fil.est-pilotee .moment.est-actif .niveau--moment .niveau__bulle  { transform: translateX(0); }
.journee__fil.est-pilotee .moment.est-actif .niveau--moment .niveau__repere { stroke: var(--vert); }

/* Keyhole : le fond est flouté, UN seul détail reste net.
   Rien de ce qui est montré n'est une capture réelle du back-office. */
.keyhole {
  position: relative; overflow: hidden;
  margin-top: 1.5rem;
  height: 190px;
  background: var(--fond);
  border: 1px solid var(--gris-trait);
}
.keyhole__fond {
  position: absolute; inset: 0;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  filter: blur(7px);
  opacity: 0.85;
}
.ligne { display: block; height: 12px; background: var(--gris-trait); }
.ligne--titre { height: 20px; width: 55%; background: var(--gris-repere); }
.l40 { width: 40%; } .l42 { width: 42%; } .l45 { width: 45%; } .l50 { width: 50%; }
.l55 { width: 55%; } .l60 { width: 60%; } .l65 { width: 65%; } .l66 { width: 66%; }
.l70 { width: 70%; } .l75 { width: 75%; } .l78 { width: 78%; } .l80 { width: 80%; }
.l85 { width: 85%; } .l88 { width: 88%; } .l90 { width: 90%; }

.keyhole__net {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--encre); color: var(--vert);
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em;
  padding: 0.7rem 1.4rem;
  white-space: nowrap;
}

/* ---------- S3 — Les trois piliers -------------------------------------- */
.piliers__grille { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.pilier {
  background: var(--blanc);
  border: 1px solid var(--gris-trait);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pilier__marque { display: block; width: 48px; height: 6px; background: var(--vert); margin-bottom: 1.25rem; }
.pilier p { color: var(--gris-texte); margin-bottom: 0; }

/* ---------- S4 — Le portail client -------------------------------------- */
.portail { background: var(--blanc); border-block: 1px solid var(--gris-trait); }
.portail__grille { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
.portail__texte p { color: var(--gris-texte); max-width: 46ch; }
/* Sélecteur descendant volontaire : `.portail__texte p` porte une spécificité
   supérieure à une simple classe. Sans ce préfixe, la chute repasserait en gris. */
.portail__texte .portail__chute {
  color: var(--encre); font-weight: 600; font-size: 1.15rem;
  border-left: 5px solid var(--vert); padding-left: 1rem;
}

/* Mockup reconstruit en HTML/CSS — c'est la vue CÔTÉ CLIENT, montrable en entier. */
.mockup { border: 2px solid var(--encre); background: var(--blanc); }
.mockup__barre {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--encre);
}
.mockup__pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-repere); }
.mockup__url {
  margin-left: 0.6rem; color: #a8adb5; font-size: 0.75rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mockup__ecran { padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--fond); }
.mockup__bonjour { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.15em; }
.mockup__chantier { color: var(--gris-texte); font-size: 0.9rem; margin-bottom: 1.4rem; }

.mockup__carte {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  background: var(--blanc);
  border: 1px solid var(--gris-trait);
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}
.mockup__ligne-titre { font-weight: 600; font-size: 0.95rem; }
.mockup__montant { font-weight: 800; font-size: 1.05rem; text-align: right; }
.badge {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  background: var(--gris-trait); color: var(--encre);
}
.badge--vert { background: var(--vert); }

.mockup__sous-titre {
  margin: 1.4rem 0 0.6rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris-texte);
}
.mockup__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.mockup__photo {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #cfccc5 0 8px, #dedbd4 8px 16px);
}
.mockup__rdv {
  margin-top: 1.4rem;
  border-left: 5px solid var(--vert);
  background: var(--blanc);
  padding: 0.85rem 1rem;
  display: grid; gap: 0.15rem;
}
.mockup__rdv-label {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gris-texte);
}
.mockup__rdv-date { font-weight: 800; font-size: 1.05rem; }

/* ---------- S5 — Avant / après ------------------------------------------ */
.onglets { display: none; gap: 0.5rem; margin: 2rem 0 1.5rem; }
.onglets.est-visible { display: flex; }
.onglet {
  flex: 1; min-height: 48px;
  border: 2px solid var(--encre); background: transparent; color: var(--encre);
  font: inherit; font-weight: 800; font-size: 0.95rem;
  padding: 0.5rem 0.75rem; cursor: pointer;
}
.onglet--actif { background: var(--encre); color: var(--blanc); }

.comparatif__grille { display: grid; gap: 1.5rem; margin-top: clamp(1.5rem, 4vw, 3rem); }
.colonne { padding: clamp(1.5rem, 3vw, 2.25rem); }
.colonne h3 { margin-bottom: 1.25rem; }
.colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.colonne li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.75rem; align-items: baseline; }
.colonne__heure { font-weight: 800; font-variant-numeric: tabular-nums; }

.colonne--avant {
  background: #eceae5; color: var(--gris-texte);
  border: 1px solid var(--gris-trait);
}
.colonne--avant h3 { color: var(--gris-texte); }
.colonne--avec {
  background: var(--blanc);
  border: 1px solid var(--gris-trait);
  border-left: 6px solid var(--vert);
}

/* ---------- S6 — Le fondateur ------------------------------------------- */
.fondateur { background: var(--blanc); border-block: 1px solid var(--gris-trait); }
.fondateur__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* Entre 768 et 1100 px la grille est encore sur une seule colonne : sans plafond,
   la photo s'étirerait sur toute la largeur du conteneur (jusqu'à ~1080 px) alors
   que le fichier recadré en 4/3 plafonne à 745 px de large — elle deviendrait
   molle. Le plafond la garde nette ET évite une photo pleine largeur qui écrase
   le texte sur tablette. */
@media (max-width: 1099px) {
  .fondateur__photo { max-width: 640px; }
  .hero__photo      { max-width: 520px; }
}
.fondateur__texte p { color: var(--gris-texte); max-width: 48ch; }
.signature { margin-top: 2rem; display: grid; gap: 0.15rem; }
.signature__prenom {
  font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--encre);
}
.signature__role {
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--vert-profond);
}

/* ---------- S7 — L'ultime indicateur ------------------------------------ */
.indicateur { background: var(--encre); color: var(--blanc); }
.indicateur__grille { display: grid; gap: clamp(1rem, 4vw, 3.5rem); align-items: center; }
.indicateur h2 { color: var(--blanc); }
/* Le texte courant d'abord, les exceptions ensuite ET préfixées : `.indicateur p`
   est plus spécifique qu'une classe seule, il repeindrait le chiffre en gris. */
.indicateur p { color: #c9ccd1; max-width: 46ch; }
.indicateur .indicateur__chiffre {
  font-size: clamp(11rem, 30vw, 24rem);
  font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  color: var(--vert);
  margin: 0;
}
.indicateur .indicateur__legende { font-size: 1.3rem; color: var(--blanc); max-width: 46ch; }
.indicateur .indicateur__legende strong { color: var(--vert); }

/* ---------- S8 — Formulaire --------------------------------------------- */
.cta { background: var(--fond); }
.cta__inner { max-width: 620px; text-align: center; }
.cta__inner h2 { text-align: left; }
.cta__accroche { text-align: left; font-size: 1.2rem; color: var(--gris-texte); }

/* La bulle attend d'être centrée : elle se pose quand le lead est enregistré. */
.niveau--cta.est-en-attente .niveau__bulle {
  transform: translateX(-40px);
  transition: transform .9s cubic-bezier(.34, 1.4, .5, 1);
}
.niveau--cta.est-en-attente .niveau__repere {
  stroke: var(--gris-repere); transition: stroke .4s ease .5s;
}
.niveau--cta.est-posee .niveau__bulle  { transform: translateX(0); }
.niveau--cta.est-posee .niveau__repere { stroke: var(--vert); }

.formulaire { text-align: left; display: grid; gap: 1.25rem; }
.champ { display: grid; gap: 0.4rem; }
.champ label { font-weight: 600; font-size: 0.95rem; }
.champ input[type="email"], .champ input[type="text"], .champ input[type="tel"], .champ select {
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--encre);
  border-radius: 3px;
  background: var(--blanc);
  font: inherit; color: var(--encre);
}
.champ input:disabled, .champ select:disabled { opacity: 0.55; }
.champ__optionnel { font-weight: 400; color: #565B52; font-size: 0.85rem; }
.champ--erreur input, .champ--erreur select { border-color: #b3261e; }

.champ--consentement {
  grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem;
}
.champ--consentement input {
  width: 24px; height: 24px; margin-top: 2px; accent-color: var(--vert-profond);
}
.champ--consentement label { font-weight: 400; font-size: 0.95rem; color: var(--gris-texte); }

/* Honeypot : hors écran, jamais `display:none` (certains robots l'ignorent alors). */
.pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.formulaire__message { margin: 0; font-weight: 600; min-height: 1.5em; }
.formulaire__message.est-succes { color: var(--vert-profond); }
.formulaire__message.est-erreur { color: #b3261e; }

/* ---------- Pied de page ------------------------------------------------- */
.pied { background: var(--encre); color: var(--blanc); padding-block: 3rem 5rem; }
.pied__inner { display: grid; gap: 1.5rem; align-items: center; }
.logo--pied { color: var(--blanc); }
.logo--pied .niveau__fiole { stroke: var(--blanc); }
.logo--pied .logo__ext { color: var(--vert); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied__liens a { color: var(--blanc); text-decoration: none; border-bottom: 2px solid var(--vert); }
.pied__copyright { margin: 0; color: #9aa0a8; font-size: 0.9rem; }

/* ---------- CTA collant (mobile) ---------------------------------------- */
.cta-collant {
  position: fixed; z-index: 40;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  min-height: 54px;
  display: none; align-items: center; justify-content: center;
  background: var(--vert); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 3px;
  font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 0 var(--encre);
  transform: translateY(140%);
  transition: transform .25s ease;
}
.cta-collant.est-visible { transform: translateY(0); }

/* ---------- Pages secondaires (mentions légales) ------------------------ */
.page-texte { padding-block: calc(var(--nav-h) + 3rem) 5rem; }
.page-texte .conteneur { max-width: 760px; }
.page-texte h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 2.5rem; }
.page-texte p, .page-texte li { color: var(--gris-texte); }
.page-texte ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; margin-bottom: 1.5rem; }
.page-texte dl { display: grid; gap: 0.35rem 1rem; margin: 0 0 1.5rem; }
.page-texte dt { font-weight: 800; }
.page-texte dd { margin: 0 0 0.75rem; color: var(--gris-texte); }

/* Bandeau « données fictives ». En encre plutôt qu'en rouge : le rouge reste
   réservé aux vraies alertes, et il ne s'agit pas d'une erreur mais d'un état
   provisoire assumé. À supprimer en même temps que les valeurs de démonstration. */
.page-texte .avis-demo {
  background: var(--encre); color: var(--blanc);
  border-left: 6px solid var(--vert);
  padding: 0.9rem 1.1rem;
  margin: 2rem 0;
  font-size: 0.95rem;
}

/* =============================================================================
   Tablette — 768 px
   ============================================================================= */
@media (min-width: 768px) {
  body { font-size: 1.125rem; }

  .journee__fil { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .piliers__grille { grid-template-columns: repeat(3, 1fr); }
  .comparatif__grille { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Au-delà de 768 px on montre les deux colonnes : plus d'onglets. */
  .onglets, .onglets.est-visible { display: none; }
  .colonne[hidden] { display: block; }

  .indicateur__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .cta-collant { display: none !important; }
}

@media (max-width: 767px) {
  .cta-collant { display: flex; }
  /* Le CTA collant ne doit pas masquer la fin du formulaire ni le pied. */
  .pied { padding-bottom: 7rem; }
}

/* =============================================================================
   Desktop — 1100 px
   ============================================================================= */
@media (min-width: 1100px) {
  :root { --nav-h: 76px; }

  .hero__grille    { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
  .portail__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  /* Colonnes presque égales : une photo paysage dans une colonne étroite tombait
     à 200 px de haut et ne pesait plus rien face au bloc de texte. */
  .fondateur__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

  .journee__fil { gap: 2.5rem; }
  .piliers__grille { gap: 2rem; }
  .keyhole { height: 210px; }
}

/* =============================================================================
   Mouvement réduit — on coupe TOUT, l'état final reste juste
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* La bulle reste au centre et les repères verts : rien ne bouge, tout est d'aplomb. */
  .journee__fil.est-pilotee .niveau--moment .niveau__bulle  { transform: translateX(0); }
  .journee__fil.est-pilotee .niveau--moment .niveau__repere { stroke: var(--vert); }
  .niveau--cta.est-en-attente .niveau__bulle  { transform: translateX(0); }
  .niveau--cta.est-en-attente .niveau__repere { stroke: var(--vert); }
  .cta-collant { transform: translateY(0); }
}

/* ═══ Le fil (refonte « compagnon », 2026-08-29) ═══════════════════════════
   La section signature : quatre maillons, chacun avec « fais bien » (texte
   normal) et « il suit » (l'alerte, marquée d'une puce verte). Charte
   inchangée : encre, vert niveau, zéro bleu, zéro dégradé. */
.fil { background: #fff; }
.fil__intro {
  max-width: 46rem;
  margin: 1rem auto 2.5rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.fil__etapes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: etape;
}
.etape {
  position: relative;
  background: #F6F7F5;
  border: 1px solid #E4E7E2;
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
}
/* La flèche du fil, entre les maillons (masquée sur le dernier). */
.etape:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -0.85rem; top: 1.35rem;
  font-weight: 800;
  color: #A6D80B;
  z-index: 1;
}
.etape__numero {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  background: #171A21; color: #fff;
  font-weight: 800; font-size: 0.9375rem;
  margin-bottom: 0.75rem;
}
.etape h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.etape__fais { margin: 0 0 0.875rem; font-size: 0.9375rem; line-height: 1.55; }
.etape__suit {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px dashed #D6DAD2;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.etape__puce {
  display: inline-block;
  width: 0.55rem; height: 0.55rem;
  border-radius: 999px;
  background: #A6D80B;
  margin-right: 0.4rem;
}
.fil__chute {
  max-width: 42rem;
  margin: 2.25rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: #565B52;
}
@media (max-width: 900px) {
  .fil__etapes { grid-template-columns: 1fr 1fr; }
  .etape:nth-child(2)::after { content: none; }
}
@media (max-width: 560px) {
  .fil__etapes { grid-template-columns: 1fr; }
  .etape::after { content: none !important; }
}