/* =============================================================
   Discove — Shared stylesheet
   Contains CSS that is identical (or quasi-identical) across
   index.html, devis.html and mentions-legales.html.
   Page-specific rules remain inline in each HTML file and will
   override these defaults because they are loaded after.
   ============================================================= */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE VARIABLES (--font / --display restent définis par page) ── */
:root {
  --bg:       #070710;
  --bg2:      #0A0A18;
  --bg3:      #0D0D1F;
  --chrome:   linear-gradient(135deg, #fff 0%, #C8B8FF 30%, #A8C8FF 60%, #E8D8FF 100%);
  --chrome2:  linear-gradient(135deg, #E0D8FF, #A8C8FF, #E0D8FF);
  --violet:   #8B5CF6;
  --violet-b: #A855F7;
  --glow:     rgba(168,100,255,0.35);
  --ice-b:    rgba(200,184,255,0.28);
  --text:     #F0EEFF;
  --border:   rgba(200,184,255,0.1);
  --border-b: rgba(200,184,255,0.25);
}

html { scroll-behavior: smooth; }

/* ── CURSOR (désactivé) ── */
#cur, #cur-r { display:none!important; }

/* ── AMBIENT ORBS ── */
#scene { position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; }
.orb { position:absolute;border-radius:50%;filter:blur(80px); }
.orb-1 {
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(168,100,255,.18) 0%,transparent 70%);
  top:-200px;left:50%;transform:translateX(-50%);
  animation:orbA 10s ease-in-out infinite;
}
.orb-2 {
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(100,180,255,.12) 0%,transparent 70%);
  bottom:10%;right:-100px;
  animation:orbB 14s ease-in-out infinite;
}
.orb-3 {
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(200,120,255,.1) 0%,transparent 70%);
  top:40%;left:-80px;
  animation:orbC 12s ease-in-out infinite;
}
@keyframes orbA{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-40px)}}
@keyframes orbB{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes orbC{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(20px) scale(1.1)}}

/* ── NAV (structurel) ── */
nav {
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 48px;
  display:flex;align-items:center;justify-content:space-between;
  transition:transform 0.4s cubic-bezier(0.34,1.32,0.64,1),padding .3s,background .4s;
}
nav.scrolled {
  padding:14px 48px;
  background:rgba(7,7,16,.7);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
nav.nav-hidden { transform:translateY(-100%); }

@keyframes navDrop {
  0%   { opacity:0;transform:translateY(-60px); }
  60%  { opacity:1;transform:translateY(8px); }
  100% { opacity:1;transform:translateY(0); }
}
@keyframes pillFade { to { opacity:1; } }

.nav-logo,
.nav-pill .nav-link,
.nav-cta {
  opacity:0;
  animation:navDrop .85s cubic-bezier(.34,1.32,.64,1) forwards;
}
.nav-logo                        { animation-delay:.15s; }
.nav-pill .nav-link:nth-child(1) { animation-delay:.35s; }
.nav-pill .nav-link:nth-child(2) { animation-delay:.45s; }
.nav-pill .nav-link:nth-child(3) { animation-delay:.55s; }
.nav-pill .nav-link:nth-child(4) { animation-delay:.65s; }
.nav-pill .nav-link:nth-child(5) { animation-delay:.75s; }
.nav-cta                         { animation-delay:.9s; }

.nav-pill {
  display:flex;gap:2px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:5px;border-radius:100px;
  backdrop-filter:blur(16px);
  opacity:0;
  animation:pillFade .6s ease forwards;
  animation-delay:.3s;
}
.nav-link {
  padding:7px 18px;border-radius:100px;
  font-size:13px;font-weight:500;color:var(--muted);
  cursor:none;transition:all .2s;text-decoration:none;
}
.nav-link:hover { color:var(--text);background:rgba(255,255,255,.08); }
.nav-cta {
  padding:10px 22px;border-radius:100px;
  background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(100,180,255,.18));
  border:1px solid rgba(200,184,255,.35);
  font-size:13px;font-weight:600;color:var(--text);
  cursor:none;text-decoration:none;
  box-shadow:0 0 24px rgba(168,85,247,.2);
  transition:all .3s;
}
.nav-cta:hover { box-shadow:0 0 40px rgba(168,85,247,.4);border-color:rgba(200,184,255,.55); }

/* ── BRAND LOGO (avec i animé) ── */
.brand-logo {
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: lowercase !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #E8D8FF 40%, #C8B8FF 70%, #A8C8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(168,100,255,0.35));
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.nav-logo.brand-logo { font-size: 24px; letter-spacing: -0.05em; }
.brand-logo .logo-i {
  display: inline-block; position: relative; margin: 0 0.06em; line-height: 1;
  height: 0.92em; width: 0.26em; vertical-align: baseline;
  transform-origin: 50% 100%;
  animation: logoIBob 2.8s ease-in-out infinite;
  -webkit-text-fill-color: initial; background: none; overflow: visible;
}
.brand-logo .logo-i-stem {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0.16em; height: 0.6em;
  background: linear-gradient(180deg, #E8D8FF 0%, #A855F7 100%);
  border-radius: 0.08em; box-shadow: 0 0 14px rgba(168,85,247,0.55); display: block;
}
.brand-logo .logo-i-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0.22em; height: 0.22em; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #C8B8FF 60%, #8B5CF6 100%);
  box-shadow: 0 0 12px rgba(200,184,255,0.9), 0 0 22px rgba(168,85,247,0.6);
  animation: logoIDot 2.8s ease-in-out infinite; display: block;
}
@keyframes logoIBob {
  0%,100%{transform:translateY(0) rotate(0deg)} 25%{transform:translateY(-3px) rotate(-4deg)}
  50%{transform:translateY(0) rotate(0deg)} 75%{transform:translateY(-2px) rotate(4deg)}
}
@keyframes logoIDot {
  0%,100%{transform:translateX(-50%) translateY(0) scale(1);box-shadow:0 0 12px rgba(200,184,255,0.9),0 0 22px rgba(168,85,247,0.6)}
  40%,60%{transform:translateX(-50%) translateY(-0.16em) scale(1.25);box-shadow:0 0 18px rgba(255,255,255,1),0 0 32px rgba(168,85,247,0.95)}
}

/* ── BADGE DOT (partagé hero/devis/legal) ── */
.badge-dot { width:5px;height:5px;border-radius:50%;background:#A855F7;animation:bdot 2s ease-in-out infinite; }
@keyframes bdot{0%,100%{opacity:1;box-shadow:0 0 6px #A855F7}50%{opacity:.3;box-shadow:none}}

/* ── FOOTER (structurel partagé) ── */
footer {
  background: rgba(10,10,24,.8);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 72px 48px 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  align-items: start; gap: 56px;
  position: relative; z-index: 1;
}
footer a, footer p, footer li, footer span { color: rgba(255,255,255,.95); font-weight: 500; }
.f-brand { padding-right: 12px; }
.f-logo.brand-logo {
  font-size: 78px;
  letter-spacing: -.06em;
  width: 100%;
  margin-bottom: 24px;
}
.f-tag { font-size:14px; color:#E8D8FF; max-width:340px; line-height:1.65; }
.f-col h4 { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FFFFFF; margin-bottom:20px; }
.f-col ul { list-style:none;display:flex;flex-direction:column;gap:12px; }
.f-col ul a { color:#D8B4FE; text-decoration:none; font-size:14px; transition:color .2s; display:inline-flex; align-items:center; gap:11px; cursor:none; }
.f-col ul a:hover { color:#FFFFFF; }
.f-ico {
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(100,180,255,.12));
  border:1px solid rgba(200,184,255,.22);
  font-size:14px;flex-shrink:0;
  backdrop-filter:blur(8px);
}
.f-launch {
  margin-top:24px; display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:100px;
  background:linear-gradient(135deg,rgba(168,85,247,.32),rgba(100,180,255,.22));
  border:1px solid rgba(200,184,255,.42);
  color:var(--text); font-size:14px;font-weight:600;
  text-decoration:none;cursor:none;
  box-shadow:0 0 32px rgba(168,85,247,.28),inset 0 1px 0 rgba(255,255,255,.12);
  transition:all .3s;
}
.f-launch:hover { transform:translateY(-2px); box-shadow:0 0 48px rgba(168,85,247,.55); }
.f-launch .rocket { font-size:18px; animation: rocketHover 2.4s ease-in-out infinite; }
@keyframes rocketHover { 0%,100%{transform:translate(0,0) rotate(-8deg)} 50%{transform:translate(1px,-3px) rotate(-4deg)} }
.f-socials { margin-top:30px; display:flex;gap:10px;flex-wrap:wrap; }
.f-soc {
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-b);
  color: rgba(255,255,255,.95);
  transition:all .3s ease;
  cursor:none;text-decoration:none;
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.f-soc::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(100,180,255,.2));
  opacity:0;transition:opacity .3s;
}
.f-soc svg { width:18px;height:18px;fill:currentColor;transition:transform .3s;position:relative;z-index:1; }
.f-soc:hover { color:#fff; border-color:rgba(200,184,255,.55); transform:translateY(-3px); box-shadow:0 8px 22px rgba(168,85,247,.3); }
.f-soc:hover::before { opacity:1; }
.f-soc:hover svg { transform:scale(1.12); }
.f-bottom { grid-column:1/-1;padding-top:32px;margin-top:16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; }
.f-copy { font-size:12px; color:#C8B8FF; }
.f-legal { display:flex;gap:20px; }
.f-legal a { font-size:12px; color:#C8B8FF; text-decoration:none; transition:color .2s; cursor:none; }
.f-legal a:hover { color:#FFFFFF; }

/* ── WHATSAPP ICON ── */
.wa-pink {
  color:#fff; fill:#fff;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; line-height:0;
}
.wa-pink-icon { width:16px; height:16px; display:block; }
footer .f-ico .wa-pink { width:100%; height:100%; }

/* ── MOBILE FAB (WhatsApp) ── */
.mobile-fab {
  display: none;
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #A855F7, #8B5CF6);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  font-size: 24px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(168,85,247,.4);
  z-index: 1000;
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .3s, box-shadow .3s;
}
.mobile-fab .wa-pink { width:100%; height:100%; border-radius:50%; }
.mobile-fab .wa-pink-icon { width:26px; height:26px; }

/* ── PAGE TRANSITIONS ── */
@keyframes pageIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
</content>
</invoke>