/* Socle commun des pages (specifications/WEB.md § Front : socle commun) — inclus par chaque page
   avant son propre <style>, qui garde ce qui lui est propre. La palette n'est définie qu'ici. */

:root {
  --bg: #f1efe7;
  --panel: #ffffff;
  --panel-alt: #faf8f2;
  --border: #ddd6c4;
  --border-soft: #e8e2d1;
  --text: #1b2431;
  --muted: #766f60;
  --navy: #14213d;
  --navy-soft: #24304a;
  --saisie: #eef2f8;
  --gold: #a3822f;
  --gold-soft: #c9ad6a;
  --cream: #f5f1e6;
  --danger: #9c3b2e;
  --ok: #3f6b3a;
  --action: #c2560c; /* à vous d'agir (orange) */
  --info: #2d5b94; /* en cours, chez quelqu'un d'autre (bleu) */
  --closed: #b1812f;
  --interne: #fbf3e2;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* Champs de saisie : fond bleu pâle dérivé du bleu marine (--saisie), distinct du beige des
   textes en lecture seule (--panel-alt) ; bordure et halo bleu marine au focus. */
input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
textarea, select { background-color: var(--saisie); }
input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,
textarea:focus, select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.12); }

/* Badges d'une icône de suivi (liste des besoins, MAIL_SORTANT.md §4) — sur un élément
   `position: relative` : pastille rouge en haut à droite = actions attendues d'un humain ; badge
   gris en bas à droite = volume, pour information. */
.pastille-action, .badge-info {
  position: absolute; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font-size: 0.64rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pastille-action { top: -7px; background: var(--danger); color: #fff; }
.badge-info { bottom: -7px; background: var(--border-soft); color: var(--muted); border: 1px solid var(--border); }

/* Bouton dont l'action est en cours (appel au LLM, envoi d'un mail…) : désactivé, mais avec un
   indicateur qui tourne devant son libellé — retour utilisateur : grisé seul, il laissait croire
   qu'il ne se passait plus rien. */
button.en-cours, button.en-cours:disabled { opacity: 1; cursor: progress; }
/* Libellé lisible malgré `disabled` (gris du navigateur) ; `:where` : priorité nulle, la couleur
   propre d'un bouton (bouton principal sur fond bleu marine…) l'emporte toujours. */
:where(button.en-cours:disabled) { color: var(--text); }
button.en-cours::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.5em;
  vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: peitho-tourner 0.7s linear infinite;
}
@keyframes peitho-tourner { to { transform: rotate(360deg); } }

/* En-tête commun (entete.js) : flèche de retour · badge du code client · titre en fil d'Ariane,
   libellé du besoin dessous — identique sur toutes les pages qui le déclarent (retour
   utilisateur). Fond et couleur de base : ceux de l'en-tête de chaque page (bleu marine). */
header.entete-commune { gap: 0.75rem; }
header .entete-retour, header .entete-deconnexion {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(245, 241, 230, 0.7); color: var(--cream); text-decoration: none;
}
header .entete-retour:hover, header .entete-deconnexion:hover {
  background: rgba(245, 241, 230, 0.15); border-color: var(--cream); color: var(--cream);
}
header .entete-client {
  background: var(--gold); color: var(--navy); font-size: 0.7rem; font-weight: 700;
  padding: 0.15rem 0.55rem; border-radius: 999px; letter-spacing: 0.03em; cursor: default; flex-shrink: 0;
}
header .entete-titre { display: flex; flex-direction: column; min-width: 0; }
header .entete-titre h1 {
  font-size: 1.05rem; margin: 0; font-weight: 700; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header .entete-libelle {
  font-size: 0.72rem; color: rgba(245, 241, 230, 0.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}