/* =============================================================================
   ArtiFacile.FR — feuille unique du site vitrine (refonte du 2026-09-25)
   « Tu gères ton métier, je m'occupe du reste. »

   Charte, décisions actées (ne pas rediscuter sans l'artisan) :
   - encre #171A21 + vert niveau #A6D80B, ZÉRO BLEU (tout le marché est bleu) ;
   - aucun dégradé, pas d'arrondi marqué hors de la pilule du logo ;
   - le vert niveau ne porte jamais de texte sous 18 px sur fond clair
     (contraste ≈ 1,7:1) : sur fond clair, les petits accents sont en vert
     profond ; le vert niveau se réserve aux fonds encre, où il vaut ≈ 11:1 ;
   - le logo « Le Niveau » a pour état par défaut son état FINAL.
   Mobile d'abord : paliers à 768 px et 1100 px, gouttière de 16 px minimum.
   ============================================================================= */

/* Police auto-hébergée (2026-09-25) : plus aucun appel à Google Fonts — le
   navigateur du visiteur ne contacte plus les serveurs de Google, donc son
   adresse IP ne part pas hors de l'éditeur (même décision que la v1.60.0 de
   l'application). Un seul fichier variable, graisse 100-900 et largeur
   62-125 % : les titres élargis viennent de là. Licence SIL OFL 1.1
   (assets/fonts/archivo-OFL.txt). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
}

:root {
  --encre:        #171A21;
  --encre-2:      #20242D;   /* cartes sur fond encre */
  --encre-3:      #2C313B;   /* traits sur fond encre */
  --vert:         #A6D80B;
  --vert-profond: #4F6A05;   /* petits textes accentués sur fond clair (≥ 6:1) */
  --fond:         #F6F5F2;
  --fond-2:       #EDEBE5;
  --blanc:        #FFFFFF;
  --texte:        #171A21;
  --texte-doux:   #4B505A;   /* ≥ 7:1 sur --fond */
  --texte-clair:  #C9CCD2;   /* texte secondaire sur fond encre (≥ 9:1) */
  --trait:        #DEDBD4;
  --repere-gris:  #9AA0A8;   /* repères du niveau tant que la bulle travaille */

  --large: 1180px;
  --gouttiere: clamp(16px, 5vw, 48px);
  --nav-h: 64px;
  --rayon: 3px;
  --section: clamp(64px, 10vw, 128px);

  --police: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1.0625rem;       /* 17 px : lu sur un téléphone, souvent dehors */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert-profond); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }
::selection { background: var(--vert); color: var(--encre); }

.conteneur { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.evitement {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--vert); color: var(--encre); padding: 10px 16px; font-weight: 700; border-radius: var(--rayon);
}
.evitement:focus { top: 12px; }

/* ------------------------------------------------------------- Boutons --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border: 2px solid transparent; border-radius: var(--rayon);
  font: inherit; font-weight: 800; font-stretch: 108%; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton--vert { background: var(--vert); color: var(--encre); }
.bouton--vert:hover { background: var(--blanc); color: var(--encre); }
.bouton--contour-clair { border-color: rgba(255,255,255,.35); color: var(--blanc); }
.bouton--contour-clair:hover { border-color: var(--vert); color: var(--vert); }
.bouton--secondaire { border-color: var(--encre); color: var(--encre); background: transparent; }
.bouton--secondaire:hover { background: var(--encre); color: var(--blanc); }
.bouton--petit { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.bouton--large { width: 100%; }
.bouton[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------- Typographie --- */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: .8125rem; font-weight: 800; font-stretch: 118%;
  letter-spacing: .08em; text-transform: uppercase; color: var(--vert-profond);
}
.surtitre::before { content: ""; width: 22px; height: 4px; background: var(--vert); border-radius: 2px; }
.surtitre--clair { color: var(--vert); }
.titre-section { font-size: clamp(2rem, 5.2vw, 3.6rem); max-width: 18ch; margin-bottom: 22px; }
.titre-section--clair { color: var(--blanc); }
.chapo { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--texte-doux); max-width: 62ch; }
.chapo--clair { color: var(--texte-clair); }

.section { padding: var(--section) 0; }
.section--claire { background: var(--blanc); }
.section--encre { background: var(--encre); color: var(--blanc); }

/* ---------------------------------------------------------- Navigation --- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  background: var(--encre); color: var(--blanc);
  border-bottom: 1px solid var(--encre-3);
  padding-top: env(safe-area-inset-top);
}
.nav__rangee { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none; }
.marque:hover { color: var(--blanc); }
.marque__niveau { width: 46px; height: 23px; color: var(--blanc); flex: none; }
.marque__nom { font-weight: 900; font-stretch: 112%; font-size: 1.125rem; letter-spacing: -0.01em; white-space: nowrap; }
.marque__ext { color: var(--vert); }
.nav__liens { display: none; }
.nav .bouton--petit { padding: 0 14px; font-size: .875rem; }
@media (max-width: 380px) { .nav .bouton--petit { display: none; } }

/* ---------------------------------------------------------------- Hero --- */
.hero {
  background: var(--encre); color: var(--blanc);
  padding: calc(var(--nav-h) + 48px) 0 72px;
  position: relative; overflow: hidden;
}
.hero__grille { display: grid; gap: 48px; }
.hero__titre { font-size: clamp(2.6rem, 8.6vw, 5.4rem); font-weight: 900; line-height: 1.0; margin-bottom: 24px; }
.hero__titre-vert { display: block; color: var(--vert); }
.hero__chapo { font-size: clamp(1.125rem, 2vw, 1.35rem); color: var(--texte-clair); max-width: 36em; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero__actions .bouton { flex: 1 1 240px; }
.hero__garanties { display: grid; gap: 10px; color: var(--texte-clair); font-size: .9375rem; }
.hero__garanties li { display: flex; gap: 10px; align-items: baseline; }
.hero__garanties li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); transform: translateY(1px); }
.hero__visuel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }

/* Le téléphone : cadre encre, écran « verrouillé » en fond gris profond. */
.telephone {
  width: min(100%, 360px);
  border: 10px solid #0D0F13; border-radius: 44px;   /* le téléphone, pas un bouton : l'objet est rond */
  background: #0D0F13;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.telephone__ecran { border-radius: 34px; background: var(--encre-2); padding: 14px 14px 22px; min-height: 520px; }
.telephone__barre { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 700; color: var(--blanc); padding: 0 8px; }
.telephone__encoche { width: 88px; height: 22px; border-radius: 12px; background: #0D0F13; }
.telephone__heure { text-align: center; font-size: 3.4rem; font-weight: 300; font-stretch: 100%; margin: 18px 0 0; letter-spacing: -0.02em; }
.telephone__date { text-align: center; font-size: .8125rem; color: var(--texte-clair); margin: 0 0 22px; }
.notifs { display: grid; gap: 10px; }
.notif {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start;
  background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px;
  opacity: 1; transform: none;
}
.notif--estompee { opacity: .72; }
.notif__icone { width: 34px; height: 34px; border-radius: 9px; background: var(--encre); display: grid; place-items: center; }
.notif__icone svg { width: 26px; height: 13px; }
.notif__titre { font-size: .875rem; font-weight: 800; margin: 0 0 2px; line-height: 1.3; }
.notif__texte { font-size: .8125rem; color: var(--texte-clair); margin: 0; line-height: 1.35; }
.notif__quand { font-size: .6875rem; color: var(--repere-gris); white-space: nowrap; }
/* L'arrivée des messages : un par un, une seule fois (site.js pose la classe). */
.notifs.est-anime .notif { animation: notif-arrive .5s cubic-bezier(.2,.8,.3,1) both; }
.notifs.est-anime .notif:nth-child(1) { animation-delay: 1.6s; }
.notifs.est-anime .notif:nth-child(2) { animation-delay: 1.15s; }
.notifs.est-anime .notif:nth-child(3) { animation-delay: .7s; }
.notifs.est-anime .notif:nth-child(4) { animation-delay: .25s; }
@keyframes notif-arrive { from { opacity: 0; transform: translateY(-14px) scale(.97); } }

/* ------------------------------------------------------------ Le niveau --- */
.niveau__bulle { fill: var(--vert); }
.niveau__repere { stroke: var(--vert); }
.niveau--hero { width: 180px; height: 90px; }
/* Animation du hero : la bulle part de la gauche, dépasse, se pose ; les
   repères passent du gris au vert quand elle arrive. Sans la classe (pas de JS,
   mouvement réduit), rien ne bouge : l'état affiché est l'état final. */
.niveau--hero.est-anime .niveau__bulle { animation: bulle-se-pose 3.2s cubic-bezier(.34,1.4,.5,1) both; }
.niveau--hero.est-anime .niveau__repere { animation: repere-s-allume 3.2s ease both; }
@keyframes bulle-se-pose { 0% { transform: translateX(-38px); } 45% { transform: translateX(10px); } 100% { transform: translateX(0); } }
@keyframes repere-s-allume { 0%, 70% { stroke: var(--repere-gris); } 100% { stroke: var(--vert); } }

/* -------------------------------------------------------------- Preuves --- */
.preuves { background: var(--vert); color: var(--encre); padding: 36px 0 28px; }
.preuves__liste { display: grid; gap: 22px; margin-bottom: 18px; }
.preuve { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; }
.preuve__chiffre { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; font-stretch: 115%; margin: 0; white-space: nowrap; min-width: 4.4ch; }
.preuve__texte { margin: 0; font-weight: 600; line-height: 1.35; }
.preuves__source { font-size: .875rem; margin: 0; opacity: .85; }

/* ---------------------------------------------------------------- Rôles --- */
.duo { display: grid; gap: 14px; margin-top: 44px; counter-reset: duo; }
.duo__ligne {
  display: grid; gap: 0;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--blanc);
  overflow: hidden;
}
.duo__toi, .duo__moi { margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.duo__toi { font-weight: 800; font-size: 1.125rem; font-stretch: 106%; line-height: 1.3; }
.duo__moi { background: var(--encre); color: var(--blanc); }
.duo__qui {
  font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-doux);
}
.duo__moi .duo__qui { color: var(--vert); }

/* -------------------------------------------------------------- Services --- */
.cartes { display: grid; gap: 16px; margin-top: 40px; }
.carte {
  position: relative;
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 28px 24px 24px;
  border-top: 5px solid var(--encre);
  transition: border-color .2s ease, transform .2s ease;
}
.carte:hover { border-top-color: var(--vert); }
.carte__num { display: block; font-size: .8125rem; font-weight: 900; color: var(--vert-profond); letter-spacing: .08em; margin-bottom: 10px; }
.carte__titre { font-size: 1.375rem; margin-bottom: 12px; }
.carte p { color: var(--texte-doux); font-size: 1rem; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.etiquettes li {
  font-size: .8125rem; font-weight: 700;
  border: 1px solid var(--trait); background: var(--blanc);
  padding: 3px 10px; border-radius: var(--rayon);
}
.options {
  margin-top: 28px; padding: 28px 24px;
  background: var(--encre); color: var(--blanc); border-radius: var(--rayon);
}
.options__titre { font-size: 1.375rem; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.options__mot {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  background: var(--vert); color: var(--encre); padding: 4px 10px; border-radius: var(--rayon); font-stretch: 110%;
}
.options__liste { display: grid; gap: 14px; color: var(--texte-clair); }
.options__liste strong { color: var(--blanc); }
.options__liste li { padding-left: 22px; position: relative; }
.options__liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 4px; background: var(--vert); border-radius: 2px; }

/* -------------------------------------------------------------- Journée --- */
.journee__fil { display: grid; gap: 18px; margin-top: 44px; }
.moment {
  display: grid; gap: 14px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px 22px;
  transition: border-color .3s ease;
}
.moment__heure { font-size: 2.2rem; font-weight: 900; font-stretch: 118%; margin: 0; line-height: 1; }
.moment__titre { font-size: 1.25rem; margin-bottom: 8px; }
.moment__corps p { color: var(--texte-doux); }
.niveau--moment { width: 84px; height: 42px; }
/* Le fil piloté : les bulles attendent à gauche, et se centrent sur le moment
   qui traverse le regard. Sans observateur, `est-pilotee` n'est pas posée et
   toutes les bulles restent centrées. */
.journee__fil.est-pilotee .niveau--moment .niveau__bulle { transform: translateX(-30px); transition: transform .9s cubic-bezier(.34,1.4,.5,1); }
.journee__fil.est-pilotee .niveau--moment .niveau__repere { stroke: var(--repere-gris); transition: stroke .6s ease .4s; }
.journee__fil.est-pilotee .moment.est-actif { border-color: var(--encre); }
.journee__fil.est-pilotee .moment.est-actif .niveau__bulle { transform: none; }
.journee__fil.est-pilotee .moment.est-actif .niveau__repere { stroke: var(--vert); }

/* La serrure : un visuel flouté, un seul détail net. */
.serrure { margin-top: 16px; display: grid; gap: 7px; padding: 14px; background: var(--fond); border-radius: var(--rayon); }
.serrure__flou { display: block; height: 10px; border-radius: 5px; background: var(--fond-2); filter: blur(1.5px); width: 90%; }
.serrure__flou--court { width: 55%; }
.serrure__net {
  margin: 2px 0; justify-self: start;
  font-size: .9375rem; font-weight: 800;
  background: var(--encre); color: var(--blanc); padding: 7px 12px; border-radius: var(--rayon);
  border-left: 5px solid var(--vert);
}

/* ------------------------------------------------------------------ Fil --- */
.maillons { display: grid; gap: 0; margin-top: 44px; position: relative; }
.maillon { position: relative; padding: 0 0 26px 40px; }
.maillon::before {          /* la bulle du maillon */
  content: ""; position: absolute; left: 0; top: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vert); box-shadow: 0 0 0 6px rgba(166,216,11,.15);
}
.maillon::after {           /* le fil entre deux bulles */
  content: ""; position: absolute; left: 10px; top: 30px; bottom: 0;
  width: 2px; background: var(--encre-3);
}
.maillon:last-child::after { display: none; }
.maillon__nom { font-size: 1.5rem; font-weight: 900; font-stretch: 115%; margin: 0 0 4px; }
.maillon__rupture { color: var(--texte-clair); margin: 0; max-width: 30ch; }

/* --------------------------------------------------------------- Client --- */
.client__grille { display: grid; gap: 44px; align-items: center; }
.portail {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px;
  box-shadow: 0 24px 48px rgba(23,26,33,.12);
  max-width: 460px; width: 100%; justify-self: center; overflow: hidden;
}
.portail__entete { background: var(--encre); color: var(--blanc); padding: 18px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.portail__entreprise { font-weight: 900; font-stretch: 110%; }
.portail__qui { color: var(--texte-clair); font-size: .875rem; }
.portail__bloc { padding: 18px 20px; border-bottom: 1px solid var(--trait); }
.portail__bloc:last-child { border-bottom: 0; }
.portail__etiquette { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 10px; }
.portail__ligne { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: .9375rem; }
.portail__ligne--pale { color: var(--texte-doux); font-size: .875rem; }
.portail__paye { color: var(--vert-profond); font-weight: 800; }
.portail__boutons { display: grid; gap: 8px; margin-top: 14px; }
.portail__bouton {
  display: block; text-align: center; padding: 11px; border-radius: var(--rayon);
  border: 2px solid var(--encre); font-weight: 800; font-size: .9375rem;
}
.portail__bouton--oui { background: var(--vert); border-color: var(--vert); }

/* -------------------------------------------------------------- Soirées --- */
.onglets { display: none; gap: 6px; margin: 28px 0 0; padding: 5px; background: var(--fond-2); border-radius: var(--rayon); }
.onglets.est-visible { display: grid; grid-template-columns: 1fr 1fr; }
.onglet {
  min-height: 44px; border: 0; border-radius: var(--rayon); background: transparent;
  font: inherit; font-weight: 800; font-size: .9375rem; color: var(--texte-doux); cursor: pointer;
}
.onglet--actif { background: var(--encre); color: var(--blanc); }
.soirees__colonnes { display: grid; gap: 18px; margin-top: 28px; }
.soiree { border-radius: var(--rayon); padding: 26px 22px; }
.soiree--avant { background: var(--fond); color: var(--texte-doux); border: 1px solid var(--trait); }
.soiree--apres { background: var(--blanc); border: 3px solid var(--vert); }
.soiree__titre { font-size: 1.25rem; margin-bottom: 18px; }
.soiree--avant .soiree__titre { color: var(--texte-doux); }
.soiree__liste { display: grid; gap: 14px; }
.soiree__liste li { display: grid; grid-template-columns: 72px 1fr; gap: 12px; line-height: 1.45; }
.soiree__heure { font-weight: 900; font-stretch: 112%; color: var(--texte); }
.soiree--avant .soiree__heure { color: var(--texte-doux); }

/* ------------------------------------------------------------ Fondateur --- */
.fondateur__grille { display: grid; gap: 40px; align-items: center; }
.fondateur__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); background: var(--fond-2); }
.fondateur__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 32%; filter: grayscale(1) contrast(1.05); }
.citation { margin: 8px 0 0; padding: 0 0 0 22px; border-left: 5px solid var(--vert); font-size: 1.125rem; }
.citation p { color: var(--texte); }
.citation__auteur { font-size: .9375rem; font-weight: 800; color: var(--texte-doux); }

/* ---------------------------------------------------------- Indicateur --- */
.indicateur { background: var(--encre); color: var(--blanc); padding: var(--section) 0; }
.indicateur__grille { display: grid; gap: 12px; align-items: center; }
.indicateur__zero { font-size: clamp(9rem, 30vw, 17rem); font-weight: 900; font-stretch: 125%; line-height: .8; color: var(--vert); margin: 0; }
.indicateur__titre { font-size: clamp(1.8rem, 4.2vw, 3rem); margin-bottom: 18px; color: var(--blanc); }
.indicateur p { color: var(--texte-clair); max-width: 52ch; font-size: 1.125rem; }

/* ------------------------------------------------------------ Questions --- */
.questions__grille { display: grid; gap: 36px; }
.faq { display: grid; gap: 10px; }
.faq__item { background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative;
  font-weight: 800; font-size: 1.0625rem; line-height: 1.35; min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--encre); color: var(--vert); border-radius: 50%; font-weight: 900;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { padding: 0 20px 20px; margin: 0; color: var(--texte-doux); }

/* ------------------------------------------------------------ Rejoindre --- */
.rejoindre__grille { display: grid; gap: 40px; align-items: start; }
.niveau--cta { width: 140px; height: 70px; margin-top: 26px; }
/* La bulle du formulaire attend à gauche tant que le lead n'est pas enregistré
   (site.js pose `est-en-attente`), puis se pose au centre. Sans JS : centrée. */
.niveau--cta.est-en-attente .niveau__bulle { transform: translateX(-30px); }
.niveau--cta.est-en-attente .niveau__repere { stroke: var(--repere-gris); }
.niveau--cta .niveau__bulle { transition: transform 1.2s cubic-bezier(.34,1.4,.5,1); }
.niveau--cta .niveau__repere { transition: stroke .6s ease .6s; }

.formulaire {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  background: var(--encre-2); border: 1px solid var(--encre-3); border-radius: var(--rayon);
  padding: 26px 22px;
}
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 700; font-size: .9375rem; color: var(--blanc); }
.obligatoire { color: var(--vert); }
.champ input, .champ select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 1.0625rem;   /* ≥ 16 px : iOS ne zoome pas au focus */
  color: var(--encre); background: var(--blanc);
  border: 2px solid transparent; border-radius: var(--rayon);
}
.champ input:focus, .champ select:focus { outline: none; border-color: var(--vert); }
.champ input[aria-invalid="true"] { border-color: #E5484D; }
.champ--case { grid-template-columns: 28px 1fr; align-items: start; gap: 12px; }
.champ--case input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--vert); }
.champ--case label { font-weight: 400; font-size: .875rem; color: var(--texte-clair); line-height: 1.5; }
.champ--case a { color: var(--vert); }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__message { margin: 0; min-height: 1.5em; font-weight: 700; }
.formulaire__message.est-ok { color: var(--vert); }
.formulaire__message.est-erreur { color: #FF8A8E; }

/* ----------------------------------------------------------------- Pied --- */
.pied { background: #0F1116; color: var(--texte-clair); padding: 48px 0 calc(40px + env(safe-area-inset-bottom)); font-size: .9375rem; }
.pied__grille { display: grid; gap: 24px; }
.marque--pied .marque__nom { font-size: 1.25rem; }
.pied__slogan { margin: 12px 0 0; color: var(--blanc); font-weight: 700; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied__liens a { color: var(--texte-clair); }
.pied__liens a:hover { color: var(--vert); }
.pied__copie { margin: 0; font-size: .8125rem; opacity: .8; }

/* ------------------------------------------------------ Pages de texte --- */
.page-texte { padding: calc(var(--nav-h) + 48px) 0 var(--section); }
.page-texte .conteneur { max-width: 820px; }
.page-texte h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; }
.page-texte h2 { font-size: 1.375rem; margin: 40px 0 12px; }
.page-texte p, .page-texte li { color: var(--texte-doux); }
.page-texte ul { list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.page-texte dl { display: grid; grid-template-columns: 1fr; gap: 4px 24px; margin: 0; }
.page-texte dt { font-weight: 800; margin-top: 12px; }
.page-texte dd { margin: 0; color: var(--texte-doux); }
.a-completer {
  background: #FFF6D6; border: 1px solid #E8D48A; color: #5A4A00;
  padding: 14px 16px; border-radius: var(--rayon); font-size: .9375rem; margin: 18px 0;
}
.a-completer mark { background: none; color: inherit; font-weight: 800; }
.page-texte .date-maj { font-size: .9375rem; }

/* ============================================================= ≥ 768 px === */
@media (min-width: 768px) {
  :root { --nav-h: 72px; }
  .preuves__liste { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .preuve { grid-template-columns: 1fr; gap: 6px; }
  .duo__ligne { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .duo__toi { justify-content: center; }
  .cartes { grid-template-columns: repeat(2, 1fr); }
  .options__liste { grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
  .journee__fil { grid-template-columns: repeat(3, 1fr); }
  .moment { grid-template-rows: auto 1fr auto; }
  .maillons { grid-template-columns: repeat(5, 1fr); gap: 0 16px; }
  .maillon { padding: 44px 0 0; }
  .maillon::before { top: 0; left: 0; }
  .maillon::after { top: 10px; left: 30px; right: -16px; bottom: auto; width: auto; height: 2px; }
  .soirees__colonnes { grid-template-columns: 1fr 1fr; }
  .soiree { padding: 32px 30px; }
  .fondateur__grille { grid-template-columns: 1fr 1.1fr; gap: 56px; }
  .formulaire { grid-template-columns: 1fr 1fr; padding: 32px; }
  .champ { grid-column: 1 / -1; }
  .champ--moitie { grid-column: auto; }
  .formulaire .bouton, .formulaire__message { grid-column: 1 / -1; }
  .portail__boutons { grid-template-columns: 1fr 1fr; }
  .pied__grille { grid-template-columns: 1fr auto; align-items: end; }
  .pied__copie { grid-column: 1 / -1; }
}

/* ============================================================ ≥ 1100 px === */
@media (min-width: 1100px) {
  .nav__liens { display: flex; gap: 28px; }
  .nav__liens a { color: var(--texte-clair); text-decoration: none; font-weight: 700; font-size: .9375rem; }
  .nav__liens a:hover { color: var(--vert); }
  .hero { padding: calc(var(--nav-h) + 72px) 0 104px; }
  .hero__grille { grid-template-columns: 1.25fr .9fr; align-items: center; gap: 64px; }
  .hero__actions .bouton { flex: 0 0 auto; }
  .hero__garanties { grid-template-columns: repeat(3, auto); gap: 18px; }
  .niveau--hero { position: absolute; bottom: -18px; left: -40px; width: 150px; height: 75px; }
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .client__grille { grid-template-columns: 1fr 1fr; gap: 72px; }
  .indicateur__grille { grid-template-columns: auto 1fr; gap: 56px; }
  .questions__grille { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .rejoindre__grille { grid-template-columns: .9fr 1.1fr; gap: 72px; }
}

/* ---------------------------------------------------- Mouvement réduit --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .journee__fil.est-pilotee .niveau--moment .niveau__bulle,
  .niveau--cta.est-en-attente .niveau__bulle { transform: none; }
}

/* --------------------------------------------------------- Impression --- */
@media print {
  .nav, .hero__visuel, .rejoindre, .onglets { display: none !important; }
  .hero, .section--encre, .indicateur, .options, .duo__moi { background: none !important; color: #000 !important; }
  .hero__titre-vert, .indicateur__zero { color: #000 !important; }
}

/* ---------------------------------------------- Appel à l'action collant --- */
/* Téléphone seulement : en grand écran, la barre de navigation porte déjà le
   bouton. La zone sûre du bas est réservée (indicateur de gestes iPhone). */
.cta-collant {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
  background: rgba(23,26,33,.96); border-top: 1px solid var(--encre-3);
  transform: translateY(110%); transition: transform .25s ease;
}
.cta-collant.est-visible { transform: none; }
@media (min-width: 768px) { .cta-collant { display: none; } }

/* ------------------------------------------- Retouches après la capture --- */
/* Mesuré à 390 px : le bouton de la barre passait sur deux lignes à côté de la
   marque. Sous 480 px il cède la place — le hero porte le même bouton, et
   l'appel collant prend le relais dès qu'on a défilé. */
.nav .bouton--petit { white-space: nowrap; }
@media (max-width: 479px) { .nav .bouton--petit { display: none; } }
/* Le détail net de la serrure restait gris : `.moment__corps p` l'emportait. */
.moment__corps .serrure__net { color: var(--blanc); }
.portail__ligne strong, .portail__paye { white-space: nowrap; }
.portail__fleche { width: 16px; height: 16px; flex: none; color: var(--encre); }
/* Titres coupés à la main par <br> : la largeur maximale ajoutait une seconde
   coupure au milieu de la phrase (« je / me tais »). */
.roles .titre-section, .fil .titre-section { max-width: none; }
@media (min-width: 1100px) {
  /* Mesuré à 1440 px : à 5,4 rem « Je » restait seul sur sa ligne. */
  .hero__titre { font-size: 4.3rem; }
  .hero .surtitre { max-width: none; }
}