/* ==========================================================================
   DD Transfert
   --------------------------------------------------------------------------
   Fontes servies depuis le domaine : aucune requête vers un tiers. La CSP du
   projet autorise `style-src 'self'` et `font-src 'self' data:` — l'ouvrir à
   un domaine externe pour du décoratif serait un mauvais échange sur un
   service financier, et chaque visiteur y communiquerait son adresse IP.
   ========================================================================== */

@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/bricolage-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/archivo-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Palette

   Vert de pin très sombre en fond, émeraude et or en accents. Deux accents et
   non un seul : un unique aplat vif sur du noir est devenu le réflexe de
   toutes les pages de produit qui se ressemblent. L'or porte l'argent, le vert
   porte la réussite — deux rôles distincts, jamais interchangeables.

   Les neutres sont biaisés vers le vert : un gris pur a l'air non choisi.
   -------------------------------------------------------------------------- */

:root {
  /* =======================================================================
     PALETTE
     =======================================================================
     Ce qu on a essaye avant, et pourquoi on l abandonne : tout en sombre,
     avec des halos lumineux, des cartes translucides et des degrades radiaux.
     C est la signature visuelle par defaut — celle vers laquelle tout le monde
     glisse, et qui finit par se reconnaitre au premier coup d oeil. Ce n est
     pas une question de gout : une interface qui ressemble a toutes les autres
     n inspire aucune confiance particuliere.

     Ce qu on fait a la place.

     1. UN PAPIER CHAUD, pas un gris froid ni un noir d ecran. #faf7f2 tire
        legerement vers le jaune. C est imperceptible isolement, et c est ce
        qui separe une page imprimee d une fenetre de terminal.

     2. L ENCRE EST NOIRE MAIS PAS #000. #14110e garde une pointe de brun :
        le noir pur sur fond clair vibre et fatigue a la lecture longue.

     3. LE NOIR DEVIENT UN BLOC, pas une ambiance. Bandeaux, pied de page,
        panneau d illustration : des aplats francs qui decoupent la page.
        Un contraste assume vaut mieux qu une penombre uniforme.

     4. L ORANGE PORTE L ACTION, le VERT dit « arrive ». Un seul bouton orange
        par ecran ; le vert ne sert a rien d autre.

     CONTRASTES, mesures sur le papier #faf7f2
        encre      #14110e  -> 16,9:1
        secondaire #595249  ->  7,1:1
        tertiaire  #655e55  ->  6,1:1   (plancher)
        orange     #d4480b  ->  4,8:1   (pour du TEXTE orange)
        vert       #0a7a47  ->  4,9:1
     Les aplats oranges portent de l encre, pas du blanc : #14110e sur #ff6b1a
     donne 8,4:1, la ou du blanc n atteindrait que 2,9:1.
     ======================================================================= */

  /* Aplats sombres : bandeaux, pied, panneaux d illustration. */
  --nuit:        #14110e;
  --nuit-2:      #221d18;
  --nuit-3:      #2f2922;
  --nuit-bord:   rgba(255, 255, 255, .13);

  /* Le papier et ce qu on pose dessus. */
  --jour:        #faf7f2;
  --surface:     #ffffff;
  --surface-2:   #f2ede4;
  --rule:        #e4ded3;
  --rule-fort:   #cdc4b5;

  /* Encre. */
  --ink:         #14110e;
  --ink-2:       #595249;
  --ink-3:       #655e55;
  /* Encre claire, pour le texte pose sur les aplats sombres. */
  --ink-clair:   #ede8e0;
  --ink-clair-2: #b5aca0;

  /* ACTION. L aplat est vif, le texte orange est plus profond : un orange
     lisible en aplat et un orange lisible en texte ne sont pas le meme. */
  --action:       #ff6b1a;
  --action-vif:   #ff8440;
  --action-texte: #c2400a;
  --action-pale:  #fdeee3;

  /* ARRIVE. Jamais sur un bouton. */
  --vert:        #0a7a47;
  --vert-vif:    #12a862;
  --vert-sombre: #065431;
  --vert-pale:   #e4f4eb;
  --vert-nuit:   #06281a;

  /* Conserve sous ce nom pour ne pas reecrire onze regles ; vaut l orange. */
  --or:          #ff6b1a;
  --or-sombre:   #c2400a;

  --alerte:      #c0271b;
  --alerte-fond: #fbeae8;

  /* Ombres franches et courtes. Les grandes ombres diffuses sont l autre
     reflexe qui fait « genere » : tout flotte, rien ne se pose. */
  --ombre-s: 0 1px 2px rgb(20 17 14 / .06);
  --ombre-m: 0 2px 4px rgb(20 17 14 / .05), 0 10px 24px -14px rgb(20 17 14 / .22);
  --ombre-l: 0 24px 50px -28px rgb(20 17 14 / .3);

  --r: 12px;
  --r-s: 8px;
  --pad: clamp(20px, 5vw, 44px);
}

/* --------------------------------------------------------------------------
   Rendu unique, clair sur les pages de contenu.

   Choix délibéré, pas un oubli. Un service financier gagne à se présenter de
   la même façon à tout le monde : deux apparences, c'est deux fois plus de
   surfaces à vérifier avant chaque mise en ligne.

   La contrepartie est assumée : le fond du `body` et TOUTES les couleurs sont
   posés depuis les jetons ci-dessus, jamais laissés à l'héritage. La page
   tient telle quelle sur un appareil réglé en sombre.
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--jour);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--vert-sombre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nuit); }

:focus-visible { outline: 2.5px solid var(--action); outline-offset: 3px; border-radius: 4px; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--nuit); color: #fff;
  padding: 14px 20px; z-index: 200; border-radius: 0 0 var(--r-s) 0;
}
.saut-contenu:focus { left: 0; top: 0; }

.enveloppe { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.etroit { max-width: 70ch; }

/* --------------------------------------------------------------- Typographie */

h1, h2, h3 { margin: 0; text-wrap: balance; }

h1 {
  font-family: 'Bricolage', 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-stretch: 92%;
}

h2 {
  font-family: 'Bricolage', 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  font-stretch: 94%;
}

h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 650;
  font-size: 1.12rem;
  line-height: 1.32;
  letter-spacing: -.01em;
}

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.chapo { font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: var(--ink-2); max-width: 54ch; }

.marqueur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--action-texte);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.marqueur::before {
  content: ''; width: 22px; height: 2px; background: var(--or); flex: none;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Les montants sont le sujet : ils méritent leur propre traitement. */
.chiffre {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.03em;
}

/* ------------------------------------------------------------------ Barre nav */

.barre {
  position: sticky; top: 0; z-index: 60;
  background: rgba(4, 18, 14, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--nuit-bord);
}

.barre-inner { display: flex; align-items: center; gap: 18px; min-height: 72px; }

.logo {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Bricolage', sans-serif;
  font-weight: 800; font-size: 1.16rem;
  color: #fff; text-decoration: none;
  letter-spacing: -.028em;
  margin-right: auto;
}
.logo:hover { color: #fff; }
.logo svg { width: 34px; height: 34px; flex: none; }

.nav-liens { display: flex; gap: 28px; align-items: center; }
.nav-liens a {
  color: var(--ink-clair); text-decoration: none;
  font-size: 15px; font-weight: 500;
}
.nav-liens a:hover, .nav-liens a[aria-current="page"] { color: var(--vert-vif); }

.nav-actions { display: flex; gap: 10px; align-items: center; margin-left: 8px; }


@media (max-width: 420px) {
  .nav-actions .bouton { padding: 9px 13px; font-size: 13px; }
  .logo { font-size: 16px; }
}

/* ---------------------------------------------------------------- Boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Archivo', sans-serif;
  font-weight: 650; font-size: 15.5px;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), background-color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}

.bouton-plein {
  /* Orange, pas vert : le vert est reserve a « arrive ». */
  background: var(--action); color: #1a0a02;
  box-shadow: 0 8px 22px -10px rgb(255 107 26 / .7);
}
.bouton-plein:hover {
  background: var(--action-vif); color: #1a0a02;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgb(255 107 26 / .8);
}

.bouton-or { background: var(--or); color: #1a0a02; }
.bouton-or:hover { background: var(--action-vif); color: #1a0a02; transform: translateY(-2px); }

.bouton-ligne { border-color: var(--rule-fort); color: var(--ink); background: transparent; }
.bouton-ligne:hover { border-color: var(--action); color: var(--action); }

/* Sur fond sombre. */
.sombre .bouton-ligne, .barre .bouton-ligne {
  border-color: rgba(255,255,255,.28); color: #fff;
}
.sombre .bouton-ligne:hover, .barre .bouton-ligne:hover {
  border-color: var(--vert-vif); color: var(--vert-vif); background: rgb(18 168 98 / .1);
}

/* ----------------------------------------------------------------- Sections */

section { padding: clamp(62px, 9vw, 116px) 0; position: relative; }

.sombre {
  background: var(--nuit);
  color: var(--ink-clair);
}
.sombre h1, .sombre h2, .sombre h3,
.heros h1, .heros h2, .heros h3 { color: #fff; }
.sombre p, .heros p { color: var(--ink-clair); }
.sombre .chapo, .heros .chapo { color: var(--ink-clair); }
.sombre .marqueur, .heros .marqueur { color: var(--vert-vif); }
.sombre a, .heros a { color: var(--vert-vif); }

.entete-page { padding: clamp(52px, 8vw, 92px) 0 clamp(30px, 4vw, 48px); }

/* -------------------------------------------------------------------- Héros */

.heros {
  background: var(--nuit);
  color: var(--ink-clair);
  padding: clamp(52px, 8vw, 104px) 0 clamp(64px, 10vw, 128px);
  position: relative;
  overflow: hidden;
}

/* DEUX HALOS RETIRES ICI.

   Il y avait un disque vert flou de 780 px en haut a droite et un disque
   orange de 620 px en bas a gauche, poses sur le fond sombre « pour donner
   de la profondeur ».

   C est le reflexe decoratif par excellence : ca ne designe rien, ca ne
   hierarchise rien, et ca se retrouve a l identique sur des milliers de
   pages. Le bandeau est maintenant un aplat d encre franc, et c est le
   contraste avec le papier du reste de la page qui cree la profondeur —
   par une arete, pas par un degrade. */

.heros::before,
.heros::after { content: none; }

.heros > .enveloppe { position: relative; z-index: 1; }

.heros h1 { color: #fff; margin-bottom: 24px; }
.heros h1 em { font-style: normal; color: var(--vert-vif); }

.heros-grille {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 940px) { .heros-grille { grid-template-columns: 1fr; } }

.heros .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.rassurance {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--nuit-bord);
  font-size: 14.5px; color: var(--ink-clair-2);
}
.rassurance span { display: flex; align-items: center; gap: 8px; }
.rassurance svg { width: 16px; height: 16px; flex: none; color: var(--vert-sombre); }

/* ------------------------------------------------------ Carte de simulation */

.simu {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--ombre-l);
  overflow: hidden;
  color: var(--ink);
}

.simu-tete {
  padding: 20px 26px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.simu-tete .t {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.simu-tete .paire {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.simu-tete .paire svg { width: 14px; height: 14px; color: var(--or); }

.simu-corps { padding: 26px; }

.simu-montant { margin-bottom: 8px; }
.simu-montant .l {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3); font-weight: 600; display: block; margin-bottom: 6px;
}
.simu-montant .v {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1;
  display: flex; align-items: baseline; gap: 10px;
}
.simu-montant .v .dev { font-size: .42em; color: var(--ink-3); font-weight: 600; letter-spacing: 0; }

.simu-ligne {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; gap: 16px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}
.simu-ligne .lib { color: var(--ink-2); }
.simu-ligne .val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-weight: 600;
  white-space: nowrap;
}
.simu-ligne .val.or { color: var(--or-sombre); }

.simu-total {
  margin-top: 6px; padding: 16px 0 4px;
  border-top: 2.5px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.simu-total .lib { font-weight: 650; font-size: 15.5px; }
.simu-total .val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em;
}

/* Aplat vert PALE, texte vert profond — pas un aplat vert sature.
   Le vert dit bien « arrive » ici, c est son role. Mais en aplat vif il
   devenait l element le plus voyant de la page et rivalisait avec le bouton
   d action juste en dessous. Deux elements qui crient, aucun ne guide. */
.simu-recu {
  margin: 20px -26px -26px; padding: 18px 26px;
  background: var(--vert-pale);
  border-top: 1px solid var(--vert-sombre);
  color: var(--vert-sombre);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.simu-recu .l { font-size: 13.5px; color: var(--ink-2); }
.simu-recu .v {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em;
}

/* ------------------------------------------------------------------ Grilles */

.grille { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.carte {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--ombre-s);
}
.carte h3 { margin-bottom: 10px; }
.carte p { font-size: 15.5px; color: var(--ink-2); }

.sombre .carte {
  background: var(--nuit-2);
  border-color: var(--nuit-bord);
  box-shadow: none;
}
.sombre .carte h3 { color: #fff; }
.sombre .carte p { color: var(--ink-clair-2); }

.carte-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--or); display: block; margin-bottom: 16px;
}

/* --------------------------------------------------------- Étapes numérotées
   La numérotation encode un ordre réel : ces trois étapes se font dans cet
   ordre et pas un autre. Rien d'autre n'est numéroté sur le site. */

ol.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; }

ol.etapes li {
  counter-increment: e;
  display: grid; grid-template-columns: 62px 1fr; gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
ol.etapes li:last-child { border-bottom: 0; }
.sombre ol.etapes li { border-color: var(--nuit-bord); }

ol.etapes li::before {
  content: counter(e, decimal-leading-zero);
  font-family: 'Bricolage', sans-serif;
  font-size: 1.7rem; font-weight: 800;
  color: var(--or); line-height: 1;
  letter-spacing: -.04em;
}

ol.etapes h3 { margin-bottom: 7px; }
ol.etapes p { color: var(--ink-2); font-size: 15.5px; max-width: 60ch; }
.sombre ol.etapes p { color: var(--ink-clair-2); }

/* ------------------------------------------------------------------ Tableau */

.table-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--surface);
}

table.grille-prix { width: 100%; border-collapse: collapse; min-width: 480px; }

table.grille-prix th {
  text-align: left;
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule-fort);
  background: var(--surface-2);
  white-space: nowrap;
}

table.grille-prix td {
  padding: 15px 24px;
  border-bottom: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
}
table.grille-prix tr:last-child td { border-bottom: 0; }
table.grille-prix tbody tr:hover { background: var(--surface-2); }
table.grille-prix td.gras { font-weight: 700; }
table.grille-prix td.or { color: var(--or-sombre); font-weight: 600; }
table.grille-prix td.vert { color: var(--vert-sombre); font-weight: 700; }

/* ------------------------------------------------------------------- Notice */

.notice {
  border-left: 3px solid var(--or);
  background: var(--action-pale);
  padding: 22px 26px;
  border-radius: 0 var(--r-s) var(--r-s) 0;
  margin: 30px 0;
}
.notice h3 { color: var(--action-texte); margin-bottom: 8px; font-size: 1.03rem; }
.notice p { color: var(--ink-2); font-size: 15.5px; }

.notice.info { border-left-color: var(--vert); background: var(--vert-pale); }
.notice.info h3 { color: var(--vert-sombre); }
.notice.info p { color: var(--ink-2); }

/* ----------------------------------------------------------- Vérification */

.verif-boite {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--ombre-m);
  overflow: hidden;
  max-width: 540px;
}

.verif-bandeau {
  padding: 26px;
  display: flex; align-items: center; gap: 16px;
  color: #fff;
}
.verif-bandeau.valide { background: var(--vert-sombre); }
.verif-bandeau.invalide { background: var(--alerte); }
.verif-bandeau svg { width: 34px; height: 34px; flex: none; }
.verif-bandeau .t { font-family: 'Bricolage', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.verif-bandeau .s { font-size: 13.5px; opacity: .9; }

.verif-lignes { padding: 10px 26px 26px; }

/* Réutilise le vocabulaire de la simulation. */
.verif-lignes .ligne-calcul {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.verif-lignes .ligne-calcul:last-child { border-bottom: 0; }
.verif-lignes .libelle { color: var(--ink-2); font-size: 14.5px; }
.verif-lignes .valeur {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px;
}

/* ------------------------------------------------------------------- FAQ */

details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary {
  padding: 21px 0; cursor: pointer;
  font-weight: 650; font-size: 1.04rem;
  list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ''; flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--vert-sombre);
  border-bottom: 2px solid var(--vert-sombre);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
details.faq[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
details.faq summary:hover { color: var(--vert-sombre); }
details.faq .reponse { padding: 0 0 22px; color: var(--ink-2); max-width: 68ch; font-size: 15.5px; }

/* ------------------------------------------------------------ Bande d'appel */

.appel {
  background: var(--nuit);
  border-radius: var(--r);
  padding: clamp(34px, 6vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* La lueur radiale qui trainait ici a ete retiree : un halo vert diffus dans
   un coin ne signifie rien et c est precisement ce qui fait « genere ». Le
   bandeau est un aplat franc. */
.appel > * { position: relative; }
.appel h2 { color: #fff; margin-bottom: 14px; }
.appel p { color: var(--ink-clair); max-width: 46ch; margin-inline: auto; }
.appel .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* -------------------------------------------------------------------- Pied */

footer.pied {
  background: var(--nuit);
  color: var(--ink-clair-2);
  padding: clamp(52px, 7vw, 78px) 0 34px;
  font-size: 14.5px;
  border-top: 1px solid var(--nuit-bord);
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 38px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--nuit-bord);
}
@media (max-width: 820px) { .pied-grille { grid-template-columns: 1fr 1fr; } }

.pied-grille h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--vert-sombre); margin: 0 0 16px;
}
.pied-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-grille a { color: var(--ink-clair); text-decoration: none; }
.pied-grille a:hover { color: #fff; text-decoration: underline; }

.pied-logo {
  display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
  color: #fff; font-family: 'Bricolage', sans-serif; font-weight: 800;
  font-size: 1.14rem; letter-spacing: -.026em;
}
.pied-logo svg { width: 30px; height: 30px; }

.pied-bas {
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  justify-content: space-between;
  font-size: 13px; color: var(--ink-3);
}

/* ------------------------------------------------------------- Page erreur */

.erreur { min-height: 64vh; display: flex; align-items: center; }
.erreur .code {
  font-family: 'Bricolage', sans-serif;
  font-size: clamp(4.5rem, 15vw, 9rem);
  font-weight: 800; line-height: .9;
  color: var(--ink-3);
  letter-spacing: -.06em;
  margin: 0;
}

/* ------------------------------------------------------- Choix de langue */
/*
   Des liens, pas un menu deroulant pilote par script : un moteur d indexation
   suit un lien et decouvre les trois versions de la page.
*/
.langues { display: flex; gap: 2px; margin-left: 10px; align-items: center; }

.langues a {
  padding: 7px 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  border-radius: 7px;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.langues a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }

.langues a[aria-current="true"] {
  color: var(--nuit);
  background: var(--or);
}

@media (max-width: 900px) {
  /* Avant le hamburger : changer de langue ne doit pas demander d ouvrir
     un menu, c est la premiere chose que fait un visiteur non francophone. */
  .langues { order: -1; margin-left: auto; margin-right: 4px; }
  .langues a { padding: 9px 8px; }
}

/* ===================================================== Mise en mouvement */
/*
   Le bloc `prefers-reduced-motion` en haut de ce fichier neutralise tout ce
   qui suit pour qui a demande moins d animation. Ce n est pas une option :
   un mouvement non desire declenche des nausees chez certaines personnes.

   Le parti pris ici est la retenue. Une application qui manipule l argent
   des gens et qui clignote inspire l inverse de la confiance : on anime
   l ENTREE des elements, une seule fois, et le seul chiffre qui compte.
*/

@keyframes ddt-apparition {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.heros h1,
.heros .chapo,
.heros .actions,
.heros .rassurance {
  animation: ddt-apparition 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.heros .chapo     { animation-delay: 0.07s; }
.heros .actions   { animation-delay: 0.14s; }
.heros .rassurance { animation-delay: 0.21s; }

.simu {
  animation: ddt-apparition 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Le montant recu est la promesse du produit. Il respire une fois a
   l arrivee, puis se tient tranquille : une boucle infinie deviendrait un
   tic visuel qu on cesse de voir au bout de dix secondes. */
@keyframes ddt-souffle {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.simu-recu .v {
  display: inline-block;
  animation: ddt-souffle 1.1s ease-out 0.85s 2 both;
}

/* LE REFLET QUI BALAYAIT LE BOUTON A ETE RETIRE.

   Une bande blanche inclinee qui traverse le bouton au survol : c est un
   ornement de gabarit, reconnaissable entre mille, et il attire l oeil sur
   l animation plutot que sur ce que le bouton fait.

   Ce qui reste suffit et se lit mieux : la couleur s eclaircit, le bouton se
   souleve d un pixel. On comprend qu il est actif sans spectacle. */

/* Les sections plus bas apparaissent a l approche du regard. `animation-timeline`
   n est pas encore partout : sans lui, le contenu s affiche simplement, ce qui
   est le bon comportement de repli. */
@supports (animation-timeline: view()) {
  .etapes li,
  .grille .carte {
    animation: ddt-apparition 0.5s ease-out both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
}

/* ============================================ Menu mobile en panneau */
/*
   Le panneau glisse depuis la droite. Sans JavaScript, `.nav-liens` reste un
   simple bloc de liens visible : le HTML fonctionne seul, le script ne fait
   que l ameliorer.
*/
.voile {
  position: fixed;
  inset: 0;
  background: rgba(4, 18, 14, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 40;
}

.voile.visible { opacity: 1; }

body.fige { overflow: hidden; }

.bouton-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.bouton-menu span {
  display: block;
  height: 2px;
  background: var(--ink-clair);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.bouton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bouton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lien-menu-mobile { display: none; }

@media (max-width: 900px) {
  .bouton-menu { display: flex; margin-left: 6px; order: 3; }

  .nav-liens {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 84px 24px 32px;
    background: var(--nuit);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.4);
    z-index: 50;
    overflow-y: auto;
  }

  /* Sans script, le panneau reste un bloc normal dans le flux : personne
     ne se retrouve sans navigation si le JS ne se charge pas. */
  html.js .nav-liens {
    transform: translateX(102%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js .nav-liens.ouvert { transform: none; }

  .nav-liens a {
    padding: 16px 0;
    font-size: 16.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .lien-menu-mobile { display: block; }
  .lien-menu-mobile.accent { color: var(--or); font-weight: 600; }

  .nav-actions .connexion-texte { display: none; }
}

/* ================================================= Simulateur interactif */
/*
   La carte du simulateur est CLAIRE (fond blanc). Les regles ci-dessous
   avaient ete ecrites pour un fond sombre : texte blanc, bordures blanches a
   14 %% d opacite. Resultat, le montant saisi et les boutons de palier
   etaient litteralement invisibles sur la page.

   Une erreur de ce genre ne se voit pas dans le code — elle se voit a
   l ecran, ou en mesurant le contraste. Les valeurs ci-dessous visent 4,5:1
   au minimum pour le texte courant, 3:1 pour les grands caracteres.
*/
.simu-saisie { display: block; }

.champ-montant {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--rule-fort);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.champ-montant:focus-within {
  border-color: var(--vert-sombre, #00714a);
  box-shadow: 0 0 0 3px rgb(255 107 26 / .18);
}

.champ-montant input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--nuit, #04120e);
  font: 700 30px/1.1 inherit;
  letter-spacing: -.02em;
  outline: none;
}

.champ-montant .dev {
  color: var(--ink-2, #46564f);
  font-size: 15px;
  font-weight: 700;
}

.paliers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }

.palier {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vert-sombre);
  background: var(--vert-pale);
  border: 1px solid #a8d8bf;
  cursor: pointer;
  transition: transform .14s ease, background .16s ease, color .16s ease;
}

.palier:hover {
  background: var(--vert-sombre);
  color: #fff;
  transform: translateY(-1px);
}

.palier:active { transform: translateY(0); }

.palier:focus-visible {
  outline: 2px solid var(--vert-sombre, #00714a);
  outline-offset: 2px;
}

.simu-note {
  margin: 16px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  /* Assez sombre pour depasser 4,5:1 sur blanc : une mention legale illisible
     ne protege personne. */
  color: var(--ink-2, #46564f);
}
/* ============================================= Apparition au defilement */
[data-apparait] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retard, 0ms);
}

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

/* Sans JavaScript, rien ne doit rester invisible : un contenu qui attend un
   script qui n arrive pas est un contenu perdu. */
html:not(.js) [data-apparait] { opacity: 1; transform: none; }

/* =================================================== Bouton en attente */
.bouton.en-cours {
  opacity: 0.75;
  cursor: progress;
  pointer-events: none;
}

/* =============================================== Corrections mobile */
/*
   Le panneau hors ecran est en `position: fixed` avec une translation vers la
   droite : il cree une zone defilable au-dela du bord. Sans cette regle, la
   page se decale horizontalement au moindre glissement du doigt, ce qui donne
   l impression d une mise en page cassee.
*/
html, body { overflow-x: hidden; }

/*
   Les libelles de section etaient a 11px. En dessous de 12px un texte devient
   penible a lire sur telephone, et illisible pour une bonne partie des gens.
   Le rapport de contraste ne suffit pas : la taille compte autant.
*/
.marqueur, .simu-tete .t {
  font-size: 12.5px;
  letter-spacing: 0.1em;
}

@media (max-width: 560px) {
  .marqueur, .simu-tete .t { font-size: 13px; }

  /* Le montant saisi reste le plus gros element de l ecran : c est ce que la
     personne verifie avant de valider. */
  .champ-montant input { font-size: 26px; }

  .paliers { gap: 6px; }
  .palier { padding: 9px 12px; font-size: 13px; }

  /* Cible tactile : 44px de haut minimum, recommandation d accessibilite
     reprise par Apple comme par Google. */
  .nav-liens a { padding: 15px 0; min-height: 44px; }
}

/* ============================ La carte claire dans le heros sombre */
/*
   `.simu` est une carte BLANCHE posee a l interieur de `.heros`, qui est
   sombre. Les regles `.heros p`, `.heros a`… s appliquent donc a son contenu
   et y imposent des couleurs claires : texte pale sur fond blanc, illisible.

   On retablit ici les couleurs de la carte, avec une specificite suffisante
   pour l emporter. C est le genre de conflit qu on ne voit qu a l ecran : le
   CSS est valide, chaque regle prise isolement est correcte.
*/
.heros .simu p,
.heros .simu .simu-note {
  color: var(--ink-2);
}

.heros .simu .simu-tete .t,
.simu-tete .t {
  /* --ink-3 tombait a 3,68:1 sur blanc. --ink-2 passe a 7,3:1. */
  color: var(--ink-2);
}

.heros .simu a:not(.bouton) { color: var(--vert-vif); }

.heros .simu .marqueur { color: var(--vert-vif); }

/*
   L or #a56d0c plafonne a 4,38:1 sur blanc — juste sous le seuil. Assombri
   pour le texte courant ; la teinte reste identique a l oeil.
*/
.simu-ligne .val.or { color: var(--action-texte); }

/* =================================== Boutons dans les sections sombres */
/*
   `.sombre a, .heros a { color: var(--vert-sombre) }` a une specificite de
   (0,1,1) et l emportait sur `.bouton-plein` (0,1,0). Consequence : les
   boutons d appel a l action places dans le heros s affichaient en vert clair
   SUR fond vert — 1,48:1, un texte qu on devine plus qu on ne le lit.

   C etaient precisement « Ouvrir un compte » et « Envoyer ce montant » : les
   deux boutons dont depend toute la conversion du site.
*/
.sombre a.bouton-plein,
.heros a.bouton-plein,
.sombre .bouton-plein,
.heros .bouton-plein {
  color: var(--nuit);
}

.sombre a.bouton-or,
.heros a.bouton-or {
  color: #1a0a02;
}

/*
   Le pied de page est SOMBRE (#04120e). Je lui avais applique --ink-2, une
   couleur foncee pensee pour du texte sur fond clair : le ratio est tombe
   de 4,26 a 2,43. Corriger un contraste sans regarder le fond, c est le
   degrader une fois sur deux.
*/
.pied .pied-bas span,
.pied .pied-bas a {
  /* #b8d4c9 sur #04120e : 9,6:1. */
  color: var(--ink-clair);
}

.pied-espace span { color: var(--ink-2); }

/* ================================================= Tableau des tarifs */
/*
   Les en-tetes etaient a 11px et 3,68:1 — un tableau de prix qu on n arrive
   pas a lire est pire qu absent : la personne se demande si on lui cache
   quelque chose.
*/
table.grille-prix th {
  font-size: 12.5px;
  color: var(--ink-2);
}

/* L or #a56d0c plafonne a 4,38:1 sur blanc. Meme teinte, plus lisible. */
table.grille-prix td.or { color: var(--action-texte); }

@media (max-width: 560px) {
  table.grille-prix th { font-size: 12px; letter-spacing: .04em; }
}

/* Cases a cocher : 19px se rate au doigt. 22px avec une zone cliquable
   etendue par le label reste discret et devient atteignable. */
input[type="checkbox"], input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--vert-sombre);
}

label:has(> input[type="checkbox"]),
.case-a-cocher {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
}

/* ============================================== Illustration du parcours */
.bloc-parcours {
  margin: 26px 0 34px;
  padding: 26px 20px 18px;
  border-radius: 12px;
  background: var(--nuit);
  border: 1px solid var(--nuit-3);
  overflow-x: auto;
}

.parcours { display: block; width: 100%; min-width: 560px; height: auto; }

.parcours .p-libelle {
  fill: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
}

.parcours .p-montant { fill: #fff; font-size: 15px; font-weight: 700; }
.parcours .p-montant.vert { fill: var(--vert); }
.parcours .p-frais { fill: var(--action); font-size: 14px; font-weight: 600; }

/* Le fil se dessine en continu : le mouvement suggere le sens du transfert
   sans qu on ait besoin d une fleche de plus. */
@keyframes ddt-fil {
  to { stroke-dashoffset: -32; }
}

#p-trace { animation: ddt-fil 1.6s linear infinite; }

/* ===========================================================================
   BARRE DE NAVIGATION SUR TELEPHONE
   ===========================================================================
   Mesure a 375 px avant correction : logo (150) + langues (106) + bouton
   d action (130) + menu (44) = 446 px de contenu pour 375 px de large. Le
   bouton « Ouvrir un compte » sortait de l ecran, coupe net.

   Ce genre de defaut ne se voit pas en relisant le CSS — le point de rupture
   a 900 px etait correct, le tiroir fonctionnait. Il se voit en mesurant les
   rectangles reellement calcules par le navigateur.

   Correction : sur petit ecran la barre ne garde que l essentiel — l identite
   et l acces au menu. Les langues descendent dans le tiroir, ou elles ont
   toute la place.
   =========================================================================== */

.langues-tiroir { display: none; }

@media (max-width: 900px) {
  /* Dans le tiroir, le selecteur reprend sa place, detache des liens. */
  .langues-tiroir {
    display: block;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

@media (max-width: 680px) {
  .nav-actions .langues { display: none; }

  /* Le bouton d action reste — c est ce qu un visiteur cherche en premier —
     mais resserre pour tenir a cote du logo et du menu. */
  .nav-actions .bouton {
    padding: 9px 14px;
    font-size: 14px;
  }

  .barre-inner { gap: 8px; }
}

@media (max-width: 420px) {
  /* Sous 420 px, meme resserre, le bouton ne tient plus avec le reste. Il est
     de toute facon present dans le tiroir, en evidence et en orange. */
  .nav-actions { display: none; }

  .logo { font-size: 15px; }
  .logo svg { width: 26px; height: 26px; }
}

/* Le marqueur de section porte l orange profond, lisible sur papier. Sur un
   aplat d encre il lui faut la version vive : 4,9:1 sur papier et 2,1:1 sur
   noir, c est la meme couleur qui passe et qui echoue selon le fond. */
.sombre .marqueur, .heros .marqueur, .appel .marqueur { color: var(--action); }

/* La bande d appel est un aplat d encre : le bouton secondaire y heritait de
   `color: var(--ink)`, devenu noir sur noir — 1:1, invisible. Un bouton
   contour prend la couleur de son FOND, pas celle de la page. */
.appel .bouton-ligne {
  color: var(--ink-clair);
  border-color: rgb(255 255 255 / .3);
}
.appel .bouton-ligne:hover {
  color: var(--action);
  border-color: var(--action);
  background: transparent;
}