/* =============================================================================
   Seconde barre : mode d'utilisation et commandes d'administration.

   Elle vivait dans tools/assets/css/outils.css, chargee par les seules pages
   de SEARCH. La barre accompagne maintenant d'autres sous-sections du site —
   Ressources, les pages d'ENSALL, les Stages d'AVENIR, la Bibliotheque de
   BAZAR — et sa feuille devait donc sortir de la bibliotheque Outils pour
   rejoindre celles du site.

   Elle est ecrite sur les variables du site, pas sur celles de la charte
   Search : --card-bg, --text-main, --accent-main... que components/header_v2.php
   publie sur chaque page, dans les deux themes, teintees de la couleur de la
   section. C'est ce qui donne a la barre le bleu de Search, le violet
   d'Avenir, le mauve d'Ensall et le rose de Bazar sans qu'une seule couleur
   soit ecrite ici, et sans liste a tenir a jour quand une section change de
   teinte.
   ============================================================================= */

/* Deux barres collantes, l'une sous l'autre.

   La barre du site ne colle plus nulle part : elle s'en va avec le haut de
   page, et la barre de mode reste seule a accompagner la lecture. Elle se
   cale donc a zero, et non plus sous une barre qui n'y est plus.

   Une page qui voudrait retrouver l'ancien partage n'a qu'a poser
   --barre-mode-top a la hauteur de sa barre : la variable est la pour ca.

   Il faut aussi rendre le defilement au document : l'en-tete pose overflow-x:
   hidden sur html et body, ce qui en fait des boites de defilement et annule
   position:sticky pour tout leur contenu. « clip » coupe pareillement le
   debordement horizontal sans creer cette boite. La regle ne s'applique qu'aux
   pages qui portent la barre — ailleurs, rien ne change. */
html:has(.barre-mode),
body:has(.barre-mode) { overflow-x: clip; }

.barre-mode {
  position: sticky;
  top: var(--barre-mode-top, 0px);
  z-index: 100;
  /* Exactement la hauteur de la barre du site, bordure comprise — le
     box-sizing est en border-box juste en dessous. Sans cette ligne, le lisere
     du bas ajoutait un pixel et les deux barres ne faisaient plus tout a fait
     la meme hauteur. */
  height: var(--hauteur-barre, 60px);
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--card-border, #ddd);
  font-family: 'Radio Canada Big', system-ui, sans-serif;
  font-size: 15.5px;

  /* Le fond et la bordure s'estompent au lieu de changer d'un coup : la
     bascule est une action volontaire, elle merite d'etre suivie de l'oeil, et
     le passage clair/sombre doit se faire a la vitesse de tout le reste. */
  transition: background-color var(--theme-dur, .22s) var(--theme-ease, ease),
              border-color var(--theme-dur, .22s) var(--theme-ease, ease),
              color var(--theme-dur, .22s) var(--theme-ease, ease);
}

/* Hors de .archiverse-search, la barre n'herite pas du border-box de la
   charte : « width: 100% » plus le rembourrage debordait de soixante pixels et
   rognait le selecteur au bord de l'ecran. */
.barre-mode,
.barre-mode * { box-sizing: border-box; }

/* Meme colonne que la barre du site au-dessus, dont elle reprend la largeur
   maximale et la gouttiere. L'oeil suit cette verticale d'un bloc a l'autre ;
   un rembourrage fixe decalait les barres d'une dizaine de pixels par rapport
   au titre et aux cartes en dessous. */
.barre-mode__inner {
  width: 100%; max-width: var(--nav-maxw, 1320px); margin-inline: auto;
  /* Toute la hauteur de la barre, sinon « align-items: center » ne centre que
     dans le rembourrage et le contenu remonte de quelques pixels. */
  height: 100%;
  padding-inline: var(--nav-gut, clamp(1rem, 3.2vw, 2.5rem));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Ce que la charte remet a zero pour son conteneur, il faut le refaire ici.

   Le soulignement d'abord : sans cela le navigateur souligne les commandes qui
   sont des liens, et un bouton souligne n'a pas l'air d'un bouton.

   L'attribut hidden ensuite, et c'est le plus sournois : la regle du
   navigateur, [hidden] { display: none }, vient de sa feuille par defaut et
   perd contre n'importe quelle regle d'auteur. Le « display: flex » pose sur
   .barre-mode__actions la battait donc, et les commandes restaient a l'ecran
   en mode utilisateur alors que le script les avait bien masquees. Rien
   n'echouait, l'attribut etait la — il ne servait simplement a rien. */
.barre-mode a { text-decoration: none; }
.barre-mode [hidden] { display: none !important; }

.barre-mode__droite {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
}
.barre-mode__actions {
  display: flex; align-items: center; gap: .4rem;
}

/* Un <a> et un <button> ne se mesurent pas pareil : le premier est en ligne et
   suit la hauteur de sa police, le second a ses marges propres. Les commandes
   melant les deux — « Creer un outil » est un bouton, « Interne » un lien — on
   leur impose le meme gabarit plutot que de compter sur une coincidence. */
.barre-mode__actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2rem; padding: 0 .85rem;
  border: 1px solid transparent; border-radius: 10px;
  font-family: inherit; font-size: .82rem; font-weight: 560;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color var(--theme-dur, .22s) var(--theme-ease, ease),
              border-color var(--theme-dur, .22s) var(--theme-ease, ease),
              color var(--theme-dur, .22s) var(--theme-ease, ease);
}

/* Le libelle qui occupe la gauche en mode utilisateur, a la place des
   commandes. En capitales et espace : il se lit comme une etiquette et non
   comme une phrase, et ne pretend pas etre un bouton de plus. */
.barre-mode__etat {
  margin: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted, #666);
  white-space: nowrap;
}

/* ---------- mode administrateur ------------------------------------------

   Le fond prend la teinte pale de la section, pas l'accent plein : c'est un
   bandeau de signalement, pas un bouton. Les commandes, elles, sont pleines.
   L'inverse donnait des boutons en creux perdus sur un aplat vif.

   Ces teintes ne se calculent pas, elles se choisissent dans la palette.
   J'avais d'abord dilue --accent-main au melange, ce qui donnait un ton plus
   pale et plus gris que la charte : #E4E9F4 la ou Search posait #D1DFFA. Or
   chaque section porte deja ses cinq tons dans php/config_theme.php, et deux
   d'entre eux sont exactement ceux qu'il faut — la cinquieme couleur est le
   #D1DFFA de la charte au bit pres, la quatrieme son lisere #A8C0F0. Un
   melange approche ce qu'une palette donne juste.

   Les palettes sont ordonnees du fonce au clair en mode clair, et l'inverse en
   sombre. Le rang change donc avec le theme : cinquieme et quatrieme d'un
   cote, deuxieme et troisieme de l'autre. D'ou les deux blocs plutot qu'une
   seule regle — une regle unique aurait choisi le meme rang dans les deux, et
   se serait trompee dans l'un des cas. */
:root {
  --barre-fond-admin:  var(--color-5);
  --barre-ligne-admin: var(--color-4);
}
html[data-theme="dark"],
body[data-theme="dark"] {
  --barre-fond-admin:  var(--color-2);
  --barre-ligne-admin: var(--color-3);
}
.barre-mode--admin {
  background: var(--barre-fond-admin, #d1dffa);
  border-bottom-color: var(--barre-ligne-admin, #a8c0f0);
}

/* Ce qui cree : plein, comme l'action principale d'un formulaire. */
.barre-mode__actions .btn--accent {
  background: var(--accent-main, #4d6fb3); color: #fff; border-color: transparent;
}
.barre-mode__actions .btn--accent:hover { background: var(--accent-hover, #3d5b99); }

/* Ce qui mene ailleurs : clair, pose sur la teinte du bandeau. */
.barre-mode__actions .btn--clair {
  background: var(--card-bg, #fff); color: var(--text-main, #1d1d37);
  border: 1px solid var(--card-border, #ddd);
}
/* Au survol, le bouton clair s'assombrit vers la teinte du bandeau sans
   l'atteindre : arrive dessus, il disparaitrait dans le fond. */
.barre-mode__actions .btn--clair:hover {
  background: color-mix(in srgb, var(--barre-fond-admin, #d1dffa) 55%, var(--card-bg, #fff));
}

/* Le compteur porte par un bouton : combien de fiches attendent une relecture.
   Sa place est reservee dans le gabarit plutot que creee a la volee, pour que
   le bouton ne change pas de largeur au premier chiffre. */
.barre-mode .btn__n {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; margin-left: .4rem;
  border-radius: 999px;
  background: var(--accent-main, #4d6fb3); color: #fff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .7rem; font-weight: 700; line-height: 1;
}
.barre-mode .btn--accent .btn__n { background: #fff; color: var(--accent-main, #4d6fb3); }

/* ---------- le selecteur -------------------------------------------------- */

.barre-mode .roleswitch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-main, #1d1d37) 8%, transparent);
}
.barre-mode .roleswitch__opt {
  appearance: none; border: 0; cursor: pointer;
  padding: 0 .7rem; height: 1.75rem;
  border-radius: 999px; background: transparent;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--text-muted, #666); white-space: nowrap;
  transition: background-color var(--theme-dur, .22s) var(--theme-ease, ease),
              color var(--theme-dur, .22s) var(--theme-ease, ease);
}
.barre-mode .roleswitch__opt:hover { color: var(--text-main, #1d1d37); }
.barre-mode .roleswitch__opt[aria-pressed="true"] {
  background: var(--accent-main, #4d6fb3); color: #fff;
}
.barre-mode .lbl-short { display: none; }

@media (max-width: 720px) {
  /* Une seule ligne, toujours : la barre a une hauteur fixe, et un retour a la
     ligne y ferait tenir deux rangees dans la place d'une.

     Quand la place manque, ce sont les commandes qui cedent — elles defilent
     horizontalement — et jamais le selecteur : lui pousse hors de l'ecran, on
     ne pourrait plus quitter le mode administrateur, et le debordement etant
     coupe rien ne signalerait qu'il est encore la. */
  .barre-mode__inner { flex-wrap: nowrap; gap: .6rem; }
  .barre-mode__actions {
    flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto;
    /* La barre de defilement du navigateur volerait de la hauteur dans une
       barre qui n'en a pas a donner. */
    scrollbar-width: none;
  }
  .barre-mode__actions::-webkit-scrollbar { display: none; }
  .barre-mode__droite { flex: 0 0 auto; }

  /* « Admin » au lieu d'« Administrateur ». */
  .barre-mode .lbl-full { display: none; }
  .barre-mode .lbl-short { display: inline; }
}