/* Pierre AI — le thème. LA SEULE DÉFINITION DE LA PALETTE.
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️⚠️ AVANT : cette palette existait en DEUX exemplaires — un `:root` dans
   `style.css`, un autre dans `admin.css`. Deux copies d'une même règle
   dérivent toujours ; c'est la leçon qu'on a déjà payée ailleurs. Il n'y en a
   plus qu'une. Toute page de Pierre charge ce fichier EN PREMIER.

   ─── Le contrat de la Suite ────────────────────────────────────────────────
   Equanta, ShiftCadence, coffre, foliot, Smelter partagent une grammaire :
   sombre MAT, zéro dégradé, fond quasi noir, panneaux empilés par paliers,
   traits fins, une craie forte et une tamisée, UN accent produit, un rouge de
   refus, rayon minuscule. Chaque produit garde son accent propre — la sauge
   d'Equanta, le laiton de ShiftCadence.

   Celui de Pierre est la FEUILLE. Elle vaut #1f6b4f sur papier ; à cette
   valeur elle disparaît sur un fond noir. Elle est donc relevée, pas
   remplacée : c'est la même couleur, à la lumière qu'il faut.

   Et Pierre garde sa CHALEUR. Son fond n'est pas le bleu-noir de
   ShiftCadence : c'est un noir tiède, à peine vert. C'est ce qui le distingue
   de ses frères sans sortir de la famille.

   ─── Comment lire les jetons ───────────────────────────────────────────────
   `--paper` est le FOND, `--ink` le TEXTE. Les noms viennent du thème clair
   et ils restent vrais : une règle `background: var(--paper); color: var(--ink)`
   dit toujours « fond de page, texte de page ». Seules leurs valeurs ont
   changé de côté.

   Les paliers montent vers la lumière : paper → card → card-2. Un panneau
   posé sur le fond est plus CLAIR que lui, jamais plus sombre. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* Les paliers de surface, du fond vers la lumière. */
  --well:        #090a09;   /* creux : une bande qu'on veut ISOLER du reste */
  --paper:       #101210;   /* le fond de page */
  --card:        #181b18;   /* panneau posé dessus : carte, bulle, champ */
  --card-2:      #212520;   /* rangée survolée, palier le plus haut */

  /* Les traits. Un séparateur se devine ; il ne dessine pas. */
  --rule:        #282d28;
  --rule-strong: #3f473f;   /* bordure d'un champ : elle, doit se voir */

  /* La craie. Tiède — c'est la signature de Pierre. */
  --ink:         #eceee9;
  --ink-soft:    #a4afa6;
  --ink-pale:    #7d8a80;

  /* ⭐ L'accent. `--leaf` porte, `--leaf-strong` insiste.
     « strong » et non « deep » : sur fond sombre l'emphase MONTE vers la
     lumière. Un jeton nommé « deep » aurait menti dans chaque règle. */
  --leaf:        #4cb083;
  --leaf-strong: #74cca4;
  --leaf-wash:   #15241c;   /* fond teinté, pour poser un état */
  --on-leaf:     #06130c;   /* ⚠ le texte SUR un aplat de feuille est SOMBRE */

  /* L'ambre : la mémoire d'ailleurs, les bases partagées, une correction. */
  --amber:       #d9a441;
  --amber-wash:  #241d10;

  /* L'argile : un refus, un trou, une erreur. Jamais décorative. */
  --clay:        #e0705a;
  --clay-wash:   #261612;

  /* Profondeur. Sur sombre, une ombre n'est pas de l'encre diluée : c'est du
     noir franc, sinon elle vire au gris sale. */
  --shadow:      rgba(0, 0, 0, .55);
  --veil:        rgba(4, 6, 4, .68);

  --edge: 6px;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ⭐ Le doigt. Une cible tactile fait 44 px — c'est un minimum physique, pas
     une préférence. Les règles étroites y puisent au lieu de le redire. */
  --touch: 44px;

  /* Déclaré au navigateur : sans ça, les menus déroulants natifs, les cases à
     cocher et les barres de défilement restent en clair au milieu du noir. */
  color-scheme: dark;
}

/* La barre de défilement suit le thème. Sur Firefox, deux mots suffisent ;
   sur les navigateurs WebKit il faut le pseudo-élément. Les deux, donc. */
* { scrollbar-color: var(--rule-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-pale); background-clip: content-box; }

/* La sélection : la feuille, franche, avec un texte qui reste lisible. */
::selection { background: var(--leaf); color: var(--on-leaf); }

/* ⚠⚠ `[hidden]` DOIT GAGNER, TOUJOURS.
   Le navigateur pose `display: none` sur un élément `hidden`, mais c'est une
   règle d'agent utilisateur : la moindre règle d'auteur qui fixe `display` la
   bat. MESURÉ ICI : une règle tactile `.mini { display: inline-flex }`
   suffisait à RÉAFFICHER le bouton de la console d'administration chez une
   personne qui n'est pas intendante — masqué dans le HTML, rendu à l'écran.
   Le `!important` est le bon outil : « caché » n'est pas une préférence de
   mise en page, c'est un fait. */
[hidden] { display: none !important; }

/* Ce que le navigateur peint LUI-MÊME et qu'aucune classe n'atteint. */
html { background: var(--paper); }
::placeholder { color: var(--ink-pale); opacity: 1; }

/* ─── Au doigt ─────────────────────────────────────────────────────────────
   Android peint un rectangle bleu translucide sur tout ce qu'on touche. Sur
   un fond sombre il ressemble à un défaut d'affichage. Nos propres états
   (`:active`) disent déjà ce qui vient d'être touché. */
a, button, [role="button"], label, summary {
  -webkit-tap-highlight-color: transparent;
}

/* Un bouton n'est pas du texte : le maintenir enfoncé ne doit pas ouvrir le
   menu de sélection ni surligner son libellé. */
button, .mini, .toggle { -webkit-user-select: none; user-select: none; }

/* ⚠ Le remplissage automatique de Chrome repeint le champ en BLEU CLAIR et
   ignore `background`. Le seul levier est une ombre interne géante — c'est
   laid, c'est documenté, et c'est la seule chose qui marche. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--card-2) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}