/* ============================================================================
   base.css — Système de design partagé par les pages d'acquisition.

   Les trois pages historiques (index / floko / forenta) gardent leur CSS en
   ligne : on n'y touche pas, pour ne rien casser. Ce fichier reprend
   fidèlement leurs jetons et leurs composants, et sert aux pages ajoutées
   ensuite (pages piliers, outils). Toute évolution du design se répercute
   ici en un seul endroit.
   ========================================================================== */

:root{
  --bg:#070910; --panel:#0d111a; --raised:#141a25;
  --border:#1b212d; --border-hi:#2a3341;
  --text:#f1f4f9; --muted:#8b98ab;
  --accent:#4f8cff; --accent-d:#3d7bf0; --accent-l:#9cc0ff; --accent2:#34c98e;
  --violet:#9759ff;
  --radius:18px; --maxw:1160px;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--bg)}
body{font-family:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:transparent;color:var(--text);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,.ff{font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  font-weight:600;letter-spacing:-.035em;line-height:1.15}
::selection{background:rgba(79,140,255,.3)}

/* Repère visible au clavier : obligatoire pour l'accessibilité. */
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px;border-radius:6px}

/* ---------- Structure ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sec{padding:78px 0}
.sec-head{text-align:center;max-width:690px;margin:0 auto 50px}
.sec-head h2{font-size:clamp(27px,4vw,40px)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:17px}

/* Halo d'ambiance, comme sur la page d'accueil. */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient b{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5}
.ambient .a1{width:620px;height:620px;top:-260px;left:-160px;background:rgba(79,140,255,.20)}
.ambient .a2{width:560px;height:560px;top:38%;right:-240px;background:rgba(52,201,142,.13)}
main,header,footer{position:relative;z-index:1}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:12px;
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;
  letter-spacing:-.012em;font-size:15px;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;
  transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn-primary{background:linear-gradient(180deg,#5d96ff,var(--accent-d));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px -10px rgba(79,140,255,.85)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--border-hi);color:var(--text)}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:13px}
@media (hover:hover){
  .btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 34px -12px rgba(79,140,255,.95)}
  .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#3a4759}
}
.btn:active{transform:translateY(0)}

/* ---------- Étiquette ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(79,140,255,.10);border:1px solid rgba(79,140,255,.26);
  color:var(--accent-l);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  max-width:100%;flex-wrap:wrap;justify-content:center}
.eyebrow.vert{background:rgba(52,201,142,.10);border-color:rgba(52,201,142,.28);color:#8fe6c1}

/* ---------- En-tête ---------- */
.head{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:rgba(7,9,16,.82);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:14px;height:68px}
.nav .marque{display:flex;align-items:center;gap:10px;font-family:'Instrument Sans',sans-serif;
  font-weight:700;letter-spacing:-.03em;font-size:17px}
.nav .marque img{width:28px;height:28px;border-radius:8px}
.nav .liens{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav .liens a{padding:8px 12px;border-radius:9px;font-size:14.5px;color:var(--muted);
  transition:color .18s,background .18s}
@media (hover:hover){.nav .liens a:hover{color:var(--text);background:rgba(255,255,255,.05)}}
@media (max-width:760px){.nav .liens a.masq-mob{display:none}}

/* ---------- Cartes ---------- */
.grille{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3{grid-template-columns:1fr}}

.carte{background:linear-gradient(180deg,var(--panel),rgba(13,17,26,.6));
  border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  transition:border-color .2s,transform .2s}
@media (hover:hover){.carte:hover{border-color:var(--border-hi);transform:translateY(-2px)}}
.carte h3{font-size:18px;margin-bottom:8px}
.carte p{color:var(--muted);font-size:15px}
.carte .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:14px;font-size:18px;
  background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.24)}

/* ---------- Contenu rédactionnel ---------- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:clamp(24px,3.4vw,32px);margin:46px 0 14px}
.prose h3{font-size:20px;margin:32px 0 10px}
.prose p{color:#c3cdda;margin-bottom:16px}
.prose ul{margin:0 0 18px 22px;color:#c3cdda}
.prose li{margin-bottom:9px}
.prose strong{color:var(--text);font-weight:600}
.prose a:not(.btn){color:var(--accent-l);text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:16px 20px}
.faq details[open]{border-color:var(--border-hi)}
.faq summary{cursor:pointer;font-family:'Instrument Sans',sans-serif;font-weight:600;
  font-size:16.5px;letter-spacing:-.02em;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-l);font-size:21px;font-weight:400;
  flex-shrink:0;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:12px;color:var(--muted);font-size:15.5px}

/* ---------- Appel à l'action final ---------- */
.cta-final{position:relative;overflow:hidden;text-align:center;
  border:1px solid var(--border-hi);border-radius:26px;padding:60px 28px;margin:0 20px;
  background:linear-gradient(160deg,rgba(79,140,255,.14),rgba(52,201,142,.09))}
.cta-final h2{font-size:clamp(26px,4vw,38px)}
.cta-final p{margin:14px auto 26px;color:#c3cdda;max-width:520px}
.cta-boutons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Pied de page ---------- */
.pied{border-top:1px solid var(--border);margin-top:80px;padding:44px 0 34px;
  color:#66748a;font-size:14px}
.pied .liens{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.pied .liens a{color:var(--muted)}
@media (hover:hover){.pied .liens a:hover{color:var(--text)}}
.pied .bas{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--border)}

/* ---------- Fil d'Ariane ---------- */
.fil{display:flex;gap:8px;align-items:center;color:#66748a;font-size:13.5px;
  padding:22px 0;flex-wrap:wrap}
.fil a{color:var(--muted)}
.fil span[aria-hidden]{opacity:.5}

/* ---------- Apparition au défilement ---------- */
.js-anim .rev{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.js-anim .rev.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}