/* Hub IA ISO Sécurité — identité visuelle.
   Clair, chaud, éditorial. Typographie : Space Grotesk pour les titres,
   Inter pour le texte. Accent : orange sécurité, marine en soutien. */

/* Polices servies en local : aucun appel vers un tiers, exigence RSSI. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fontes/Inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fontes/Inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fontes/Inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fontes/Inter-700.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/fontes/SpaceGrotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("/fontes/SpaceGrotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/fontes/SpaceGrotesk-700.woff2") format("woff2"); }

:root {
  --fond: #faf9f6;
  --panneau: #f3f1eb;
  --carte: #ffffff;
  --bord: #e8e4db;
  --bord-fort: #d8d2c6;
  --marine: #182a42;
  --texte: #2b3442;
  --sourd: #6d7686;
  --estompe: #9aa2b1;
  --accent: #e4572e;
  --accent-fonce: #c74a25;
  --accent-teinte: #fbeee8;
  --ok: #178a52;
  --ok-teinte: #e6f5ed;
  --alerte: #a86a10;
  --alerte-teinte: #fbf1dd;
  /* Le rouge de gravité. Il n'existait pas comme variable, le danger étant
     écrit en dur à trois endroits : la page de sécurité en a besoin dans les
     deux thèmes, et une couleur de gravité ne se déclare pas deux fois. */
  --critique: #b3402a;
  --critique-teinte: #fbe9e5;
  --serif-titres: "Space Grotesk", "Segoe UI", sans-serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --ombre-1: 0 1px 2px rgba(24, 42, 66, .04), 0 2px 8px rgba(24, 42, 66, .04);
  --ombre-2: 0 2px 6px rgba(24, 42, 66, .06), 0 12px 32px rgba(24, 42, 66, .08);
  --rayon: 14px;
}

/* Thème sombre : les mêmes variables, redéfinies. Le volet de marque de la
   connexion reste sombre par nature. */
:root[data-theme="sombre"] {
  --fond: #12161d;
  --panneau: #171d27;
  --carte: #1d2430;
  --bord: #2a3342;
  --bord-fort: #38445a;
  --marine: #e8edf5;
  --texte: #d5dbe5;
  --sourd: #97a2b4;
  --estompe: #6b7689;
  --accent: #f0663e;
  --accent-fonce: #ff7a50;
  --accent-teinte: rgba(240, 102, 62, .14);
  --ok: #3dc47e;
  --ok-teinte: rgba(61, 196, 126, .12);
  --alerte: #d9a648;
  --alerte-teinte: rgba(217, 166, 72, .12);
  --critique: #ff7a63;
  --critique-teinte: rgba(255, 122, 99, .14);
  --plein: #ee6a41;
  --plein-survol: #ff7a50;
  --entete-table: #1a212c;
  --fond-code: #161c26;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .2);
  --ombre-2: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
}
:root {
  --plein: #182a42;
  --plein-survol: #24395a;
  --entete-table: #fcfbf9;
  --fond-code: #f1efe9;
}
:root[data-theme="sombre"] ::-webkit-scrollbar-thumb { background: #333d4e; background-clip: content-box; border: 2px solid transparent; }
:root[data-theme="sombre"] .tour.user .corps { color: var(--texte); }
:root[data-theme="sombre"] .voile { background: rgba(0, 0, 0, .82); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 400 15px/1.6 var(--sans);
  background: var(--fond);
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(228, 87, 46, .18); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #d5d0c5; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ================= Connexion, écran scindé ================= */

.ecran-connexion { display: flex; min-height: 100vh; }

.volet-marque {
  flex: 1.1;
  background:
    radial-gradient(1000px 700px at 120% -20%, rgba(228, 87, 46, .28), transparent 55%),
    radial-gradient(800px 600px at -30% 120%, rgba(56, 96, 154, .35), transparent 60%),
    var(--marine);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 58px;
  position: relative; overflow: hidden;
}
.volet-marque::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(700px 500px at 30% 40%, #000, transparent 75%);
  pointer-events: none;
}
.volet-marque .marque {
  font-family: var(--serif-titres);
  font-size: 26px; font-weight: 700; letter-spacing: .4px;
}
.volet-marque .marque i { color: var(--accent); font-style: normal; }
.volet-marque .promesse { position: relative; max-width: 430px; }
.volet-marque .promesse h2 {
  font-family: var(--serif-titres);
  font-size: 34px; line-height: 1.22; font-weight: 600;
}
.volet-marque .promesse p { margin-top: 16px; color: #b9c4d6; font-size: 15px; }
.volet-marque .points { position: relative; display: grid; gap: 13px; }
.volet-marque .point { display: flex; gap: 12px; align-items: baseline; color: #cfd8e6; font-size: 14px; }
.volet-marque .point b { color: #fff; font-weight: 600; }
.volet-marque .point::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px;
  background: var(--accent); transform: translateY(-1px) rotate(45deg);
}

.volet-entree {
  flex: 1;
  display: grid; place-items: center;
  padding: 40px 30px;
  background: var(--fond);
}
.boite-entree { width: 100%; max-width: 380px; }
.boite-entree h1 {
  font-family: var(--serif-titres);
  font-size: 24px; font-weight: 600; color: var(--marine);
}
.boite-entree .sous {
  color: var(--sourd); font-size: 14px; margin: 6px 0 30px;
}
.bouton-ms {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%;
  border: 1px solid var(--bord-fort);
  background: var(--carte);
  border-radius: 12px;
  padding: 13px;
  font-weight: 600; font-size: 14.5px;
  box-shadow: var(--ombre-1);
  transition: border-color .15s, transform .1s;
}
.bouton-ms:hover { border-color: var(--marine); }
.bouton-ms:active { transform: scale(.99); }
.bouton-ms svg { width: 17px; height: 17px; }
/* La vraie porte Microsoft : le même dessin que le bouton d'atelier, mais
   pleine et primaire, pour qu'on ne clique pas au hasard entre les deux. */
a.bouton-ms-reel {
  text-decoration: none; color: var(--marine);
  border-color: var(--marine); margin-bottom: 4px;
}
a.bouton-ms-reel:hover { border-color: var(--accent); color: var(--accent); }
a.bouton-ms-reel:visited { color: var(--marine); }
.note-reel {
  margin: 0 0 14px; font-size: 12.5px; color: var(--sourd);
  line-height: 1.5;
}

.note-atelier {
  margin-top: 12px; font-size: 12.5px; color: var(--sourd);
  background: var(--panneau); border-radius: 10px; padding: 10px 14px;
}
.liste-demo { margin-top: 16px; display: none; }
.liste-demo.visible { display: block; animation: surgir .25s ease; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }
.compte-demo {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  border: 1px solid var(--bord); background: var(--carte);
  border-radius: 12px; padding: 10px 13px; margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.compte-demo:hover { border-color: var(--accent); box-shadow: var(--ombre-1); }
.compte-demo .pastille {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; flex: none;
}
.compte-demo .role { margin-left: auto; font-size: 12px; color: var(--estompe); }
.compte-demo.attente { opacity: .55; }
.separateur {
  display: flex; align-items: center; gap: 12px;
  color: var(--estompe); font-size: 12px; margin: 22px 0 14px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.lien-creer { color: var(--accent); font-weight: 600; font-size: 14px; }
.lien-creer:hover { color: var(--accent-fonce); }
.formulaire-compte { display: none; margin-top: 14px; }
.formulaire-compte.visible { display: block; animation: surgir .25s ease; }
.formulaire-compte input {
  width: 100%; border: 1px solid var(--bord-fort); border-radius: 11px;
  background: var(--carte);
  padding: 12px 14px; margin-bottom: 10px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.formulaire-compte input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228, 87, 46, .12);
}
.bouton-plein {
  width: 100%; border-radius: 11px;
  background: var(--plein); color: #fff; font-weight: 600; padding: 12px;
  transition: background .12s;
}
.bouton-plein:hover { background: var(--plein-survol); }
.message-attente {
  display: none; margin-top: 14px; padding: 12px 15px;
  background: var(--alerte-teinte); color: var(--alerte);
  border-radius: 11px; font-size: 13.5px;
}
.message-attente.visible { display: block; }
.pied-connexion { margin-top: 26px; font-size: 12.5px; color: var(--estompe); }

/* La porte de la phase de construction, code.html. Même vocabulaire que la
   boîte de connexion : elle en est la jumelle, en plus sobre. */
.champ-code {
  width: 100%;
  border: 1px solid var(--bord-fort); background: var(--carte);
  border-radius: 12px; padding: 13px 15px;
  font-family: var(--sans); font-size: 18px; font-weight: 600;
  letter-spacing: .22em; color: var(--texte);
  box-shadow: var(--ombre-1);
}
.champ-code::placeholder {
  letter-spacing: normal; font-size: 14.5px; font-weight: 500;
  color: var(--estompe);
}
.champ-code:focus { outline: none; border-color: var(--marine); }
.bouton-code {
  width: 100%; margin-top: 10px;
  border: none; background: var(--plein); color: #fff;
  border-radius: 12px; padding: 13px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: opacity .1s;
}
.bouton-code:hover { background: var(--plein-survol); }
.bouton-code:active { transform: scale(.99); }
.bouton-code:disabled { opacity: .5; cursor: default; }

/* ================= Gabarit ================= */

.gabarit { display: flex; height: 100vh; overflow: hidden; }

.panneau {
  width: 272px; flex: none;
  background: var(--panneau);
  border-right: 1px solid var(--bord);
  display: flex; flex-direction: column;
  transition: transform .24s cubic-bezier(.3, .8, .3, 1);
}
.panneau .tete { padding: 22px 22px 16px; }
.panneau .marque {
  font-family: var(--serif-titres);
  font-size: 20px; font-weight: 700; color: var(--marine); letter-spacing: .3px;
}
.panneau .marque i { color: var(--accent); font-style: normal; }
.panneau .sous-marque { font-size: 11.5px; color: var(--estompe); margin-top: 1px; }

/* L'étiquette de la machine, en phase d'atelier seulement : elle ne paraît
   que si le serveur en porte une, et le serveur n'en porte pas en production.
   Contour et couleur d'accent plutôt qu'un fond, pour tenir aussi bien sur le
   panneau clair que sur le volet sombre de la connexion, sans se redéfinir. */
.marque .etiquette-machine {
  display: inline-block; vertical-align: 3px; margin-left: 9px;
  padding: 2px 8px; border-radius: 99px;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  /* Le badge de la maison, celui des puces de navigation : fond teinté,
     glyphes d'accent. La teinte foncée plutôt que l'accent pur, parce qu'à
     10 px l'accent sur son propre fond teinté reste juste à lire. */
  color: var(--accent-fonce); background: var(--accent-teinte);
  /* La colonne de marque du panneau fait environ 200 px : une étiquette
     bavarde y passerait à la ligne et pousserait la sous-marque. Le serveur
     la rogne à douze signes, et rien ne se coupe ici. */
  white-space: nowrap;
}
/* Sur le volet sombre de la connexion, un fond teinté clair ferait une tache
   à côté de la marque : contour seul, et recalage sur une marque de 26 px. */
.volet-marque .marque .etiquette-machine {
  vertical-align: 6px; font-size: 10.5px; margin-left: 11px;
  background: none; border: 1px solid var(--accent); color: var(--accent);
}

.bouton-nouveau {
  margin: 2px 16px 18px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--plein); color: #fff;
  border-radius: 11px;
  padding: 11px; font-weight: 600; font-size: 13.5px;
  box-shadow: var(--ombre-1);
  transition: background .12s, transform .1s;
}
.bouton-nouveau:hover { background: var(--plein-survol); }
.bouton-nouveau:active { transform: scale(.985); }
.bouton-nouveau svg { width: 14px; height: 14px; }

.panneau .section {
  padding: 10px 24px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  color: var(--estompe); text-transform: uppercase;
}
.panneau nav { padding: 0 12px; }
.entree-nav {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  color: var(--sourd);
  border-radius: 10px; padding: 9px 12px;
  font-size: 14px; font-weight: 500;
  transition: background .1s, color .1s;
}
.entree-nav svg { width: 17px; height: 17px; flex: none; }
.entree-nav > span:first-of-type {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entree-nav:hover { background: rgba(24, 42, 66, .05); color: var(--texte); }
.entree-nav.active { background: var(--carte); color: var(--marine); font-weight: 600; box-shadow: var(--ombre-1); }
.entree-nav.active::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.entree-nav .puce {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700;
  color: var(--accent); background: var(--accent-teinte);
  border-radius: 99px; padding: 2px 8px; letter-spacing: .4px;
  white-space: nowrap;
}
.entree-nav.future { opacity: .5; cursor: default; }
.entree-nav.future:hover { background: none; color: var(--sourd); }

.liste-discussions { flex: 1; overflow-y: auto; padding: 2px 12px 12px; }
.discussion {
  display: block; width: 100%; text-align: left;
  border-radius: 9px; padding: 7px 12px;
  transition: background .1s;
}
.discussion:hover { background: rgba(24, 42, 66, .05); }
.discussion.active { background: var(--carte); box-shadow: var(--ombre-1); }
.discussion .titre {
  font-size: 13px; color: var(--texte);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.discussion .meta { font-size: 11px; color: var(--estompe); margin-top: 1px; }

.profil {
  border-top: 1px solid var(--bord);
  margin: 0 12px; padding: 14px 10px;
  display: flex; align-items: center; gap: 11px;
}
.profil .pastille {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), #f0855f);
  color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13.5px; flex: none;
}
.profil .qui { min-width: 0; flex: 1; }
.profil .nom { font-size: 13.5px; font-weight: 600; color: var(--marine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profil .role { font-size: 11.5px; color: var(--estompe); }
.profil .jauge { height: 3px; background: var(--bord); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.profil .jauge i { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.profil .jauge i.haut { background: var(--alerte); }
.bouton-sortie { color: var(--estompe); padding: 7px; border-radius: 8px; transition: all .1s; }
.bouton-sortie:hover { color: var(--accent); background: var(--accent-teinte); }
.bouton-sortie svg { width: 16px; height: 16px; }

/* ================= Zone principale ================= */

.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

.barre-haute {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 26px 12px;
}
.bouton-menu { display: none; padding: 7px; border-radius: 9px; color: var(--sourd); }
.bouton-menu:hover { background: rgba(24, 42, 66, .06); }
.bouton-menu svg { width: 20px; height: 20px; }
.fil-ariane { font-size: 13.5px; color: var(--estompe); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-ariane b { color: var(--marine); font-weight: 600; }
.badge-modele {
  margin-left: auto; flex: none;
  font-size: 11.5px; font-weight: 600; color: var(--sourd);
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 99px; padding: 4px 12px;
  font-family: Consolas, monospace;
  box-shadow: var(--ombre-1);
}

.contenu { flex: 1; overflow-y: auto; }
.interieur { max-width: 780px; margin: 0 auto; padding: 10px 24px 26px; }

/* ---- Accueil d'un espace : salutation et saisie centrale ---- */

.accueil-espace { padding-top: 9vh; animation: surgir .3s ease; }
.accueil-espace .bonjour {
  font-family: var(--serif-titres);
  font-size: 31px; font-weight: 600; color: var(--marine);
  letter-spacing: -.2px;
}
.accueil-espace .bonjour i { font-style: normal; color: var(--accent); }
.accueil-espace .mission { color: var(--sourd); margin-top: 8px; max-width: 540px; font-size: 15px; }
#porte-accueil { margin-top: 28px; }
.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--bord); background: var(--carte);
  border-radius: 99px; padding: 8px 16px;
  font-size: 13px; color: var(--sourd);
  transition: all .12s;
  text-align: left;
}
.chip:hover { border-color: var(--accent); color: var(--texte); box-shadow: var(--ombre-1); }
.chip b { color: var(--accent); font-weight: 600; margin-right: 6px; }

/* ---- Fil de conversation, style éditorial ---- */

.tour { padding: 20px 0 4px; animation: surgir .25s ease; }
.tour + .tour { border-top: 1px solid var(--bord); }
.tour .de {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--marine);
  margin-bottom: 9px;
}
.tour .avatar {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: #a9b2c1;
}
.tour.assistant .avatar { background: linear-gradient(135deg, var(--accent), #f0855f); }
.tour.assistant .avatar svg { width: 13px; height: 13px; }
.tour .corps { padding-left: 35px; }
.corps p { margin: 0 0 11px; }
.corps p:last-child { margin-bottom: 0; }
.corps ol, .corps ul { margin: 0 0 11px 22px; }
.corps li { margin-bottom: 5px; }
.corps b { font-weight: 600; color: var(--marine); }
/* Titres dans les réponses : les dièses du modèle deviennent une vraie
   hiérarchie, lisible d'un coup d'œil par le technicien. */
.corps h4.titre-reponse, .corps h5.titre-reponse, .corps h6.titre-reponse {
  font-family: var(--serif-titres);
  color: var(--marine);
  margin: 16px 0 8px;
  line-height: 1.3;
}
.corps h4.titre-reponse {
  font-size: 16.5px; font-weight: 650;
  padding-bottom: 6px; border-bottom: 1px solid var(--bord);
}
.corps h5.titre-reponse { font-size: 14.5px; font-weight: 650; }
.corps h6.titre-reponse {
  font-size: 12px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--sourd);
}
.corps > .titre-reponse:first-child,
.corps .mention-refus + .titre-reponse { margin-top: 4px; }

/* Tableaux dans les réponses : bornes, correspondances, spécifications. */
.table-reponse {
  overflow-x: auto; margin: 4px 0 12px;
  border: 1px solid var(--bord); border-radius: 10px;
  box-shadow: var(--ombre-1);
}
.table-reponse table { border-collapse: collapse; width: 100%; background: var(--carte); }
.table-reponse th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--estompe);
  background: var(--entete-table);
  padding: 8px 14px; border-bottom: 1px solid var(--bord);
  white-space: nowrap;
}
.table-reponse td {
  padding: 8px 14px; font-size: 13.5px;
  border-bottom: 1px solid var(--bord);
  font-variant-numeric: tabular-nums;
}
.table-reponse tr:last-child td { border-bottom: none; }
.table-reponse td:first-child { font-weight: 550; color: var(--marine); }

.corps code {
  font-family: Consolas, monospace; font-size: 13px;
  background: var(--fond-code); border: 1px solid var(--bord);
  border-radius: 6px; padding: 1px 6px;
}
.corps .cite {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent); background: var(--accent-teinte);
  border-radius: 5px; padding: 0 4px; margin: 0 2px;
  vertical-align: 2px;
}
.tour.user .corps { color: var(--texte); font-weight: 450; }

.mention-refus {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--alerte);
  background: var(--alerte-teinte);
  border-radius: 9px; padding: 6px 13px; margin-bottom: 12px;
}
.mention-refus svg { width: 13px; height: 13px; }

/* ---- Carte contexte site, données Praxedo montrées telles quelles ---- */
.carte-site {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 3px solid var(--marine);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 14px;
  box-shadow: var(--ombre-1);
}
:root[data-theme="sombre"] .carte-site { border-left-color: var(--accent); }
.tete-site { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.etiquette-praxedo {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: #fff; background: var(--plein);
  border-radius: 5px; padding: 2px 8px;
}
.nom-site { font-weight: 650; color: var(--marine); font-size: 14.5px; }
.cle-site { color: var(--estompe); font-size: 12px; font-family: Consolas, monospace; }
.detail-site { color: var(--sourd); font-size: 13px; margin: 4px 0 2px; }
.probleme-site { color: var(--alerte); font-size: 13px; margin-top: 6px; }
.ligne-intervention {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0 2px; border-top: 1px dashed var(--bord); margin-top: 7px;
}
.ligne-intervention .etat { flex: none; }
.date-intervention { flex: none; font-size: 12px; color: var(--estompe); }
.texte-intervention {
  font-size: 13px; color: var(--texte); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le code du technicien : un identifiant, donc la même graisse monospace que
   la clé site, et un fond de panneau pour le détacher sans crier. */
.qui-intervention {
  flex: none; font-family: Consolas, monospace; font-size: 11.5px;
  font-weight: 600; color: var(--marine);
  background: var(--panneau); border-radius: 5px; padding: 2px 6px;
}
/* La nature de l'intervention et sa durée estimée, au même niveau de discrétion
   que la date qui les précède. */
.nature-intervention { flex: none; font-size: 12px; color: var(--sourd); }
/* L'interlocuteur du site, sous l'adresse, et ceux de l'intervention, sous sa
   ligne : c'est la personne que le technicien appellera en arrivant. */
.contact-site { color: var(--sourd); font-size: 13px; margin-top: 2px; }
.contacts-intervention {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--estompe); padding-left: 2px; margin-top: 2px;
}
@media (max-width: 940px) {
  .ligne-intervention { flex-wrap: wrap; }
  .texte-intervention { white-space: normal; width: 100%; }
}

/* ---- Plis : sources et schémas repliés, la réponse d'abord ---- */
.pli { margin-top: 10px; }
.pli summary {
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 650; color: var(--sourd);
  border: 1px solid var(--bord); border-radius: 9px;
  background: var(--carte);
  padding: 6px 13px;
  transition: all .12s;
  user-select: none;
}
.pli summary::-webkit-details-marker { display: none; }
.pli summary:hover { color: var(--accent); border-color: var(--accent); }
.pli summary svg { width: 11px; height: 11px; transition: transform .15s; }
.pli[open] summary svg { transform: rotate(90deg); }
.pli[open] summary { color: var(--marine); }
.compte-pli {
  font-size: 10.5px; font-weight: 700;
  color: var(--accent); background: var(--accent-teinte);
  border-radius: 99px; padding: 1px 7px;
}
.pli > div { margin-top: 8px; animation: surgir .2s ease; }

.sources { margin-top: 0; display: grid; gap: 6px; }
.source {
  display: flex; gap: 10px; align-items: baseline;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px; padding: 8px 13px;
  font-size: 13px;
  box-shadow: var(--ombre-1);
}
.source .n {
  flex: none; min-width: 18px; text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-teinte); border-radius: 5px; padding: 1px 5px;
}
.source .doc { font-weight: 550; color: var(--marine); }
.source .ou { margin-left: auto; flex: none; color: var(--estompe); font-size: 12px; }

/* L'attente en direct : les documents examinés pendant la recherche.
   Ce sont exactement les lignes du pli « Sources », dans la même grille, pour
   qu'à l'arrivée de la réponse elles se replient au lieu de disparaître.
   Aucune couleur, aucune ombre, aucune animation nouvelle : « surgir » est
   l'entrée de la maison, déjà celle d'un tour de conversation et du contenu
   d'un pli qui s'ouvre. */
#attente-sources { margin-top: 10px; }
#attente-sources .source { animation: surgir .25s ease both; }
/* La pastille du numéro tant qu'il n'est pas connu : elle garde sa géométrie,
   donc rien ne se décale quand le numéro arrive après le reclassement. */
#attente-sources .source .n:empty { background: var(--bord); }
/* Un candidat écarté au reclassement s'atténue, il ne s'en va pas. C'est le
   vocabulaire du « plus actif » de la feuille, entre .45 et .55. */
#attente-sources .source.ecarte { opacity: .5; }
/* Six à neuf entrées décalées, ce n'est plus trois points qui clignotent :
   qui a demandé du calme à son système doit l'obtenir. */
@media (prefers-reduced-motion: reduce) {
  #attente-sources .source { animation: none; }
}

.figures { margin-top: 0; }
.figures .cadre {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 10px;
  box-shadow: var(--ombre-1); margin-bottom: 10px;
}
.figures img {
  display: block; width: 100%; border-radius: 9px; cursor: zoom-in;
}
.figures .legende {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--sourd); padding: 8px 4px 2px;
}
.figures .legende::before {
  content: "schéma"; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--accent); background: var(--accent-teinte);
  border-radius: 5px; padding: 2px 7px;
}

/* La recherche approfondie : la seconde chance après un refus (6.1). */
.bouton-approfondir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--accent); color: var(--accent);
  background: var(--accent-teinte);
  border-radius: 10px; padding: 9px 16px;
  font-size: 13px; font-weight: 650;
  transition: all .12s;
}
.bouton-approfondir:hover { background: var(--accent); color: #fff; }
.bouton-approfondir svg { width: 14px; height: 14px; }
.badge-approfondi {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent); background: var(--accent-teinte);
  border-radius: 5px; padding: 2px 8px; margin-left: 4px;
}

/* Les actions sous une réponse. **Le lien est habillé comme le bouton**, sinon
   il prend le bleu de lien par défaut du navigateur, qui claque en thème sombre
   et n'appartient à aucune palette de ce projet. Le téléchargement d'un PDF est
   une ancre parce qu'il faut un href, pas parce qu'il doit ressembler à un lien. */
.actions-reponse { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.actions-reponse button,
.actions-reponse a {
  color: var(--estompe); font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .1s;
  text-decoration: none; cursor: pointer;
}
.actions-reponse button:hover,
.actions-reponse a:hover { color: var(--accent); }
.actions-reponse a:visited { color: var(--estompe); }
.actions-reponse svg { width: 13px; height: 13px; }

.attente-ia { display: flex; align-items: center; gap: 10px; color: var(--sourd); font-size: 13.5px; }
.attente-ia .points { display: inline-flex; gap: 4px; }
.attente-ia .points i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulser 1.2s infinite;
}
.attente-ia .points i:nth-child(2) { animation-delay: .2s; }
.attente-ia .points i:nth-child(3) { animation-delay: .4s; }
@keyframes pulser { 0%, 70%, 100% { opacity: .2; } 35% { opacity: 1; } }

/* ---- Composer ---- */

.bas { padding: 4px 24px 12px; }
.composeur {
  max-width: 780px; margin: 0 auto;
  background: var(--carte);
  border: 1px solid var(--bord-fort);
  border-radius: 16px;
  box-shadow: var(--ombre-2);
  padding: 12px 14px 9px;
  transition: border-color .12s, box-shadow .12s;
}
.composeur:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228, 87, 46, .1), var(--ombre-2);
}
.composeur textarea {
  width: 100%; border: none; outline: none; resize: none;
  min-height: 26px; max-height: 190px; background: none;
  padding: 3px 5px; line-height: 1.55; font-size: 15px;
}
.composeur textarea::placeholder { color: var(--estompe); }
.composeur .ligne-bas { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.jeton-module {
  font-size: 11px; font-weight: 650; color: var(--sourd);
  background: var(--panneau); border-radius: 7px; padding: 4px 11px;
  letter-spacing: .3px;
}
.ligne-marque { display: flex; align-items: flex-start; justify-content: space-between; }
.bouton-theme {
  color: var(--estompe); padding: 7px; border-radius: 9px;
  transition: all .12s;
}
.bouton-theme:hover { color: var(--accent); background: var(--accent-teinte); }
.bouton-theme svg { width: 16px; height: 16px; display: block; }

.bouton-outil {
  color: var(--estompe); padding: 7px; border-radius: 9px;
  transition: all .12s; position: relative;
}
.bouton-outil:hover { color: var(--accent); background: var(--accent-teinte); }
.bouton-outil svg { width: 17px; height: 17px; display: block; }
.bouton-outil.enregistre { color: #fff; background: #cf3b2a; animation: bat 1.4s infinite; }
@keyframes bat { 0%, 100% { box-shadow: 0 0 0 0 rgba(207, 59, 42, .45); }
                 50% { box-shadow: 0 0 0 7px rgba(207, 59, 42, 0); } }

.pieces-choisies {
  display: none; flex-wrap: wrap; gap: 7px; padding: 2px 4px 8px;
  display: none;
}
.pieces-choisies:not(:empty) { display: flex; }
.piece-choisie {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--bord); background: var(--fond);
  border-radius: 9px; padding: 5px 9px; font-size: 12.5px; color: var(--sourd);
  max-width: 240px; overflow: hidden;
}
.piece-choisie img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }
.piece-choisie .pdf, .piece-pdf .pdf {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  color: #fff; background: var(--critique); border-radius: 4px; padding: 3px 6px;
}
.piece-choisie button { color: var(--estompe); font-size: 15px; padding: 0 2px; }
.piece-choisie button:hover { color: var(--critique); }

.pieces-envoyees { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.pieces-envoyees img {
  max-width: 190px; max-height: 150px; border-radius: 10px;
  border: 1px solid var(--bord); cursor: zoom-in; box-shadow: var(--ombre-1);
}
.piece-pdf {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--bord); background: var(--carte);
  border-radius: 10px; padding: 9px 13px; font-size: 13px; color: var(--texte);
  box-shadow: var(--ombre-1);
}
.piece-pdf:hover { border-color: var(--accent); }

.bascule-opus {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--sourd);
  border: 1px solid var(--bord); border-radius: 8px; padding: 4px 11px;
  transition: all .12s;
}
.bascule-opus:hover { border-color: var(--accent); color: var(--accent); }
.bascule-opus.active {
  color: var(--accent); background: var(--accent-teinte); border-color: transparent;
}
.bascule-opus svg { width: 12px; height: 12px; }
.bouton-envoi {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff;
  border-radius: 10px; padding: 9px 20px;
  font-weight: 600; font-size: 14px;
  transition: background .12s, transform .1s;
}
.bouton-envoi:hover { background: var(--accent-fonce); }
.bouton-envoi:active { transform: scale(.98); }
.bouton-envoi:disabled { opacity: .45; cursor: wait; }
.bouton-envoi svg { width: 13px; height: 13px; }
.avertissement {
  max-width: 780px; margin: 9px auto 0; text-align: center;
  font-size: 11.5px; color: var(--estompe);
}

/* En mode accueil, le composer vit au centre de la page. */
#porte-accueil .composeur { margin: 0; }
#porte-accueil .avertissement { text-align: left; margin-left: 2px; }

/* ================= Espaces cartes et administration ================= */

.entete-espace { padding-top: 4vh; margin-bottom: 24px; animation: surgir .3s ease; }
.entete-espace h1 {
  font-family: var(--serif-titres);
  font-size: 27px; font-weight: 600; color: var(--marine); letter-spacing: -.2px;
}
.entete-espace p { color: var(--sourd); margin-top: 8px; max-width: 560px; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 20px;
  box-shadow: var(--ombre-1);
  transition: box-shadow .15s, border-color .15s;
}
.carte:hover { box-shadow: var(--ombre-2); }
.carte .icone {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-teinte); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 13px;
}
.carte .icone svg { width: 18px; height: 18px; }
.carte h3 { font-family: var(--serif-titres); font-size: 16px; font-weight: 600; color: var(--marine); }
.carte .description { font-size: 13.5px; color: var(--sourd); margin-top: 6px; }
.carte-skill { text-align: left; cursor: pointer; display: block; width: 100%; }
.carte-skill:hover { border-color: var(--accent); }
.lancer-skill {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  font-size: 12.5px; font-weight: 650; color: var(--accent);
}
.lancer-skill svg { width: 11px; height: 11px; transition: transform .15s; }
.carte-skill:hover .lancer-skill svg { transform: translateX(3px); }

/* Dépôt de document et file de traitement du corpus. */
.depot-corpus {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 2px dashed var(--bord-fort); border-radius: 14px;
  padding: 28px; margin-bottom: 18px;
  color: var(--sourd); cursor: pointer;
  transition: all .15s;
}
.depot-corpus:hover, .depot-corpus.survol {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-teinte);
}
.depot-corpus svg { width: 26px; height: 26px; }
.file-corpus { display: grid; gap: 6px; margin-bottom: 18px; }
.ligne-file {
  display: flex; align-items: center; gap: 12px;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px; padding: 8px 13px; box-shadow: var(--ombre-1);
}
.nom-file { font-weight: 550; color: var(--marine); font-size: 13.5px; }
.message-file { margin-left: auto; font-size: 12.5px; color: var(--sourd); }
.titre-section-admin {
  font-family: var(--serif-titres); font-size: 15px; font-weight: 600;
  color: var(--marine); margin: 6px 0 12px;
}
.carte-veille {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 18px;
  box-shadow: var(--ombre-1);
}
.carte-veille.a-faire { border-left: 3px solid var(--accent); }
.pastilles-veille { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pastille-veille {
  font-size: 12px; font-weight: 600; color: var(--sourd);
  background: var(--panneau); border-radius: 99px; padding: 4px 12px;
}
.pastille-veille.actif { color: var(--accent); background: var(--accent-teinte); }
.pastille-veille.alerte { color: var(--alerte); background: var(--alerte-teinte); }

/* La fenêtre de traitement (cadrage 7.7). Bordure gauche pleine quand elle est
   ouverte : d'un coup d'œil sur le panneau, on sait dans quel régime tourne la
   machine, sans avoir à lire le chiffre. */
.carte-fenetre {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 3px solid var(--bord);
  border-radius: var(--rayon); padding: 16px 18px; margin-bottom: 18px;
  box-shadow: var(--ombre-1);
}
.carte-fenetre.ouverte { border-left-color: var(--accent); }
.pastille-regime {
  margin-left: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  color: var(--sourd); background: var(--panneau);
  border-radius: 99px; padding: 3px 10px; vertical-align: 1px;
}
.carte-fenetre.ouverte .pastille-regime {
  color: var(--accent); background: var(--accent-teinte);
}
/* Le bloc de texte prend la place qui reste, l'état va à droite et ne se coupe
   pas. Sans la base de 300 px, la ligne enveloppante renverrait l'état à la
   ligne suivante dès que la phrase est longue, ce qu'elle est ici. */
.bloc-fenetre { flex: 1 1 300px; }
.etat-fenetre { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.barre-dashboard {
  display: flex; align-items: center; gap: 14px;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px 10px 0 0; padding: 10px 16px;
  font-size: 14px; color: var(--marine);
}
.barre-dashboard a { margin-left: auto; }
.iframe-dashboard {
  width: 100%; height: max(420px, calc(100vh - 210px));
  border: 1px solid var(--bord); border-top: none;
  border-radius: 0 0 10px 10px; background: var(--carte);
  display: block;
}

/* **Un tableau de bord n'est pas un texte, il ne se lit pas en colonne.**
   L'intérieur du Hub est plafonné à 780 px parce qu'au-delà une ligne de prose
   devient pénible à suivre. Pour une application, ce même plafond donnait un
   hublot au milieu d'un écran vide, avec une barre de défilement horizontale à
   l'intérieur. Un tableau de bord prend donc toute la largeur et toute la
   hauteur, la bande d'avertissement sur les réponses d'IA disparaissant avec,
   puisqu'il n'y a ici aucune réponse d'IA.

   La hauteur est obtenue par une boîte flexible et non par un calcul en pixels :
   ainsi rien à corriger si la barre du haut change d'un pixel. */
.interieur.pleine-largeur {
  max-width: none; padding: 0; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.interieur.pleine-largeur .barre-dashboard {
  border-radius: 0; border-left: none; border-right: none;
}
.interieur.pleine-largeur .iframe-dashboard {
  flex: 1; height: auto; min-height: 0;
  border-radius: 0; border-left: none; border-right: none; border-bottom: none;
}
.interieur.pleine-largeur:fullscreen,
.interieur.pleine-largeur:-webkit-full-screen { background: var(--fond); }

.carte-nouveau { border-style: dashed; }
.carte-nouveau .icone { font-size: 22px; font-weight: 500; }

.formulaire-skill {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 22px;
  box-shadow: var(--ombre-1); max-width: 720px;
  display: grid; gap: 14px;
}
.formulaire-skill label {
  display: grid; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--sourd);
}
.formulaire-skill .ligne-champs {
  display: grid; grid-template-columns: 1fr 160px; gap: 12px;
}
.formulaire-skill input, .formulaire-skill textarea {
  border: 1px solid var(--bord-fort); border-radius: 10px;
  background: var(--carte); padding: 10px 13px; outline: none;
  font-weight: 400; font-size: 14px;
  transition: border-color .12s;
}
.formulaire-skill input:focus, .formulaire-skill textarea:focus {
  border-color: var(--accent);
}
.formulaire-skill textarea { resize: vertical; line-height: 1.55; }
.actions-skill { display: flex; align-items: center; gap: 10px; }
@media (max-width: 940px) {
  .formulaire-skill .ligne-champs { grid-template-columns: 1fr; }
}

.carte .marque-exemple {
  display: inline-block; margin-top: 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: var(--alerte); background: var(--alerte-teinte);
  border-radius: 6px; padding: 3px 9px; text-transform: uppercase;
}
.bandeau-info {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: 11px; padding: 14px 17px;
  font-size: 13.5px; color: var(--sourd); margin-bottom: 20px;
  box-shadow: var(--ombre-1);
}
.bandeau-info b { color: var(--texte); }

.onglets {
  display: inline-flex; gap: 3px; margin-bottom: 20px;
  background: var(--panneau); border-radius: 11px; padding: 4px;
}
.onglet {
  border-radius: 8px; padding: 7px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--sourd);
  transition: all .12s;
}
.onglet.actif { background: var(--carte); color: var(--marine); box-shadow: var(--ombre-1); }

table.donnees {
  width: 100%; border-collapse: collapse;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre-1);
}
table.donnees th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--estompe);
  padding: 12px 18px; border-bottom: 1px solid var(--bord);
  background: var(--entete-table);
}
table.donnees td { padding: 12px 18px; border-bottom: 1px solid var(--bord); font-size: 13.5px; }
table.donnees tr:last-child td { border-bottom: none; }
.etat { font-size: 11.5px; font-weight: 700; border-radius: 7px; padding: 3px 10px; }
.etat.actif { color: var(--ok); background: var(--ok-teinte); }
.etat.attente { color: var(--alerte); background: var(--alerte-teinte); }
.etat.refuse { color: var(--estompe); background: var(--panneau); }
.etat.critique { color: var(--critique); background: var(--critique-teinte); }

/* La page de veille de sécurité (cadrage 11.5). Une remontée est une carte et
   non une ligne de tableau : elle porte un résumé, une exposition, un correctif
   et deux boutons de décision, ce qui ne tient pas dans une cellule. Celles qui
   n'appellent aucune décision, elles, restent en tableau. */
.carte-avis {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 3px solid var(--critique);
  border-radius: var(--rayon); padding: 15px 18px; margin-bottom: 12px;
  box-shadow: var(--ombre-1);
}
.titre-avis {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--serif-titres); font-size: 15px; font-weight: 600;
  color: var(--marine); margin-bottom: 5px;
}
.grille-avis {
  display: grid; gap: 10px 22px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  font-size: 12.5px; color: var(--sourd);
}
.grille-avis b { color: var(--marine); font-weight: 650; font-size: 11.5px;
  letter-spacing: .3px; text-transform: uppercase; }
.ligne-boutons-veille {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.ligne-boutons-veille a.bouton-petit { text-decoration: none; }

/* Une bascule sur sa ligne, avec son explication en dessous. Utilisée par
   l'accès web, où chaque interrupteur a besoin d'une phrase. */
.ligne-bascule {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13.5px; color: var(--texte);
  padding: 5px 0; cursor: pointer;
}
.ligne-bascule input { margin-top: 2px; accent-color: var(--accent); }
.ligne-bascule input:disabled { cursor: not-allowed; }
.ligne-bascule input:disabled + * { color: var(--estompe); }
.ligne-bascule .detail-site { display: inline; }

/* Le sélecteur de skill du composeur. Discret : il vit à côté du jeton de
   module, il ne prend la parole que dans les espaces qui ont des skills. */
.choix-skill { display: inline-flex; align-items: center; }
.choix-skill select {
  border: 1px solid var(--bord); background: var(--carte);
  border-radius: 99px; padding: 4px 9px;
  font-size: 12px; font-weight: 600; color: var(--sourd);
  outline: none; max-width: 190px;
}
.choix-skill select:hover { border-color: var(--accent); color: var(--accent); }
.choix-skill select:focus { border-color: var(--accent); }
/* La carte d'un document produit, sous la réponse. Bordure gauche marquée :
   c'est un livrable, pas un commentaire. */
.carte-document {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon); padding: 14px 16px; margin: 12px 0;
  box-shadow: var(--ombre-1);
}
.nom-document {
  font-family: var(--serif-titres); font-size: 15px; font-weight: 600;
  color: var(--marine); margin: 2px 0 4px;
}
.table-document { margin-top: 12px; }
.table-document td, .table-document th { font-size: 12.5px; }

/* Les canaux de diffusion d'un skill, sur sa carte. Discret et informatif :
   on doit voir d'un coup d'œil où un skill apparaît, sans le chercher. */
.canaux-skill {
  margin-top: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--sourd); letter-spacing: .01em;
}

.skill-figé {
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: var(--accent-teinte); border-radius: 99px; padding: 4px 11px;
  cursor: help;
}
select.choix-categorie {
  border: 1px solid var(--bord-fort); border-radius: 9px; padding: 7px 10px;
  background: var(--carte); font-size: 13px; outline: none;
}
select.choix-categorie:focus { border-color: var(--accent); }
.bouton-petit { border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
/* Un téléchargement a besoin d'un href, donc d'une ancre, mais il doit
   ressembler au bouton d'à côté. Sans cette règle, l'ancre prend le bleu de lien
   par défaut du navigateur, qui claque en thème sombre et n'appartient à aucune
   palette de ce projet. */
a.bouton-petit { text-decoration: none; color: var(--marine); }
a.bouton-petit:hover { color: var(--accent); }
a.bouton-petit.valider, a.bouton-petit.valider:hover { color: #fff; }
a.bouton-petit:visited { color: var(--marine); }
a.bouton-petit.valider:visited { color: #fff; }
.bouton-petit.valider { background: var(--ok); color: #fff; }
.bouton-petit.valider:hover { filter: brightness(1.06); }
.bouton-petit.refuser { color: var(--estompe); }
/* Un petit bouton encadré, pour une action qui n'est ni une validation ni un
   refus : télécharger, marquer, exporter. */
.bouton-petit.cadre {
  border: 1px solid var(--bord-fort); background: var(--carte);
  color: var(--marine);
}
.bouton-petit.cadre:hover { border-color: var(--accent); color: var(--accent); }
.bouton-petit.refuser:hover { color: var(--critique); }

/* ---- Administration : plafonds, espaces à la carte, jauges ---- */

.sous-cellule { font-size: 11.5px; color: var(--estompe); margin-top: 1px; }
.cellule-sourde { font-size: 12px; color: var(--estompe); }
.ligne-sourde td { opacity: .55; }
.cellule-plafond {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; white-space: nowrap;
}
.groupe-plafond {
  display: inline-flex; align-items: center;
  border: 1px solid var(--bord-fort); border-radius: 9px;
  background: var(--carte); overflow: hidden;
}
.groupe-plafond:focus-within { border-color: var(--accent); }
.groupe-plafond i {
  font-style: normal; color: var(--estompe); font-size: 13px;
  padding: 0 9px 0 2px;
}
.champ-plafond {
  width: 52px; border: none; outline: none;
  padding: 7px 2px 7px 9px; background: none; text-align: right;
  -moz-appearance: textfield;
}
.champ-plafond::-webkit-outer-spin-button,
.champ-plafond::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sous-plafond { font-size: 11px; color: var(--estompe); margin-top: 5px; white-space: nowrap; }
.lien-discret.danger:hover { color: var(--critique); }
.lien-discret {
  font-size: 11.5px; color: var(--estompe); text-decoration: underline;
  text-underline-offset: 2px;
}
.lien-discret:hover { color: var(--accent); }
.bouton-petit.relever { background: var(--plein); color: #fff; padding: 6px 11px; }
.bouton-petit.relever:hover { background: var(--plein-survol); }
.case-brique {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--sourd); padding: 2px 0; cursor: pointer;
  white-space: nowrap;
}
.case-brique input { accent-color: var(--accent); }
.note-table { font-size: 12px; color: var(--estompe); margin-top: 10px; padding: 0 4px; }

.bloc-admin { margin-bottom: 30px; }
.bloc-admin h2 {
  font-family: var(--serif-titres);
  font-size: 17px; font-weight: 600; color: var(--marine); margin-bottom: 4px;
}
.bloc-admin .sous-bloc {
  font-size: 13px; color: var(--sourd); margin-bottom: 13px; max-width: 600px;
}
.fiche-modeles {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 10px; font-size: 12px; color: var(--estompe); padding: 0 4px;
}
.fiche-modeles b { color: var(--sourd); font-weight: 600; }
.cellule-cle { font-family: Consolas, monospace; font-size: 12.5px; color: var(--sourd); }
.ligne-fournisseur { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ligne-fournisseur input {
  flex: 1; min-width: 180px;
  border: 1px solid var(--bord-fort); border-radius: 10px;
  background: var(--carte); padding: 9px 13px; outline: none;
}
.ligne-fournisseur input:focus { border-color: var(--accent); }

.carte-globale {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 18px;
  box-shadow: var(--ombre-1);
}
.carte-globale.alerte { border-color: var(--alerte); }
.ligne-globale { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.titre-global { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--estompe); }
.montant-global { font-family: var(--serif-titres); font-size: 26px; font-weight: 600; color: var(--marine); margin-top: 3px; }
.montant-global span { font-size: 14px; color: var(--estompe); font-family: var(--sans); font-weight: 500; }
.etat-global { margin-left: auto; font-size: 12.5px; color: var(--sourd); max-width: 300px; text-align: right; }
.carte-globale.alerte .etat-global { color: var(--alerte); font-weight: 600; }
.jauge-globale { height: 7px; background: var(--panneau); border-radius: 4px; margin-top: 13px; overflow: hidden; }
.jauge-globale i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.jauge-globale i.haut { background: var(--alerte); }
.cellule-jauge { width: 120px; }
.jauge-ligne { height: 5px; background: var(--panneau); border-radius: 3px; overflow: hidden; }
.jauge-ligne i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.jauge-ligne i.haut { background: var(--alerte); }

/* ================= Visionneuse, toast, voile ================= */

.voile {
  position: fixed; inset: 0; background: rgba(14, 21, 33, .92);
  display: none; z-index: 60; overflow: hidden;
  cursor: grab; touch-action: none;
}
.voile.visible { display: block; }
.voile.deplace { cursor: grabbing; }
.voile img {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  user-select: none; -webkit-user-drag: none;
  border-radius: 4px;
}
.outils-visionneuse {
  position: absolute; top: 16px; right: 16px; z-index: 61;
  display: flex; gap: 6px;
  background: rgba(29, 36, 48, .85);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 6px;
  backdrop-filter: blur(6px);
}
.outils-visionneuse button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: #dde4ee; font-size: 20px; font-weight: 500;
  border-radius: 8px; transition: background .12s;
}
.outils-visionneuse button:hover { background: rgba(255, 255, 255, .12); }
.outils-visionneuse svg { width: 15px; height: 15px; }
#visionneuse-fermer { font-size: 24px; }

.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--plein); color: #fff; border-radius: 11px;
  padding: 12px 22px; font-size: 13.5px; opacity: 0;
  transition: all .25s cubic-bezier(.3, .8, .3, 1);
  pointer-events: none; z-index: 70;
  box-shadow: 0 12px 40px rgba(14, 21, 33, .35);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.voile-panneau { display: none; position: fixed; inset: 0; background: rgba(14, 21, 33, .4); z-index: 40; }

/* ================= Téléphone et tablette ================= */

/* Le bouton appareil photo ne sert que là où il y a une caméra au dos. */
.bouton-camera { display: none; }

@media (max-width: 940px) {
  .volet-marque { display: none; }
  .bouton-camera { display: block; }
  .jeton-module { display: none; }
  #bascule-texte { display: none; }
  .bascule-opus { padding: 6px 9px; }
  .panneau {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    transform: translateX(-105%);
    width: min(300px, 85vw);
    box-shadow: 16px 0 48px rgba(14, 21, 33, .25);
  }
  .panneau.ouvert { transform: translateX(0); }
  .voile-panneau.visible { display: block; }
  .bouton-menu { display: block; }
  .barre-haute { padding: 10px 14px; }
  .interieur { padding: 6px 16px 20px; }
  .accueil-espace { padding-top: 4vh; }
  .accueil-espace .bonjour { font-size: 25px; }
  .chips { flex-direction: column; }
  .chip { width: 100%; }
  .bas { padding: 4px 12px 10px; }
  .badge-modele { display: none; }
  .tour .corps { padding-left: 0; }
  .source .ou { display: none; }
  table.donnees { display: block; overflow-x: auto; }
}