/* =============================================================================
   theme.css — palette unique du portail, en deux versions.
   =============================================================================

   POURQUOI CE FICHIER
   Chaque page du portail portait sa propre palette en dur dans son <style>.
   Le meme #64748b etait recopie dans huit pages : impossible de basculer en
   sombre sans les rouvrir une par une. Ce fichier centralise les valeurs ;
   les pages n'y font plus que reference.

   COMMENT L'UTILISER
   Dans une page, ne jamais reecrire une couleur en dur. Soit on appelle
   directement un token :

       .ma-carte { background: var(--cn-surface); color: var(--cn-ink); }

   soit — cas des pages qui avaient deja leurs propres variables — on branche
   le nom local sur le token partage, une fois pour toutes, dans son :root :

       :root { --bg-card: var(--cn-surface); --text-main: var(--cn-ink); }

   La seconde forme est celle retenue pour les pages existantes : le nom local
   garde son sens local (dans admin_config, --primary designe l'encre du texte,
   pas l'indigo) et le basculement se joue ici, a un seul endroit.

   REGLE DE NOMMAGE
   Le suffixe dit l'intensite dans le sens du mode CLAIR, pas la clarte reelle.
   --cn-ink est l'encre, --cn-surface le papier : en sombre les deux valeurs
   s'echangent, le nom lui ne bouge pas. C'est ce qui permet de relire une
   regle sans savoir quel theme est actif.

   AJOUTER UNE COULEUR
   Deux valeurs obligatoires : une dans :root, une dans [data-theme="dark"].
   Un token defini d'un seul cote est un bug silencieux — il gardera sa valeur
   claire en sombre, et on ne le verra que sur la page concernee.

   Les valeurs claires ci-dessous sont exactement celles qui etaient en dur
   dans les pages avant la bascule : en mode clair, le portail est inchange.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   MODE CLAIR — valeurs historiques du portail (famille Tailwind slate/indigo)
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* --- Fonds ------------------------------------------------------------ */
    --cn-bg-app: #f1f5f9;        /* fond de page, le plus courant           */
    --cn-bg-app-2: #f8fafc;      /* fond de page des pages plus claires     */
    --cn-surface: #ffffff;       /* carte, panneau, modale                  */
    --cn-surface-2: #f8fafc;     /* bandeau discret : en-tete de tableau    */
    --cn-surface-3: #f1f5f9;     /* survol de ligne, bouton au repos        */
    --cn-surface-4: #e2e8f0;     /* pastille, fond du selecteur de langue   */

    /* --- Bordures --------------------------------------------------------- */
    --cn-border: #e2e8f0;        /* trait par defaut                        */
    --cn-border-2: #cbd5e1;      /* trait appuye, survol de carte           */
    --cn-border-3: #334155;      /* trait tres appuye (schemas, cadres)     */

    /* --- Encres ----------------------------------------------------------- */
    --cn-ink-strong: #0f172a;    /* titres                                  */
    --cn-ink: #1e293b;           /* texte courant                           */
    --cn-ink-2: #334155;         /* texte appuye                            */
    --cn-ink-3: #475569;         /* texte secondaire                        */
    --cn-ink-muted: #64748b;     /* legende, libelle de champ               */
    --cn-ink-faint: #94a3b8;     /* mention discrete, texte desactive       */
    --cn-ink-ghost: #cbd5e1;     /* cellule vide, etoile eteinte, point neutre */
    --cn-on-accent: #ffffff;     /* texte pose sur un fond colore           */

    /* --- Indigo : couleur d'action du portail ----------------------------- */
    --cn-primary: #4f46e5;
    --cn-primary-hover: #4338ca;
    --cn-primary-ink: #3730a3;   /* indigo lisible comme texte              */
    --cn-primary-ink-2: #312e81;
    --cn-primary-bg: #eef2ff;    /* fond indigo tres pale                   */
    --cn-primary-bg-2: #e0e7ff;
    --cn-primary-bd: #c7d2fe;
    --cn-primary-soft: #a5b4fc;
    --cn-indigo-500: #6366f1;

    /* --- Vert : conforme, disponible, gagnant ----------------------------- */
    --cn-success: #166534;       /* vert sombre, employe comme texte        */
    --cn-success-2: #15803d;
    --cn-success-3: #16a34a;
    --cn-success-accent: #10b981;/* liseres et pastilles                    */
    --cn-success-4: #059669;
    --cn-success-5: #22c55e;
    --cn-success-soft: #86efac;
    --cn-success-bg: #f0fdf4;
    --cn-success-bg-2: #dcfce7;
    --cn-success-bd: #bbf7d0;
    --cn-lime-ink: #3f6212;

    /* --- Rouge : panne, urgence, suppression ------------------------------ */
    --cn-danger: #ef4444;
    --cn-danger-2: #dc2626;
    --cn-danger-soft: #f87171;
    --cn-danger-ink: #b91c1c;    /* rouge lisible comme texte               */
    --cn-danger-ink-2: #7f1d1d;
    --cn-danger-ink-3: #991b1b;
    --cn-danger-bg: #fef2f2;
    --cn-danger-bg-2: #fee2e2;
    --cn-danger-bd: #fecaca;
    --cn-danger-bd-2: #fca5a5;
    --cn-rose: #f43f5e;
    --cn-rose-soft: #fb7185;

    /* --- Ambre et orange : alerte, attente, marge -------------------------- */
    --cn-warning: #f59e0b;
    --cn-warning-2: #d97706;
    --cn-warning-ink: #a16207;
    --cn-warning-ink-2: #854f0b;
    --cn-warning-ink-3: #92400e;
    --cn-warning-ink-4: #7c2d12;
    --cn-warning-bg: #fff7ed;
    --cn-warning-bg-2: #fef3c7;
    --cn-warning-bg-3: #ffedd5;
    --cn-warning-bd: #fed7aa;
    --cn-warning-bd-2: #fdba74;
    --cn-amber-soft: #fcd34d;
    --cn-amber-500: #fbbf24;
    --cn-yellow: #fde047;
    --cn-yellow-ink: #ca8a04;
    --cn-orange: #ea580c;
    --cn-orange-2: #c2410c;
    --cn-orange-3: #9a3412;
    --cn-orange-4: #f97316;

    /* --- Bleu et cyan : information, mesure -------------------------------- */
    --cn-info: #0ea5e9;
    --cn-info-2: #0284c7;
    --cn-info-ink: #0369a1;
    --cn-info-bg: #eff6ff;
    --cn-info-bg-2: #e0f2fe;
    --cn-info-bg-3: #dbeafe;
    --cn-info-bd: #bfdbfe;
    --cn-info-bd-2: #bae6fd;
    --cn-blue: #3b82f6;
    --cn-blue-2: #2563eb;
    --cn-blue-ink: #1e40af;
    --cn-sky: #38bdf8;
    --cn-cyan: #22d3ee;
    --cn-cyan-2: #0891b2;
    --cn-cyan-3: #0e7490;

    /* --- Violet ----------------------------------------------------------- */
    --cn-purple: #8b5cf6;
    --cn-violet: #7c3aed;
    --cn-fuchsia: #a855f7;
    --cn-purple-bg: #faf5ff;
    --cn-purple-bd: #d8b4fe;

    /* --- Odoo : couleur maison de l'ERP ----------------------------------- */
    --cn-odoo: #714b67;
    --cn-odoo-hover: #5a3c52;
    --cn-odoo-bg: #fdf4ff;

    /* --- Teintes tres pales, employees comme aplats ----------------------- */
    --cn-tint-indigo: #fafaff;
    --cn-tint-indigo-2: #f0f0ff;
    --cn-tint-green: #f7fdf9;
    --cn-tint-amber: #fffbeb;
    --cn-tint-ivory: #fffff0;
    --cn-tint-yellow: #fef9c3;
    --cn-neutral-300: #d1d5db;
    --cn-border-soft: #eef2f6;

    /* --- Ascenseurs ------------------------------------------------------- */
    --cn-scroll-track: #f1f1f1;
    --cn-scroll-thumb: #c7c7c7;
    --cn-scroll-thumb-hover: #a0a0a0;

    /* --- Ombres -----------------------------------------------------------
       .04 et non .08 : c'est la valeur qu'avait --ombre dans assistant.css,
       seul appelant de ce token en mode clair. Le garder identique evite de
       modifier le rendu clair pour une ombre a peine visible. */
    --cn-shadow-sm: 0 1px 3px rgba(15, 23, 42, .04);
    --cn-shadow: 0 4px 6px -1px rgba(15, 23, 42, .07);
    --cn-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .12);
    --cn-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .14);

    /* --- Schemas techniques (calculateur projection) ---------------------- */
    /* Ces vues ont un fond noir dans les deux themes : c'est une simulation
       de faisceau, l'inverser fausserait la lecture. Seuls les traits et les
       cotes suivent le theme. */
    --cn-stage-bg: #000000;
    --cn-diagram-surface: #ffffff;  /* corps du projecteur dans le plan SVG */

    /* --- Boutons neutres --------------------------------------------------
       Le « Retour » gris presente sur presque toutes les pages. */
    --cn-btn-neutral: #64748b;
    --cn-btn-neutral-hover: #475569;
}

/* -----------------------------------------------------------------------------
   CE QUI NE PASSE PAS PAR LES TOKENS, ET POURQUOI

   Plusieurs composants du portail etaient deja sombres bien avant ce dark
   mode : la visionneuse du calculateur de projection, la vue du rack audio,
   l'infobulle du helpdesk, le fond de la page de connexion, les canvas de
   simulation de faisceau et de mire. Ce sont des instruments — le noir y sert
   la lecture, il n'est pas une preference d'affichage.

   Leurs couleurs sont restees ecrites en dur dans les pages, volontairement.
   Un token n'a de raison d'etre que si ses deux valeurs different ; en
   inventer un pour un element qui ne bascule pas ajoute du bruit et laisse
   croire a une bascule qui n'existe pas. Pire, les faire suivre le theme
   produirait l'inverse de l'effet attendu : un fond qui s'eclaircit au moment
   ou l'on passe la page en sombre.

   Si vous cherchez pourquoi .viewer ou #tip ne changent pas de couleur : c'est
   ici, et c'est voulu.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   MODE SOMBRE — rampe bleu nuit
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* --- Fonds ------------------------------------------------------------ */
    /* Ecart volontaire entre bg-app et surface : sans lui les cartes se
       fondent dans la page et la hierarchie visuelle disparait. */
    --cn-bg-app: #0b1220;
    --cn-bg-app-2: #0e1524;
    --cn-surface: #151e2e;
    --cn-surface-2: #1b2536;
    --cn-surface-3: #212c40;
    --cn-surface-4: #29354b;

    /* --- Bordures --------------------------------------------------------- */
    --cn-border: #2b364c;
    --cn-border-2: #3a4760;
    --cn-border-3: #46536e;

    /* --- Encres ----------------------------------------------------------- */
    /* Jamais de blanc pur sur fond sombre : le halo fatigue a la lecture. */
    --cn-ink-strong: #f2f6fb;
    --cn-ink: #e4ebf5;
    --cn-ink-2: #c9d4e3;
    --cn-ink-3: #b0bdd1;
    --cn-ink-muted: #91a0b6;
    --cn-ink-faint: #7b8aa1;
    --cn-ink-ghost: #566579;
    --cn-on-accent: #ffffff;     /* pose sur un aplat colore, reste blanc   */

    /* --- Indigo ----------------------------------------------------------- */
    /* L'indigo 600 du mode clair tombe a 2,6:1 sur ce fond : il faut monter
       dans la rampe pour rester lisible. Le survol s'eclaircit au lieu de
       s'assombrir, sinon il recule au lieu de repondre. */
    --cn-primary: #7f88f7;
    --cn-primary-hover: #9aa1fa;
    --cn-primary-ink: #c3c8fe;
    --cn-primary-ink-2: #cdd1fe;
    --cn-primary-bg: #1d2340;
    --cn-primary-bg-2: #262d4f;
    --cn-primary-bd: #3b4576;
    --cn-primary-soft: #8b96f0;
    --cn-indigo-500: #8289f6;

    /* --- Vert ------------------------------------------------------------- */
    --cn-success: #5ed19a;
    --cn-success-2: #4ec98d;
    --cn-success-3: #35c07d;
    --cn-success-accent: #2dd4a0;
    --cn-success-4: #21c496;
    --cn-success-5: #3ed07a;
    --cn-success-soft: #6ddc9c;
    --cn-success-bg: #0f2a1e;
    --cn-success-bg-2: #143521;
    --cn-success-bd: #245f3d;
    --cn-lime-ink: #a3e635;

    /* --- Rouge ------------------------------------------------------------ */
    --cn-danger: #f87171;
    --cn-danger-2: #f26060;
    --cn-danger-soft: #fca5a5;
    --cn-danger-ink: #fca5a5;
    --cn-danger-ink-2: #fdc9c9;
    --cn-danger-ink-3: #fcb4b4;
    --cn-danger-bg: #2b1417;
    --cn-danger-bg-2: #37181d;
    --cn-danger-bd: #5b2429;
    --cn-danger-bd-2: #7b3037;
    --cn-rose: #fb7185;
    --cn-rose-soft: #fda4af;

    /* --- Ambre et orange -------------------------------------------------- */
    --cn-warning: #fbbf24;
    --cn-warning-2: #f0a92a;
    --cn-warning-ink: #fcd34d;
    --cn-warning-ink-2: #f8d57e;
    --cn-warning-ink-3: #fbbf24;
    --cn-warning-ink-4: #fdba74;
    --cn-warning-bg: #2c1f10;
    --cn-warning-bg-2: #322614;
    --cn-warning-bg-3: #33230f;
    --cn-warning-bd: #6b4519;
    --cn-warning-bd-2: #855425;
    --cn-amber-soft: #fcd34d;
    --cn-amber-500: #fbbf24;
    --cn-yellow: #fde047;
    --cn-yellow-ink: #eab308;
    --cn-orange: #fb8b3c;
    --cn-orange-2: #fb9e5c;
    --cn-orange-3: #fdba74;
    --cn-orange-4: #fb923c;

    /* --- Bleu et cyan ----------------------------------------------------- */
    --cn-info: #38bdf8;
    --cn-info-2: #38bdf8;
    --cn-info-ink: #7dd3fc;
    --cn-info-bg: #0f2132;
    --cn-info-bg-2: #10273a;
    --cn-info-bg-3: #142c45;
    --cn-info-bd: #24486a;
    --cn-info-bd-2: #1f5578;
    --cn-blue: #60a5fa;
    --cn-blue-2: #4f8ff7;
    --cn-blue-ink: #93b4fd;
    --cn-sky: #38bdf8;
    --cn-cyan: #22d3ee;
    --cn-cyan-2: #22b8d4;
    --cn-cyan-3: #1ba0bd;

    /* --- Violet ----------------------------------------------------------- */
    --cn-purple: #a78bfa;
    --cn-violet: #9061f9;
    --cn-fuchsia: #b975f9;
    --cn-purple-bg: #241a33;
    --cn-purple-bd: #4a3570;

    /* --- Odoo ------------------------------------------------------------- */
    --cn-odoo: #a8749a;
    --cn-odoo-hover: #8d5f80;
    --cn-odoo-bg: #2a1a2b;

    /* --- Teintes pales : deviennent des aplats sombres teintes ------------ */
    --cn-tint-indigo: #171e33;
    --cn-tint-indigo-2: #1a2038;
    --cn-tint-green: #10261d;
    --cn-tint-amber: #241c0e;
    --cn-tint-ivory: #21200f;
    --cn-tint-yellow: #2a2712;
    --cn-neutral-300: #3a4760;
    --cn-border-soft: #232e42;

    /* --- Ascenseurs ------------------------------------------------------- */
    --cn-scroll-track: #131c2b;
    --cn-scroll-thumb: #364358;
    --cn-scroll-thumb-hover: #46566f;

    /* --- Ombres ----------------------------------------------------------- */
    /* Une ombre grise ne se voit pas sur du bleu nuit : on descend au noir
       et on monte l'opacite. */
    --cn-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --cn-shadow: 0 4px 8px -1px rgba(0, 0, 0, .5);
    --cn-shadow-lg: 0 10px 18px -3px rgba(0, 0, 0, .55);
    --cn-shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, .6);

    /* --- Schemas techniques ----------------------------------------------- */
    --cn-stage-bg: #000000;
    --cn-diagram-surface: #1b2536;

    /* --- Boutons neutres -------------------------------------------------- */
    --cn-btn-neutral: #475b78;
    --cn-btn-neutral-hover: #56698c;
}

/* =============================================================================
   RENFORTS DU MODE SOMBRE
   Ce que les tokens seuls ne peuvent pas atteindre : rendus natifs du
   navigateur et elements dont la couleur ne vient d'aucune regle du portail.
   ========================================================================== */

/* --- Champs de saisie ------------------------------------------------------
   Beaucoup de champs du portail ne declarent qu'une bordure. Leur fond venait
   du navigateur, donc blanc. color-scheme le corrige deja pour les widgets
   natifs, mais pas pour un input a qui une regle du portail a donne une
   bordure sans fond : on le pose explicitement. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--cn-surface-2);
    color: var(--cn-ink);
    border-color: var(--cn-border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--cn-ink-faint);
}

/* Les listes deroulantes sont rendues par l'OS : sans cette regle, les
   <option> restent noir sur blanc alors que le champ ferme est sombre. */
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup {
    background-color: var(--cn-surface-2);
    color: var(--cn-ink);
}

/* --- Ascenseurs -------------------------------------------------------------
   Une seule propriete, et deux fausses pistes ecartees avant d'y arriver.

   1. ::-webkit-scrollbar-track / -thumb poses pour tout le portail : a eviter.
      Des qu'une seule de ces pseudo-classes est declaree, WebKit abandonne
      l'ascenseur natif et passe la barre en mode « personnalise » ; tout ce qui
      n'a pas ete style explicitement retombe sur un defaut clair. Une barre
      beige apparaissait ainsi sous le tableau du suivi de chantier, sur une
      page qui n'avait jamais demande d'ascenseur personnalise.

   2. color-scheme: dark seul : insuffisant. Il est bien declare plus haut, et
      pourtant le meme tableau gardait une barre claire.

   scrollbar-color fait le travail : elle recolore la barre sans la faire
   sortir du rendu natif, et elle s'herite — declaree ici, elle couvre tous les
   conteneurs defilants du portail sans en nommer un seul.

   Les deux pages qui avaient deja un ascenseur personnalise (monitoring et
   import_noc) gardent le leur ; leurs couleurs passent par --cn-scroll-* et
   suivent donc le theme.
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    scrollbar-color: var(--cn-scroll-thumb) var(--cn-scroll-track);
}

/* --- Logo CinemaNext -------------------------------------------------------
   Le sigle est un PNG a fond transparent dont le mot-symbole est bleu nuit :
   pose sur un fond sombre il disparait. Plutot que de le filtrer — ce qui
   abimerait le cyan de la marque — on lui rend un fond clair, comme une
   etiquette. */
html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .cn-logo-img {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 10px;
    box-sizing: border-box;
}

/* --- Selection de texte --------------------------------------------------- */
html[data-theme="dark"] ::selection {
    background: var(--cn-primary-bd);
    color: var(--cn-ink-strong);
}

/* --- FullCalendar ----------------------------------------------------------
   Le planning du suivi de chantier est rendu par FullCalendar 6, charge par
   CDN : sa feuille de style ne nous appartient pas, et sans cette reprise le
   calendrier reste un rectangle blanc au milieu d'une page sombre.

   La bibliothèque expose heureusement ses propres variables CSS. On les branche
   sur les tokens du portail plutot que de surcharger ses selecteurs, ce qui
   evite une course a la specificite avec du CSS tiers et resistera mieux a une
   montee de version. */
html[data-theme="dark"] .fc {
    --fc-page-bg-color: var(--cn-surface);
    --fc-border-color: var(--cn-border);
    --fc-neutral-bg-color: var(--cn-surface-2);
    --fc-neutral-text-color: var(--cn-ink-muted);
    --fc-today-bg-color: var(--cn-primary-bg);
    --fc-highlight-color: var(--cn-primary-bg);
    --fc-non-business-color: var(--cn-surface-3);
    --fc-list-event-hover-bg-color: var(--cn-surface-2);
    color: var(--cn-ink);
}

/* Les jours hors du mois affiche sont grises par une simple opacite : sur fond
   sombre elle ne suffit plus a les distinguer, on force l'encre. */
html[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-top {
    color: var(--cn-ink-faint);
    opacity: 1;
}

html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number {
    color: var(--cn-ink-2);
}

/* =============================================================================
   BOUTON DE THEME
   Trois etats : Systeme / Clair / Sombre. Le style vit ici et non dans les
   pages, pour que le bouton soit identique partout sans etre recopie 12 fois.
   Il reprend volontairement la forme du selecteur FR/EN a cote duquel il
   s'insere.

   Tout est en :where(), donc de specificite nulle : theme.js ajoute aux
   boutons les classes .lang-switcher / .lang-btn de la page, et le style de la
   page doit gagner. C'est ce qui permet au bouton d'etre clair sur les pages
   claires et bleu nuit dans la barre du monitoring, sans une regle par page.
   Ces valeurs ne servent donc que de repli, quand la page n'habille rien.
   ========================================================================== */
:where(.cn-theme-switcher) {
    display: inline-flex;
    gap: 2px;
    background: var(--cn-surface-4);
    padding: 3px;
    border-radius: 8px;
    line-height: 1;
}

/* flex-shrink hors :where() : sur les en-tetes serres (helpdesk, suivi de
   chantier) le conteneur flex ecraserait le bouton jusqu'a tronquer ses
   icones. C'est une contrainte de mise en page, pas une couleur — la page n'a
   aucune raison de la contredire. */
.cn-theme-switcher { flex: 0 0 auto; }

:where(.cn-theme-btn) {
    background: none;
    border: none;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--cn-ink-muted);
    cursor: pointer;
    transition: .15s;
    font-family: inherit;
}

:where(.cn-theme-btn:hover) { color: var(--cn-ink); }

:where(.cn-theme-btn.active) {
    background: var(--cn-surface);
    color: var(--cn-primary);
    box-shadow: var(--cn-shadow-sm);
}

/* Geometrie du bouton : hors :where(), pour que les trois icones gardent la
   meme largeur quel que soit l'habillage herite. */
.cn-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
}

/* Repli pour les rares pages sans Font Awesome : un glyphe Unicode pose en
   CSS. C'est theme.js qui tranche, en marquant d'un attribut les boutons
   auxquels il n'a pas pu donner d'icone.

   Ce choix a ete fait apres une premiere version qui laissait le CSS decider
   avec :has(> i). Elle affichait les deux symboles a la fois : la regle de
   suppression, moins specifique que celle qui pose le contenu, perdait la
   cascade. Un attribut sur la balise leve l'ambiguite au lieu de la reglier
   a coups de specificite. */
/* Largeur figee : sans elle les trois glyphes, qui n'ont pas la meme avance,
   donnent trois segments de largeurs differentes. Meme role que fa-fw du cote
   Font Awesome. */
.cn-theme-btn[data-theme-glyphe]::before {
    font-style: normal;
    display: inline-block;
    width: 14px;
    text-align: center;
}
/* Glyphes a rendu texte, et non emoji : un pictogramme d'ecran (U+1F5A5)
   s'affiche en couleur sur la plupart des systemes et jurerait a cote de deux
   symboles monochromes. Le demi-cercle dit « l'un ou l'autre, selon le
   systeme » sans sortir du jeu de caracteres texte. */
.cn-theme-btn[data-theme-glyphe][data-theme-choice="system"]::before { content: "\25D0"; }  /* demi-cercle */
.cn-theme-btn[data-theme-glyphe][data-theme-choice="light"]::before  { content: "\2600"; }  /* soleil      */
.cn-theme-btn[data-theme-glyphe][data-theme-choice="dark"]::before   { content: "\263D"; }  /* lune        */

/* fa-fw cote JS donne la meme largeur d'avance aux trois icones ; sans lui,
   fa-desktop, fa-sun et fa-moon donnent trois segments de largeurs
   differentes et le bouton parait de travers. */
.cn-theme-btn > i { font-size: 12px; }

/* =============================================================================
   TRANSITION DE BASCULE
   Sans amortissement, le passage clair/sombre est un flash. La transition est
   posee uniquement pendant la bascule, par une classe que theme.js retire
   ensuite : la laisser en permanence ralentirait tous les survols du portail.
   ========================================================================== */
html.cn-theme-switching,
html.cn-theme-switching *,
html.cn-theme-switching *::before,
html.cn-theme-switching *::after {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, fill .18s ease, stroke .18s ease !important;
    transition-delay: 0s !important;
}

/* Respect du reglage systeme « animations reduites ». */
@media (prefers-reduced-motion: reduce) {
    html.cn-theme-switching,
    html.cn-theme-switching *,
    html.cn-theme-switching *::before,
    html.cn-theme-switching *::after {
        transition: none !important;
    }
}