/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CHAMPS DE FORMULAIRE — une seule couche, pilotée par les jetons `--w-*`.
   À charger APRÈS `design-system.css`.

   ── POURQUOI CE FICHIER EXISTE ───────────────────────────────────────────────────────────────

   Le fondateur : « je n'aime pas le style des champs et des sélecteurs, tu pourrais utiliser une
   bibliothèque plus agréable ». Mesures au navigateur, sur `x-studio-video.php` :

     rayon      select 9px   ·  input 10px  ·  textarea 8px   → TROIS rayons sur le même écran
     bordure    select 4,68  ·  input 1,47  ·  textarea 5,01  → l'input ne se VOIT pas (seuil 3:1)
     ombre      `0 1px 3px rgba(0,0,0,.06)` sous input et select, absente du textarea
     chevron    `appearance:auto` → la flèche du SYSTÈME, différente sur chaque OS
     hauteur    `min-height:46px` gagne sur les `padding:7px 10px` des barres « compactes »

   Ce n'était donc pas un manque de bibliothèque : c'était l'absence d'une couche qui fasse
   autorité. Quatre correctifs successifs s'étaient empilés sur le même champ, chacun juste,
   aucun décisif — d'où trois rayons, deux bordures et une ombre orpheline.

   ── POURQUOI PAS UNE BIBLIOTHÈQUE ────────────────────────────────────────────────────────────

   Tailwind est DÉJÀ dans le projet (`package.json`, devDependency) et sa feuille compilée est
   servie en premier. Mais `assets/tailwind.css` date du 2026-04-11 quand sa source
   `assets/tailwind-src.css` a été modifiée jusqu'au 2026-07-04, et **aucun script ne la
   reconstruit** (`package.json` n'a pas de `scripts`). Trois mois de dérive : toute correction
   faite dans la source est un no-op silencieux. Ajouter Bootstrap ou Bulma superposerait un
   SECOND reset à celui-là, et un second système de jetons à côté de `--w-*` — deux vérités pour
   « la couleur d'accent », sur une vingtaine d'écrans.

   Quant aux bibliothèques de `<select>` (Tom Select, Choices.js…) : elles résolvent la recherche
   dans une longue liste. Le plus grand select du module en compte SEPT. Elles coûteraient du JS,
   un cycle de vie sur des listes reconstruites en `innerHTML`, un faux combobox ARIA presque
   toujours moins accessible que le natif, et la perte du sélecteur roulant iOS/Android.

   Le jour où un select dépassera ~15 entrées — `sv-persona` ou `sv-chaine`, remplis depuis les
   données du tenant — la réponse sera Tom Select, vendorisé, SUR CE CHAMP, jamais globalement.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── AU REPOS ─────────────────────────────────────────────────────────────────────────────────
   Trois gestes portent presque tout l'effet :

   1. `box-shadow:none`. L'ombre portée sous une zone de saisie simule un relief que plus aucun
      système de design ne dessine. C'est ce qui se voit en premier, avant même d'avoir compris.
   2. UN SEUL rayon. Trois valeurs sur un écran, c'est exactement ce qui produit le « pas fini ».
   3. Une bordure qui atteint le seuil. WCAG 1.4.11 demande 3:1 pour la limite d'un contrôle ;
      l'input mesurait 1,47. `--w-soft` mesure 5,01 en clair et 6,80 en sombre. */
/* ── PORTÉE : LA CLASSE, MAIS AUSSI LA BALISE ─────────────────────────────────────────────────
   `.form-input` est la convention de l'application, et elle couvre la grande majorité des champs.
   Elle ne suffit pas : un champ écrit sans classe ne rate pas la couche à moitié, il la rate en
   entier, et RIEN ne le signale. MESURÉ, avant correctif :

     #sv-subject      « Que raconte la vidéo ? », le champ principal du Studio — bordure 0, 178 px
     #elg-site, #phoenix-site-id, #qw-site-id, #wpm-search…  même défaut, six écrans

   D'où la seconde portée : toute balise de saisie DANS une enveloppe de page. Un système de
   design doit habiller l'élément, pas seulement ceux qui ont pensé à demander.

   Les `:not()` protègent les familles qui ont leur propre convention assumée — `.mg-*`
   (`magic-forms.css`) et `.sadm-*` (composeur du support) — plutôt que de les écraser au passage. */
.form-input,
.form-select,
.form-textarea,
select.form-input,
textarea.form-input,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio)
  :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"],
      input[type="email"], input[type="number"], input[type="password"], input[type="tel"],
      input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  box-sizing:border-box;
  font-size:14px;
  color:var(--w-ink);
  background-color:var(--w-panel);
  border:1px solid var(--w-soft);
  border-radius:var(--w-field-r);
  box-shadow:none;
  transition:border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

/* ── LA HAUTEUR EST UN JETON, ET C'EST CE QUI LA REND RÉGLABLE ────────────────────────────────
   `min-height:46px` écrasait tous les `padding:7px 10px` des barres d'outils : un override de
   padding ne peut pas descendre sous un `min-height`. Les zones « compactes » faisaient donc
   46 px comme le reste, et la densité annoncée n'existait pas.

   Le padding vertical passe à zéro : un `<input>` et un `<select>` centrent leur ligne dans la
   boîte. Conséquence utile — poser `--w-field-h` sur un CONTENEUR redimensionne réellement les
   champs qu'il contient, ce que le padding ne pouvait pas faire. */
input.form-input,  input.form-select,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"]):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  min-height:var(--w-field-h);
  padding:0 12px;
}

/* Le <select> a sa PROPRE règle de padding : il doit réserver la place du chevron.
   Écrire `padding-right:34px` plus bas, avec le chevron, ne suffisait pas — MESURÉ à 12 px sur
   `#wpm-group-filter`, le texte venant buter contre la flèche. La cause tient à un détail de
   spécificité : `:is(input[type="text"], …)` vaut (0,1,1) à cause du sélecteur d'attribut, quand
   `select` seul ne vaut que (0,0,1). La règle de hauteur passait donc DEVANT celle du chevron et
   réécrivait son padding. Deux règles disjointes, et la course n'a plus lieu. */
select.form-input, select.form-select,
.form-select,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  min-height:var(--w-field-h);
  padding:0 34px 0 12px;
}

/* Les types qui ne sont PAS des lignes de texte sortent de la règle ci-dessus : leur contenu est
   un widget natif (bouton « Parcourir », coche, curseur, pastille de couleur) que `padding:0` colle
   en haut de la boîte. On leur rend un padding symétrique et on libère la hauteur. */
input[type="file"].form-input     { padding:9px 12px; min-height:0; height:auto; line-height:1.4; }
input[type="color"].form-input    { padding:4px; min-height:0; height:var(--w-field-h); }
input[type="range"].form-input,
input[type="checkbox"].form-input,
input[type="radio"].form-input    { min-height:0; height:auto; padding:0; }

textarea.form-input,
.form-textarea,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) textarea:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  min-height:calc(var(--w-field-h) * 2);
  padding:10px 12px;
  line-height:1.55;
  resize:vertical;
}

/* Firefox applique sa propre opacité au placeholder : `opacity:1` la neutralise. L'ancienne
   valeur mesurait 2,56 — sous le seuil texte de 4,5:1. */
.form-input::placeholder,
.form-textarea::placeholder,
textarea.form-input::placeholder,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"])::placeholder { color:var(--w-soft); opacity:1; }

/* ── SURVOL : on approfondit le MÊME neutre ───────────────────────────────────────────────────
   L'ancien survol passait à `--w-accent-line`, mesuré à 1,57 — la bordure devenait MOINS visible
   qu'au repos. Un survol qui efface le champ au lieu de le désigner. La progression est
   maintenant monotone : repos 5,01 → focus 6,29. `:not(:focus)` évite de faire redescendre la
   bordure d'un champ déjà actif. */
.form-input:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus),
.form-textarea:hover:not(:disabled):not(:focus),
select.form-input:hover:not(:disabled):not(:focus),
textarea.form-input:hover:not(:disabled):not(:focus),
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):hover:not(:disabled):not(:focus) { border-color:var(--w-ink-2); }

/* ── FOCUS ────────────────────────────────────────────────────────────────────────────────────
   L'`outline` transparent n'est pas décoratif : en mode contraste forcé (Windows), `box-shadow`
   n'est PAS rendue et le système substitue un contour à cet outline. Sans lui, le focus
   disparaît purement et simplement pour ceux qui en ont le plus besoin. */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
select.form-input:focus,
textarea.form-input:focus,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):focus {
  outline:2px solid transparent;
  outline-offset:2px;
  border-color:var(--w-accent);
  box-shadow:var(--w-ring);
}

/* ── LE CHEVRON DU <select> ───────────────────────────────────────────────────────────────────
   Le point le plus daté de l'interface, et probablement celui que le fondateur voyait en premier.
   `appearance:none` n'était appliqué à AUCUN select : la flèche du système s'affichait — autre
   sous Windows, macOS et Firefox, insensible au rayon, à l'accent et au thème sombre.

   Dessiné en deux dégradés plutôt qu'en SVG encodé : un SVG en `data:` exige une couleur
   LITTÉRALE dans l'URL, ce qui réintroduirait une couleur en dur et figerait le chevron en
   thème clair. Deux dégradés acceptent `var()` et suivent donc le thème ET l'état. */
select.form-input,
select.form-select,
.form-select,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - .75px), var(--w-soft) calc(50% - .75px),
                            var(--w-soft) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(135deg, transparent calc(50% - .75px), var(--w-soft) calc(50% - .75px),
                            var(--w-soft) calc(50% + .75px), transparent calc(50% + .75px));
  background-size:7px 7px, 7px 7px;
  background-position:right 19px center, right 12px center;
  background-repeat:no-repeat;
}
/* Le chevron prend l'accent quand le champ est actif : l'affordance suit l'état. */
select.form-input:hover:not(:disabled), select.form-select:hover:not(:disabled),
select.form-input:focus,               select.form-select:focus,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):hover:not(:disabled), :is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):focus {
  background-image:
    linear-gradient(45deg,  transparent calc(50% - .75px), var(--w-accent) calc(50% - .75px),
                            var(--w-accent) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(135deg, transparent calc(50% - .75px), var(--w-accent) calc(50% - .75px),
                            var(--w-accent) calc(50% + .75px), transparent calc(50% + .75px));
  /* REDECLARES ICI, et pas seulement dans la regle de base : cette regle ne posait que
     l image, donc elle DEPENDAIT de la taille et de la position heritees. Qu une autre
     feuille reinitialise ces deux proprietes — un raccourci `background`, un `!important` —
     et le degrade s etale sur tout le champ : le chevron devient une grande CROIX au milieu
     du select. Une regle d etat doit se suffire a elle-meme. */
  background-size:7px 7px, 7px 7px;
  background-position:right 19px center, right 12px center;
  background-repeat:no-repeat;
}
/* Une liste déroulée n'a pas de chevron et ne se contraint pas en hauteur. */
select.form-input[multiple], select.form-select[multiple],
select.form-input[size]:not([size="1"]), select.form-select[size]:not([size="1"]),
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select[multiple]:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]), :is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select[size]:not([size="1"]):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]) {
  background-image:none; padding:8px 12px; min-height:0; height:auto;
}

/* ── DÉSACTIVÉ : la FORME dit l'état, pas seulement la couleur ────────────────────────────────
   `opacity:.6` délave le texte au lieu de dire pourquoi le champ ne répond pas. Le tireté reprend
   la convention que le module s'est DÉJÀ donnée pour `.sv-mode-c:disabled` — la bonne règle
   existait, elle n'avait simplement jamais été appliquée aux champs. */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
select.form-input:disabled,
textarea.form-input:disabled,
.form-input[readonly],
.form-textarea[readonly],
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):disabled,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) :is(input:not([type]), input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea):not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"])[readonly] {
  background-color:var(--w-panel-2);
  color:var(--w-soft);
  /* `--w-line` (1,27) avait été le premier réflexe : un champ inerte, un trait discret. Mais
     un champ désactivé reste À LIRE — on doit comprendre ce qui est verrouillé, pas deviner que
     quelque chose manque. Le bord garde donc `--w-soft`, et c'est le TIRETÉ qui dit l'état. */
  border-style:dashed;
  box-shadow:none;
  opacity:1;
  cursor:not-allowed;
}
select.form-input:disabled, select.form-select:disabled,
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio) select:not(.mg-input):not(.mg-select):not(.mg-textarea):not([class*="sadm-"]):disabled { background-image:none; }

/* ── ERREUR — sur intention, jamais pendant la frappe ─────────────────────────────────────────
   `:invalid:not(:placeholder-shown)` fait virer un champ au rouge dès le deuxième caractère
   d'une adresse e-mail, avant que l'utilisateur ait fini de la taper. On s'appuie sur
   `aria-invalid`, posé quand la validation a RÉELLEMENT eu lieu — ce qui a le mérite d'annoncer
   aussi l'erreur aux lecteurs d'écran. */
.form-input[aria-invalid="true"], .form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"],
.form-input.has-error, .form-select.has-error, .form-textarea.has-error {
  border-color:var(--w-neg);
  box-shadow:0 0 0 3px var(--w-neg-bg);
}

@media (prefers-reduced-motion:reduce) {
  .form-input, .form-select, .form-textarea { transition:none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   CASES À COCHER ET BOUTONS RADIO — 884 dans l'application, presque tous au style natif.
   ══════════════════════════════════════════════════════════════════════════════════════════════
   Le navigateur les rend en BLEU SYSTÈME, à côté d'un accent indigo : c'est le contrôle le plus
   répandu de l'application et le seul qui ne parle pas la langue du produit.

   Le bon geste existait DÉJÀ — `.ac-page input[type="checkbox"] { accent-color:var(--w-accent) }` —
   mais pour UN conteneur sur onze. On ne l'invente pas, on le généralise.

   ⚠ CE QU'ON NE FAIT PAS : imposer une taille. Deux motifs masquent délibérément la case pour
   rendre toute une carte cliquable (`.ac-mode-card input[type="checkbox"]` en `opacity:0;width:0`,
   `.wpm-set-row > input[type="checkbox"]` en `display:none`). Une règle globale posant
   `width:16px` les ferait réapparaître. `accent-color` sur un contrôle masqué, lui, ne coûte rien.

   ⚠ POURQUOI PAS UN RENDU ENTIÈREMENT REDESSINÉ (`appearance:none` + pseudo-éléments) : il faut
   alors réimplémenter le focus, l'état indéterminé, le mode contraste forcé de Windows et la
   cible tactile — quatre choses que le contrôle natif fait déjà, et qu'on oublie une par une.
   `accent-color` recolore le natif sans rien lui retirer. */
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page)
  :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--w-accent);
  cursor: pointer;
}
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page)
  :is(input[type="checkbox"], input[type="radio"]):disabled {
  cursor: not-allowed;
  opacity: .55;
}
/* Le focus au clavier : `.gsc-page` l'avait, seule. Même généralisation. `:focus-visible` et non
   `:focus` — sinon l'anneau apparaît aussi à la souris, où il n'apporte rien. */
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page)
  :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 2px;
}
/* Un libellé qui enveloppe sa case est cliquable par le navigateur : autant que le curseur le dise. */
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page)
  label:has(> input[type="checkbox"], > input[type="radio"]) { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LE TEXTE AUTOUR DU CHAMP — libellé, aide, erreur.
   ══════════════════════════════════════════════════════════════════════════════════════════════
   La couche dessinait le champ, jamais ce qui l'entoure : un formulaire, ce sont trois registres
   de texte (ce qu'on demande, comment le remplir, ce qui ne va pas) et ils étaient laissés à
   l'improvisation de chaque écran. Classes ADDITIVES : rien de ce qui existe ne change. */
/* ⚠ `.form-label` N EST PAS NOUVEAU. Tailwind le definit deja :
     display:block; font-size:.95rem; font-weight:700; color:#1f2937;
     margin-bottom:.35rem; letter-spacing:.01em
   Je l avais cru absent sur la foi d un grep dans CE fichier — ce qui prouvait seulement qu il n y
   etait pas, pas qu il etait indefini. Ma premiere version l a redefini a 13px/600, retrecissant
   967 libelles d un coup, sans que personne l ait demande.
   ⇒ METRIQUES D ORIGINE conservees a l identique. Le seul apport est la COULEUR : #1f2937 est
   ecrit en dur, et le mode nuit etait rattrape a part dans design-system.css. Un jeton fait les
   deux d un coup et supprime le rattrapage.
   Regle : on ne change pas une typographie globale par effet de bord d un autre chantier. */
.form-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--w-ink-2);
}
/* L'astérisque est décorative : le lecteur d'écran doit entendre `required` sur le CHAMP, pas
   deviner une étoile. D'où `aria-hidden` implicite d'un ::after et rien de plus. */
.form-label[data-requis]::after { content: " *"; color: var(--w-neg); font-weight: 700; }

.form-hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--w-soft);
}
.form-error {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--w-neg);
}
/* Le message d'erreur ne s'appuie pas QUE sur la couleur : un daltonien lit le signe, pas la
   teinte. Le champ, lui, porte déjà `aria-invalid` (voir plus haut). */
.form-error::before { content: "⚠ "; }

/* Un groupe champ + libellé + aide, pour ne pas réinventer un espacement par écran. */
.form-groupe { display: block; margin-bottom: 16px; }
.form-groupe > .form-input,
.form-groupe > .form-select,
.form-groupe > .form-textarea { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .form-label, .form-hint, .form-error { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   LES PARTIES QUE LE CSS NE PEINT PAS
   ══════════════════════════════════════════════════════════════════════════════════════════════
   En mode nuit, une case DECOCHEE reste un carre BLANC : le CSS ne peint pas l interieur d un
   controle natif. Meme chose pour le calendrier d un `input[type=date]`, les fleches d un
   `input[type=number]`, la barre de defilement d un `textarea` et le menu deroule d un `select`.
   `color-scheme` est la SEULE facon de le dire au navigateur — aucune declaration de couleur ne
   les atteint. On le pose sur le conteneur en mode nuit, pas sur `:root` : le theme vit sur le
   conteneur (490 des 722 regles `.ac-dark` y sont accrochees), et une page peut etre claire
   pendant qu une autre est sombre dans le meme navigateur. */
:is(.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page).ac-dark {
  color-scheme: dark;
}