/* ══════════════════════════════════════════════════════════════════════
 * Site public Sol-epay — direction « Éditorial FCFA », retenue le 21/08/2026
 * parmi quatre propositions.
 *
 * ## Sa grammaire
 *
 * — une GRILLE VISIBLE : des rangées découpées en cellules, séparées par des
 *   filets d'un pixel qui vont d'un bord à l'autre de l'écran ;
 * — des sections numérotées 01→11, comme un document plutôt qu'une brochure ;
 * — AUCUNE ombre, AUCUN coin arrondi, aucune carte flottante. La hiérarchie
 *   vient de la taille du texte et des aplats, jamais de la profondeur ;
 * — des aplats francs — ambre, violet, encre — posés sur une cellule entière ;
 * — les MONTANTS sont les héros : ce sont eux qui portent les plus grands
 *   corps de la page, pas les titres.
 *
 * ## Ce qu'elle exclut, et pourquoi
 *
 * La direction précédente était le canon de la landing SaaS financière : fond
 * doux, cartes blanches à grand rayon, ombres longues. Correcte, et
 * interchangeable avec trois cents autres. Celle-ci se reconnaît — c'est tout
 * ce qu'on lui demande de plus.
 *
 * Pas de dégradé, pas de verre, pas d'ombre portée : chacun de ces effets
 * adoucit un contraste, et cette page ne tient que par ses contrastes.
 *
 * ## La seule couleur qui échappe au noir et blanc
 *
 * Les logos d'opérateurs. Une marque se reconnaît à sa couleur ; blanchis ou
 * désaturés, MTN, Moov et Celtiis deviennent cinq taches indistinctes — c'est
 * exactement ce qui s'était produit dans la première version de la maquette.
 * Toutes les autres photos passent en noir et blanc (`.photo-nb`).
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  --encre: #14121A;
  --encre-2: #46424F;
  --encre-3: #8A8598;
  --trait: #E4E1DC;
  --trait-2: #C7C2BA;
  --creme: #F9F7F3;
  --violet: #7C3AED;
  --violet-2: #5B21B6;
  --violet-doux: #F3F0FF;
  --ambre: #F4BB5F;
  --blanc: #FFFFFF;

  --titre: 'Bricolage Grotesque', 'Montserrat Alternates', -apple-system, sans-serif;
  --corps: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Une seule marge horizontale pour toute la page : c'est elle qui fait que
     les filets de la grille s'alignent d'une rangée à l'autre. La changer à un
     seul endroit désaligne toute la page, ce qui se voit immédiatement. */
  --marge: 32px;
  --colonne: 400px;
}

*, *::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(--blanc);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
/* Pas de `overflow-x: clip` ici, et c'est délibéré : posé sur `html`, il coupe
   le défilement programmatique — `scrollTop` reste à zéro, les ancres internes
   n'aboutissent plus, et les animations liées à la position de défilement
   n'ont plus de scroller à observer. Un débordement horizontal se corrige à sa
   source ; le masquer casse davantage que ce qu'il cache. */
html, body { max-width: 100%; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-2); }

/* Le filet de focus reprend le trait de la grille plutôt qu'un halo arrondi :
   un contour à coins ronds sur une page sans aucun rayon signale « élément
   étranger » avant de signaler « élément actif ». */
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: 21px; line-height: 1.1; }
p { margin: 0; }

/* Le premier élément focusable de la page. Il ne se montre qu'au clavier. */
.saut {
  position: absolute;
  left: -9999px;
  z-index: 60;
  padding: 12px 20px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 500;
}
.saut:focus { left: 0; top: 0; color: var(--blanc); }

/* ── La grille ─────────────────────────────────────────────────────────
 * Une `.grille` est une rangée bord à bord, fermée en bas par un trait fort.
 * Les `.cellule` qu'elle contient sont séparées par des filets clairs. C'est
 * toute la mise en page du site : il n'y a pas de conteneur centré à largeur
 * maximale, la grille touche les deux bords de la fenêtre. */

.grille {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--encre);
}

.cellule {
  padding: 56px var(--marge);
  border-right: 1px solid var(--trait);
  min-width: 0;   /* sans quoi un long titre force la rangée à déborder */
}
.cellule:last-child { border-right: none; }

/* La colonne de gauche des sections : intitulé, titre, phrase d'explication.
   Largeur fixe pour que TOUTES les sections s'alignent verticalement — c'est
   cet alignement d'une section à l'autre qui fait lire la page comme un
   document plutôt que comme une suite de blocs. */
.colonne-titre { flex: 0 0 var(--colonne); }
.cellule-large { flex: 1 1 auto; }
.cellule-etroite { flex: 0 0 auto; padding: 0 var(--marge); display: flex; align-items: center; }

.creme { background: var(--creme); }
/* La quatrième cellule du registre 04→07 : l'aplat violet marque le seul bloc
   qui parle du compte PERSONNEL au milieu de sections qui parlent boutique.
   La couleur y remplace un titre de rupture. */
.cellule-violette { background: var(--violet); color: var(--blanc); }
.cellule-violette h3 { color: var(--blanc); }
.cellule-violette .num { color: rgba(255, 255, 255, 0.62); }
.cellule-violette .corps { color: rgba(255, 255, 255, 0.78); }
.encre { background: var(--encre); color: var(--blanc); }
.encre h2, .encre h3 { color: var(--blanc); }
.encre .num { color: rgba(255, 255, 255, 0.44); }

.grille-deux, .grille-trois, .grille-quatre {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
.grille-deux > *, .grille-trois > *, .grille-quatre > * { flex: 1 1 0; min-width: 0; }

/* ── Le vocabulaire typographique ──────────────────────────────────────
 * Trois registres, et rien d'autre : l'intitulé (`.num`), le chiffre
 * (`.fcfa`) et le corps de lecture (`.corps`). Toute la page s'écrit avec. */

.num {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.num-violet { color: var(--violet); }

.fcfa {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.86;
  /* Chiffres à chasse fixe : sans cela, `10 400 F` et `10 000 F` posés l'un
     sous l'autre ne s'alignent pas, et c'est précisément la comparaison de ces
     trois montants que la section demande de faire. */
  font-variant-numeric: tabular-nums;
}
/* Un montant qui passe à la ligne — « 10 000 » d'un côté, « F » de l'autre —
   cesse d'être lisible comme une somme. Il rétrécit plutôt que de casser. */
.fcfa { white-space: nowrap; }
.fcfa-xs { font-size: 22px; }
.fcfa-s  { font-size: 30px; }
.fcfa-m  { font-size: clamp(38px, 4vw, 58px); }
.fcfa-l  { font-size: clamp(52px, 6vw, 92px); }
.fcfa-xl { font-size: clamp(64px, 7.5vw, 104px); }
.fcfa-violet { color: var(--violet); }

/* 660 px, soit environ 75 signes : au-delà, l'œil perd la ligne suivante en
   revenant à la marge. Un texte légal se lit déjà à contrecœur. */
.corps {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--encre-2);
  max-width: 660px;
}
.corps + .corps { margin-top: 16px; }
.titre-carte { font-size: 24px; margin-top: 22px; }
.enonce-fort { font-weight: 600; color: var(--encre); }

/* ── Actions ───────────────────────────────────────────────────────────
 * Deux boutons collés l'un à l'autre, sans rayon ni ombre. Hauteur 58px :
 * au-dessus des 44px de cible tactile minimale, sur une page qui sera lue en
 * grande majorité sur un téléphone. */

.bouton, .bouton-fantome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 30px;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--encre);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .bouton, .bouton-fantome { transition: none; }
}
.bouton { background: var(--violet); border-color: var(--violet); color: var(--blanc); }
.bouton:hover { background: var(--violet-2); border-color: var(--violet-2); color: var(--blanc); }
.bouton-fantome { background: transparent; color: var(--encre); border-left: none; }
.bouton-fantome:hover { background: var(--encre); color: var(--blanc); }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: var(--violet-doux);
  color: var(--violet-2);
  font-size: 12.5px;
  font-weight: 500;
}
.pastille::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--violet);
}

/* Le seul aplat posé DANS une ligne de texte. Les marges négatives compensent
   le rembourrage pour que le mot reste aligné sur la colonne. */
.surligne { background: var(--ambre); padding: 0 12px; margin-left: -12px; }

.photo-nb { filter: grayscale(1) contrast(1.08); }

/* ── Barre haute ───────────────────────────────────────────────────────
 * Non collante : une barre fixe sur une page qui se lit comme un document
 * ampute la première ligne de chaque section vers laquelle on saute. */

.barre {
  display: flex;
  align-items: stretch;
  height: 76px;
  border-bottom: 1px solid var(--encre);
}
/* Le logo officiel embarque son fond violet : sa cellule est donc violette et
   il la remplit bord à bord, sans marge propre. Poser ce fichier sur du blanc
   y aurait dessiné un rectangle de couleur au milieu d'une page qui n'en a
   aucun. */
/* Le logo embarque son fond violet ; la cellule porte exactement le même
   (#7C3AED des deux côtés), si bien que la jonction ne se voit pas. Il respire
   donc au lieu de remplir sa cellule bord à bord : un logo qui touche ses
   quatre bords pèse plus lourd que tout le reste de la barre. */
.marque {
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: var(--violet);
  border-right: 1px solid var(--violet);
}
.marque img {
  height: 38px;
  width: auto;
  display: block;
}
/* Caché tant que la barre a la place d'afficher les liens. Le gabarit le pose
   déjà `hidden` ; cette règle prend le relais une fois le script passé. */
.hamburger { display: none; }

.liens { display: flex; }
.liens a {
  display: flex;
  align-items: center;
  padding: 0 26px;
  border-right: 1px solid var(--trait);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--encre);
}
.liens a:hover { background: var(--creme); color: var(--encre); }
.barre-action {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 34px;
  background: var(--encre);
  color: var(--blanc);
  font-size: 13.5px;
  font-weight: 500;
}
.barre-action:hover { background: var(--violet); color: var(--blanc); }

/* ── 01 · Accroche ─────────────────────────────────────────────────────── */

.grille-hero .cellule-large { padding-bottom: 48px; }
.hero-titre {
  font-size: clamp(46px, 9vw, 128px);
  margin-top: 34px;
}
.hero-bas {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: 54px;
}
.hero-dit { font-size: 17px; line-height: 1.6; color: var(--encre-2); max-width: 430px; }
.hero-actions { display: flex; }

.colonne-fiches {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--trait);
}
.cellule-fiche {
  padding: 30px var(--marge);
  border-right: none;
  border-bottom: 1px solid var(--trait);
}
.cellule-fiche .fcfa { margin-top: 16px; }
.fiche-detail { font-size: 13px; color: var(--encre-3); margin-top: 12px; }
/* La photo occupe ce qui reste de la colonne : sa hauteur dépend du titre à
   gauche, qui varie avec la largeur de l'écran. */
.cellule-photo { flex: 1 1 auto; min-height: 150px; overflow: hidden; }
.cellule-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }

/* ── Bandeau des opérateurs ────────────────────────────────────────────── */

.bandeau { align-items: center; min-height: 92px; }
.bandeau .cellule-etroite { border-right: 1px solid var(--trait); align-self: stretch; }
.bandeau-logos {
  display: flex;
  align-items: center;
  gap: 52px;
  flex-wrap: wrap;
  padding: 16px 40px;
  flex: 1 1 auto;
}
.bandeau-logos img { height: 30px; width: auto; }
.bandeau-nom { font-size: 15px; font-weight: 500; color: var(--encre-2); }
.bandeau-separateur { width: 1px; height: 30px; background: var(--trait-2); }
.bandeau-fin {
  border-right: none;
  border-left: 1px solid var(--trait);
  font-size: 13px;
  color: var(--encre-3);
}

/* ── Photo pleine largeur ──────────────────────────────────────────────── */

.photo-bande { position: relative; height: 440px; overflow: hidden; border-bottom: 1px solid var(--encre); }
.photo-bande img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* Le titre est posé sur un aplat opaque plutôt que sur un voile dégradé : sur
   une photo de marché, un texte blanc en surimpression devient illisible dès
   qu'un parasol clair passe derrière. */
.photo-bande-titre {
  position: absolute;
  left: var(--marge);
  bottom: 40px;
  max-width: 720px;
  background: var(--encre);
  color: var(--blanc);
  padding: 18px 26px;
  font-size: clamp(24px, 3vw, 40px);
}
/* Sur un aplat, pas en surimpression : le bas de cette photo de marché est
   clair, et un texte blanc posé dessus disparaissait. */
.photo-credit {
  position: absolute;
  right: var(--marge);
  bottom: 40px;
  padding: 6px 10px;
  background: rgba(20, 18, 26, 0.72);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86);
}

/* ── Registre en trois temps, et grille des montants ───────────────────── */

/* Le registre : trois rappels courts entre les tarifs et les questions. C'est
   une liste de définitions (`dl`/`dt`/`dd`) parce que c'en est une — et sans
   règle propre, elle retombait sur le rendu par défaut du navigateur, collée
   au bord gauche, hors de la grille, avec ses `dd` en retrait. */
.registre {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}
.registre > div {
  flex: 1 1 0;
  min-width: 0;
  padding: 36px var(--marge);
  border-right: 1px solid var(--trait);
}
.registre > div:last-child { border-right: none; }
.registre dt {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.registre dd {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--encre-2);
}
.registre .fcfa { color: var(--violet); }

/* Variante posée DANS une rangée sombre. Elle héritait d'un fond crème et de
   titres blancs — texte blanc sur crème, illisible, et invisible aux tests :
   rien ne casse, la page se rend, seul l'œil s'en aperçoit. Elle garde donc le
   fond de sa rangée et éclaircit ses propres filets. */
.registre-sombre > div { border-right-color: rgba(255, 255, 255, 0.16); }
.encre .registre-sombre dt { color: var(--blanc); }
.encre .registre-sombre dd { color: rgba(255, 255, 255, 0.66); }

.montants { display: flex; flex-direction: column; flex: 0 0 560px; }
.montant-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 30px var(--marge);
  border-bottom: 1px solid var(--trait);
}
.montant-ligne:last-child { border-bottom: none; }
.montant-libelle { font-size: 14px; color: var(--encre-3); min-width: 0; }
/* En bloc, sinon la précision se colle au libellé — « Votre client paiedont
   ≈ 4 % de frais opérateur », lu tel quel en production. */
.montant-libelle small { display: block; font-size: 12.5px; color: var(--trait-2); margin-top: 3px; }
.montant-ligne-vous .montant-libelle small { color: rgba(20, 18, 26, 0.55); }
/* La ligne qui compte : c'est le montant que le commerçant touche vraiment,
   et la seule chose que la section doit faire retenir. */
.montant-ligne-vous {
  background: var(--ambre);
  border-bottom: 1px solid var(--encre);
  padding: 34px var(--marge);
}
.montant-ligne-vous .montant-libelle { color: var(--encre); font-weight: 500; }

/* ── 09 · Questions ────────────────────────────────────────────────────── */

.questions { display: flex; flex-direction: column; flex: 1 1 auto; }
.question {
  display: flex;
  gap: 40px;
  padding: 30px var(--marge);
  border-bottom: 1px solid var(--trait);
}
.question:last-child { border-bottom: none; }
.question-num { color: var(--trait-2); padding-top: 3px; flex: 0 0 auto; }
.question h3 { font-size: 22px; }
.question .corps { margin-top: 12px; max-width: 720px; }

/* ── 10 · Équipe ───────────────────────────────────────────────────────── */

.equipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 auto; }
.equipe-membre { padding: 32px; }
.equipe-membre:last-child { border-right: none; background: var(--creme); }
/* Cadre 4/5 imposé : les portraits arriveront de sources différentes, prises à
   des moments différents. Sans ratio fixe, la rangée devient un escalier. */
.equipe-portrait {
  aspect-ratio: 4 / 5;
  background: #EDEAE4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.equipe-portrait img { width: 100%; height: 100%; object-fit: cover; }
.equipe-initiales {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 60px;
  letter-spacing: -0.05em;
  color: var(--trait-2);
}
.equipe-nom { font-size: 19px; margin-top: 20px; }
.equipe-role { font-size: 13.5px; color: var(--encre-3); margin-top: 6px; }

/* ── 11 · Liste d'attente ──────────────────────────────────────────────── */

.cellule-formulaire { flex: 0 0 620px; padding: 64px var(--marge); border-right: none; }
.formulaire { display: flex; flex-direction: column; }

/* La bascule remplace deux champs concurrents : demander « e-mail OU
   téléphone » dans deux cases laisse le visiteur choisir laquelle remplir, et
   beaucoup remplissent les deux ou aucune. */
.bascule { display: flex; flex-wrap: wrap; border: none; margin: 0 0 20px; padding: 0; }
.bascule .champ-libelle { width: 100%; }
.bascule-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--encre);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--encre-2);
  cursor: pointer;
}
.bascule-option + .bascule-option { border-left: none; }
/* L'état sélectionné doit rester lisible sans la couleur : le fond passe en
   encre pleine, pas seulement en teinte. */
.bascule-option:has(input:checked) { background: var(--encre); color: var(--blanc); }
.bascule-option input { accent-color: var(--violet); }

/* La bascule ne cache rien par défaut : les deux champs restent là. C'est le
   repli voulu — un navigateur sans `:has()` affiche les deux, et le formulaire
   sait déjà n'exiger que celui qui correspond au choix.
   Là où `:has()` fonctionne, on tient la promesse faite au visiteur : UN champ
   à remplir. Poser cette logique en JavaScript aurait laissé, chez qui ne
   l'exécute pas, deux champs concurrents sans indication de priorité. */
.formulaire:has(input[name='moyen'][value='telephone']:checked) .champ-groupe:has([name='email']),
.formulaire:has(input[name='moyen'][value='email']:checked) .champ-groupe:has([name='telephone']) {
  display: none;
}

.champ-groupe { display: flex; flex-direction: column; margin-top: 22px; }
.champ-libelle {
  font-family: var(--titre);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 10px;
}
.champ-facultatif { color: var(--trait-2); letter-spacing: 0; text-transform: none; }
.formulaire .champ,
.formulaire select,
.formulaire input[type='text'],
.formulaire input[type='email'],
.formulaire input[type='tel'] {
  height: 62px;
  padding: 0 18px;
  border: 1px solid var(--encre);
  border-radius: 0;      /* iOS arrondit les champs par défaut */
  background: var(--blanc);
  font-family: var(--corps);
  font-size: 17px;
  color: var(--encre);
  width: 100%;
}
.formulaire input::placeholder { color: var(--trait-2); }

/* Le menu déroulant natif ignore `height` et `font-size` tant qu'on ne lui
   retire pas son apparence système : sans ces trois lignes, il reste un
   contrôle de 22 px au milieu de champs qui en font 62, et la colonne
   entière donne l'impression d'un formulaire à moitié fini.

   La flèche est dessinée en dégradés plutôt qu'en image : rien à charger, et
   elle suit la couleur de l'encre si la charte change. */
.formulaire select {
  appearance: none;
  /* Place pour le chevron dessiné ci-dessous. */
  padding-right: 46px;
  cursor: pointer;
}

/* Le chevron est dessiné par le groupe, pas par le `select` : plusieurs
   moteurs — Safari sur iOS le premier, et le Chrome sans tête qui sert à
   vérifier ces pages — rendent les contrôles de formulaire avec un thème
   natif qui ignore `background-image`, même après `appearance: none`. Le
   fond du champ reste blanc, la flèche disparaît, et il ne reste aucune
   indication que ce champ s'ouvre.

   `pointer-events: none` est ce qui rend l'astuce sûre : sans lui, le
   triangle avalerait le clic posé exactement là où l'œil vise pour ouvrir
   la liste. */
.champ-groupe:has(select) { position: relative; }
.champ-groupe:has(select)::after {
  content: '';
  position: absolute;
  right: 20px;
  /* Le libellé occupe le haut du groupe : on se cale sur le bas du champ,
     dont la hauteur est fixée à 62 px juste au-dessus. */
  bottom: 28px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  transform: rotate(45deg);
  pointer-events: none;
}
.formulaire .bouton { margin-top: 26px; height: 62px; width: 100%; }
.champ-erreur { color: #B3261E; font-size: 13.5px; margin-bottom: 8px; }
.formulaire-note { font-size: 12.5px; line-height: 1.6; color: var(--encre-3); margin-top: 16px; }
.formulaire-succes {
  padding: 22px 24px;
  background: var(--ambre);
  font-size: 16px;
  font-weight: 500;
}
/* Le piège à robots. `display: none` seul est repéré par les remplisseurs
   automatiques les moins bêtes ; on le sort du flux ET du parcours clavier. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-coord { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
.contact-adresse {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -0.03em;
  color: var(--blanc);
}
.contact-adresse:hover { color: var(--ambre); }
.contact-telephone { font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.contact-telephone:hover { color: var(--blanc); }

/* ── Pied ──────────────────────────────────────────────────────────────── */

.pied {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 30px var(--marge);
  border-top: 1px solid var(--encre);
  font-size: 13px;
  color: var(--encre-3);
}
.pied-marque { font-family: var(--titre); font-weight: 800; font-size: 15px; color: var(--encre); }
.pied-liens { display: flex; gap: 24px; margin-left: auto; }
.pied-liens a { color: var(--encre-3); }
.pied-liens a:hover { color: var(--encre); }
.pied-mention { color: var(--encre-3); }

/* ── Pages légales ─────────────────────────────────────────────────────
 * Même grille, même typographie que l'accueil. Une page légale qui change de
 * maison donne l'impression d'avoir quitté le site — et c'est justement celle
 * qu'on ouvre quand on se demande à qui l'on a affaire. */

.legal-entete .cellule { padding: 56px var(--marge); }
.legal-chapeau { margin-top: 24px; }
.legal-meta { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; }
.legal-meta-ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  font-size: 13px;
}
.legal-meta-ligne:last-child { border-bottom: none; }
.legal-meta-ligne span:first-child { color: var(--encre-3); }
.legal-meta-ligne span:last-child, .legal-meta-ligne a { font-weight: 500; }

.legal-corps { align-items: stretch; }
/* Le sommaire occupe la colonne que les intitulés de section prennent
   ailleurs : même grille, autre usage. */
.legal-sommaire { padding: 48px var(--marge); }
.legal-sommaire ol { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: legal; }
.legal-sommaire li { counter-increment: legal; border-bottom: 1px solid var(--trait); }
.legal-sommaire li:last-child { border-bottom: none; }
.legal-sommaire a {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  font-size: 14.5px;
  color: var(--encre-2);
}
.legal-sommaire a::before {
  content: counter(legal, decimal-leading-zero);
  color: var(--trait-2);
  font-family: var(--titre);
  font-weight: 600;
}
.legal-sommaire a:hover { color: var(--encre); }

.legal-sections { flex: 1 1 auto; min-width: 0; }
.legal-section {
  display: flex;
  gap: 32px;
  padding: 48px var(--marge);
  border-bottom: 1px solid var(--trait);
}
.legal-section:last-child { border-bottom: none; }
.legal-section h2 { font-size: 30px; }
.legal-section .corps { margin-top: 18px; }
.legal-numero {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 42px;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--trait-2);
  flex: 0 0 auto;
}
/* Le seul bloc en couleur d'un document légal : celui qui engage le plus. Le
   fond ambre est déjà celui de « vous encaissez » en page d'accueil — la page
   n'invente pas de couleur pour l'occasion. */
.legal-alerte { background: var(--ambre); border-bottom: 1px solid var(--encre); }
.legal-alerte .corps { color: rgba(20, 18, 26, 0.82); max-width: 700px; }
.legal-alerte .legal-numero { color: rgba(20, 18, 26, 0.4); }
.legal-note { padding: 48px var(--marge); font-size: 14px; color: var(--encre-3); }

/* ── Apparition au défilement ──────────────────────────────────────────
 * `site.js` retire la classe quand la section entre dans la fenêtre. Sans
 * JavaScript, la règle ci-dessous ne s'applique jamais et tout reste visible :
 * une page dont le contenu dépend d'un script est une page blanche pour qui
 * ne l'exécute pas, et pour les moteurs qui ne l'attendent pas. */

@media (prefers-reduced-motion: no-preference) {
  /* `data-vu` et non une classe : c'est l'attribut que pose `site.js`. Une
     classe aurait paru équivalente et laissé toutes les sections invisibles —
     le genre de désaccord qui ne casse rien et ne se voit qu'à l'écran. */
  .js .revele { opacity: 0; transform: translateY(14px); }
  .js .revele[data-vu] {
    opacity: 1;
    transform: none;
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* Le lien de la section en cours de lecture. Souligné plutôt que coloré : la
   page n'utilise le violet que pour ce sur quoi on peut cliquer pour agir. */
.liens a[data-actif] {
  background: var(--creme);
  box-shadow: inset 0 -3px 0 var(--violet);
}

/* ── Sous 900 px ───────────────────────────────────────────────────────
 * La grille passe en colonnes empilées. Les filets verticaux deviennent
 * horizontaux : sur un téléphone, deux cellules côte à côte donnent deux
 * colonnes de 24 caractères, illisibles l'une comme l'autre. */

@media (max-width: 900px) {
  :root { --marge: 20px; }

  /* Les sous-grilles aussi, et c'est le point : `.grille` passait en bloc mais
     `.grille-trois` restait en flex. Ses trois cellules côte à côte imposaient
     une largeur minimale bien supérieure à l'écran — et c'est le DOCUMENT qui
     s'élargissait, donc tout le texte de la page qui sortait par la droite. Le
     symptôme se voyait dans le hero, la cause était trois sections plus bas. */
  .grille,
  .grille-deux, .grille-trois, .grille-quatre,
  .questions, .montants, .colonne-fiches { display: block; }
  .cellule {
    border-right: none;
    border-bottom: 1px solid var(--trait);
    padding: 40px var(--marge);
  }
  .cellule:last-child { border-bottom: none; }
  .colonne-titre, .cellule-large, .montants, .cellule-formulaire { flex: 1 1 auto; width: auto; }

  /* La barre s'empile sur trois lignes pleine largeur. En laissant l'action
     sur la même ligne que les liens, son `flex: 0 0 auto` refusait de
     rétrécir : la barre devenait plus large que l'écran, et c'est le DOCUMENT
     entier qui débordait — chaque ligne de texte de la page se retrouvait
     coupée à droite, bien loin de la barre qui en était la cause. */
  /* Une seule ligne : le logo, puis le bouton. Les liens passent dans un
     panneau qui pousse le contenu vers le bas plutôt que de le recouvrir — sur
     un téléphone tenu d'une main, un panneau flottant qu'on ferme mal masque
     la page sans qu'on sache comment revenir. */
  .barre { height: auto; flex-wrap: wrap; align-items: stretch; }
  .marque { flex: 0 0 auto; border-right: none; padding: 0 16px; min-height: 64px; }
  .marque img { height: 32px; }

  .hamburger {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 0 20px;
    min-height: 64px;
    background: none;
    border: none;
    border-left: 1px solid var(--trait);
    font-family: var(--titre);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--encre);
    cursor: pointer;
  }
  /* Trois traits dessinés en bordures : pas d'image à charger, et l'épaisseur
     suit la couleur du texte si le thème change. */
  .hamburger-barres {
    width: 20px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }
  .hamburger[aria-expanded='true'] .hamburger-barres {
    /* Ouvert : une seule barre. Une croix dessinée en bordures demanderait des
       transformations qui sautent quand l'animation est désactivée. */
    box-shadow: none;
  }

  .liens { flex: 1 1 100%; display: block; border-top: 1px solid var(--trait); }
  /* Sans script, le bouton reste caché et les liens restent affichés : la
     navigation ne dépend jamais de l'exécution du JavaScript. */
  .js .liens { display: none; }
  .liens[data-ouvert] { display: block; }
  .liens a {
    padding: 0 20px;
    height: 56px;
    border-right: none;
    border-bottom: 1px solid var(--trait);
    white-space: nowrap;
  }
  .barre-action { flex: 1 1 100%; justify-content: center; padding: 0 20px; height: 56px; }

  /* En bloc, pas en flex : `flex-wrap` place bien le paragraphe sur sa propre
     ligne, mais lui laisse la largeur de base de son contenu — 430 px sur un
     écran qui en compte 350. Le texte sortait de l'écran par la droite. */
  .hero-bas { display: block; margin-top: 32px; }
  .hero-dit { max-width: 100%; }
  .hero-actions { margin-top: 26px; }
  .hero-actions { flex-direction: column; align-self: stretch; }
  /* Les mêmes bornes que le hero, pour tout ce qui porte une largeur de
     lecture : sur un téléphone, la colonne fait 350 px, pas 660. */
  .corps, .hero-dit, .legal-alerte .corps { max-width: 100%; }
  .bouton-fantome { border-left: 1px solid var(--encre); border-top: none; }

  .colonne-fiches { border-left: none; }
  .cellule-photo { min-height: 220px; }

  .bandeau .cellule-etroite { border-right: none; border-bottom: 1px solid var(--trait); padding: 14px var(--marge); }
  .bandeau-logos { gap: 28px; padding: 18px var(--marge); }
  .bandeau-logos img { height: 24px; }
  .bandeau-fin { border-left: none; border-top: 1px solid var(--trait); padding: 14px var(--marge); }

  .photo-bande { height: 300px; }
  .photo-bande-titre { left: var(--marge); right: var(--marge); bottom: 20px; padding: 14px 18px; }
  .photo-credit { display: none; }

  .montant-ligne, .montant-ligne-vous { padding: 22px var(--marge); }
  .question { gap: 18px; padding: 24px var(--marge); }

  /* Quatre portraits sur une largeur de téléphone donnent des vignettes de
     70 px : deux colonnes gardent des visages reconnaissables. */
  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipe-membre { border-right: 1px solid var(--trait); }
  .equipe-membre:nth-child(2n) { border-right: none; }
  .equipe-membre:last-child { background: transparent; }

  .registre { display: block; }
  .registre > div { border-right: none; border-bottom: 1px solid var(--trait); padding: 26px var(--marge); }
  .registre-sombre > div { border-bottom-color: rgba(255, 255, 255, 0.16); }
  .registre > div:last-child { border-bottom: none; }

  .legal-section { flex-direction: column; gap: 12px; padding: 32px var(--marge); }
  .legal-numero { font-size: 30px; }
  .contact-coord { align-items: flex-start; margin-left: 0; }
  .pied { gap: 16px; }
  .pied-liens { margin-left: 0; flex-basis: 100%; }
}