/* =========================================================================
   MAISON SACRÉE MÔME
   Feuille de style unique, écrite en mobile first : les règles de base sont
   celles du téléphone, les media queries n'ajoutent que ce que les écrans
   plus larges permettent. Aucun framework, aucune image décorative.
   Points de rupture : 34rem / 48rem / 62rem / 76rem
   ========================================================================= */

/* ---------- 1. Polices auto-hébergées (sous-ensemble latin) -------------- */

/* Fraunces romain : graisse variable 400 à 900, taille optique figée à 36 */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Fraunces italique : un seul poids, volontairement, pour rester léger */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
/* Manrope : graisse variable 200 à 800 */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Jetons de design ----------------------------------------- */

:root {
  /* Charte : quatre couleurs, pas une de plus. Jamais de blanc pur. */
  --rose:   #a4847d;
  --creme:  #fbf8f5;
  --bleu:   #0000ff;
  --encre:  #1a1614;

  --creme-10: rgba(251, 248, 245, .10);
  --creme-16: rgba(251, 248, 245, .16);
  --creme-70: rgba(251, 248, 245, .70);
  --encre-08: rgba(26, 22, 20, .08);
  --encre-14: rgba(26, 22, 20, .14);
  --encre-22: rgba(26, 22, 20, .22);
  --encre-70: rgba(26, 22, 20, .70);
  --encre-80: rgba(26, 22, 20, .80);

  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 82rem;
  --gouttiere: 1.25rem;      /* mobile d'abord */
  --entete-h: 5rem;
  --rail: 0rem;              /* pas de rail sur mobile */
  --rythme: 5rem;

  --transition: .3s ease-in-out;   /* toutes les interactions de survol */
  --menu: .5s cubic-bezier(.4, 0, .2, 1);   /* ouverture du menu mobile */
  --lent: .9s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 3. Base ------------------------------------------------------ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-left: var(--rail);
  background: var(--rose);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 800; line-height: 1.16; margin: 0; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* Sélection : bleu signature, texte blanc cassé, partout */
::selection { background: var(--bleu); color: var(--creme); text-shadow: none; }
::-moz-selection { background: var(--bleu); color: var(--creme); text-shadow: none; }

:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.section { padding: var(--rythme) 0; }

.skip {
  position: absolute; left: 1rem; top: -100%; z-index: 100;
  background: var(--encre); color: var(--creme);
  padding: .75rem 1.25rem; font-size: .875rem; text-decoration: none;
  transition: top var(--transition);
}
.skip:focus { top: 1rem; }

/* ---------- 4. Sillage de fumée ------------------------------------------ */
/* La traîne est placée SOUS le contenu (z-index -1) : elle flotte au-dessus du
   rose du body, mais derrière tous les textes, sans qu'aucune fusion n'ait à la
   retenir. C'est le seul moyen d'y parvenir avec une traîne claire : une couche
   plus claire que le texte l'éclaircirait forcément en passant par-dessus.

   Conséquence assumée : les sections qui portent leur propre fond, le bandeau
   noir et les témoignages, la masquent, tout comme la barre du haut.

   Sa couleur suit le fond survolé : blanc cassé sur sombre, bleu sur clair.

   Masquée par défaut, elle n'apparaît qu'en grand écran équipé d'une souris,
   jamais sur mobile. */
.fumee {
  display: none;
  position: fixed;
  inset: 0;
  /* Un canvas est un élément remplacé : sans largeur ni hauteur explicites,
     il s'affiche à sa taille intrinsèque et non sur toute la fenêtre. */
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  filter: blur(6px);   /* juste de quoi lisser la demi-résolution, sans noyer les filaments */
}


/* ---------- 4 bis. Curseur personnalisé ---------------------------------- */
/* Un disque de blanc cassé de 20 px, sur la même couche que la traîne
   (z-index -1) : il passe donc derrière tous les textes.

   Le curseur natif n'est masqué que tant que le disque est réellement visible.
   Dès que la couche de fond est recouverte, bandeau noir, témoignages ou barre
   du haut, le script pose .curseur-masque et le curseur natif revient : on ne
   se retrouve jamais sans rien pour viser un lien ou un bouton.

   Rien de tout cela n'existe hors grand écran à souris : le JavaScript ne pose
   .a-curseur que dans ce cas. */

.curseur {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;      /* centré sur la pointe */
  border-radius: 50%;
  background: var(--creme);
  z-index: -1;
  pointer-events: none;
  opacity: 0;                    /* invisible tant que la souris n'a pas bougé */
  transition: opacity var(--transition);
  will-change: transform;
}

.a-curseur, .a-curseur * { cursor: none; }
.a-curseur.curseur-masque, .a-curseur.curseur-masque * { cursor: auto; }
.a-curseur.curseur-masque a, .a-curseur.curseur-masque button { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .curseur { display: none; }
}

/* ---------- 5. Bloc de marque -------------------------------------------- */
/* MAISON et PARIS : Manrope fin, capitales espacées, PARIS plus petit.
   Sacrée Môme : Fraunces au maximum de graisse. */

.marque {
  display: grid;
  justify-items: center;
  text-decoration: none;
  line-height: 1;
  color: var(--encre);
}
.marque__sur, .marque__sous {
  font-family: var(--texte);
  font-weight: 300;
  text-transform: uppercase;
}
.marque__sur  { font-size: .625rem; letter-spacing: .42em; text-indent: .42em; }
.marque__sous { font-size: .5rem;   letter-spacing: .46em; text-indent: .46em; }
.marque__nom {
  font-family: var(--titre);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: .34em 0 .4em;
}
.marque--bleu { color: var(--bleu); }

/* ---------- 6. Œil de marque --------------------------------------------- */
/* Les deux paupières bleues se rejoignent au milieu. Un volet rectangulaire
   rogne l'amande et la pupille par le haut ET par le bas en même temps :
   son bord haut descend vers 50, son bord bas remonte vers 50. Rien ne se
   déforme, rien ne se déplace, c'est le bleu qui recouvre.

   Les unités sont obligatoires : en propriété CSS, « height: 100 » sans unité
   est invalide et la déclaration serait ignorée, ne laissant bouger que y.

   Cycle de 11 s : 10 s ouvert, puis un clignement deux fois plus rapide
   qu'auparavant, 0,25 s de fermeture, 0,5 s fermé, 0,25 s d'ouverture. */
.oeil { display: block; flex: none; }
.oeil--anime .volet { animation: cligne 11s ease-in-out infinite; }
@keyframes cligne {
  0%, 90.909% { y: 0px;  height: 100px; }   /* 10 s grand ouvert */
  93.182%     { y: 50px; height: 0px;   }   /* fermé en 0,25 s */
  97.727%     { y: 50px; height: 0px;   }   /* 0,5 s fermé : rond bleu plein */
  100%        { y: 0px;  height: 100px; }   /* rouvert en 0,25 s */
}

/* ---------- 7. Header ---------------------------------------------------- */

.entete {
  position: fixed;
  top: 0; right: 0; left: var(--rail);
  z-index: 50;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  transition: background var(--transition), box-shadow var(--transition);
}
.entete.est-defile {
  background: rgba(164, 132, 125, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--encre-14);
}
.entete__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Aucun effet au survol : l'opacité laissait voir le curseur au travers,
   et le logo n'a pas besoin d'être animé. */
.entete__oeil { display: inline-flex; }
.entete__fin { display: none; }          /* le bouton revient en grand écran */

.burger {
  display: grid; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 0; cursor: pointer; place-content: center; gap: .4rem;
}
.burger__trait {
  display: block; width: 1.375rem; height: 1.5px; background: var(--encre);
  transition: transform var(--transition);
}
.burger[aria-expanded="true"] .burger__trait:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:last-child  { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 8. Navigation ------------------------------------------------ */
/* Sur mobile : panneau déroulant sous l'en-tête.
   En grand écran : rail vertical bleu collé au bord gauche. */

.rail {
  position: fixed;
  left: 0; right: 0; top: var(--entete-h);
  z-index: 45;
  padding: 1.25rem var(--gouttiere) 2rem;
  background: var(--rose);
  border-bottom: 1px solid var(--encre-14);
  transform: translateY(-120%);
  visibility: hidden;
  /* Ouverture posée, sans précipitation */
  transition: transform var(--menu), visibility var(--menu);
}
.rail.est-ouvert { transform: translateY(0); visibility: visible; }
.rail__liste { display: flex; flex-direction: column; }
.rail__liste li + li { border-top: 1px solid var(--encre-14); }
.rail__lien {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .9rem 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bleu);
  transition: opacity var(--transition);
}
.rail__lien--bientot { cursor: default; opacity: .6; }
.bientot {
  font-size: .5rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .2em .5em; border: 1px solid currentColor; border-radius: 999px;
}
/* Menu ouvert : l'en-tête prend un fond, sinon le contenu de la page se voit
   derrière l'œil et la marque.

   La classe est posée par le JavaScript, et non déduite en CSS avec « :has() ».
   Ce sélecteur n'existe pas avant Safari 15.4 : sur un iPhone un peu ancien la
   règle serait purement ignorée, et le défaut réapparaîtrait sans prévenir. */
.entete.menu-ouvert {
  background: var(--rose);
  box-shadow: 0 1px 0 var(--encre-14);
  /* Sans cette ligne, le fond se fondrait en 0,3 s pendant que le panneau
     descend : les liens se verraient alors derrière l'œil et la marque
     pendant toute la durée de l'animation. Ici il est là d'emblée. */
  transition: none;
}

/* ---------- 9. Éléments transversaux ------------------------------------- */

.surtitre {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.5rem;
  font-size: .625rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  /* Le rose est le fond dominant du site : c'est donc lui le cas par défaut,
     et le crème l'exception. Nommer le modificateur d'après l'exception évite
     l'erreur inverse, où l'on oublie de le poser et où la couleur tombe juste
     par hasard. Le filet suit la couleur du texte, il est en currentColor. */
  color: var(--creme);
}
.surtitre--sur-creme { color: var(--bleu); }
.surtitre__filet { display: block; width: 2rem; height: 1px; background: currentColor; flex: none; }

.titre-2 {
  font-size: clamp(2.1rem, 1.15rem + 3.8vw, 4.25rem);
  letter-spacing: -.026em;
  /* Respiration sous chaque titre de section, par défaut. Trois exceptions
     valaient mieux qu'une règle, jusqu'au jour où l'une a été oubliée. */
  margin-bottom: 1.75rem;
}
.titre-2 em, .hero__titre em { font-style: italic; font-weight: 700; }

/* Soulignement bleu : le trait signature, il se trace une seule fois */
.souligne { position: relative; white-space: nowrap; }
.souligne::after {
  content: '';
  position: absolute; left: 0; bottom: .02em;
  width: 100%; height: .075em;
  background: var(--bleu);
  transform: scaleX(0); transform-origin: left;
  animation: trait 1s cubic-bezier(.16, 1, .3, 1) 1.1s forwards;
}
@keyframes trait { to { transform: scaleX(1); } }

.btn {
  display: inline-block;
  padding: 1.05em 2.1em;
  font-family: var(--texte);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn--bleu  { background: var(--bleu);  color: var(--creme); }
.btn--bleu:hover { background: var(--encre); }
.btn--encre { background: var(--encre); color: var(--creme); }
.btn--encre:hover { background: var(--bleu); }
.btn--grand { padding: 1.2em 2.6em; font-size: .875rem; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: 1.25rem;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}
.lien-fleche::after { content: '\2192'; transition: transform var(--transition); }
.lien-fleche:hover { color: var(--bleu); }
.lien-fleche:hover::after { transform: translateX(.35rem); }

/* ---------- 10. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--entete-h) + 3rem) var(--gouttiere) 4rem;
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin-inline: auto; }

.hero__lettre {
  position: absolute;
  right: -.06em; bottom: -.28em;
  font-family: var(--titre); font-weight: 400;
  font-size: clamp(18rem, 46vw, 46rem);
  line-height: .75;
  color: var(--creme-16);
  user-select: none; pointer-events: none;
}

.hero__titre {
  max-width: 19ch;
  font-size: clamp(2.4rem, 1rem + 5.6vw, 5.4rem);
  letter-spacing: -.032em;
}
.hero__texte {
  max-width: 46ch;
  margin: 1.75rem 0 0;
  font-size: 1.0625rem;
  color: var(--encre);
}
.hero__actions { margin: 2rem 0 0; }

.hero__defile { display: none; }   /* réservé aux grands écrans */

/* ---------- 11. Bandeau --------------------------------------------------- */

.bandeau {
  background: var(--encre);
  color: var(--creme);
  padding: 3.5rem var(--gouttiere);
}
.bandeau__texte {
  max-width: var(--wrap); margin-inline: auto;
  font-family: var(--titre); font-weight: 700;
  font-size: clamp(1.5rem, .9rem + 2.4vw, 2.75rem);
  line-height: 1.32; text-align: center; letter-spacing: -.02em;
}
.bandeau__suite { display: block; font-style: italic; color: var(--creme-70); }

/* ---------- 12. Approche et expertises ------------------------------------ */

.section-tete { max-width: 62rem; margin-bottom: 3rem; }
.section-tete__texte { max-width: 52ch; margin-top: 1.5rem; color: var(--encre-80); }

.piliers { display: grid; gap: 2rem; }
.pilier { display: flex; flex-direction: column; padding-top: 1.5rem; border-top: 1px solid var(--encre-22); }
.pilier__num {
  font-family: var(--titre); font-weight: 400; font-style: italic;
  /* Deux fois plus gros, et en crème sur le rose. À 36 px le texte compte
     comme « grand » au sens WCAG : le seuil de contraste tombe à 3:1, que le
     crème sur rose franchit (3,21:1). Au corps précédent il ne l'aurait pas
     franchi, c'est la taille qui rend cette couleur acceptable ici. */
  font-size: 2.25rem; color: var(--creme); margin-bottom: 1rem;
}
.pilier__titre { font-size: 1.375rem; line-height: 1.25; margin-bottom: .85rem; }
.pilier__titre em { font-style: italic; font-weight: 700; }
.pilier__texte { font-size: .9375rem; color: var(--encre-80); }

/* ---------- 13. La Maison ------------------------------------------------- */

.maison { border-top: 1px solid var(--encre-14); }
.maison__grille { display: grid; gap: 3rem; }
.maison__texte p { max-width: 56ch; }

.signature { margin: 0; display: grid; justify-items: start; gap: 1.75rem; }
.signature__oeil { width: clamp(6rem, 22vw, 11rem); height: auto; }
.signature__texte {
  font-family: var(--titre);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -.02em;
}
.signature__ligne { display: block; }
.signature__ligne--deux { padding-left: 1.6em; }

/* ---------- 14. Témoignages ----------------------------------------------- */
/* Seule respiration claire de la page, pour éviter la monotonie du rose */

.temoignages { background: var(--creme); }
.cartes { display: grid; gap: 1.25rem; }
.carte {
  display: flex; flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--encre-14);
  transition: border-color var(--transition), transform var(--transition);
}
.carte:hover { border-color: var(--rose); transform: translateY(-4px); }
.carte__citation { margin: 0; }
.carte__citation::before {
  content: '\201C';
  display: block; font-family: var(--titre); font-size: 3.5rem; line-height: .8;
  color: var(--bleu); margin-bottom: .5rem;
}
.carte__citation p { font-size: .9375rem; color: var(--encre-80); }
.carte__nom {
  margin: auto 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--encre-08);
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}


/* Qui rapporte le témoignage, sous le nom de la personne citée */
.carte__source {
  display: block;
  margin-top: .45rem;
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: none;
  color: var(--encre-70);
}

/* Une carte seule sur sa dernière ligne se recentre au lieu de rester
   collée à gauche : c'est le cas dès que le nombre de cartes vaut 3n+1. */
@media (min-width: 48rem) {
  .cartes > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* ---------- 15. CTA finale ------------------------------------------------ */

.finale {
  position: relative;
  padding: var(--rythme) var(--gouttiere);
  overflow: hidden;
  text-align: center;
}
.finale__mot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--titre); font-style: italic; font-weight: 400;
  font-size: clamp(9rem, 30vw, 28rem);
  line-height: 1;
  color: var(--creme-10);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.finale__inner { position: relative; z-index: 1; max-width: var(--wrap); margin-inline: auto; }
.finale__texte { max-width: 48ch; margin: 0 auto 2.25rem; }

/* ---------- 16. Formulaire de contact -------------------------------------- */
/* Envoi natif en POST : il fonctionne sans une ligne de JavaScript. */

.contact { border-top: 1px solid var(--encre-14); }
.contact__grille { display: grid; gap: 2.5rem; }
/* :not(.surtitre) sinon cette règle, plus spécifique et plus bas dans le
   fichier, repeint le surtitre en encre. */
.contact__texte p:not(.surtitre) { max-width: 46ch; color: var(--encre-80); }

.form { display: grid; gap: 1.25rem; }
/* Les .champ sont des <p> : sans remise à zéro, « p:last-child { margin: 0 } »
   rend la dernière boîte plus haute, et comme .champ est une grille, ce surplus
   se répartit entre le label et l'input, qui descendent. D'où le désalignement.
   align-content: start empêche définitivement les rangées de s'étirer. */
.champ {
  display: grid;
  align-content: start;
  gap: .45rem;
  margin: 0;
}
.champ__label {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--encre-70);
}
.champ__label .requis { color: var(--bleu); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--encre-22);
  border-radius: 2px;
  transition: border-color var(--transition), background var(--transition);
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre-70); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  background: var(--creme-10);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-70); opacity: 1; }

/* Champ piège : invisible pour l'humain, alléchant pour un robot.
   Ni display:none ni hidden, que les robots savent reconnaître. */
.piege {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--encre-80);
}
.consentement input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--bleu); }
.consentement a { text-underline-offset: .2em; }

.form__envoi { margin-top: .5rem; }
.form__note { font-size: .75rem; color: var(--encre-70); }

/* Messages de retour du script PHP */
.alerte {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--bleu);
  background: var(--creme-10);
  font-size: .9375rem;
}
.alerte--erreur { border-left-color: var(--encre); }
.alerte ul { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; }

/* ---------- 17. Footer ----------------------------------------------------- */

.pied { padding: 3.5rem 0 2rem; border-top: 1px solid var(--encre-14); }
.pied__haut { display: grid; gap: 1.75rem; padding-bottom: 2.5rem; }
/* Les trois lignes du bloc de marque restent centrées entre elles */
.pied .marque { justify-items: center; }
.pied .marque__nom { font-size: 1.5rem; }
.pied__signature {
  display: inline-flex; align-items: center; gap: .8rem; margin: 0;
  font-family: var(--titre); font-style: italic; font-size: 1.125rem;
}
.pied__grille {
  display: grid; gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--encre-14);
}
.pied__titre {
  font-family: var(--texte); font-size: .625rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--encre-70);
  margin: 0 0 1rem;
}
.pied__nav li + li { margin-top: .65rem; }
.pied__nav a { font-size: .9375rem; text-decoration: none; transition: color var(--transition); }
.pied__nav a:hover { color: var(--bleu); }
.pied__bas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--encre-14); }
.pied__copyright { margin: 0; font-size: .75rem; letter-spacing: .04em; color: var(--encre-70); }

/* ---------- 18. Mouvement --------------------------------------------------- */
/* Le contenu est visible par défaut. L'animation n'est activée que si un
   script a posé .js-reveal sur <html>, donc jamais au détriment du texte. */

/* Le masque déborde de tous les côtés puis se rattrape en marge négative :
   les jambages des j, g, p et q respirent en bas, et l'encre des italiques,
   qui déborde de sa boîte de composition, n'est plus rognée à gauche ni à droite.
   La mise en page, elle, ne bouge pas d'un pixel. */
.ligne {
  display: block;
  overflow: hidden;
  padding: 0 .14em .16em;
  margin: 0 -.14em -.16em;
}
.ligne > * { display: block; }

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--lent), transform var(--lent);
}
.js-reveal .reveal.est-vu { opacity: 1; transform: none; }
.js-reveal .reveal .ligne > * { transform: translateY(105%); transition: transform var(--lent); }
.js-reveal .reveal.est-vu .ligne > * { transform: none; }
.js-reveal .reveal.est-vu .ligne:nth-child(2) > * { transition-delay: .1s; }
.js-reveal .reveal.est-vu .ligne:nth-child(3) > * { transition-delay: .2s; }
.js-reveal .reveal:has(.ligne) { opacity: 1; transform: none; }

/* Parallaxe : décorative. Si le navigateur ne la gère pas, rien n'est perdu. */
@supports (animation-timeline: scroll()) {
  [data-flotte] { animation: flotte linear both; animation-timeline: scroll(root block); }
  [data-flotte="lent"] { --derive: 8rem; }
  [data-flotte="doux"] { --derive: 3.5rem; }
  .finale__mot { animation-name: flotte-centre; }
}
@keyframes flotte {
  from { transform: translate3d(0, calc(var(--derive) * .5), 0); }
  to   { transform: translate3d(0, calc(var(--derive) * -.5), 0); }
}
@keyframes flotte-centre {
  from { transform: translate(-50%, calc(-50% + var(--derive) * .5)); }
  to   { transform: translate(-50%, calc(-50% - var(--derive) * .5)); }
}

/* ---------- 19. Pages secondaires ------------------------------------------- */

.page-simple { padding-left: 0; }
.page-simple .entete { left: 0; }
.page-texte { padding: calc(var(--entete-h) + 3rem) 0 var(--rythme); }
.page-texte__inner { max-width: 46rem; }
.page-texte h1 { margin-bottom: 2rem; }
.page-texte h2 {
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  margin: 2.5rem 0 .9rem;
  padding-top: 1.5rem; border-top: 1px solid var(--encre-14);
}
.page-texte p:not(.surtitre) { color: var(--encre-80); }
.page-texte a { text-decoration-color: var(--encre-22); text-underline-offset: .2em; transition: color var(--transition); }
.page-texte a:hover { color: var(--bleu); }

.erreur {
  position: relative; display: flex; align-items: center; min-height: 100svh;
  padding: 4rem var(--gouttiere); overflow: hidden; text-align: center;
}
.erreur__inner { position: relative; z-index: 1; max-width: var(--wrap); margin-inline: auto; }
.erreur .marque { margin-bottom: 2.5rem; justify-items: center; }
.erreur .titre-2 { margin-bottom: 1.5rem; }
.erreur__texte { max-width: 42ch; margin: 0 auto 2rem; }
.erreur .hero__lettre { right: 50%; bottom: auto; top: 50%; transform: translate(50%, -50%); font-size: clamp(16rem, 44vw, 34rem); }


/* ---------- 19 bis. Page funnel ------------------------------------------ */
/* Page d'atterrissage autonome : en-tête réduit à la marque, aucune
   navigation. Une page de conversion ne doit offrir qu'une seule sortie,
   le formulaire. */

.entete--nue { position: absolute; }
.entete--nue .entete__inner { justify-content: center; }
.entete--nue .marque { position: static; transform: none; }

.funnel { padding-top: calc(var(--entete-h) + 2rem); }
.funnel__accroche { max-width: 22ch; }
/* Colle une section à la précédente. C'était un attribut style= en dur,
   que la Content-Security-Policy du .htaccess bloque : style-src 'self'
   interdit aussi les styles écrits dans le HTML. */
.section--colle { padding-top: 0; }
.funnel p { max-width: 60ch; }
/* Manrope, et sans italique : c'est du texte courant, pas un titre, et
   Manrope n'a pas de vrai italique. Le navigateur en fabriquerait un faux,
   penché à la main, qui se verrait à cette taille.
   Deux classes dans le sélecteur : « .funnel p » ci-dessus vaut (0,1,1) et
   l'emportait sur une classe seule, la largeur de 42ch était donc ignorée. */
.funnel p.funnel__bascule { font-family: var(--texte); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.45; max-width: 42ch; }
.funnel__fort { font-weight: 700; }

/* Le chiffre dont parle le texte, posé comme un objet graphique */
.chiffre {
  display: grid; gap: .5rem; justify-items: start;
  margin: 2.5rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--bleu);
}
.chiffre__haut { font-size: .625rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--encre-70); }
.chiffre__valeur { font-family: var(--titre); font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1; }
/* Le compteur de tests. Chasse fixe pour que les chiffres ne dansent pas le
   jour où tu mettras le nombre à jour, et aucune coupure au milieu du nombre.
   Les séparateurs de milliers sont des espaces ordinaires : l'espace fine
   insécable aurait pu manquer dans les polices sous-ensemblées. */
.chiffre__valeur--compteur { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Vidéo, façade ------------------------------------------------- */
/* YouTube n'est chargé qu'au clic. Tant que la visiteuse n'a rien demandé,
   la page ne pèse rien de plus et aucun cookie n'est déposé : c'est ce qui
   permet de continuer à écrire « aucun outil tiers » dans les mentions. */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 2.5rem 0;
  background: var(--encre);
  overflow: hidden;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
  cursor: pointer;
  transition: opacity var(--transition);
}
.video:hover { opacity: .94; }
.video__affiche {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1.5rem;
  background: radial-gradient(120% 120% at 50% 45%, #b59892 0%, var(--rose) 55%, #8e6f68 100%);
}
.video__rond {
  width: clamp(4rem, 12vw, 5.5rem); height: clamp(4rem, 12vw, 5.5rem);
  border-radius: 50%; background: var(--bleu);
  display: grid; place-content: center;
  transition: transform var(--transition);
}
.video:hover .video__rond { transform: scale(1.06); }
.video__fleche { width: 0; height: 0; margin-left: .28em;
  border-left: .9rem solid var(--creme);
  border-top: .55rem solid transparent;
  border-bottom: .55rem solid transparent; }
.video__mention { font-size: .625rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--encre); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* Le résultat du test, mis en avant : c'est la preuve chiffrée */
.resultat {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.25rem 0 0;
  font-family: var(--titre); font-weight: 700;
}
.resultat__de    { font-size: 1.125rem; color: var(--encre-70); text-decoration: line-through; }
.resultat__fleche{ font-family: var(--texte); color: var(--bleu); }
.resultat__a     { font-size: 1.75rem; color: var(--bleu); }

/* Mention obligatoire sous les témoignages */
.mention-legale {
  max-width: 62ch;
  margin: 2.5rem auto 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--encre-70);
  text-align: center;
}

/* ---------- Garantie et rassurance ---------------------------------------- */

.garantie {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--bleu);
}
.garantie strong { font-weight: 700; }
.rassurance { margin-top: 1.25rem; font-size: .8125rem; color: var(--encre-70); max-width: 46ch; }

/* =========================================================================
   ÉCRANS PLUS LARGES : on n'ajoute que ce que la place permet
   ========================================================================= */

/* ---------- 34rem : deux colonnes ------------------------------------------- */
@media (min-width: 34rem) {
  :root { --gouttiere: 2rem; --rythme: 6rem; }
  .piliers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .pilier__titre { min-height: 2.4em; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__bas { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .carte { padding: 2.25rem; }
}

/* ---------- 48rem : tablette ------------------------------------------------ */
@media (min-width: 48rem) {
  :root { --gouttiere: 3rem; --rythme: 8rem; --entete-h: 5.5rem; }
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__haut { display: flex; align-items: center; justify-content: space-between; }
  .hero__texte { font-size: 1.125rem; }
  .contact__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
  .funnel__duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* ---------- 62rem : petit ordinateur ---------------------------------------- */
@media (min-width: 62rem) {
  :root { --gouttiere: 4rem; --rythme: 10rem; }
  /* Trois colonnes et non cinq depuis l'ajout du cinquième pilier. À cinq,
     chaque colonne tombait à 195 px, soit 22 signes par ligne : sous le seuil
     de lisibilité, et huit lignes par carte. À trois, on est à 40 signes et
     trois ou quatre lignes. La rangée incomplète coûte moins que le pavé. */
  .piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .maison__grille { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
  .signature { justify-items: center; text-align: center; gap: 2.25rem; }
  .section-tete { margin-bottom: 4.5rem; }
}

/* ---------- 62rem : le rail vertical apparaît -------------------------------- */
/* Seuil abaissé de 76rem : il n'existait que pour éviter la collision entre la
   nav horizontale et le logo centré, à l'époque où la nav était dans l'en-tête. */
@media (min-width: 62rem) {
  :root { --gouttiere: 4.5rem; --rythme: 12rem; --entete-h: 6.5rem; --rail: 4.25rem; }

  .burger { display: none; }
  .entete__fin { display: flex; justify-content: flex-end; }
  /* La marque est centrée sur l'écran, quoi qu'il arrive à ses côtés */
  .entete .marque { position: absolute; left: 50%; transform: translateX(-50%); }
  .entete .marque__nom { font-size: 1.3125rem; }

  /* Le panneau déroulant devient un rail vertical, lu de bas en haut */
  .rail {
    left: 0; right: auto; top: 0; bottom: 0;
    width: var(--rail);
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    transform: none;
    visibility: visible;
    pointer-events: none;
  }
  .rail__liste { align-items: center; gap: 3rem; pointer-events: auto; }
  .rail__liste li { display: flex; border: 0 !important; }
  .rail__lien {
    position: relative;
    writing-mode: vertical-rl;
    transform: rotate(180deg);      /* chaque libellé se lit de bas en haut */
    padding: 0;
    font-size: .6875rem;
    letter-spacing: .22em;
    white-space: nowrap;
  }
  .rail__lien::after {
    content: '';
    position: absolute; top: 0; right: -.4rem;
    width: 1px; height: 100%;
    background: currentColor;
    transform: scaleY(0); transform-origin: bottom;
    transition: transform var(--transition);
  }
  .rail__lien--bientot::after { display: none; }
  .rail__lien:hover::after { transform: scaleY(1); }

  /* Invite à défiler, en bas à gauche du hero */
  .hero__defile {
    display: flex; align-items: center; gap: .75rem;
    position: absolute;
    left: var(--gouttiere); bottom: 3rem;
    font-size: .625rem; font-weight: 600;
    letter-spacing: .3em; text-transform: uppercase;
    color: var(--encre-70);
  }
  .hero__defile-trait { display: block; width: 3rem; height: 1px; background: currentColor; transform-origin: left; animation: etire 2.6s ease-in-out infinite; }
  @keyframes etire { 0%, 100% { transform: scaleX(.35); } 50% { transform: scaleX(1); } }
}

/* Le sillage de fumée est réservé aux grands écrans équipés d'une souris */
@media (min-width: 62rem) and (pointer: fine) {
  .fumee { display: block; }
}

/* ---------- 20. Confort et impression ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js-reveal .reveal, .js-reveal .reveal .ligne > * { opacity: 1 !important; transform: none !important; }
  .souligne::after { transform: scaleX(1); }
  .fumee { display: none !important; }
}

@media print {
  .entete, .rail, .burger, .hero__lettre, .hero__defile, .finale__mot, .fumee { display: none !important; }
  body { padding-left: 0; background: none; color: #000; font-size: 11pt; }
  .hero, .finale { min-height: 0; padding: 1.5rem 0; }
  .bandeau { background: none; color: #000; }
  .js-reveal .reveal, .js-reveal .reveal .ligne > * { opacity: 1 !important; transform: none !important; }
}