/* marketing.css — charte commune des pages publiques QLYGO
   (page de garde, tarifs, qui sommes-nous, avis). DA rectangulaire,
   indigo x émeraude, verre, Space Grotesk + Inter. Local comme le reste. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --indigo:#6366f1; --indigo-deep:#4f46e5; --emerald:#10b981;
  --ink:#0f172a; --ink-soft:#334155; --muted:#64748b;
  --line:#e2e8f0; --line-strong:#cbd5e1; --surface:#fff; --bg:#f6f7fb;
  --radius:0px;
  --shadow:0 24px 60px -18px rgba(30,41,99,.28);
  --shadow-sm:0 2px 0 rgba(15,23,42,.04);
  /* Couleurs du logo QLYGO (jaune, vert, bleu) — servent aux dégradés */
  --lg-yellow:#E1B01E; --lg-green:#3F740E; --lg-blue:#273D71;
  --grad-logo:linear-gradient(90deg,var(--lg-yellow),var(--lg-green),var(--lg-blue));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20% -10% auto -10%;height:100vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 50% at 16% 8%,  rgba(225,176,30,.20), transparent 70%),   /* jaune, en haut */
    radial-gradient(46% 48% at 85% 46%, rgba(63,116,14,.16), transparent 70%),    /* vert, au milieu */
    radial-gradient(60% 55% at 55% 96%, rgba(39,61,113,.16), transparent 75%);}    /* bleu, en bas */
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}

/* Navigation */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.4) blur(14px);background:rgba(246,247,251,.72);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.28rem;letter-spacing:-.01em}
.brand img{height:30px;display:block}
nav.links{display:flex;gap:26px;margin-left:12px}
nav.links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .15s}
nav.links a:hover,nav.links a.on{color:var(--indigo-deep)}
.nav-spacer{flex:1}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;padding:12px 20px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .15s ease,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--indigo-deep);color:#fff;box-shadow:0 10px 24px -10px rgba(79,70,229,.7)}
.btn-primary:hover{background:#4338ca;box-shadow:0 14px 30px -10px rgba(79,70,229,.8)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo-deep)}
.btn-sm{padding:9px 16px;font-size:.9rem}
.btn-lg{padding:14px 26px;font-size:1rem}

/* En-tête de page */
.page-head{padding:64px 0 30px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(99,102,241,.1);color:var(--indigo-deep);border:1px solid rgba(99,102,241,.25);font-size:.82rem;font-weight:600;padding:7px 13px;border-radius:var(--radius);margin-bottom:20px}
.badge .spark{color:var(--emerald)}
h1.title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.025em;font-weight:700;margin:0 0 16px}
h1.title .grad{background:linear-gradient(100deg,var(--lg-yellow) 4%,var(--lg-green) 48%,var(--lg-blue) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head .sub{font-size:1.12rem;line-height:1.6;color:var(--ink-soft);max-width:620px;margin:0 auto}

/* Cartes & sections */
.section{padding:20px 0 40px}
h2.sec{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:34px 0 16px}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:26px;position:relative}
.card.bar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-logo)}

/* Pied de page */
footer{border-top:1px solid var(--line);background:rgba(255,255,255,.5);margin-top:40px}
.foot-inner{display:flex;align-items:center;gap:18px;height:62px;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.foot-inner a:hover{color:var(--indigo-deep)}
.foot-inner .nav-spacer{flex:1}

/* Animations d'entrée */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{opacity:0;animation:rise .6s cubic-bezier(.22,.61,.36,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}.d4{animation-delay:.32s}.d5{animation-delay:.42s}.d6{animation-delay:.52s}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;animation:none}html{scroll-behavior:auto}}

@media (max-width:820px){
  nav.links{display:none}
  .page-head{padding:44px 0 22px}
}