/* 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;
  /* Bouton d'action principale : bronze foncé, distinct du bleu nuit de l'en-tête (retour
     utilisateur : l'action se confondait avec le cadre) ; texte blanc, contraste d'environ 5 pour 1.
     Le bleu nuit reste la couleur du cadre (en-têtes, onglets actifs, barres de titre). */
  --bouton: #8a6a1f;
  --bouton-survol: #6f5418;
  --bouton-texte: #fff;
  --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; }
/* L'en-tête reste visible en haut de toutes les pages (retour utilisateur du 12/10/2026) ; sa
   hauteur, publiée dans --entete-haut (entete.js), place sous lui ce qui colle aussi en haut. */
body > header { position: sticky; top: 0; z-index: 20; }
/* « Déconnexion… » (entete.js), affiché dès le clic, au-dessus de tout. */
.deconnexion-voile { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(20, 33, 61, 0.45); }
.deconnexion-carte { background: var(--panel); color: var(--navy); border-radius: 12px; padding: 1rem 1.6rem; box-shadow: 0 12px 40px rgba(20, 33, 61, 0.3); font-weight: var(--graisse); }
html { scroll-padding-top: calc(var(--entete-haut, 0px) + 0.5rem); }  /* ancres, scrollIntoView */
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);
}
/* Code du client : une étiquette, sans fond (retour utilisateur : en pastille dorée, il passait pour
   un bouton depuis que les boutons d'action sont en bronze) — petites capitales or pâle, séparées
   du titre par un filet. */
header .entete-client {
  color: var(--gold-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.1rem 0.8rem 0.1rem 0; border-right: 1px solid rgba(245, 241, 230, 0.3);
  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;
}

/* Dictée vocale (dictee.js) : bouton micro — rouge et pulsé pendant l'écoute — et confirmation
   de la première utilisation (le son part chez l'éditeur du navigateur). */
button.bouton-dictee {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--panel-alt); border-radius: 6px; cursor: pointer;
  padding: 0.5rem; color: var(--navy);
}
button.bouton-dictee svg { width: 15px; height: 15px; }
button.bouton-dictee:hover { border-color: var(--navy); background: var(--panel); }
button.bouton-dictee:disabled { color: var(--muted); cursor: default; }
button.bouton-dictee.ecoute { color: #fff; background: var(--danger); border-color: var(--danger); animation: dictee-pulse 1.2s ease-in-out infinite; }
@keyframes dictee-pulse { 50% { box-shadow: 0 0 0 5px rgba(156, 59, 46, 0.18); } }
.dictee-cadre { position: relative; }
.dictee-cadre > textarea { width: 100%; box-sizing: border-box; padding-right: 2.8rem; }
.dictee-cadre > button.bouton-dictee { position: absolute; right: 0.45rem; bottom: 0.55rem; padding: 0.35rem; }
.dictee-message { font-size: var(--taille-note); color: var(--danger); margin-top: 0.3rem; }
.dictee-consentement {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 33, 61, 0.45); padding: 1rem;
}
.dictee-consentement .boite {
  max-width: 460px; background: var(--panel); color: var(--text); border-radius: 10px;
  padding: 1.2rem 1.3rem; box-shadow: 0 10px 30px rgba(20, 33, 61, 0.25); font-size: var(--taille-texte); line-height: 1.5;
}
.dictee-consentement h2 { font-family: var(--font-serif); font-size: var(--taille-titre); margin: 0 0 0.7rem; }
.dictee-consentement p { margin: 0 0 0.7rem; }
.dictee-consentement .note { font-size: var(--taille-note); color: var(--muted); }
.dictee-consentement .boutons { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.dictee-consentement .boutons button {
  border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.95rem; font-size: var(--taille-texte);
  cursor: pointer; background: var(--panel);
}
.dictee-consentement .boutons .accepter { background: var(--bouton); color: var(--bouton-texte); border-color: var(--bouton); }

/* --------------------------------------------------------------------------------------------- */
/* Signature visuelle des points d'entrée (connexions, bandeau de l'accueil) : fond marine dégradé,
   motif discret de fines lignes dorées, emblème et nom en police à empattements. */
.fond-marque {
  position: relative; overflow: hidden; color: var(--cream);
  background: linear-gradient(140deg, #101a31 0%, var(--navy) 45%, #22345a 100%);
}
.fond-marque::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9ad6a' stroke-width='0.6'%3E%3Cpath d='M0 120L120 0M-30 120L90 0M30 120L150 0'/%3E%3Ccircle cx='60' cy='60' r='44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.fond-marque::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 15%, rgba(201, 173, 106, 0.18), transparent 45%);
}
.fond-marque > * { position: relative; z-index: 1; }
.marque { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--cream); text-decoration: none; }
.marque .embleme { width: 30px; height: 30px; flex-shrink: 0; }
.marque .nom-marque { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; }
.marque.petite .embleme { width: 22px; height: 22px; }
.marque.petite .nom-marque { font-size: 1.1rem; }

/* Pages de connexion : panneau d'identité à gauche, formulaire à droite ; sur téléphone, le
   panneau devient un bandeau au-dessus du formulaire. */
.connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); background: var(--panel); }
.connexion-marque { display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem 3rem; }
.connexion-marque .accroche { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.25; margin: 2.5rem 0 1.8rem; max-width: 26rem; }
.connexion-marque .accroche em { color: var(--gold-soft); font-style: normal; }
.connexion-marque ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; max-width: 26rem; }
.connexion-marque li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: rgba(245, 241, 230, 0.88); }
.connexion-marque li svg {
  width: 32px; height: 32px; flex-shrink: 0; padding: 7px; border-radius: 50%; margin-top: -0.35rem;
  color: var(--gold-soft); background: rgba(201, 173, 106, 0.14); border: 1px solid rgba(201, 173, 106, 0.35);
}
.connexion-marque .mention { font-size: 0.74rem; color: rgba(245, 241, 230, 0.5); }
.connexion-zone { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2.5rem 1.5rem; background: #fbfaf7; }
.connexion-carte { width: 100%; max-width: 24rem; }
.connexion-carte h1 { font-family: var(--font-serif); font-size: 1.6rem; margin: 0 0 0.4rem; color: var(--navy); }
.connexion-carte .aide { color: var(--muted); font-size: 0.88rem; margin: 0 0 1.8rem; line-height: 1.45; }
.connexion-pied { margin-top: 2.5rem; font-size: 0.74rem; color: var(--muted); text-align: center; }
/* Œil dans le champ du mot de passe (mot_de_passe.js) : le mot de passe en clair tant qu'on appuie. */
.saisie-mdp { position: relative; display: flex; }
.saisie-mdp input { flex: 1; padding-right: 2.6rem !important; }
.saisie-mdp .voir-mdp {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; border-radius: 5px; color: var(--muted); cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.saisie-mdp .voir-mdp:hover, .saisie-mdp .voir-mdp.actif { color: var(--navy); }
.saisie-mdp .voir-mdp svg { width: 18px; height: 18px; pointer-events: none; }
@media (max-width: 820px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion-marque { padding: 1.6rem 1.4rem; }
  .connexion-marque .accroche { font-size: 1.35rem; margin: 1.2rem 0 1rem; }
  .connexion-marque ul, .connexion-marque .mention { display: none; }
  .connexion-zone { justify-content: flex-start; padding-top: 2rem; }
}

/* Attente d'une action de l'assistant (specifications/WEB.md § Socle commun, « Attente ») : une
   fenêtre au centre (attente.js), ou la même ligne dans une fenêtre ou une conversation. Fond
   uniforme, quel que soit le bloc qui a lancé l'action. */
@keyframes peitho-rebond { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.peitho-attente-ligne { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-size: var(--taille-texte); line-height: 1.4; }
.peitho-attente-ligne .points { display: inline-flex; gap: 5px; flex-shrink: 0; }
.peitho-attente-ligne .points span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: peitho-rebond 1.2s infinite ease-in-out; }
.peitho-attente-ligne .points span:nth-child(2) { animation-delay: 0.15s; }
.peitho-attente-ligne .points span:nth-child(3) { animation-delay: 0.3s; }
.peitho-attente-ligne .texte { flex: 1; min-width: 0; font-style: italic; }
.peitho-attente-ligne .chrono { font-family: var(--font-mono); font-size: var(--taille-note); white-space: nowrap; flex-shrink: 0; }
.peitho-attente-fond { position: fixed; inset: 0; z-index: 90; background: rgba(20, 33, 61, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.peitho-attente-fond[hidden] { display: none; }
.peitho-attente { background: var(--panel); border-radius: 12px; width: min(460px, 100%); box-shadow: 0 12px 40px rgba(20, 33, 61, 0.35); overflow: hidden; }
.peitho-attente h3 { margin: 0; padding: 0.85rem 1.2rem; background: var(--navy); color: var(--cream); font-family: var(--font-serif); font-size: var(--taille-titre); font-weight: 600; }
.peitho-attente .corps { padding: 1.2rem 1.2rem 1.1rem; }
.peitho-attente .erreur-attente { color: var(--danger); font-size: var(--taille-texte); line-height: 1.45; margin: 0; white-space: pre-line; }
.peitho-attente .boutons { display: flex; justify-content: flex-end; padding: 0 1.2rem 1.1rem; }
.peitho-attente .boutons[hidden] { display: none; }
.peitho-attente .boutons { gap: 0.5rem; }
.peitho-attente .boutons button[hidden] { display: none; }

/* Éditeur Markdown visuel (editeur.js, WEB.md § Socle commun) : le texte mis en forme, une barre
   d'outils simple ; le Markdown reste le format enregistré. */
/* Pas de `overflow: hidden` : la barre d'outils colle (sticky) ; les coins sont arrondis par
   l'en-tête et par la zone de texte. */
.peitho-editeur { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.peitho-editeur .entete-editeur { position: sticky; top: var(--editeur-haut, var(--entete-haut, 0px)); z-index: 3; border-radius: 7px 7px 0 0; background: var(--panel-alt); box-shadow: 0 1px 0 var(--border-soft); }
.peitho-editeur .entete-editeur > :first-child { border-radius: 7px 7px 0 0; }
.peitho-editeur .zone-editeur { border-radius: 0 0 7px 7px; }
.peitho-editeur:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20, 33, 61, 0.12); }
.peitho-editeur .barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; background: var(--panel-alt); border-bottom: 1px solid var(--border-soft); }
.peitho-editeur .barre-outils[hidden], .peitho-editeur .outils-tableau[hidden] { display: none; }
.peitho-editeur .barre-outils .espace { flex: 1; }
.peitho-editeur .outil { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 0.45rem; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--navy); font-size: var(--taille-texte); cursor: pointer; }
.peitho-editeur .outil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.peitho-editeur .outil svg circle, .peitho-editeur .outil svg text { fill: currentColor; stroke: none; }
.peitho-editeur .outil b, .peitho-editeur .outil i { font-family: var(--font-serif); font-size: var(--taille-titre); }
.peitho-editeur .outil:hover:not(:disabled) { background: var(--interne); }
.peitho-editeur .outil.actif { background: var(--interne); border-color: var(--gold-soft); }
.peitho-editeur .outil:disabled { opacity: 0.35; cursor: default; }
.peitho-editeur .outils-tableau { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; background: var(--interne); border-bottom: 1px solid var(--border-soft); }
.peitho-editeur .outil-texte { height: 1.7rem; font-size: var(--taille-note); border-color: var(--gold-soft); background: var(--panel); }
.peitho-editeur .ProseMirror { min-height: 10rem; padding: 0.7rem 0.9rem; outline: none; white-space: pre-wrap; overflow-wrap: break-word; }
.peitho-editeur .ProseMirror p { margin: 0 0 0.5rem; }
.peitho-editeur .ProseMirror ul, .peitho-editeur .ProseMirror ol { margin: 0 0 0.5rem; padding-left: 1.4rem; }
.peitho-editeur .ProseMirror table { border-collapse: collapse; width: 100%; margin: 0.4rem 0 0.7rem; table-layout: fixed; }
.peitho-editeur .ProseMirror th, .peitho-editeur .ProseMirror td { border: 1px solid var(--border); padding: 0.3rem 0.45rem; vertical-align: top; min-width: 3rem; position: relative; }
.peitho-editeur .ProseMirror th { background: var(--panel-alt); font-weight: 600; text-align: left; }
.peitho-editeur .ProseMirror th p, .peitho-editeur .ProseMirror td p { margin: 0; }
.peitho-editeur .ProseMirror .selectedCell { background: var(--interne); }
.peitho-editeur .ProseMirror .tableWrapper { overflow-x: auto; }

/* Titres du cahier des charges : le titre de la section est le Titre 1 (une donnée à part,
   numérotée) ; dans son texte, Titre 2 à 4 (« ## », « ### », « #### » ; « # » seul compte comme
   Titre 2) — les mêmes à l'affichage (document_md.js) et dans l'éditeur, comme les styles Word
   Titre 2 à 4. Un seul style (gras, filet doré) ; le niveau se lit au retrait (0.5em par niveau
   sous le titre de la section) et au nombre de barres dorées, une par niveau, la première dans la
   marge de la carte, sous celle du titre de la section (décision utilisateur). */
.titre-md, .peitho-editeur .ProseMirror :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-serif); font-size: var(--taille-titre); font-weight: 700; font-style: normal; color: var(--navy);
  text-transform: none; letter-spacing: normal; line-height: 1.3; position: relative;
  padding: 1em 0 0.5em; margin: 0 0 0.4rem; border-bottom: 1px solid var(--gold);
  background: none; border-radius: 0;  /* leur style à eux, quel que soit le conteneur (fenêtre…) */
}
.titre-md-1, .peitho-editeur .ProseMirror :is(h1, h2) { margin-left: 0.5em; --niveau: 2; }
.titre-md-2, .peitho-editeur .ProseMirror h3 { margin-left: 1em; --niveau: 3; }
.titre-md-3, .peitho-editeur .ProseMirror :is(h4, h5, h6) { margin-left: 1.5em; --niveau: 4; }
/* Les barres, 0.5em l'une de l'autre (décision utilisateur) : la première à 0.6em à gauche du
   texte, sous celle du titre de la section ; la dernière à 0.6em du titre. */
.titre-md::before, .peitho-editeur .ProseMirror :is(h1, h2, h3, h4, h5, h6)::before {
  content: ''; position: absolute; top: 1em; bottom: 0.5em;
  left: calc(-0.5em * (var(--niveau) - 1) - 0.6em); width: calc(0.5em * var(--niveau));
  background: repeating-linear-gradient(to right, var(--gold) 0 2px, transparent 2px 0.5em);
}
/* Le titre de la section (Titre 1) : sa barre, dans la marge de la carte. */
.titre-section { position: relative; }
.titre-section::before { content: ''; position: absolute; top: 0.15em; bottom: 0.15em; left: -0.6rem; width: 2px; background: var(--gold); }
.peitho-editeur .outil-niveau { height: 2rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--panel); color: var(--navy); font-size: var(--taille-note); padding: 0 0.3rem; margin-right: 4px; cursor: pointer; }
.peitho-editeur .outil-source { margin-left: 4px; }
.peitho-editeur .outil-source.actif { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.peitho-editeur > textarea { display: block; width: 100%; min-height: 12rem; margin: 0; border: 0; border-radius: 0; padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: var(--taille-note); line-height: 1.5; background: var(--panel-alt); resize: vertical; box-shadow: none; }
.peitho-editeur > textarea[hidden] { display: none; }
.peitho-editeur .zone-editeur[hidden] { display: none; }
.peitho-editeur .outil.bouton-dictee { padding: 0; }

/* Différence mise en forme (difference.js, PeithoDiff.rendu) : le rendu d'une section, ajouts et
   retraits marqués à l'intérieur. */
div.diff.diff-rendu { white-space: normal; }
div.diff.diff-rendu p { margin: 0 0 0.5rem; }
div.diff.diff-rendu p:last-child { margin-bottom: 0; }
div.diff.diff-rendu ul, div.diff.diff-rendu ol { margin: 0 0 0.5rem; padding-left: 1.4rem; }
div.diff.diff-rendu table { border-collapse: collapse; width: 100%; margin: 0.3rem 0 0.6rem; background: var(--panel); }
div.diff.diff-rendu th, div.diff.diff-rendu td { border: 1px solid var(--border-soft); padding: 0.25rem 0.45rem; text-align: left; vertical-align: top; }
div.diff.diff-rendu th { background: var(--panel-alt); font-weight: 600; }
div.diff.diff-rendu ins { background: #e3f1df; color: #2f5a2a; text-decoration: underline; }
div.diff.diff-rendu del { background: #f7e1dd; color: var(--danger); }
div.diff.diff-rendu .diff-forme { text-decoration: underline dotted var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------------------------- */
/* Charte typographique (retours utilisateur du 11/10/2026 : trop de tailles, puis trop de styles).
   Une page l'adopte en portant la classe `charte` sur <body> et en retirant ses styles locaux de
   texte et de boutons. Chaque style a un rôle et une seule apparence :
     titre de page   h1                serif, bleu marine
     titre de groupe .titre-groupe     capitales espacées, dorées, petites — au-dessus de plusieurs
                                       cartes, jamais dans une carte
     titre de carte  h2                serif, bleu marine
     intitulé        h3, .intitule     demi-gras : le titre d'une étape, d'une ligne, d'un tableau
     texte                             normal
     note            .note             petit, gris : aides, légendes, dates
     chiffre         .chiffre          comme le texte, chiffres alignés, demi-gras
     pastille        .pastille         petit, encadré : un état
   Deux graisses seulement, normale et demi-gras (600) ; pas de monospace hors d'un code technique.
   Boutons : secondaire par défaut, `.primaire`, `.icone`. Exceptions : en-tête, connexion.
   `:where()` : la charte donne les valeurs sans poids ; une règle de mise en page propre à la page
   (un onglet, un outil) l'emporte toujours. */
:root {
  --taille-titre-page: 1.35rem; /* le nom de la page, du fournisseur */
  --taille-titre: 1.05rem;      /* le titre d'une carte, d'une fenêtre */
  --taille-texte: 0.9rem;       /* paragraphes, tableaux, champs, boutons */
  --taille-note: 0.78rem;       /* aides, légendes, mentions secondaires, pastilles */
  --graisse: 600;               /* la seule graisse appuyée */
}
body.charte { font-size: var(--taille-texte); line-height: 1.5; }
:where(body.charte) :where(h1, h2, h3, h4, b, strong, th, dt, summary) { font-weight: var(--graisse); }
:where(body.charte) h1 { font-family: var(--font-serif); font-size: var(--taille-titre-page); color: var(--navy); margin: 0 0 0.6rem; }
:where(body.charte) h2 { font-family: var(--font-serif); font-size: var(--taille-titre); color: var(--navy); margin: 0 0 0.6rem; }
:where(body.charte) :where(h3, h4, .intitule) { font-family: var(--font-sans); font-size: var(--taille-texte); font-weight: var(--graisse); color: var(--navy); }
:where(body.charte) h3 { margin: 0.9rem 0 0.3rem; }
:where(body.charte) .titre-groupe {
  font-family: var(--font-serif); font-size: var(--taille-note); font-weight: var(--graisse);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.7rem;
}
/* Sur un fond sombre (en-tête, bandeau d'accueil), le titre garde la couleur de son cadre. */
:where(body.charte) :is(header, .bandeau) :is(h1, h2, h3) { color: inherit; }
:where(body.charte) input, :where(body.charte) select, :where(body.charte) textarea, :where(body.charte) table { font: inherit; }
:where(body.charte) table { font-variant-numeric: tabular-nums; }
:where(body.charte) .note { font-size: var(--taille-note); color: var(--muted); }
:where(body.charte) .chiffre { font-weight: var(--graisse); color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pastille : un état. Neutre par défaut ; .info (en cours, chez quelqu'un d'autre), .ok (fait),
   .action (à vous d'agir), .alerte (un problème). Alias historiques : .en_cours, .termine. */
:where(body.charte) .pastille {
  display: inline-block; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: var(--taille-note);
  font-weight: var(--graisse); line-height: 1.5; white-space: nowrap;
  border: 1px solid var(--border); color: var(--muted); background: var(--panel-alt);
}
:where(body.charte) .pastille:is(.info, .en_cours) { color: var(--info); border-color: var(--info); background: #eef3fa; }
:where(body.charte) .pastille:is(.ok, .termine) { color: var(--ok); border-color: var(--ok); background: #eef5ec; }
:where(body.charte) .pastille.action { color: #fff; border-color: var(--danger); background: var(--danger); }
:where(body.charte) .pastille.alerte { color: var(--danger); border-color: var(--danger); background: #fbf0ee; }

/* Boutons : secondaire par défaut (contour doré), `.primaire` pour l'action principale d'un bloc,
   `.icone` pour un bouton sans texte (pictogramme de 16 px, libellé dans `title`/`aria-label`).
   Un lien qui agit comme un bouton porte `a.bouton`. */
:where(body.charte) :where(button, a.bouton) {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-size: var(--taille-texte); font-weight: var(--graisse); line-height: 1.2;
  border: 1px solid var(--gold); border-radius: 6px; padding: 0.45rem 0.9rem;
  background: var(--panel); color: var(--navy); cursor: pointer; text-decoration: none;
}
:where(body.charte) :where(button, a.bouton) svg { width: 14px; height: 14px; flex-shrink: 0; }
:where(body.charte) :where(button, a.bouton):hover:not(:disabled) { background: var(--panel-alt); border-color: var(--bouton); }
:where(body.charte) :where(button, a.bouton).primaire { background: var(--bouton); color: var(--bouton-texte); border-color: var(--bouton); }
:where(body.charte) :where(button, a.bouton).primaire:hover:not(:disabled) { background: var(--bouton-survol); border-color: var(--bouton-survol); }
:where(body.charte) :where(button, a.bouton).icone { width: 30px; height: 30px; padding: 0; flex-shrink: 0; }
:where(body.charte) :where(button, a.bouton).icone svg { width: 16px; height: 16px; }
:where(body.charte) button:disabled { opacity: 0.5; cursor: default; }
:where(body.charte) [hidden] { display: none !important; }

/* Sélecteur de langue de l'interface « FR | EN » (i18n.js, WEB.md § Langue de l'interface) :
   contacts externes, pages sans compte. Sur fond clair par défaut ; dans l'en-tête, sur le bleu. */
.choix-langue-interface { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.choix-langue-interface button { font: inherit; font-size: 0.72rem; font-weight: var(--graisse); padding: 0.2rem 0.5rem; border: none; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; }
.choix-langue-interface button.actif { background: var(--navy); color: var(--cream); cursor: default; }
header .choix-langue-interface { border-color: rgba(245, 241, 230, 0.35); }
header .choix-langue-interface button { color: rgba(245, 241, 230, 0.75); }
header .choix-langue-interface button.actif { background: var(--gold); color: var(--navy); }
.connexion-zone .choix-langue-interface { align-self: flex-end; margin-bottom: 1.5rem; }