/* ============================================================================
   PILOTE — feuille unique.

   Ce fichier commence par la GRILLE, et rien d'autre ne s'écrit avant elle.
   La version précédente du site alignait ses sections sur cinq bords gauches
   différents (96, 176, 209, 483 px) parce que chaque section choisissait sa
   propre largeur. Ici il n'y a qu'un conteneur, `.col`, et tout le contenu
   sans exception passe par lui. Une section ne décide plus de sa largeur ;
   elle décide seulement de son FOND.
   ========================================================================= */

:root {
  /* --- Grille : une seule colonne, une seule marge --- */
  --col: 1180px;
  /* Les VISUELS PRODUIT débordent d'un cran, et seulement eux.
     C'est une exception déclarée, pas un accident : le texte garde le bord de
     la colonne, l'interface montrée respire. Une capture d'écran réduite à la
     moitié d'une colonne ne montre plus rien — autant ne pas la mettre. */
  --col-large: 1440px;
  --marge: clamp(20px, 5vw, 72px);
  --rythme: clamp(88px, 11vw, 152px);   /* espace vertical de TOUTE section */

  /* --- Échelle d'espacement, base 8. Aucune valeur hors échelle. --- */
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 48px; --e6: 64px; --e7: 96px;

  /* --- Surfaces : sombre d'abord, la lumière vient du produit --- */
  --fond:    #08090c;
  --fond-2:  #0d0f14;
  --fond-3:  #12151c;
  --trait:   #1c2029;
  --trait-2: #2a303c;

  --encre:   #f5f7fa;
  --encre-2: #a8b0bd;
  --encre-3: #6b7482;

  /* Un seul accent, et c'est le BLANC : sur du noir, rien ne tranche
     davantage. Le bleu reste au produit — les captures le portent déjà, et
     deux bleus qui se répondent mal font une page sale. */
  --accent:      #ffffff;
  --accent-encre:#08090c;
  --signal:      #7aa2ff;   /* chiffres et surlignes, jamais un aplat */

  /* --- Typographie --- */
  --display: 'Archivo', system-ui, sans-serif;
  --texte:   'Public Sans', system-ui, sans-serif;

  --t-xs: 13px;
  --t-sm: 15px;
  --t-md: clamp(17px, 1.1vw, 19px);
  --t-lg: clamp(22px, 1.7vw, 27px);
  --t-xl: clamp(30px, 3.2vw, 46px);
  --t-2xl: clamp(40px, 5.6vw, 82px);

  --interligne: 1.6;
  --serrage: -0.03em;

  --rayon: 14px;
  --rayon-lg: 22px;
  --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

/* --- Polices : deux familles, quatre fichiers, sous-ensemble latin --- */
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/fonts/public-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-2);
  font-family: var(--texte);
  font-size: var(--t-md);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: var(--serrage);
  line-height: 1.04;
  color: var(--encre);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

/* ============================================================================
   LA GRILLE — le seul mécanisme de mise en page du site.
   ========================================================================= */

/* Une bande occupe toute la largeur de l'écran et ne porte QUE le fond. */
.bande { padding: var(--rythme) 0; }
.bande--creuse { background: var(--fond-2); }

/* La colonne porte la largeur et la marge. Tout contenu vit dedans. */
.col {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--marge);
}
.col--large { max-width: var(--col-large); }

/* Sous-grille de douze colonnes, pour les seuls blocs qui en ont besoin.
   Les enfants s'alignent sur les mêmes lignes que le reste de la page. */
.grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e5) var(--e4);
}
.c-4  { grid-column: span 4; }
.c-5  { grid-column: span 5; }
.c-6  { grid-column: span 6; }
.c-7  { grid-column: span 7; }
.c-8  { grid-column: span 8; }
.c-12 { grid-column: span 12; }
@media (max-width: 900px) {
  .c-4, .c-5, .c-6, .c-7, .c-8 { grid-column: span 12; }
  .grille { gap: var(--e4); }
}

/* En-tête de section : toujours la même composition, toujours le même bord. */
.chapeau { max-width: 42ch; }
.chapeau__oeil {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: var(--e3);
  display: flex; align-items: center; gap: var(--e2);
}
.chapeau__oeil::before {
  content: ''; width: 28px; height: 1px; background: var(--trait-2);
}
.chapeau h2 { font-size: var(--t-xl); }
.chapeau p { margin-top: var(--e3); font-size: var(--t-md); color: var(--encre-2); }

/* ============================================================================
   Commandes
   ========================================================================= */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; /* un bouton plié en deux lignes n'est plus un bouton */
  min-height: 52px; padding: 0 var(--e4);
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--texte); font-size: var(--t-sm); text-decoration: none;
  background: var(--accent); color: var(--accent-encre);
  transition: transform var(--transition), background var(--transition);
}
.bouton:hover { background: #dfe4ec; }
.bouton:active { transform: translateY(1px); }
.bouton--fantome {
  background: transparent; color: var(--encre);
  border-color: var(--trait-2);
}
.bouton--fantome:hover { background: var(--fond-3); border-color: var(--encre-3); }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px;
}

/* ============================================================================
   En-tête
   ========================================================================= */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete .col {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 68px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; color: var(--encre); text-decoration: none;
}
.marque svg { width: 24px; height: 24px; }
.entete nav { display: flex; align-items: center; gap: var(--e4); }
.entete nav a {
  font-size: var(--t-sm); color: var(--encre-2); text-decoration: none;
  transition: color var(--transition);
}
.entete nav a:hover { color: var(--encre); }
.entete__acces { display: flex; align-items: center; gap: var(--e2); }
.entete__acces .bouton { min-height: 42px; padding-inline: var(--e3); }
@media (max-width: 860px) { .entete nav.liens { display: none; } }

/* ============================================================================
   Hero
   ========================================================================= */
.hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 0; position: relative; }

/* Le premier écran porte le propos ET une démonstration. Le titre cède deux
   colonnes à la carte : une page de vente qui n'a que du texte au-dessus de la
   ligne de flottaison ne montre pas ce qu'elle vend. */
.hero__haut {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--e6) var(--e4); align-items: center;
}
.hero__propos { grid-column: span 6; }
.hero .plume { grid-column: 7 / span 6; align-self: center; }
@media (max-width: 1000px) {
  .hero__propos, .hero .plume { grid-column: span 12; }
  /* Empilée sous le propos, la carte se centre : collée au bord gauche, elle
     semblait orpheline de la colonne qui la portait. */
  .hero .plume { max-width: 560px; margin-inline: auto; }
}

.hero h1 { font-size: clamp(38px, 4.6vw, 66px); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--encre-3); }
.hero__pitch {
  margin-top: var(--e4); max-width: 52ch; font-size: var(--t-lg);
  line-height: 1.45; color: var(--encre-2);
}
.hero__actions { margin-top: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e2); }
.hero__note { margin-top: var(--e3); font-size: var(--t-sm); color: var(--encre-3); }

/* Les destinations. Discret, mais lisible : c'est la première question qu'on
   se pose devant la promesse, et devoir la chercher dans la FAQ est déjà un
   doute. */
.hero__reseaux {
  margin-top: var(--e2); max-width: 46ch;
  font-size: var(--t-sm); line-height: 1.6; color: var(--encre-3);
}
.hero__reseaux strong { color: var(--encre-2); font-weight: 600; }
.hero__reseaux span { color: var(--signal); }

/* Le produit, en grand, coupé par le bas : il continue sous la ligne de
   flottaison, ce qui invite à faire défiler sans rien cacher d'utile. */
.vitrine {
  margin-top: var(--e6); position: relative;
  width: 100%; max-width: var(--col-large);
  margin-inline: auto;
}
.vitrine__cadre {
  border: 1px solid var(--trait-2); border-radius: var(--rayon-lg);
  overflow: hidden; background: var(--fond-2);
  max-height: 74vh;
}
.vitrine__cadre img { width: 100%; }
.vitrine::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 45%;
  background: linear-gradient(to bottom, transparent, var(--fond));
  pointer-events: none;
}
/* La lueur derrière la vitrine est la SEULE couleur d'ambiance de la page.
   Elle reprend le bleu du produit pour que l'écran paraisse allumé. */
.vitrine::before {
  content: ''; position: absolute; z-index: -1;
  inset: -12% -6% 30%;
  background: radial-gradient(60% 50% at 50% 40%, color-mix(in oklab, var(--signal) 22%, transparent), transparent 70%);
  filter: blur(30px);
}

/* --- La plume : le post qui s'écrit, réseau par réseau ------------------ */
.plume {
  margin: 0; width: 100%;
  padding: var(--e4) var(--e5) var(--e5);
  background: color-mix(in oklab, var(--fond-3) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--trait-2); border-radius: var(--rayon);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / .8);
}
.plume__entete {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-3);
}
.plume__pastille {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--signal) 18%, transparent);
}
/* Le corps réserve la hauteur du PIRE scénario (image + légende) : la carte
   ne change jamais de taille quand elle passe d'un réseau à l'autre, et rien
   ne saute sous elle. */
.plume__corps { margin-top: var(--e3); min-height: 11.5em; }
.plume__texte {
  min-height: 0;
  font-size: clamp(17px, 1.25vw, 21px); line-height: 1.6; color: var(--encre);
  white-space: pre-wrap;
}

/* Le visuel « en cours de génération » : une scène en dégradés purs — aucune
   image chargée — qui se révèle en se dénouant du flou, comme une diffusion. */
.plume__visuel {
  display: none; position: relative; height: 8.4em;
  margin-bottom: var(--e3);
  border-radius: calc(var(--rayon) - 6px); overflow: hidden;
  border: 1px solid var(--trait);
}
.plume--visuel .plume__visuel { display: block; }
.plume__image {
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 60% at 72% 28%, #e8a0bf 0%, transparent 62%),
    radial-gradient(55% 60% at 24% 68%, #79a86f 0%, transparent 66%),
    radial-gradient(80% 90% at 50% 105%, #35523c 0%, transparent 72%),
    linear-gradient(160deg, #232f3a, #161f1b);
  filter: blur(26px) saturate(.55); transform: scale(1.18);
  transition: filter 1.1s ease, transform 1.1s ease;
}
.plume__visuel.net .plume__image { filter: blur(0) saturate(1); transform: scale(1); }
.plume__barre {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--signal); transition: width .28s linear;
}
.plume__visuel.net .plume__barre { opacity: 0; }
.plume__curseur {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--signal); vertical-align: -2px;
  animation: clignote 1s steps(2, start) infinite;
}
@keyframes clignote { to { opacity: 0; } }
.plume__etat {
  margin-top: var(--e3); padding-top: var(--e2);
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs); color: var(--encre-3);
}
.plume__etat.fini { color: var(--signal); }

@media (max-width: 760px) {
  .plume { padding: var(--e3) var(--e4) var(--e4); }
  .plume__corps { min-height: 10em; }
  .plume__visuel { height: 6.6em; }
}
/* Le mouvement s'arrête, le contenu reste : l'état final est le post écrit. */
@media (prefers-reduced-motion: reduce) {
  .plume__curseur { animation: none; opacity: 0; }
  .plume__image { transition: none; }
}

/* ============================================================================
   Chiffres
   ========================================================================= */
.chiffres { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres .col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.chiffre__valeur {
  font-family: var(--display); font-weight: 800; font-size: var(--t-xl);
  color: var(--encre); letter-spacing: var(--serrage); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre__label { margin-top: var(--e1); font-size: var(--t-sm); color: var(--encre-3); }
@media (max-width: 700px) {
  .chiffres .col { grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e3); }
}

/* ============================================================================
   Constats — une liste, pas des cartes
   ========================================================================= */
.constats { margin-top: var(--e7); border-top: 1px solid var(--trait); }
.constat {
  display: grid; grid-template-columns: 160px 1fr; gap: var(--e4);
  padding: var(--e5) 0; border-bottom: 1px solid var(--trait);
}
.constat__chiffre {
  font-family: var(--display); font-weight: 800; font-size: var(--t-lg);
  color: var(--signal); letter-spacing: var(--serrage);
}
.constat h3 { font-size: var(--t-md); font-weight: 600; }
.constat p { margin-top: var(--e2); max-width: 62ch; font-size: var(--t-sm); }
@media (max-width: 700px) {
  .constat { grid-template-columns: 1fr; gap: var(--e2); padding: var(--e4) 0; }
}

/* ============================================================================
   Étapes
   ========================================================================= */
.etapes { margin-top: var(--e7); counter-reset: etape; }
.etape {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--e4);
  padding: var(--e4) 0; border-top: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  color: var(--encre-3); font-variant-numeric: tabular-nums; padding-top: 3px;
}
.etape h3 { font-size: var(--t-md); font-weight: 600; }
.etape p { margin-top: var(--e2); max-width: 62ch; font-size: var(--t-sm); }

/* ============================================================================
   Écrans du produit
   ========================================================================= */
/* Côte à côte, mais sur la colonne LARGE et avec un partage 4/8.
   Le partage 5/7 de la première version laissait 591 px au visuel : trop peu
   pour lire une interface. Quatre colonnes suffisent à un paragraphe de six
   lignes ; les huit autres vont au produit. */
.ecran {
  margin-top: var(--e7);
  display: grid; align-items: center;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--e5);
  --debord: max(0px, (min(100vw, var(--col-large)) - var(--col)) / 2);
  margin-inline: calc(-1 * var(--debord));
  width: calc(100% + 2 * var(--debord));
}
.ecran:first-of-type { margin-top: var(--e6); }

.ecran__texte { grid-column: span 4; }
.ecran__texte h3 { font-size: var(--t-lg); }
.ecran__texte p { margin-top: var(--e3); font-size: var(--t-sm); }

/* L'alternance change l'ORDRE, jamais les largeurs : les deux bords extérieurs
   restent les mêmes d'une ligne à l'autre. */
.ecran:nth-of-type(even) .ecran__texte { grid-column: 9 / span 4; }
.ecran:nth-of-type(even) .ecran__visuel { grid-column: 1 / span 8; grid-row: 1; }

.ecran__visuel {
  grid-column: span 8;
  border: 1px solid var(--trait); border-radius: var(--rayon-lg);
  overflow: hidden; background: var(--fond-2);
}

@media (max-width: 900px) {
  /* Sous 900 px, deux colonnes ne laissent plus rien ni au texte ni au
     visuel : on empile, et le visuel reprend toute la largeur. */
  .ecran { display: block; margin-inline: 0; width: 100%; }
  .ecran__visuel { margin-top: var(--e4); }
}

/* ============================================================================
   Intertitre de gamme — le seul composant ajouté avec la vidéo.

   Deux besoins, un seul objet : séparer les deux gammes de la grille tarifaire
   (« Publier » / « Publier en vidéo »), et titrer les blocs de la section
   vidéo. Un `.chapeau` aurait été trop gros — il ouvre une SECTION, pas un
   bloc à l'intérieur d'une section — et deux h2 dans les tarifs auraient fait
   croire à deux sections. D'où un cran en dessous : même bord gauche, même
   mesure courte, taille de `.ecran__texte h3`.
   ========================================================================= */
.gamme { margin-top: var(--e6); max-width: 46ch; }
.gamme h3 { font-size: var(--t-lg); }
.gamme p { margin-top: var(--e2); font-size: var(--t-sm); color: var(--encre-2); }
/* Un titre reste collé à ce qu'il titre : sans ceci, le tableau ou la grille
   qui suit garde sa marge de premier bloc et le titre flotte entre les deux. */
.gamme + .ancrage, .gamme + .formules { margin-top: var(--e4); }

/* ============================================================================
   Tarifs
   ========================================================================= */
.ancrage { margin-top: var(--e6); border-top: 1px solid var(--trait); }
.ancrage__ligne {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm); color: var(--encre-3);
}
.ancrage__ligne--nous { color: var(--encre); }
.ancrage__ligne--nous b { font-family: var(--display); font-weight: 800; color: var(--signal); }

.formules { margin-top: var(--e6); }
.formule {
  display: flex; flex-direction: column;
  padding: var(--e5) var(--e4);
  border: 1px solid var(--trait); border-radius: var(--rayon-lg);
  background: var(--fond-2);
}
.formule--phare { border-color: var(--trait-2); background: var(--fond-3); }
.formule__entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }
.formule__nom {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-3);
}
.formule__badge {
  font-size: var(--t-xs); padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-encre);
}
.formule__promesse {
  margin-top: var(--e3); font-family: var(--display); font-weight: 600;
  font-size: var(--t-md); color: var(--encre); line-height: 1.25;
}
.formule__prix {
  margin-top: var(--e4); display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: var(--t-xl);
  color: var(--encre); letter-spacing: var(--serrage);
}
.formule__prix span { font-family: var(--texte); font-weight: 400; font-size: var(--t-sm); color: var(--encre-3); }
.formule__pour { margin-top: var(--e2); font-size: var(--t-sm); color: var(--encre-3); }
.formule ul { margin: var(--e4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.formule li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--t-sm); }
.formule li svg { width: 16px; height: 16px; margin-top: 5px; color: var(--signal); }
.formule__pied { margin-top: auto; padding-top: var(--e5); }
.formule__pied .bouton { width: 100%; }
.formule__rassurance { margin-top: var(--e2); font-size: var(--t-xs); color: var(--encre-3); text-align: center; }
.note { margin-top: var(--e5); font-size: var(--t-xs); color: var(--encre-3); max-width: 70ch; }

/* ============================================================================
   Questions
   ========================================================================= */
.questions { margin-top: var(--e6); border-top: 1px solid var(--trait); }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) 0; min-height: 56px;
  font-family: var(--display); font-weight: 600; font-size: var(--t-md); color: var(--encre);
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: '+'; font-family: var(--texte); font-size: 20px; color: var(--encre-3);
  transition: transform var(--transition);
}
.question[open] summary::after { transform: rotate(45deg); }
.question p { padding-bottom: var(--e4); max-width: 68ch; font-size: var(--t-sm); }

/* ============================================================================
   Dernier appel & pied
   ========================================================================= */
.final { text-align: center; }
.final h2 { font-size: var(--t-xl); margin-inline: auto; max-width: 18ch; }
.final p { margin: var(--e3) auto 0; max-width: 54ch; font-size: var(--t-md); }
.final .bouton { margin-top: var(--e5); }
.final small { display: block; margin-top: var(--e3); font-size: var(--t-xs); color: var(--encre-3); }

/* ============================================================================
   Pied — quatre colonnes, puis une ligne de mentions.

   L'ancien pied tenait en une ligne de liens légaux : c'est le minimum
   syndical, et sur une page de vente c'est aussi la dernière occasion de
   renvoyer quelqu'un vers l'essai. Il porte donc la marque, une phrase, un
   bouton, et la navigation complète du site.
   ========================================================================= */
.pied { border-top: 1px solid var(--trait); padding: var(--e7) 0 var(--e5); background: var(--fond-2); }

.pied__haut {
  display: grid;
  grid-template-columns: 2.2fr repeat(3, 1fr);
  gap: var(--e6) var(--e4);
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--trait);
}
.pied__marque p {
  margin: var(--e3) 0 var(--e4);
  max-width: 34ch; font-size: var(--t-sm); color: var(--encre-3);
}
.pied__marque .bouton { min-height: 46px; }

.pied__colonne { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); }
.pied__colonne h2 {
  font-family: var(--texte); font-weight: 400;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-3); margin-bottom: var(--e1);
}
.pied__colonne a {
  font-size: var(--t-sm); color: var(--encre-2); text-decoration: none;
  transition: color var(--transition);
}
.pied__colonne a:hover { color: var(--encre); }

.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3);
  padding-top: var(--e4);
  font-size: var(--t-xs); color: var(--encre-3);
}
.pied__bas p { max-width: 68ch; }
.pied__signature a { color: var(--encre-2); text-decoration: none; }
.pied__signature a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .pied__haut { grid-template-columns: 1fr 1fr; gap: var(--e5) var(--e4); }
  .pied__marque { grid-column: span 2; }
}

/* ============================================================================
   Apparitions — transform et opacity uniquement
   ========================================================================= */
/* L'état masqué est conditionné à `.js`, posée par une ligne en tête de page.
   Sans JavaScript, `.vu` n'est jamais ajoutée : masquer d'abord et découvrir
   ensuite rendait la page ENTIÈREMENT invisible — hero, tarifs, tout — pour
   qui n'exécute pas de script. Une apparition est un agrément ; le contenu ne
   doit pas en dépendre. */
.js .apparait { opacity: 0; transform: translateY(18px); }
.apparait.vu {
  opacity: 1; transform: none;
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .apparait, .apparait.vu { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   Téléphone
   ========================================================================= */
.barre-pouce { display: none; }
@media (max-width: 760px) {
  .hero h1 { max-width: none; }
  .vitrine { margin-top: var(--e6); }
  .vitrine__cadre { max-height: 58vh; }

  .barre-pouce {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    display: flex; gap: var(--e2); align-items: center;
    padding: 12px var(--marge);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--fond) 92%, transparent);
    backdrop-filter: blur(12px); border-top: 1px solid var(--trait);
  }
  .barre-pouce .bouton { flex: 1; min-height: 48px; }
  .barre-pouce a.lien { font-size: var(--t-sm); color: var(--encre-2); text-decoration: none; padding: 12px; }
  .pied { padding-bottom: calc(var(--e6) + 76px); }
  .entete__acces .bouton { min-height: 40px; }
}

.saut {
  position: absolute; left: -9999px;
}
.saut:focus {
  left: var(--marge); top: 12px; z-index: 100;
  background: var(--accent); color: var(--accent-encre);
  padding: 10px 16px; border-radius: 8px;
}

/* --- Correctifs mesurés à 375 px --------------------------------------- */
@media (max-width: 760px) {
  /* Cibles tactiles : le pied et la marque tombaient entre 17 et 29 px.
     On étend la zone de toucher, la typographie ne bouge pas. */
  .pied a, .pied__signature a, .marque {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .pied nav { flex-direction: column; gap: 0; }
  .pied .col { gap: var(--e2); }

  /* Une mention de bas de page reste une mention, mais 13 px sur un
     téléphone se lit à la loupe. */
  .formule__rassurance, .note, .chapeau__oeil { font-size: 14px; }
}

/* Le pied garde ses cibles tactiles sur téléphone (mesuré à 24 px avant). */
@media (max-width: 760px) {
  .pied__colonne a, .pied__signature a { display: inline-flex; align-items: center; min-height: 44px; }
  .pied__colonne { gap: 0; }
  .pied { padding-bottom: calc(var(--e5) + 76px); }
}