/* CONVOI — site vitrine. Charte : minimalisme, transparence, lumière. Police Inter.
   Thème CLAIR par défaut + thème sombre (toggle). Autonome, aucune dépendance externe. */

/* ---------- Thèmes ---------- */
:root {
  /* Clair (défaut — charte : #FFFFFF / #F2F4F7 / #D9DDE3 / #111111) */
  --bg: #f2f4f7;
  --surface: #ffffff;
  --ink: #111111;
  --text: #43474f;
  --muted: #7a808b;
  --faint: #aeb4bf;
  --line: #e2e6ec;
  --nav-bg: rgba(242, 244, 247, 0.72);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-brd: rgba(17, 17, 17, 0.08);
  --badge-bg: #111111;
  --badge-fg: #ffffff;
  --shadow: rgba(17, 17, 17, 0.16);
  --phone-shadow: rgba(17, 17, 17, 0.24);
  --trail: rgba(17, 17, 17, 0.16);
  --trail-ghost: rgba(17, 17, 17, 0.05);
  --red: #e5352b;
  --maxw: 1200px;
  --pad: 40px;
}
:root[data-theme="dark"] {
  --bg: #17171c;
  --surface: #20202a;
  --ink: #ffffff;
  --text: #cfcfd6;
  --muted: #8a8a94;
  --faint: #5a5a66;
  --line: #2e2e38;
  --nav-bg: rgba(23, 23, 28, 0.72);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-brd: rgba(255, 255, 255, 0.10);
  --badge-bg: #ffffff;
  --badge-fg: #111111;
  --shadow: rgba(0, 0, 0, 0.55);
  --phone-shadow: rgba(0, 0, 0, 0.6);
  --trail: rgba(255, 255, 255, 0.22);
  --trail-ghost: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
@media (max-width: 640px) { :root { --pad: 22px; } }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { color: var(--ink); font-weight: 800; letter-spacing: 0.2em; font-size: 18px; display: inline-flex; align-items: center; gap: 12px; }
.logo { height: 17px; width: auto; color: var(--ink); flex: none; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); font-size: 13px; font-weight: 600; transition: color 0.18s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--bg) !important; padding: 9px 18px; border-radius: 100px; font-size: 13px; transition: opacity 0.18s; }
.nav-cta:hover { opacity: 0.85; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-bg); border: 1px solid var(--glass-brd); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (max-width: 760px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- Hero (landing app) ---------- */
.hero { position: relative; overflow: hidden; padding: 22px 0 84px; }
/* Image précédente (route côtière) en fond de hero PLEINE LARGEUR, floutée */
.hero::before {
  content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: url("assets/hero.jpg") center / cover no-repeat;
  filter: blur(6px) saturate(140%); opacity: 0.9;
}
/* Scrim : voile du thème plus dense à gauche (texte lisible), l'image respire à droite */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 60%, transparent) 44%, color-mix(in srgb, var(--bg) 16%, transparent) 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-copy { min-width: 0; }
.hero-brand { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.hero-brand .appicon { width: clamp(44px, 6vw, 56px); height: auto; display: block; filter: drop-shadow(0 12px 30px var(--shadow)); }
.hero-brand .name { color: var(--ink); font-weight: 800; letter-spacing: 0.28em; font-size: clamp(18px, 2.4vw, 26px); }
.eyebrow.pill { padding: 8px 16px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 22px; }
.hero h1 { color: var(--ink); font-size: clamp(42px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; margin-bottom: 22px; }
.hero h1 .thin { color: var(--red); }
.hero-sub { color: var(--text); font-size: clamp(16px, 1.4vw, 19px); max-width: 46ch; margin-bottom: 32px; }
.hero-note { color: var(--muted); font-size: 13px; letter-spacing: 0.02em; margin-top: 22px; }
.hero-phone { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero-phone img { position: relative; z-index: 1; width: min(100%, 380px); height: auto; display: block; transform: translateY(-34px) rotate(3deg); filter: drop-shadow(0 50px 90px var(--phone-shadow)); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .hero-brand, .hero .eyebrow { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero .stores { justify-content: center; }
  .hero-phone img { transform: none; width: min(78%, 320px); }
}

/* Badges stores */
.stores { display: flex; gap: 13px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 11px; background: var(--badge-bg); color: var(--badge-fg); padding: 12px 20px; border-radius: 13px; font-weight: 600; cursor: default; transition: transform 0.18s, opacity 0.18s; }
.store-badge .small { display: block; font-size: 10px; opacity: 0.7; font-weight: 600; line-height: 1.1; }
.store-badge .big { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; }
.store-badge svg { width: 23px; height: 23px; flex: none; }
.store-badge[aria-disabled="true"] { opacity: 0.5; }

/* ---------- Marquee ---------- */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; animation: scroll 30s linear infinite; will-change: transform; }
.marquee__track span { color: var(--ink); font-size: clamp(20px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; padding: 0 24px; display: inline-flex; align-items: center; gap: 24px; }
.marquee__track span::after { content: "◆"; color: var(--red); font-size: 0.42em; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- Sections ---------- */
section { padding: 104px 0; position: relative; }
.section-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 44px; display: flex; align-items: center; gap: 12px; }
.section-label::before { content: ""; width: 26px; height: 1px; background: var(--faint); }

.statement p { color: var(--ink); font-size: clamp(26px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; max-width: 20ch; }
.statement .muted { color: var(--faint); }

/* Catégories — liste numérotée animée */
.catlist { border-top: 1px solid var(--line); }
.catrow { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.catrow .num { color: var(--faint); font-size: 15px; font-weight: 700; padding-top: 13px; }
.cattop { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cat-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 10px 26px -10px var(--shadow); }
.cat-ico svg { width: 22px; height: 22px; }
.catrow h3 { color: var(--ink); font-size: clamp(24px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
.catrow .lead { color: var(--text); font-size: 16px; max-width: 54ch; margin-bottom: 18px; }
.catrow ul { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 10px; }
.catrow li { color: var(--text); font-size: 13px; padding: 7px 15px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-brd); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 640px) { .catrow { grid-template-columns: 30px 1fr; gap: 12px; padding: 32px 0; } .catrow .num { padding-top: 9px; font-size: 13px; } .cattop { gap: 12px; } }

/* Mockups iPhone */
.mockups-head { max-width: 34ch; margin-bottom: 44px; }
.mockups-head h2 { color: var(--ink); font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin-top: 12px; }
.mockups { display: flex; gap: clamp(20px, 5vw, 56px); justify-content: center; flex-wrap: wrap; }
.phone { width: clamp(230px, 34vw, 296px); border-radius: 40px; padding: 8px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 44px 90px -34px var(--phone-shadow); }
.phone img { display: block; width: 100%; border-radius: 33px; }
.phone figcaption { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; padding: 16px 0 4px; }

/* Lifestyle band */
.lifestyle { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
.lifestyle img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 40px 80px -34px var(--phone-shadow); display: block; }
.lifestyle h2 { color: var(--ink); font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 18px; }
.lifestyle p { color: var(--text); font-size: 17px; max-width: 46ch; }
@media (max-width: 820px) { .lifestyle { grid-template-columns: 1fr; gap: 26px; } }

/* Showcase (visuels lifestyle auto) */
.showcase { padding-bottom: 40px; }
.shots { display: flex; flex-direction: column; gap: 16px; }
.shots figure { margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 70px -40px var(--phone-shadow); }
.shots img { display: block; width: 100%; height: auto; }

/* Abonnement (monochrome : pas de doré ni corail) */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 920px; margin: 0 auto; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 34px 30px; display: flex; flex-direction: column; box-shadow: 0 30px 70px -44px var(--phone-shadow); }
.plan-pro { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.plan-tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; border: 1px solid currentColor; margin-bottom: 16px; opacity: 0.85; }
.plan h3 { color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.plan-pro h3 { color: var(--bg); }
.plan .plan-price { font-size: 15px; opacity: 0.65; margin: 5px 0 24px; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.plan li { color: var(--text); font-size: 14.5px; padding-left: 26px; position: relative; }
.plan-pro li { color: color-mix(in srgb, var(--bg) 82%, transparent); }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: inherit; }
.plan-cta { text-align: center; padding: 13px 20px; border-radius: 100px; font-weight: 700; font-size: 14.5px; transition: opacity 0.18s; }
.plan-cta:hover { opacity: 0.85; }
.plan:not(.plan-pro) .plan-cta { background: var(--ink); color: var(--bg); }
.plan-pro .plan-cta { background: var(--bg); color: var(--ink); }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

/* Professionnel */
.pro-inner { max-width: 52ch; }
.pro-inner h2 { color: var(--ink); font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 12px 0 16px; }
.pro-inner p { color: var(--text); font-size: 17px; margin-bottom: 26px; }
.btn-line { display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 100px; transition: transform 0.18s; }
.btn-line:hover { transform: translateY(-2px); }

/* CTA */
.cta { text-align: center; border-top: 1px solid var(--line); }
.cta .eyebrow { margin-bottom: 24px; }
.cta h2 { color: var(--ink); font-size: clamp(38px, 7vw, 92px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 38px; }
.cta .stores { justify-content: center; margin-bottom: 34px; }
.btn-download {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--bg); font-weight: 700; font-size: 16px;
  padding: 16px 34px; border-radius: 100px;
  box-shadow: 0 20px 50px -18px var(--shadow); transition: transform 0.18s;
}
.btn-download:hover { transform: translateY(-2px); }
.btn-download svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 70px 0 46px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; margin-bottom: 54px; }
.foot-brand { display: inline-flex; align-items: center; gap: 16px; }
.foot-brand .logo { height: clamp(28px, 6vw, 52px); }
.foot-links { display: flex; gap: 20px 44px; flex-wrap: wrap; }
.foot-col h4 { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 15px; }
.foot-col a { display: block; color: var(--text); font-size: 14.5px; font-weight: 500; margin-bottom: 10px; transition: color 0.18s; }
.foot-col a:hover { color: var(--ink); }
.copy { color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 26px; }

/* ---------- Boussole (fond, adaptée au thème) ---------- */
.compass { position: absolute; z-index: 1; pointer-events: none; bottom: -36%; right: -16%; width: min(82vw, 900px); aspect-ratio: 1; color: var(--ink); filter: blur(1.9px); transform: perspective(1600px) rotateX(58deg) rotate(calc(var(--rot, 0deg) - 8deg)); transform-origin: center; will-change: transform; opacity: 0.92; }
.compass svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .compass { bottom: -8%; right: -36%; width: 104vw; } }

/* ---------- Tracé "aventure" (halo flou, adapté au thème) ---------- */
.trail-wrap { position: relative; }
.trail-wrap > * { position: relative; z-index: 1; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.trail-ghost { fill: none; stroke: var(--trail-ghost); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: blur(4px); }
.trail-line { fill: none; stroke: var(--trail); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: blur(7px); }
.trail-dot-glow { fill: var(--red); opacity: 0.5; filter: blur(14px); }
.trail-dot { fill: var(--red); opacity: 0.92; filter: blur(1.5px); }

/* ---------- Apparitions au scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.09s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Page Professionnel ---------- */
.pro-hero { padding: 76px 0 8px; }
.pro-hero h1 { color: var(--ink); font-size: clamp(40px, 7vw, 82px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 16px 0 20px; }
.pro-hero .lead { color: var(--text); font-size: clamp(16px, 1.6vw, 20px); max-width: 56ch; }
.pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pro-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px; box-shadow: 0 30px 70px -46px var(--phone-shadow); }
.pro-card .cat-ico { margin-bottom: 16px; }
.pro-card h3 { color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 7px; }
.pro-card p { color: var(--muted); font-size: 14.5px; }
.pro-audience { display: flex; flex-wrap: wrap; gap: 10px; }
.pro-audience span { background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: 100px; padding: 8px 16px; font-size: 14px; color: var(--text); font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pro-cta { text-align: center; background: var(--ink); color: var(--bg); border-radius: 26px; padding: 54px 30px; }
.pro-cta h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; color: var(--bg); }
.pro-cta p { color: color-mix(in srgb, var(--bg) 78%, transparent); font-size: 16px; max-width: 46ch; margin: 0 auto 28px; }
.pro-cta .btn-line { background: var(--bg); color: var(--ink); }
@media (max-width: 820px) { .pro-grid { grid-template-columns: 1fr; } }

/* ---------- Pages légales ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 66px var(--pad) 100px; }
.legal .back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 32px; transition: color 0.18s; }
.legal .back:hover { color: var(--ink); }
.legal h1 { color: var(--ink); font-size: clamp(34px, 7vw, 58px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 14px; }
.legal .updated { color: var(--muted); font-size: 13px; margin-bottom: 46px; }
.legal h2 { color: var(--ink); font-size: 20px; font-weight: 800; margin: 40px 0 12px; }
.legal p { color: var(--text); font-size: 15.5px; line-height: 1.7; margin-bottom: 12px; }
.legal .todo { background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 600; }

/* ============================================================================
   REFONTE EFFETS — liquid glass + effets repris du back-office
   (aurora, glowing-effect orienté curseur, spotlight, sheen, LoaderOne)
   Ajouts non destructifs : on augmente l'existant, on ne réécrit pas les blocs.
   ============================================================================ */
:root { --lg-hi: rgba(255,255,255,0.6); --lg-spec: rgba(255,255,255,0.5); }
:root[data-theme="dark"] { --lg-hi: rgba(255,255,255,0.12); --lg-spec: rgba(255,255,255,0.09); }

/* ---------- Aurora (halos animés très subtils, accent rouge CONVOI) ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.42; will-change: transform; }
:root[data-theme="dark"] .aurora span { opacity: 0.34; }
.aurora .a1 { width: 54vw; height: 54vw; left: -12vw; top: -16vw; background: radial-gradient(circle at 30% 30%, rgba(229,53,43,0.30), transparent 70%); animation: auf1 30s ease-in-out infinite; }
.aurora .a2 { width: 46vw; height: 46vw; right: -12vw; top: 10%; background: radial-gradient(circle at 30% 30%, rgba(120,140,255,0.18), transparent 70%); animation: auf2 36s ease-in-out infinite; }
.aurora .a3 { width: 48vw; height: 48vw; left: 28%; bottom: -20vw; background: radial-gradient(circle at 30% 30%, rgba(229,53,43,0.14), transparent 70%); animation: auf3 34s ease-in-out infinite; }
@keyframes auf1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,3vw) scale(1.12); } }
@keyframes auf2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,2vw) scale(1.08); } }
@keyframes auf3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3vw,-4vw) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }
/* le contenu passe au-dessus de l'aurora */
.nav, .hero, .marquee, .trail-wrap, footer { position: relative; z-index: 1; }

/* ---------- Liquid glass : lift + spéculaire sur les pastilles de verre ---------- */
.eyebrow.pill, .catrow li, .pro-audience span {
  box-shadow: inset 0 1px 0 var(--lg-hi), 0 6px 18px -12px var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.catrow li:hover, .pro-audience span:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--lg-hi), 0 10px 22px -12px var(--shadow); }

/* ---------- Badge (shadcn : default / secondary / destructive / outline) ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 11px; border-radius: 9px; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; }
.badge--default { background: var(--ink); color: var(--bg); }
.badge--secondary { background: var(--glass-bg); color: var(--ink); border-color: var(--glass-brd); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); box-shadow: inset 0 1px 0 var(--lg-hi); }
.badge--destructive { background: var(--red); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--red) 70%, transparent); }
.badge--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 900px) { .hero-badges { justify-content: center; } }

/* ---------- Switcher de thème « apple liquid glass » ---------- */
.theme-switch { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 100px; background: var(--glass-bg); border: 1px solid var(--glass-brd); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 var(--lg-hi), 0 6px 18px -12px var(--shadow); }
.theme-switch .ts-opt { position: relative; z-index: 1; width: 30px; height: 30px; border: none; background: transparent; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: color 0.25s; }
.theme-switch .ts-opt svg { width: 16px; height: 16px; }
.theme-switch .ts-opt[aria-selected="true"] { color: var(--ink); }
.theme-switch .ts-thumb { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 100px; background: var(--surface); box-shadow: 0 3px 10px -2px var(--shadow), inset 0 1px 0 var(--lg-hi); transition: transform 0.32s cubic-bezier(0.2,0.9,0.2,1); }
:root[data-theme="dark"] .theme-switch .ts-thumb { transform: translateX(32px); }

/* ---------- Sheen liquid-glass au survol des boutons pleins ---------- */
.btn-download, .nav-cta, .plan-cta, .btn-line, .store-badge { position: relative; overflow: hidden; }
.btn-download::after, .nav-cta::after, .plan-cta::after, .btn-line::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 42%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent); transform: skewX(-18deg);
}
.btn-download:hover::after, .nav-cta:hover::after, .plan-cta:hover::after, .btn-line:hover::after { animation: sheen 0.7s ease; }
@keyframes sheen { from { left: -60%; } to { left: 130%; } }
.store-badge:hover { transform: translateY(-2px); }

/* ---------- Glowing-effect + spotlight sur les cartes (repris du back-office) ---------- */
.plan, .pro-card, .phone { overflow: hidden; }
.plan::after, .pro-card::after, .phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; z-index: 2;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--red) 13%, transparent), transparent 55%);
}
.plan:hover::after, .pro-card:hover::after, .phone:hover::after { opacity: 1; }
.plan::before, .pro-card::before, .phone::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; pointer-events: none; opacity: 0; transition: opacity 0.35s; z-index: 3;
  background: conic-gradient(from var(--ga,0deg) at 50% 50%, transparent 0deg, color-mix(in srgb, var(--red) 72%, transparent) 20deg, transparent 46deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan:hover::before, .pro-card:hover::before, .phone:hover::before { opacity: 1; }
.plan-pro::after { background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.12), transparent 55%); }

/* ---------- LoaderOne (Aceternity) + bouton stateful ---------- */
.loader-one { display: inline-flex; gap: 5px; align-items: center; }
.loader-one i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; animation: loaderOne 1s ease-in-out infinite; }
.loader-one i:nth-child(2) { animation-delay: 0.15s; }
.loader-one i:nth-child(3) { animation-delay: 0.3s; }
@keyframes loaderOne { 0%,100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(-5px); opacity: 1; } }
.is-loading { pointer-events: none; }