@charset "utf-8";
/* ============================================================
   DESIGN V5 — PONT ET BASE (STATION, iso 1 UNIQUEMENT)
   ------------------------------------------------------------
   Ce que v5-tokens.css ne peut pas porter, parce que ça CHANGE l'apparence :
   la redéfinition des variables historiques, la typographie Poppins imposée à
   tout le document, le fond de page et les halos.

   Les jetons, eux, sont chargés pour tous les espaces — ils sont devenus le
   vocabulaire des feuilles partagées. Voir l'en-tête de v5-tokens.css.
   ============================================================ */

/* ---------- 1. Le pont vers les variables historiques ---------- */

:root {
    --color--principal: var(--accent);
    --color--principal--hover: var(--accent);
    /* DU BLANC FRANC, ET PAS `--on-accent`. Le nom promet « l'encre sur la
       couleur principale », mais dans ce dépôt la variable sert AUSSI sur des
       fonds de rail, toujours sombres : l'en-tête de semaine du planning v1, par
       exemple. `--on-accent` bascule sur une encre sombre en thème sombre, et
       ces trois cas-là devenaient noir sur navy — illisibles, constaté sur
       /planning.
       Le blanc, lui, est juste sur un rail dans les deux thèmes, et acceptable
       sur l'accent clair. Les deux règles qui le posent VRAIMENT sur un fond
       d'accent (common.css .td_button, planning.css .selector_date .current)
       utilisent `--on-accent` directement. */
    --color--principal--text: #FFFFFF;
    --color--accent: var(--accent);

    --color--inactive: var(--text-dim);
    --color--text: var(--text);
    --color--blue--dark: var(--text);

    --color--background--principal: var(--bg);
    --color--background--second: var(--surface);
    --color--background--third: var(--surface2);

    --color--background--block--left: var(--rail);
    --color--block--left--text: var(--on-rail);
    --color--block--left--text--80: var(--on-rail-mid);
    --color--background--block--left--hover: rgba(255, 255, 255, .07);

    --color--border--bottom--block--top--menu: var(--line);
    --color--principal--block--top: var(--text);
    --color--principal--block--top--hover: var(--accent);
    --color--background--block--top--menu--bottom: var(--surface2);

    --dimen--border--radius--input: var(--radius-field);
    --color--background--input: var(--surface2);
    --color--input--text: var(--text);
    --color--input--text--second: var(--text-mid);
    --dimen--min--height--input: 38px;
}

/* `--color--blue--dark` servait à la fois de couleur de texte foncée ET de
   fond de bandeau sombre. En sombre, le texte doit s'éclaircir mais le
   bandeau doit rester sombre : le pont ci-dessus couvre le cas « texte »,
   qui est l'écrasante majorité des 39 usages. Les quelques bandeaux sont
   repris à la main dans leur feuille (phase 5). */

/* ---------- 2. Base ---------- */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

/* LA POLICE NE S'HÉRITE PAS ICI. common.css pose `* { font-family: "Open
   Sans" }` : le sélecteur universel touche chaque élément, donc poser Poppins
   sur `body` ne descend nulle part. Il faut un sélecteur qui le batte.

   LA FORME COMPTE AUTANT QUE LA LISTE. Enchaîner les `:not()` les ADDITIONNE :
   `*:not(i):not(code):not(pre):not(.fa):not(.fas):not(.fal):not(.far):not(.fab)`
   pèse (0,5,3) — il écrase alors toute règle de page qui pose sa propre police
   avec moins de six classes, y compris les chasses fixes voulues. La forme en
   LISTE ne prend que la spécificité de son argument le plus fort, ici une
   classe : (0,1,0). Juste ce qu'il faut pour battre `*`, et pas plus.

   Les <i> et les classes Font Awesome sont exclus : leur famille EST le jeu
   d'icônes. `code` et `pre` aussi — common.css leur donne une chasse fixe,
   et c'est voulu. */
*:not(i, code, pre, .fa, .fas, .fal, .far, .fab, .fad) {
    font-family: var(--font);
}

/* Tout chiffre aligné en colonne (charte). */
td, th, .tabular, [data-tabular] {
    font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- 3. Halos de haut de page ---------- */
/* La charte pose deux halos flous en haut de la colonne de contenu ; ils ne se
   voient qu'en sombre (`--glow`/`--glow2` valent `transparent` en clair).

   Le calque est posé par template.php, enfant direct de <body>, sur TOUTES les
   pages chrome_v2. Il est FIXE et non absolu : l'en-tête (.block_top) et le
   contenu (.block_right) sont deux boîtes distinctes, et .block_right est son
   propre conteneur de défilement — un calque posé dedans serait coupé par son
   `overflow` et ne passerait jamais sous l'en-tête, où la maquette le montre.
   Il démarre au bord gauche de la colonne (après le rail et, sur les pages
   projet, le second menu) : c'est de là que la maquette mesure ses 260 px.

   z-index -1 : peint au-dessus du fond de <body>, SOUS tout le contenu en
   flux (à 0 il passerait devant les cartes non positionnées). D'où aussi le
   fond transparent de .block_right (v5-shell.css §5) : opaque, il le masque.

   `isolation` sur <body> : <html> porte AUSSI un fond, donc celui de <body> ne
   remonte pas au canevas et se peint comme un bloc ordinaire — AU-DESSUS des
   z-index négatifs du contexte racine. Le halo disparaissait sous lui. Faire de
   <body> son propre contexte d'empilement peint son fond en premier, puis le
   halo. `isolation` plutôt que position+z-index : il ne change pas le bloc
   conteneur des éléments en position absolue accrochés à <body>. */

body.chrome_v2 {
    isolation: isolate;
}

.v5_glow {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--dimen--margin--left--block--right, 0);
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.v5_glow::before,
.v5_glow::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.v5_glow::before {
    top: -210px; left: 260px;
    width: 840px; height: 490px;
    background: var(--glow);
    filter: blur(130px);
}
.v5_glow::after {
    top: -180px; right: -120px;
    width: 620px; height: 420px;
    background: var(--glow2);
    filter: blur(150px);
}