/* ==========================================================================
   Jetons de la charte — la seule définition des couleurs et des polices.

   Trois feuilles, trois rôles. Celle-ci porte les jetons et rien d'autre ;
   espace.css et gestion.css posent chacune leur mise en page par-dessus.
   Un jeton recopié dans l'une des deux serait un jeton qui divergera : la
   charte se corrige ici, une fois.

   L'espace et la gestion partagent la famille et changent la densité.
   L'espace est fait pour un pouce à sept heures du matin ; la gestion pour
   une souris sur grand écran. Même vert, même Archivo, pas la même page.
   ========================================================================== */

:root {
  --encre:        #16332C;
  --vert-ombre:   #214A3F;
  --vert-clair:   #AFC8B9;
  --creme:        #F3EEE3;
  --surface:      #FFFFFF;
  --gris-encre:   #55655C;
  --trait:        rgba(22, 51, 44, 0.14);
  --orange:       #E9A063;
  --orange-fonce: #A85C22;

  --police-titre: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-texte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --rayon:       16px;
  --rayon-petit: 10px;
  --barre:       62px;  /* hauteur de la barre basse */
}

/* Mode sombre : les mêmes rôles, pas les mêmes valeurs. Le crème devient
   l'encre, les cartes montent d'un ton, et les deux accents s'éclaircissent
   — sur fond sombre, l'orange d'origine tombe sous le seuil de contraste. */
/* Rôles de page. Les jetons ci-dessus sont des IDENTITÉS — le vert du
   cabinet, son crème — et ils ne changent jamais : un bandeau vert reste
   vert la nuit, et le crème qui s'y pose reste lisible. Ce qui change avec
   le thème, c'est le fond de la page et la couleur du texte courant.

   La confusion entre les deux a produit un vrai défaut : en échangeant
   « encre » et « crème » en mode sombre, tout ce qui les employait comme
   surface s'inversait — bandeau, boutons, rail, blocs de date, en-têtes de
   tableau. Un bouton de déconnexion devenait invisible, et ses voisins
   avec lui. */
:root {
  --fond-doux: var(--creme);    /* l'espace : plan de travail crème */
  --fond-net:  #FFFFFF;         /* la gestion : fond blanc */
  --texte-principal: var(--encre);

  /* Deux rôles de plus, nés de l'audit de contraste. Un lien et le texte
     d'une pastille orange ne peuvent pas prendre une identité : le vert
     d'ombre devient illisible sur un fond sombre, et le blanc sur un orange
     éclairci. Ce sont des rôles, ils basculent. */
  --lien: var(--vert-ombre);
  --sur-orange-fonce: #FFFFFF;

  /* Surfaces dérivées de la gestion : la ligne survolée, la ligne
     sélectionnée, et le fond d'une ligne qui bloque. Elles étaient posées en
     dur dans gestion.css, donc claires quel que soit le thème — un texte
     clair s'y perdait entièrement en mode sombre. */
  --surface-survol: #FAF9F7;
  --surface-choisie: #FBF3E8;
  --surface-bloquee: #FDF4EA;
  --sur-surface-bloquee: var(--encre);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Les identités ne bougent pas. Seuls les rôles basculent. */
    --fond-doux: #101D19;
    --fond-net:  #0C1714;
    --texte-principal: #E8EFEA;

    --surface:   #16302A;
    --gris-encre: #A8BBB0;
    /* Un filet n'est pas du texte : le seuil applicable est 3:1, pas 4,5.
       À 18 % il tombait à 1,65 sur la page et 1,27 sur une carte — deux
       surfaces voisines ne se distinguaient plus. À 44 % il tient 3,6 et
       2,9 ; les cartes portent en plus leur propre fond, qui les sépare. */
    --trait:     rgba(232, 239, 234, 0.44);

    /* Les deux verts s'éclaircissent juste assez pour tenir sur un fond
       sombre sans cesser d'être le vert du cabinet. Le crème qui s'y pose
       ne change pas : 11,8:1 sur l'encre, 8,6:1 sur le vert d'ombre. */
    --vert-ombre: #2E5A4D;
    --vert-clair: #7FA592;

    /* L'orange d'origine tombe sous le seuil sur fond sombre. Éclairci,
       il réclame en retour un texte foncé par-dessus. */
    --orange:       #F0B37E;
    --orange-fonce: #F5C78F;
    --sur-orange-fonce: #2B1A08;

    /* Le vert d'ombre d'un lien se perd sur un fond sombre : 1,80:1. Ce
       vert-ci tient 7,4:1 sur une carte et 9:1 sur la page. */
    --lien: #9FC4B0;

    /* Les trois surfaces dérivées, déclinées. Sans cela elles restaient
       claires sur un fond sombre, et avalaient le texte. */
    --surface-survol: #1B3A32;
    --surface-choisie: #2A2415;
    --surface-bloquee: #33210F;
    --sur-surface-bloquee: #F3E7DA;
  }
}

/* Correspondance avec l'ancien vocabulaire.

   Une dizaine de gabarits enfants nomment encore les couleurs à l'ancienne,
   dans des attributs « style » posés au fil des écrans. Les faire tomber
   d'un coup aurait rendu ces écrans illisibles — une variable absente ne
   vaut pas une couleur par défaut, elle ne vaut rien.

   Ce bloc n'est pas la charte : c'est un pont. Chaque ancien nom pointe
   vers le jeton qui a repris son rôle. Il disparaît quand les gabarits
   enfants auront été repris un à un. */
:root {
  --chaux:    var(--fond-doux);
  --blanc:    var(--surface);
  --pierre:   var(--texte-principal);
  --ardoise:  var(--gris-encre);
  --calcaire: var(--trait);
  --laiton:   var(--vert-ombre);
  --retard:   var(--orange-fonce);
  --attente:  var(--orange-fonce);
  --regle:    var(--vert-ombre);
  --serif:    var(--police-titre);
  --filet:    var(--trait);
  --texte:      var(--texte-principal);
  --texte-doux: var(--gris-encre);
  --accent:   var(--vert-ombre);
  --sans:     var(--police-texte);
  /* Vocabulaire propre au planning mensuel. */
  --encre-douce: var(--gris-encre);
  --papier:      var(--fond-doux);
  --trait-fort:  rgba(22, 51, 44, 0.26);
  --libre:       var(--surface);
  --ferme:       rgba(22, 51, 44, 0.05);
  --alerte:      var(--orange-fonce);
}

/* Bandeau d'horloge simulée. Il vit avec les jetons parce que les deux
   univers l'affichent, et qu'il doit se voir avant tout le reste : une
   horloge truquée oubliée en service ferait émettre de vraies factures à de
   fausses dates. */
.horloge-truquee {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--orange);
  color: #2B1A08;
  border-left: 4px solid var(--orange-fonce);
  font-size: 14px;
  line-height: 1.45;
}
.horloge-truquee code { font-size: 13px; }

/* --- Indicateur de façade ------------------------------------------------
   Les deux univers l'affichent, donc il vit avec les jetons. On doit savoir
   d'un coup d'œil de quel côté du cabinet on se trouve — l'espace et la
   gestion se ressemblent assez pour qu'on s'y trompe une seconde, et une
   seconde suffit à valider la mauvaise chose. */

.facade {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: none;
}

.facade-ou {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: color-mix(in srgb, var(--creme) 70%, transparent);
	white-space: nowrap;
}

.facade-bascule { margin: 0; }

.facade-bascule button {
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--creme) 34%, transparent);
	background: transparent;
	color: color-mix(in srgb, var(--creme) 88%, transparent);
	cursor: pointer;
	white-space: nowrap;
}

.facade-bascule button:hover {
	background: color-mix(in srgb, var(--creme) 14%, transparent);
	color: var(--creme);
}

/* Dans le rail de gestion, l'indicateur n'est pas dans une barre mais dans
   une colonne : il prend la largeur et se place sous le titre. */
.volet .facade { padding: 0 16px 12px; }