/* ═══════════════════════════════════════════════════
   ARENA VS — DESIGN SYSTEM PARTAGÉ
   Fond vivant, reveal au scroll, cartes spotlight,
   boutons glow, typographie éditoriale.
   Trois piliers : 01 Prospection BDR/SDR (rouge) ·
   02 Automatisations IA (cyan) · 03 Présence Web (indigo).
   Le rouge est la couleur par défaut (pilier 01) : les
   classes .theme-ia / .theme-web (et leurs variantes
   aurora-, spotlight-, form-, progress-) basculent une
   page entière sur le pilier 02 ou 03.
   Requiert : Inter + Instrument Serif (Google Fonts)
   ═══════════════════════════════════════════════════ */

/* ── Tokens tri-piliers (la couleur EST la hiérarchie de valeur) ── */
:root{
  --c-bdr:#ef4444;  --c-bdr-2:#fb923c;                 /* 01 BIEN  — Prospection B2B */
  --c-web:#6366f1;  --c-web-2:#a855f7;                 /* 02 MIEUX — Présence Web    */
  --c-ia:#22d3ee;   --c-ia-2:#818cf8;                  /* 03 GRAAL — Automatisations IA */
  --c-ia-light:#67e8f9; --c-ia-deep:#0891b2;
  --accent:var(--c-bdr);                               /* accent ambiant — override par .theme-web / .theme-ia */
}
.theme-web{ --accent:var(--c-web); }
.theme-ia { --accent:var(--c-ia);  }

html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background-color:#08080a; color:#fafafa; overflow-x:hidden; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#08080a; }
::-webkit-scrollbar-thumb { background:#27272a; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#3f3f46; }
::selection { background-color:rgba(239,68,68,.3); color:#fff; }
.theme-web ::selection { background-color:rgba(99,102,241,.32); color:#fff; }
.theme-ia  ::selection { background-color:rgba(34,211,238,.32); color:#04181d; }

/* ── Lien d'évitement (accessibilité clavier) ── */
.skip-link { position:fixed; top:-200px; left:1rem; z-index:200; padding:.65rem 1.1rem; border-radius:8px;
             background:#18181b; color:#fafafa; border:1px solid #3f3f46; font-size:.85rem; transition:top .2s; }
.skip-link:focus { top:1rem; outline:2px solid var(--c-ia); outline-offset:2px; }

/* ── Typographie éditoriale ── */
.serif-accent { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
h1, h2, h3 { text-wrap:balance; }

/* ── Fond vivant : aurora + grille + grain ── */
.bg-aurora { position:fixed; inset:0; z-index:-20; pointer-events:none; overflow:hidden; }
.aurora-blob { position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.blob-1 { width:55vw; height:55vw; top:-28vw; left:50%; transform:translateX(-50%);
          background:radial-gradient(circle,rgba(239,68,68,.16) 0%,rgba(220,38,38,.06) 45%,transparent 70%);
          animation:drift1 26s ease-in-out infinite alternate; }
.blob-2 { width:34vw; height:34vw; top:30vh; left:-16vw;
          background:radial-gradient(circle,rgba(249,115,22,.05) 0%,transparent 70%);
          animation:drift2 32s ease-in-out infinite alternate; }
.blob-3 { width:38vw; height:38vw; bottom:-12vw; right:-14vw;
          background:radial-gradient(circle,rgba(239,68,68,.07) 0%,transparent 70%);
          animation:drift1 38s ease-in-out infinite alternate-reverse; }
/* Variante indigo (Présence Web) */
.aurora-indigo .blob-1 { background:radial-gradient(circle,rgba(99,102,241,.16) 0%,rgba(79,70,229,.06) 45%,transparent 70%); }
.aurora-indigo .blob-2 { background:radial-gradient(circle,rgba(168,85,247,.05) 0%,transparent 70%); }
.aurora-indigo .blob-3 { background:radial-gradient(circle,rgba(99,102,241,.07) 0%,transparent 70%); }
/* Variante cyan (Automatisations IA) */
.aurora-cyan .blob-1 { background:radial-gradient(circle,rgba(34,211,238,.15) 0%,rgba(8,145,178,.06) 45%,transparent 70%); }
.aurora-cyan .blob-2 { background:radial-gradient(circle,rgba(129,140,248,.05) 0%,transparent 70%); }
.aurora-cyan .blob-3 { background:radial-gradient(circle,rgba(34,211,238,.07) 0%,transparent 70%); }
@keyframes drift1 { from{transform:translate(-50%,0) scale(1)} to{transform:translate(-44%,5vh) scale(1.12)} }
@keyframes drift2 { from{transform:translate(0,0)} to{transform:translate(6vw,-6vh) scale(1.08)} }
.bg-grid { position:fixed; inset:0; z-index:-19; pointer-events:none;
           background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                            linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
           background-size:72px 72px;
           -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 30%,transparent 100%);
           mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 30%,transparent 100%); }
.bg-noise { position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.045;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── Barre de progression scroll ── */
#scroll-progress { position:fixed; top:0; left:0; height:2px; width:0; z-index:100;
                   background:linear-gradient(90deg,#ef4444,#fb923c); box-shadow:0 0 12px rgba(239,68,68,.6); }
.progress-indigo#scroll-progress { background:linear-gradient(90deg,#6366f1,#a855f7); box-shadow:0 0 12px rgba(99,102,241,.6); }
.progress-cyan#scroll-progress { background:linear-gradient(90deg,#22d3ee,#818cf8); box-shadow:0 0 12px rgba(34,211,238,.6); }
/* Escalier : la barre "monte en intelligence" rouge → indigo → cyan */
.progress-stair#scroll-progress { background:linear-gradient(90deg,#ef4444,#a855f7 50%,#22d3ee); box-shadow:0 0 12px rgba(129,140,248,.6); }

/* ── Reveal au scroll ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
[data-stagger] > * { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
[data-stagger].in > * { opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){transition-delay:.05s} [data-stagger].in > *:nth-child(2){transition-delay:.15s}
[data-stagger].in > *:nth-child(3){transition-delay:.25s} [data-stagger].in > *:nth-child(4){transition-delay:.35s}
[data-stagger].in > *:nth-child(5){transition-delay:.45s} [data-stagger].in > *:nth-child(6){transition-delay:.55s}
[data-stagger].in > *:nth-child(7){transition-delay:.65s} [data-stagger].in > *:nth-child(8){transition-delay:.75s}
[data-stagger].in > *:nth-child(9){transition-delay:.85s} [data-stagger].in > *:nth-child(10){transition-delay:.95s}
[data-stagger].in > *:nth-child(11){transition-delay:1.05s} [data-stagger].in > *:nth-child(12){transition-delay:1.15s}

@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation:fadeInUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.delay-1{animation-delay:.1s;opacity:0} .delay-2{animation-delay:.25s;opacity:0}
.delay-3{animation-delay:.4s;opacity:0}  .delay-4{animation-delay:.55s;opacity:0}

/* ── Cartes spotlight ── */
.card-hover { position:relative; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s; }
.card-hover::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
                      background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(239,68,68,.09),transparent 45%);
                      opacity:0; transition:opacity .45s; }
.card-hover:hover::before { opacity:1; }
.card-hover:hover { transform:translateY(-5px); box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(239,68,68,.12); }
.spotlight-indigo .card-hover::before { background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(99,102,241,.1),transparent 45%); }
.spotlight-indigo .card-hover:hover { box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.15); }
.spotlight-cyan .card-hover::before { background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.11),transparent 45%); }
.spotlight-cyan .card-hover:hover { box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(34,211,238,.18); }

/* ── Cartes produits ── */
.product-card { transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s; }
.product-card:hover { transform:translateY(-5px); box-shadow:0 24px 70px rgba(0,0,0,.5); }

/* ── Timeline méthode ── */
.step-line::after { content:''; position:absolute; left:23px; top:48px; width:2px; height:calc(100% - 16px);
                    background:linear-gradient(to bottom,rgba(239,68,68,.4),#3f3f46 60%,transparent); }
.step-num { transition:all .4s; }
.step-row:hover .step-num { border-color:rgba(239,68,68,.5); color:#f87171; box-shadow:0 0 24px rgba(239,68,68,.18); }

/* ── Textes dégradés ── */
.gradient-text { background:linear-gradient(135deg,#fca5a5 0%,#ef4444 45%,#fb923c 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-indigo { background:linear-gradient(135deg,#a5b4fc 0%,#6366f1 45%,#a855f7 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-cyan, .gradient-text-ia { background:linear-gradient(135deg,#67e8f9 0%,#22d3ee 45%,#818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* Dégradé "escalier" tri-piliers — signature de marque (hero, titres clés) */
.gradient-text-stair { background:linear-gradient(110deg,#fca5a5 0%,#ef4444 26%,#a5b4fc 58%,#22d3ee 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-metric { background:linear-gradient(135deg,#f4f4f5 20%,#a1a1aa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Boutons ── */
.btn-primary { background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%); color:#fff;
               box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.15) inset,0 8px 32px rgba(239,68,68,.32);
               transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 rgba(255,255,255,.2) inset,0 14px 44px rgba(239,68,68,.5); }
.btn-primary:active { transform:translateY(0); }
.btn-indigo { background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%); color:#fff;
              box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.15) inset,0 8px 32px rgba(99,102,241,.32);
              transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s; }
.btn-indigo:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 rgba(255,255,255,.2) inset,0 14px 44px rgba(99,102,241,.5); }
.btn-cyan { background:linear-gradient(135deg,#22d3ee 0%,#0891b2 100%); color:#04181d; font-weight:600;
            box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 1px 0 rgba(255,255,255,.2) inset,0 8px 32px rgba(34,211,238,.34);
            transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s; }
.btn-cyan:hover { transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 1px 0 rgba(255,255,255,.25) inset,0 14px 44px rgba(34,211,238,.55); }
.btn-cyan:active { transform:translateY(0); }
.btn-ghost { transition:all .3s; }
.btn-ghost:hover { border-color:#52525b; background:rgba(39,39,42,.5); }
.btn-arrow { transition:transform .3s; display:inline-flex; }
a:hover > .btn-arrow, button:hover > .btn-arrow { transform:translateX(4px); }

/* ── Badge "live" ── */
.badge-live { position:relative; overflow:hidden; }
.badge-live::after { content:''; position:absolute; inset:0;
                     background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
                     transform:translateX(-100%); animation:shimmer 3.5s ease-in-out infinite; }
@keyframes shimmer { 55%,100%{transform:translateX(100%)} }
.pulse-dot { position:relative; }
.pulse-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid rgba(239,68,68,.6); animation:pulse-ring 2s cubic-bezier(.16,1,.3,1) infinite; }
.theme-ia .pulse-dot::after { border-color:rgba(34,211,238,.6); }
.theme-web .pulse-dot::after { border-color:rgba(99,102,241,.6); }
@keyframes pulse-ring { 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.8);opacity:0} }

/* ── Marquee ── */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track { display:flex; align-items:center; gap:4rem; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { to{transform:translateX(-50%)} }

/* ── Watermark géant ── */
.watermark { font-weight:700; letter-spacing:-.04em; line-height:.8; color:transparent; user-select:none; pointer-events:none;
             -webkit-text-stroke:1px rgba(255,255,255,.055); }
@media (max-width:640px) { .watermark { -webkit-text-stroke-color:rgba(255,255,255,.04); } }

/* ── Icônes tuiles ── */
.icon-tile { background:linear-gradient(145deg,rgba(239,68,68,.12),rgba(239,68,68,.03)); border:1px solid rgba(239,68,68,.18); color:#f87171; transition:all .4s; }
.group:hover .icon-tile { box-shadow:0 0 28px rgba(239,68,68,.25); border-color:rgba(239,68,68,.4); color:#fca5a5; transform:scale(1.05); }
.icon-tile-indigo { background:linear-gradient(145deg,rgba(99,102,241,.12),rgba(99,102,241,.03)); border:1px solid rgba(99,102,241,.2); color:#818cf8; transition:all .4s; }
.group:hover .icon-tile-indigo { box-shadow:0 0 28px rgba(99,102,241,.25); border-color:rgba(99,102,241,.45); color:#a5b4fc; transform:scale(1.05); }
.icon-tile-cyan { background:linear-gradient(145deg,rgba(34,211,238,.12),rgba(34,211,238,.03)); border:1px solid rgba(34,211,238,.22); color:#67e8f9; transition:all .4s; }
.group:hover .icon-tile-cyan { box-shadow:0 0 28px rgba(34,211,238,.3); border-color:rgba(34,211,238,.5); color:#a5f3fc; transform:scale(1.05); }

/* ── Escalier de valeur : intensité de glow CROISSANTE (la montée se ressent) ── */
.glow-step-1 { box-shadow:0 0 40px rgba(239,68,68,.10); }
.glow-step-2 { box-shadow:0 0 56px rgba(99,102,241,.16); }
.glow-step-3 { box-shadow:0 0 78px rgba(34,211,238,.22); }

/* ── Lang switcher ── */
.lang-btn { background:none; border:1px solid transparent; cursor:pointer; font-size:11px; font-weight:500; letter-spacing:.5px; padding:4px 8px; border-radius:6px; color:#a1a1aa; transition:all .2s; font-family:inherit; }
.lang-btn:hover { color:#f4f4f5; border-color:#3f3f46; }
.lang-btn.active { color:#fafafa; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.theme-web .lang-btn.active { border-color:rgba(99,102,241,.4); background:rgba(99,102,241,.08); }
.theme-ia  .lang-btn.active { border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.1); }

/* ── Formulaires ── */
input:focus, textarea:focus, select:focus { border-color:rgba(239,68,68,.45) !important; box-shadow:0 0 0 3px rgba(239,68,68,.14); }
.form-indigo input:focus, .form-indigo textarea:focus, .form-indigo select:focus { border-color:rgba(99,102,241,.5) !important; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.form-cyan input:focus, .form-cyan textarea:focus, .form-cyan select:focus { border-color:rgba(34,211,238,.55) !important; box-shadow:0 0 0 3px rgba(34,211,238,.14); }
/* Anneau de focus clavier visible (accessibilité) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ── Carte à bord dégradé ── */
.glow-card { position:relative; }
.glow-card::before { content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
                     background:linear-gradient(160deg,rgba(239,68,68,.4),rgba(255,255,255,.06) 30%,rgba(255,255,255,.04) 70%,rgba(251,146,60,.25));
                     -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; }
.glow-card-indigo::before { background:linear-gradient(160deg,rgba(99,102,241,.45),rgba(255,255,255,.06) 30%,rgba(255,255,255,.04) 70%,rgba(168,85,247,.3)); }
.glow-card-cyan::before { background:linear-gradient(160deg,rgba(34,211,238,.5),rgba(255,255,255,.06) 30%,rgba(255,255,255,.04) 70%,rgba(129,140,248,.3)); }

/* ── Kicker de section ── */
.kicker { font-size:.75rem; text-transform:uppercase; letter-spacing:.25em; font-weight:500; display:flex; align-items:center; gap:.75rem; }
.kicker::before { content:''; display:inline-block; width:2rem; height:1px; background:currentColor; opacity:.6; }
.kicker-center { justify-content:center; }
.kicker-center::after { content:''; display:inline-block; width:2rem; height:1px; background:currentColor; opacity:.6; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
  .reveal, [data-stagger] > * { opacity:1; transform:none; }
}