/* =============================================================================
   LANDING PAGE — Stream Operating System
   Thème cyberpunk natif aligné sur l'app Rust (theme-sos.css).
   Fond gradient animé, scanlines CRT, glass morphism, boutons shine + cadre
   dégradé, cartes features avec code couleur par section.
   ============================================================================= */

/* ==================== Fond cyberpunk ==================== */
/* Override theme.css (body { overflow: hidden; height: 100vh }) pour permettre
   le scroll sur la landing page. */
body.landing-page {
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 100vh;
  width: 100vw;
  background: #02030a;
}

/* Neutraliser le body::before de theme.css qui couvre notre .landing-bg-glow */
body.landing-page::before {
  content: none;
}

.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 40px 24px 80px;
  position: relative;
}

/* Glow d'arrière-plan cyberpunk — côtés latéraux noirs purs,
   transitions vert fluo en bas-gauche et haut-droit */
.landing-bg-glow {
  position: fixed;
  inset: 0;
  background:
    /* Ellipses cyan/violet centrales (gardées) */
    radial-gradient(ellipse 60% 50% at 25% 15%, rgba(103, 232, 249, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 75% 85%, rgba(167, 139, 250, 0.12) 0%, transparent 60%),
    /* Transition vert fluo en bas-gauche (du noir vers le bleu) */
    radial-gradient(ellipse 35% 40% at 0% 100%, rgba(34, 197, 94, 0.22) 0%, rgba(34, 197, 94, 0.10) 35%, transparent 65%),
    /* Transition vert fluo en haut-droit (du noir vers le violet) */
    radial-gradient(ellipse 35% 40% at 100% 0%, rgba(34, 197, 94, 0.22) 0%, rgba(34, 197, 94, 0.10) 35%, transparent 65%),
    /* Vignettage noir PUR sur les côtés latéraux gauche/droit */
    linear-gradient(90deg, #000 0%, #000 8%, transparent 25%, transparent 75%, #000 92%, #000 100%),
    /* Vignettage noir sur haut/bas (plus léger) */
    linear-gradient(180deg, #000 0%, transparent 12%, transparent 88%, #000 100%),
    /* Base dégradée — bleu foncé tiré vers le noir */
    linear-gradient(135deg, #02030a, #060a14 48%, #02040a);
  z-index: -2;
  pointer-events: none;
}

/* Scanlines CRT globales — effet léger sur tout le fond */
.landing-bg-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Grille cyberpunk en perspective légère (décor) */
.landing-bg-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(103, 232, 249, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 250, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 0%, transparent 85%);
  pointer-events: none;
}

.landing-container {
  max-width: 920px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
  text-align: center;
}

/* Bandeau noir pleine largeur — Streamy + logo + phrase + lasers décoratifs */
.landing-bandeau {
  width: 100vw;
  /* Le body est flex column + align-items:center : un élément 100vw
     est automatiquement centré et déborde également de chaque côté,
     compensant le padding du body → pleine largeur de l'écran. */
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 32px 24px 26px;
  background: #000;
  border-top: 1px solid rgba(103, 232, 249, 0.18);
  border-bottom: 1px solid rgba(103, 232, 249, 0.18);
  box-sizing: border-box;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  /* Centrer le contenu du bandeau */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* Repère pour les lasers décoratifs (position: absolute) + clip du pulse */
  position: relative;
  overflow: hidden;
}

/* Loader du bandeau — overlay qui masque le contenu pendant le chargement
   des images du header, puis fade out. Évite les saccades et le layout shift
   au reload. Disparaît quand les images sont prêtes (JS) ou après 3s (fallback). */
.landing-bandeau-loader {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}
.landing-bandeau-loader.pret {
  opacity: 0;
  pointer-events: none;
}
/* Pulse minimaliste : cercle cyan/violet qui respire (transform = GPU) */
.landing-bandeau-loader-pulse {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-cyan), var(--accent-violet));
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.6);
  animation: loader-pulse 1.2s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-bandeau-loader-pulse { animation: none; }
}

/* Lasers décoratifs — traits obliques à 45° cyan/violet dans le fond noir du
   bandeau. Un pulse lumineux descend le long de la barre (effet « laser du ciel
   vers la terre »). Animation en transform uniquement (GPU, économe).
   Largeur responsive (~5px desktop, moins sur mobile). */
.landing-laser {
  position: absolute;
  top: -50%;
  height: 200%;
  width: clamp(3px, 0.35vw, 5px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(103, 232, 249, 0.12) 30%,
    rgba(167, 139, 250, 0.12) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  transform-origin: center;
}
.landing-laser::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 20%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--accent-cyan) 40%,
    var(--accent-violet) 80%,
    transparent 100%
  );
  /* Glow modeste (un seul niveau de flou — économe vs. 3 niveaux avant) */
  box-shadow: 0 0 6px rgba(103, 232, 249, 0.5);
  /* transform = GPU composited, pas de repaint → économe */
  animation: laser-descente 6s ease-in-out infinite;
}
@keyframes laser-descente {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 0.85; }
  80%  { opacity: 0.85; }
  100% { transform: translateY(500%); opacity: 0; }
}
/* Positionnement — 2 lasers par côté, décalés depuis le bord (responsive).
   Oblique 45° : côté gauche penche vers le centre-bas (rotate -45deg),
   côté droit penche vers le centre-bas (rotate 45deg) → effet convergent
   « lasers du ciel ». Délais décalés pour que les pulses ne descendent
   pas tous en même temps. */
.landing-laser--gauche-1 { left: clamp(10px, 4vw, 60px); transform: rotate(-45deg); }
.landing-laser--gauche-2 { left: clamp(34px, 9vw, 130px); transform: rotate(-45deg); }
.landing-laser--gauche-2::after { animation-delay: 2s; }
.landing-laser--droite-1 { right: clamp(10px, 4vw, 60px); transform: rotate(45deg); }
.landing-laser--droite-1::after { animation-delay: 1s; }
.landing-laser--droite-2 { right: clamp(34px, 9vw, 130px); transform: rotate(45deg); }
.landing-laser--droite-2::after { animation-delay: 3s; }

/* Respect de prefers-reduced-motion (accessibilité + économie d'énergie) :
   on masque les lasers décoratifs animés + on désactive les pulses des
   flèches du sous-titre + on affiche les sections sans animation. */
@media (prefers-reduced-motion: reduce) {
  .landing-laser { display: none; }
  .landing-sous-titre::before,
  .landing-sous-titre::after { animation: none; }
  /* Désactiver aussi les pulses filter (logo-pulse) : animations infinies
     sur filter coûteuses en rendu, incompatibles avec reduced-motion. */
  .landing-logo { animation: logo-fade 0.4s ease 0.1s forwards; }
  .landing-container > section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.landing-logo-bloc {
  /* Grid 3 colonnes équilibrées : Streamy (gauche) | logo+phrase (centre) |
     OBS (droite). Le centre est mathématiquement centré car les colonnes
     gauche et droite ont la même largeur (1fr chacune). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Bloc logo + phrase empilés (la phrase sous le logo, visible par transparence) */
.landing-logo-phrase {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 2;
  /* Remontée pour centrage visuel Y : le padding du bandeau est asymétrique
     (32px haut / 36px bas) + la phrase en margin-top négatif (-72px) décale
     fortement le centre visuel vers le bas. On compense avec un margin-bottom
     qui remonte le bloc pour qu'il soit centré sur l'axe Y du header. */
  margin-bottom: 60px;
}

/* Mascotte Streamy — colonne de gauche */
.landing-streamy-bloc {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1;
  justify-self: start;
}

/* Logo OBS Studio — colonne de droite (miroir de Streamy) */
.landing-obs-bloc {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 3;
  justify-self: end;
}
.landing-obs-lien {
  display: block;
  text-decoration: none;
  /* Le logo est dans un <button> : les navigateurs appliquent un fond et une
     bordure par défaut aux boutons (gris clair/blanc). On les retire pour que
     le PNG transparent reste transparent — sinon le fond du bouton apparaît
     derrière le logo. */
  background: none;
  border: none;
  padding: 0;
  /* Curseur personnalisé : logo OBS avec bordure rouge (32x32 PNG) */
  cursor: url('assets/obs-cursor.png') 16 16, pointer;
}
.landing-obs-logo {
  width: 156px;
  height: auto;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 1;
  /* Baisser le logo pour l'aligner visuellement avec Streamy (dont le centre
     visuel est plus haut que son centre géométrique, car c'est un personnage) */
  margin-top: 20px;
  /* Glow statique (cyan/violet) — pas d'animation infinie sur filter, qui est
     coûteuse en rendu (recompute à chaque frame) et entrait en conflit avec
     le filter rouge du :hover. Le glow statique suffit visuellement. */
  filter:
    drop-shadow(0 0 8px rgba(103, 232, 249, 0.4))
    drop-shadow(0 0 20px rgba(167, 139, 250, 0.25));
  opacity: 0;
  animation: obs-fade 0.4s ease 0.2s forwards;
  /* Transition sur filter ET transform : le zoom au survol est fluide et
     naturel (courbe ease-out légèrement élastique). will-change optimise
     le compositing GPU pour le transform. */
  transition:
    filter 0.3s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
/* Au survol : bordure/glow rouge + zoom fluide (8%). Plus de conflit avec
   une animation pulse puisque obs-pulse a été retirée. */
.landing-obs-lien:hover .landing-obs-logo {
  filter:
    drop-shadow(0 0 10px rgba(239, 68, 68, 0.7))
    drop-shadow(0 0 24px rgba(239, 68, 68, 0.4));
  transform: scale(1.08);
}
@keyframes obs-fade {
  to { opacity: 0.9; }
}
.landing-streamy-bloc::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(103, 232, 249, 0.18) 0%, transparent 50%),
    radial-gradient(circle, rgba(167, 139, 250, 0.14) 0%, transparent 60%);
  filter: blur(20px);
  animation: streamy-glow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes streamy-glow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

.landing-streamy {
  width: 180px;
  height: auto;
  /* Réserver l'espace dès le départ (ratio 429:641) → pas de layout shift
     pendant le chargement de l'image. */
  aspect-ratio: 429 / 641;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 8px rgba(103, 232, 249, 0.5))
    drop-shadow(0 0 20px rgba(167, 139, 250, 0.35));
  opacity: 0;
  animation: streamy-fade 0.4s ease forwards, streamy-bounce 3s ease-in-out 0.4s infinite;
}

@keyframes streamy-fade {
  to { opacity: 1; }
}

@keyframes streamy-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

.landing-logo {
  width: 100%;
  max-width: 620px;
  height: auto;
  /* Réserver l'espace dès le départ (ratio 676:369) → pas de layout shift */
  aspect-ratio: 676 / 369;
  border-radius: 16px;
  filter: drop-shadow(0 0 28px rgba(103, 232, 249, 0.35));
  opacity: 0;
  animation: logo-fade 0.4s ease 0.1s forwards, logo-pulse 4s ease-in-out 0.5s infinite;
}

@keyframes logo-fade {
  to { opacity: 1; }
}

@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(103, 232, 249, 0.35)); }
  50%      { filter: drop-shadow(0 0 42px rgba(167, 139, 250, 0.45)); }
}

.landing-sous-titre {
  position: relative;
  font-size: 19px;
  font-weight: 300;
  /* Oblique forcé (CSS Fonts 4) → italique plus prononcé, fallback italic */
  font-style: oblique 14deg, italic;
  font-synthesis: style;
  font-family: 'Exo 2', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  margin: -72px 0 0;
  line-height: 1.5;
  max-width: 620px;
  padding: 6px 14px;
  text-align: center;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

/* Ligne du haut (surlignage) — décalée de 5px vers la droite + flèche à droite
   + pulse laser cyan qui traverse la ligne de gauche à droite (léger :
   background-position sur un élément de 6px = repaint minimal). */
.landing-sous-titre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  right: 0;
  height: 6px;
  pointer-events: none;
  background-image:
    /* 1. Ligne statique cyan→violet */
    linear-gradient(90deg, rgba(103, 232, 249, 0.8), rgba(167, 139, 250, 0.8)),
    /* 2. Flèche droite (violet) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M0 0L6 3L0 6Z' fill='%23a78bfa' fill-opacity='0.9'/%3E%3C/svg%3E"),
    /* 3. Pulse laser cyan — spot lumineux qui traverse la ligne */
    linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.3) 35%, rgba(103, 232, 249, 1) 50%, rgba(103, 232, 249, 0.3) 65%, transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: calc(100% - 6px) 1px, 6px 6px, 25% 4px;
  background-position: left center, right center, -25% center;
  animation: laser-sous-titre-haut 4s linear infinite;
}
@keyframes laser-sous-titre-haut {
  0%   { background-position: left center, right center, -25% center; }
  100% { background-position: left center, right center, 125% center; }
}

/* Ligne du bas (soulignage) — baissée de 2px + flèche à gauche
   + pulse laser violet qui traverse la ligne de droite à gauche. */
.landing-sous-titre::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  background-image:
    /* 1. Ligne statique cyan→violet */
    linear-gradient(90deg, rgba(103, 232, 249, 0.8), rgba(167, 139, 250, 0.8)),
    /* 2. Flèche gauche (cyan) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'%3E%3Cpath d='M6 0L0 3L6 6Z' fill='%2367e8f9' fill-opacity='0.9'/%3E%3C/svg%3E"),
    /* 3. Pulse laser violet — spot lumineux qui traverse la ligne */
    linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.3) 35%, rgba(167, 139, 250, 1) 50%, rgba(167, 139, 250, 0.3) 65%, transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: calc(100% - 6px) 1px, 6px 6px, 25% 4px;
  background-position: right center, left center, 125% center;
  animation: laser-sous-titre-bas 4s linear 2s infinite;
}
@keyframes laser-sous-titre-bas {
  0%   { background-position: right center, left center, 125% center; }
  100% { background-position: right center, left center, -25% center; }
}

/* ==================== Reveal séquentiel des sections ====================
   Au démarrage, seuls le header (bandeau) est visible. Les sections du
   main sont cachées (opacity:0 + léger translateY) puis révélées une par
   une par JS avec des timers précis après le chargement du header.
   Cela laisse le temps aux images de charger et offre une apparition
   propre, sans saccade, quelles que soient la connexion et la puissance. */
.landing-container > section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.landing-container > section.revele {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== Boutons (style app Rust) ====================
   Reprend .dashboard-btn : shine (::before) + cadre dégradé (::after) avec
   mask-composite, glass morphism, hover gradient interface. */
.landing-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--global-border-radius);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-normale),
              background var(--transition-normale),
              color var(--transition-normale),
              box-shadow var(--transition-normale),
              transform var(--transition-rapide);
  border: 1.5px solid transparent;
  min-width: 240px;
  justify-content: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Effet shine — balayage au hover */
.landing-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.28), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.landing-btn:hover::before {
  left: 100%;
}

/* Cadre dégradé cyan→violet (mask-composite) */
.landing-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.45), rgba(167, 139, 250, 0.35), rgba(255, 255, 255, 0.08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  transition: opacity var(--transition-normale);
}

.landing-btn:hover::after {
  opacity: 0.9;
}

.landing-btn-principal {
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.10), rgba(167, 139, 250, 0.08));
  border-color: rgba(103, 232, 249, 0.5);
  color: #67e8f9;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-btn-principal:hover {
  background: var(--gradient-interface);
  border-color: rgba(103, 232, 249, 0.8);
  color: var(--text-primary);
  box-shadow: 0 8px 36px rgba(103, 232, 249, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.landing-btn-secondaire {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.landing-btn-secondaire:hover {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(255, 255, 255, 0.06));
  border-color: rgba(167, 139, 250, 0.5);
  color: var(--text-primary);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.landing-btn:active {
  transform: scale(0.99);
}

.landing-btn-icone {
  font-size: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.5));
  z-index: 2;
}

.landing-btn-texte {
  z-index: 2;
}

/* ==================== Fonctionnalités (deux listes Rust / Web) ==================== */
.landing-fonctions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.landing-fonctions-titre {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  background: var(--gradient-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-fonctions-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
}

@media (max-width: 720px) {
  .landing-fonctions-grille {
    grid-template-columns: 1fr;
  }
}

.landing-fonctions-note {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: rgba(103, 232, 249, 0.5);
  line-height: 1.5;
}

.landing-fonctions-bloc {
  --fn-couleur: #67e8f9;
  position: relative;
  padding: 24px 22px 26px;
  border-radius: var(--global-border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.6), rgba(3, 5, 11, 0.5));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Barre de couleur en haut du bloc */
.landing-fonctions-bloc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fn-couleur), transparent);
  opacity: 0.8;
}

.landing-fonctions-bloc--rust { --fn-couleur: #f59e0b; }
.landing-fonctions-bloc--web  { --fn-couleur: #67e8f9; }

.landing-fonctions-entete {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--fn-couleur);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.landing-fonctions-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.landing-fonctions-liste li {
  position: relative;
  padding: 7px 10px 7px 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  transition: border-color var(--transition-rapide),
              background var(--transition-rapide);
}

.landing-fonctions-liste li::before {
  content: '▸';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fn-couleur);
  font-size: 12px;
  font-weight: 700;
}

.landing-fonctions-liste li:hover {
  border-color: color-mix(in srgb, var(--fn-couleur) 35%, transparent);
  background: color-mix(in srgb, var(--fn-couleur) 6%, rgba(0, 0, 0, 0.45));
}

/* Badge "en cours de création" — jaune discret */
.landing-fonctions-wip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #facc15;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.3);
  border-radius: 5px;
  vertical-align: middle;
}

/* ==================== Photo éditeur (bas-gauche) ==================== */
/* Image grande, transparente, collée au body. Apparaît quand on scroll
   tout en bas. Le masque dégradé fait fondre le haut de l'image dans le
   fond cyberpunk. Dépasse du footer. */
.landing-me {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 320px;
  z-index: -1;
  pointer-events: none;
  /* Masque : opaque en bas, fondu vers transparent en haut */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 85%);
}
.landing-me img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.55;
  filter: contrast(1.1) saturate(0.8) brightness(0.9);
  mix-blend-mode: screen;
}

/* ==================== Footer ==================== */
.landing-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  padding: 16px 0;
}

.landing-footer a {
  color: rgba(103, 232, 249, 0.75);
  text-decoration: none;
  transition: color var(--transition-rapide);
}

.landing-footer a:hover {
  color: rgba(103, 232, 249, 1);
  text-decoration: underline;
}

/* ==================== Responsive ==================== */
@media (max-width: 560px) {
  .landing-btn { min-width: 100%; }
  .landing-streamy-bloc { margin-bottom: 8px; }
  .landing-streamy { width: 130px; }
  .landing-logo { max-width: 440px; }
  .landing-bandeau { padding: 24px 16px 28px; }
  /* Sur mobile, Streamy et OBS passent au-dessus et en-dessous du logo
     (empilement vertical) */
  .landing-logo-bloc { grid-template-columns: 1fr; gap: 12px; }
  .landing-streamy-bloc, .landing-obs-bloc { grid-column: 1; justify-self: center; }
  .landing-obs-logo { width: 100px; }
  /* Lasers plus proches des bords sur petit écran */
  .landing-laser--gauche-2, .landing-laser--droite-2 { display: none; }
  .landing-sous-titre { margin-top: -6px; }
  .landing-me { width: 180px; }
}

/* ==================== Auth (inscription / login) ==================== */
.landing-auth {
  width: 100%;
  max-width: 380px;
  margin: 8px auto 0;
  background: rgba(5, 8, 16, 0.7);
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  /* Transition fluide du border-radius pour le mode register (bords carrés) */
  transition: border-radius 0.3s ease, border-color 0.3s ease;
}

/* Mode inscription : les bords deviennent carrés (réaction visuelle au clic
   sur l'onglet "S'inscrire"). Le contour passe en violet pour différencier
   du mode connexion (cyan). */
.landing-auth--register {
  border-radius: 0;
  border-color: rgba(167, 139, 250, 0.4);
}

.landing-auth-onglets {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 4px;
  transition: border-radius 0.3s ease;
}

.landing-auth--register .landing-auth-onglets {
  border-radius: 0;
}

.landing-auth-onglet {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s, border-radius 0.3s ease;
  font-family: inherit;
}

.landing-auth--register .landing-auth-onglet {
  border-radius: 0;
}

.landing-auth-onglet:hover {
  color: rgba(255, 255, 255, 0.8);
}

.landing-auth-onglet--actif {
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.2), rgba(167, 139, 250, 0.15));
  color: #67e8f9;
  border: 1px solid rgba(103, 232, 249, 0.3);
}

/* Onglet actif en mode inscription : dégradé violet dominant */
.landing-auth--register .landing-auth-onglet--actif {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(103, 232, 249, 0.12));
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.4);
}

.landing-auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-auth-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-auth-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.landing-auth-input {
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, border-radius 0.3s ease;
}

/* Focus : fond noir cyberpunk prononcé + glow cyan + bord cyan lumineux.
   Réaction visuelle claire quand l'utilisateur clique dans l'input. */
.landing-auth-input:focus {
  outline: none;
  border-color: rgba(103, 232, 249, 0.7);
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 14px rgba(103, 232, 249, 0.25), inset 0 0 8px rgba(103, 232, 249, 0.06);
}

/* En mode inscription, le focus des inputs passe en violet (cohérence avec
   le contour violet du conteneur). */
.landing-auth--register .landing-auth-input:focus {
  border-color: rgba(167, 139, 250, 0.7);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.25), inset 0 0 8px rgba(167, 139, 250, 0.06);
}

.landing-auth--register .landing-auth-input {
  border-radius: 0;
}

.landing-auth-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.landing-auth-submit {
  width: 100%;
  margin-top: 4px;
  transition: border-radius 0.3s ease;
}

.landing-auth--register .landing-auth-submit {
  border-radius: 0;
}

.landing-auth-submit:disabled {
  opacity: 0.5;
  cursor: wait;
}

.landing-auth-message {
  font-size: 13px;
  text-align: center;
  min-height: 18px;
  margin: 0;
}

.landing-auth-message--info { color: rgba(103, 232, 249, 0.8); }
.landing-auth-message--succes { color: #4ade80; }
.landing-auth-message--erreur { color: #f87171; }

.landing-auth-connecte {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 8px auto 0;
  max-width: 380px;
}

/* ==================== Hero : présentation + login (grid 2 colonnes) ====================
   Sur desktop : accroche à gauche, formulaire de login à droite.
   Sur mobile : empilement vertical (présentation au-dessus, login en-dessous).
   Quand l'utilisateur est connecté, la présentation est masquée et le bloc
   "Ouvrir mon dashboard" prend toute la largeur (géré en JS). */
.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .landing-hero { grid-template-columns: 1fr; gap: 20px; }
}

.landing-hero-presentation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  text-align: left;
}

.landing-hero-accroche {
  font-size: 17px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0;
}

.landing-hero-cta {
  align-self: flex-start;
}

/* Bouton "OBS Studio" cliquable dans l'accroche (texte + icône curseur) —
   styles génériques (utilisables dans tout texte i18n avec la classe
   .landing-lien-obs). */
.landing-lien-obs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-weight: 700;
  color: #67e8f9;
  text-shadow: 0 0 12px rgba(103, 232, 249, 0.5);
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.12), rgba(167, 139, 250, 0.08));
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(103, 232, 249, 0.25);
  transition: all 0.2s ease;
}

.landing-lien-obs:hover {
  border-color: rgba(103, 232, 249, 0.6);
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.2), rgba(167, 139, 250, 0.14));
  box-shadow: 0 0 12px rgba(103, 232, 249, 0.25);
}

.landing-lien-obs-icone {
  width: 14px;
  height: 14px;
  fill: rgba(103, 232, 249, 0.7);
  filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.4));
  transition: fill 0.2s ease;
}

.landing-lien-obs:hover .landing-lien-obs-icone {
  fill: #67e8f9;
}

/* ==================== Section "Comment ça fonctionne avec OBS" ==================== */
.landing-obs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 28px 28px;
  border-radius: var(--global-border-radius);
  border: 1px solid rgba(103, 232, 249, 0.18);
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.55), rgba(3, 5, 11, 0.45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.landing-obs-titre {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  background: var(--gradient-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  text-align: center;
}

.landing-obs-intro {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0;
  text-align: center;
  max-width: 640px;
}

/* --- Miniatures cliquables (empilées verticalement) --- */
.landing-obs-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin: 2px auto 0;
}

.landing-obs-image {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.landing-obs-image img {
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  cursor: zoom-in;
  transition: border-color var(--transition-rapide),
              box-shadow var(--transition-rapide),
              transform var(--transition-rapide);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.landing-obs-image img:hover {
  border-color: rgba(103, 232, 249, 0.55);
  box-shadow: 0 6px 22px rgba(103, 232, 249, 0.22);
  transform: translateY(-2px);
}

.landing-obs-image figcaption {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .landing-obs-images { grid-template-columns: 1fr; max-width: 100%; }
  .landing-obs-image img { max-height: 180px; }
}

/* --- Lightbox (plein écran au clic) --- */
.landing-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.landing-lightbox.actif {
  display: flex;
}

.landing-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}

/* --- Étapes numérotées --- */
.landing-obs-etapes {
  list-style: none;
  counter-reset: obs-etape;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.landing-obs-etapes li {
  counter-increment: obs-etape;
  position: relative;
  padding: 10px 12px 10px 42px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.landing-obs-etapes li::before {
  content: counter(obs-etape);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #67e8f9;
  background: rgba(103, 232, 249, 0.14);
  border: 1px solid rgba(103, 232, 249, 0.35);
  border-radius: 50%;
}

/* Bloc "Conseil" (hors étapes) — orange foncé avec gradient texte */
.landing-obs .landing-obs-conseil {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 14px 12px 42px;
  font-family: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
  color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(234, 88, 12, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
}

/* --- Alerte importante (fusionnée, en rouge) --- */

.landing-obs .landing-obs-conseil::before {
  content: '★';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 50%;
}

/* --- Alerte importante --- */
.landing-obs-alerte {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}

.landing-obs-alerte-icone {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

/* --- Responsive --- */
@media (max-width: 560px) {
  .landing-obs { padding: 20px 16px 22px; }
  .landing-obs-titre { font-size: 19px; }
  .landing-obs-intro { font-size: 12.5px; }
  .landing-obs-etapes li { font-size: 12px; padding: 9px 10px 9px 38px; }
  .landing-obs-alerte { font-size: 12px; padding: 10px 12px; }
}

/* ==================== Deux cartes alignées (web / rust) ==================== */
.landing-cartes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.landing-cartes-titre {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  background: var(--gradient-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-cartes-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
}

@media (max-width: 720px) {
  .landing-cartes-grille {
    grid-template-columns: 1fr;
  }
}

.landing-carte {
  --carte-couleur: #67e8f9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 22px;
  border-radius: var(--global-border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.6), rgba(3, 5, 11, 0.5));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--transition-normale),
              background var(--transition-normale),
              box-shadow var(--transition-normale),
              transform var(--transition-rapide);
  overflow: hidden;
}

/* Cadre dégradé couleur de la carte au hover */
.landing-carte::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--carte-couleur), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normale);
}

.landing-carte:hover {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--carte-couleur) 8%, rgba(5, 8, 16, 0.6)), rgba(3, 5, 11, 0.5));
  box-shadow: 0 12px 36px color-mix(in srgb, var(--carte-couleur) 20%, rgba(0, 0, 0, 0.5));
  transform: translateY(-2px);
}

.landing-carte:hover::after {
  opacity: 1;
}

.landing-carte--web  { --carte-couleur: #67e8f9; }
.landing-carte--rust { --carte-couleur: #f59e0b; }

.landing-carte-icone {
  font-size: 34px;
  filter: drop-shadow(0 0 12px var(--carte-couleur));
  line-height: 1;
}

.landing-carte-titre {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.01em;
}

.landing-carte-desc {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
  margin: 0;
  text-align: center;
  min-height: 60px;
}

.landing-carte-bouton {
  width: 100%;
  margin-top: auto;
}

.landing-carte-boutons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

.landing-carte-boutons .landing-btn {
  width: 100%;
  min-width: 0;
}

.landing-carte-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.landing-carte-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.landing-carte-meta strong {
  color: rgba(245, 158, 11, 0.9);
  font-weight: 700;
}

/* ==================== Configurations minimale / optimale ==================== */
.landing-configs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.landing-configs-titre {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  background: var(--gradient-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-configs-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 720px;
}

@media (max-width: 720px) {
  .landing-configs-grille {
    grid-template-columns: 1fr;
  }
}

.landing-config {
  --config-couleur: #67e8f9;
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--global-border-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(5, 8, 16, 0.6), rgba(3, 5, 11, 0.5));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.landing-config::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--config-couleur), transparent);
  opacity: 0.7;
}

.landing-config--min { --config-couleur: #67e8f9; }
.landing-config--opt { --config-couleur: #a855f7; }

.landing-config h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--config-couleur);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.landing-config-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-config-liste li {
  position: relative;
  padding: 8px 10px 8px 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
}

.landing-config-liste li::before {
  content: '▸';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--config-couleur);
  font-size: 12px;
  font-weight: 700;
}

/* ==================== Bannière cookies / RGPD ==================== */
.landing-cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  width: calc(100% - 32px);
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, 0.22);
  background: linear-gradient(135deg, rgba(13, 20, 36, 0.96), rgba(9, 14, 28, 0.96));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(103, 232, 249, 0.06);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.landing-cookie--cache {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

.landing-cookie-texte {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin: 0;
}

.landing-cookie-bouton {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid rgba(103, 232, 249, 0.45);
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.22), rgba(167, 139, 250, 0.16));
  color: #67e8f9;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-normale),
              border-color var(--transition-normale),
              color var(--transition-normale),
              transform var(--transition-rapide);
}

.landing-cookie-bouton:hover {
  background: var(--gradient-interface);
  border-color: rgba(103, 232, 249, 0.8);
  color: var(--text-primary);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .landing-cookie {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: center;
  }
  .landing-cookie-bouton {
    width: 100%;
  }
}

/* ==================== Bouton retour en haut ==================== */
.landing-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 16, 0.7);
  border: 1px solid rgba(103, 232, 249, 0.25);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
              border-color 0.2s ease, box-shadow 0.2s ease;
  z-index: 90;
}

.landing-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.landing-top:hover {
  border-color: rgba(103, 232, 249, 0.6);
  box-shadow: 0 6px 28px rgba(103, 232, 249, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.landing-top-icone {
  width: 20px;
  height: 20px;
  fill: rgba(103, 232, 249, 0.7);
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.4));
  transition: fill 0.2s ease;
}

.landing-top:hover .landing-top-icone {
  fill: #67e8f9;
}

@media (max-width: 560px) {
  .landing-top {
    bottom: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
  }
}