/* =====================================================================
   KIOVYSE — couche couleur

   Se charge APRÈS style.css et ne fait que deux choses :
     1. redéfinir les jetons (palette, rayons, ombres)
     2. ajouter ce que le monochrome n'avait pas — dégradés, halos

   La structure, la typographie et le rythme ne bougent pas. Pour revenir
   au noir et blanc, il suffit de retirer la ligne <link> qui l'appelle.

   Registre : graphite bleuté, acier, cyan. Un registre d'outil de
   travail — tableau de bord, salle des marchés — pas de vitrine mode.
   La couleur sert à hiérarchiser les chiffres, pas à décorer.

   Contrastes mesurés sur le fond #1a2130 :
     ink 16,7:1 · ink-2 9,0:1 · ink-3 5,0:1
     acier 7,0:1 · cyan 9,9:1 · ambre 10,4:1 · vert 9,7:1
   Tout passe AA, accents compris.

   Sommaire
     1. Jetons
     2. Fond et atmosphère
     3. Ouverture
     4. Titres et chiffres
     5. Actions
     6. Cartes et captures
     7. Détails
     8. Adaptatif et sobriété
   ===================================================================== */


/* ---- 1. Jetons ------------------------------------------------------ */
:root {
  /* Surfaces — graphite légèrement bleuté. Neutre et froid : les
     captures de tableaux de bord posées dessus ont l'air chez elles. */
  --bg:      #1a2130;
  --bg-1:    #212a3b;
  --bg-2:    #283345;
  --bg-3:    #313d52;

  /* Filets — ardoise diluée */
  --line:    rgba(190, 208, 236, .12);
  --line-2:  rgba(190, 208, 236, .2);
  --line-3:  rgba(190, 208, 236, .34);

  /* Encres — neutres froides */
  --ink:     #eef1f6;
  --ink-2:   #a8b2c3;
  --ink-3:   #8b95aa;

  /* Quatre teintes de travail. L'acier mène, le reste ponctue. */
  --acier:   #5b9dff;   /* accent principal */
  --cyan:    #3fd0c9;   /* second, pour les chiffres */
  --ambre:   #f2b25c;   /* alerte douce, mises en avant */
  --vert:    #45d483;   /* validé, vérifié */

  /* L'accent historique devient l'acier : tout ce qui l'utilisait déjà
     dans style.css se colore sans qu'on y retouche. */
  --accent:      var(--acier);
  --accent-soft: rgba(91, 157, 255, .12);
  --accent-line: rgba(91, 157, 255, .4);

  /* Rayons — arrondis modérés. Assez pour ne pas être austère, assez peu
     pour ne pas faire application grand public. */
  --r-1: 5px;
  --r-2: 10px;
  --r-3: 14px;

  /* Ombres — franches et froides */
  --sh-1: 0 2px 6px rgba(6, 10, 20, .45);
  --sh-2: 0 4px 12px rgba(6, 10, 20, .4), 0 24px 60px rgba(8, 14, 28, .38);

  /* Dégradé signature : acier vers cyan, sans détour par le violet */
  --degrade: linear-gradient(112deg, var(--acier), var(--cyan) 92%);
}


/* ---- 2. Fond et atmosphère ------------------------------------------ */
/* Deux nappes froides, posées dans le fond du body et non dans un calque
   au-dessus : un pseudo-élément fixe passerait devant le texte. `fixed`
   donne quand même la profondeur — la page glisse dessus. */
html { background: var(--bg); }

body {
  background:
    radial-gradient(1200px 760px at 6% -8%,   rgba(91, 157, 255, .17), transparent 62%) fixed,
    radial-gradient(980px 700px at 98% 4%,    rgba(63, 208, 201, .12), transparent 64%) fixed,
    radial-gradient(1000px 800px at 50% 110%, rgba(91, 157, 255, .07), transparent 66%) fixed,
    var(--bg);
}

/* Le grain d'origine était à .028. On monte à peine : au-delà, tout vire
   au laiteux sur de la couleur. */
.grain { opacity: .035; }

.sec + .sec > .wrap::before {
  background: linear-gradient(90deg,
    transparent, rgba(91, 157, 255, .26) 24%, rgba(63, 208, 201, .22) 72%, transparent);
  height: 1px;
}


/* ---- 3. Ouverture ---------------------------------------------------- */
.hero-glow {
  background:
    radial-gradient(780px 540px at 16% 10%, rgba(91, 157, 255, .19), transparent 66%),
    radial-gradient(660px 460px at 84% 30%, rgba(63, 208, 201, .12), transparent 68%);
}

.kicker {
  color: var(--acier);
  font-weight: 500;
}

.hero-proof-grid img {
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: transform var(--ease), box-shadow var(--ease);
}

.hero-proof-grid img:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(6, 10, 20, .45), 0 28px 66px rgba(91, 157, 255, .22);
}


/* ---- 4. Titres et chiffres ------------------------------------------- */
/* Les montants portent la preuve : ce sont eux qu'on colore. Un dégradé
   unique, jamais de teinte au hasard. */
.h2 i { color: var(--acier); }

.totals dd,
.rail-stats dd,
.insight-figure b {
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.idx {
  color: var(--acier);
  opacity: .5;
}

.rail-label { color: var(--ink-3); }

.wordmark:hover { color: var(--acier); }


/* ---- 5. Actions ------------------------------------------------------ */
/* Un seul bouton plein sur la page : celui qui compte. Aplat d'acier,
   pas de dégradé — un dégradé sur un bouton fait produit grand public. */
.btn-lead {
  background: var(--acier);
  border-color: var(--acier);
  color: #06101f;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(91, 157, 255, .2);
}

.btn-lead:hover {
  background: #74aeff;
  border-color: #74aeff;
  color: #06101f;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(91, 157, 255, .3);
}

.btn {
  border-radius: var(--r-1);
  transition: transform var(--ease), box-shadow var(--ease),
              border-color var(--ease), color var(--ease), background-color var(--ease);
}

.btn:not(.btn-lead):hover {
  border-color: var(--accent-line);
  color: var(--acier);
  background: var(--accent-soft);
}

.nav-link::after { background: var(--acier); }

.nav.is-stuck {
  background: rgba(26, 33, 48, .88);
  border-bottom: 1px solid var(--line);
}

.mailto {
  color: var(--acier);
  transition: color var(--ease);
}

.mailto:hover { color: var(--cyan); }


/* ---- 6. Cartes et captures ------------------------------------------- */
.shots figure,
.accounts-grid figure,
.voice-proof figure {
  border-radius: var(--r-3);
  overflow: hidden;
}

.shots img,
.accounts-grid img,
.voice-proof img {
  border-radius: var(--r-3);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-2);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.shots img:hover,
.accounts-grid img:hover,
.voice-proof img:hover {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: 0 6px 16px rgba(6, 10, 20, .45), 0 24px 56px rgba(91, 157, 255, .2);
}

/* Captures verticales prises au téléphone : grille dédiée, aucun
   recadrage — l'image est la preuve, on la montre entière. Le clic
   ouvre la visionneuse pour lire les montants. */
.shots-grid--tall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
  align-items: start;
}

.shots-grid--tall figure { margin: 0; }

.shots-grid--tall img {
  display: block;
  width: 100%;
  height: auto;
}

.badge {
  border-radius: var(--r-1);
  border-color: rgba(69, 212, 131, .32);
  background: rgba(69, 212, 131, .09);
  color: var(--vert);
}

.badge svg { fill: var(--vert); }
.consent svg { fill: var(--vert); }

/* Le seul encart plein de la page. */
.insight {
  border-radius: var(--r-3);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--acier);
  background:
    linear-gradient(135deg, rgba(91, 157, 255, .08), transparent 62%),
    var(--bg-1);
  box-shadow: var(--sh-1);
}

.portrait {
  border-radius: 50%;
  border: 1px solid var(--line-2);
  filter: none;
  box-shadow: 0 6px 22px rgba(2, 5, 12, .6);
}

.portrait:hover { border-color: var(--accent-line); }


/* ---- 7. Détails ------------------------------------------------------ */
.num {
  color: var(--acier);
  font-weight: 500;
}

.ledger li,
.duo li,
.steps li {
  border-radius: var(--r-2);
  transition: background-color var(--ease);
}

/* Le cadre déborde de 16 px de chaque côté plutôt que de rentrer : le
   texte reste aligné avec le titre de la section, et ne colle plus au
   filet quand la question s'ouvre. */
.faq details {
  border-radius: var(--r-2);
  border: 1px solid transparent;
  margin-inline: -16px;
  padding-inline: 16px;
  transition: border-color var(--ease), background-color var(--ease);
}

.faq details[open] {
  border-color: var(--line-2);
  background: rgba(91, 157, 255, .04);
}

.faq summary:hover { color: var(--acier); }

.voice blockquote { color: var(--ink); }
.voice-quote figcaption { color: var(--ink-3); }

.foot {
  background: rgba(20, 26, 39, .94);
  border-top: 1px solid var(--line);
}

.wordmark-sm { color: var(--ink-2); }

::selection { background: rgba(91, 157, 255, .28); color: var(--ink); }


/* ---- 8. Adaptatif et sobriété ---------------------------------------- */
@media (max-width: 720px) {
  body { background-attachment: scroll; }
  .shots-grid--tall { grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-proof-grid img:hover,
  .shots img:hover,
  .accounts-grid img:hover,
  .voice-proof img:hover,
  .btn-lead:hover { transform: none; }
}

/* Impression : le texte en dégradé deviendrait invisible sur papier. */
@media print {
  .hero-glow, .grain { display: none; }
  body { background: #fff; }
  .totals dd, .rail-stats dd, .insight-figure b {
    -webkit-text-fill-color: currentColor;
    color: #000;
    background: none;
  }
}


/* ---- 9. Netteté des captures ----------------------------------------- */
/* Les fichiers sont maintenant en 520 px de large (ré-échantillonnés ×2).
   On les affiche à 330 au maximum : le navigateur réduit au lieu
   d'agrandir, et c'est ce qui fait tenir le texte. Le CSS d'origine
   faisait l'inverse — 364 px d'affichage pour 260 de fichier. */
.accounts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  max-width: 720px;
}

.accounts-grid figure {
  max-width: 330px;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .accounts-grid { gap: var(--s-2); }
}


/* =====================================================================
   10. Premier écran — l'impact
   =====================================================================
   La preuve la plus forte du site était enterrée sous le premier
   défilement. On la remonte, et on donne du relief à ce qui était plat.
   ===================================================================== */

/* ---- Chiffres d'ouverture -------------------------------------------- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.hero-stats > div { display: flex; flex-direction: column; gap: 4px; }

.hero-stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  background: var(--degrade);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-stats dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Halo d'ouverture, plus present ---------------------------------- */
.hero-glow {
  background:
    radial-gradient(860px 600px at 14% 6%,  rgba(91, 157, 255, .28), transparent 64%),
    radial-gradient(720px 520px at 86% 26%, rgba(63, 208, 201, .18), transparent 66%),
    radial-gradient(520px 420px at 52% 96%, rgba(91, 157, 255, .10), transparent 70%);
}

/* ---- Les cartes en pile plutôt qu'en grille --------------------------- */
/* Quatre vignettes posées à plat ne racontent rien. Décalées et
   légèrement inclinées, elles donnent l'impression d'un jeu de preuves
   qu'on vient d'étaler sur la table. */
@media (min-width: 961px) {
  .hero-proof-grid {
    perspective: 1200px;
  }

  .hero-proof-grid img {
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1),
                box-shadow 420ms cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 10px 26px rgba(6, 10, 20, .5), 0 30px 70px rgba(6, 12, 28, .45);
  }

  .hero-proof-grid img:nth-child(1) { transform: rotate(-2.4deg) translateY(6px); }
  .hero-proof-grid img:nth-child(2) { transform: rotate(1.8deg)  translateY(-10px); }
  .hero-proof-grid img:nth-child(3) { transform: rotate(1.4deg)  translateY(2px); }
  .hero-proof-grid img:nth-child(4) { transform: rotate(-1.6deg) translateY(-6px); }

  /* Au survol, la carte se redresse et passe devant les autres. */
  .hero-proof-grid img:hover {
    transform: rotate(0deg) translateY(-12px) scale(1.06);
    box-shadow: 0 14px 34px rgba(6, 10, 20, .55), 0 40px 90px rgba(91, 157, 255, .3);
    z-index: 3;
    position: relative;
  }
}

/* ---- Les trous entre sections ---------------------------------------- */
/* Une section courte laissait jusqu'à 250 px de vide en dessous : on
   croyait la page finie. On resserre, sans écraser les sections longues. */
.sec { padding-block: clamp(64px, 8vw, 112px); }

#keep .body,
#faq .body,
#how .body { padding-bottom: 0; }


/* ---- Tenir dans le premier écran -------------------------------------- */
/* Sur un portable (hauteur ≤ 1000 px), le rythme d'origine poussait les
   chiffres à 1061 px : sous la ligne de flottaison, donc invisibles à
   l'arrivée. On resserre uniquement dans ce cas — sur un grand écran,
   l'espacement généreux est conservé. */
@media (min-width: 961px) and (max-height: 1000px) {
  .hero { padding-block: clamp(40px, 6vw, 76px) var(--s-6); }

  .hero-in .kicker { margin-bottom: var(--s-3); }

  .display { font-size: clamp(42px, 5.6vw, 78px); }

  .hero-in .display + .lede { margin-top: var(--s-3); }

  .hero-stats {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
  }

  .hero-stats dd { font-size: clamp(28px, 2.9vw, 38px); }
}


/* =====================================================================
   11. Pages annexes — sécurité, mentions légales
   =====================================================================
   Même registre que l'accueil, en plus sobre : ce sont des pages qu'on
   lit, pas qu'on regarde. Une seule colonne, une mesure de lecture.
   ===================================================================== */

.page {
  position: relative;
  z-index: 2;
  padding-block: clamp(72px, 11vw, 132px) var(--s-7);
}

.page .wrap { max-width: 760px; }

.page-kicker {
  margin: 0 0 var(--s-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acier);
}

.page h1 {
  margin: 0 0 var(--s-3);
  font-family: var(--serif);
  font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .005em;
}

.page-lede {
  margin: 0 0 var(--s-6);
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
}

.page h2 {
  margin: var(--s-6) 0 var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .005em;
}

.page h3 {
  margin: var(--s-4) 0 var(--s-1);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.page p,
.page li,
.page dd {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.page p { margin: 0 0 var(--s-2); }
.page ul { margin: 0 0 var(--s-2); padding-left: 1.1em; }
.page li { margin-bottom: 8px; }
.page strong { color: var(--ink); font-weight: 500; }
.page a { color: var(--acier); border-bottom: 1px solid var(--accent-line); }
.page a:hover { color: var(--cyan); }

/* Fiche d'identité : libellé à gauche, valeur à droite */
.fiche {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 10px var(--s-3);
  margin: 0 0 var(--s-2);
}

.fiche dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}

.fiche dd { margin: 0; color: var(--ink); }

@media (max-width: 600px) {
  .fiche { grid-template-columns: 1fr; gap: 2px; }
  .fiche dd { margin-bottom: 12px; }
}

/* Engagements de la page sécurité : une carte par promesse */
/* `.page .promesses` et non `.promesses` : sans ça, la règle générale
   `.page ul` (plus spécifique) lui remet un retrait à gauche. */
.page .promesses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}

.promesses li {
  margin: 0;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.promesses h3 {
  margin: 0 0 var(--s-1);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
}

.promesses p { margin: 0; font-size: 14.5px; line-height: 1.65; }

.promesses .num {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--mono);
  font-size: 12px;
}

/* Liens de pied de page */
.foot-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: var(--s-3);
  font-size: 13px;
}

.foot-liens a { color: var(--ink-2); transition: color var(--ease); }
.foot-liens a:hover { color: var(--acier); }

.nav-liens { display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); }


/* ---- Brouillon : ce qui manque ou reste à confirmer ------------------- */
/* Deux marqueurs très visibles, pour qu'aucune case vide ne parte en
   ligne par inadvertance. Tant qu'il en reste un dans une page, elle
   n'est pas publiable. */
.a-completer,
.a-confirmer {
  border-radius: 4px;
  padding: 1px 6px;
  color: #1b1306;
  background: var(--ambre);
  font-weight: 500;
}

.a-confirmer {
  color: var(--ink);
  background: rgba(242, 178, 92, .14);
  border-bottom: 1px dashed var(--ambre);
}

.a-confirmer::after {
  content: "À confirmer";
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--ambre);
  color: #1b1306;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}