/* Subly, site vitrine.

   Palette : reprise et approfondie de celle du popup de l'extension
   (public/popup/popup.html, dégradé bleu-900 vers bleu-600). Le popup est déjà
   sombre ; ce site l'était en clair, ce qui créait un décalage de marque
   entre le popup réel et la vitrine. Ici le thème sombre est la marque,
   pas un habillage marketing différent.

   Typographie : Helvetica Neue (système), pas de police custom à charger,
   look professionnel et minimaliste plutôt qu'un choix de police distinctif.

   Un seul thème (sombre), verrouillé : aucune section ne repasse en clair.
   Un seul accent (la famille bleu du popup) sur tout le site. Un seul
   système de rayons : rectangles à coins légèrement arrondis partout. */

:root {
  color-scheme: light;

  /* Famille bleue du popup, gardée pour l'accent et pour le mockup vidéo
     sombre (toujours sombre, comme un vrai lecteur, quel que soit le
     thème de la page). */
  --blue-950: #060a16;
  --blue-900: #0b2760;
  --blue-800: #103a82;
  --blue-700: #1b4fb0;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50: #eef4ff;

  /* Thème clair façon FluentAI : blanc pour la barre du haut et les
     cartes/bulles, noir pour les gros titres, gris pour le texte
     secondaire, bleu réservé aux boutons et highlights. */
  --bg: #f2f2f0;
  --surface: #ffffff;
  --surface-2: #e7eaf1;
  --line: rgba(10, 15, 26, 0.08);
  --line-strong: rgba(10, 15, 26, 0.14);

  --ink: #0a0f1a;
  --muted: #5b6472;
  --muted-2: #8b93a1;

  --accent: var(--blue-500);
  --accent-strong: var(--blue-600);
  --accent-ink: #04122f;

  --radius-card: 10px;
  --radius-sm: 6px;
  --radius-pill: 8px;

  --container-max: 1180px;
  --container-narrow: 42rem;
  --section-pad: clamp(4.5rem, 5vw + 2.5rem, 8rem);

  /* Courbe "critically damped" (damping ≈ 1.0) : une cible atteinte sans
     rebond, le comportement par défaut pour toute animation déclenchée par
     un clic plutôt qu'un geste de glisser (apple-design §4). */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 100ms;
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 620ms;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  /* Footer collé en bas de l'écran même quand le contenu ne remplit pas la
     hauteur de la fenêtre (ex. compte.html selon l'onglet actif) — plutôt
     qu'un footer flottant au milieu de l'écran, laissant le fond dégradé
     combler l'espace vide. */
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main,
.nav,
.footer {
  position: relative;
  z-index: 1;
}

main {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow {
  max-width: var(--container-narrow);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--accent-strong);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------- Typographie --------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

p {
  margin: 0;
  color: var(--muted);
}

.section {
  padding: var(--section-pad) 0;
}

.section--tight {
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
}

.section__head {
  max-width: 40rem;
  margin: 0 0 2.75rem;
}

.section__head--center {
  max-width: 34rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.section__head--wide {
  max-width: 56rem;
}

.section__title {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.375rem);
  color: var(--ink);
}

.section__title--display {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 3.5rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}

.section__title--md {
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em;
  font-weight: 700;
}

.section__title--nowrap {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .section__title--nowrap {
    white-space: normal;
  }
}

/* --------------------- Boutons --------------------- */
/* Un seul système de forme sur tout le site : boutons = pilule complète. */

/* Sans ce sélecteur, l'attribut hidden n'aurait aucun effet sur un élément
   .btn (ex. #account-portal, #account-upgrade) : même spécificité que
   [hidden], mais cette feuille de style passe après celle du navigateur
   dans la cascade, donc "display: inline-flex" l'emporterait. */
.btn[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-press) ease-out, background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--accent-strong);
  color: white;
}

.btn--primary:hover {
  background: var(--blue-700);
}

.btn--lg {
  padding: 0.9rem 1.75rem;
  font-size: 1rem;
}

/* Bouton de checkout : aura bleu marine / bleu clair / blanc qui ondule,
   plus un reflet qui balaie la surface. Réservé aux CTA de paiement. */
.btn--glow {
  position: relative;
  border: none;
  text-shadow: 0 1px 6px rgba(10, 20, 45, 0.5);
  background: linear-gradient(
    100deg,
    var(--blue-900) 0%,
    var(--blue-900) 22%,
    var(--blue-500) 38%,
    var(--blue-500) 46%,
    #ffffff 50%,
    var(--blue-500) 54%,
    var(--blue-500) 62%,
    var(--blue-900) 78%,
    var(--blue-950) 100%
  );
  background-size: 260% 100%;
  animation: btn-glow-shift 5s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 8px 24px -6px rgba(15, 42, 99, 0.6),
    0 0 40px -8px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.btn--glow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  filter: blur(2px);
  animation: btn-glow-sheen 3.2s ease-in-out infinite;
}

.btn--glow:hover {
  background-size: 260% 100%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 10px 28px -6px rgba(15, 42, 99, 0.75),
    0 0 52px -6px rgba(255, 255, 255, 0.4);
}

@keyframes btn-glow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes btn-glow-sheen {
  0% { left: -40%; }
  55%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--glow,
  .btn--glow::before {
    animation: none;
  }
}

/* Variante pour les CTA de navigation ("Installer Subly" dans le header) :
   mêmes couleurs que .btn--glow, mais un anneau qui tourne autour du bouton
   plutôt qu'une vague à l'intérieur, pour éviter la répétition visuelle
   avec les boutons de checkout. */
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.btn--glow-ring {
  position: relative;
  isolation: isolate;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--accent-strong), var(--accent-strong)) padding-box,
    conic-gradient(from var(--ring-angle, 0deg), var(--blue-900) 0%, var(--blue-500) 20%, #ffffff 40%, var(--blue-500) 60%, var(--blue-900) 80%, var(--blue-900) 100%) border-box;
  animation:
    btn-glow-ring-spin 2.2s linear infinite,
    btn-glow-ring-pulse 2.2s ease-in-out infinite;
}

.btn--glow-ring:hover {
  background:
    linear-gradient(var(--blue-700), var(--blue-700)) padding-box,
    conic-gradient(from var(--ring-angle, 0deg), var(--blue-900) 0%, var(--blue-500) 20%, #ffffff 40%, var(--blue-500) 60%, var(--blue-900) 80%, var(--blue-900) 100%) border-box;
}

@keyframes btn-glow-ring-spin {
  to { --ring-angle: 360deg; }
}

@keyframes btn-glow-ring-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55), 0 0 14px 0 rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0), 0 0 26px 3px rgba(255, 255, 255, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--glow-ring {
    animation: none;
  }
}

/* Blocs marine (confiance, CTA finale, manifeste, écran de démo) : un
   court segment lumineux bleu clair/cyan trace le contour en boucle,
   sans jamais toucher au dégradé de fond. Le dégradé de fond de chaque
   bloc est redéfini directement sur son sélecteur d'origine plus bas
   dans ce fichier (technique background-clip à deux calques, sans
   masque CSS pour rester fiable sur tous les navigateurs). */
@property --edge-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes edge-spin {
  to { --edge-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .trust-card,
  .cta-panel--bold,
  .manifesto,
  .demo-screen {
    animation: none;
  }
}

/* --------------------- Navigation --------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 4.25rem;
  display: flex;
  align-items: center;
  background: rgba(242, 242, 240, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.nav.is-elevated {
  border-bottom-color: var(--line);
  background: rgba(242, 242, 240, 0.92);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav__brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--ink);
}

.nav__links-cta {
  display: none;
}

.nav__links a.nav__links-cta {
  color: white;
}

.nav__brand-mobile {
  display: none;
  align-items: center;
}

.nav__brand-mobile img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: block;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

.nav__toggle span {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}

.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}

.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 980px) {
  .nav {
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .nav.is-scroll-hidden {
    transform: translateY(-100%);
  }

  .nav__actions {
    display: none;
  }

  .nav__toggle {
    display: flex;
    order: 2;
    margin-left: auto;
  }

  .nav__brand-mobile {
    display: flex;
    order: 1;
    margin-left: 0;
  }

  .nav__links {
    position: absolute;
    top: 4.25rem;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
    background: var(--bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--dur-base) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
  }

  .nav.is-open .nav__links {
    max-height: 28rem;
    opacity: 1;
  }

  .nav__links a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__links-cta {
    display: block;
    margin-top: 0.75rem;
    text-align: center;
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .nav {
    height: 3.25rem;
  }

  .nav__inner {
    padding: 0 1rem;
    gap: 1rem;
  }

  .nav__links {
    top: 3.25rem;
  }

  .nav__brand-mobile img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .nav__toggle {
    width: 1.85rem;
    height: 1.85rem;
  }
}

/* --------------------- Hero --------------------- */

.hero {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 66rem;
  margin: 0 auto;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: rgba(59, 130, 246, 0.08);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero__title {
  font-size: clamp(1.9rem, 0.85rem + 3.4vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  font-weight: 700;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

.hero__title-accent {
  display: block;
  background: linear-gradient(100deg, var(--blue-500) 0%, #7dd3fc 25%, var(--blue-500) 50%, var(--blue-700) 75%, var(--blue-500) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-accent-shift 6s ease-in-out infinite;
}

@keyframes hero-accent-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__subtitle {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 46rem;
}

.hero__subtitle-line {
  display: block;
}

.hero__ctas {
  margin-top: 2rem;
}

/* --------------------- Écran de démo (pleine largeur) --------------------- */

.demo-section {
  padding: 0 0 clamp(1rem, 2vw, 1.75rem);
}

.demo-screen {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  border: 1.5px solid transparent;
  background:
    linear-gradient(155deg, var(--blue-900), var(--blue-950) 70%) padding-box,
    conic-gradient(from var(--edge-angle, 0deg), transparent 0%, var(--blue-500) 8%, #7dd3fc 12%, transparent 24%, transparent 100%) border-box;
  animation: edge-spin 6s linear infinite;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(3, 8, 20, 0.8), 0 0 22px -4px rgba(37, 99, 235, 0.4);
}

.demo-screen__chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(3, 8, 20, 0.55);
  border-bottom: 1px solid var(--line);
}

.demo-screen__chrome .dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.demo-screen__chrome .dot--red {
  background: #ff5f57;
}

.demo-screen__chrome .dot--yellow {
  background: #febc2e;
}

.demo-screen__chrome .dot--green {
  background: #28c840;
}

.demo-screen__url {
  margin-left: 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(238, 242, 251, 0.06);
  color: var(--muted);
  font-size: 0.8125rem;
}

.player {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.player__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 30%, transparent 40%, rgba(3, 6, 14, 0.7) 100%);
}

.player__playbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(238, 242, 251, 0.12);
  border: 1px solid rgba(238, 242, 251, 0.25);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.player__playbtn svg {
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 2px;
}

.demo-stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  padding: 0 1.5rem;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.demo-stage.is-fading {
  opacity: 0;
}

.subly-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.subly-demo__line {
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.6rem + 1vw, 1.125rem);
}

.subly-demo__line--primary {
  color: white;
}

.subly-demo__line--primary .w {
  padding: 0.05em 0.15em;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.subly-demo__line--primary .w:hover {
  background: rgba(59, 130, 246, 0.25);
}

.subly-demo__line--primary .w--active {
  background: var(--accent);
  color: var(--accent-ink);
}

.subly-demo__line--french {
  color: rgba(238, 242, 251, 0.55);
  font-size: 0.875rem;
  font-weight: 500;
}

.word-tooltip {
  position: absolute;
  bottom: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 15.5rem);
  background: var(--blue-50);
  color: var(--blue-900);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.word-tooltip__save {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--blue-700);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-press) ease-out;
}

.word-tooltip__save:hover {
  color: var(--accent-strong);
}

.word-tooltip__save:active {
  transform: scale(0.9);
}

.word-tooltip__save svg {
  width: 1.1rem;
  height: 1.1rem;
}

.word-tooltip__save.is-saved svg {
  fill: var(--accent-strong);
}

.word-tooltip__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-right: 1.4rem;
}

.word-tooltip__word {
  font-weight: 700;
  font-size: 1rem;
}

.word-tooltip__pos {
  font-size: 0.75rem;
  color: var(--blue-700);
  font-style: italic;
}

.word-tooltip__translation {
  margin-top: 0.2rem;
  font-weight: 600;
  color: var(--blue-900);
  font-size: 0.875rem;
}

.word-tooltip__example-label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-700);
}

.word-tooltip__example {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: -0.01em;
  word-spacing: -0.03em;
}

.word-tooltip__example span {
  display: block;
  white-space: nowrap;
}

.word-tooltip__example span + span {
  margin-top: 0.15rem;
  color: var(--blue-700);
}

/* --------------------- Timeline (sentier de fiches) ---------------------
   Un sentier vertical en zigzag façon carnet de vocabulaire : une règle
   centrale se remplit au scroll (même logique --fill que l'ancienne
   flèche), et les fiches alternent gauche/droite avec un léger tilt qui
   se redresse au survol (courbe spring déjà définie dans :root). */

.section__note {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

.trail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  column-gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.trail__rule {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  width: 2px;
  background: var(--line-strong);
  border-radius: 1px;
}

.trail__rule-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  border-radius: 1px;
  transform: scaleY(var(--fill, 0));
  transform-origin: top center;
}

.trail__comet {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), 0 0 16px 3px rgba(37, 99, 235, 0.55);
  opacity: var(--comet-opacity, 0);
}

.trail__step {
  grid-row: var(--i);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  opacity: 0;
  transform: translateY(46px) scale(0.9) rotate(var(--tilt, 0deg));
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-spring);
  transition-delay: calc((var(--i) - 1) * 90ms);
}

.trail__step--a {
  --tilt: -1.5deg;
  transform: translateX(-30px) translateY(46px) scale(0.9) rotate(var(--tilt));
}

.trail__step--b {
  --tilt: 1.5deg;
  transform: translateX(30px) translateY(46px) scale(0.9) rotate(var(--tilt));
}

.trail__step.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--tilt, 0deg));
}

.trail__pin {
  grid-column: 2;
  justify-self: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  z-index: 1;
}

.trail__step--live .trail__pin {
  position: relative;
  background: var(--accent);
  border-color: var(--accent);
  animation: trail-beacon 2.2s ease-out infinite;
  animation-delay: calc((var(--i) - 1) * 250ms);
}

@keyframes trail-beacon {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  }
  70% {
    box-shadow: 0 0 0 11px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.trail__card {
  max-width: 17rem;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 24px -18px rgba(10, 15, 26, 0.35);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.trail__step:hover .trail__card {
  transform: translateY(-7px) rotate(calc(var(--tilt, 0deg) * -1.8)) scale(1.02);
  box-shadow: 0 22px 40px -18px rgba(10, 15, 26, 0.45);
}

.trail__step--live:hover .trail__card {
  border-color: rgba(37, 99, 235, 0.5);
}

.trail__step--live .trail__card {
  border-color: rgba(37, 99, 235, 0.28);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05), var(--surface) 55%);
}

.trail__step--a .trail__card {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.trail__step--a .trail__card-top {
  flex-direction: row-reverse;
}

.trail__step--b .trail__card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.trail__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.trail__index {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  letter-spacing: 0.02em;
}

.trail__status {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted-2);
}

.trail__step--live .trail__status {
  color: var(--accent-strong);
}

.trail__card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.trail__card p {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .trail {
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
  }

  .trail__rule {
    grid-column: 1;
  }

  .trail__pin {
    grid-column: 1;
  }

  .trail__step--a .trail__card,
  .trail__step--b .trail__card {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    max-width: none;
  }

  .trail__step--a .trail__card-top {
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trail__step {
    transition-delay: 0s;
  }

  .trail__step--live .trail__pin {
    animation: none;
  }

  .trail__comet {
    display: none;
  }
}

/* --------------------- Avis clients --------------------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid rgba(59, 130, 246, 0.55);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 0 18px -6px rgba(37, 99, 235, 0.35);
}

.testimonial-card__stars {
  display: flex;
  gap: 0.2rem;
  color: #f5a623;
}

.testimonial-card__stars svg {
  width: 1rem;
  height: 1rem;
}

.testimonial-card__quote {
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.55;
}

.testimonial-card__author {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-2);
}

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

/* --------------------- Eyebrow (label au-dessus d'un titre) --------------------- */

.hl {
  color: var(--accent-strong);
  font-weight: 600;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* --------------------- Pilules de langues --------------------- */
/* Liste des langues cibles disponibles, réutilisée sur l'accueil et le
   tutoriel : le produit propose 5 langues mais ce n'était mentionné
   qu'en toute fin de FAQ, peu visible. */

.lang-pill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.lang-pill {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.9375rem;
}

/* --------------------- Avertissement ordinateur requis (mobile) --------------------- */
/* Subly est une extension de navigateur : inutile sur mobile/tablette.
   N'apparaît que sur petit écran, juste après la case d'abonnement,
   pour éviter un abonnement pris par erreur depuis un téléphone. */

.desktop-only-notice {
  display: none;
}

@media (max-width: 640px) {
  .desktop-only-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fff7e6;
    border: 1px solid #f0c36d;
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #7a4d00;
  }

  .desktop-only-notice strong {
    color: #5c3a00;
  }
}

/* --------------------- Encart quiz personnalisé --------------------- */
/* Nudge vers le quiz de profil (quiz.html), utilisé sur l'accueil et la
   tarification. Empilé et centré plutôt qu'en ligne : un texte + bouton
   côte à côte casse trop facilement sur deux lignes inégales. Le texte
   reste sur une seule ligne à partir du format tablette (la boîte
   s'élargit pour le contenir), et peut revenir à deux lignes sur mobile. */

.quiz-nudge {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  background: var(--blue-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.quiz-nudge p {
  margin: 0;
  color: var(--accent-ink);
  font-weight: 560;
  font-size: 1.05rem;
}

@media (min-width: 641px) {
  .quiz-nudge p {
    white-space: nowrap;
  }
}

/* --------------------- CTA sous la démo --------------------- */

.demo-cta {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
}

.demo-cta__note {
  font-size: 0.875rem;
  color: var(--muted-2);
}

/* --------------------- Preuve sociale (photos utilisateurs) --------------------- */
/* Grille de placeholders de synthèse, à remplacer par de vraies captures
   client au fur et à mesure qu'elles arrivent — voir index.html. */

.ugc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ugc-photo {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  border: 1px solid rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 16px -6px rgba(37, 99, 235, 0.4);
  overflow: hidden;
}

.ugc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ugc-cta {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

@media (max-width: 700px) {
  .ugc-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* --------------------- Avis en marquee --------------------- */
/* Bandeau plein écran (hors .container, d'où .section--bleed) qui défile en
   continu. La liste de cartes est dupliquée en JS (voir script.js) pour
   boucler sans coupure visible ; on anime une simple translation de -50%
   sur .marquee__track, qui contient donc deux copies identiques. */

.section--bleed {
  overflow: hidden;
}

.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding: 0.25rem 0 1rem;
}

/* L'animation ne demarre qu'une fois la liste dupliquee par script.js
   (classe .is-ready ajoutee apres coup) : sinon la boucle -50% demarre sur
   la moitie du contenu reel et finit par afficher un trou vide le temps
   que le doublement s'applique. */
.marquee__track.is-ready {
  animation: marquee-scroll 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee .testimonial-card {
  flex: 0 0 20rem;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    animation: none;
  }
}

/* --------------------- Tableau comparatif --------------------- */

.compare-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 0 20px -6px rgba(37, 99, 235, 0.4);
}

.compare-table__row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1rem;
}

.compare-table__row:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.compare-table__row > span {
  padding: 0.9rem 1.1rem;
  font-size: 0.875rem;
}

.compare-table__row--head {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--ink);
}

.compare-table__row:not(.compare-table__row--head) {
  background: var(--surface);
}

.compare-table__row > span:first-child {
  color: var(--muted);
  font-weight: 600;
}

.compare-table__col--subly {
  color: var(--accent-strong);
}

.compare-table__yes {
  color: var(--accent-strong);
  font-weight: 600;
}

.compare-table__no {
  color: var(--muted-2);
}

@media (max-width: 640px) {
  .compare-table__row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.9rem 1.1rem;
  }

  .compare-table__row--head {
    display: none;
  }

  .compare-table__row > span {
    padding: 0.15rem 0;
  }

  .compare-table__row > span:first-child {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted-2);
  }

  .compare-table__yes::before {
    content: '✓ ';
    color: var(--accent-strong);
    font-weight: 700;
  }

  .compare-table__no::before {
    content: '✗ ';
  }
}

/* --------------------- 4 arguments de confiance --------------------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.trust-card {
  position: relative;
  padding: 1.5rem;
  border: 1.5px solid transparent;
  background:
    linear-gradient(155deg, var(--blue-900), var(--blue-950) 70%) padding-box,
    conic-gradient(from var(--edge-angle, 0deg), transparent 0%, var(--blue-500) 8%, #7dd3fc 12%, transparent 24%, transparent 100%) border-box;
  animation: edge-spin 6s linear infinite;
  border-radius: var(--radius-card);
  box-shadow: 0 0 18px -6px rgba(37, 99, 235, 0.35);
}

.trust-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(238, 242, 251, 0.1);
  color: var(--blue-500);
  margin-bottom: 0.9rem;
}

.trust-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.trust-card h4 {
  color: white;
  font-size: 1rem;
}

.trust-card p {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: rgba(238, 242, 251, 0.7);
}

.trust-card p .hl {
  color: var(--blue-500);
}

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

/* --------------------- Barre sticky de conversion --------------------- */
/* Masquée par défaut ; script.js bascule .is-visible une fois le hero
   dépassé, et .is-hidden pendant que #checkout est à l'écran (pour ne pas
   dupliquer le vrai bouton "S'abonner"). */

.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-spring);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -20px rgba(10, 15, 26, 0.35);
}

.sticky-bar.is-visible {
  transform: translateY(0);
}

.sticky-bar.is-hidden {
  transform: translateY(100%);
}

.sticky-bar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sticky-bar__product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.sticky-bar__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  display: block;
}

.sticky-bar__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sticky-bar__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.sticky-bar__price {
  font-size: 0.8125rem;
  color: var(--muted-2);
}

/* Subly est une extension pour ordinateur : ce bandeau pousse à
   "installer" ou "s'abonner" depuis l'appareil affiché, ce qui n'a pas
   de sens sur mobile/tablette (voir aussi .desktop-only-notice). Masqué
   en dessous de 640px plutôt que de reformuler pour un usage impossible. */
@media (max-width: 640px) {
  .sticky-bar {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-bar {
    transition: none;
  }
}

/* --------------------- FAQ --------------------- */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.55);
  border-radius: var(--radius-card);
  padding: 0.25rem 1.5rem;
  box-shadow: 0 0 14px -6px rgba(37, 99, 235, 0.3);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform var(--dur-base) var(--ease-spring), color var(--dur-fast) var(--ease-out);
}

.faq-item__icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-item p {
  padding: 0 0 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] p {
    animation: faq-reveal var(--dur-base) var(--ease-out);
  }
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------- CTA finale --------------------- */

.cta-panel {
  background: var(--surface);
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: var(--radius-card);
  padding: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 0 22px -6px rgba(37, 99, 235, 0.4);
}

.cta-panel h3 {
  font-size: clamp(1.25rem, 0.6rem + 2vw, 2rem);
}

.cta-panel--compact {
  padding: clamp(1.5rem, 3vw, 2rem);
  gap: 1rem;
}

.cta-panel--compact h3 {
  font-size: clamp(1rem, 0.5rem + 1.5vw, 1.25rem);
}

.cta-panel--compact .btn {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}

.cta-panel__line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cta-panel__line {
    white-space: normal;
  }
}

.cta-panel__note {
  font-size: 0.875rem;
  color: var(--muted-2);
}

/* Variante pleine intensité : même carte, fond bleu profond (comme
   .manifesto), pour la CTA finale d'une page produit. */
.cta-panel--bold {
  position: relative;
  border: 1.5px solid transparent;
  background:
    linear-gradient(155deg, var(--blue-900), var(--blue-950) 70%) padding-box,
    conic-gradient(from var(--edge-angle, 0deg), transparent 0%, var(--blue-500) 8%, #7dd3fc 12%, transparent 24%, transparent 100%) border-box;
  animation: edge-spin 6s linear infinite;
}

.cta-panel--bold h3 {
  color: white;
}

.cta-panel--bold .cta-panel__note {
  color: rgba(238, 242, 251, 0.7);
}

.cta-panel--bold .btn--primary {
  background: white;
  color: var(--blue-900);
}

.cta-panel--bold .btn--primary:hover {
  background: var(--blue-50);
}

/* --------------------- Footer --------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer__links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9375rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__links a:hover {
  color: var(--ink);
}

.footer__copy {
  font-size: 0.875rem;
  color: var(--muted-2);
}

/* --------------------- Page-hero (pages internes) --------------------- */

.page-hero {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.page-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 32rem;
}

.page-hero p {
  margin-top: 1rem;
  font-size: 1.0625rem;
  max-width: 34rem;
}

.page-hero--center {
  text-align: center;
}

.page-hero--center h1 {
  max-width: 50rem;
  margin: 0 auto;
  white-space: nowrap;
}

.page-hero--center p {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .page-hero--center h1 {
    white-space: normal;
  }
}

/* --------------------- Pages légales --------------------- */

.legal {
  max-width: 44rem;
}

.legal h2 {
  margin-top: 2.5rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.6;
}

.legal ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal__intro {
  font-size: 1.0625rem;
  color: var(--ink);
}

.legal__note {
  font-size: 0.875rem;
  color: var(--muted-2);
}

/* --------------------- Tutoriel : vidéo de démo --------------------- */

.demo-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* --------------------- Pricing --------------------- */

.pricing-card {
  background: var(--surface);
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  animation: pricing-card-breathe 4.5s ease-in-out infinite;
}

@keyframes pricing-card-breathe {
  0%, 100% { box-shadow: 0 0 24px -6px rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 38px -4px rgba(37, 99, 235, 0.65); }
}

.pricing-card__badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(59, 130, 246, 0.16);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

.pricing-toggle {
  position: relative;
  display: flex;
  width: max-content;
  margin: 0 auto 0.85rem;
  padding: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.pricing-toggle__thumb {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: calc(50% - 0.25rem);
  height: calc(100% - 0.5rem);
  background: var(--surface);
  border-radius: calc(var(--radius-pill) - 2px);
  transition: transform var(--dur-base) var(--ease-spring);
}

.pricing-toggle[data-plan='monthly'] .pricing-toggle__thumb {
  transform: translateX(100%);
}

.pricing-toggle__btn {
  position: relative;
  z-index: 1;
  /* min-width identique plutôt que flex-grow seul : le conteneur
     .pricing-toggle est en "width: max-content" (aucun espace libre à
     distribuer), donc "flex: 1 1 0" seul ne suffit pas à égaliser les deux
     boutons — sans ça, "Annuel" reste plus large que "Mensuel" à cause du
     badge "-33%", et le point central entre les deux boutons ne tombe pas
     au centre de la page. */
  flex: 1 1 0;
  min-width: 8.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1.25rem;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-pill) - 2px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.pricing-toggle__btn.is-active {
  color: var(--ink);
}

/* Aura bleue permanente autour de "Annuel" pour attirer l'œil vers l'offre
   la plus avantageuse, indépendamment du plan actuellement sélectionné. */
.pricing-toggle__btn[data-plan='annual'] {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45), 0 0 14px 3px rgba(37, 99, 235, 0.35);
}

.pricing-toggle__save {
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-toggle__thumb {
    transition: none;
  }
}

.pricing-card__price {
  margin: -0.5rem 0 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.pricing-card__price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted-2);
}

.pricing-card__note {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin-top: 0.5rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .pricing-card__note {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    white-space: normal;
  }
}

.pricing-card__savings {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-strong);
  text-align: center;
}

.pricing-card__hint {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--muted-2);
  text-align: center;
}

.pricing-feature-list {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.pricing-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.pricing-feature-list svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent);
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  text-align: center;
}

/* Ancres de scroll (nav sticky de 4.25rem) : évite que le haut de la
   section visée passe sous la barre de nav. */
section[id] {
  scroll-margin-top: 5rem;
}

/* Sur mobile, la carte de tarification est plus haute que l'écran : viser
   le haut de la section masque le bouton "S'abonner" en bas de carte.
   Marge négative pour scroller plus bas et garder le bouton visible,
   quitte à couper un peu le titre "Choisissez votre formule" en haut. */
@media (max-width: 640px) {
  #checkout,
  #pricing-card {
    scroll-margin-top: -2rem;
  }
}

/* --------------------- Étapes (comment ça marche) --------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.step-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.step-card__link-text {
  color: var(--accent-strong);
  text-decoration: underline;
  font-weight: 600;
}

@media (max-width: 640px) {
  .step-card__tail {
    display: block;
  }
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.5);
}

.step-card__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

.step-card h4 {
  color: var(--ink);
  font-size: 1.0625rem;
}

.step-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.steps-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.steps-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .steps-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .steps-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .steps-grid,
  .steps-grid--4,
  .steps-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* --------------------- Carrousel de scénarios d'usage --------------------- */
/* Placeholder de synthèse à gauche (à remplacer par une vraie capture),
   texte + navigation à droite. Un seul slide visible à la fois, basculé en
   JS (voir script.js) via .is-active. */

.scenario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.scenario__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  border: 1px solid rgba(59, 130, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-2);
  overflow: hidden;
}

.scenario__visual svg {
  width: 3rem;
  height: 3rem;
}

.scenario__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.scenario__slide {
  display: none;
}

.scenario__slide.is-active {
  display: block;
}

.scenario__index {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}

.scenario__content h4 {
  color: var(--ink);
  font-size: 1.375rem;
}

.scenario__content p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
}

.scenario__nav {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.scenario__cta {
  margin-top: 1.5rem;
}

.scenario__arrows {
  display: flex;
  gap: 0.5rem;
}

.scenario__arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.scenario__arrow:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.scenario__arrow svg {
  width: 1rem;
  height: 1rem;
}

.scenario__dots {
  display: flex;
  gap: 0.4rem;
}

.scenario__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 99px;
  background: var(--line-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-spring), background-color var(--dur-fast) var(--ease-out);
}

.scenario__dot.is-active {
  width: 1.5rem;
  background: var(--accent-strong);
}

@media (max-width: 760px) {
  .scenario {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* --------------------- Manifeste (section bleue pleine largeur) --------------------- */

.manifesto {
  position: relative;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  background:
    linear-gradient(155deg, var(--blue-900), var(--blue-950) 70%) padding-box,
    conic-gradient(from var(--edge-angle, 0deg), transparent 0%, var(--blue-500) 8%, #7dd3fc 12%, transparent 24%, transparent 100%) border-box;
  animation: edge-spin 6s linear infinite;
  color: var(--blue-50);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.manifesto__head {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.manifesto__head h3 {
  color: white;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  letter-spacing: -0.02em;
}

.manifesto__head p {
  margin-top: 0.75rem;
  color: rgba(238, 242, 251, 0.7);
}

.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.manifesto-card {
  background: rgba(238, 242, 251, 0.06);
  border: 1px solid rgba(238, 242, 251, 0.12);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}

.manifesto-card__index {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--blue-500);
  margin-bottom: 0.5rem;
}

.manifesto-card h4 {
  color: white;
  font-size: 1.0625rem;
}

.manifesto-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(238, 242, 251, 0.7);
}

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

/* --------------------- Bandeau défilant (ticker) --------------------- */

.ticker {
  background: var(--accent-strong);
  overflow: hidden;
  padding: 0.85rem 0;
}

.ticker__track {
  display: flex;
  gap: 2rem;
  width: max-content;
}

/* Meme raison que .marquee__track.is-ready : attendre le doublement JS
   avant de lancer la boucle -50%. */
.ticker__track.is-ready {
  animation: marquee-scroll 26s linear infinite;
}

.ticker__item {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: white;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.ticker__item::after {
  content: '·';
  margin-left: 2rem;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .ticker {
    overflow-x: auto;
  }

  .ticker__track {
    animation: none;
  }
}

/* --------------------- Avis avec profil (avatar/ville/vérifié) --------------------- */

.testimonial-card__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
}

.testimonial-card__avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700));
  color: white;
  font-weight: 700;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-card__who {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-card__location {
  font-size: 0.75rem;
  color: var(--muted-2);
}

.testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1fa971;
}

.testimonial-card__verified svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* --------------------- Compte / connexion --------------------- */

.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(2rem, 4vw, 2.5rem);
}

/* Formulaire de connexion : recentré et resserré (contrairement au layout
   à deux colonnes une fois connecté, voir .account-layout ci-dessous, qui
   a besoin de toute la largeur du container). */
.account-card--auth {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* --------------------- Compte connecté : menu latéral --------------------- */

.account-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  max-width: 54rem;
  margin: 0 auto;
}

/* Sans ce sélecteur, l'attribut hidden n'a aucun effet ici : il a la même
   spécificité que ".account-layout" mais notre feuille de style passe
   après celle du navigateur dans la cascade, donc "display: flex"
   l'emporterait sur "display: none" et l'élément resterait visible. */
.account-layout[hidden] {
  display: none;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  width: 12rem;
}

.account-nav__item {
  display: block;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.account-nav__item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.account-nav__item.is-active {
  background: var(--blue-50);
  color: var(--accent-strong);
}

.account-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 720px) {
  .account-layout {
    flex-direction: column;
  }

  .account-nav {
    flex-direction: column;
    width: 100%;
  }
}

.account-field {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}

.account-field:focus {
  outline: none;
  border-color: var(--accent);
}

.account-error {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #c0392b;
}

.account-error:empty {
  display: none;
}

.account-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--accent-strong);
  font-size: 0.875rem;
  line-height: 1.4;
}

.account-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
}

.account-consent[hidden] {
  display: none;
}

.account-consent input {
  flex-shrink: 0;
}

.account-consent a {
  color: var(--accent-strong);
}

.account-switch {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.account-danger-zone {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.account-danger-link {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--muted-2);
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.account-email {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.account-status.is-active {
  background: rgba(34, 197, 94, 0.14);
  color: #16803d;
}

#account-upgrade,
#account-install {
  margin-bottom: 0.75rem;
}

.account-plans {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --------------------- Vocabulaire (compte.html) --------------------- */

.vocab-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vocab-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.4rem 0.3rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.vocab-chip:hover {
  border-color: var(--accent);
}

.vocab-chip.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.vocab-chip.is-active .vocab-chip__word {
  color: white;
}

.vocab-chip__word {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.vocab-chip__star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--line-strong);
  cursor: pointer;
}

.vocab-chip__star svg {
  width: 1rem;
  height: 1rem;
}

.vocab-chip__star.is-checked {
  color: #f5b400;
}

/* Réutilise le style de .word-tooltip (démo de la page d'accueil) mais en
   flux normal plutôt qu'en position:absolute flottante par-dessus une
   vidéo : ici la fiche s'affiche sous la liste de mots. */
.word-tooltip--inline {
  position: static;
  transform: none;
  width: 100%;
  margin-top: 1rem;
}

/* --------------------- Reveal-on-scroll --------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .btn--glow,
  .btn--glow::before,
  .hero__title-accent,
  .pricing-card {
    animation: none;
  }

  .demo-stage,
  .faq-item__icon,
  .btn,
  .nav__links,
  .nav__toggle span {
    transition: none !important;
    animation: none !important;
  }

}

/* --------------------- Responsive --------------------- */

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

  .process {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .install-panel {
    grid-template-columns: 1fr;
  }

  .product-teaser {
    flex-direction: column;
    align-items: stretch;
  }

  .product-teaser__note {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .player {
    aspect-ratio: 4 / 5;
  }

  .word-tooltip {
    bottom: auto;
    top: 1.25rem;
  }

  .demo-stage {
    bottom: auto;
    top: 40%;
  }

  .hero__badge {
    padding: 0.245rem 0.63rem;
    font-size: 0.65625rem;
  }

  .demo-screen__chrome {
    padding: 0.4rem 0.75rem;
    gap: 0.35rem;
  }

  .demo-screen__chrome .dot {
    width: 0.45rem;
    height: 0.45rem;
  }

  .demo-screen__url {
    margin-left: 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .hero__title-line {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Bandeau de consentement cookies (RGPD/ePrivacy) : gate le chargement du
   Pixel Meta, voir assets/cookie-consent.js. */
.cookie-banner {
  position: fixed;
  z-index: 100;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(10, 15, 26, 0.16);
}

.cookie-banner__text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.cookie-banner__text a {
  color: var(--accent-strong);
}

.cookie-banner__actions {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}

.cookie-banner__refuse {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.cookie-banner__refuse:hover {
  border-color: var(--muted-2);
}

@media (max-width: 560px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__text {
    /* flex-basis suit l'axe principal : en colonne, 20rem devient une
       hauteur (et non une largeur) sans ce reset. */
    flex-basis: auto;
  }

  .cookie-banner__actions {
    justify-content: flex-end;
  }
}