/* La feuille des pages rendues par le serveur, sans script : les pages d'auth (la connexion, le consentement, le
   mot de passe oublié, le choix du mot de passe) et la page simple (une page introuvable, une erreur), du core comme
   des apps. Servie par le core sous /theme/console.css, après /theme/variables.css, portée par .console, posée sur
   <body>. Ses classes sont un contrat avec les pages de @indos/bibliotheque/ecran : dans une même version majeure du
   core, on en ajoute, on n'en renomme ni n'en retire aucune.
   Couleurs : toutes viennent de variables.css, calculées par le core, en clair comme en sombre : celles du thème,
   --accent-texte, --sur-accent, --erreur et --papier-du-logo pour la lisibilité, et les teintes (--surface, --survol,
   --trait, --trait-champ, --erreur-doux, --anneau-accent, --quadrillage). Quelques bordures de plus se tirent du rouge
   d'erreur par color-mix().
   La couleur porte un sens. L'accent dit ce qui est actif : ce qui a le focus, ce qui vient de réussir ; il marque,
   il n'écrit pas. Le rouge d'erreur dit une erreur. Le reste en gris.
   Le survol ne change que la couleur. */
.console {
  margin: 0;
  background: var(--papier); color: var(--encre);
  font: 14px/1.5 var(--police-texte); -webkit-font-smoothing: antialiased;
}
.console *, .console *::before, .console *::after { box-sizing: border-box; }
.console :where(a) { color: inherit; }
.console :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.console .fixe { font-family: var(--police-chasse-fixe); font-size: .93em; font-variant-numeric: tabular-nums; }
.console .discret { color: var(--gris); }

/* La marque : le logo de l'OS sur sa pastille, ou son initiale, puis son nom */
.marque { display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-decoration: none; }
.marque .logo { width: 30px; height: 30px; border-radius: 7px; background: var(--papier-du-logo); border: 1px solid var(--trait); display: grid; place-items: center; flex: none; }
.marque .logo img { width: 20px; height: 20px; display: block; }
/* L'initiale, sans logo : sur le papier de la page, à l'encre, en clair comme en sombre. Le papier
   du logo ne sert qu'à un logo aux couleurs en dur. */
.console .logo[aria-hidden="true"] { background: var(--papier); color: var(--encre); }
.auth .marque .logo { width: 44px; height: 44px; border-radius: 10px; }
.auth .marque .logo img { width: 30px; height: 30px; }
.marque .nom { font: 22px/1 var(--police-titre); letter-spacing: -.01em; }

/* Les boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--encre); background: var(--encre); color: var(--papier); font: 500 14px/1 var(--police-texte); text-decoration: none; cursor: pointer; white-space: nowrap; }
.bouton:hover { background: var(--accent-texte); border-color: var(--accent-texte); color: var(--sur-accent); }
.bouton.secondaire { background: var(--papier); color: var(--encre); border-color: var(--trait-champ); }
.bouton.secondaire:hover { background: var(--survol); border-color: var(--trait-champ); }
.bouton.discret { background: transparent; border-color: transparent; color: var(--gris); height: 30px; padding: 0 8px; }
.bouton.discret:hover { color: var(--encre); background: var(--survol); }
.bouton.large { width: 100%; }
.gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 22px; }

/* Les champs */
.formulaire { display: grid; gap: 22px; max-width: 560px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 13px; font-weight: 500; }
.champ label .facultatif { color: var(--gris); font-weight: 400; }
.champ input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--trait-champ); border-radius: 6px; background: var(--papier); color: var(--encre); font: 14px/1.4 var(--police-texte); }
.champ input:hover { border-color: var(--gris); }
.champ input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--anneau-accent); }
.champ .aide { font-size: 12.5px; color: var(--gris); margin: 0; }
.champ.en-erreur input { border-color: var(--erreur); }
.champ.en-erreur .aide { color: var(--erreur); }

/* Les messages et les étiquettes */
.message { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); margin-bottom: 20px; }
.message .signe { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); font-size: 11px; line-height: 1; margin-top: 1px; }
.message .titre { font-weight: 600; }
.message .texte { color: var(--gris); grid-column: 2; }
.message.erreur { background: var(--erreur-doux); border-color: color-mix(in srgb, var(--erreur) 40%, var(--papier)); }
.message.erreur .signe { background: var(--erreur); color: var(--papier); }
.message.erreur .titre { color: var(--encre); }
.etiquette { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--trait); color: var(--gris); font-size: 12px; font-weight: 500; white-space: nowrap; }
.etiquette::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.etiquette.active { color: var(--encre); }
.etiquette.active::before { background: var(--accent); opacity: 1; }
.etiquette.erreur { color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 40%, var(--papier)); }

/* Les listes à lignes, comme celle du consentement */
.lignes { border: 1px solid var(--trait); border-radius: 10px; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--trait); text-decoration: none; }
.ligne:first-child { border-top: 0; }
a.ligne:hover { background: var(--surface); }
.ligne .nom { font-weight: 600; }
.ligne .texte { color: var(--gris); grid-column: 1; }
.ligne .fin { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px; color: var(--gris); font-size: 13px; }

/* Les pages d'auth et la page simple : la carte centrée, sur le quadrillage */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 48px 16px; align-content: center; gap: 18px;
  background-color: var(--papier);
  background-image: linear-gradient(var(--quadrillage) 1px, transparent 1px), linear-gradient(90deg, var(--quadrillage) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px; }
.auth .marque { justify-content: center; }
.auth .marque .nom { font-size: 30px; }
.carte { width: 100%; max-width: 380px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier); padding: 28px; }
.carte h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.01em; }
.carte .sous-titre { color: var(--gris); margin: 0 0 22px; }
.carte .formulaire { gap: 16px; }
.carte .lien-secondaire { display: block; text-align: center; margin-top: 16px; color: var(--gris); font-size: 13px; }
.carte .lien-secondaire:hover { color: var(--encre); }
.auth .signature { color: var(--gris); font: 11.5px/1.4 var(--police-chasse-fixe); }

@media (max-width: 760px) {
  .ligne { grid-template-columns: minmax(0, 1fr); }
  .ligne .fin { grid-row: auto; grid-column: 1; flex-wrap: wrap; }
}