/* Studio Local — feuille de style du site vitrine (index.html).
   Extraite du bloc <style> inline pour rester lisible et modifiable
   independamment du contenu de la page. */

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

:root {
  --bg-primary: #020710;
  --bg-secondary: #0a1018;
  --bg-card: #101a28;
  --bg-card-hover: #142030;
  --bg-raised: #152235;
  --bg-recessed: #060b12;
  --border: #1a2840;
  --border-top: #334a69;
  --border-bottom: #09111d;
  --border-glow: #38FFB2;
  --accent: #38FFB2;
  --accent-bright: #5BFFC8;
  --accent-dim: #2BC88E;
  --accent-dark: #1a8a5f;
  --orange: #ff9f00;
  --cyan: #00b4d8;
  --red: #ff4757;
  --purple: #a855f7;
  --text-primary: #E0F0FF;
  --text-secondary: #8892A4;
  --text-dim: #556677;
  --glass-bg: rgba(6, 12, 20, 0.75);
  --glass-border: rgba(56, 255, 178, 0.15);
  --glow-sm: 0 0 10px rgba(56, 255, 178, 0.3);
  --glow-md: 0 0 20px rgba(56, 255, 178, 0.2), 0 0 40px rgba(56, 255, 178, 0.1);
  --glow-lg: 0 0 30px rgba(56, 255, 178, 0.3), 0 0 60px rgba(56, 255, 178, 0.15), 0 0 100px rgba(56, 255, 178, 0.05);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --panel-shadow: inset 0 1px 0 rgba(181, 218, 255, 0.1), inset 0 -14px 30px rgba(1, 5, 10, 0.34), 0 22px 55px rgba(0, 0, 0, 0.38);
  --control-shadow: inset 0 1px 1px rgba(190, 220, 255, 0.12), inset 0 -2px 3px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(47, 112, 137, 0.15), transparent 35rem),
    linear-gradient(180deg, #030914 0%, var(--bg-primary) 35%, #02050a 100%);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── BACKGROUND ───────────────────────── */
.bg-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(56, 255, 178, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 255, 178, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.bg-glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.bg-glow-orb.orb1 { width: 600px; height: 600px; background: rgba(56, 255, 178, 0.07); top: -200px; left: 30%; }
.bg-glow-orb.orb2 { width: 500px; height: 500px; background: rgba(56, 255, 178, 0.04); bottom: 10%; right: -100px; }
.bg-glow-orb.orb3 { width: 400px; height: 400px; background: rgba(168, 85, 247, 0.04); top: 55%; left: -150px; }

/* ── LAYOUT ───────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
section { padding: 100px 0; position: relative; }
.section-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-glow), transparent); opacity: 0.3; }
.mono { font-family: 'Cascadia Mono', 'Consolas', monospace; }

/* Relief commun inspiré des panneaux du Studio */
.panel-surface {
  position: relative;
  background: linear-gradient(155deg, rgba(25, 40, 60, 0.96), rgba(9, 17, 28, 0.98));
  border: 1px solid var(--border);
  border-top-color: var(--border-top);
  border-bottom-color: var(--border-bottom);
  box-shadow: var(--panel-shadow);
}
.panel-surface::before {
  content: ''; position: absolute; inset: 1px 1px auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190, 225, 255, 0.13), transparent);
  pointer-events: none;
}
.status-led { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px var(--accent), 0 0 13px rgba(56,255,178,.55); flex: 0 0 auto; }
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(56,255,178,.2); border-radius: 6px; background: rgba(4,13,20,.72); color: var(--accent); font: 700 .68rem 'Cascadia Mono','Consolas',monospace; letter-spacing: .08em; text-transform: uppercase; }

/* ── NAVBAR ───────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(2, 7, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  transition: var(--transition);
}
nav.scrolled { background: rgba(2, 7, 16, 0.95); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-weight: 700; font-size: 1.05rem; }
.nav-brand img { width: 32px; height: 32px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: var(--transition); }
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #020710 !important; border-radius: 8px; font-weight: 700; font-size: 0.85rem;
  text-decoration: none; transition: var(--transition); box-shadow: var(--glow-sm);
}
.nav-cta:hover { box-shadow: var(--glow-md); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }

/* ── HERO ─────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding-top: 120px; padding-bottom: 80px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(56, 255, 178, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { text-align: center; max-width: 900px; margin: 0 auto; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: rgba(56, 255, 178, 0.1); border: 1px solid rgba(56, 255, 178, 0.2);
  border-radius: 50px; font-size: 0.8rem; font-weight: 500; color: var(--accent); margin-bottom: 24px;
}
.hero-badge .pulse { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } }

h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.12; margin-bottom: 24px; }
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright), #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle { font-size: 1.15rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto 40px; line-height: 1.7; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 10px;
  font-weight: 700; font-size: 1rem; text-decoration: none; transition: var(--transition);
  cursor: pointer; border: none;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #020710; box-shadow: var(--glow-sm); }
.btn-primary:hover { box-shadow: var(--glow-lg); transform: translateY(-2px); }
.btn-secondary { background: rgba(56, 255, 178, 0.08); color: var(--accent); border: 1px solid rgba(56, 255, 178, 0.25); }
.btn-secondary:hover { background: rgba(56, 255, 178, 0.15); transform: translateY(-2px); }

/* ── HERO SCREENSHOT FRAME ────────────── */
.studio-frame {
  max-width: 1000px; margin: 0 auto; border-radius: 16px; overflow: hidden; position: relative;
  border: 1px solid #29415e; border-top-color: #496786; border-bottom-color: #07111d;
  background: var(--bg-card); transform: perspective(1400px) rotateX(1.1deg);
  box-shadow: inset 0 1px 0 rgba(210,235,255,.12), inset 0 -12px 24px rgba(0,0,0,.3), 0 38px 90px rgba(0, 0, 0, 0.62), 0 0 50px rgba(56,255,178,.1);
}
.studio-frame::after { content: ''; position: absolute; inset: 42px 0 auto; height: 35%; background: linear-gradient(180deg, rgba(255,255,255,.045), transparent); pointer-events: none; }
.frame-titlebar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(10, 16, 24, 0.9); border-bottom: 1px solid var(--border); }
.frame-dot { width: 10px; height: 10px; border-radius: 50%; }
.frame-dot.r { background: #ff4757; } .frame-dot.y { background: #ffa502; } .frame-dot.g { background: #38FFB2; }
.frame-titlebar span { flex: 1; text-align: center; font-size: 12px; color: var(--text-secondary); font-family: 'Cascadia Mono', 'Consolas', monospace; }
.studio-frame img { width: 100%; display: block; }

/* ── STATS ────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 80px 0 0; }
.stat-card { text-align: center; padding: 32px 16px; background: linear-gradient(180deg, #142134, #0b1421); border: 1px solid var(--border); border-top-color: var(--border-top); border-bottom-color: var(--border-bottom); border-radius: var(--radius-lg); box-shadow: var(--panel-shadow); }
.stat-card { transition: var(--transition); }
.stat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--panel-shadow), var(--glow-sm);
  transform: translateY(-3px);
}

.stat-value { font-size: 2.3rem; font-weight: 900; color: var(--accent); text-shadow: 0 0 20px rgba(56, 255, 178, 0.3); margin-bottom: 8px; }
.stat-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }

/* ── SECTION HEADER ───────────────────── */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-label { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; }
.section-header h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 16px; }
.section-header p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }

/* ── TRUST ────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.trust-card {
  background: linear-gradient(160deg, rgba(56,255,178,0.05), transparent);
  border: 1px solid var(--border); border-top-color: var(--border-top); border-bottom-color: var(--border-bottom); border-radius: var(--radius-lg); padding: 32px; text-align: center; box-shadow: var(--panel-shadow);
  transition: var(--transition);
}
/* Survol : meme langage que .feature-card et .pack-card — bordure d'accent,
   lueur, leger soulevement. Ces cartes n'avaient ni transition ni etat de
   survol, seules de leur categorie sur la page. */
.trust-card:hover {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(56,255,178,0.09), transparent);
  box-shadow: var(--panel-shadow), var(--glow-md);
  transform: translateY(-4px);
}

.trust-icon { font-size: 40px; margin-bottom: 16px; transition: var(--transition); }
.trust-card:hover .trust-icon { transform: scale(1.08); }
.trust-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }
.trust-card p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.65; }

/* Mise en valeur d'un membre de phrase decisif dans un paragraphe.
   Une seule variable a changer pour basculer sur --accent ou --orange. */
.hl { color: var(--hl-color, var(--accent)); font-weight: 700; }

/* ── FEATURES GRID ────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.feature-card { position: relative; overflow: hidden; background: linear-gradient(155deg, #16243a, #0b1421 70%); border: 1px solid var(--border); border-top-color: var(--border-top); border-bottom-color: var(--border-bottom); border-radius: var(--radius-lg); padding: 30px; transition: var(--transition); box-shadow: var(--panel-shadow); }
.feature-card::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; opacity: .8; background: var(--card-accent, var(--accent)); box-shadow: 0 0 16px color-mix(in srgb, var(--card-accent, var(--accent)) 45%, transparent); }
.feature-card[data-tone="cyan"] { --card-accent: var(--cyan); }
.feature-card[data-tone="orange"] { --card-accent: var(--orange); }
.feature-card[data-tone="purple"] { --card-accent: var(--purple); }
.feature-card:hover { border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 65%, #30435d); background: linear-gradient(155deg, #1b2b43, #0e1928 70%); box-shadow: var(--panel-shadow), 0 0 26px color-mix(in srgb, var(--card-accent, var(--accent)) 16%, transparent); transform: translateY(-4px); }
.feature-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; background: linear-gradient(180deg, #1e3048, #101b2c); border: 1px solid #314866; border-top-color: #496482; border-bottom-color: #09111b; box-shadow: var(--control-shadow); }
.feature-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.feature-tag { display: inline-block; margin-top: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--orange); background: rgba(255,159,0,0.1); border: 1px solid rgba(255,159,0,0.25); padding: 2px 8px; border-radius: 20px; }

/* ── DEEP DIVE (image + text alternating) ─ */
.deepdive-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 70px 0; }
.deepdive-row.reverse .deepdive-media { order: 2; }
.deepdive-row.reverse .deepdive-text { order: 1; }
.deepdive-media img,
.deepdive-media video {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid #2e4562; border-top-color: #4b6684; border-bottom-color: #07101b;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 26px 70px rgba(0,0,0,0.58); cursor: zoom-in; transition: var(--transition);
}
.deepdive-media img:hover,
.deepdive-media video:hover { border-color: var(--accent); box-shadow: var(--glow-md), 0 20px 60px rgba(0,0,0,0.5); }
/* La video n'ouvre pas la visionneuse : le curseur loupe induirait en erreur,
   et l'element porte ses propres commandes de lecture. */
.deepdive-media video { cursor: default; display: block; background: #02060b; }

/* ── Diaporama automatique dans un bloc deep dive ──────────────────────────
   Plusieurs captures empilees au meme endroit, revelees a tour de role par un
   fondu. Le conteneur prend la hauteur de la premiere image (en flux normal) ;
   les suivantes sont superposees en absolu. */
/* Fleches de navigation de la visionneuse — visibles seulement quand le groupe
   contient plusieurs images (l'attribut `hidden` est pose par le script). */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1; cursor: pointer; z-index: 5;
  color: var(--text-primary);
  background: rgba(8, 18, 30, 0.72);
  border: 1px solid rgba(56, 255, 178, 0.3);
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lightbox-nav:hover { background: rgba(56, 255, 178, 0.16); border-color: var(--accent); }
.lightbox-nav.prev { left: 22px; }
.lightbox-nav.next { right: 22px; }
.lightbox-nav[hidden] { display: none; }
@media (max-width: 700px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
}

.media-slideshow { position: relative; }
.media-slideshow img { display: block; }
.media-slideshow img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
/* Les captures sont empilees : `opacity: 0` les rend invisibles mais elles
   continuent de recevoir les clics. Sans pointer-events, celle du dessus (la
   derniere du DOM) interceptait tout et la visionneuse ouvrait toujours la
   meme image, quelle que soit celle affichee. */
.media-slideshow img { opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.media-slideshow img.is-active { opacity: 1; pointer-events: auto; }

/* Pastilles de progression : indiquent le nombre de vues et celle affichee. */
.media-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.media-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(56,255,178,0.45); background: transparent;
  transition: background 0.25s ease, transform 0.25s ease;
}
.media-dots button.is-active { background: var(--accent); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .media-slideshow img { transition: none; }
}
.deepdive-text .section-label { margin-bottom: 14px; }
.deepdive-text h3 { font-size: 1.7rem; font-weight: 800; margin-bottom: 18px; line-height: 1.25; }
.deepdive-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.75; margin-bottom: 16px; }
.deepdive-list { list-style: none; margin-top: 20px; }
/* Pas de flex ici : en flex, chaque balise inline du texte (un <span> de mise
   en valeur, par exemple) devient un item separe et se retrouve detachee du
   reste de la phrase, avec le gap intercale. Le coche est donc positionne en
   absolu et le texte coule normalement. */
.deepdive-list li { position: relative; padding-left: 22px; margin-bottom: 12px; font-size: 0.93rem; line-height: 1.6; color: var(--text-secondary); }
.deepdive-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 900; }

/* ── GALLERY ──────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  border-top-color: var(--border-top); border-bottom-color: var(--border-bottom); cursor: zoom-in; transition: var(--transition); aspect-ratio: 16/10; background: var(--bg-card); box-shadow: var(--control-shadow);
}
.gallery-item:hover { border-color: var(--accent); box-shadow: var(--glow-md); transform: translateY(-3px); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px;
  background: linear-gradient(0deg, rgba(2,7,16,0.95), transparent);
  font-size: 0.78rem; font-weight: 600; color: var(--text-primary);
}

/* ── PACKS ────────────────────────────── */
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.pack-card { background: linear-gradient(155deg, #16243a, #0b1421 72%); border: 1px solid var(--border); border-top-color: var(--border-top); border-bottom-color: var(--border-bottom); border-radius: var(--radius-lg); padding: 28px; transition: var(--transition); position: relative; box-shadow: var(--panel-shadow); }
.pack-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--glow-md); }
.pack-card.core { border-color: rgba(56,255,178,0.4); background: linear-gradient(160deg, rgba(56,255,178,0.08), var(--bg-card)); }
.pack-badge { position: absolute; top: 20px; right: 20px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); background: rgba(56,255,178,0.12); border: 1px solid rgba(56,255,178,0.3); padding: 3px 9px; border-radius: 20px; }
.pack-icon { font-size: 30px; margin-bottom: 14px; }
.pack-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.pack-card p { color: var(--text-secondary); font-size: 0.87rem; line-height: 1.6; }

/* ── COMPARISON ───────────────────────── */
.table-scroll { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.comparison-table { width: 100%; border-collapse: collapse; background: var(--bg-card); min-width: 640px; }
.comparison-table thead th { padding: 18px 24px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.comparison-table thead th:first-child { text-align: left; }
.comparison-table thead th.highlight { color: var(--accent); background: rgba(56, 255, 178, 0.05); }
.comparison-table tbody td { padding: 14px 24px; border-bottom: 1px solid rgba(26, 40, 64, 0.5); font-size: 0.9rem; text-align: center; color: var(--text-secondary); }
.comparison-table tbody td:first-child { text-align: left; color: var(--text-primary); font-weight: 500; }
.comparison-table tbody td.highlight { background: rgba(56, 255, 178, 0.03); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.check { color: var(--accent); font-weight: 700; }
.cross { color: var(--red); }
.partial { color: var(--orange); }

/* ── Ou passe l'image des invites ────────
   Trois trajets cote a cote. Le notre se distingue par la couleur d'accent, les
   deux autres restent neutres : les grimer en rouge transformerait un constat
   verifiable en pamphlet, et affaiblirait l'argument. */
.sovereign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.sovereign-card {
  padding: 24px 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top-color: var(--border-top);
  border-radius: 16px;
  transition: var(--transition);
}

.sovereign-card.is-ours {
  border-color: rgba(56, 255, 178, 0.34);
  box-shadow: 0 0 0 1px rgba(56, 255, 178, 0.08), 0 26px 60px rgba(0, 0, 0, 0.45);
}

/* Survol neutre pour les deux cartes concurrentes : la lueur verte est la
   couleur qui porte notre argument, la leur donner reviendrait a mettre en
   avant StreamYard et Streamlabs a chaque passage de souris. Elles se
   soulevent et s'eclaircissent, sans accent. */
.sovereign-card:hover {
  border-color: var(--border-top);
  background: color-mix(in srgb, var(--bg-card) 88%, #fff);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}

/* La notre, elle, prend la lueur d'accent. */
.sovereign-card.is-ours:hover {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px rgba(56, 255, 178, 0.2), var(--glow-md), 0 26px 60px rgba(0, 0, 0, 0.5);
}

.sovereign-tag {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.sovereign-card.is-ours .sovereign-tag { color: var(--accent); }

.sovereign-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.sovereign-arrow { color: var(--text-secondary); opacity: 0.55; }

.sovereign-dest {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-recessed);
  color: var(--text-primary);
  font-weight: 700;
}

.sovereign-dest.is-ours {
  border-color: rgba(56, 255, 178, 0.45);
  background: rgba(56, 255, 178, 0.1);
  color: var(--accent);
}

.sovereign-card p {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.sovereign-proof {
  margin: 14px 0 0 !important;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  font-size: 0.84rem !important;
  font-style: italic;
  opacity: 0.9;
}

.sovereign-note {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  color: var(--text-dim, var(--text-secondary));
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.8;
}

/* ── Bandeau de compatibilite ────────── */
.compat-band { padding: 46px 0; }

.compat-title {
  margin: 0 0 28px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.compat-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 54px;
}

.compat-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #7c8aa0;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: var(--transition);
}

.compat-mark:hover { color: var(--accent); }

.compat-note {
  max-width: 720px;
  margin: 30px auto 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.6;
  opacity: 0.85;
}

/* ── Demo video de la section multi-destinations ── */
.stream-demo { max-width: 940px; margin: 0 auto 40px; }

.stream-demo video {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid #2e4562;
  border-top-color: #4b6684;
  border-bottom-color: #07101b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 26px 70px rgba(0, 0, 0, 0.58);
  background: #02060b;
}

.stream-demo-caption {
  margin: 14px 0 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── Paire de captures multi-destinations ────
   Deux captures etroites (~540 px natifs) posees cote a cote. La largeur est
   bornee a leur taille reelle : au-dela, une capture d'interface devient floue
   et le texte de l'application illisible. */
.stream-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 560px));
  justify-content: center;
  gap: 28px;
  margin: 8px 0 0;
}

.stream-pair figure { margin: 0; }

.stream-pair img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid #2e4562;
  border-top-color: #4b6684;
  border-bottom-color: #07101b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 26px 70px rgba(0, 0, 0, 0.58);
  cursor: zoom-in;
  transition: var(--transition);
}

.stream-pair img:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-md), 0 20px 60px rgba(0, 0, 0, 0.5);
}

.stream-pair figcaption {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

.stream-note {
  max-width: 700px;
  margin: 34px auto 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── Notes sous le comparatif ─────── */
.comparison-notes { margin-top: 48px; }
.comparison-notes h3 { font-size: 1.4rem; margin: 0 0 24px; color: var(--text-primary); }
.note-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.note-card {
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top-color: var(--border-top);
  border-radius: 14px;
  transition: var(--transition);
}

.note-card:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-md);
  transform: translateY(-3px);
}

.note-card .note-title {
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}
.note-card p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); }
.note-card p:last-child { margin-bottom: 0; }
.note-card strong { color: var(--text-primary); }
.note-footer { margin-top: 22px; font-size: 0.82rem; line-height: 1.6; color: var(--text-dim); }

/* ── FAQ ──────────────────────────────── */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; font-weight: 600; font-size: 0.98rem; user-select: none;
}
.faq-question .arrow { color: var(--accent); transition: transform 0.25s ease; flex-shrink: 0; font-size: 0.8rem; }
.faq-item.open .faq-question .arrow { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 24px 22px; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; }

/* ── CTA ──────────────────────────────── */
.cta-section { text-align: center; padding: 100px 0; }
.cta-card {
  max-width: 700px; margin: 0 auto; padding: 60px 40px;
  background: linear-gradient(135deg, rgba(56, 255, 178, 0.08), rgba(56, 255, 178, 0.02));
  border: 1px solid rgba(56, 255, 178, 0.2); border-radius: var(--radius-lg); box-shadow: var(--glow-lg);
}
.cta-card h2 { font-size: 1.9rem; font-weight: 800; margin-bottom: 16px; }
.cta-card p { color: var(--text-secondary); font-size: 1.02rem; margin-bottom: 32px; line-height: 1.7; }

/* ── PRODUCT CONTROL DECK ────────────── */
.control-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px; margin-top: 34px; border-radius: 16px; }
.control-module { position: relative; min-height: 154px; padding: 20px; border-radius: 10px; background: linear-gradient(180deg, #142238, #0a121e); border: 1px solid #20344e; border-top-color: #3d5676; border-bottom-color: #050b12; box-shadow: var(--control-shadow); }
.control-module::before { content: ''; position: absolute; inset: 0 14px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(190,225,255,.14), transparent); }
.control-module h3 { margin: 14px 0 7px; font-size: 1rem; }
.control-module p { color: var(--text-secondary); font-size: .84rem; line-height: 1.55; }
.control-readout { display: inline-block; margin-top: 13px; padding: 4px 8px; border-radius: 4px; border: 1px solid #162944; background: #050b12; color: #8fb7d7; font: 700 .67rem 'Cascadia Mono','Consolas',monospace; box-shadow: inset 0 2px 5px rgba(0,0,0,.6); }

/* ── USE CASES ───────────────────────── */
.use-cases { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.use-case { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; background: linear-gradient(180deg, #15243a, #0a1422); border: 1px solid #263b57; border-top-color: #3a5372; border-bottom-color: #07101b; color: #b9cade; font-size: .82rem; font-weight: 650; box-shadow: var(--control-shadow); }

/* ── ORIENTATION / PROGRAMME ─────────── */
.orientation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.format-card { padding: 24px; border-radius: 14px; display: grid; grid-template-columns: 118px 1fr; gap: 22px; align-items: center; transition: var(--transition); }
.format-card:hover { border-color: var(--accent); box-shadow: var(--panel-shadow), var(--glow-md); transform: translateY(-4px); }
.format-preview { margin: auto; border: 1px solid #3c5575; border-top-color: #587391; border-bottom-color: #07101b; border-radius: 8px; background: linear-gradient(145deg, #152c40, #07101b); box-shadow: inset 0 0 18px rgba(0,0,0,.55), 0 15px 25px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.format-preview.landscape { width: 118px; aspect-ratio: 16/9; }
.format-preview.portrait { height: 118px; aspect-ratio: 9/16; }
.format-preview::before { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(56,255,178,.42); background: linear-gradient(135deg, rgba(56,255,178,.15), rgba(0,180,216,.08)); box-shadow: 0 0 12px rgba(56,255,178,.15); }
.format-copy h3 { font-size: 1.05rem; margin-bottom: 7px; }
.format-copy p { color: var(--text-secondary); font-size: .87rem; line-height: 1.6; }

/* ── AUDIO SIGNAL PATH ───────────────── */
.signal-chain { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.signal-node { padding: 8px 11px; border-radius: 6px; background: linear-gradient(180deg, #1a2b43, #0c1625); border: 1px solid #2c4260; border-top-color: #415d7e; border-bottom-color: #07101b; color: #c9dbed; font: 700 .7rem 'Cascadia Mono','Consolas',monospace; box-shadow: var(--control-shadow); }
.signal-node.active { border-color: #258965; color: var(--accent); box-shadow: var(--control-shadow), 0 0 14px rgba(56,255,178,.12); }

/* ── NATIVE PLUGINS ──────────────────── */
.plugins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.plugin-card { padding: 24px; border-radius: 14px; transition: var(--transition); }
.plugin-card:hover { border-color: var(--accent); box-shadow: var(--panel-shadow), var(--glow-md); transform: translateY(-4px); }
.plugin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid #1b2b40; }
.plugin-head h3 { font-size: .98rem; }
.plugin-card p { color: var(--text-secondary); font-size: .86rem; line-height: 1.62; }
.plugin-route { display: block; margin-top: 14px; color: #7fa2c2; font: 600 .68rem 'Cascadia Mono','Consolas',monospace; }

/* ── FOOTER ───────────────────────────── */
footer { padding: 60px 0 30px; border-top: 1px solid var(--border); background: var(--bg-secondary); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 800; color: var(--accent); }
.footer-brand img { width: 28px; height: 28px; }
.footer-col-blurb { color: var(--text-secondary); font-size: 0.9rem; margin-top: 12px; line-height: 1.6; max-width: 380px; }
.footer-col h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; margin-bottom: 10px; transition: var(--transition); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { text-align: center; padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.8rem; color: var(--text-dim); }

/* ── LIGHTBOX ─────────────────────────── */
.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(2, 7, 16, 0.94); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 40px;
}
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 90vw; max-height: 82vh; border-radius: 10px; border: 1px solid var(--glass-border); box-shadow: var(--glow-lg); }
.lightbox-caption { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(16,26,40,0.9); border: 1px solid var(--border); color: var(--text-primary);
  cursor: pointer; border-radius: 50%; width: 44px; height: 44px; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--accent); color: var(--accent); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-nav.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ── HOTSPOTS (annotations interactives sur capture) ── */
.hotspot-frame { position: relative; }
.hotspot {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  /* Meme rendu que les reperes de la documentation : degrade vif et halo
     marque. Avec --accent-dim et --glow-sm la pastille etait trop sombre,
     et l'anneau hotspot-ping qui pulse autour passait inapercu. */
  background: radial-gradient(circle at 35% 30%, #7dffd0, var(--accent));
  color: #020710; font-weight: 900; font-size: 0.8rem; font-family: 'Cascadia Mono', 'Consolas', monospace;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 2px solid rgba(2,7,16,0.55); box-shadow: 0 0 0 4px rgba(56,255,178,0.18), 0 0 14px rgba(56,255,178,0.35);
  transform: translate(-50%, -50%); z-index: 5; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hotspot::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(56,255,178,0.55);
  animation: hotspot-ping 2.4s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
}
@keyframes hotspot-ping { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
/* La pastille respire en plus de l'anneau qui se propage — meme reglage que
   les reperes de la documentation (docs/styles.css). */
@keyframes hotspot-blink {
  0%, 100% { box-shadow: 0 0 0 4px rgba(56,255,178,0.18), 0 0 14px rgba(56,255,178,0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(56,255,178,0.34), 0 0 24px rgba(56,255,178,0.65); }
}
.hotspot { animation: hotspot-blink 2.4s ease-in-out infinite; }
.hotspot:hover, .hotspot.active { box-shadow: 0 0 0 5px rgba(56,255,178,0.3), 0 0 20px rgba(56,255,178,0.5); transform: translate(-50%, -50%) scale(1.12); }
.hotspot-bubble {
  position: absolute; z-index: 6; width: 240px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(160deg, #16243a, #0c1522); border: 1px solid var(--border); border-top-color: var(--border-top);
  box-shadow: var(--panel-shadow), var(--glow-md); opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hotspot-bubble.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.hotspot-bubble h4 { font-size: 0.85rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.hotspot-bubble p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; }
@media (max-width: 900px) { .hotspot-frame .hotspot { display: none; } }

/* ── GLOSSARY INLINE TOOLTIP ──────────── */
.gloss { position: relative; display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; cursor: help; border-bottom: 1px dashed rgba(56,255,178,0.5); }
.gloss .gloss-i { font-size: 0.75em; opacity: 0.85; }
.gloss-bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 240px; padding: 12px 14px; border-radius: 10px; z-index: 20;
  background: linear-gradient(160deg, #16243a, #0c1522); border: 1px solid var(--border); border-top-color: var(--border-top);
  box-shadow: var(--panel-shadow), var(--glow-sm); font-size: 0.78rem; font-weight: 400; color: var(--text-secondary); line-height: 1.5;
  text-align: left; white-space: normal; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.gloss:hover .gloss-bubble, .gloss:focus-visible .gloss-bubble, .gloss.show .gloss-bubble { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ── BIBLIOTHEQUE & LICENCES ──────────── */
.license-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; }
.license-card { padding: 30px; border-radius: var(--radius-lg); transition: var(--transition); }
.license-card:hover { border-color: var(--accent); box-shadow: var(--panel-shadow), var(--glow-md); transform: translateY(-4px); }
.license-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.license-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.7; margin-bottom: 14px; }
.license-key-mock {
  display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap;
}
.license-key-mock span {
  font-family: 'Cascadia Mono', 'Consolas', monospace; font-weight: 700; letter-spacing: 1px; font-size: 0.85rem;
  padding: 8px 12px; border-radius: 6px; color: var(--text-primary);
  background: var(--bg-recessed); border: 1px solid #16233a; border-top-color: #0a1220;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
.license-key-mock span.accent-key { color: var(--accent); border-color: rgba(56,255,178,0.3); }
.studiopack-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.studiopack-flow .fnode {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px;
  background: linear-gradient(180deg, #15243a, #0a1422); border: 1px solid #263b57; border-top-color: #3a5372; border-bottom-color: #07101b;
  color: #b9cade; font-size: 0.8rem; font-weight: 650; box-shadow: var(--control-shadow);
}
.studiopack-flow .farrow { color: var(--accent); font-size: 1.1rem; }
.creator-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px; border-radius: 20px; background: rgba(168,85,247,0.12); border: 1px solid rgba(168,85,247,0.35); color: #c99bff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── RESPONSIVE ───────────────────────── */
@media (max-width: 900px) {
  .deepdive-row, .deepdive-row.reverse { grid-template-columns: 1fr; gap: 30px; }
  .deepdive-row.reverse .deepdive-media, .deepdive-row.reverse .deepdive-text { order: initial; }
  .control-deck { grid-template-columns: 1fr; }
  .orientation-grid { grid-template-columns: 1fr; }
  .license-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; width: 100%; background: rgba(2, 7, 16, 0.97); padding: 20px; border-bottom: 1px solid var(--glass-border); }
  .hero { padding-top: 100px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.1rem; }
  .comparison-table { font-size: 0.8rem; }
  .comparison-table thead th, .comparison-table tbody td { padding: 10px 12px; }
  .format-card { grid-template-columns: 94px 1fr; padding: 18px; }
  .format-preview.landscape { width: 94px; }
  .format-preview.portrait { height: 94px; }
}
/* ── Barre de progression de lecture ─────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
  box-shadow: 0 0 10px rgba(56, 255, 178, 0.55);
  z-index: 1000; transition: width .1s linear; pointer-events: none;
}

/* ── Section active dans la navbar (scrollspy) ───────────────── */
.nav-links a.active { color: var(--accent); }
.nav-links a:not(.nav-cta).active { position: relative; }
.nav-links a:not(.nav-cta).active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: var(--accent); box-shadow: var(--glow-sm);
}

/* ── Retour en haut ──────────────────────────────────────────── */
#back-to-top {
  position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--accent); font-size: 1.1rem; backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 999;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { box-shadow: var(--glow-md); border-color: var(--accent); }

/* ── Révélation au défilement ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .18s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .24s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: .30s; }

/* ── Lien contextuel vers la documentation ───────────────────── */
.doc-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 36px;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: rgba(56, 255, 178, 0.07); border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: 0.88rem; font-weight: 600;
  transition: var(--transition);
}
.doc-link strong { color: var(--accent); font-weight: 700; }
.doc-link:hover { border-color: var(--accent); color: var(--text-primary); box-shadow: var(--glow-sm); transform: translateY(-1px); }
.doc-link-row { display: flex; justify-content: center; }

/* ── Le trajet de votre vidéo ────────────────────────────────── */
.datapath { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.datapath-col {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 26px;
}
.datapath-col.is-local { border-color: rgba(56, 255, 178, 0.4); background: linear-gradient(180deg, rgba(56,255,178,0.06), var(--bg-card) 60%); }
.datapath-col h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 4px; }
.datapath-col.is-remote h3 { color: var(--text-secondary); }
.datapath-col.is-local h3 { color: var(--accent); }
.datapath-sub { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 22px; }
.datapath-chain { list-style: none; padding: 0; margin: 0 0 20px; }
.datapath-chain li {
  position: relative; padding: 0 0 0 26px; margin-bottom: 14px;
  font-size: 0.93rem; line-height: 1.55; color: var(--text-secondary);
}
.datapath-chain li::before {
  content: ''; position: absolute; left: 6px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim);
}
.datapath-chain li::after {
  content: ''; position: absolute; left: 9px; top: 19px; bottom: -12px; width: 1px;
  background: linear-gradient(180deg, var(--border-top), transparent);
}
.datapath-chain li:last-child { margin-bottom: 0; }
.datapath-chain li:last-child::after { display: none; }
.is-local .datapath-chain li::before { background: var(--accent); box-shadow: var(--glow-sm); }
.is-local .datapath-chain li { color: var(--text-primary); }
.datapath-chain .third-party { color: var(--orange); font-weight: 700; }
/* Ligne chiffrement — mise en avant cote Studio Local, contrepoint a gauche */
.datapath-secure, .datapath-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 0; padding: 14px 16px; border-radius: 14px;
  font-size: 0.9rem; line-height: 1.6;
}
.datapath-secure {
  background: rgba(56, 255, 178, 0.09);
  border: 1px solid rgba(56, 255, 178, 0.35);
  color: var(--text-primary);
  box-shadow: inset 0 0 24px rgba(56, 255, 178, 0.06);
}
.datapath-secure strong { color: var(--accent); }
.datapath-note {
  background: var(--bg-recessed);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.ds-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.datapath-secure .gloss-bubble { text-align: left; }

/* margin-top:auto — le verdict reste colle en bas, les deux colonnes
   gardent donc leur ligne de conclusion alignee malgre des contenus
   de hauteurs differentes. */
/* min-height : reserve 3 lignes des deux cotes, pour que les deux traits
   de separation tombent a la meme hauteur meme si un verdict est plus
   court que l'autre. Resiste aussi a une traduction plus longue. */
.datapath-verdict {
  margin: 22px 0 0; margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem; line-height: 1.6; min-height: 4.8em;
}
.datapath-col.is-remote .datapath-verdict { color: var(--text-dim); }
.datapath-col.is-local .datapath-verdict { color: var(--text-primary); }
.consequences { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.consequence {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
  transition: var(--transition);
}
/* Cartes plus petites et plus denses que les .trust-card : meme effet, mais
   dose plus bas (--glow-sm, 3 px) pour que six cartes cote a cote ne se
   mettent pas a clignoter au moindre passage de souris. */
.consequence:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-sm);
  transform: translateY(-3px);
}
.consequence .c-icon { font-size: 22px; line-height: 1; flex-shrink: 0; transition: var(--transition); }
.consequence:hover .c-icon { transform: scale(1.12); }
.consequence h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.consequence p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 860px) {
  .datapath { grid-template-columns: 1fr; }
}

/* ── Ancre partageable sur les questions de la FAQ ───────────── */
.faq-anchor {
  margin-left: 10px; color: var(--text-dim); text-decoration: none;
  font-size: 0.85em; opacity: 0; transition: var(--transition);
}
.faq-item:hover .faq-anchor, .faq-anchor:focus { opacity: 1; }
.faq-anchor:hover { color: var(--accent); }
.faq-item:target { border-color: var(--accent); box-shadow: var(--glow-sm); }
.faq-item { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* Exception : hotspot-blink ne fait que pulser une lueur, sans aucun
     deplacement — ce n'est pas ce type d'animation qui gene les personnes
     sensibles au mouvement, et sans lui les reperes numerotes deviennent
     invisibles sur un visuel charge. L'anneau hotspot-ping, lui, se propage
     (transform: scale) et reste donc bien neutralise par la regle ci-dessus. */
  .hotspot { animation: hotspot-blink 2.4s ease-in-out infinite !important; }
  .studio-frame { transform: none; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  #back-to-top { transition: none; }
  /* Une transition ramenée à .01ms ne se valide jamais : l'élément reste
     bloqué sur sa valeur de départ. Tout ce qui apparaît via une propriété
     transitionnée (repli de la FAQ, infobulles, points du visuel d'accueil)
     restait donc invisible pour un visiteur ayant demandé la réduction des
     animations. On supprime franchement la transition sur ces éléments. */
  .faq-answer,
  .gloss-bubble,
  .hotspot-bubble,
  .faq-anchor { transition: none !important; }
}