/* Extranet — maquettes de l'interface V1, validées le 2026-09-06.
   Palette reprise de ../../sitefaitbienfait/.claude/rules/charte-visuelle.md (bleu de travail)
   pour la continuité de marque — voir LISEZMOI.md. Contrastes mesurés le 2026-09-06 avec
   outils/contraste.js, les deux thèmes : --trait-controle et --succes retouchés, et
   --bleu-plein/--bleu-plein-vif introduits pour le fond des boutons pleins (voir plus bas). */

:root {
  --plan: #eceff3;
  --plan-creux: #e2e7ec;
  --encre: #101d2a;
  --encre-doux: #4a5c6e;
  --trait: #ccd6de;
  --trait-controle: #5e7688;
  --bleu: #27458c;
  --bleu-vif: #3a63c0;
  /* Fond des boutons pleins (texte blanc dessus) : ne varie PAS avec le thème, à la différence
     de --bleu/--bleu-vif qui s'éclaircissent en sombre pour rester lisibles en texte sur --plan.
     Un bouton plein avec le --bleu éclairci du thème sombre ne tiendrait plus les 4,5:1 requis
     pour du texte blanc (mesuré à 2,37:1) — voir docs/suivi/2026-09-06-verification-technique-maquettes.md. */
  --bleu-plein: #27458c;
  --bleu-plein-vif: #1d356b;
  --erreur: #b3402f;
  --succes: #21734e;
  --fond-champ: #f4f6f8;
  --papier: #ffffff;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --largeur: 44rem;
  --marge: clamp(1.1rem, 4vw, 2rem);
  --rayon: 10px;
  --transition: 220ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* Réglage système, sauf choix explicite du clair (voir la garde plus bas). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --plan: #0d1720;
    --plan-creux: #101d28;
    --encre: #e7edf2;
    --encre-doux: #94a7b8;
    --trait: #23384a;
    --trait-controle: #50728b;
    --bleu: #8aa8ea;
    --bleu-vif: #a5bdf3;
    --erreur: #e2705c;
    --succes: #4dcb92;
    --fond-champ: #16242f;
    --papier: #101d2a;
  }
}

/* Un choix explicite gagne toujours, dans les deux sens. */
:root[data-theme="sombre"] {
  --plan: #0d1720;
  --plan-creux: #101d28;
  --encre: #e7edf2;
  --encre-doux: #94a7b8;
  --trait: #23384a;
  --trait-controle: #50728b;
  --bleu: #8aa8ea;
  --bleu-vif: #a5bdf3;
  --erreur: #e2705c;
  --succes: #4dcb92;
  --fond-champ: #16242f;
  --papier: #101d2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plan);
  color: var(--encre);
  font: 400 1rem/1.55 var(--sans);
}

a { color: var(--bleu); }
a:hover { color: var(--bleu-vif); }

:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
}

.evitement {
  position: absolute; left: -999px; top: auto;
  background: var(--papier); color: var(--encre);
  padding: .6rem 1rem; border-radius: var(--rayon);
  z-index: 100;
}
.evitement:focus {
  left: var(--marge); top: var(--marge);
}

.page {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge) 3rem;
}

/* --- En-tête et onglets du client -------------------------------------- */
.entete {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: 1.25rem 0 .9rem;
  border-bottom: 1px solid var(--trait);
}
.entete .marque {
  display: flex; align-items: center; gap: .5rem;
  font: 700 .95rem/1.2 var(--sans);
  letter-spacing: -0.01em;
  margin: 0;
}
.entete .marque a {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--encre); text-decoration: none;
}
.entete .marque a:hover { color: var(--bleu); }
.entete .sigle { flex: none; }
.entete .marque .client { color: var(--encre-doux); font-weight: 400; }
.entete .actions-entete { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.bascule-theme, .lien-discret {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 .8rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre-doux);
  font: 600 .8rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
}
.bascule-theme:hover, .lien-discret:hover { color: var(--encre); border-color: var(--trait-controle); }
/* Un contrôle posé par JS ne s'affiche que si le script a tourné (sinon on propose une
   commande sans effet) — mais `display: inline-flex` ci-dessus bat sinon la règle UA
   `[hidden]{display:none}`, à spécificité égale et déclarée avant. Vu chez marben. */
.bascule-theme[hidden] { display: none; }

.onglets {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin: 0 0 1.75rem; padding: 0; list-style: none;
  border-bottom: 1px solid var(--trait);
}
.onglets a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 .9rem;
  color: var(--encre-doux); text-decoration: none;
  font: 600 .88rem/1 var(--sans);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.onglets a:hover { color: var(--encre); }
.onglets a[aria-current="page"] {
  color: var(--bleu); border-bottom-color: var(--bleu);
}

/* --- Étiquette de type d'élément — texte + repère, jamais la couleur seule */
.type {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 600 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-doux);
}
.type::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 999px;
  border: 1.5px solid currentColor; flex: none;
}
.type.action-requise { color: var(--bleu); }
.type.action-requise::before { background: currentColor; }

/* --- Le fil -------------------------------------------------------------- */
.fil-titre, .planning-titre, .documents-titre {
  font: 700 1.3rem/1.35 var(--sans); margin: 1.5rem 0 1.25rem;
}

.fil { list-style: none; margin: 0; padding: 0; }
.fil > li {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--trait);
}
.fil > li:first-child { padding-top: 0; }

.fil .entete-element {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .35rem;
}
.fil .marque-repondu {
  margin-left: auto; color: var(--succes); font-size: .78rem; font-weight: 600;
}
.fil .marque-repondu + .date { margin-left: 0; }
.fil .date {
  margin-left: auto; color: var(--encre-doux); font-size: .82rem; font-variant-numeric: tabular-nums;
}
.fil h2 {
  font: 600 1.05rem/1.35 var(--sans); margin: .1rem 0 .35rem;
}
.fil h2 a { color: var(--encre); text-decoration: none; }
.fil h2 a:hover { color: var(--bleu); text-decoration: underline; }
.fil p { margin: 0; color: var(--encre-doux); font-size: .92rem; }

.appel-reponse {
  margin-top: .6rem; padding: .6rem .8rem;
  background: var(--plan-creux); border-left: 3px solid var(--bleu);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: .88rem; color: var(--encre);
}

/* --- Formulaire de connexion --------------------------------------------- */
.connexion {
  max-width: 24rem; margin: 3rem auto 0;
  padding: 2rem 1.75rem;
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.connexion h1.marque-connexion {
  display: flex; align-items: center; gap: .6rem;
  font: 700 1.3rem/1.3 var(--sans); margin: 0 0 .3rem;
}
.connexion .sous-titre { margin: 0 0 1.5rem; color: var(--encre-doux); font-size: .92rem; }

.champ { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.champ label { font: 600 .85rem/1.3 var(--sans); }
.champ input {
  min-height: 2.75rem; padding: .55rem .7rem;
  border: 1px solid var(--trait-controle); border-radius: var(--rayon);
  background: var(--fond-champ); color: var(--encre); font: inherit;
}
.champ input:focus { background: var(--papier); }

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--bleu-plein); border-radius: var(--rayon);
  background: var(--bleu-plein); color: #fff;
  font: 600 .92rem/1 var(--sans); cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.bouton:hover { background: var(--bleu-plein-vif); border-color: var(--bleu-plein-vif); }

.mot-de-passe-oublie { display: block; margin-top: 1rem; text-align: center; font-size: .88rem; }

.pied-connexion {
  margin: 1.5rem auto 0; max-width: 24rem;
  text-align: center; font-size: .8rem; color: var(--encre-doux);
}

/* --- Détail d'un élément (proposition à examiner) ------------------------ */
.retour { display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1.25rem; font-size: .88rem; text-decoration: none; color: var(--encre-doux); }
.retour:hover { color: var(--encre); }

.detail h1 { font: 700 1.5rem/1.35 var(--sans); margin: .2rem 0 .3rem; }
.detail .meta { color: var(--encre-doux); font-size: .85rem; margin: 0 0 1.5rem; }
.detail .corps { font-size: .98rem; }
.detail .corps p { margin: 0 0 1rem; }

.apercu-piece {
  margin: 1.5rem 0; padding: 1.25rem;
  border: 1px dashed var(--trait-controle); border-radius: var(--rayon);
  background: var(--plan-creux); text-align: center; color: var(--encre-doux);
}
.apercu-piece .nom-fichier { display: block; margin-top: .4rem; font: 600 .82rem var(--mono); color: var(--encre); }

.reponse-attendue {
  margin: 1.75rem 0; padding: 1rem 1.2rem;
  background: var(--plan-creux); border-left: 4px solid var(--bleu);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.reponse-attendue p { margin: 0 0 .5rem; }
.reponse-attendue p:last-child { margin-bottom: 0; }
.reponse-attendue .echeance { font-weight: 600; }

.note-v1 { margin-top: 2rem; font-size: .82rem; color: var(--encre-doux); }

/* --- Réponse du client, en page --------------------------------------- */
.reponse-client {
  margin: 1.75rem 0; padding: 1.25rem 1.4rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier);
}
.reponse-client h2 { font: 700 1.05rem/1.3 var(--sans); margin: 0 0 1.1rem; }

.question {
  margin: 0 0 1.4rem; padding: 0; border: 0;
}
.question:last-of-type { margin-bottom: 1.1rem; }
.question > .intitule {
  display: block; padding: 0; font-weight: 600; margin-bottom: .55rem;
  font-size: 1rem; color: var(--encre);
}

.choix-liste { display: flex; flex-direction: column; gap: .4rem; }
.choix-liste label {
  display: flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; cursor: pointer; font-size: .95rem;
}
.choix-liste input[type="radio"] {
  width: 1.15rem; height: 1.15rem; accent-color: var(--bleu); flex: none;
}

.question textarea {
  width: 100%; min-height: 6rem; padding: .6rem .7rem;
  border: 1px solid var(--trait-controle); border-radius: var(--rayon);
  background: var(--fond-champ); color: var(--encre); font: inherit; resize: vertical;
}
.question textarea:focus { background: var(--papier); }

.note-sauvegarde { margin-top: .9rem; font-size: .82rem; color: var(--encre-doux); }

/* --- Réponse déjà donnée, en lecture seule ------------------------------ */
.reponse-donnee {
  margin: 1.75rem 0; padding: 1.25rem 1.4rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--plan-creux);
}
.reponse-donnee h2 { font: 700 1.05rem/1.3 var(--sans); margin: 0 0 .3rem; }
.reponse-donnee .quand { color: var(--encre-doux); font-size: .85rem; margin: 0 0 1.1rem; }
.reponse-donnee dl { margin: 0; }
.reponse-donnee dt { font-weight: 600; margin-top: .9rem; }
.reponse-donnee dt:first-child { margin-top: 0; }
.reponse-donnee dd { margin: .2rem 0 0; color: var(--encre); }

/* --- Planning actuel ------------------------------------------------------ */
.commentaire-planning {
  margin: 0 0 1.5rem; padding: .9rem 1.1rem;
  background: var(--plan-creux); border-radius: var(--rayon);
  font-size: .92rem;
}

.jalons { list-style: none; margin: 0; padding: 0; }
.jalons > li {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  padding: .9rem 0; border-bottom: 1px solid var(--trait);
}
.jalons .nom { font-weight: 600; margin-right: auto; }
.jalons .date-prevue { color: var(--encre-doux); font-size: .85rem; font-variant-numeric: tabular-nums; }

.etat {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 .68rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.etat::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; border: 1.5px solid currentColor; flex: none; }
.etat.a-venir { color: var(--encre-doux); }
.etat.en-cours { color: var(--bleu); }
.etat.en-cours::before { background: currentColor; }
.etat.fait { color: var(--succes); }
.etat.fait::before { border: 0; width: auto; height: auto; content: "✓"; font-size: .8rem; }
.etat.en-retard { color: var(--erreur); }
.etat.en-retard::before { background: currentColor; }

/* --- Accueil (tableau de bord) -------------------------------------------- */
.accueil-titre {
  font: 700 1.4rem/1.35 var(--sans); margin: 1.5rem 0 .3rem;
}
.accueil-sous-titre { margin: 0 0 2rem; color: var(--encre-doux); }

.section-titre {
  display: flex; align-items: baseline; gap: .6rem;
  font: 600 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-doux);
  margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--trait);
}
.section-titre .compte {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--bleu-plein); color: #fff;
  font: 600 .72rem/1 var(--sans); letter-spacing: normal; text-transform: none;
}

.section-accueil { margin: 0 0 2.5rem; }
.section-accueil:last-child { margin-bottom: 0; }

/* Une demande en attente : ligne de registre, pas une carte — même principe que .fil. */
.attente { list-style: none; margin: 0; padding: 0; }
.attente > li {
  padding: 1rem 0; border-bottom: 1px solid var(--trait);
}
.attente > li:last-child { border-bottom: 0; }
.attente h3 { font: 600 1rem/1.35 var(--sans); margin: 0 0 .3rem; }
.attente h3 a { color: var(--encre); text-decoration: none; }
.attente h3 a:hover { color: var(--bleu); text-decoration: underline; }
.attente p { margin: 0 0 .5rem; color: var(--encre-doux); font-size: .9rem; }
.attente .echeance { color: var(--bleu); font-weight: 600; font-size: .85rem; }
.aucune-attente {
  padding: 1rem 0; color: var(--encre-doux); font-size: .92rem;
}

/* Un projet du client — même logique de ligne, avec ses liens rapides en dessous. */
.projets { list-style: none; margin: 0; padding: 0; }
.projets > li { padding: 1.1rem 0; border-bottom: 1px solid var(--trait); }
.projets > li:last-child { border-bottom: 0; }
.projets h3 { font: 700 1.1rem/1.3 var(--sans); margin: 0 0 .3rem; }
.projets h3 a { color: var(--encre); text-decoration: none; }
.projets h3 a:hover { color: var(--bleu); text-decoration: underline; }
.projets p { margin: 0 0 .7rem; color: var(--encre-doux); font-size: .9rem; }
.liens-projet { display: flex; flex-wrap: wrap; gap: .5rem; }
.liens-projet a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 .9rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  color: var(--encre-doux); text-decoration: none; font: 600 .85rem/1 var(--sans);
}
.liens-projet a:hover { color: var(--encre); border-color: var(--trait-controle); }

/* --- Documentation --------------------------------------------------------- */
.documents { list-style: none; margin: 0; padding: 0; }
.documents > li {
  padding: 1.1rem 0; border-bottom: 1px solid var(--trait);
}
.documents h2 { font: 600 1rem/1.35 var(--sans); margin: 0 0 .3rem; }
.documents h2 a { color: var(--encre); text-decoration: none; }
.documents h2 a:hover { color: var(--bleu); text-decoration: underline; }
.documents p { margin: 0; color: var(--encre-doux); font-size: .9rem; }
.documents .date-ajout { display: block; margin-top: .35rem; font-size: .78rem; color: var(--encre-doux); }

/* --- Informations du projet (accès, caractéristiques) ----------------------
   Ajouté le 2026-09-07, rattaché à la maquette de l'accueil — brouillon, contrastes et clavier
   pas encore vérifiés (voir LISEZMOI.md). Une carte sur l'accueil (.carte-info-projet), un
   panneau latéral partout ailleurs (.info-projet), le même gabarit de champs pour les deux
   (.champs-info-projet) — voir ../specifications/01-types-de-contenu.md, section 6. */
.nav-projet {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--trait);
}
.nav-projet .onglets { margin: 0; border-bottom: 0; }

.bouton-info-projet {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem; padding: 0 .9rem; margin-bottom: .4rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre-doux);
  font: 600 .82rem/1 var(--sans); cursor: pointer; flex: none;
}
.bouton-info-projet:hover { color: var(--encre); border-color: var(--trait-controle); }

/* Panneau latéral (slide-over) et son voile — masqués par défaut via visibility, pas [hidden],
   pour pouvoir animer l'entrée/la sortie ; visibility:hidden retire déjà l'un et l'autre du
   parcours clavier et de l'arbre d'accessibilité sans aide supplémentaire. */
.voile {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 14, 20, .45);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility 0s linear var(--transition);
}
.voile.visible {
  opacity: 1; visibility: visible;
  transition: opacity var(--transition);
}

.info-projet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(24rem, 100vw);
  background: var(--papier); border-left: 1px solid var(--trait);
  box-shadow: -12px 0 28px rgba(8, 14, 20, .2);
  padding: 1.5rem; overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--transition), visibility 0s linear var(--transition);
}
.info-projet.ouvert {
  transform: translateX(0); visibility: visible;
  transition: transform var(--transition);
}
body.info-projet-ouvert { overflow: hidden; }

.info-projet-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 1.25rem;
}
.info-projet-entete h2 { font: 700 1.05rem/1.3 var(--sans); margin: 0; }
.info-projet-fermer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre-doux); cursor: pointer;
}
.info-projet-fermer:hover { color: var(--encre); border-color: var(--trait-controle); }

/* Gabarit de champs, partagé par le panneau et la carte de l'accueil. */
.champs-info-projet { margin: 0; }
.champ-info-projet { padding: .9rem 0; border-bottom: 1px solid var(--trait); }
.champ-info-projet:first-child { padding-top: 0; }
.champ-info-projet:last-child { border-bottom: 0; }
.champ-info-projet dt { font: 600 .78rem/1.3 var(--sans); color: var(--encre-doux); margin: 0 0 .35rem; }
.champ-info-projet dd {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .92rem; color: var(--encre);
}
.champ-info-projet dd > .valeur { overflow-wrap: anywhere; margin-right: auto; }
.champ-info-projet.notes dd { display: block; color: var(--encre-doux); }

.icones-champ { display: flex; gap: .3rem; flex: none; }
.icone-champ {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier); color: var(--encre-doux); cursor: pointer;
}
.icone-champ:hover { color: var(--encre); border-color: var(--trait-controle); }

/* Carte compacte sur l'accueil : mêmes champs, présentation resserrée. */
.carte-info-projet {
  margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--plan-creux);
}
.carte-info-projet h4 {
  font: 600 .78rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: var(--encre-doux); margin: 0 0 .6rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- V0 : accès par code, ressources, remarques envoyées (2026-11-14) ----- */
.champ input.code {
  font: 600 1.15rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.champ .aide { font-size: .8rem; color: var(--encre-doux); margin: 0; }
.message-erreur {
  margin: 0 0 1.1rem; padding: .6rem .8rem;
  border-left: 3px solid var(--erreur); border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--plan-creux); color: var(--encre); font-size: .88rem;
}
.message-erreur strong { color: var(--erreur); }

.acces-actuel { margin: -.6rem 0 1.5rem; font-size: .82rem; color: var(--encre-doux); }

.fil .actions-ressource {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .8rem;
}
.bouton.compact { width: auto; padding: .5rem 1.1rem; text-decoration: none; }
.fil .compte-remarques { font-size: .85rem; color: var(--encre-doux); }
.vide { color: var(--encre-doux); font-size: .95rem; }

.envoi .entete-element .auteur { font-weight: 600; font-size: .9rem; }
.envoi .ressource-envoi { margin: 0 0 .6rem; font-size: .85rem; color: var(--encre-doux); }
.liste-remarques { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.liste-remarques li {
  padding: .7rem .85rem; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--papier);
}
.liste-remarques .cible { display: block; font-size: .8rem; color: var(--encre-doux); margin-bottom: .25rem; }
.liste-remarques .texte { margin: 0; color: var(--encre); font-size: .92rem; white-space: pre-line; }


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Repère de l'environnement de recette : jamais affiché en production. */
.badge-recette {
  display: inline-flex; align-items: center; padding: .15rem .5rem; margin-left: .4rem;
  border: 1.5px solid var(--erreur); border-radius: 999px;
  color: var(--erreur); font: 600 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.actions-entete form { margin: 0; }