/* ===========================================================
   AutoFlow 974 — Système de design commun
   Le Secrétaire Telegram · thème clair, moderne, fluide
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root{
  /* couleurs */
  --bg:#f5f7fc;
  --bg-soft:#eef2fb;
  --surface:#ffffff;
  --ink:#0f1729;
  --ink-soft:#27324a;
  --muted:#6b7a93;
  --line:#e7ecf5;
  --brand:#4f46e5;
  --brand-2:#06b6d4;
  --tg:#229ed9;
  --green:#16a34a;
  --green-soft:#e9f8ef;
  --amber:#f59e0b;
  --amber-soft:#fff6e6;
  --danger:#ef4444;
  --danger-soft:#fdeaea;
  --grad:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
  --grad-tg:linear-gradient(135deg,#229ed9,#27b0ec);
  /* ombres */
  --sh-sm:0 2px 8px rgba(20,30,60,.06);
  --sh:0 10px 30px rgba(25,40,90,.08);
  --sh-lg:0 24px 60px rgba(25,40,90,.14);
  --sh-brand:0 16px 40px rgba(79,70,229,.22);
  /* rayons */
  --r:18px;--r-sm:12px;--r-lg:26px;--r-pill:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:15.5px}
h1,h2,h3,h4,.display{font-family:'Sora','Inter',sans-serif;line-height:1.15;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%}
::selection{background:#dcd8ff}

/* layout */
.container{max-width:1120px;margin:0 auto;padding:0 22px}
.container-sm{max-width:860px;margin:0 auto;padding:0 22px}
.section{padding:70px 0}
.center{text-align:center}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;font-size:15px;padding:13px 22px;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(79,70,229,.3)}
.btn-tg{background:var(--grad-tg);color:#fff;box-shadow:0 14px 34px rgba(34,158,217,.28)}
.btn-tg:hover{transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-lg{font-size:16.5px;padding:16px 30px}
.btn-sm{font-size:13.5px;padding:9px 16px}

/* cartes */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:26px}
.card-soft{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card-hover{transition:transform .18s ease,box-shadow .25s ease,border-color .2s}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:#d4d9ff}

/* badges & pills */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.02em}
.badge-brand{background:#eceaff;color:var(--brand)}
.badge-tg{background:#e1f3fc;color:#0d7fb8}
.badge-green{background:var(--green-soft);color:#13834a}
.badge-amber{background:var(--amber-soft);color:#a96a08}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}

/* texte */
.lead{font-size:18.5px;color:var(--muted);line-height:1.6}
.muted{color:var(--muted)}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* nav commune */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-family:'Sora',sans-serif;text-decoration:none;color:var(--ink)}
.brand .logo{width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;box-shadow:var(--sh-brand)}
.brand small{display:block;font-size:11px;color:var(--muted);font-weight:600;font-family:'Inter',sans-serif;letter-spacing:0}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--brand)}

/* pied de page */
.foot{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:13.5px;text-align:center}
.foot b{color:var(--ink-soft)}

/* utilitaires d'animation à l'apparition */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* grilles */
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

@media(max-width:900px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:1fr}
  .section{padding:50px 0}
}
@media(max-width:640px){
  .g-2,.g-4{grid-template-columns:1fr}
  .nav-links{gap:14px}
  .nav-links a.hide-sm{display:none}
}

/* ============================================================
   EFFETS & SMARTPHONE RÉALISTE
   ============================================================ */

/* éclat sur les boutons primaires */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-22deg);animation:shine 5s ease-in-out infinite}
@keyframes shine{0%,55%{left:-130%}78%,100%{left:150%}}

/* texte dégradé animé */
.shimmer{background:linear-gradient(90deg,#4f46e5,#06b6d4,#a855f7,#4f46e5);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shim 7s linear infinite}
@keyframes shim{to{background-position:300% 0}}

/* fond aurore animé */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.aurora .b1{width:480px;height:480px;background:#a9b4ff;opacity:.55;top:-140px;right:-70px;animation:drift 20s ease-in-out infinite}
.aurora .b2{width:420px;height:420px;background:#86dcff;opacity:.5;bottom:-160px;left:-90px;animation:drift 24s ease-in-out infinite -7s}
.aurora .b3{width:340px;height:340px;background:#f3aef9;opacity:.4;top:90px;left:34%;animation:drift 26s ease-in-out infinite -14s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-34px) scale(1.12)}66%{transform:translate(-34px,26px) scale(.94)}}

/* grille subtile en surimpression */
.dotgrid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#5b6bff22 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(700px 420px at 70% 20%,#000,transparent 75%);
  mask-image:radial-gradient(700px 420px at 70% 20%,#000,transparent 75%)}

/* flottement */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(1deg)}}
.float{animation:floaty 7s ease-in-out infinite}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* --- le smartphone --- */
.device{position:relative;width:300px;border-radius:50px;
  background:linear-gradient(155deg,#41465a 0%,#181b22 46%,#0a0b10 100%);
  padding:13px;
  box-shadow:0 60px 120px -32px rgba(48,34,110,.6),0 22px 48px rgba(12,14,34,.4),
    inset 0 0 0 2px rgba(255,255,255,.08),inset 0 -4px 10px rgba(0,0,0,.65)}
.device::after{content:"";position:absolute;right:-3px;top:148px;width:3px;height:82px;border-radius:4px;
  background:linear-gradient(#565d70,#1d2029)}
.device .keys{position:absolute;left:-3px;top:118px;display:flex;flex-direction:column;gap:15px}
.device .keys i{width:3px;height:36px;border-radius:4px;background:linear-gradient(#565d70,#1d2029);display:block}
.device .keys i:first-child{height:26px}
.device-screen{position:relative;border-radius:38px;overflow:hidden;background:#e9f0f6;
  display:flex;flex-direction:column;min-height:520px}
.device-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:90px;height:26px;
  background:#000;border-radius:16px;z-index:8;display:flex;align-items:center;justify-content:flex-end;padding-right:10px}
.device-island::after{content:"";width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2b4a7a,#000 70%);box-shadow:0 0 2px #4f7ab8}
.device-status{position:absolute;top:0;left:0;right:0;height:46px;z-index:7;
  display:flex;align-items:center;justify-content:space-between;padding:15px 22px 0;
  color:#fff;font-size:12.5px;font-weight:700}
.device-status .r{display:flex;gap:6px;align-items:center;font-size:12px;opacity:.95}
.device-glare{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:38px;
  background:linear-gradient(125deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 80%,rgba(255,255,255,.06) 100%)}

/* badges flottants autour du device */
.fchip{position:absolute;z-index:5;background:rgba(255,255,255,.86);backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);border-radius:15px;padding:11px 15px;box-shadow:var(--sh);
  font-size:13px;font-weight:700;display:flex;gap:9px;align-items:center;white-space:nowrap}
.fchip .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px}
.fchip small{display:block;font-weight:600;color:var(--muted);font-size:11px}

/* marquee */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:42px;width:max-content;animation:scrollx 22s linear infinite}
.marquee .track span{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--muted);font-size:16px}
@keyframes scrollx{to{transform:translateX(-50%)}}

@media(max-width:560px){.device{width:262px}.fchip{display:none}}
@media (prefers-reduced-motion: reduce){
  .float,.aurora .blob,.shimmer,.btn-primary::after,.marquee .track{animation:none}
}