/* ============================================================
   Charte de la plateforme — LE fichier de design.
   Interface neutre et professionnelle, commune à toutes les marques
   (Lyla Signes, Loovya…). Ce qui change d'un webinaire à l'autre —
   logo, couleur d'accentuation, présentatrice — se règle dans la
   configuration du webinaire : la page spectateur remplace --accent
   par la couleur choisie, et les teintes dérivées suivent.
   S'applique aux écrans : index.html, backoffice.html,
   configuration.html, regie.html.
   ============================================================ */

:root {
  /* --- Neutres --- */
  --fond: #f4f5f7;
  --carte: #ffffff;
  --surface2: #f3f4f6;
  --texte: #14171f;
  --marine: #14171f;          /* titres (nom historique) */
  --texte-moyen: #3b414c;
  --texte-doux: #5d6470;
  --bordure: #e3e5e9;
  --champ-bord: #d0d4da;
  --placeholder: #9aa0a8;

  /* --- Accent : couleur de la marque du webinaire (par défaut, Lyla Signes) --- */
  --accent: #2f7a74;
  --accent-fonce: color-mix(in srgb, var(--accent) 82%, #000000);
  --accent-clair: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --accent-pale: color-mix(in srgb, var(--accent) 12%, #ffffff);
  --accent-voile: color-mix(in srgb, var(--accent) 6%, #ffffff);
  --accent-texte: #ffffff;

  /* --- États --- */
  --live: #d93025;
  --dore: #b7791f;            /* avertissements, bandeau technique */
  --dore-pale: #fdf6e7;
  --dore-bord: #f1dfb5;
  --dore-texte: #7a4f0e;
  --brun: #3b414c;            /* prénoms (nom historique) */
  --succes: #1e8e5a;
  --erreur: #c5221f;

  /* --- Sémantique des outils internes --- */
  --vert: #1e8e5a;
  --rouge: #c5221f;
  --or: #b7791f;

  /* --- Formes --- */
  --rayon: 8px;
  --rayon-petit: 6px;
  --pilule: 6px;

  /* --- Typographie : une seule police, lisible et neutre --- */
  --titres: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --petites: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Ombres --- */
  --ombre: 0 1px 3px rgba(16, 24, 40, .06);
  --ombre-bouton: none;
  --halo: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Outils internes (backoffice, configuration) : fond légèrement plus
   soutenu pour que les cartes blanches se détachent sans ombre. */
body.interne {
  --fond: #f4f5f7;
  --bordure: #e3e5e9;
}

/* Régie présentateur : mêmes couleurs claires que les autres écrans.
   Seule la taille de texte est plus grande, l'écran étant lu de loin. */
body.regie {
  --fond: #f4f5f7;
  --bordure: #e3e5e9;
  --taille: 20px;
}