/* ══════════════════════════════════════════════════════════════════════
 * Site public Sol-epay.
 *
 * Direction retenue avec l'utilisateur le 10/08/2026, références à l'appui
 * (Finpay, Ascone, Bluepeak) : le canon de la landing SaaS financière, exécuté
 * à pleine fidélité. Pas de détournement, pas de monde inventé.
 *
 * Sa grammaire, telle qu'elle revient dans les trois références :
 * — un fond neutre très doux, jamais blanc pur ;
 * — le contenu dans des cartes blanches à grand rayon, ombres presque
 *   invisibles (portées longues, opacité très basse) ;
 * — UNE couleur profonde saturée qui porte l'action principale, une carte
 *   mise en avant et le bloc sombre de fin ;
 * — l'interface du produit montrée comme contenu, pas décrite ;
 * — un bandeau de partenaires, une rangée de chiffres, un bloc sombre arrondi
 *   détaché des bords pour conclure.
 *
 * Ce que ce site en retire, parce que PRODUCT.md l'interdit : les logos de
 * clients (nous n'en avons aucun), les témoignages, les chiffres d'adoption.
 * Le bandeau de partenaires porte les OPÉRATEURS réellement acceptés, et les
 * chiffres décrivent le produit, pas sa traction.
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  --violet: #7c3aed;
  --violet-fonce: #5b21b6;
  --violet-doux: #f3f0ff;
  --navy: #171043;
  --encre: #171043;
  --encre-2: #5f5a7d;
  --encre-3: #918da8;
  --fond: #f6f6f9;
  --blanc: #fff;
  --trait: #eceaf3;

  --r: 20px;
  --r-l: 28px;
  --r-xl: 36px;
  --ombre: 0 1px 2px rgba(23, 16, 67, 0.04), 0 12px 32px -12px rgba(23, 16, 67, 0.10);
  --ombre-forte: 0 2px 4px rgba(23, 16, 67, 0.05), 0 24px 60px -20px rgba(23, 16, 67, 0.22);

  --contenu: 1200px;
  --marge: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --titre: 'Montserrat Alternates', 'Poppins', -apple-system, sans-serif;
  --corps: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.large { max-width: var(--contenu); margin: 0 auto; padding-inline: var(--marge); }

/* ── Barre de navigation ───────────────────────────────────────────────── */

.nav-barre {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 246, 249, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
}

.nav-inner { display: flex; align-items: center; min-height: 76px; gap: 32px; }

.marque {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--titre);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.marque-pastille {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--violet);
  color: var(--blanc);
  display: grid; place-items: center;
  font-size: 15px;
}

.liens { display: flex; gap: 34px; margin: 0 auto; }
.liens a { font-size: 14.5px; font-weight: 500; color: var(--encre-2); transition: color 160ms var(--ease); }
.liens a:hover { color: var(--encre); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  background: var(--violet);
  color: var(--blanc);
  border: 0;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 120ms var(--ease);
}

.btn:hover { background: var(--violet-fonce); transform: translateY(-1px); }
.btn-clair { background: var(--blanc); color: var(--encre); box-shadow: var(--ombre); }
.btn-clair:hover { background: var(--blanc); }
.btn-fantome { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.btn-fantome:hover { background: var(--blanc); }

@media (max-width: 940px) { .liens { display: none; } .nav-inner { justify-content: space-between; } }

/* ── Accroche ──────────────────────────────────────────────────────────── */

.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 { font-size: clamp(38px, 4.6vw, 60px); max-width: 12ch; }
.hero h1 .accent { color: var(--violet); }

.hero-dit {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--encre-2);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

@media (max-width: 900px) { .hero-grille { grid-template-columns: 1fr; } }

/* ── L'aperçu du produit ───────────────────────────────────────────────── */
/*
 * L'interface montrée comme contenu, pas décrite : c'est le trait commun des
 * trois références. Le téléphone porte la vraie capture ; les deux cartes
 * flottantes sont des exemples, avec des montants volontairement ronds pour
 * qu'on ne les prenne pas pour des données.
 */

.apercu { position: relative; justify-self: center; width: min(380px, 100%); }

.apercu-tel {
  width: min(292px, 76%);
  margin-inline: auto;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--ombre-forte);
}

.fiche {
  position: absolute;
  background: var(--blanc);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--ombre-forte);
  min-width: 176px;
}

.fiche-haut { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }

.fiche-pastille {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--violet-doux);
  color: var(--violet);
  flex: none;
}

.fiche-pastille svg { width: 15px; height: 15px; }
.fiche small { display: block; font-size: 13px; color: var(--encre-2); }
.fiche strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.fiche-libelle { font-size: 12.5px; font-weight: 600; color: var(--encre); }

.fiche-recu { top: 10%; left: -26%; }
.fiche-retrait { bottom: 8%; right: -24%; }

.puce-etat {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11.5px;
  font-weight: 600;
}

.puce-etat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 520px) { .fiche { display: none; } .apercu-tel { width: 76%; } }

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

.partenaires { padding-bottom: clamp(40px, 6vw, 72px); }

.partenaires p {
  margin: 0 0 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--encre-2);
}

.partenaires ul {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 4vw, 52px);
  list-style: none; margin: 0; padding: 0;
}

.partenaires li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; color: var(--encre-2);
}

.partenaires img { width: 26px; height: 26px; }

/* ── Cartes ────────────────────────────────────────────────────────────── */

.carte {
  background: var(--blanc);
  border-radius: var(--r-l);
  box-shadow: var(--ombre);
  padding: clamp(28px, 4vw, 48px);
}

.bloc { padding-bottom: clamp(48px, 7vw, 88px); }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.duo h2 { font-size: clamp(28px, 3.2vw, 40px); max-width: 16ch; }

.duo > p {
  margin: 0;
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--encre-2);
  padding-top: 6px;
}

@media (max-width: 820px) { .duo { grid-template-columns: 1fr; gap: 16px; } }

/* Les trois colonnes icône + titre + texte : la figure la plus reconnaissable
   du canon, présente dans les trois références. */
.triades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--trait);
}

.triade-icone {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--violet-doux);
  color: var(--violet);
  display: grid; place-items: center;
  margin-bottom: 18px;
}

.triade-icone svg { width: 21px; height: 21px; }
.triades h3 { font-size: 17.5px; letter-spacing: -0.02em; }
.triades p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--encre-2); }

/* ── Grille de tuiles ──────────────────────────────────────────────────── */

.tuiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(28px, 4vw, 40px);
}

.tuile {
  background: var(--blanc);
  border-radius: var(--r-l);
  box-shadow: var(--ombre);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tuile-large { grid-column: span 2; }
.tuile h3 { font-size: clamp(19px, 2vw, 24px); }
.tuile p { margin: 12px 0 0; max-width: 58ch; font-size: 14.5px; line-height: 1.65; color: var(--encre-2); }

.tuile-violette { background: var(--violet); color: var(--blanc); }
.tuile-violette p { color: rgba(255, 255, 255, 0.9); }

.tuile-chiffre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 14px;
}

.tuile-visuel { margin-top: auto; padding-top: 24px; }

/* Pas de carte dans une carte : à l'intérieur d'une tuile, l'encart est un
   bandeau bordé, sans ombre ni second niveau d'élévation. */
.encart {
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 340px;
}

.encart small { display: block; font-size: 13px; color: var(--encre-2); }

@media (max-width: 860px) {
  .tuiles { grid-template-columns: 1fr; }
  .tuile-large { grid-column: span 1; }
}

/* ── Le bloc sombre ────────────────────────────────────────────────────── */
/*
 * Détaché des bords, à grand rayon : c'est ainsi qu'il apparaît dans les trois
 * références, et c'est ce qui l'empêche de couper la page en deux comme le
 * ferait une bande pleine largeur.
 */

.sombre {
  background: var(--navy);
  color: var(--blanc);
  border-radius: var(--r-xl);
  padding: clamp(36px, 5vw, 72px);
}

.sombre h2 { font-size: clamp(26px, 3.2vw, 40px); max-width: 20ch; }
.sombre p { color: rgba(255, 255, 255, 0.72); }

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 48px);
}

.etape {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r);
  padding: 26px;
}

.etape h3 { font-size: 17.5px; }
.etape p { margin: 10px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.6; }

/* ── Rangée de chiffres ────────────────────────────────────────────────── */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  text-align: center;
  padding: clamp(36px, 5vw, 56px) 0;
}

.chiffres strong {
  display: block;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.chiffres span { font-size: 14.5px; color: var(--encre-2); }

/* ── Registre (listes de faits) ────────────────────────────────────────── */

.registre { margin: clamp(28px, 4vw, 40px) 0 0; }

.registre > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 48px);
  padding: 22px 0;
  border-top: 1px solid var(--trait);
}

.registre dt { font-family: var(--titre); font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; }
.registre dd { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--encre-2); }

@media (max-width: 700px) { .registre > div { grid-template-columns: 1fr; gap: 6px; } }

/* ── Magasins d'applications ───────────────────────────────────────────── */

.magasins { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.magasins img { height: 42px; width: auto; opacity: 0.45; filter: grayscale(1); }
.magasin-bientot { display: inline-block; }

.magasin-bientot span {
  display: block; margin-top: 7px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--encre-2);
}

.sombre .btn-clair { box-shadow: none; }
.sombre .magasins img { filter: grayscale(1) invert(1); opacity: 0.5; }
.sombre .magasin-bientot span { color: rgba(255, 255, 255, 0.55); }

/* ── Pied de page ──────────────────────────────────────────────────────── */

.pied { padding: clamp(48px, 6vw, 72px) 0 32px; }

.pied-grille {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--trait);
}

.pied p { margin: 14px 0 0; font-size: 14.5px; color: var(--encre-2); max-width: 30ch; }

.pied h2 {
  font-family: var(--corps);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--encre-2);
  margin: 0 0 16px;
}

.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied ul a { font-size: 14.5px; color: var(--encre-2); transition: color 160ms var(--ease); }
.pied ul a:hover { color: var(--encre); }
.pied-bas { padding-top: 24px; font-size: 13.5px; color: var(--encre-2); }

@media (max-width: 820px) { .pied-grille { grid-template-columns: 1fr 1fr; } }

/* ── Le seul moment de mouvement ───────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero-dit, .hero-actions, .apercu {
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .hero-dit { transition-delay: 60ms; }
  .hero-actions { transition-delay: 120ms; }
  .apercu { transition-delay: 100ms; }

  @starting-style {
    .hero h1, .hero-dit, .hero-actions, .apercu { opacity: 0; transform: translateY(12px); }
  }
}

/* ══ Matière visuelle ══════════════════════════════════════════════════ */

/* Photographie. Elle documente la SCÈNE d'usage — un commerce, un marché, un
   téléphone en main — jamais un client de Sol-epay : nous n'en avons aucun, et
   une photo légendée comme un utilisateur serait un faux témoignage. */
.photo { position: relative; overflow: hidden; border-radius: var(--r-l); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.photo-credit {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(23, 16, 67, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  backdrop-filter: blur(6px);
}

.bande-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  min-height: clamp(320px, 42vw, 460px);
  display: grid;
  align-items: end;
}

.bande-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bande-photo-voile {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  background: linear-gradient(to top, rgba(23, 16, 67, 0.96) 18%, rgba(23, 16, 67, 0.72) 55%, rgba(23, 16, 67, 0.28) 90%);
  color: var(--blanc);
}

.bande-photo h2 { font-size: clamp(24px, 3vw, 38px); max-width: 22ch; }
.bande-photo p { margin: 14px 0 0; max-width: 46ch; color: rgba(255, 255, 255, 0.85); }

/* La maquette d'interface construite en HTML : elle montre un parcours réel
   (un encaissement, un retrait) sans dépendre d'une capture à refaire à chaque
   retouche de l'application. */
.maquette {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 20px;
}

.maquette-ligne {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--trait);
}

.maquette-ligne:first-of-type { border-top: 0; }
.maquette-ligne strong { margin-left: auto; font-size: 15px; letter-spacing: -0.02em; }
.maquette-ligne small { display: block; font-size: 12.5px; color: var(--encre-2); }
.maquette-ligne b { font-size: 14px; font-weight: 600; }

.rond {
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--violet-doux); color: var(--violet);
}

.rond svg { width: 17px; height: 17px; }
.rond-vert { background: #ecfdf5; color: #047857; }
.rond-ambre { background: #fffbeb; color: #b45309; }

/* Le flux d'argent du bloc sombre : trois montants, deux flèches. Il dit en un
   coup d'œil ce que trois paragraphes expliquaient. */
.flux {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  margin-top: clamp(28px, 4vw, 44px);
}

.flux-etape {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
}

.flux-etape span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }

.flux-etape strong {
  display: block;
  font-family: var(--titre); font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.03em;
  margin-top: 6px;
}

.flux-fleche { color: rgba(255, 255, 255, 0.35); }
.flux-fleche svg { width: 22px; height: 22px; }

@media (max-width: 760px) {
  .flux { grid-template-columns: 1fr; }
  .flux-fleche { transform: rotate(90deg); justify-self: center; }
}

/* ── Questions fréquentes ──────────────────────────────────────────────── */
/*
 * `<details>` natif : l'accordéon fonctionne sans une ligne de JavaScript, il
 * est accessible au clavier par construction, et le contenu reste trouvable
 * par la recherche du navigateur même replié.
 */

.faq { border-top: 1px solid var(--trait); }

.faq details {
  border-bottom: 1px solid var(--trait);
  padding: 4px 0;
}

.faq summary {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--titre); font-weight: 800;
  font-size: clamp(16.5px, 1.7vw, 19px);
  letter-spacing: -0.02em;
  transition: color 160ms var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--violet); }

.faq summary::after {
  content: '';
  width: 13px; height: 13px;
  margin-left: auto;
  flex: none;
  background: currentColor;
  transition: transform 220ms var(--ease);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
}

.faq details[open] summary { color: var(--violet); }
.faq details[open] summary::after { transform: rotate(135deg); }

.faq details p {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--encre-2);
}

/* ── Mouvement ═════════════════════════════════════════════════════════ */
/*
 * Les révélations au défilement passent par `animation-timeline: view()` :
 * aucune ligne de JavaScript, aucun observateur, et le navigateur les calcule
 * hors du fil principal.
 *
 * Elles vivent dans un `@supports` : sans la fonctionnalité, l'élément n'est
 * pas animé — il est simplement VISIBLE. Jamais l'inverse. Une révélation qui
 * part d'`opacity: 0` en dur laisse une page blanche sur tout navigateur qui
 * ne l'exécute pas, et c'est le défaut le plus coûteux du procédé.
 */

/*
 * La révélation part d'une opacité de 0,4, jamais de 0.
 *
 * Ce site existe pour être indexé (`views.py` : vitrine SEO). Un texte à
 * `opacity: 0` tant que personne n'a fait défiler est du contenu que le
 * moteur peut décider de ne pas compter — et le pari ne vaut pas le gain de
 * style. À 0,4 le fondu se voit encore, et rien n'est jamais invisible : ni
 * pour un robot, ni pour quelqu'un dont le défilement est bloqué, ni sur une
 * capture d'écran.
 */
/* Le survol : une carte se soulève de deux pixels, pas de dix. Assez pour dire
   « ceci répond », pas assez pour bouger la lecture. */


/* ══ Mouvement ═════════════════════════════════════════════════════════
 *
 * Quatre animations seulement, chacune avec une raison :
 *
 * 1. L'entrée de l'accroche — vue une fois par visite.
 * 2. La révélation au défilement, DÉCLENCHÉE UNE SEULE FOIS. Une section qui
 *    rejoue son animation à chaque remontée est une interface qui se bat avec
 *    son lecteur.
 * 3. L'échelonnement des groupes : 60 ms entre les éléments d'une même grille.
 *    Tout entrer d'un bloc donne un rideau, pas une séquence.
 * 4. Les réponses de la FAQ, qui doivent glisser plutôt qu'apparaître d'un
 *    coup — c'est la seule qui coûte de la mise en page, donc la plus courte.
 *
 * Toutes partent d'un état VISIBLE : sans JavaScript, sans `@supports`, ou
 * sous `prefers-reduced-motion`, la page est complète et lisible. Jamais
 * l'inverse.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Révélation au défilement ──────────────────────────────────────────── */
/*
 * `IntersectionObserver` plutôt que `animation-timeline: view()` : ce dernier
 * lie l'opacité à la position de défilement, donc l'inverse quand on remonte.
 * L'observateur se détache après le premier passage — l'animation ne rejoue
 * jamais.
 *
 * La classe `.js` n'est posée qu'une fois le script exécuté : sans lui, aucune
 * de ces règles ne s'applique et tout est visible.
 */
.js .revele {
  opacity: 0.35;
  transform: translateY(20px);
  transition:
    opacity 620ms var(--ease),
    transform 620ms var(--ease);
}

.js .revele[data-vu] { opacity: 1; transform: none; }

/* ── Échelonnement ─────────────────────────────────────────────────────── */
/*
 * 60 ms d'écart, dans la plage recommandée (30–80 ms). Au-delà de six
 * éléments l'attente se voit ; la grille se contente donc de six paliers et
 * les suivants arrivent avec le dernier.
 */
.js .revele[data-vu] > .large > .tuiles > *,
.js .revele[data-vu] > .large > .carte > .triades > *,
.js .revele[data-vu] > .large > .registre > div,
.js .revele[data-vu] > .large > .faq > details {
  animation: monte 420ms var(--ease) both;
}

.js .revele[data-vu] > .large > .tuiles > :nth-child(2),
.js .revele[data-vu] > .large > .carte > .triades > :nth-child(2),
.js .revele[data-vu] > .large > .registre > div:nth-child(2),
.js .revele[data-vu] > .large > .faq > details:nth-child(2) { animation-delay: 60ms; }

.js .revele[data-vu] > .large > .tuiles > :nth-child(3),
.js .revele[data-vu] > .large > .carte > .triades > :nth-child(3),
.js .revele[data-vu] > .large > .registre > div:nth-child(3),
.js .revele[data-vu] > .large > .faq > details:nth-child(3) { animation-delay: 120ms; }

.js .revele[data-vu] > .large > .tuiles > :nth-child(4),
.js .revele[data-vu] > .large > .registre > div:nth-child(4),
.js .revele[data-vu] > .large > .faq > details:nth-child(4) { animation-delay: 180ms; }

.js .revele[data-vu] > .large > .tuiles > :nth-child(n + 5),
.js .revele[data-vu] > .large > .faq > details:nth-child(n + 5) { animation-delay: 240ms; }

@keyframes monte {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ── Survol ────────────────────────────────────────────────────────────── */
/*
 * Gaté sur un vrai pointeur : sur écran tactile, une pression déclenche un
 * faux survol qui reste collé après le doigt.
 */
.tuile, .maquette, .photo, .flux-etape {
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .tuile:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
  .photo:hover img { transform: scale(1.03); }
  .photo img { transition: transform 640ms var(--ease); }
}

/* ── L'accordéon ───────────────────────────────────────────────────────── */
/*
 * `interpolate-size` permet enfin d'animer vers `height: auto` sans mesurer en
 * JavaScript. Là où il manque, le panneau s'ouvre d'un coup — le contenu est
 * là dans les deux cas, seul le passage diffère. Court : c'est l'animation qui
 * coûte de la mise en page à chaque image.
 */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 240ms var(--ease), content-visibility 240ms allow-discrete;
  }

  .faq details[open]::details-content { height: auto; }
}

/* ── Le compteur du flux ───────────────────────────────────────────────── */
/*
 * Les montants montent jusqu'à leur valeur quand la section entre à l'écran.
 * Un chiffre qui se construit se lit ; un chiffre posé se saute. C'est le seul
 * endroit de la page où le nombre EST l'argument.
 *
 * `tabular-nums` empêche la largeur de sauter pendant le comptage.
 */
.flux-etape strong { font-variant-numeric: tabular-nums; }

.flux-etape small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

.flux-etape-vous {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.5);
}

.flux-fleche svg { transition: transform 320ms var(--ease); }
.js .revele[data-vu] .flux-fleche svg { animation: glisse 520ms var(--ease) both 200ms; }

@keyframes glisse {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

.enonce-fort {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  margin: 14px 0 12px !important;
  color: var(--encre);
}

/* ── Mouvement réduit ──────────────────────────────────────────────────── */
/*
 * « Fewer and gentler animations, not zero » : on garde les fondus, qui aident
 * à comprendre qu'un élément vient d'arriver, et on retire tout déplacement.
 */
@media (prefers-reduced-motion: reduce) {
  .js .revele,
  .js .revele[data-vu] > .large > * > *,
  .js .revele[data-vu] .flux-fleche svg {
    transform: none !important;
    animation: none !important;
    transition: opacity 200ms linear !important;
  }

  .js .revele { opacity: 0.999; }
  .photo img, .tuile { transition: none !important; }
}

/* Le lien de la section en cours. */
.liens a[data-actif] { color: var(--violet); }

/* ── Pages légales ═════════════════════════════════════════════════════ */
/*
 * Une colonne, une mesure de lecture, et rien d'autre. Ces pages se lisent
 * quand quelque chose ne va pas : la mise en page ne doit jamais concurrencer
 * le texte.
 */

.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
.legal .large { max-width: 780px; }
.legal h1 { font-size: clamp(30px, 4vw, 46px); }

.legal-date {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--encre-2);
}

.legal-chapeau {
  margin: 28px 0 0;
  padding: 20px 22px;
  border-radius: var(--r);
  background: var(--violet-doux);
  font-size: 16px;
  line-height: 1.7;
}

.legal h2 {
  margin: clamp(36px, 5vw, 52px) 0 0;
  font-size: clamp(19px, 2vw, 23px);
}

.legal p, .legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--encre-2);
}

.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--encre); }
.legal a { color: var(--violet); border-bottom: 1px solid currentColor; }

.legal-note {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--trait);
  font-size: 14.5px;
}

/* La tuile qui porte un écran : le texte à gauche, l'appareil qui déborde par
   le bas à droite. Le débordement est ce qui donne la profondeur — pas une
   ombre de plus. */
.tuile-ecran {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
  overflow: hidden;
  padding-bottom: 0;
}

.tuile-ecran > div { padding-bottom: clamp(24px, 3vw, 36px); }

.tuile-ecran img {
  width: 100%;
  max-width: 260px;
  justify-self: end;
  border-radius: 22px 22px 0 0;
  box-shadow: var(--ombre-forte);
}

@media (max-width: 760px) {
  .tuile-ecran { grid-template-columns: 1fr; }
  .tuile-ecran img { justify-self: center; max-width: 220px; }
}