/* LIMONNA — page de vente. Même identité que l'application : bleu nuit, citron, Fredoka. */
:root {
  --nuit: #06070F;
  --nuit-2: #0E1119;
  --bleu: #2E62E9;
  --bleu-clair: #6FA8FF;
  --bleu-fonce: #1B3FB0;
  --navy: #2A3354;
  --citron: #F5C518;
  --creme: #FBF5E8;
  --blanc: #ffffff;
  --ink: #17203A;
  --ink-2: #4A5573;
  --muted: #8A93AB;
  --line: #E6E9F2;
  --vert: #2C8A57;
  --vert-soft: #E3F1E9;
  --radius: 16px;
  --radius-lg: 24px;
  --display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .35, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--blanc); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -.025em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.contenu { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.centre { text-align: center; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: 16.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s, background .18s;
  min-height: 52px;
}
.btn-primaire {
  background: linear-gradient(135deg, #4A80FF, var(--bleu-fonce)); color: #fff;
  box-shadow: 0 6px 22px rgba(46, 98, 233, .35);
}
.btn-primaire:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(46, 98, 233, .45); }
.btn-clair { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-clair:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn-sombre { background: var(--navy); color: #fff; }
.btn-sombre:hover { transform: translateY(-2px); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(6, 7, 15, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(180, 205, 255, .10);
}
.entete-in { display: flex; align-items: center; gap: 18px; height: 74px; }
.entete img { height: 40px; width: auto; }
.entete nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.entete nav a { color: rgba(255,255,255,.78); text-decoration: none; font-weight: 600; font-size: 15px; }
.entete nav a:hover { color: #fff; }
.entete .btn { padding: 11px 20px; font-size: 15px; min-height: 44px; }
@media (max-width: 820px) { .entete nav a.masquable { display: none; } }

/* Néon qui rase le bas du menu (même signature que l'application) */
.entete::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 1%, rgba(190, 220, 255, .75) 22%, rgba(215, 235, 255, .95) 50%,
    rgba(190, 220, 255, .75) 78%, transparent 99%);
  filter: drop-shadow(0 0 7px rgba(150, 195, 255, .85));
}
.entete::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 170, 255, .18), rgba(90, 140, 255, .07) 42%, transparent);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(ellipse 1200px 560px at 50% -40px, rgba(96,146,255,.28), rgba(60,110,240,.08) 52%, transparent 68%),
    var(--nuit);
  padding: 86px 0 96px;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle 2px at 9% 16%, rgba(225,238,255,.9) 40%, transparent),
    radial-gradient(circle 1.5px at 24% 34%, rgba(200,222,255,.75) 40%, transparent),
    radial-gradient(circle 2.5px at 38% 9%, rgba(235,244,255,1) 40%, transparent),
    radial-gradient(circle 1.5px at 62% 22%, rgba(190,215,255,.7) 40%, transparent),
    radial-gradient(circle 2px at 78% 13%, rgba(220,235,255,.85) 40%, transparent),
    radial-gradient(circle 1.5px at 91% 30%, rgba(200,222,255,.7) 40%, transparent),
    radial-gradient(circle 2px at 16% 62%, rgba(195,218,255,.55) 40%, transparent),
    radial-gradient(circle 1.5px at 84% 58%, rgba(185,210,255,.5) 40%, transparent);
  animation: flotte 18s ease-in-out infinite alternate;
}
@keyframes flotte { from { transform: translateY(0); opacity: .95 } to { transform: translateY(12px); opacity: .6 } }
.hero .contenu { position: relative; }
.pastille {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: rgba(245, 197, 24, .14); color: var(--citron); border: 1px solid rgba(245,197,24,.32);
}
.hero h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.08; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--bleu-clair); }
.hero .accroche { font-size: clamp(17px, 2.2vw, 20px); color: rgba(255,255,255,.80); max-width: 56ch; margin: 22px 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-rassurance { margin-top: 20px; font-size: 14.5px; color: rgba(255,255,255,.62); }

/* ---------- Bandeau chiffres ---------- */
.chiffres { background: var(--nuit-2); color: #fff; padding: 34px 0; border-top: 1px solid rgba(180,205,255,.09); }
.chiffres-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; text-align: center; }
.chiffre b { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -.02em; color: var(--bleu-clair); line-height: 1.1; }
.chiffre span { font-size: 14.5px; color: rgba(255,255,255,.68); }

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-titre { font-size: clamp(28px, 4vw, 40px); max-width: 20ch; }
.section-chapo { color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 16px 0 0; }
.centre .section-titre, .centre .section-chapo { margin-left: auto; margin-right: auto; }
.creme { background: var(--creme); }

/* Problème */
.douleurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 44px; }
.douleur { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.douleur i { font-size: 30px; }
.douleur h3 { font-size: 19px; margin: 12px 0 8px; }
.douleur p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* Fonctionnalités */
.atouts { display: grid; gap: 26px; margin-top: 52px; }
.atout {
  display: grid; grid-template-columns: 74px 1fr; gap: 22px; align-items: start;
  background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.atout:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(23,32,58,.09); }
.atout-ico {
  width: 74px; height: 74px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 34px; background: linear-gradient(135deg, #4A80FF, var(--bleu-fonce)); color: #fff;
}
.atout h3 { font-size: 23px; margin-bottom: 10px; }
.atout p { margin: 0 0 14px; color: var(--ink-2); }
.atout .preuve {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700;
  background: var(--vert-soft); color: var(--vert); padding: 7px 14px; border-radius: 999px;
}
@media (max-width: 640px) { .atout { grid-template-columns: 1fr; } }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 50px; counter-reset: e; }
.etape { position: relative; padding-top: 18px; }
.etape::before {
  counter-increment: e; content: counter(e);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; margin-bottom: 16px;
  background: var(--citron); color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 700;
}
.etape h3 { font-size: 20px; margin-bottom: 8px; }
.etape p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* Tarifs */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 50px; align-items: start; }
.offre { background: var(--blanc); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; }
.offre.vedette { border: 2px solid var(--bleu); box-shadow: 0 16px 46px rgba(46,98,233,.16); position: relative; }
.ruban {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--bleu); color: #fff; font-size: 13px; font-weight: 800;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.offre h3 { font-size: 21px; }
.prix { font-family: var(--display); font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 2px; }
.prix small { font-size: 17px; font-weight: 600; color: var(--muted); }
.offre .pour { color: var(--ink-2); font-size: 15px; margin: 0 0 22px; }
.offre ul { list-style: none; padding: 0; margin: 0 0 26px; }
.offre li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 15.5px; }
.offre li i { color: var(--vert); font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.offre .btn { width: 100%; }

/* FAQ */
.faq { max-width: 780px; margin: 46px auto 0; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px;
  background: var(--blanc); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 20px 24px; font-weight: 700; font-size: 17px;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; font-size: 24px; color: var(--bleu); font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--ink-2); font-size: 16px; }

/* Appel final */
.final {
  background: linear-gradient(135deg, var(--navy), #171E36); color: #fff; text-align: center;
  padding: 92px 0;
}
.final h2 { font-size: clamp(28px, 4.4vw, 42px); max-width: 22ch; margin: 0 auto; }
.final p { color: rgba(255,255,255,.76); font-size: 18px; max-width: 52ch; margin: 18px auto 32px; }

/* Pied de page */
.pied { background: var(--nuit); color: rgba(255,255,255,.68); padding: 52px 0 34px; font-size: 15px; }
.pied img { height: 34px; margin-bottom: 18px; }
.pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 34px; }
.pied h4 { font-family: var(--display); color: #fff; font-size: 16px; margin: 0 0 12px; }
.pied a { color: rgba(255,255,255,.68); text-decoration: none; display: block; padding: 5px 0; }
.pied a:hover { color: #fff; }
.pied-bas { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); font-size: 13.5px; color: rgba(255,255,255,.5); }
@media (max-width: 720px) { .pied-grille { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Pages légales ---------- */
.legal { max-width: 800px; margin: 0 auto; padding: 56px 22px 80px; }
.legal h1 { font-size: 34px; margin-bottom: 8px; }
.legal .maj { color: var(--muted); font-size: 14.5px; margin-bottom: 38px; }
.legal h2 { font-size: 21px; margin: 38px 0 12px; }
.legal p, .legal li { color: var(--ink-2); font-size: 16px; }
.legal ul { padding-left: 22px; }
.legal .retour { display: inline-flex; align-items: center; gap: 7px; color: var(--bleu); text-decoration: none; font-weight: 700; margin-bottom: 30px; }
.a-completer { background: #FFF4D6; border: 1px dashed #D9A400; color: #6B5200; padding: 3px 9px; border-radius: 6px; font-weight: 700; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ================= Page contact ================= */
.contact-page {
  background:
    radial-gradient(ellipse 1100px 460px at 50% -200px, rgba(96,146,255,.24), transparent 66%),
    var(--nuit);
  color: #fff; padding: 70px 0 80px; min-height: 70vh;
}
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.contact-texte h1 { font-size: clamp(30px, 4vw, 44px); margin: 18px 0 0; }
.accroche-sombre { color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.65; margin: 16px 0 26px; max-width: 46ch; }
.accroche-sombre strong { color: #fff; }
.contact-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contact-points li { display: flex; gap: 13px; align-items: flex-start; }
.contact-points i { font-size: 21px; color: var(--citron); flex-shrink: 0; margin-top: 2px; }
.contact-points span { display: flex; flex-direction: column; gap: 2px; }
.contact-points b { font-size: 15.5px; }
.contact-points small { color: rgba(255,255,255,.6); font-size: 13.5px; }
.contact-mail { margin-top: 28px; color: rgba(255,255,255,.6); font-size: 14.5px; }
.contact-mail a { color: var(--bleu-clair); }

.contact-carte {
  background: #fff; color: var(--ink); border-radius: 22px; padding: 30px;
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}
.contact-carte h2 { font-size: 23px; margin: 0; }
.contact-sous { color: var(--muted); font-size: 14.5px; margin: 6px 0 22px; }
.contact-carte label { display: block; margin-bottom: 14px; }
.contact-carte label > span { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.contact-carte label b { color: #D63E2E; }
.contact-carte input, .contact-carte textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px; border: 1px solid var(--line);
  font: inherit; font-size: 15px; background: #FBFCFE; color: var(--ink); resize: vertical;
}
.contact-carte input:focus, .contact-carte textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: transparent; }
.contact-carte .btn { width: 100%; justify-content: center; margin-top: 6px; }
.contact-legal { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }
.contact-ok {
  display: flex; gap: 12px; align-items: flex-start; background: #E3F1E9; color: #1F6B45;
  border-radius: 14px; padding: 18px 20px;
}
.contact-ok i { font-size: 26px; }
.contact-ok b { display: block; font-size: 16px; margin-bottom: 3px; }
.contact-ok span { font-size: 14.5px; }
.contact-ko { background: #FBE3DE; color: #B3392F; border-radius: 12px; padding: 14px 16px; font-size: 14px; margin-top: 12px; }
@media (max-width: 860px) {
  .contact-grille { grid-template-columns: 1fr; gap: 34px; }
  .contact-page { padding: 44px 0 60px; }
}

/* ================= Aperçu de l'application (hero) ================= */
.fenetre {
  margin-top: 52px; border-radius: 16px; overflow: hidden; text-align: left;
  background: var(--nuit-2); border: 1px solid rgba(180,205,255,.16);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(46,98,233,.18);
}
.fenetre-barre {
  display: flex; align-items: center; gap: 7px; padding: 11px 15px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(180,205,255,.10);
}
.fenetre-barre > span { width: 11px; height: 11px; border-radius: 999px; background: rgba(255,255,255,.18); }
.fenetre-url {
  margin: 0 auto; font-size: 12.5px; color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.05); padding: 4px 16px; border-radius: 999px;
}
.fenetre-corps { padding: 20px; }
.ap-metriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ap-m { background: rgba(255,255,255,.04); border: 1px solid rgba(180,205,255,.10); border-radius: 12px; padding: 13px 15px; }
.ap-m small { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.ap-m b { font-family: var(--display); font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.ap-m b i { display: block; font-style: normal; font-family: var(--sans); font-size: 12px; font-weight: 400; color: rgba(255,255,255,.5); margin-top: 2px; }
.ap-m b.vert { color: #3FD48A; } .ap-m b.ambre { color: #FFC658; } .ap-m b.rouge { color: #FF8A80; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ap-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255,255,255,.4); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid rgba(180,205,255,.12);
}
.ap-table th:not(:first-child), .ap-table td:not(:first-child) { text-align: right; }
.ap-table td { padding: 11px 10px; border-bottom: 1px solid rgba(180,205,255,.07); color: rgba(255,255,255,.88); font-variant-numeric: tabular-nums; }
.ap-table td em { font-style: normal; color: rgba(255,255,255,.42); }
.ap-table td.vert { color: #3FD48A; }
.pastille-fc { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.pastille-fc.vert { background: rgba(63,212,138,.14); color: #3FD48A; }
.pastille-fc.rouge { background: rgba(255,138,128,.15); color: #FF8A80; }
.fenetre-legende { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.45); }
@media (max-width: 620px) {
  .ap-table th:nth-child(2), .ap-table td:nth-child(2),
  .ap-table th:nth-child(4), .ap-table td:nth-child(4) { display: none; }
  .fenetre-corps { padding: 14px; }
}

/* ================= Petites maquettes dans les fonctions ================= */
.maquette {
  margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #FBFCFE;
}
.maq-titre {
  display: flex; align-items: center; gap: 8px; padding: 11px 15px; font-size: 13px; font-weight: 700;
  background: #F2F5FB; color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.maq-titre i { font-size: 16px; color: var(--bleu); }
.maquette.alerte .maq-titre { background: #FFF6E5; color: #8A6A00; }
.maquette.alerte .maq-titre i { color: #B5800F; }
.maq-ligne {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px; font-size: 14px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.maq-ligne:last-child { border-bottom: none; }
.maq-nom { font-weight: 700; flex: 1; min-width: 140px; }
.maq-prix { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.maq-prix s { color: var(--muted); }
.maq-prix b { color: var(--ink); }
.maq-var { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.maq-var.hausse { background: #FBE3DE; color: #B3392F; }
.maq-var.baisse { background: var(--vert-soft); color: var(--vert); }
.maq-var.ok { background: #EEF2FA; color: var(--ink-2); }

/* ================= Section fondateur ================= */
.fondateur { background: var(--blanc); }
.fondateur-grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.photo-cadre {
  aspect-ratio: 1; border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, var(--creme), #EFE4CC);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); border: 2px dashed var(--line);
}
.photo-cadre i { font-size: 64px; opacity: .5; }
.photo-cadre span { font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.pastille-claire {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: var(--creme); color: #8A6A00; border: 1px solid #EFE4CC;
}
.fondateur-texte { color: var(--ink-2); font-size: 16.5px; margin: 18px 0 0; max-width: 58ch; }
.fondateur-preuves { display: flex; gap: 34px; flex-wrap: wrap; margin: 28px 0 0; }
.fondateur-preuves b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--bleu); letter-spacing: -.02em; }
.fondateur-preuves span { font-size: 13.5px; color: var(--muted); }
.fondateur-signature { margin: 26px 0 0; font-size: 16px; }
.fondateur-signature a { color: var(--bleu); font-weight: 700; }
@media (max-width: 860px) { .fondateur-grille { grid-template-columns: 1fr; gap: 30px; } }

/* ================= Tarifs : annuel + garantie ================= */
.annuel { font-size: 14px; color: var(--ink-2); margin: -6px 0 14px; }
.annuel b { color: var(--vert); }
.offre li.limite { color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.offre li.limite i { color: var(--muted); }
.garantie {
  display: flex; align-items: center; gap: 16px; text-align: left; max-width: 620px; margin: 34px auto 0;
  background: var(--vert-soft); border-radius: 18px; padding: 20px 24px;
}
.garantie > i { font-size: 34px; color: var(--vert); flex-shrink: 0; }
.garantie b { display: block; font-size: 17px; color: #1F6B45; margin-bottom: 3px; }
.garantie span { font-size: 14.5px; color: #2F6B4F; }

/* ================= Bouton permanent sur téléphone ================= */
.cta-mobile { display: none; }
@media (max-width: 820px) {
  .cta-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(6,7,15,.94); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(180,205,255,.14);
  }
  .cta-mobile b { display: block; color: #fff; font-size: 15px; font-family: var(--display); font-weight: 800; }
  .cta-mobile small { color: rgba(255,255,255,.6); font-size: 12.5px; }
  .cta-mobile .btn { padding: 11px 24px; min-height: 44px; font-size: 15px; }
  body { padding-bottom: 74px; }
}

/* Encart des principes (remplace la photo) */
.fondateur-encart {
  background: linear-gradient(160deg, var(--nuit-2), var(--nuit)); color: #fff;
  border-radius: var(--radius-lg); padding: 32px; border: 1px solid rgba(180,205,255,.14);
  box-shadow: 0 20px 60px rgba(23,32,58,.18);
}
.fondateur-encart > i { font-size: 30px; color: var(--citron); }
.fondateur-encart h3 { font-size: 20px; margin: 12px 0 18px; }
.fondateur-encart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.fondateur-encart li { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.55; padding-left: 22px; position: relative; }
.fondateur-encart li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--bleu-clair);
}
.fondateur-encart b { color: #fff; display: block; margin-bottom: 2px; }

/* ================= Retouches : lien connexion, durées d'étapes ================= */
.entete nav a.connexion { color: rgba(255,255,255,.55); }
.entete nav a.connexion:hover { color: #fff; }
.etape-duree {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--vert-soft); color: var(--vert); padding: 3px 11px; border-radius: 999px;
}
.etape-note { font-size: 13.5px; color: var(--muted); margin: 4px 0 6px; }

/* ================= Animations à l'apparition ================= */
/* Fenêtre du hero : métriques et lignes en cascade */
.fenetre .ap-m, .fenetre .ap-table tbody tr { opacity: 0; transform: translateY(10px); }
.fenetre.anime .ap-m, .fenetre.anime .ap-table tbody tr {
  animation: apparait .6s var(--ease) forwards;
}
.fenetre.anime .ap-m:nth-child(1) { animation-delay: .1s }
.fenetre.anime .ap-m:nth-child(2) { animation-delay: .22s }
.fenetre.anime .ap-m:nth-child(3) { animation-delay: .34s }
.fenetre.anime .ap-m:nth-child(4) { animation-delay: .46s }
.fenetre.anime .ap-table tbody tr:nth-child(1) { animation-delay: .6s }
.fenetre.anime .ap-table tbody tr:nth-child(2) { animation-delay: .72s }
.fenetre.anime .ap-table tbody tr:nth-child(3) { animation-delay: .84s }
.fenetre.anime .ap-table tbody tr:nth-child(4) { animation-delay: .96s }
@keyframes apparait { to { opacity: 1; transform: none } }
/* la pastille rouge attire l'œil une fois la cascade finie */
.fenetre.anime .pastille-fc.rouge { animation: pulse-rouge 2.2s ease-in-out 1.4s infinite; }
@keyframes pulse-rouge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,128,.35); }
  50% { box-shadow: 0 0 0 7px rgba(255,138,128,0); }
}

/* Scan de facture : rayon de lecture puis prix qui basculent, en boucle */
.maquette.scan { position: relative; }
.maquette.scan::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--bleu), transparent);
  box-shadow: 0 0 14px rgba(46,98,233,.55);
}
.maquette.scan.anime::after { animation: rayon 5.5s var(--ease) infinite; }
@keyframes rayon {
  0% { top: 14%; opacity: 0 }
  6% { opacity: 1 }
  30% { top: 96%; opacity: 1 }
  36%, 100% { top: 96%; opacity: 0 }
}
.maquette.scan .maq-prix b, .maquette.scan .maq-var { opacity: 0; }
.maquette.scan.anime .maq-prix b, .maquette.scan.anime .maq-var { animation: bascule 5.5s var(--ease) infinite; }
.maquette.scan.anime .maq-ligne:nth-child(2) .maq-prix b,
.maquette.scan.anime .maq-ligne:nth-child(2) .maq-var { animation-delay: .18s }
.maquette.scan.anime .maq-ligne:nth-child(3) .maq-prix b,
.maquette.scan.anime .maq-ligne:nth-child(3) .maq-var { animation-delay: .36s }
.maquette.scan.anime .maq-ligne:nth-child(4) .maq-prix b,
.maquette.scan.anime .maq-ligne:nth-child(4) .maq-var { animation-delay: .54s }
@keyframes bascule {
  0%, 30% { opacity: 0; transform: translateY(5px) }
  38%, 90% { opacity: 1; transform: none }
  97%, 100% { opacity: 0 }
}

/* Alerte : la jauge monte et franchit la cible */
.maq-jauge {
  display: block; position: relative; margin-top: 6px; height: 6px; width: min(220px, 100%);
  background: #EEF2FA; border-radius: 999px; overflow: visible;
}
.maq-jauge i {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--vert);
}
.maquette.alerte.anime .maq-jauge i { animation: monte 1.8s var(--ease) .3s forwards; }
@keyframes monte {
  0% { width: 0; background: var(--vert) }
  80% { background: var(--vert) }
  100% { width: 74%; background: #B5800F }
}
/* le repère de la cible (30 %) que la jauge vient franchir */
.maq-jauge u {
  position: absolute; top: -3px; bottom: -3px; left: 72%; width: 2px; background: #B5800F; opacity: .5;
}
.maquette.alerte .maq-var.hausse { opacity: 0; }
.maquette.alerte.anime .maq-var.hausse { animation: apparait .5s var(--ease) 1.9s forwards; }

/* Bandeau : les chiffres se comptent (géré en JS), fondu du bloc */
.chiffre { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.chiffres-grille.anime .chiffre { opacity: 1; transform: none; }
.chiffres-grille.anime .chiffre:nth-child(2) { transition-delay: .12s }
.chiffres-grille.anime .chiffre:nth-child(3) { transition-delay: .24s }
.chiffres-grille.anime .chiffre:nth-child(4) { transition-delay: .36s }

/* Étapes : le trait se dessine entre les numéros */
.etapes { position: relative; }
.etapes::before {
  content: ''; position: absolute; top: 40px; left: 60px; right: 60px; height: 2px;
  background: linear-gradient(90deg, var(--citron), var(--bleu));
  transform: scaleX(0); transform-origin: left; opacity: .45;
}
.etapes.anime::before { animation: trait 1.2s var(--ease) .2s forwards; }
@keyframes trait { to { transform: scaleX(1) } }
@media (max-width: 900px) { .etapes::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fenetre .ap-m, .fenetre .ap-table tbody tr, .maquette.scan .maq-prix b,
  .maquette.scan .maq-var, .maquette.alerte .maq-var.hausse, .chiffre { opacity: 1 !important; transform: none !important; animation: none !important; }
  .maquette.scan::after, .etapes::before { display: none !important; }
  .maq-jauge i { width: 74% !important; background: #B5800F !important; }
}

/* ================= Fonctions : puces scannables ================= */
.atout-points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 9px; }
.atout-points li {
  position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5;
}
.atout-points li::before {
  content: '\ea5e'; font-family: 'tabler-icons'; position: absolute; left: 0; top: 1px;
  color: var(--vert); font-size: 17px;
}

/* ================= Bandeau version de lancement ================= */
.lancement {
  display: flex; align-items: center; gap: 14px; text-align: left;
  max-width: 720px; margin: 0 auto 34px; padding: 16px 22px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,197,24,.16), rgba(245,197,24,.06));
  border: 1px solid rgba(245,197,24,.42);
}
.lancement > i { font-size: 26px; color: #B5800F; flex-shrink: 0; }
.lancement span { font-size: 15.5px; color: #7A5C00; line-height: 1.5; }
.lancement b { color: #5E4700; }

/* ================= Bandeau confiance ================= */
.confiance {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px;
}
.confiance span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); background: var(--blanc); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 999px;
}
.confiance i { font-size: 18px; color: var(--vert); }

/* ============ Section bilan mensuel (V4) ============ */
.bilan-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.bilan-texte .section-titre { margin-top: 14px; }
.contexte-prix { max-width: 560px; margin: 14px auto 30px; font-size: 16px;
  color: var(--muted); line-height: 1.6; }

/* Maquette du mail de bilan */
.mail-maq { padding: 0; overflow: hidden; }
.mm-entete { background: var(--navy, #0E1B33); color: #fff; font-size: 13px; font-weight: 700;
  padding: 11px 18px; display: flex; align-items: center; gap: 8px; }
.mm-entete i { color: #FFD43B; }
.mm-resultat { text-align: center; padding: 20px 18px 16px; border-bottom: 1px solid #EDEFF4; }
.mm-label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px;
  color: #8B92A0; font-weight: 700; }
.mm-chiffre { display: block; font-size: 40px; font-weight: 800; color: #1B8A5A;
  line-height: 1.15; margin: 6px 0 3px; }
.mm-sous { font-size: 13px; color: #5B6472; }
.mm-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid #F2F4F8; font-size: 13.5px; color: #333; }
.mm-ligne span { flex: 1; position: relative; padding-bottom: 7px; }
.mm-ligne b { font-variant-numeric: tabular-nums; }
.mm-barre { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px;
  background: #7FA6E0; display: block; }
.mm-total { border-bottom: none; font-weight: 800; }
.mm-total b { color: #1B8A5A; font-size: 15px; }
.mm-total span { padding-bottom: 0; }

@media (max-width: 860px) {
  .bilan-grille { grid-template-columns: 1fr; gap: 30px; }
}

/* Offre unique : une carte centrée au lieu de la grille à deux colonnes */
.offres.solo { display: grid; grid-template-columns: min(500px, 100%); justify-content: center; }