/* ==========================================================================
   Meet aux couleurs de l'Université du Nous
   --------------------------------------------------------------------------
   Cette feuille est INJECTÉE par le nginx du frontend (sub_filter, juste avant
   </head>) : aucun fichier de l'image `lasuite/meet-frontend` n'est remplacé.
   Elle ne fait que surcharger des variables. Pour tout retirer, il suffit de
   commenter la directive sub_filter dans default.conf.template.

   Pourquoi ça marche : le bundle déclare ses jetons sur `:where(:root,:host)`,
   dont la spécificité est NULLE. Un simple `:root` les surcharge donc, et notre
   feuille étant chargée après la sienne, elle gagne à coup sûr.

   Source de la charte : https://universite-du-nous.org (thème du site).
     bleu de marque   #009de5
     gris-bleu        #658791
     vert             #9cc264
     police           Poppins

   ACCESSIBILITÉ — où va le bleu de marque, et où il ne va pas :
   #009de5 ne donne que 3,0:1 sur blanc. C'est assez pour un aplat ou un
   contour, pas pour du texte (WCAG AA demande 4,5:1).

   - Les FONDS de boutons portent le vrai bleu de marque — décision du user le
     2026-08-14, en connaissance du contraste : le libellé blanc posé dessus
     est à 3,0:1, soit le seuil AA du « texte large » seulement. Voir la
     section dédiée en bas de fichier.
   - Le TEXTE en bleu (liens, libellés, bordures actives) reste en #01669e
     (6,2:1) : là, le bleu de marque serait franchement illisible.
   ========================================================================== */

@import url("/branding/poppins.css");

:root {
  /* --- échelle dérivée du bleu de marque ------------------------------- */
  --colors-primary-50:  #f0f9ff;
  --colors-primary-100: #e0f3fe;
  --colors-primary-200: #bae7fd;
  --colors-primary-300: #7dd5fc;
  --colors-primary-400: #38c0f8;
  --colors-primary-500: #009de5;   /* la couleur de l'UdN, telle quelle */
  --colors-primary-600: #0080c4;
  --colors-primary-700: #01669e;   /* 6,2:1 sur blanc — le ton du texte */
  --colors-primary-800: #075985;
  --colors-primary-900: #0c4a6e;
  --colors-primary-950: #082f49;

  /* --- jetons sémantiques ----------------------------------------------
     Dans le bundle ils pointent vers --colors-blue-*, une palette générique
     qui sert aussi ailleurs. On les redéfinit directement plutôt que de
     repeindre tout le bleu de l'application. */
  --colors-primary:              #01669e;
  --colors-primary-hover:        #075985;
  --colors-primary-active:       #0c4a6e;
  --colors-primary-subtle:       #e0f3fe;
  --colors-primary-subtle-text:  #01669e;
  --colors-primary-warm:         #7dd5fc;
  --colors-primary-text:         #ffffff;
  /* Fond des boutons principaux au survol et à l'appui (le repos est traité
     plus bas, avec le reste des boutons). Un cran plus foncé que le repos :
     c'est ce qui rend l'interaction visible. */
  --colors-primary-action:       #0080c4;

  /* --- thème sombre -----------------------------------------------------
     Échelle inversée dans le bundle : 50 = le plus sombre, 950 = le plus
     clair. On garde cette logique. */
  --colors-primary-dark-50:   #0a1620;
  --colors-primary-dark-75:   #0e1e2b;
  --colors-primary-dark-100:  #12283a;
  --colors-primary-dark-200:  #1a3b53;
  --colors-primary-dark-300:  #22506f;
  --colors-primary-dark-400:  #2c6a92;
  --colors-primary-dark-500:  #3a88b8;
  --colors-primary-dark-600:  #55a5d3;
  --colors-primary-dark-700:  #7cc0e4;
  --colors-primary-dark-800:  #a8d7ef;
  --colors-primary-dark-900:  #d0eaf8;
  --colors-primary-dark-950:  #eef8fd;
  --colors-primary-dark-action: #8ccbe8;

  /* --- typographie ------------------------------------------------------
     `:root` et non `:root:root` : les choix d'accessibilité du bundle sont
     portés par `html.font-lexend`, `html.font-atkinson-hyperlegible` et
     `html.font-opendyslexic` (spécificité 0,1,1). Ils doivent continuer de
     l'emporter sur notre valeur par défaut (0,1,0) — c'est la raison d'être
     de ces réglages, ne pas les écraser avec une spécificité plus forte. */
  --fonts-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Le halo de focus : ici le bleu de marque est à sa place, c'est un contour
   décoratif posé sur un élément déjà lisible par ailleurs. */
:root {
  --colors-focus-ring: #009de5;
}

*:focus-visible {
  outline: 2px solid #009de5;
  outline-offset: 2px;
}

/* ==========================================================================
   Les boutons portent le vrai bleu de marque
   --------------------------------------------------------------------------
   Demandé par le user le 2026-08-14, contraste assumé : le libellé blanc sur
   #009de5 est à 3,0:1. C'est conforme AA pour du « texte large » (≥ 18,7 px
   gras ou 24 px) et en dessous du seuil pour du texte courant. Les libellés de
   boutons de Meet sont plus petits que ça : c'est un choix de charte, pas une
   conformité.

   Si le rendu est jugé trop pâle à l'usage, la sortie sans rien perdre du bleu
   est de foncer le LIBELLÉ plutôt que le fond : `--colors-primary-text:
   #052a3c` donne 5,0:1 sur ce même #009de5, donc AA plein, sans toucher à la
   couleur des boutons.

   Pourquoi des règles de classe et non `--colors-primary` : ce jeton sert
   aussi de couleur de TEXTE (`.c_primary`) et de bordure d'élément
   sélectionné. Le repeindre en bleu de marque rendrait ces libellés illisibles
   (3,0:1 sur fond blanc). On ne teinte donc que les fonds.
   ========================================================================== */

/* Bouton principal au repos (« Créer une réunion », « Rejoindre »…).
   Une seule classe, volontairement : la règle du survol
   (`[data-hovered]:bg-c_primary.action`) vaut deux crans de spécificité et doit
   continuer de l'emporter. Doubler le sélecteur ici figerait les boutons dans
   leur couleur de repos, survol compris. */
.bg-c_primary {
  background-color: #009de5;
}

/* Dans la salle, LiveKit passe par ses propres jetons : boutons de barre
   activés (micro, caméra, partage) et pastille de messages non lus.

   Sélecteur doublé, là oui : `Room-*.css` est chargé par la SPA au moment
   d'entrer en salle, donc APRÈS notre feuille, et il redéfinit `--lk-accent-bg`
   sur `[data-lk-theme=default]`. À spécificité égale, le dernier arrivé
   gagnerait ; deux crans nous mettent à l'abri de l'ordre de chargement. */
[data-lk-theme][data-lk-theme] {
  --lk-accent-bg: #009de5;
  --lk-accent2:   #0080c4;   /* survol */
  --lk-accent3:   #01669e;   /* appui  */
  --lk-accent4:   #01669e;
}