/*
  Feuille de style du site public de BOA — et son design système.

  Un seul fichier, pas de préprocesseur : corriger une couleur ou un
  espacement ne demande rien d'autre qu'un éditeur de texte. La référence
  complète (jetons, composants, convention de nommage, exemples) est dans
  docs/notes-techniques/design-systeme-site.md ; la planche visuelle qui
  montre chaque composant est site/design-systeme.html (page interne, non
  indexée, pas de lien vers elle depuis le site).

  Le fichier se lit de haut en bas, du plus général au plus particulier :

    1. JETONS       les valeurs (couleurs, tailles, ombres…) — le seul
                    endroit où l'on change l'apparence globale
    2. BASE         le HTML brut : corps, titres, liens, focus
    3. COMPOSANTS   les briques réutilisables partout : logo, bouton, badge,
                    pastille, carte, note, bandeau, numéro
    4. MISE EN PAGE en-tête, hero, sections, pages de lecture, pied
    5. BLOCS        les assemblages propres à une page : grille, étapes,
                    tarifs, sommaire, chapitres, parcours illustré
    6. ILLUSTRATIONS les dessins d'écran en CSS (illu-*)
    7. MOUVEMENT    apparitions au défilement, animations réduites
    8. TÉLÉPHONE    les quelques ajustements sous 700 px

  Convention de nommage des classes (BEM allégé, en français) :
    .bloc              un composant ou un bloc        .carte, .bouton
    .bloc-element      une partie de ce bloc          .pied-liens, .tarif-prix
    .bloc--variante    une déclinaison du bloc        .bouton--principal
    .est-etat          un état posé par JavaScript    .est-active, .est-visible
  Une variante ne s'écrit jamais seule : « bouton bouton--clair », pas
  « bouton--clair ». Les couleurs de l'app (src/constants/theme.ts) et ces
  jetons sont alignés — même marine, même bleu, mêmes rayons, mêmes ombres.

  Les animations d'apparition au défilement vivent dans animations.js ;
  ici on ne définit que leurs états de départ et d'arrivée. Si JavaScript
  est coupé, rien n'est masqué : les états « invisibles » ne s'appliquent
  que quand la classe js-actif est posée sur <html> par le script.
*/

/* =====================================================================
   1. JETONS
   ===================================================================== */

:root {
  /* --- Couleurs brutes : la palette du logo (marine + bleu vif) --- */
  --marine: #0d2747;
  --marine-clair: #16335c;
  --bleu: #00a6ff;
  --bleu-clair: #4cc4ff;
  --bleu-fonce: #0e6bae;
  --gris-bleu: #e8eef6;
  --gris-bleu-fonce: #d9e4f1;
  --gris-bleu-profond: #cfdcec;
  --blanc: #ffffff;

  /* --- Rôles : on écrit CES noms dans les règles, pas les couleurs brutes.
     Changer un rôle ici change tout le site d'un coup. --- */
  --texte: var(--marine);
  /* Même valeur que textSecondary dans l'app (2026-08-16) : l'ancien
     #5a7290 tombait sous le contraste minimum lisible (4.5) sur gris-bleu. */
  --texte-secondaire: #516781;
  --texte-sur-marine: #c9dcf1;
  --texte-sur-marine-doux: #9db9d8;
  --fond: var(--blanc);
  --fond-doux: var(--gris-bleu);
  --surface: var(--blanc);
  --lisere: var(--gris-bleu);
  --lisere-fort: var(--gris-bleu-fonce);
  --cadre: var(--gris-bleu-profond);
  --accent: var(--bleu);
  --accent-clair: var(--bleu-clair);
  --accent-fonce: var(--bleu-fonce);
  /* Le texte posé sur un dégradé bleu est TOUJOURS marine (règle de l'app). */
  --sur-accent: var(--marine);
  --degrade-accent: linear-gradient(135deg, var(--accent-clair), var(--accent));
  --accent-teinte: rgba(0, 166, 255, 0.08);
  --accent-lisere: rgba(0, 166, 255, 0.35);
  --accent-lisere-survol: rgba(0, 166, 255, 0.45);
  --succes: #14713a;

  /* --- Typographie --- */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --taille-xs: 12px;
  --taille-s: 14px;
  --taille-m: 15px;
  --taille-base: 16px;
  --taille-l: 17px;
  --taille-xl: 20px;
  --titre-3: 18px;
  --titre-2: clamp(26px, 4vw, 34px);
  --titre-1: clamp(28px, 5vw, 40px);
  --titre-hero: clamp(32px, 6vw, 54px);
  --interligne: 1.6;
  --interligne-titre: 1.2;
  --interlettre-titre: -0.015em;

  /* --- Espacements : une échelle, toujours les mêmes crans --- */
  --espace-2xs: 4px;
  --espace-xs: 8px;
  --espace-s: 12px;
  --espace-m: 16px;
  --espace-l: 24px;
  --espace-xl: 32px;
  --espace-2xl: 40px;
  --espace-3xl: 56px;
  --espace-4xl: 72px;

  /* --- Rayons (site : cartes 16, boutons 10 ; l'app arrondit un cran de plus) --- */
  --rayon-s: 8px;
  --rayon-bouton: 10px;
  --rayon-carte: 16px;
  --rayon-ecran: 22px;
  --rayon-pastille: 999px;

  /* --- Ombres --- */
  --ombre-carte: 0 8px 30px rgba(13, 39, 71, 0.09);
  --ombre-carte-survol: 0 14px 40px rgba(13, 39, 71, 0.14);
  --ombre-entete: 0 4px 24px rgba(13, 39, 71, 0.07);
  --ombre-accent: 0 4px 14px rgba(0, 166, 255, 0.3);
  --ombre-accent-survol: 0 6px 22px rgba(0, 166, 255, 0.45);
  --ombre-mise-en-avant: 0 12px 36px rgba(0, 166, 255, 0.18);
  --ombre-mise-en-avant-survol: 0 16px 44px rgba(0, 166, 255, 0.28);

  /* --- Mouvement : ressorts courts, quasi sans rebond, comme dans l'app --- */
  --duree-rapide: 0.15s;
  --duree-douce: 0.35s;
  --duree-lente: 0.6s;
  --courbe-douce: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-douce: var(--duree-douce) var(--courbe-douce);

  /* --- Mise en page --- */
  --largeur-max: 1080px;
  --largeur-lecture: 760px;
  --largeur-guide: 960px;
  --gouttiere: 24px;
  /* Hauteur de l'en-tête collant : les ancres s'arrêtent juste en dessous. */
  --hauteur-entete: 88px;

  /* --- Illustrations : les « lignes de texte » grises des faux écrans --- */
  --illu-trait: rgba(81, 103, 129, 0.28);
  --illu-trait-fort: rgba(81, 103, 129, 0.6);
}

/* =====================================================================
   2. BASE
   ===================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: var(--interligne-titre);
  letter-spacing: var(--interlettre-titre);
  /* Évite un mot orphelin sur la dernière ligne des titres (ignoré par les
     navigateurs qui ne le connaissent pas). */
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Un élément porteur de l'attribut hidden est masqué, quoi qu'en dise sa
   classe. Sans cette règle, « .pastilles { display: flex } » l'emportait sur
   le masquage du navigateur et le sélecteur iPhone / Android s'affichait sur
   ordinateur, où il ne sert à rien (défaut constaté le 2026-09-07). */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

/* Les liens posés dans le texte courant (sans classe) : bleu foncé, souligné
   discret qui se renforce au survol. Les boutons, la navigation et le pied ont
   leurs propres règles. */
main a:not([class]) {
  color: var(--accent-fonce);
  text-decoration: underline;
  text-decoration-color: var(--accent-lisere);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--duree-rapide) ease, text-decoration-color var(--duree-rapide) ease;
}

main a:not([class]):hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

::selection {
  background: var(--accent);
  color: var(--sur-accent);
}

/* Contour de focus visible au clavier uniquement (pas au clic souris). */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Les ancres (#tarifs…) s'arrêtent sous l'en-tête collant au lieu de dessous. */
section[id] {
  scroll-margin-top: var(--hauteur-entete);
}

/* =====================================================================
   3. COMPOSANTS
   ===================================================================== */

/* ---------- Logo ---------- */

/* Dessiné en CSS plutôt qu'importé en image : net à toutes les tailles, et
   rien à régénérer. Trois tailles : 40 px (par défaut), 32 px (--petit :
   pied de page, illustrations), 24 px (--mini : icône dans les faux écrans). */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--marine);
  color: var(--blanc);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--accent);
  transition: transform var(--transition-douce);
}

/* « flex: none » : le « O » est une <i> vide, donc un élément flexible sans
   contenu — sans cette ligne il se laisse écraser à 0 px de large dès que le
   badge devient un peu juste, et le logo affiche « BA » sans son rond bleu.
   Le cas s'est produit pour de vrai sur les supports imprimés (supports/). */
.logo i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.logo--petit {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 11px;
}

.logo--petit i {
  width: 8px;
  height: 8px;
}

.logo--mini {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 8px;
  gap: 1px;
}

.logo--mini i {
  width: 6px;
  height: 6px;
}

/* ---------- Bouton ---------- */

/* Toujours « bouton » + une variante : --principal (dégradé bleu, l'action
   qu'on veut), --clair (gris-bleu, action secondaire), --fantome (contour
   blanc, uniquement sur fond marine). */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-xs);
  min-height: 46px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--rayon-bouton);
  font: inherit;
  font-size: var(--taille-m);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duree-rapide) ease, background-color var(--duree-rapide) ease,
    box-shadow var(--duree-rapide) ease, border-color var(--duree-rapide) ease;
}

/* Même enfoncement que les boutons de l'app (PressableScale : 0.97). */
.bouton:active {
  transform: scale(0.97);
}

.bouton--principal {
  background: var(--degrade-accent);
  color: var(--sur-accent);
  box-shadow: var(--ombre-accent);
}

.bouton--principal:hover {
  box-shadow: var(--ombre-accent-survol);
  transform: translateY(-1px);
}

.bouton--clair {
  background: var(--fond-doux);
  color: var(--texte);
}

.bouton--clair:hover {
  background: var(--lisere-fort);
}

.bouton--fantome {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: var(--blanc);
}

.bouton--fantome:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

/* ---------- Badge ---------- */

/* Petite étiquette arrondie. --plein : dégradé bleu, pour signaler
   (« Le plus courant ») ; --doux : fond teinté, pour informer sans crier
   (« 1 mois d'essai gratuit ») ; --flottant : posée à cheval sur le bord
   supérieur de sa carte. */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--rayon-pastille);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--plein {
  background: var(--degrade-accent);
  color: var(--sur-accent);
  font-size: var(--taille-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 166, 255, 0.35);
}

.badge--doux {
  padding: 5px 14px;
  background: var(--accent-teinte);
  border: 1px solid var(--accent-lisere);
  color: var(--accent-fonce);
}

.badge--flottant {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------- Pastille ---------- */

/* Sélecteur à choix unique (iPhone / Android sur la page d'installation).
   Même anatomie que les pastilles de l'app : complètement arrondie, dégradé
   + halo quand elle est active. « .pastilles » est la rangée. */
.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--espace-l);
}

.pastille {
  font: inherit;
  font-size: var(--taille-m);
  font-weight: 600;
  color: var(--texte-secondaire);
  background: var(--surface);
  border: 1px solid var(--lisere-fort);
  border-radius: var(--rayon-pastille);
  padding: 10px 20px;
  cursor: pointer;
  transition: color var(--transition-douce), background var(--transition-douce),
    border-color var(--transition-douce), box-shadow var(--transition-douce);
}

.pastille:hover {
  color: var(--texte);
  border-color: var(--accent-lisere-survol);
}

.pastille.est-active {
  color: var(--sur-accent);
  background: var(--degrade-accent);
  border-color: transparent;
  box-shadow: var(--ombre-accent);
}

/* ---------- Carte ---------- */

/* LA surface du site : fond blanc, liseré fin, coins à 16 px. Tout ce qui
   ressemble à une carte (fonctionnalité, tarif, étape illustrée, bloc
   d'installation, entrée du sommaire) porte cette classe, puis ses variantes :
     --douce         aplat gris-bleu sans liseré (encadré neutre)
     --ombree        ombre portée au repos
     --interactive   se soulève au survol (uniquement si elle mène quelque part
                     ou si la grille entière réagit)
     --mise-en-avant liseré bleu épais + halo (le tarif recommandé) */
.carte {
  background: var(--surface);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-carte);
  padding: var(--espace-l);
}

.carte--douce {
  background: var(--fond-doux);
  border-color: transparent;
}

.carte--ombree {
  box-shadow: var(--ombre-carte);
}

.carte--interactive {
  transition: transform var(--transition-douce), box-shadow var(--transition-douce),
    border-color var(--transition-douce);
}

.carte--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-carte-survol);
  border-color: var(--accent-lisere-survol);
}

.carte--mise-en-avant {
  border: 2px solid var(--accent);
  box-shadow: var(--ombre-mise-en-avant);
}

/* Écrit après .carte--interactive:hover, et avec les deux classes, pour
   gagner : sinon la carte vedette perdrait son halo bleu au survol. */
.carte--interactive.carte--mise-en-avant:hover {
  border-color: var(--accent);
  box-shadow: var(--ombre-mise-en-avant-survol);
}

/* ---------- Note ---------- */

/* Paragraphe d'accompagnement en gris : précision sous un bouton, mention
   sous les tarifs. --discrete : un cran plus petit. */
.note {
  margin: 0;
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
  line-height: 1.55;
}

.note--discrete {
  font-size: var(--taille-s);
}

.note strong {
  color: var(--texte);
}

/* ---------- Bandeau ---------- */

/* Encart d'information cerné de bleu (« Phase de lancement » au-dessus des
   tarifs). Il existe parce que le paiement en ligne est fermé pour l'instant :
   le visiteur doit comprendre pourquoi il n'y a pas de bouton d'achat. */
.bandeau {
  max-width: var(--largeur-lecture);
  margin: 0 auto var(--espace-xl);
  padding: var(--espace-m) 20px;
  border: 1.5px solid var(--accent);
  border-radius: var(--rayon-carte);
  background: var(--accent-teinte);
  color: var(--texte);
  font-size: var(--taille-m);
  line-height: 1.55;
  text-align: left;
}

.bandeau strong {
  color: var(--accent-fonce);
}

/* ---------- Numéro ---------- */

/* Rond en dégradé qui numérote une étape. --petit dans le sommaire. */
.numero {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--degrade-accent);
  color: var(--sur-accent);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 166, 255, 0.35);
}

.numero--petit {
  width: 32px;
  height: 32px;
  font-size: var(--taille-s);
}

/* ---------- Lien de retour ---------- */

.lien-retour {
  display: inline-block;
  margin-bottom: var(--espace-xl);
  font-size: var(--taille-m);
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-fonce);
}

.lien-retour:hover {
  text-decoration: underline;
}

/* =====================================================================
   4. MISE EN PAGE
   ===================================================================== */

/* ---------- En-tête ---------- */

/* Collé en haut pendant le défilement, sur un fond légèrement translucide et
   flouté. La pleine largeur est obtenue avec un padding latéral calculé (au
   lieu d'un conteneur interne) pour ne pas avoir à modifier le HTML. */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  flex-wrap: wrap;
  padding: var(--espace-m) max(var(--gouttiere), calc((100% - var(--largeur-max)) / 2));
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-douce), box-shadow var(--transition-douce);
}

/* Classe posée par animations.js dès qu'on a quitté le haut de page. */
.entete.est-decollee {
  border-bottom-color: var(--lisere);
  box-shadow: var(--ombre-entete);
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--taille-xl);
  letter-spacing: 0.5px;
}

.marque:hover .logo {
  transform: rotate(-6deg) scale(1.05);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.nav a {
  position: relative;
  text-decoration: none;
  font-size: var(--taille-m);
  font-weight: 500;
}

/* Soulignement qui se déploie de gauche à droite au survol. */
.nav a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-douce);
}

.nav a:not(.bouton):hover::after {
  transform: scaleX(1);
}

.nav a:not(.bouton):hover {
  color: var(--accent-fonce);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--marine) 55%, var(--marine-clair));
  color: var(--blanc);
  padding: clamp(56px, 9vw, 88px) var(--gouttiere) clamp(64px, 10vw, 96px);
}

/* Motif « écailles » de l'application (clin d'œil au nom Boa), posé sur un
   calque séparé pour pouvoir le faire dériver lentement — comme une nage.
   animations.js y ajoute en plus un léger parallaxe au défilement.

   Le SVG embarqué reproduit EXACTEMENT le motif de l'app
   (src/components/screen-background.tsx) : tuile de 22×22, demi-écailles de
   rayon 8 ouvertes vers le bas, en trait de 1px (pas de forme pleine),
   rangée du milieu décalée d'une demi-tuile pour le quinconce. Seule la
   couleur diffère du mode sombre de l'app : bleu vif translucide, plus
   lisible sur le dégradé du hero qu'un bleu profond. */
.hero::before {
  content: "";
  position: absolute;
  inset: -80px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cg fill='none' stroke='rgba(0,166,255,0.16)' stroke-width='1'%3E%3Cpath d='M-8 0A8 8 0 0 0 8 0'/%3E%3Cpath d='M14 0A8 8 0 0 0 30 0'/%3E%3Cpath d='M3 11A8 8 0 0 0 19 11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 22px 22px;
  animation: derive-ecailles 60s linear infinite;
  /* --parallaxe est pilotée par animations.js au défilement. */
  transform: translateY(var(--parallaxe, 0px));
  pointer-events: none;
}

/* Halo lumineux derrière le titre, couleur du « O » du logo. */
.hero::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 480px;
  background: radial-gradient(closest-side, rgba(0, 166, 255, 0.22), transparent);
  pointer-events: none;
}

@keyframes derive-ecailles {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44px 88px;
  }
}

.hero-contenu {
  position: relative;
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  text-align: center;
}

.hero h1 {
  font-size: var(--titre-hero);
  margin-bottom: 20px;
}

.hero-accroche {
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--texte-sur-marine);
  margin-bottom: var(--espace-xl);
}

.hero-precision {
  margin-top: 22px;
  font-size: var(--taille-s);
  color: var(--texte-sur-marine-doux);
}

/* Rangée de boutons centrée (hero, page merci). */
.actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Entrée en cascade au chargement (même esprit que le FadeInDown de l'app).
   Purement CSS : joue aussi sans JavaScript, et pas du tout si la personne
   a demandé à réduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  .hero-contenu > * {
    animation: entree-douce 0.7s var(--courbe-douce) both;
  }

  .hero-contenu > *:nth-child(2) {
    animation-delay: 0.12s;
  }

  .hero-contenu > *:nth-child(3) {
    animation-delay: 0.24s;
  }

  .hero-contenu > *:nth-child(4) {
    animation-delay: 0.36s;
  }
}

@keyframes entree-douce {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Sections (page d'accueil) ---------- */

.section {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 72px) var(--gouttiere);
}

/* Bande gris-bleu pleine largeur ; le contenu, lui, reste dans la largeur max. */
.section--alt {
  max-width: none;
  background: var(--fond-doux);
}

.section--alt > * {
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
}

.section h2 {
  font-size: var(--titre-2);
  text-align: center;
  margin-bottom: 14px;
}

.sous-titre {
  text-align: center;
  color: var(--texte-secondaire);
  max-width: 640px;
  margin: 0 auto var(--espace-2xl);
}

.section h2 + .grille,
.section h2 + .etapes {
  margin-top: var(--espace-2xl);
}

/* Les notes posées directement dans une section (sous les tarifs) sont
   centrées et espacées ; une note discrète qui suit se rapproche. L'ordre de
   ces deux règles compte. */
.section > .note {
  text-align: center;
  max-width: var(--largeur-lecture);
  margin: var(--espace-xl) auto 0;
}

.section > .note--discrete {
  margin-top: var(--espace-s);
}

/* ---------- Pages de lecture ---------- */

/* Enveloppe des pages qu'on lit d'un bout à l'autre : textes légaux,
   « Installer BOA », « Bien démarrer ». Volontairement PAS .section : les
   règles d'apparition au défilement ne s'appliquent pas ici — si le script
   échouait, un texte légal ou une marche à suivre resterait invisible, ce
   qui est inacceptable pour ce qu'on lit quand on est bloqué.
     --large   960 px au lieu de 760 (le guide, avec ses illustrations)
     --legale  typographie des textes juridiques (h2 rapprochés, listes) */
.page {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: var(--espace-3xl) var(--gouttiere) 80px;
}

.page--large {
  max-width: var(--largeur-guide);
}

.page h1 {
  font-size: var(--titre-1);
  margin-bottom: var(--espace-s);
}

.page h2 {
  font-size: var(--taille-xl);
  margin-bottom: var(--espace-m);
}

.page-intro {
  color: var(--texte-secondaire);
  font-size: var(--taille-l);
  max-width: 640px;
  margin-bottom: var(--espace-xl);
}

.page-date {
  color: var(--texte-secondaire);
  font-size: var(--taille-s);
  margin-bottom: var(--espace-2xl);
}

.page--legale h1 {
  margin-bottom: var(--espace-xs);
}

.page--legale h2 {
  margin: 36px 0 var(--espace-s);
}

.page--legale p {
  margin-bottom: var(--espace-s);
}

.page--legale ul {
  margin: 0 0 var(--espace-s);
  padding-left: 22px;
}

.page--legale li {
  margin-bottom: 10px;
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--marine);
  color: var(--texte-sur-marine);
  padding: var(--espace-2xl) var(--gouttiere);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.pied-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanc);
  font-weight: 700;
}

.pied-liens {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}

.pied-liens a {
  font-size: var(--taille-m);
  text-decoration: none;
  transition: color var(--duree-rapide) ease;
}

.pied-liens a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

.pied-mentions {
  font-size: 13px;
  color: var(--texte-sur-marine-doux);
}

/* =====================================================================
   5. BLOCS
   ===================================================================== */

/* ---------- Grille de cartes (fonctionnalités, tarifs) ---------- */

.grille {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Les cartes des tarifs font toutes la même hauteur, bouton aligné en bas. */
.grille--tarifs {
  align-items: stretch;
}

.grille h3 {
  font-size: var(--titre-3);
  margin-bottom: var(--espace-xs);
}

/* Le paragraphe qui suit directement un titre de carte : la description. */
.grille h3 + p {
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
}

/* ---------- Étapes (« Comment un club démarre ») ---------- */

.etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-l);
}

.etapes > li {
  display: flex;
  gap: var(--espace-m);
  align-items: flex-start;
}

.etapes h3 {
  font-size: var(--taille-l);
  margin-bottom: 6px;
}

.etapes p {
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
}

/* Version illustrée : chaque étape est une carte, dessin au-dessus du texte. */
.etapes--illustrees > .carte {
  flex-direction: column;
  gap: var(--espace-m);
  padding: var(--espace-m);
}

.etapes--illustrees .illu {
  min-height: 200px;
  align-self: stretch;
}

.etapes--illustrees .etape-entete {
  margin-bottom: 6px;
}

.etapes--illustrees h3 {
  margin-bottom: 0;
}

/* ---------- Tarif ---------- */

/* Une carte de tarif : titre, taille du club, prix, badge d'essai, liste
   des inclus, bouton. Les trois paliers existent à TROIS endroits qui doivent
   rester d'accord : index.html, server/src/lib/abonnement.ts et Stripe
   (docs/offres-stripe.md). */
.tarif {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.tarif h3 {
  font-size: var(--taille-xl);
  margin-bottom: var(--espace-2xs);
}

.tarif-taille {
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
}

.tarif-prix {
  margin: 18px 0 20px;
}

/* Le prix est l'information clé de la carte : marine plein, pas gris. */
.tarif-montant {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--texte);
}

.tarif-periode {
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
  margin-left: 6px;
}

/* L'essai gratuit vient du tarif Stripe (docs/offres-stripe.md) : c'est
   l'argument qui lève l'hésitation, donc il vit sous le prix, pas noyé dans
   les inclus. En version douce pour ne pas concurrencer le prix. */
.tarif .badge--doux {
  margin: -8px 0 18px;
}

.tarif-inclus {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--espace-l);
  text-align: left;
  display: grid;
  gap: 10px;
  flex: 1;
}

.tarif-inclus li {
  position: relative;
  padding-left: 26px;
  font-size: var(--taille-m);
  color: var(--texte-secondaire);
}

/* Coche bleue dessinée en CSS (un coin de bordure tourné de 45°). */
.tarif-inclus li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- Contact ---------- */

.contact-email {
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
}

.contact-email a {
  color: var(--accent-fonce);
  text-decoration: none;
}

.contact-email a:hover {
  text-decoration: underline;
}

/* ---------- Sommaire (« Bien démarrer ») ---------- */

/* Quatre cartes cliquables, une par chapitre. */
.sommaire {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--espace-l);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.sommaire .carte {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  min-height: 64px;
  padding: var(--espace-s) var(--espace-m);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--taille-m);
}

/* Plus petites que les cartes de la grille, elles se soulèvent moins. */
.sommaire .carte--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-carte);
}

/* ---------- Chapitre (« Bien démarrer ») ---------- */

.chapitre {
  padding: var(--espace-2xl) 0 var(--espace-xs);
  border-top: 1px solid var(--lisere);
  scroll-margin-top: calc(var(--hauteur-entete) + 8px);
}

.chapitre h2 {
  font-size: clamp(24px, 3.5vw, 30px);
  margin-bottom: var(--espace-xs);
}

.chapitre-intro {
  color: var(--texte-secondaire);
  max-width: 680px;
  margin-bottom: 28px;
}

.chapitre-intro strong {
  color: var(--texte);
}

/* Ce qui suit un chapitre : un bouton et/ou une note, sur une même ligne. */
.chapitre-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s) 18px;
  margin-top: var(--espace-l);
}

/* ---------- Parcours illustré ---------- */

/* Une étape par carte, illustration à gauche et texte à droite (empilés sur
   téléphone). Une seule colonne, toujours : on suit les gestes dans l'ordre,
   un après l'autre — trois colonnes côte à côte cassent cette lecture. */
.parcours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}

.etape-illustree {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--espace-l);
  align-items: center;
  padding: 20px;
}

.etape-illustree .illu {
  min-height: 210px;
}

.etape-texte {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
}

.etape-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
}

.etape-texte h3 {
  font-size: 19px;
}

.etape-texte p {
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
}

.etape-texte strong {
  color: var(--texte);
}

.etape-texte ul {
  margin: var(--espace-2xs) 0 0;
  padding-left: 18px;
  display: grid;
  gap: var(--espace-2xs);
  color: var(--texte-secondaire);
  font-size: var(--taille-m);
}

/* ---------- Page « Installer BOA » ---------- */

/* Un bloc par plateforme (iPhone / Android), affiché ou masqué par le script
   de la page selon le téléphone reconnu. */
.bloc-plateforme {
  margin-bottom: var(--espace-l);
}

.bloc-plateforme .parcours {
  margin-bottom: var(--espace-m);
}

/* Affiché uniquement sur un ordinateur : le QR code vers l'app. */
.bloc-ordinateur {
  margin-bottom: var(--espace-l);
  text-align: center;
}

.bloc-ordinateur h2 {
  margin-bottom: var(--espace-s);
}

.bloc-ordinateur p {
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-m);
}

.qr-installer {
  display: block;
  margin: 0 auto var(--espace-s);
  width: 180px;
  height: 180px;
  background: var(--surface);
  border-radius: 12px;
  padding: 10px;
}

/* ---------- Appel ---------- */

/* Bouton d'action centré en fin de page ou de section, avec sa note. */
.appel {
  text-align: center;
  margin-top: var(--espace-xl);
}

.appel .note {
  margin-top: var(--espace-m);
}

/* =====================================================================
   6. ILLUSTRATIONS SCHÉMATIQUES (onboardings)
   ===================================================================== */

/* Les mêmes briques que dans l'app (src/components/illustrations/kit.tsx), en
   CSS : un cadre de téléphone (.illu-ecran), des lignes grises à la place du
   texte (.illu-ligne), et l'élément à toucher cerclé de bleu (.illu-cible).
   Pas d'images : une illustration se corrige en changeant trois mots dans le
   HTML, et reste nette à toutes les tailles. Tout est décoratif (aria-hidden
   sur le conteneur) : le sens est porté par le texte de l'étape à côté. */

.illu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 20px;
  background: var(--fond-doux);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}

.illu-ecran {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 148px;
  height: 184px;
  background: var(--surface);
  border: 2px solid var(--cadre);
  border-radius: var(--rayon-ecran);
  overflow: hidden;
  text-align: left;
}

.illu-contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  min-height: 0;
}

.illu-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.illu-ligne {
  flex: none;
  display: block;
  height: 6px;
  border-radius: 3px;
  width: var(--l, 70%);
  background: var(--illu-trait);
}

.illu-ligne--forte {
  height: 8px;
  border-radius: 4px;
  background: var(--illu-trait-fort);
}

.illu-carte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-s);
  background: var(--surface);
}

.illu-carte--douce {
  background: var(--fond-doux);
  border-color: transparent;
}

.illu-large {
  align-self: stretch;
}

.illu-flex {
  flex: 1;
  min-width: 0;
}

.illu-colonne {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.illu-texte {
  display: block;
  font-size: 9px;
  line-height: 12px;
  font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.illu-texte--gras {
  font-weight: 700;
}

.illu-texte--secondaire {
  color: var(--texte-secondaire);
}

.illu-texte--accent {
  color: var(--accent);
}

.illu-texte--multi {
  white-space: normal;
}

.illu-texte--centre {
  text-align: center;
}

.illu-code {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 2px;
}

.illu-rangee {
  display: flex;
  align-items: center;
  gap: 4px;
}

.illu-rangee--entre {
  justify-content: space-between;
}

.illu-rangee--fin {
  justify-content: flex-end;
}

.illu-rond {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--degrade-accent);
  color: var(--sur-accent);
  font-size: 9px;
  font-weight: 700;
}

.illu-rond--doux {
  background: var(--fond-doux);
  color: var(--texte-secondaire);
}

.illu-rond--petit {
  width: 14px;
  height: 14px;
}

.illu-rond--grand {
  width: 32px;
  height: 32px;
}

.illu-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--degrade-accent);
  color: var(--sur-accent);
  font-size: 9px;
  line-height: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.illu-bouton--doux {
  background: var(--fond-doux);
  border: 1px solid var(--lisere-fort);
}

.illu-pastille {
  border-radius: var(--rayon-pastille);
  padding: 0 6px;
}

.illu-icone {
  flex: none;
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--texte-secondaire);
}

.illu-icone--accent {
  color: var(--accent);
}

.illu-icone--marine {
  color: var(--texte);
}

.illu-icone--succes {
  color: var(--succes);
}

.illu-icone--8 {
  width: 8px;
  height: 8px;
}

.illu-icone--14 {
  width: 14px;
  height: 14px;
}

.illu-icone--20 {
  width: 20px;
  height: 20px;
}

/* La cible : un anneau bleu fixe, doublé d'un anneau qui s'élargit en
   s'effaçant. Le fixe reste si les animations sont coupées. */
.illu-cible {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
}

.illu-cible::before,
.illu-cible::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
}

.illu-cible::after {
  animation: illu-onde 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.illu-cible--rond::before,
.illu-cible--rond::after {
  border-radius: var(--rayon-pastille);
}

.illu-cible--large {
  display: flex;
  align-self: stretch;
}

@keyframes illu-onde {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

.illu-barre {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  background: var(--fond-doux);
}

.illu-barre--haut {
  border-bottom: 1px solid var(--lisere-fort);
}

.illu-barre--bas {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 6px;
  border-top: 1px solid var(--lisere-fort);
}

.illu-adresse {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--lisere-fort);
  font-size: 8px;
  color: var(--texte-secondaire);
  white-space: nowrap;
  overflow: hidden;
}

.illu-outils {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 20px;
  padding: 0 2px;
}

.illu-onglets {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 24px;
  border-top: 1px solid var(--lisere);
}

.illu-estompe {
  opacity: 0.35;
}

.illu-panneau {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 8px 6px;
  background: var(--surface);
  border-top: 1px solid var(--lisere);
  border-radius: 12px 12px 0 0;
}

.illu-poignee {
  align-self: center;
  width: 24px;
  height: 4px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: var(--illu-trait-fort);
}

.illu-menu {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 110px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-s);
  box-shadow: var(--ombre-carte);
}

.illu-ligne-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 14px;
}

.illu-dialogue {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 44px;
  gap: 6px;
}

.illu-grille-icones {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  justify-content: space-between;
  row-gap: 14px;
  padding-top: 4px;
}

.illu-icone-vide {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--fond-doux);
  border: 1px solid var(--lisere-fort);
}

.illu-icone-boa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: -12px;
}

.illu-icone-boa .illu-texte {
  font-size: 7px;
  line-height: 8px;
}

.illu-dock {
  display: flex;
  /* .illu-carte empile en colonne : ici on veut les quatre icônes côte à côte. */
  flex-direction: row;
  justify-content: space-between;
  padding: 6px;
  margin-top: auto;
}

.illu-semaine {
  display: flex;
  justify-content: space-between;
  gap: 3px;
}

.illu-jour {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 18px;
  border-radius: 4px;
  background: var(--fond-doux);
  border: 1px solid var(--lisere-fort);
  font-size: 9px;
  font-weight: 700;
  color: var(--texte-secondaire);
}

.illu-jour--actif {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
}

.illu-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 5px;
  background: var(--fond-doux);
}

.illu-palette {
  display: flex;
  gap: 6px;
}

.illu-couleur {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.illu-couleur--choisie {
  border-color: rgba(13, 39, 71, 0.35);
}

.illu-documents {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.illu-document {
  width: 80px;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
}

.illu-flux {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.illu-flux-etape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  text-align: center;
}

.illu-empile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* =====================================================================
   7. MOUVEMENT
   ===================================================================== */

/* ---------- Apparition au défilement ---------- */

/* animations.js pose .apparition sur les titres, cartes et étapes, puis
   .est-visible quand l'élément entre dans l'écran. --retard échelonne les
   éléments d'une même grille pour l'effet de cascade. */
html.js-actif .apparition {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duree-lente) ease var(--retard, 0s),
    transform var(--duree-lente) var(--courbe-douce) var(--retard, 0s);
}

html.js-actif .apparition.est-visible {
  opacity: 1;
  transform: none;
}

/* Le survol d'une carte utilise les mêmes propriétés que son apparition :
   tant qu'elle n'est pas visible, on garde sa position de départ. */
html.js-actif .carte--interactive.apparition:not(.est-visible):hover {
  transform: translateY(16px);
}

/* ---------- Animations réduites ---------- */

/* Si la personne a demandé au système de réduire les animations, tout est
   coupé d'un bloc : dérive des écailles, cascades, survols qui bougent. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html.js-actif .apparition {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   8. TÉLÉPHONE
   ===================================================================== */

@media (max-width: 700px) {
  :root {
    --gouttiere: 20px;
    /* L'en-tête passe sur deux lignes (logo puis navigation). */
    --hauteur-entete: 128px;
  }

  .entete {
    justify-content: center;
    padding-top: var(--espace-s);
    padding-bottom: var(--espace-s);
  }

  .nav {
    gap: var(--espace-m);
    justify-content: center;
  }

  .page {
    padding: var(--espace-2xl) var(--gouttiere) 64px;
  }

  .etape-illustree {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
    padding: 14px;
  }
}