/* Marque CertiLens : logo, filigrane ELS et polices de la charte (ticket V2-01, décision D-95, docs/DESIGN.md §2 et §4).
   Les couleurs, tailles et opacités viennent de static/css/tokens.css ; ce fichier ne choisit aucune couleur.
   Les fichiers de la maquette récente d'ELS (identite.css) l'emporteront sur celui-ci à leur réception ; DESIGN.md est alors corrigé. */

/* ---------------------------------------------------------------------------------------------- Police Kollektif (titres, chiffres clés)
   Kollektif, police d'ELS Formations, n'est pas encore fournie (licence à vérifier) : les titres retombent sur Inter (jeton --font-display).
   Pour l'installer : déposer Kollektif-Regular.woff2 et Kollektif-Bold.woff2 dans static/fonts/ avec leur licence
   (static/fonts/kollektif.LICENSE), puis ajouter ici deux règles @font-face (famille « Kollektif », graisses 400 et 700,
   font-display: swap, source : le fichier woff2 correspondant sous /static/fonts/), sur le modèle de celles d'Inter dans tokens.css.
   Aucune adresse de fichier absent ne doit figurer dans ce fichier, même en commentaire : le stockage des fichiers statiques
   de production (WhiteNoise, manifeste) lit toutes les adresses url() et refuse le déploiement si un fichier manque. */

/* ---------------------------------------------------------------------------------------------- Logo
   Deux variantes : static/img/logo-clair.svg (fond clair, SVG officiel reçu le 28 octobre 2026) et static/img/logo-sombre.svg (fond sombre, variante
   dérivée validée par Guillaume Soulet, à remplacer sous le même nom par la variante officielle du graphiste). Couleurs en attributs, sans <style> ni script.
   Proportions du logo : 632,86 × 127,58 (environ 4,96:1) ; les emplacements (--logo-width, --logo-height) les suivent et « contain » n'étire jamais.
   Le logo est un fond CSS : le nom « CertiLens » reste dans le texte lu par les lecteurs d'écran (composants entete-espace et entete-public).
   Il dépend du thème seul, jamais de la préférence « Couleurs adaptées » (V2-69). */
.cl-brand-logo {
  display: inline-block;
  flex-shrink: 0;
  width: var(--logo-width);
  height: var(--logo-height);
  background: url("/static/img/logo-clair.0b5b364c7d34.svg") no-repeat left center / contain;
}
.cl-brand-logo-public {
  width: var(--logo-width-public);
  height: var(--logo-height-public);
}
/* Espace connecté, écran étroit (390 px) : le bouton « Menu », le logo, la cloche et le menu du compte tiennent sur une ligne. Le logo peut alors
   rétrécir en largeur sous 154 px ; « contain » réduit le dessin entier à hauteur proportionnelle : jamais étiré, jamais coupé ni recouvert. */
.cl-topbar-debut { min-width: 0; }
.cl-topbar-debut .cl-brand { flex-shrink: 1; min-width: 0; }
.cl-topbar-debut .cl-brand-logo { flex-shrink: 1; min-width: 0; max-width: 100%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cl-brand-logo { background-image: url("/static/img/logo-sombre.b77251ae038a.svg"); }
}
:root[data-theme="dark"] .cl-brand-logo, [data-theme="dark"] .cl-brand-logo { background-image: url("/static/img/logo-sombre.b77251ae038a.svg"); }

/* ---------------------------------------------------------------------------------------------- Filigrane ELS
   Carreau d'Einstein (le « chapeau » du logo ELS) : le polygone à 13 sommets du SVG officiel (static/img/els-clair.svg), ramené en pourcentages
   de sa boîte (186,11 × 127,02), découpe un bloc de la teinte d'accent.
   En bas à droite, fixe, derrière le contenu ; opacité 3,5 % en clair et 6 % en sombre (--watermark-opacity) ; jamais devant du texte.
   Masqué à l'impression et en contraste forcé. */
.cl-shell::before {
  content: "";
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: -1;
  width: var(--watermark-size);
  aspect-ratio: 186.11 / 127.02;
  background: var(--color-accent);
  opacity: var(--watermark-opacity);
  clip-path: polygon(17.39% 27.65%, 17.71% 58.9%, 0% 74.85%, 9.69% 100%, 52.54% 99.48%, 63.15% 70.66%, 83.05% 86.38%, 100% 72.11%, 90.29% 46.14%, 67.64% 46.63%, 67.3% 13.45%, 49.6% 0%, 38.73% 27.18%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------------------------- Impression : thème clair, sans menu ni filigrane */
@media print {
  .cl-shell::before { display: none; }
  .cl-brand-logo,
  :root:not([data-theme="light"]) .cl-brand-logo,
  :root[data-theme="dark"] .cl-brand-logo,
  [data-theme="dark"] .cl-brand-logo { background-image: url("/static/img/logo-clair.0b5b364c7d34.svg"); }
}

/* ---------------------------------------------------------------------------------------------- Contraste forcé (forced-colors)
   Les éléments décoratifs disparaissent ; la marque garde ses couleurs ; l'entrée de menu active reçoit un contour (voir aussi app.css).
   Le fond imposé par le système (Canvas) peut contredire le thème choisi dans CertiLens : la variante du logo suit alors la clarté du thème
   du système (prefers-color-scheme), pour rester visible (logo bleu nuit sur fond clair, logo blanc sur fond sombre). */
@media (forced-colors: active) {
  .cl-shell::before { display: none; }
  .cl-brand-logo { forced-color-adjust: none; }
  .cl-brand-logo,
  :root:not([data-theme="light"]) .cl-brand-logo,
  :root[data-theme="dark"] .cl-brand-logo,
  [data-theme="dark"] .cl-brand-logo { background-image: url("/static/img/logo-clair.0b5b364c7d34.svg"); }
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .cl-brand-logo,
  :root:not([data-theme="light"]) .cl-brand-logo,
  :root[data-theme="dark"] .cl-brand-logo,
  [data-theme="dark"] .cl-brand-logo { background-image: url("/static/img/logo-sombre.b77251ae038a.svg"); }
}