/* styles.css — Parrainage Bourso — mobile-first, accessible, animé  */

/* ====== Thème (facile à ajuster si tu veux d’autres teintes) ====== */
:root{
  /* Couleurs inspirées Bourso : rose + bleu clair */
  --bg: #f8f9fc;                /* fond global très clair */
  --text:#0f172a;               /* gris/bleu foncé lisible */
  --muted:#64748b;              /* texte secondaire */
  --primary:#2e63d2;            /* bleu principal (CTA) */
  --primary-hover:#1f47a4;      /* bleu foncé hover */
  --accent:#e6007e;             /* rose accent */
  --accent-hover:#c4006b;       /* rose foncé */
  --card:#ffffff;
  --radius:16px;
  --shadow:0 10px 30px rgba(15, 23, 42, .08);

  /* Dégradés “Bourso-like” */
  --grad-hero: linear-gradient(135deg, rgba(230,0,126,.12), rgba(46,99,210,.10));
  --grad-cta:  linear-gradient(90deg, var(--accent), #ff4fa6 30%, #6ea7ff 70%, var(--primary));
  --grad-cta-hover: linear-gradient(90deg, var(--primary), #6ea7ff 30%, #ff4fa6 70%, var(--accent));
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block}

/* ====== Layout ====== */
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ====== Accessibilité ====== */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  position:fixed;left:16px;top:16px;width:auto;height:auto;padding:.6rem .8rem;
  background:#000;color:#fff;z-index:10000;border-radius:8px
}
:focus-visible{outline:3px solid #22d3ee;outline-offset:2px} /* cyan bien visible */

/* ====== Header ====== */
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:1000;
  backdrop-filter:saturate(1.4) blur(4px)
}
.brand{font-weight:800;text-decoration:none;color:var(--text);letter-spacing:.2px}
.nav{display:flex;gap:12px;align-items:center}
.nav-link{color:var(--text);text-decoration:none;opacity:.9}
.nav-link:hover{opacity:1}

/* ====== Boutons ====== */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;
  font-weight:700;box-shadow:var(--shadow);transform:translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, background-position .4s ease;
  will-change:transform, box-shadow;
}
.btn-lg{padding:16px 24px;font-size:1.075rem}
.btn-primary{
  color:#fff;
  background:var(--grad-cta);
  background-size:200% 100%;
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:var(--grad-cta-hover);
  background-size:200% 100%;
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(46,99,210,.25);
}
.btn-secondary{background:linear-gradient(90deg,#5cc8ff,var(--primary));color:#fff}
.btn-secondary:hover,.btn-secondary:focus-visible{
  filter:saturate(1.1);transform:translateY(-2px)
}

/* ====== Hero ====== */
.hero{padding:64px 0;background:var(--grad-hero)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-text{max-width:680px;margin:0 auto}
.hero-text h1{font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.15;margin:0 0 .4rem}
.subtitle{font-size:1.25rem;color:var(--muted);margin:8px 0 22px}
.note{font-size:.95rem;color:var(--muted)}
.micro{font-size:.85rem;color:var(--muted);margin-top:8px}
.hero-media{max-width:560px;margin:0 auto}

/* ====== Cartes / Grille ====== */
.grid-3{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){
  .hero-inner{grid-template-columns:1.2fr .9fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
.card{
  background:var(--card);
  padding:24px;border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(15,23,42,.12)}
.icon{font-size:28px;margin-bottom:8px}
.cta-center{text-align:center;margin-top:18px}

/* ====== Sections ====== */
.details,.faq,.transparency{padding:52px 0}
.details ul{margin:0;padding-left:18px}
.disclaimer{margin-top:12px;color:var(--muted);font-size:.95rem}
.faq details{
  background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;border:1px solid #e5e7eb
}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:.5rem 0 0 0}

/* ====== Pied de page ====== */
.site-footer{padding:24px 0;border-top:1px solid #e5e7eb;text-align:center;background:#fff}
.site-footer nav a{color:var(--text);text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}

/* ====== Cookie banner ====== */
.cookie-banner{background:#0b1020;color:#fff}
.cookie-banner p{margin:0;padding:8px 0;font-size:.9rem;text-align:center}

/* ====== CTA sticky mobile (boost conversion) ====== */
@media (max-width:900px){
  .cta-fixed{
    position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;
    padding:12px;z-index:900;box-shadow:0 -8px 30px rgba(15,23,42,.06)
  }
  .cta-fixed .btn{width:100%;text-align:center}
}

/* ====== Animations d’apparition ====== */
@keyframes fadeUp {
  from {opacity:0; transform:translateY(14px)}
  to   {opacity:1; transform:translateY(0)}
}
.reveal{opacity:0; animation:fadeUp .6s ease forwards}
.reveal.delay-1{animation-delay:.08s}
.reveal.delay-2{animation-delay:.16s}
.reveal.delay-3{animation-delay:.24s}

/* Respecte les préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
  .btn, .card, .reveal{transition:none;animation:none}
}

/* ====== Helpers pour QR & code ====== */
.qr{
  display:inline-block;border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow)
}
.code-chip{
  font-weight:800;letter-spacing:1px;background:#f1f5ff;color:#0b1b5e;
  padding:10px 14px;border-radius:12px;display:inline-block
}

/* Logo dans le hero */
.brand-logo{
  display:block;
  margin:0 0 10px 0;
  height:auto;
  max-width:220px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.06));
}

/* Pastille code (pour remplacer l'ancien inline) */
.code-chip{
  font-weight:800;letter-spacing:1px;background:#f1f5ff;color:#0b1b5e;
  padding:10px 14px;border-radius:12px;display:inline-block
}

/* QR */
.qr{display:inline-block;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}

/* Logo navbar */
.brand{display:flex;align-items:center;text-decoration:none}
.nav-logo{
  height:36px;
  width:auto;
  max-width:200px;
  object-fit:contain;
  display:block;
  transition:transform .2s ease;
}
.nav-logo:hover{transform:translateY(-1px)}
/* Ajuste légèrement la barre pour bien centrer le logo */
.header-inner{height:64px}
@media (max-width:480px){
  .nav-logo{height:28px}
  .header-inner{height:60px}
}