/* Tacio – feuille de style du portail (d'après la maquette) */
/* Charte Tacio « Le sceau » : bleu encre, laiton, blanc cassé – Fraunces + IBM Plex Sans (14 oct. 2026) */
:root {
  --fond: #F4F5F7;
  --surface: #FFFFFF;
  --encre: #1B2A44;
  --discret: #5A6478;
  --trait: #DDE1E8;
  --trait-fort: #C8CED8;
  --trait-doux: #ECEEF2;
  --accent: #1B2A44;
  --accent-fonce: #0E1626;
  --accent-doux: #E8ECF3;
  --laiton: #B08D57;
  --laiton-fonce: #7A5C2E;
  --laiton-doux: #F4EEE3;
  --nuit: #1B2A44;
  --nuit-2: #2A3B5A;
  --nuit-texte: #C9D0DC;
  --ocre: #7A5C2E;
  --ocre-doux: #F4EEE3;
  --rouge: #8E2A1C;
  --rouge-doux: #F8E4E0;
  --vert: #2E6B4F;
  --vert-doux: #E2EFE7;
  --titres: "Fraunces", Georgia, "Times New Roman", serif;
  --texte: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

/* Polices auto-hébergées dans static/polices (aucun appel à Google) */
@font-face { font-family: "Fraunces"; src: url("polices/Fraunces.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("polices/IBMPlexSans.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 2px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* En-tête */
.entete { background: var(--surface); border-bottom: 1px solid var(--trait); }
.entete-int { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.logo span.nom { font-family: var(--titres); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.badge-beta { font-size: 12px; font-weight: 600; color: var(--ocre); background: var(--ocre-doux); border-radius: 999px; padding: 2px 10px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.nav a { padding: 10px 14px; border-radius: 8px; text-decoration: none; color: var(--discret); font-weight: 500; }
.nav a[aria-current="page"] { color: var(--encre); font-weight: 600; background: var(--accent-doux); }
.etat { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--discret); }
.etat .point { width: 10px; height: 10px; border-radius: 50%; background: #A9B2AC; }
.etat[data-etat="ok"] .point { background: #2E8B57; }
.etat[data-etat="indisponible"] .point { background: #C0392B; }

.contenu { max-width: 1200px; margin: 0 auto; padding: 48px 24px 64px; display: flex; flex-direction: column; gap: 56px; }
.contenu.serre { padding-top: 28px; gap: 24px; }

/* Accueil */
.salut h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; }
.salut p { margin: 6px 0 0; font-size: 18px; color: var(--discret); }
.compositeur { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 2px rgba(27,42,68,.06); }
.compositeur.survol { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.compositeur label.titre { font-size: 14px; font-weight: 600; }
.compositeur textarea { border: none; outline: none; resize: vertical; min-height: 84px; font: inherit; font-size: 17px; color: var(--encre); background: transparent; padding: 0; }
.barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.barre .gauche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bouton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre); font-size: 15px; text-decoration: none; }
.bouton:hover { border-color: var(--trait-fort); background: #F8F9FB; color: var(--encre); }
.bouton.primaire { border: none; background: var(--accent); color: #fff; font-weight: 600; padding: 0 22px; }
.bouton.primaire:hover { background: var(--accent-fonce); color: #fff; }
.bouton.contour { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.bouton.icone { width: 44px; padding: 0; color: var(--discret); }
.bouton.icone[aria-pressed="true"] { background: var(--accent-doux); border-color: var(--accent); color: var(--accent); }
.confiance { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); font-weight: 500; }

.puces-docs { display: flex; flex-wrap: wrap; gap: 8px; }
.puce-doc { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--fond); font-size: 14px; max-width: 100%; }
.puce-doc .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; font-weight: 600; }
.puce-doc .info { color: var(--discret); }
.puce-doc button { width: 32px; height: 32px; border: none; background: transparent; color: var(--discret); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.puce-doc button:hover { background: var(--trait-doux); }
.puce-doc.charge { opacity: .7; }

.section-titre { font-size: 22px; }
.moteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.moteur { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; background: var(--nuit); color: #fff; text-decoration: none; border: none; text-align: left; }
.moteur:hover { background: #22355A; color: #fff; }
.moteur .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--nuit-2); display: flex; align-items: center; justify-content: center; }
.moteur .t { font-family: var(--titres); font-size: 20px; font-weight: 600; }
.moteur .d { font-size: 15px; color: var(--nuit-texte); }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre); font-size: 15px; font-weight: 500; }
.filtre[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.grille-recettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.carte { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; min-height: 150px; }
.carte:hover { border-color: var(--accent); color: var(--encre); box-shadow: 0 2px 8px rgba(27,42,68,.06); }
.carte .haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.carte .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-doux); display: flex; align-items: center; justify-content: center; }
.carte .t { font-family: var(--titres); font-weight: 600; font-size: 17px; line-height: 1.3; }
.carte .d { font-size: 14px; color: var(--discret); line-height: 1.45; }
.carte.bientot { opacity: .75; }
.etiquette { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.etiquette.commun { color: var(--discret); background: var(--fond); }
.etiquette.metier { color: var(--ocre); background: var(--ocre-doux); }
.etiquette.bientot { color: var(--discret); background: var(--trait-doux); }

.bas-accueil { display: flex; flex-wrap: wrap; gap: 24px; }
.bas-accueil .principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.liste { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; display: flex; flex-direction: column; }
.liste a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 16px 20px; text-decoration: none; color: var(--encre); border-bottom: 1px solid var(--trait-doux); }
.liste a:last-child { border-bottom: none; }
.liste a span:first-child { font-weight: 600; }
.liste a span:last-child { color: var(--discret); font-size: 14px; }
.liste .vide { padding: 16px 20px; color: var(--discret); }
.encart { flex: 1 1 300px; min-width: 0; background: var(--accent-doux); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-self: flex-start; }
.encart p { margin: 0; font-size: 15px; color: #2A3650; }
.encart textarea { min-height: 80px; border-radius: 10px; border: 1px solid var(--trait-fort); padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; }

.pied { border-top: 1px solid var(--trait); }
.signature-pied { font-style: italic; }
.auth-gauche .signature { margin: 8px 0 0; font-size: 14px; font-style: italic; color: #D9C29A; letter-spacing: 0.01em; }
.pied-int { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--discret); }

/* Écran recette */
.fil { font-size: 14px; color: var(--discret); display: flex; flex-wrap: wrap; gap: 6px; }
.titre-recette { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.titre-recette h1 { font-size: 32px; letter-spacing: -0.02em; }
.aide { margin: 6px 0 0; color: var(--discret); max-width: 760px; }
.deux-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.panneau { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bloc h2 { font-size: 16px; }
.depot { min-height: 88px; border-radius: 10px; border: 1.5px dashed #B5BCC8; background: transparent; color: var(--accent); font-size: 15px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; }
.depot small { color: var(--discret); font-weight: 400; }
.depot.survol { border-color: var(--accent); background: var(--accent-doux); }
.case { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); }
.zone-resultat { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.echange { display: flex; flex-direction: column; gap: 16px; }
.msg-user { align-self: flex-end; max-width: 85%; background: var(--accent-doux); border-radius: 14px 14px 4px 14px; padding: 12px 16px; white-space: pre-wrap; }
.reponse { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.reponse .meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reponse .meta .duree { font-size: 13px; color: var(--discret); }
.texte-md { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.texte-md > :first-child { margin-top: 0; }
.texte-md > :last-child { margin-bottom: 0; }
.texte-md h1, .texte-md h2, .texte-md h3 { font-size: 18px; margin: 20px 0 8px; }
.texte-md ul, .texte-md ol { padding-left: 22px; }
.texte-md hr { border: none; border-top: 1px solid var(--trait); margin: 18px 0; }
.texte-md table { border-collapse: collapse; width: 100%; font-size: 15px; }
.texte-md th, .texte-md td { border: 1px solid var(--trait-doux); padding: 8px 10px; text-align: left; vertical-align: top; }
.texte-md th { background: var(--fond); }
.texte-md .tableau-defile { overflow-x: auto; }
.curseur::after { content: "▍"; color: var(--accent); animation: clign 1s steps(2) infinite; }
@keyframes clign { 50% { opacity: 0; } }
.attente { display: flex; align-items: center; gap: 12px; color: var(--discret); }
.attente .rond { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--trait); border-top-color: var(--accent); animation: tourne .9s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

.tableau-box { overflow-x: auto; border: 1px solid var(--trait-doux); border-radius: 12px; }
.tableau-box table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.tableau-box th { background: var(--fond); text-align: left; padding: 12px 16px; font-weight: 600; }
.tableau-box td { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--trait-doux); }
.tableau-box td:first-child { font-weight: 600; }
.tableau-box td:last-child { white-space: nowrap; }
.vig { display: inline-block; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.vig.elevee { color: var(--rouge); background: var(--rouge-doux); }
.vig.moyenne { color: var(--ocre); background: var(--ocre-doux); }
.vig.faible { color: var(--vert); background: var(--vert-doux); }
.note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--fond); font-size: 14px; color: #2A3650; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .espace { flex: 1 1 auto; }
.suite { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; padding: 12px 12px 12px 18px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.suite textarea { flex: 1 1 300px; min-width: 0; border: none; outline: none; resize: none; font: inherit; font-size: 16px; color: var(--encre); background: transparent; min-height: 44px; max-height: 240px; padding: 10px 0; }
.erreur { padding: 14px 16px; border-radius: 12px; background: var(--rouge-doux); color: var(--rouge); font-weight: 500; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--nuit); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 10; }

@media (max-width: 640px) {
  .contenu { padding: 28px 16px 48px; gap: 40px; }
  .entete-int, .pied-int { padding-left: 16px; padding-right: 16px; }
  .salut h1 { font-size: 30px; }
  .titre-recette h1 { font-size: 26px; }
  .reponse { padding: 18px; }
}

/* Compte connecté */
.compte { display: flex; align-items: center; gap: 10px; }
.compte .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.compte-txt { display: flex; flex-direction: column; line-height: 1.25; }
.compte-txt span:first-child { font-weight: 600; font-size: 14px; }
.compte-txt span:last-child { font-size: 13px; color: var(--discret); }
.compte .bouton { min-height: 36px; padding: 0 12px; font-size: 13px; }
.liste .ligne-dossier { display: flex; align-items: center; border-bottom: 1px solid var(--trait-doux); }
.liste .ligne-dossier:last-child { border-bottom: none; }
.liste .ligne-dossier a { flex: 1 1 auto; border-bottom: none; }
.liste .ligne-dossier button { width: 44px; height: 44px; margin-right: 8px; border: none; background: transparent; color: var(--discret); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.liste .ligne-dossier button:hover { background: var(--rouge-doux); color: var(--rouge); }
@media (max-width: 640px) { .compte-txt { display: none; } }

/* ---------- Pages d'authentification ---------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-gauche { flex: 1 1 420px; min-width: 0; background: var(--nuit); color: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-gauche h1 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; max-width: 520px; }
.auth-gauche ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 17px; color: #DCE2EC; max-width: 520px; }
.auth-gauche li { display: flex; gap: 12px; align-items: flex-start; }
.auth-gauche .logo { color: #fff; }
.auth-gauche .petit { font-size: 14px; color: #A9B3C4; margin: 0; }
.auth-droite { flex: 1 1 420px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-boite { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.auth-boite h2 { font-size: 28px; }
.auth-boite p { margin: 0; color: var(--discret); }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-weight: 600; font-size: 15px; }
.champ input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #B5BCC8; background: #fff; font: inherit; font-size: 16px; color: var(--encre); }
.champ input:focus { outline: 3px solid var(--laiton); outline-offset: 1px; border-color: var(--accent); }
.champ .aide-champ { font-size: 13px; color: var(--discret); }
.code-input { letter-spacing: 0.4em; font-size: 22px !important; text-align: center; font-variant-numeric: tabular-nums; }
.bouton.large { width: 100%; min-height: 48px; }
.message-erreur { padding: 12px 14px; border-radius: 10px; background: var(--rouge-doux); color: var(--rouge); font-weight: 500; font-size: 15px; }
.message-ok { padding: 12px 14px; border-radius: 10px; background: var(--accent-doux); color: var(--accent-fonce); font-weight: 500; font-size: 15px; }
.qr { align-self: center; background: #fff; padding: 12px; border-radius: 12px; border: 1px solid var(--trait); }
.qr svg { display: block; width: 220px; height: 220px; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: var(--fond); padding: 10px 12px; border-radius: 8px; word-break: break-all; color: var(--encre); }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 16px; background: var(--fond); padding: 14px; border-radius: 10px; }
.etapes { display: flex; gap: 8px; font-size: 13px; color: var(--discret); }
.etapes span { padding: 4px 10px; border-radius: 999px; background: var(--trait-doux); }
.etapes span.active { background: var(--accent); color: #fff; font-weight: 600; }
.lien-discret { font-size: 14px; color: var(--discret); }

/* ---------- En-tête : compte ---------- */
.compte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compte .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.compte-txt { display: flex; flex-direction: column; line-height: 1.25; }
.compte-txt span:first-child { font-weight: 600; font-size: 14px; }
.compte-txt span:last-child { font-size: 13px; color: var(--discret); }
.compte a.bouton { font-size: 14px; min-height: 40px; }

/* ---------- Administration ---------- */
.grille-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.formulaire-ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.formulaire-ligne .champ { flex: 1 1 180px; }
.formulaire-ligne select { min-height: 48px; padding: 0 12px; border-radius: 10px; border: 1px solid #B5BCC8; font: inherit; font-size: 15px; background: #fff; }
table.admin { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
table.admin th { text-align: left; background: var(--fond); padding: 10px 12px; font-weight: 600; white-space: nowrap; }
table.admin td { padding: 10px 12px; border-top: 1px solid var(--trait-doux); vertical-align: top; }
table.admin .bouton { min-height: 36px; font-size: 13px; padding: 0 12px; }
.pastille { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pastille.ok { color: var(--vert); background: var(--vert-doux); }
.pastille.non { color: var(--rouge); background: var(--rouge-doux); }
.pastille.attente { color: var(--ocre); background: var(--ocre-doux); }
.lien-activation { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px; border-radius: 12px; background: var(--ocre-doux); }
.lien-activation code { flex: 1 1 320px; min-width: 0; word-break: break-all; font-size: 13px; background: #fff; padding: 8px 10px; border-radius: 8px; }

.fiab { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; margin-top: 8px; width: fit-content; }
.fiab.eprouvee { color: #1f6b3a; background: #e3f3e8; }
.fiab.test { color: #8a5a00; background: #fbefd5; }

/* Logo Tacio */
.logo img { display: block; width: auto; }
.logo .logo-sceau { display: none; }
@media (max-width: 640px) { .logo .logo-large { display: none; } .logo .logo-sceau { display: block; } }

/* ---------- Charte Tacio : touches de laiton ---------- */
.entete { border-top: 3px solid var(--laiton); }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; }
.salut h1, .titre-recette h1, .auth-gauche h1 { letter-spacing: -0.01em; }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--laiton); }
.badge-beta { color: var(--laiton-fonce); background: var(--laiton-doux); border: 1px solid #E3D3B5; }
.moteur { border-top: 3px solid var(--laiton); }
.moteur .ico { background: transparent; border: 1.5px solid var(--laiton); border-radius: 50%; }
.carte .ico { border-radius: 50%; background: var(--laiton-doux); }
.compte .avatar { background: var(--nuit); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--laiton); }
.confiance { color: var(--encre); }
.confiance svg { stroke: var(--laiton); }
.encart { background: var(--laiton-doux); border: 1px solid #E3D3B5; }
.etapes span.active { background: var(--nuit); }
.auth-gauche { border-right: 3px solid var(--laiton); }
.bouton.primaire { letter-spacing: 0.01em; }
.carte:hover, .compositeur.survol { border-color: var(--laiton); }

/* Consignes du client (Mon compte) */
#bloc-consignes { margin-top: 16px; }
.consigne-form { display: flex; flex-direction: column; gap: 12px; }
.consigne-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.champ select, .champ textarea { min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1px solid #B5BCC8; background: #fff; font: inherit; font-size: 16px; color: var(--encre); }
.champ textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.champ select:focus, .champ textarea:focus { outline: 3px solid var(--laiton); outline-offset: 1px; border-color: var(--accent); }
.consigne-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consignes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.consignes-liste li { border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.consignes-liste .portee { font-weight: 600; }
.consignes-liste .texte { flex: 1 1 100%; white-space: pre-wrap; color: var(--encre); font-size: 15px; }
.consignes-liste .meta { color: var(--discret); font-size: 13px; }
.consignes-liste button { margin-left: auto; }

/* Accueil : métier sans usage spécifique */
.carte-metier-vide { border-style: dashed; background: var(--fond); }
.carte-metier-vide:hover { border-color: var(--trait); box-shadow: none; }

/* Page « Mes préférences » */
.prefs-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.prefs-etapes li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--trait); border-radius: 10px; padding: 14px; }
.prefs-etapes .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--trait); }
.prefs-etapes div { display: flex; flex-direction: column; gap: 4px; }
.prefs-etapes span:not(.num) { color: var(--discret); font-size: 14px; }
.prefs-exemples { display: flex; flex-wrap: wrap; gap: 8px; }
.prefs-exemple { font: inherit; font-size: 14px; text-align: left; border: 1px dashed var(--trait); background: transparent; color: var(--encre); border-radius: 10px; padding: 8px 12px; cursor: pointer; max-width: 360px; }
.prefs-exemple:hover, .prefs-exemple:focus-visible { border-style: solid; }
.prefs-exemple .cat { display: block; font-size: 12px; font-weight: 600; color: var(--discret); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.prefs-conseils { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--encre); }

/* Export PDF : seule la réponse choisie est imprimée */
#impression { display: none; }
@media print {
  body.impression > *:not(#impression) { display: none !important; }
  body.impression #impression { display: block; padding: 0; color: #000; }
  #impression h1 { font-size: 22pt; margin: 0 0 4pt; }
  #impression > .reponse, #impression > .corps { border: none !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
  #impression .impression-date { color: #555; font-size: 10pt; margin: 0 0 14pt; }
  #impression .impression-mention { margin-top: 18pt; padding: 8pt 10pt; background: #F3EDE2; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #impression table { border-collapse: collapse; width: 100%; }
  #impression th, #impression td { border: 1px solid #B5BCC8; padding: 4pt 6pt; font-size: 10pt; }
}

/* Graphique tiré d'un tableau de la réponse */
.graphique { margin-top: 12px; padding: 14px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; }
.graphique-choix { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 10px; }
.graphique-choix label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--discret); }
.graphique-choix select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 6px; background: #fff; color: var(--encre); max-width: 260px; }
.graphique-choix .espace { flex: 1; }
.graphique-dessin { overflow-x: auto; }
.graphique-dessin svg { display: block; max-width: 100%; height: auto; }
.graphique-note { margin: 8px 0 0; font-size: 12px; color: var(--discret); }
@media print { .graphique-choix { display: none; } }

/* Menu « Exporter » sous chaque réponse */
.menu-export { position: relative; display: inline-flex; }
.menu-liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 200px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 8px 24px rgba(27, 42, 68, .12); }
.menu-liste[hidden] { display: none; }
.ico-sortie { flex: none; display: block; }
.actions .bouton .ico-sortie { margin-left: -4px; }
.menu-liste button { display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14px; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--encre); cursor: pointer; }
.menu-liste button:hover, .menu-liste button:focus-visible { background: var(--laiton-doux); }

/* ======================================================================
   Esthétique + fonctions (oct. 2026) : sceau de confidentialité, repères de
   vérification, note de cabinet, progression, dépôt plein écran, Mes usages
   ====================================================================== */

/* Sceau de confidentialité (en-tête) */
.sceau-conf { position: relative; }
button.etat { min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid #E3D3B5; background: var(--laiton-doux); color: var(--laiton-fonce); font-size: 14px; font-weight: 600; }
button.etat:hover { border-color: var(--laiton); }
button.etat svg { flex: none; color: var(--encre); }
button.etat .point { width: 8px; height: 8px; }
button.etat[data-etat="indisponible"] { background: var(--fond); border-color: var(--trait-fort); color: var(--discret); }
button.etat[data-etat="indisponible"] .point { background: #B5BCC8; }
.volet-conf { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px)); background: var(--nuit); color: var(--nuit-texte); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 32px rgba(14, 22, 38, .28); border-top: 3px solid var(--laiton); font-size: 14px; }
.volet-conf h2 { color: #fff; font-size: 18px; }
.volet-conf ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.volet-conf li { display: flex; gap: 10px; line-height: 1.45; }
.volet-conf li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--laiton); }
.volet-etat { margin: 0; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.volet-etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5FBF8A; flex: none; }
.volet-etat[data-etat="indisponible"]::before { background: #B5BCC8; }
.volet-services { margin: 0; font-size: 13px; color: #A9B3C4; }
.volet-services:empty { display: none; }
@media (max-width: 640px) { button.etat .lib { display: none; } button.etat { padding: 0 10px 0 6px; } }

/* Dépôt n'importe où sur la page */
.voile-depot { position: fixed; inset: 0; z-index: 50; background: rgba(27, 42, 68, .9); display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.voile-int { width: min(560px, 100%); padding: 48px 24px; border: 2px dashed var(--laiton); border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--nuit-texte); }
.voile-int svg { width: 56px; height: 56px; color: #fff; }
.voile-int strong { font-family: var(--titres); font-weight: 500; font-size: 26px; color: #fff; }

/* Icônes de type de fichier et jauge de lecture */
.ic-fichier { flex: none; width: 26px; height: 32px; border-radius: 4px; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: #fff; background: #5A6478; clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.ic-fichier.pdf { background: #B3261E; }
.ic-fichier.word { background: #2F5597; }
.ic-fichier.excel { background: #2E6B4F; }
.ic-fichier.image { background: #6B5A8E; }
.ic-fichier.audio { background: var(--laiton-fonce); font-size: 12px; }
.puce-doc .jauge { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: var(--trait-doux); overflow: hidden; }
.puce-doc .jauge i { display: block; height: 100%; background: var(--laiton); border-radius: 4px; transition: width .4s ease; }
.puce-doc .jauge.indeterminee i { width: 30% !important; }
@media (prefers-reduced-motion: no-preference) { .puce-doc .jauge.indeterminee i { animation: glisse 1.4s ease-in-out infinite; } }
@keyframes glisse { from { transform: translateX(-100%); } to { transform: translateX(330%); } }
.puce-doc.charge { opacity: 1; }

/* Repères de vérification */
mark.repere, span.repere { display: inline; border-radius: 999px; padding: 1px 9px; font-size: .88em; font-weight: 600; white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.repere.verifier { color: var(--laiton-fonce); background: var(--laiton-doux); box-shadow: inset 0 0 0 1px #D9C29A; }
.repere.completer { color: var(--rouge); background: var(--rouge-doux); box-shadow: inset 0 0 0 1px #E8B9AF; }
.repere.ok { color: var(--vert); background: var(--vert-doux); box-shadow: inset 0 0 0 1px #B9D9C6; }
mark.repere.actif { outline: 3px solid var(--laiton); outline-offset: 2px; }
.compteur-reperes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--fond); font-size: 14px; }
.compteur-reperes strong { font-weight: 600; }
.lien-suivant { margin-left: auto; border: none; background: none; padding: 4px 2px; font: inherit; font-size: 14px; font-weight: 600; color: var(--encre); text-decoration: underline; text-decoration-color: var(--laiton); text-underline-offset: 3px; }

/* Réponse en note de cabinet */
.note-tete { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--laiton); font-size: 14px; }
.note-tete dt { color: var(--discret); }
.note-tete dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .note-tete { grid-template-columns: 1fr; } .note-tete dd { margin-bottom: 6px; } }
.sommaire { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.sommaire a { color: var(--discret); text-decoration: none; }
.sommaire a::before { content: "§ "; color: var(--laiton); }
.sommaire a:hover { color: var(--encre); text-decoration: underline; }
.texte-md h1, .texte-md h2, .texte-md h3 { font-family: var(--titres); font-weight: 500; scroll-margin-top: 24px; }
.texte-md h2 { font-size: 20px; }
.texte-md table { border: 1px solid var(--trait-doux); border-radius: 10px; overflow: hidden; }
.texte-md th { font-weight: 600; font-size: 14px; }
.texte-md td { font-variant-numeric: tabular-nums; }
.texte-md tbody tr:nth-child(even) td { background: #FAFBFC; }
.note.note-pied { align-items: flex-start; background: var(--fond); border-left: 3px solid var(--laiton); border-radius: 4px 12px 12px 4px; }
.note.note-pied svg { flex: none; color: var(--encre); margin-top: 1px; }

/* Progression lisible (étapes réelles du traitement) */
.progres { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.progres li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.progres .m { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.progres li.fait .m { background: var(--vert-doux); color: var(--vert); }
.progres li.fait .m::before { content: "✓"; }
.progres li.encours { font-weight: 600; }
.progres li.encours .m { border: 2px solid var(--laiton); }
.progres li.avenir { color: #8A93A5; }
.progres li.avenir .m { border: 1.5px dashed var(--trait-fort); }
.progres small { color: var(--discret); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .progres li.encours .m { animation: souffle 1.6s ease-in-out infinite; } }
@keyframes souffle { 50% { box-shadow: 0 0 0 5px rgba(176, 141, 87, .2); } }

/* Accueil : Mes usages et bande « Par où commencer » plus fine */
.sous-titre-section { margin: 4px 0 16px; color: var(--discret); }
.carte-env { position: relative; display: flex; }
.carte-env > .carte { flex: 1 1 auto; padding-bottom: 44px; }
.epingle { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent; color: #A9B2C0; display: flex; align-items: center; justify-content: center; }
.epingle:hover { background: var(--laiton-doux); color: var(--laiton-fonce); }
.epingle[aria-pressed="true"] { color: var(--laiton); }
.epingle[aria-pressed="true"] svg { fill: currentColor; }
.moteurs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.moteur { flex-direction: row; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; }
.moteur .ico { width: 40px; height: 40px; flex: none; }
.moteur .t { font-size: 17px; display: block; }
.moteur .d { font-size: 13.5px; line-height: 1.4; display: block; }
.moteur > span:not(.ico) { min-width: 0; }
.moteur { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; }
.moteur .ico { grid-row: 1 / 3; align-self: center; }
.liste a { align-items: center; }
.liste a .ico-dossier { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--laiton-doux); display: inline-flex; align-items: center; justify-content: center; }
.liste a span:nth-child(2) { flex: 1 1 200px; min-width: 0; font-weight: 600; }
.liste a span:last-child { color: var(--discret); font-size: 14px; }

@media print {
  mark.repere { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #impression .note-tete { margin-bottom: 12pt; font-size: 10pt; }
}
@media (max-width: 640px) { .volet-conf { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; } }

/* ======================================================================
   Suite (oct. 2026) : preuve cliquable, échéancier, comparateur, relecture,
   fiche de dossier, thème Nuit
   ====================================================================== */

/* Preuve cliquable */
button.preuve { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; border-bottom: 2px solid var(--laiton); border-radius: 0; line-height: inherit; }
button.preuve:hover, button.preuve:focus-visible { background: var(--laiton-doux); }
button.preuve.page { border-bottom-style: dotted; }
.aide-preuve { font-size: 13px; color: var(--discret); }
.volet-preuve { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(520px, 100vw); background: var(--surface); border-left: 3px solid var(--laiton); box-shadow: -12px 0 32px rgba(14, 22, 38, .18); display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.vp-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vp-tete strong { font-family: var(--titres); font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }
.vp-page { color: var(--discret); font-size: 14px; }
.vp-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-nav .bouton { min-height: 36px; font-size: 14px; }
.vp-texte { flex: 1 1 auto; overflow-y: auto; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.65; padding: 14px 16px; background: var(--fond); border-radius: 10px; }
.vp-note { margin: 0; font-size: 12px; color: var(--discret); }
mark.surligne { background: #F6E7C8; color: #1B2A44; border-radius: 3px; box-shadow: 0 0 0 2px #F6E7C8; }
@media (min-width: 1100px) { body.avec-preuve .contenu { margin-right: 520px; } }

/* Échéancier */
.frise { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--trait); display: flex; flex-direction: column; gap: 12px; }
.frise li { position: relative; }
.frise li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--trait-fort); }
.frise li.proche::before, .frise li.futur::before { border-color: var(--laiton); }
.frise li.prochaine::before { background: var(--laiton); }
.frise li.passe { color: var(--discret); }
.frise label { display: grid; grid-template-columns: 20px minmax(130px, auto) 1fr; gap: 4px 12px; align-items: baseline; cursor: pointer; font-size: 14px; }
.frise input { accent-color: var(--encre); }
.f-date { font-weight: 600; display: flex; flex-direction: column; }
.f-date small { font-weight: 400; color: var(--discret); }
.frise li.proche .f-date small { color: var(--laiton-fonce); font-weight: 600; }
.f-lib { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .frise label { grid-template-columns: 20px 1fr; } .f-lib { grid-column: 2; } }

/* Comparateur de versions */
#btn-comparer { align-self: flex-start; }
.cmp-tete { font-size: 15px; overflow-wrap: anywhere; }
.cmp-resume { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; font-size: 14px; }
.cmp-liste li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--trait-doux); }
.cmp-liste li:first-child { border-top: none; }
.cmp-liste li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cmp-p { color: var(--discret); font-size: 12px; font-variant-numeric: tabular-nums; }
.cmp-egal { color: var(--discret); }
.cmp-moins { background: var(--rouge-doux); }
.cmp-plus { background: var(--vert-doux); }
.cmp-saut { display: block !important; text-align: center; color: var(--discret); padding: 2px !important; }
.cmp-liste del { color: var(--rouge); text-decoration-thickness: 1.5px; background: var(--rouge-doux); }
.cmp-liste ins { color: var(--vert); text-decoration: none; background: var(--vert-doux); font-weight: 600; }

/* Relecture : tampon au sceau */
.tampon { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid var(--laiton); border-radius: 10px; color: var(--laiton-fonce); font-size: 14px; font-weight: 600; width: fit-content; max-width: 100%; }
.tampon svg { flex: none; color: var(--encre); }

/* Fiche de dossier (chemise) */
.chemise { position: relative; background: var(--nuit); color: var(--nuit-texte); border-radius: 6px 18px 18px 18px; padding: 28px 28px 24px; border-top: 3px solid var(--laiton); display: flex; flex-direction: column; gap: 8px; }
.chemise::before { content: ""; position: absolute; left: 0; top: -17px; width: 160px; height: 16px; background: var(--nuit); border-radius: 8px 8px 0 0; border-top: 3px solid var(--laiton); }
.chemise h1 { color: #fff; font-size: 30px; overflow-wrap: anywhere; }
.chemise-usage { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #D9C29A; font-weight: 600; }
.chemise-dates { margin: 0; font-size: 14px; }
.chemise-dates a { color: #fff; }
.chemise-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chemise .bouton.primaire { background: var(--laiton); color: #0F1828; }
.chemise .bouton:not(.primaire) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.dossier-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dossier-large { grid-column: 1 / -1; }
.vide-bloc { margin: 0; color: var(--discret); font-size: 15px; }
.echanges-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.echanges-liste li { padding: 14px 0; border-top: 1px solid var(--trait-doux); display: flex; flex-direction: column; gap: 6px; }
.echanges-liste li:first-child { border-top: none; padding-top: 0; }
.echanges-liste .q { margin: 0; font-weight: 600; }
.echanges-liste .r { margin: 0; color: var(--discret); font-size: 15px; }
.bloc .graphique.echeancier { margin-top: 0; border: none; padding: 0; }

/* Thème Nuit */
.bouton-theme[aria-pressed="true"] { color: var(--laiton); border-color: var(--laiton); }
:root:not([data-theme="nuit"]) .logo .logo-nuit { display: none !important; }
:root[data-theme="nuit"] .logo .logo-jour { display: none !important; }
:root[data-theme="nuit"] {
  color-scheme: dark;
  --fond: #0F1828; --surface: #18243A; --encre: #E8ECF3; --discret: #A3AEC2;
  --trait: #2B3A57; --trait-fort: #3A4B6B; --trait-doux: #223049;
  --accent: #C9A86E; --accent-fonce: #D9BC85; --accent-doux: #24324D;
  --laiton: #C9A86E; --laiton-fonce: #D9C29A; --laiton-doux: #2D2A22;
  --nuit: #0A1120; --nuit-2: #1C2A44; --ocre: #D9C29A; --ocre-doux: #2D2A22;
  --rouge: #F0A396; --rouge-doux: #3A1F1C; --vert: #8FD0AE; --vert-doux: #1A3329;
}
[data-theme="nuit"] .bouton:hover { background: var(--trait-doux); }
[data-theme="nuit"] .bouton.primaire, [data-theme="nuit"] .filtre[aria-pressed="true"], [data-theme="nuit"] .etapes span.active { color: #0F1828; }
[data-theme="nuit"] .encart p, [data-theme="nuit"] .note { color: var(--encre); }
[data-theme="nuit"] .champ input, [data-theme="nuit"] .champ select, [data-theme="nuit"] .champ textarea,
[data-theme="nuit"] .formulaire-ligne select, [data-theme="nuit"] .lien-activation code, [data-theme="nuit"] .encart textarea { background: var(--surface); color: var(--encre); border-color: var(--trait-fort); }
[data-theme="nuit"] #btn-suggestion { background: transparent !important; }
[data-theme="nuit"] .depot { border-color: var(--trait-fort); }
[data-theme="nuit"] .texte-md tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
[data-theme="nuit"] .carte .ico svg, [data-theme="nuit"] .liste .ico-dossier svg, [data-theme="nuit"] .bloc svg[stroke="#1B2A44"] { stroke: var(--laiton); }
[data-theme="nuit"] .graphique:not(.echeancier) { background: #F4F5F7; color: #1B2A44; border-color: transparent; }
[data-theme="nuit"] .graphique:not(.echeancier) .graphique-note, [data-theme="nuit"] .graphique:not(.echeancier) label { color: #5A6478; }
[data-theme="nuit"] .graphique:not(.echeancier) select, [data-theme="nuit"] .graphique:not(.echeancier) .bouton { background: #fff; color: #1B2A44; border-color: #DDE1E8; }
[data-theme="nuit"] .graphique.echeancier { background: transparent; }
[data-theme="nuit"] .note.note-pied svg, [data-theme="nuit"] .tampon svg, [data-theme="nuit"] button.etat svg { color: var(--encre); }
[data-theme="nuit"] .entete { background: #0A1120; }
[data-theme="nuit"] .compte .avatar { background: var(--nuit-2); }

/* ===== Série 2 (oct. 2026) ===== */
kbd { font-family: var(--texte); font-size: 12px; font-weight: 600; color: var(--discret); background: var(--fond); border: 1px solid var(--trait-fort); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; line-height: 18px; display: inline-block; }
.bouton.lien { border: none; background: transparent; color: var(--discret); text-decoration: underline; text-underline-offset: 3px; padding: 0 8px; }
.bouton.lien:hover { color: var(--encre); background: transparent; }

/* 13 – Premier pas guidé */
.bienvenue { background: var(--surface); border: 1px solid var(--laiton); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 0 0 4px var(--laiton-doux); }
.bienvenue-tete h2 { font-size: 24px; }
.bienvenue-tete p { margin: 4px 0 0; color: var(--discret); }
.bienvenue-pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bienvenue-pas li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; align-items: start; }
.bienvenue-pas .n { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--laiton); color: var(--laiton-fonce); font-family: var(--titres); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.bienvenue-pas strong { font-family: var(--titres); font-weight: 600; font-size: 17px; }
.bienvenue-pas li > span:last-child { color: var(--discret); font-size: 15px; line-height: 1.5; }
.bienvenue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aide-demo { font-size: 14px; color: var(--discret); }

/* 15 – Exemples par métier */
.exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -6px; }
.exemples-lib, .suites-lib { font-size: 14px; color: var(--discret); margin-right: 2px; }
.puce-exemple, .puce-suite { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre); font-size: 14px; text-align: left; line-height: 1.35; }
.puce-exemple:hover, .puce-suite:hover { border-color: var(--laiton); background: var(--laiton-doux); }

/* 14 – Questions de suite */
.suites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.puce-suite::before { content: "↳ "; color: var(--laiton); }

/* 16 – Temps annoncé */
.estimation { margin: -4px 0 0; font-size: 14px; color: var(--discret); }

/* 17 – Squelettes de chargement */
.squelette, .ligne-squelette { position: relative; overflow: hidden; background: var(--surface); }
.carte.squelette { min-height: 150px; gap: 14px; }
.carte.squelette span { display: block; height: 14px; border-radius: 7px; background: var(--trait-doux); }
.carte.squelette span:first-child { width: 40px; height: 40px; border-radius: 50%; }
.carte.squelette span:nth-child(2) { width: 70%; }
.carte.squelette span:nth-child(3) { width: 90%; }
.ligne-squelette { height: 52px; border-bottom: 1px solid var(--trait-doux); }
.ligne-squelette::before { content: ""; position: absolute; left: 16px; top: 18px; height: 14px; width: 55%; border-radius: 7px; background: var(--trait-doux); }
@media (prefers-reduced-motion: no-preference) {
  .squelette::after, .ligne-squelette::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: lueur 1.4s ease-in-out infinite; }
  [data-theme="nuit"] .squelette::after, [data-theme="nuit"] .ligne-squelette::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
}
@keyframes lueur { to { transform: translateX(100%); } }

/* 19 – Mode présentation */
body.presentation-ouverte { overflow: hidden; }
.presentation { position: fixed; inset: 0; z-index: 50; background: var(--fond); color: var(--encre); display: flex; flex-direction: column; }
.presentation-haut, .presentation-bas { display: flex; align-items: center; gap: 16px; padding: 14px 28px; }
.presentation-haut { border-bottom: 1px solid var(--trait); background: var(--surface); }
.presentation-marque { display: flex; align-items: center; gap: 8px; font-family: var(--titres); font-weight: 600; font-size: 18px; }
.presentation-compte { margin-left: auto; color: var(--discret); font-variant-numeric: tabular-nums; }
.presentation-diapo { flex: 1 1 auto; overflow: auto; padding: 5vh max(28px, calc((100vw - 1100px) / 2)); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.6; outline: none; }
.presentation-diapo h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.15; margin-bottom: 28px; }
.presentation-diapo h2, .presentation-diapo h3 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 18px; color: var(--encre); }
.presentation-diapo.couverture { display: flex; flex-direction: column; justify-content: center; }
.presentation-diapo .note-tete { font-size: .8em; max-width: 900px; }
.presentation-diapo table { font-size: .85em; }
.presentation-bas { border-top: 1px solid var(--trait); background: var(--surface); }
.presentation-mention { flex: 1 1 auto; margin: 0; text-align: center; font-size: 13px; color: var(--discret); }
@media (max-width: 640px) { .presentation-haut, .presentation-bas { padding: 10px 16px; } .presentation-diapo { padding: 24px 16px; } }

/* 20 et 21 – Palette Ctrl+K */
.btn-palette { color: var(--discret); gap: 8px; min-width: 0; }
.btn-palette kbd { margin-left: 4px; }
@media (max-width: 900px) { .btn-palette .lib, .btn-palette kbd { display: none; } .btn-palette { width: 44px; padding: 0; } }
.palette-fond { position: fixed; inset: 0; z-index: 40; background: rgba(15, 24, 40, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.palette { width: min(680px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 17, 32, .35); overflow: hidden; }
.palette-champ { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--trait); color: var(--discret); }
.palette-champ input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 18px; color: var(--encre); }
.palette-liste { list-style: none; margin: 0; padding: 6px; overflow: auto; }
.palette-liste li[role="option"] { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.palette-liste li.actif { background: var(--accent-doux); box-shadow: inset 3px 0 0 var(--laiton); }
.palette-groupe { padding: 10px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--discret); }
.palette-vide { padding: 18px 12px; color: var(--discret); }
.palette-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--laiton-doux); display: flex; align-items: center; justify-content: center; }
.palette-ico svg { width: 16px; height: 16px; }
[data-theme="nuit"] .palette-ico svg { stroke: var(--laiton); }
.palette-txt { display: flex; flex-direction: column; min-width: 0; }
.palette-txt .t { font-weight: 600; }
.palette-txt .d { font-size: 13px; color: var(--discret); }
.palette-txt .x { font-size: 14px; color: var(--discret); margin-top: 2px; overflow-wrap: anywhere; }
.palette-txt mark { background: var(--laiton-doux); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--laiton); }
.palette-pied { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--trait); font-size: 12px; color: var(--discret); }
.palette-pied span:last-child { flex-basis: 100%; }
@media (max-width: 640px) { .palette-fond { padding-top: 16px; } .palette-pied { display: none; } }

/* 22 – Tableau de bord du responsable */
.aide-bloc { margin: -6px 0 0; font-size: 14px; color: var(--discret); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; min-height: 112px; }
.kpi .n { font-family: var(--titres); font-size: 38px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .lib { font-weight: 600; }
.kpi .sous { font-size: 14px; color: var(--discret); }
.liste-tdb { list-style: none; margin: 0; padding: 0; }
.liste-tdb li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--trait-doux); }
.liste-tdb li:first-child { border-top: none; padding-top: 0; }
.liste-tdb .t { font-weight: 600; flex: 1 1 260px; }
.liste-tdb .d { font-size: 14px; color: var(--discret); }
.etat-valid { display: flex; gap: 6px; flex-wrap: wrap; }
.date-tdb { flex: none; width: 92px; display: flex; flex-direction: column; font-family: var(--titres); font-weight: 600; font-size: 18px; }
.date-tdb small { font-family: var(--texte); font-weight: 500; font-size: 12px; color: var(--discret); }
.date-tdb.proche { color: var(--laiton-fonce); }
.txt-tdb { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; }
.txt-tdb .libelle { font-size: 15px; }
.barres-tdb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.barres-tdb li { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 4px 10px; align-items: center; }
.barres-tdb .lib { font-size: 15px; grid-column: 1 / -1; }
.barres-tdb .barre { height: 10px; border-radius: 5px; background: var(--trait-doux); overflow: hidden; }
.barres-tdb .barre i { display: block; height: 100%; background: var(--laiton); border-radius: 5px; }
.barres-tdb .n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.avis-tdb { grid-column: 1 / -1; font-size: 13px; color: var(--discret); }
#equipe table { width: 100%; border-collapse: collapse; font-size: 15px; }
#equipe th, #equipe td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--trait-doux); }
#equipe th { font-size: 13px; color: var(--discret); font-weight: 600; }
.kpi.squelette { min-height: 112px; }
@media (min-width: 760px) { .tdb-grille { grid-template-columns: 1fr 1fr; } }
.tdb-grille > * { min-width: 0; }
#equipe { overflow-x: auto; }