/* VITOREX : interface du bureau. Aucune bordure, aucun dégradé, aucun translucide. */

:root {
  --fond: #F4F4F1;
  --surface: #FFFFFF;
  --surface-2: #ECECE8;
  --surface-3: #E1E1DB;
  --encre: #17191F;
  --encre-2: #4A4E58;
  --encre-3: #6B6F78;          /* texte secondaire : 4,6:1 sur le fond, lisible partout */
  --or: #D9A13B;
  --or-doux: #F6ECD8;
  --or-encre: #7A5A12;         /* texte sur fond or doux (badges « or », icônes) */
  --primaire: #17191F;
  --primaire-encre: #FFFFFF;
  --ok: #1B6E3F;
  --ok-doux: #DDEFE3;
  --alerte: #85560C;
  --alerte-doux: #F7ECD6;
  --erreur: #B0372B;
  --erreur-doux: #F6E1DE;
  --info: #2B4FA8;
  --info-doux: #E2E7F5;
  --nav: #17191F;
  --nav-encre: #B9BCC4;
  --nav-actif: #262931;
  --nav-groupe: #8A8E98;
  --code: #EDEDE8;

  /* Personnages et scènes de la page Activité */
  --scene-nuit: #262A36;
  --scene-jour: #F6E7C8;
  --scene-attente: #E4E4DE;
  --scene-lune: #E8E2C8;
  --perso-halo: #F2CF83;
  --perso-chaise: #3A3D46;
  --perso-joue: #B9685A;
  --perso-plateau: #B48A5E;
  --perso-ordi: #C9CBD1;
  --perso-ordi-base: #A9ACB4;
  --perso-logo: #9A9DA6;
  --perso-zzz: #A9BBF2;
  --perso-bulle: #FFFFFF;
  --perso-bulle-encre: #4A4E58;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px;
  --s9: 36px; --s10: 40px; --s11: 44px; --s12: 48px; --s13: 52px; --s14: 56px; --s15: 60px; --s16: 64px;

  /* Échelle typographique : six tailles, trois graisses. */
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-l: 17px; --t-xl: 24px; --t-xxl: 32px;
  --g-normal: 500; --g-demi: 600; --g-fort: 700;

  --rayon: 12px;
  --rayon-petit: 8px;
  --rayon-grand: 20px;
  /* Ombres douces (finition, comme le design system KELO) : jamais de bordure ni de dégradé. */
  --sh-1: 0 1px 2px rgba(23,25,31,.05), 0 2px 8px rgba(23,25,31,.05);
  --sh-2: 0 6px 24px rgba(23,25,31,.08);
  --sh-3: 0 18px 48px rgba(23,25,31,.16);
  --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

/* Sombre : automatique (réglage du système) sauf choix « clair », ou forcé par le choix « sombre ». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #121317;
    --surface: #1E2026;          /* cartes mieux détachées du fond (les ombres portent peu en sombre) */
    --surface-2: #292C33;
    --surface-3: #363943;
    --encre: #ECECE8;
    --encre-2: #B6B8BE;
    --encre-3: #9A9DA5;
    --or-doux: #3A2F17;
    --or-encre: #E3B160;
    --primaire: #ECECE8;
    --primaire-encre: #17191F;
    --ok: #63C68F;
    --ok-doux: #17301F;
    --alerte: #E3B160;
    --alerte-doux: #33280F;
    --erreur: #EE8578;
    --erreur-doux: #3A1A16;
    --info: #93A9EE;
    --info-doux: #1B2443;
    --nav: #0C0D10;
    --nav-actif: #1C1E24;
    --code: #15171B;
    --scene-nuit: #1C1F2A;       /* assez clair pour que les silhouettes sombres restent visibles */
    --scene-jour: #3A3020;
    --scene-attente: #23252C;
    --perso-halo: #5E4A22;
    --perso-chaise: #2A2C33;
    --perso-plateau: #6E5338;
    --perso-ordi: #9EA1A9;
    --perso-ordi-base: #80838B;
    --perso-bulle: #ECECE8;
    --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.22);
    --sh-2: 0 6px 24px rgba(0,0,0,.34);
    --sh-3: 0 18px 48px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --fond: #121317;
    --surface: #1E2026;          /* cartes mieux détachées du fond (les ombres portent peu en sombre) */
    --surface-2: #292C33;
    --surface-3: #363943;
    --encre: #ECECE8;
    --encre-2: #B6B8BE;
    --encre-3: #9A9DA5;
    --or-doux: #3A2F17;
    --or-encre: #E3B160;
    --primaire: #ECECE8;
    --primaire-encre: #17191F;
    --ok: #63C68F;
    --ok-doux: #17301F;
    --alerte: #E3B160;
    --alerte-doux: #33280F;
    --erreur: #EE8578;
    --erreur-doux: #3A1A16;
    --info: #93A9EE;
    --info-doux: #1B2443;
    --nav: #0C0D10;
    --nav-actif: #1C1E24;
    --code: #15171B;
    --scene-nuit: #1C1F2A;       /* assez clair pour que les silhouettes sombres restent visibles */
    --scene-jour: #3A3020;
    --scene-attente: #23252C;
    --perso-halo: #5E4A22;
    --perso-chaise: #2A2C33;
    --perso-plateau: #6E5338;
    --perso-ordi: #9EA1A9;
    --perso-ordi-base: #80838B;
    --perso-bulle: #ECECE8;
    --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.22);
    --sh-2: 0 6px 24px rgba(0,0,0,.34);
    --sh-3: 0 18px 48px rgba(0,0,0,.5);
    color-scheme: dark;
  }


* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--encre); font: 15px/1.55 var(--police); -webkit-font-smoothing: antialiased; }
a { color: var(--info); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Anneau de focus : l'encre (3:1 au moins sur toute surface), doublé d'un halo or doux. */
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; box-shadow: 0 0 0 5px var(--or-doux); }
.nav :focus-visible { outline-color: var(--or); box-shadow: none; }
[hidden] { display: none !important; }

.demarrage { display: grid; place-items: center; min-height: 100vh; }
.chargement { font-weight: 700; letter-spacing: 6px; color: var(--encre-3); }

/* --- Coque --------------------------------------------------------------------------------- */

.coque { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.coque > div { min-width: 0; }
.nav {
  background: var(--nav); color: var(--nav-encre); padding: var(--s5) var(--s3);
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3) var(--s5); color: #FFFFFF; }
.marque img { width: 32px; height: 32px; }
.marque strong { font-size: 16px; letter-spacing: 3px; }
.marque small { display: block; color: var(--nav-encre); font-size: 11px; letter-spacing: 1px; }
.nav a {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--rayon-petit);
  color: var(--nav-encre); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.nav a:hover { background: var(--nav-actif); color: #FFFFFF; }
.nav a.actif { background: var(--nav-actif); color: #FFFFFF; }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .bas { margin-top: auto; }
.nav-groupe { margin: var(--s4) 0 var(--s1); padding: 0 var(--s3); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--nav-groupe); }
.nav button.lien { background: none; border: 0; color: var(--nav-encre); padding: var(--s2) var(--s3); text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--s3); border-radius: var(--rayon-petit); font-size: 14.5px; font-weight: 500; width: 100%; }
.nav button.lien:hover { background: var(--nav-actif); color: #FFFFFF; }
.nav button.lien svg { width: 18px; height: 18px; flex: none; }
.nav .theme { display: flex; gap: 2px; margin: var(--s2) var(--s3) var(--s1); background: var(--nav-actif); border-radius: 999px; padding: 3px; }
.nav .theme button { flex: 1; border: 0; background: transparent; color: var(--nav-encre); font-size: 12px; font-weight: 600; padding: 5px 0; border-radius: 999px; cursor: pointer; }
.nav .theme button.actif { background: var(--surface); color: var(--encre); }
.barre-basse { display: none; }

.colonne { display: flex; flex-direction: column; min-height: 100vh; }
.principal { padding: var(--s8) var(--s10); max-width: 1240px; width: 100%; margin: 0 auto; }
.titre-page p { max-width: 72ch; }
.principal.plein { padding: 0; max-width: none; flex: 1; min-height: 0; }
.entete-mobile { display: none; }
.voile { display: none; }
.bandeau { padding: var(--s2) var(--s10); font-size: 14px; font-weight: 500; }
.bandeau.alerte { background: var(--alerte-doux); color: var(--alerte); }
.bandeau.bloque { background: var(--erreur-doux); color: var(--erreur); }

.titre-page { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.titre-page h1 { margin: 0; font-size: var(--t-xl); font-weight: var(--g-fort); letter-spacing: -0.3px; line-height: 1.2; }
.titre-page p { margin: var(--s1) 0 0; color: var(--encre-2); }

/* --- Éléments ------------------------------------------------------------------------------ */

.carte { background: var(--surface); border-radius: var(--rayon-grand); padding: var(--s6); box-shadow: var(--sh-1); }
a.carte, .carte-lien { transition: transform .18s ease, box-shadow .18s ease; }
a.carte:hover, .carte-lien:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.carte + .carte { margin-top: var(--s4); }
.carte h2 { margin: 0 0 var(--s4); font-size: 15px; font-weight: 650; }
.grille { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grille-2 { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grille-3 { display: grid; gap: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-4 { display: grid; gap: var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grille-4 > * { min-width: 0; }
.grille > *, .grille-2 > *, .grille-3 > * { min-width: 0; }
.grille > .carte, .grille-2 > .carte, .grille-3 > .carte, .grille-4 > .carte, .pile > .carte { margin-top: 0; }
.grille + .carte, .grille-2 + .carte, .carte + .grille, .carte + .grille-2, .grille-2 + .grille-2 { margin-top: var(--s4); }
.pile > * + * { margin-top: var(--s3); }
.discret { color: var(--encre-3); font-size: 13px; }
.chiffre { font-size: 30px; font-weight: 750; line-height: 1.1; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); }
.mb3 { margin-bottom: var(--s3); }
.bloc { display: block; }
.carte-lien { display: block; text-decoration: none; color: inherit; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border: 0; border-radius: var(--rayon-petit); padding: var(--s2) var(--s4); min-height: 38px;
  background: var(--primaire); color: var(--primaire-encre); font-weight: 600; cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--encre-2); }
.bouton:active { transform: translateY(1px); }
.bouton.second { background: var(--surface-2); color: var(--encre); }
.bouton.second:hover { background: var(--surface-3); }
.bouton.danger { background: var(--erreur-doux); color: var(--erreur); }
.bouton.danger:hover { background: var(--erreur); color: #FFFFFF; }
.bouton.petit { min-height: 32px; padding: var(--s1) var(--s3); font-size: 13px; }
/* Désactivé : après les variantes, pour qu'un bouton secondaire ou danger désactivé le paraisse aussi. */
.bouton:disabled, .bouton:disabled:hover { background: var(--surface-3); color: var(--encre-3); cursor: default; transform: none; }
.bouton.pleine { width: 100%; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.lien-discret { background: none; border: 0; color: var(--encre-3); font-size: 12.5px; cursor: pointer; padding: var(--s1); }
.lien-discret:hover { color: var(--erreur); }

.champ { display: flex; flex-direction: column; gap: var(--s1); }
.champ label { font-weight: 600; font-size: 13px; color: var(--encre-2); }
input[type=text], input[type=password], input[type=time], input[type=url], input[type=number], input[type=date], input[type=datetime-local], input[type=tel], select, textarea {
  background: var(--surface-2); border: 0; border-radius: var(--rayon-petit); padding: var(--s2) var(--s3); min-height: 40px; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
textarea.code { font-family: var(--mono); font-size: 13px; min-height: 420px; }
.case { display: flex; gap: var(--s2); align-items: center; font-weight: 500; }
.case input { width: 18px; height: 18px; accent-color: var(--encre); }

.badge { display: inline-block; padding: 2px var(--s2); border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--encre-2); white-space: nowrap; }
.badge.ok { background: var(--ok-doux); color: var(--ok); }
.badge.alerte { background: var(--alerte-doux); color: var(--alerte); }
.badge.erreur { background: var(--erreur-doux); color: var(--erreur); }
.badge.info { background: var(--info-doux); color: var(--info); }
.badge.or { background: var(--or-doux); color: var(--or-encre); }

.jauge { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: var(--s2) 0; }
.jauge span { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 999px; }
.jauge span.alerte { background: var(--alerte); }
.jauge span.bloque { background: var(--erreur); }

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li, .liste > a { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border-radius: var(--rayon-petit); color: inherit; text-decoration: none; }
.liste > li:nth-child(odd), .liste > a:nth-child(odd) { background: var(--surface-2); }
.liste > a:hover { background: var(--surface-3); }
.liste .grandit { flex: 1; min-width: 0; }
.ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onglets : un seul composant (barreOnglets) ; boutons et liens ont le même aspect. */
.onglets { display: flex; gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4); }
.onglets [role="tab"] { border: 0; background: var(--surface-2); color: var(--encre); padding: var(--s1) var(--s3); border-radius: 999px; cursor: pointer; font-weight: var(--g-normal); font-size: var(--t-m); text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; }
.onglets [role="tab"]:hover { background: var(--surface-3); }
.onglets [role="tab"].actif { background: var(--primaire); color: var(--primaire-encre); }
.onglets [role="tab"]:disabled { opacity: .5; cursor: default; }
.onglets-ligne { display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
.onglets-ligne .onglets { flex: 1; margin-bottom: var(--s3); }

.vide { padding: var(--s8); text-align: center; color: var(--encre-3); }
/* Alerte de page (pont coupé, rappels coupés...) : un vrai bandeau, distinct d'un état vide. */
.alerte-page { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--rayon-petit); margin-bottom: var(--s4); font-weight: var(--g-normal); background: var(--alerte-doux); color: var(--alerte); }
.alerte-page.erreur { background: var(--erreur-doux); color: var(--erreur); }
.alerte-page .badge { flex: none; }
/* Squelette affiché pendant le chargement d'une page. */
.squelette { display: flex; flex-direction: column; gap: var(--s4); animation: squelette 1.2s ease-in-out infinite; }
.squelette i { display: block; border-radius: var(--rayon-petit); background: var(--surface-2); }
.squelette .sq-titre { height: 28px; width: 220px; max-width: 60%; }
.squelette .sq-ligne { height: 14px; width: 60%; }
.squelette .sq-carte { height: 120px; width: 100%; border-radius: var(--rayon); }
@keyframes squelette { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }
/* Erreur de page : message et nouvel essai. */
.erreur-page { padding: var(--s8); text-align: center; color: var(--encre-2); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.erreur-page strong { color: var(--erreur); }
pre.brut { background: var(--code); border-radius: var(--rayon-petit); padding: var(--s4); overflow: auto; font: 12.5px/1.5 var(--mono); max-height: 70vh; white-space: pre-wrap; word-break: break-word; }

/* --- Texte mis en forme -------------------------------------------------------------------- */

.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: var(--s5) 0 var(--s2); line-height: 1.3; font-weight: 650; }
.md h1 { font-size: 20px; } .md h2 { font-size: 17px; } .md h3, .md h4 { font-size: 15px; }
.md p { margin: var(--s3) 0; }
.md ul, .md ol { margin: var(--s3) 0; padding-left: var(--s6); }
.md li + li { margin-top: var(--s1); }
.md code { background: var(--code); padding: 1px var(--s1); border-radius: 4px; font: 13px var(--mono); }
.md pre { background: var(--code); padding: var(--s3) var(--s4); border-radius: var(--rayon-petit); overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: var(--s3) 0; padding: var(--s2) var(--s4); background: var(--surface-2); border-radius: var(--rayon-petit); }
.md table { border-collapse: collapse; width: 100%; margin: var(--s3) 0; font-size: 14px; display: block; overflow-x: auto; }
.md th, .md td { padding: var(--s2) var(--s3); text-align: left; vertical-align: top; }
.md thead th { background: var(--surface-2); font-weight: 600; }
.md tbody tr:nth-child(even) td { background: var(--fond); }

/* --- Discussion (comme une messagerie) ----------------------------------------------------- */

.chat { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 100vh; }
.chat-liste { background: var(--surface-2); padding: var(--s4) var(--s3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); }
.chat-liste .bouton.second { background: var(--surface); }
.chat-liste .bouton.second:hover { background: var(--surface-3); }
.chat-liste nav, .chat-liste-modale { display: flex; flex-direction: column; gap: 2px; }
.chat-liste a, .chat-liste-modale a { display: block; padding: var(--s2) var(--s3); border-radius: var(--rayon-petit); color: inherit; text-decoration: none; font-size: 14px; }
.chat-liste a:hover, .chat-liste-modale a:hover { background: var(--surface-3); }
.chat-liste a.actif, .chat-liste-modale a.actif { background: var(--surface); }
.chat-liste small, .chat-liste-modale small { display: block; color: var(--encre-3); font-size: 12px; }
.chat-fil { display: flex; flex-direction: column; min-height: 0; height: 100vh; }
.fil-haut { padding: var(--s3) var(--s4) 0; }
.fil-defile { flex: 1; overflow-y: auto; min-height: 0; }
.fil-colonne { max-width: 780px; margin: 0 auto; padding: var(--s10) var(--s6) var(--s6); display: flex; flex-direction: column; gap: var(--s6); }
.accueil-chat { margin-top: 16vh; text-align: center; }
.accueil-chat h1 { font-size: var(--t-xl); font-weight: var(--g-fort); letter-spacing: -0.3px; margin: 0 0 var(--s2); }
.msg { min-width: 0; }
.msg-moi { align-self: flex-end; max-width: 85%; display: flex; flex-direction: column; align-items: flex-end; }
.msg-moi .bulle { background: var(--surface-2); border-radius: 18px; padding: var(--s3) var(--s4); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-vitorex { line-height: 1.7; }
.msg-vitorex.echec { background: var(--erreur-doux); border-radius: var(--rayon); padding: var(--s3) var(--s4); }
.msg .meta { font-size: 12px; color: var(--encre-3); margin-top: var(--s2); }
.msg .meta a { color: var(--encre-3); }
.etapes { margin-bottom: var(--s3); font-size: 13px; color: var(--encre-3); }
.etapes summary { cursor: pointer; width: max-content; }
.etapes ol { margin: var(--s2) 0 0; padding-left: var(--s5); max-height: 240px; overflow-y: auto; }
.etapes li + li { margin-top: 2px; }
.etapes .sous { font-style: italic; }
/* « réfléchit... » du chat (distinct de l'état .attente des postes de travail). */
.reflechit { color: var(--encre-3); }
.reflechit::after { content: ""; animation: points 1.4s steps(4) infinite; }
@keyframes points { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.fichiers-joints { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.fichiers-joints:empty { display: none; }
.puce { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s1); background: var(--surface-3); color: var(--encre); border: 0; border-radius: 999px; padding: 3px var(--s3); font-size: 12.5px; cursor: pointer; text-decoration: none; }

.fil-saisie { padding: 0 var(--s6) var(--s4); }
.composeur { max-width: 780px; margin: 0 auto; background: var(--surface); border-radius: 20px; padding: var(--s3) var(--s3) var(--s2) var(--s4); }
.composeur .fichiers-joints { margin: 0 0 var(--s2); }
.composeur textarea { background: transparent; min-height: 28px; max-height: 240px; padding: var(--s1) 0; resize: none; border-radius: 0; }
.composeur textarea:focus-visible { outline: none; }
.composeur-bas { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s1); }
.composeur-bas .espace { flex: 1; }
.composeur-accueil { margin: 0; max-width: none; }
select.choix { width: auto; background: transparent; min-height: 32px; padding: 0 var(--s2); color: var(--encre-2); font-size: 13px; cursor: pointer; }
select.choix:hover { background: var(--surface-2); }
.outil-icone { width: 34px; height: 34px; border: 0; padding: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--encre-2); flex: none; }
.outil-icone:hover { background: var(--surface-2); }
.outil-icone.actif { background: var(--or-doux); color: var(--alerte); }
.outil-icone svg, .bouton-rond svg { width: 18px; height: 18px; }
.bouton-rond { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--primaire); color: var(--primaire-encre); display: grid; place-items: center; cursor: pointer; flex: none; }
.bouton-rond.second { background: var(--surface-2); color: var(--encre); }
.bouton-rond:disabled { background: var(--surface-3); color: var(--encre-3); cursor: default; }
.fil-pied { max-width: 780px; margin: var(--s1) auto 0; text-align: right; }
.mobile-seul { display: none; }

/* --- Fichiers ------------------------------------------------------------------------------ */

.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.vignette { background: var(--surface-2); border: 0; border-radius: var(--rayon-petit); padding: var(--s2); cursor: pointer; text-align: left; min-width: 0; }
.vignette img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; display: block; background: var(--surface-3); }
.vignette .type { height: 110px; display: grid; place-items: center; background: var(--surface-3); border-radius: 4px; font-weight: 700; color: var(--encre-2); letter-spacing: 1px; }
.vignette span { display: block; font-size: 12.5px; margin-top: var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu img, .apercu video { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; border-radius: var(--rayon-petit); }
.apercu audio { width: 100%; }
.apercu iframe { width: 100%; height: 70vh; border: 0; background: #FFFFFF; border-radius: var(--rayon-petit); }

/* --- QR, connexion, modale, messages ------------------------------------------------------- */

.qr { width: 240px; height: 240px; background: #FFFFFF; color: #000000; padding: var(--s3); border-radius: var(--rayon-petit); }
.qr svg { width: 100%; height: 100%; display: block; }
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); background: var(--nav); }
.connexion .carte { width: 100%; max-width: 400px; }
.connexion .marque { color: var(--encre); padding: 0 0 var(--s5); }
.connexion .marque small { color: var(--encre-3); }

#modale { position: fixed; inset: 0; background: var(--nav); display: grid; place-items: center; padding: var(--s4); z-index: 50; }
#modale .boite { background: var(--surface); border-radius: var(--rayon); padding: var(--s6); width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto; }
#modale .boite.large { max-width: 1000px; }
#modale h2 { margin: 0 0 var(--s3); font-size: 18px; }
#modale .actions { justify-content: flex-end; margin-top: var(--s5); }
#toasts { position: fixed; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); z-index: 60; }
.toast { background: var(--encre); color: var(--fond); padding: var(--s3) var(--s4); border-radius: var(--rayon-petit); max-width: 380px; font-weight: 500; }
.toast.erreur { background: var(--erreur-doux); color: var(--erreur); }
.toast.ok { background: var(--ok-doux); color: var(--ok); }

.cases { display: flex; flex-direction: column; gap: var(--s1); max-height: 240px; overflow-y: auto; background: var(--surface-2); padding: var(--s2) var(--s3); border-radius: var(--rayon-petit); }
.espace-flex { flex: 1; }
select.filtre-court { width: auto; min-width: 240px; }


/* --- Personnages ---------------------------------------------------------------------------- */
/* États portés par le conteneur : .travail (allumé, il tape), .repos (éteint, il dort),
   .attente (réveillé, il attend son tour). Sans classe : réveillé et calme. */

.perso-svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter .6s ease; }
.perso-svg .halo { fill: var(--perso-halo); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.perso-svg .p-chaise { fill: var(--perso-chaise); }
.perso-svg .p-joue { fill: var(--perso-joue); }
.perso-svg .p-plateau { fill: var(--perso-plateau); }
.perso-svg .p-ordi { fill: var(--perso-ordi); }
.perso-svg .p-ordi-base { fill: var(--perso-ordi-base); }
.perso-svg .logo { fill: var(--perso-logo); }
.perso-svg .p-bulle { fill: var(--perso-bulle); }
.perso-svg .p-bulle-encre { fill: var(--perso-bulle-encre); }
.perso-svg .zzz { fill: var(--perso-zzz); font-family: var(--police); font-weight: 700; }
.perso-svg .tete { transform-box: view-box; transform-origin: 60px 68px; transition: transform .6s ease; }
.perso-svg .main { transform-box: fill-box; transform-origin: center; }
.perso-svg .oeil { transform-box: fill-box; transform-origin: center; animation: cligne 5s infinite; }
.perso-svg .oeil + .oeil { animation-delay: .04s; }
.perso-svg .yeux-fermes, .perso-svg .bouche-dort { display: none; }
.perso-svg .z { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.perso-svg .pense { display: none; }
.perso-svg .pense circle { transform-box: fill-box; transform-origin: center; }

/* Au travail : la lampe s'allume, la tête suit l'écran, les mains tapent. */
.travail .perso-svg .halo { transform: scale(1); animation: lumiere 3s ease-in-out .5s infinite; }
.travail .perso-svg .tete { animation: concentre 2.6s ease-in-out infinite; }
.travail .perso-svg .main-g { animation: tape .34s ease-in-out infinite; }
.travail .perso-svg .main-d { animation: tape .34s ease-in-out .17s infinite; }
.travail .perso-svg .logo { animation: ecran 1.4s steps(2) infinite; }
.travail .perso-svg .voyant { animation: voyant 1s steps(2) infinite; }

/* Au repos : lumière éteinte, yeux fermés, tête penchée, les « z » montent. */
.repos .perso-svg { filter: saturate(.3) brightness(.74); }
.repos .perso-svg .yeux-ouverts, .repos .perso-svg .sourire { display: none; }
.repos .perso-svg .yeux-fermes, .repos .perso-svg .bouche-dort { display: inline; }
.repos .perso-svg .tete { animation: dort 4s ease-in-out infinite; }
.repos .perso-svg .z { animation: monte 4.2s ease-in-out infinite; }
.repos .perso-svg .z2 { animation-delay: 1.4s; }
.repos .perso-svg .z3 { animation-delay: 2.8s; }

/* En attente : réveillé, il réfléchit. */
.attente .perso-svg .pense { display: inline; }
.attente .perso-svg .pense circle { animation: pense 1.2s ease-in-out infinite; }
.attente .perso-svg .pense circle:nth-of-type(2) { animation-delay: .2s; }
.attente .perso-svg .pense circle:nth-of-type(3) { animation-delay: .4s; }

@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tape { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes concentre { 0%, 100% { transform: rotate(0deg) translateY(0); } 35% { transform: rotate(2.5deg) translateY(.5px); } 70% { transform: rotate(-1.5deg) translateY(0); } }
@keyframes dort { 0%, 100% { transform: rotate(-10deg) translateY(1.5px); } 50% { transform: rotate(-8deg) translateY(3px); } }
@keyframes monte { 0% { transform: translate(0, 6px) scale(0); } 20% { transform: translate(0, 0) scale(1); } 80% { transform: translate(4px, -6px) scale(1); } 100% { transform: translate(6px, -10px) scale(0); } }
@keyframes pense { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes lumiere { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ecran { 0% { fill: #D9A13B; } 100% { fill: #F2CF83; } }
@keyframes voyant { 0% { fill: #D9A13B; } 100% { fill: #63C68F; } }
@keyframes allume { 0% { background: var(--scene-nuit); } 8% { background: var(--scene-jour); } 16% { background: var(--scene-nuit); } 30%, 100% { background: var(--scene-jour); } }

/* --- Postes de travail (page Activité, Équipe, Accueil) ------------------------------------ */

.poste { background: var(--surface); border-radius: var(--rayon); padding: var(--s2); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; color: inherit; text-decoration: none; transition: transform .25s ease, background-color .4s ease, box-shadow .25s ease; position: relative; box-shadow: var(--sh-1); }
a.poste:hover { box-shadow: var(--sh-2); }
.poste.travail { box-shadow: var(--sh-2); }
a.poste:hover { background: var(--surface-2); }
.poste.travail { transform: translateY(-3px); }
.poste-scene { position: relative; aspect-ratio: 1 / 1; border-radius: var(--rayon-petit); background: var(--scene-attente); overflow: hidden; transition: background-color .6s ease; }
.poste-scene .perso-svg { position: absolute; inset: 6% 6% 0; width: 88%; height: 94%; }
.repos .poste-scene { background: var(--scene-nuit); }
.repos .poste-scene::before { content: ""; position: absolute; top: 10%; left: 10%; width: 9%; height: 9%; border-radius: 50%; box-shadow: 3px -2px 0 0 var(--scene-lune); }
.travail .poste-scene { background: var(--scene-jour); animation: allume .9s linear; }
.poste-info { padding: 0 var(--s1) var(--s1); min-width: 0; }
.poste-info strong { display: block; font-size: 14.5px; }
.poste-role { display: block; color: var(--encre-3); font-size: 12.5px; }
.poste-etat { display: block; margin-top: var(--s1); font-size: 12.5px; font-weight: 600; color: var(--encre-3); }
.travail .poste-etat { color: var(--alerte); }
.attente .poste-etat { color: var(--info); }
.poste-action { margin: 0 var(--s1) var(--s1); padding: var(--s2) var(--s3); border-radius: var(--rayon-petit); background: var(--or-doux); color: var(--encre); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.poste:not(.travail) .poste-action { display: none; }

/* --- Page Activité ------------------------------------------------------------------------- */

.activite { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; }
.bureau-equipe { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-flow: dense; gap: var(--s3); }
.bureau-equipe .poste-chef { grid-column: span 2; grid-row: span 2; }
.poste-chef .poste-info strong { font-size: 17px; letter-spacing: 2px; }
.liens-delegation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.liens-delegation .lien { fill: none; stroke: var(--or); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; animation: flux .7s linear infinite; }
.liens-delegation .paquet { fill: var(--or); }
.liens-delegation .paquet-retour { fill: var(--ok); }
@keyframes flux { to { stroke-dashoffset: -22; } }

.resume-activite { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.temoin { display: inline-flex; align-items: center; gap: var(--s2); background: var(--surface-2); padding: var(--s1) var(--s3); border-radius: 999px; font-size: 13px; font-weight: 600; }
.temoin.vivant { background: var(--or-doux); color: var(--alerte); }

.fil-activite { position: sticky; top: var(--s4); max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.fil-activite ol { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fil-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s2); padding: var(--s2); border-radius: var(--rayon-petit); font-size: 13.5px; line-height: 1.45; color: inherit; text-decoration: none; }
a.fil-item:hover { background: var(--surface-2); }
.fil-item.nouveau { animation: entre .9s ease-out; }
.fil-item.mineur { font-size: 12.5px; color: var(--encre-2); }
.fil-item.mineur .fil-tete { transform: scale(.8); }
.fil-item small { display: block; color: var(--encre-3); font-size: 11.5px; }
.fil-tete { width: 30px; height: 30px; border-radius: 50%; background: var(--scene-attente); overflow: hidden; }
.fil-tete .perso-svg { width: 100%; height: 100%; }
@keyframes entre { 0% { transform: translateY(-6px); background: var(--or-doux); } 100% { transform: none; background: var(--surface); } }

/* Trombinoscope en direct (accueil) et compteur du menu */
.nav .compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--or); color: #17191F; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.nav .compteur[hidden] { display: none; }

/* Portraits de la page Équipe */
.carte-agent { display: flex; flex-direction: column; gap: var(--s3); }
.carte-agent .poste-scene { max-width: 132px; }
.carte-agent-tete { display: flex; gap: var(--s4); align-items: center; }
.carte-agent-tete .poste-scene { width: 96px; flex: none; }
.carte-agent-tete h2 { margin: 0; }

/* Connexions */
.ligne-erp { display: grid; grid-template-columns: 1.2fr 2fr 1fr 1.4fr auto; gap: var(--s2); margin-bottom: var(--s2); }
.carte-connexion code { background: var(--code); padding: 1px var(--s1); border-radius: 4px; font: 12.5px var(--mono); overflow-wrap: anywhere; }
@media (max-width: 900px) { .ligne-erp { grid-template-columns: 1fr; } }

/* Rappels spéciaux */
.sous-titre { margin: var(--s2) 0 0; font-size: 13.5px; font-weight: 650; color: var(--encre-2); }
.ligne-numero { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s2); margin-bottom: var(--s2); }
.heure-prise { min-width: 64px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .ligne-numero { grid-template-columns: 1fr; } }

/* Page d'un agent et automatisations */
.profil-agent { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.profil-agent > .poste { position: sticky; top: var(--s4); }
.profil-agent .pile > .carte { margin-top: 0; }
.choix-jours { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.choix-jours[hidden] { display: none; }
.carte-auto { display: flex; flex-direction: column; gap: var(--s2); }
.carte-auto h2 { margin: 0; }
.carte-auto p { margin: 0; }
h2 .carte-lien:hover { color: var(--alerte); }
@media (max-width: 900px) { .profil-agent { grid-template-columns: 1fr; } .profil-agent > .poste { position: static; max-width: 260px; } }

/* Auteur d'une réponse dans la discussion */
.auteur { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; color: var(--encre-2); margin-bottom: var(--s2); }
.auteur .fil-tete { width: 26px; height: 26px; }
.equipe-mobilisee { display: flex; gap: var(--s1); align-items: center; margin-bottom: var(--s2); font-size: 12.5px; color: var(--encre-3); }
.equipe-mobilisee .fil-tete { width: 24px; height: 24px; background: var(--scene-jour); }

@media (prefers-reduced-motion: reduce) {
  .perso-svg *, .poste-scene, .liens-delegation .lien, .fil-item.nouveau { animation: none !important; transition: none !important; }
}
@media (max-width: 1100px) {
  .activite { grid-template-columns: 1fr; }
  .fil-activite { position: static; max-height: none; }
  .fil-activite ol { max-height: 60vh; }
}
@media (max-width: 900px) {
  .bureau-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .poste { padding: var(--s1); }
  .poste-info strong { font-size: 13px; }
  .poste-role { display: none; }
  .poste-chef .poste-role { display: block; }
  .poste-etat { font-size: 11.5px; }
  .poste-action { font-size: 11.5px; padding: var(--s1) var(--s2); }
}

/* --- Mobile -------------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .coque { grid-template-columns: 1fr; }
  /* Le menu s'ouvre SOUS l'en-tête (le bouton reste visible pour le refermer) ; les liens ne sont
     focusables que menu ouvert ; un voile opaque couvre la page et la referme au toucher. */
  .nav { position: fixed; inset: 56px auto 0 0; width: 260px; height: auto; z-index: 40; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; padding-top: var(--s3); }
  .nav .marque { display: none; }
  .coque.menu-ouvert .nav { transform: none; visibility: visible; }
  .voile { display: none; }
  .coque.menu-ouvert .voile { display: block; position: fixed; inset: 56px 0 0 0; background: var(--nav-actif); z-index: 35; border: 0; padding: 0; cursor: pointer; }
  .entete-mobile { display: flex; align-items: center; gap: var(--s3); position: sticky; top: 0; z-index: 45; background: var(--nav); color: #FFFFFF; padding: 0 var(--s3); height: 56px; }
  .entete-mobile button { background: none; border: 0; color: #FFFFFF; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--rayon-petit); cursor: pointer; flex: none; }
  .entete-mobile button:hover, .coque.menu-ouvert .entete-mobile button { background: var(--nav-actif); }
  .entete-mobile svg { width: 24px; height: 24px; display: block; }
  .entete-mobile strong { letter-spacing: 3px; }
  .entete-mobile .titre-mobile { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; letter-spacing: 0; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; padding-right: var(--s2); }
  .principal { padding: var(--s5) var(--s4) calc(var(--s16) + var(--s4) + env(safe-area-inset-bottom)); }
  /* Barre basse : les cinq entrées du quotidien, sans ouvrir le menu. */
  .barre-basse { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); box-shadow: var(--sh-2); padding: var(--s1) 0 calc(var(--s1) + env(safe-area-inset-bottom)); }
  .barre-basse a, .barre-basse button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: transparent; color: var(--encre-3); text-decoration: none; font-size: 11px; font-weight: 600; cursor: pointer; }
  .barre-basse svg { width: 22px; height: 22px; }
  .barre-basse .actif { color: var(--encre); }
  .coque.menu-ouvert .barre-basse { display: none; }
  .bandeau { padding: var(--s2) var(--s4); }
  .grille-2, .grille-3,   .grille-4 { grid-template-columns: 1fr 1fr; }
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 56px); }
  body:has(#bandeau:not([hidden])) .chat, body:has(#bandeau:not([hidden])) .chat-fil { height: calc(100dvh - 56px - 38px); }
  .chat-liste { display: none; }
  .chat-fil { height: calc(100dvh - 56px); }
  /* 16 px au moins dans tous les champs : iOS zoome en dessous. */
  input, select, textarea, select.choix { font-size: 16px; }
  /* Listes : le texte garde sa place, les actions passent à la ligne au lieu d'écraser le texte. */
  .liste > li, .liste > a { flex-wrap: wrap; row-gap: var(--s2); }
  .liste .grandit { flex: 1 1 200px; }
  /* Toasts en haut : jamais sur le bouton d'envoi ni sous le clavier. */
  #toasts { top: calc(56px + var(--s3)); bottom: auto; left: var(--s3); right: var(--s3); }
  .toast { max-width: none; }
  .titre-page h1 { font-size: 22px; }
  .titre-page p { font-size: var(--t-s); }
  .mobile-seul { display: block; }
  .fil-colonne { padding: var(--s4); }
  .fil-saisie { padding: 0 var(--s3) var(--s3); }
  .accueil-chat { margin-top: 8vh; }
  .accueil-chat h1 { font-size: 21px; }
  .msg-moi { max-width: 92%; }
  select.choix { max-width: 46%; }
}

/* Appeler VOXY ------------------------------------------------------------------------------- */
.appel-video { width: min(320px, 80vw); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-petit); background: var(--scene-nuit); }
.appel-etat { font-size: 20px; font-weight: 650; margin: 0; }
.appel-commandes { justify-content: center; }
@media (max-width: 900px) {
    }
.cases-prieres { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* Équipe et agents spéciaux, refonte */
.famille { margin-top: var(--s6); }
.famille .sous-titre { margin-bottom: var(--s3); }
.grille-mini { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.carte-mini { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); text-decoration: none; color: inherit; }
.carte-mini:hover { background: var(--surface-2); }
.carte-mini .grandit { min-width: 0; }
.carte-mini .discret { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-mini-tete { width: 44px; height: 44px; flex: none; }
.carte-mini-tete svg { width: 100%; height: 100%; }
.carte-chef { margin-bottom: var(--s2); }
.grille-personnes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.carte-personne { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--s2); }
.carte-personne:hover { background: var(--surface-2); }
.carte-personne .carte-agent-tete .poste-scene { width: 84px; }
.carte-personne h2 { margin: 0; }
.competence-lue { background: var(--surface-2); border-radius: var(--rayon-petit); padding: var(--s3) var(--s4); }
.competence-lue summary { cursor: pointer; }
.competence-lue .md { margin-top: var(--s3); }
.md.lecture { max-width: 78ch; }
@media (max-width: 700px) { .grille-mini, .grille-personnes { grid-template-columns: 1fr; } }

/* Pages réseaux : kit, programmation, contenus à télécharger */
.pg-img { width: 100%; height: auto; display: block; border-radius: var(--rayon-petit); }
.pg-profil { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-petit); display: block; }
.pg-couv { width: 100%; height: auto; display: block; border-radius: var(--rayon-petit); }
.pg-video { width: 100%; max-width: 440px; border-radius: var(--rayon-petit); display: block; background: #000; }
.pg-vignette { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-petit); display: block; }
.pg-ligne { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.pg-md { white-space: pre-wrap; line-height: 1.6; font-size: 14px; color: var(--encre-2); }
@media (max-width: 720px) { .pg-img, .pg-couv, .pg-vignette { border-radius: var(--rayon-petit); } }

/* Agents speciaux : porte d'entree confidentielle (mot de passe) */
.porte-mdp { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: var(--s6); }
.carte-mdp { background: var(--surface); border-radius: var(--rayon); padding: var(--s10) var(--s8); max-width: 380px; width: 100%; text-align: center; }
.carte-mdp h1 { margin: var(--s4) 0 var(--s2); font-size: var(--t-xl); font-weight: var(--g-fort); }
.carte-mdp > p { margin: 0 0 var(--s6); }
.carte-mdp .champ { text-align: left; }
.carte-mdp .actions { justify-content: center; margin-top: var(--s4); }
.mdp-cadenas { display: inline-flex; align-items: center; justify-content: center; width: var(--s13); height: var(--s13); border-radius: 999px; background: var(--surface-3); color: var(--encre-2); margin: 0 auto; }
.mdp-cadenas svg { width: 26px; height: 26px; }
.carte-mdp.secoue { animation: secousse .4s; }
@keyframes secousse { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.carte-confidentiel .bouton { margin-top: var(--s3); }

/* --- Tableau de bord vivant (Accueil) ------------------------------------------------------ */
.accueil-cockpit { display: flex; flex-direction: column; gap: var(--s5); }

.hero { background: var(--nav); color: #fff; border-radius: var(--rayon-grand); padding: var(--s8); box-shadow: var(--sh-2); }
.hero-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.hero h1 { margin: 0; font-size: var(--t-xxl); font-weight: var(--g-fort); letter-spacing: -0.6px; }
.hero-date { margin: var(--s1) 0 0; color: var(--nav-encre); font-size: 14px; }
.hero-etats { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero .composeur { margin: var(--s6) 0 0; max-width: none; box-shadow: var(--sh-2); }
.hero .composeur textarea { color: var(--encre); }

/* Témoins d'état du bloc d'accueil (distincts des .puce des pièces jointes du chat). */
.puce-etat { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-radius: 999px; background: var(--nav-actif); color: var(--nav-encre); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.puce-etat .pastille { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.puce-etat.ok { color: #63C68F; } .puce-etat.alerte { color: #E3B160; } .puce-etat.erreur { color: #EE8578; }

.kpis { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.kpi { background: var(--surface); border-radius: var(--rayon-grand); padding: var(--s5); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; color: inherit; text-decoration: none; }
a.kpi { transition: transform .18s ease, box-shadow .18s ease; }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.kpi-label { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--encre-3); }
.kpi .ic { width: 38px; height: 38px; border-radius: var(--rayon-petit); background: var(--or-doux); color: var(--alerte); display: grid; place-items: center; flex: none; }
.kpi .ic svg { width: 19px; height: 19px; }
.kpi-valeur { font-size: 32px; font-weight: 750; line-height: 1; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; }
.kpi-valeur small { font-size: 15px; font-weight: 600; color: var(--encre-3); letter-spacing: 0; }
.kpi-pied { font-size: 13px; color: var(--encre-2); }
.kpi .jauge { margin: var(--s2) 0 0; }

.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.section-titre h2 { margin: 0; font-size: var(--t-l); font-weight: var(--g-fort); letter-spacing: -0.2px; }
.section-titre a { font-size: 13px; font-weight: 600; text-decoration: none; }

.scene-vedette { background: transparent; }
.scene-vedette .bureau-equipe { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.scene-vedette .poste-chef { grid-column: auto; grid-row: auto; }
.scene-vedette .poste-chef .poste-info strong { font-size: 14.5px; letter-spacing: normal; }

.carte-confidentiel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* « apparait » (et non « monte », déjà pris par les « z » du sommeil des personnages). */
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.accueil-cockpit > * { animation: apparait .3s ease-out both; }
.accueil-cockpit > *:nth-child(2) { animation-delay: .04s; }
.accueil-cockpit > *:nth-child(3) { animation-delay: .08s; }
.accueil-cockpit > *:nth-child(4) { animation-delay: .12s; }
.accueil-cockpit > *:nth-child(5) { animation-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .accueil-cockpit > * { animation: none; } }


@media (max-width: 720px) {
  .hero { padding: var(--s6); }
  .hero h1 { font-size: var(--t-xl); }
  .kpi-valeur { font-size: 28px; }
}


/* --- Studio de développement (façon Lovable) ----------------------------------------------- */
.studio-accueil { display: flex; flex-direction: column; gap: var(--s6); }
.studio-hero { background: var(--nav); color: #fff; border-radius: var(--rayon-grand); padding: var(--s12) var(--s8) var(--s10); box-shadow: var(--sh-2); text-align: center; }
.studio-sur { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--or); margin-bottom: var(--s3); }
.studio-hero h1 { margin: 0; font-size: var(--t-xxl); font-weight: var(--g-fort); letter-spacing: -0.7px; line-height: 1.15; }
.studio-hero > p { margin: var(--s3) auto 0; max-width: 620px; color: var(--nav-encre); font-size: 15.5px; }
.studio-invite { margin: var(--s8) auto 0; max-width: 840px; background: var(--surface); color: var(--encre); border-radius: var(--rayon-grand); padding: var(--s4) var(--s4) var(--s3); box-shadow: var(--sh-3); text-align: left; }
.studio-invite textarea { width: 100%; background: transparent; border: 0; resize: none; font-size: 16px; line-height: 1.55; padding: var(--s2); color: var(--encre); min-height: 84px; }
.studio-invite textarea:focus-visible { outline: none; }
.studio-invite-bas { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s2) 0; }
.studio-champ { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--encre-3); }
.studio-champ select, .studio-champ input { background: var(--surface-2); border: 0; border-radius: var(--rayon-petit); padding: var(--s2) var(--s3); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--encre); min-width: 165px; height: 38px; }
.studio-creer { display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s5); }
.studio-creer svg { width: 16px; height: 16px; }
.studio-idees { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s6); }
.studio-idee { background: var(--nav-actif); color: var(--nav-encre); border: 0; border-radius: 999px; padding: 7px var(--s4); font-size: 13px; cursor: pointer; transition: background-color .15s, color .15s; }
.studio-idee:hover { background: var(--or); color: var(--nav); }

.studio-grille { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.studio-carte { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--rayon-grand); overflow: hidden; box-shadow: var(--sh-1); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.studio-carte:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.studio-vignette { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.studio-vignette iframe { position: absolute; top: 0; left: 0; width: 400%; height: 400%; transform: scale(.25); transform-origin: 0 0; border: 0; pointer-events: none; background: #fff; }
.studio-vignette-vide { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s2); color: var(--encre-3); font-size: 13px; font-weight: 600; }
.studio-vignette-vide svg { width: 34px; height: 34px; }
.studio-pastille-travail { position: absolute; top: var(--s3); left: var(--s3); display: inline-flex; align-items: center; gap: var(--s2); background: var(--nav); color: #fff; font-size: 12px; font-weight: 600; padding: 5px var(--s3); border-radius: 999px; box-shadow: var(--sh-1); }
.studio-carte-pied { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); }
.studio-carte-pied strong { display: block; font-size: 15px; margin-bottom: 2px; }

.studio { display: grid; grid-template-columns: 420px minmax(0, 1fr); height: 100dvh; background: var(--fond); }
/* Bandeau de consommation affiché : la page garde sa hauteur sans double défilement. */
body:has(#bandeau:not([hidden])) .studio { height: calc(100dvh - 38px); }
.studio-panneau { display: flex; flex-direction: column; min-height: 0; background: var(--surface); box-shadow: var(--sh-2); position: relative; z-index: 1; }
.studio-tete { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5) var(--s3); }
.studio-tete h1 { margin: 0; font-size: var(--t-l); font-weight: var(--g-fort); letter-spacing: -0.2px; }
.studio-tete p { margin: 2px 0 0; font-size: 12.5px; }
.studio-retour { width: 36px; height: 36px; border-radius: var(--rayon-petit); display: grid; place-items: center; color: var(--encre-2); background: var(--surface-2); flex: none; transition: background-color .15s; }
.studio-retour:hover { background: var(--surface-3); }
.studio-retour svg { width: 18px; height: 18px; }
.studio-onglets { display: flex; gap: var(--s1); margin: 0 var(--s4) var(--s3); background: var(--surface-2); border-radius: var(--rayon-petit); padding: 3px; }
.studio-onglets button { flex: 1; border: 0; background: transparent; color: var(--encre-3); font-weight: 600; font-size: 13px; padding: 7px var(--s2); border-radius: 6px; cursor: pointer; }
.studio-onglets button.actif { background: var(--surface); color: var(--encre); box-shadow: var(--sh-1); }
.studio-onglets button:disabled { color: var(--encre-3); opacity: .5; cursor: default; }
.studio-corps { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2) var(--s5) var(--s4); }
.studio-fil { display: flex; flex-direction: column; gap: var(--s4); }
.st-msg { display: flex; gap: var(--s2); align-items: flex-end; }
.st-moi { flex-direction: column; align-items: flex-end; gap: 3px; }
.st-bulle { padding: var(--s3) var(--s4); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.st-moi .st-bulle { background: var(--nav); color: #fff; border-radius: 18px 18px 4px 18px; max-width: 88%; white-space: pre-wrap; }
.st-studio .st-bulle { background: var(--surface-2); border-radius: 18px 18px 18px 4px; max-width: calc(100% - 42px); }
.st-studio .st-bulle p, .st-studio .st-bulle ul, .st-studio .st-bulle ol { margin: 0 0 var(--s2); }
.st-studio .st-bulle > :last-child { margin-bottom: 0; }
.st-studio .st-bulle h1, .st-studio .st-bulle h2, .st-studio .st-bulle h3 { font-size: 14.5px; margin: var(--s2) 0 var(--s1); }
.st-studio .st-bulle pre, .st-studio .st-bulle code { font-size: 12.5px; }
.st-heure { font-size: 11px; color: var(--encre-3); }
.st-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; background: var(--or-doux); }
.st-avatar svg { width: 100%; height: 100%; display: block; }
.st-attente { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--encre-2); font-weight: 600; }
.st-points { display: inline-flex; gap: 3px; }
.st-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: st-saut 1.2s infinite ease-in-out; }
.st-points i:nth-child(2) { animation-delay: .15s; }
.st-points i:nth-child(3) { animation-delay: .3s; }
@keyframes st-saut { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.st-erreur { margin: 0; color: var(--erreur); }
.st-detail { display: inline-block; margin-top: var(--s2); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.studio-bloc { background: var(--surface-2); border-radius: var(--rayon); padding: var(--s4); margin-top: var(--s2); }
.studio-bloc + .studio-bloc { margin-top: var(--s3); }
.studio-bloc h3 { margin: 0 0 var(--s2); font-size: 14px; }
.studio-bloc .bouton { margin-top: var(--s3); }
.studio-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; font-size: 13.5px; }
.studio-dl dt { color: var(--encre-3); font-weight: 600; }
.studio-dl dd { margin: 0; overflow-wrap: anywhere; }
.studio-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.studio-versions li { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.studio-composeur { display: flex; align-items: flex-end; gap: var(--s2); margin: 0 var(--s4) var(--s4); background: var(--surface-2); border-radius: 18px; padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.studio-composeur textarea { flex: 1; background: transparent; border: 0; resize: none; max-height: 180px; font-size: 14.5px; line-height: 1.5; padding: var(--s1) 0; color: var(--encre); }
.studio-composeur textarea:focus-visible { outline: none; }

.studio-apercu { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.studio-barre { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); background: var(--surface); box-shadow: var(--sh-1); }
.studio-mode { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 600; color: var(--encre-3); }
.studio-mode .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); }
.studio-mode.direct { color: var(--ok); }
.studio-mode.direct .pastille { background: var(--ok); }
.studio-mode.travail { color: var(--alerte); }
.studio-mode.travail .pastille { background: var(--alerte); animation: st-pulsation 1.4s infinite ease-in-out; }
@keyframes st-pulsation { 50% { transform: scale(1.7); } }
.studio-appareils { display: inline-flex; background: var(--surface-2); border-radius: var(--rayon-petit); padding: 3px; margin-left: var(--s3); }
.studio-appareils button { border: 0; background: transparent; width: 36px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--encre-3); cursor: pointer; }
.studio-appareils button.actif { background: var(--surface); color: var(--encre); box-shadow: var(--sh-1); }
.studio-appareils svg, .studio-outil svg { width: 17px; height: 17px; }
.studio-outil { width: 36px; height: 36px; border: 0; border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--encre-2); display: grid; place-items: center; cursor: pointer; transition: background-color .15s; }
.studio-outil:hover { background: var(--surface-3); }
.studio-outil[aria-disabled="true"], .studio-outil:disabled { color: var(--encre-3); opacity: .45; pointer-events: none; }
.studio-mode.erreur { color: var(--erreur); }
.studio-mode.erreur .pastille { background: var(--erreur); }
.studio-scene { flex: 1; min-height: 0; padding: var(--s5); display: flex; justify-content: center; overflow: auto; }
.studio-cadre { width: 100%; height: 100%; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--sh-2); overflow: hidden; display: flex; transition: width .3s ease, border-radius .3s ease; }
.studio-scene[data-appareil="tablette"] .studio-cadre { width: 820px; max-width: 100%; }
.studio-scene[data-appareil="mobile"] .studio-cadre { width: 390px; max-width: 100%; border-radius: 30px; box-shadow: var(--sh-3); }
.studio-iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.studio-vide { margin: auto; text-align: center; max-width: 380px; padding: var(--s8); color: var(--encre-2); }
.studio-vide svg { width: 42px; height: 42px; color: var(--encre-3); }
.studio-vide h2 { margin: var(--s3) 0 var(--s2); font-size: 17px; color: var(--encre); }
.studio-vide p { margin: 0; font-size: 14px; }
.studio-bascule { display: none; }

@media (max-width: 900px) {
  /* Une colonne : la bascule Discussion / Aperçu en haut (jamais sur le clavier), puis le panneau choisi. */
  .studio { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 56px); }
  body:has(#bandeau:not([hidden])) .studio { height: calc(100dvh - 56px - 38px); }
  .studio[data-vue="studio"] .studio-apercu, .studio[data-vue="apercu"] .studio-panneau { display: none; }
  .studio-bascule { display: flex; justify-self: center; margin: var(--s2) 0; background: var(--surface-2); border-radius: 999px; padding: 3px; }
  .studio-bascule button { border: 0; background: transparent; color: var(--encre-3); padding: 7px var(--s5); border-radius: 999px; font-weight: 600; font-size: 13px; cursor: pointer; }
  .studio-bascule button.actif { background: var(--surface); color: var(--encre); box-shadow: var(--sh-1); }
  .studio-panneau { box-shadow: none; }
  .studio-scene { padding: var(--s3); }
  .studio-barre { padding: var(--s2) var(--s3); gap: var(--s2); }
  .studio-appareils { display: none; }    /* la largeur est déjà celle du téléphone */
  /* 16 px au moins dans les champs : iOS zoome en dessous. */
  .studio-composeur textarea, .studio-champ select, .studio-champ input, .studio-invite textarea { font-size: 16px; }
  .studio-aide { display: none; }
  .studio-hero { padding: var(--s8) var(--s5); }
  .studio-hero h1 { font-size: var(--t-xl); }
  .studio-champ, .studio-champ select, .studio-champ input { width: 100%; min-width: 0; }
  .studio-invite-bas .espace { display: none; }
  .studio-creer { width: 100%; justify-content: center; }
}
.studio-carte-pied .grandit { min-width: 0; }
.studio-carte-pied .badge { flex: none; }
.studio-invite-bas .espace { flex: 1; }

/* --- Écran d'appel VOXY (page Appeler VOXY) ------------------------------------------------- */
.appel-ecran { position: relative; height: 100vh; background: var(--nav); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--s10) var(--s6) var(--s12); overflow: hidden; }
.appel-haut { text-align: center; }
.appel-chrono { font-size: 14px; font-weight: 600; color: var(--nav-encre); letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.appel-centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.appel-avatar { position: relative; width: 196px; height: 196px; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.appel-onde { position: absolute; inset: 0; border-radius: 50%; background: var(--nav-actif); transition: background-color .4s ease; }
.appel-onde.o2 { inset: 14px; }
.appel-visage { position: absolute; inset: 22px; border-radius: 50%; overflow: hidden; background: var(--or-doux); box-shadow: var(--sh-3); }
.appel-visage svg { width: 100%; height: 100%; display: block; }
.appel-ecran[data-etat="ecoute"] .appel-onde { animation: appel-respire 2.6s ease-in-out infinite; }
.appel-ecran[data-etat="ecoute"] .appel-onde.o2 { animation-delay: .5s; }
.appel-ecran[data-etat="reflexion"] .appel-onde { animation: appel-respire 1.2s ease-in-out infinite; }
.appel-ecran[data-etat="parle"] .appel-onde { background: var(--or); animation: appel-pulse .9s ease-in-out infinite; }
.appel-ecran[data-etat="parle"] .appel-onde.o2 { background: #E8BC62; animation-delay: .25s; }
@keyframes appel-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes appel-pulse { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.2); } }
.appel-centre h1 { margin: var(--s6) 0 var(--s2); font-size: 30px; font-weight: 750; letter-spacing: 3px; }
.appel-etat { margin: 0; max-width: 420px; color: var(--nav-encre); font-size: 15.5px; min-height: 24px; }
.appel-ecran[data-etat="parle"] .appel-etat { color: var(--or); }
.appel-commandes { display: flex; align-items: flex-end; justify-content: center; gap: var(--s5); flex-wrap: wrap; }
.appel-rond, .appel-decrocher { display: flex; flex-direction: column; align-items: center; gap: var(--s2); background: transparent; border: 0; color: var(--nav-encre); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.appel-rond svg { width: 24px; height: 24px; box-sizing: content-box; padding: 18px; border-radius: 50%; background: var(--nav-actif); color: #fff; transition: background-color .15s, color .15s; }
.appel-rond:hover svg { background: #343842; }
.appel-rond.actif svg { background: #fff; color: var(--nav); }
.appel-decrocher { color: #fff; }
.appel-decrocher svg { width: 30px; height: 30px; box-sizing: content-box; padding: 23px; border-radius: 50%; background: #1E9E52; color: #fff; box-shadow: var(--sh-3); transition: background-color .25s ease, transform .25s ease; }
.appel-decrocher:hover svg { background: #19884A; }
.appel-decrocher.raccrocher svg { background: #D23B2E; transform: rotate(135deg); }
.appel-decrocher.raccrocher:hover svg { background: #B83226; }
.appel-video { position: absolute; top: var(--s6); right: var(--s6); width: 168px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-grand); box-shadow: var(--sh-3); background: #000; z-index: 2; }
@media (max-width: 900px) {
  .appel-ecran { height: calc(100dvh - 56px); padding: var(--s8) var(--s4) var(--s10); }
  .appel-avatar { width: 158px; height: 158px; }
  .appel-visage { inset: 18px; }
  .appel-centre h1 { font-size: 26px; }
  .appel-commandes { gap: var(--s4); }
  .appel-rond svg { padding: 15px; }
  .appel-video { width: 108px; top: var(--s4); right: var(--s4); }
}

/* Studio : élément désigné dans l'aperçu, retour de version, modèles de départ */
.studio-composeur { flex-wrap: wrap; }
.studio-cible { flex-basis: 100%; display: flex; align-items: center; gap: var(--s2); background: var(--surface); border-radius: var(--rayon-petit); padding: var(--s1) var(--s1) var(--s1) var(--s3); font-size: 13px; color: var(--encre-2); }
.studio-cible[hidden] { display: none; }
.studio-cible .studio-outil { width: 28px; height: 28px; }
.studio-outil.actif { background: var(--or); color: var(--encre); }
.studio-versions li .bouton, .studio-versions li .badge { align-self: flex-start; margin-top: var(--s1); }
.studio-modeles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.studio-modeles > span { font-size: 13px; color: var(--encre-2); }

/* Studio : conversation continue, arrêt, erreurs lisibles, versions, base, journal du direct */
.studio-aide { flex-basis: 100%; font-size: 11.5px; color: var(--encre-3); padding: 0 0 2px var(--s1); }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.st-actions .st-detail { margin-top: 0; }
.st-plus { margin-top: var(--s2); font-size: 13px; }
.st-plus summary { cursor: pointer; font-weight: 600; color: var(--encre-2); }
.studio-statut { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); font-size: 13px; }
.studio-statut li { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.studio-statut code { overflow-wrap: anywhere; }
.studio-secret { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.studio-secret code { font-family: var(--mono); letter-spacing: 1px; }
.studio-panne { max-width: 560px; }
.studio-panne h2 { color: var(--erreur); }
.studio-panne .st-actions { justify-content: center; margin-top: var(--s4); }
.studio-journal { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; line-height: 1.45; background: var(--code); color: var(--encre); border-radius: var(--rayon); padding: var(--s3) var(--s4); margin: var(--s4) 0 0; max-height: 260px; overflow: auto; }
.studio-versions li strong { overflow-wrap: anywhere; }
.studio-tete h1 { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .st-points i, .studio-mode .pastille, .studio-carte, .studio-cadre { animation: none; transition: none; }
}
@media (prefers-color-scheme: dark) {
  /* En sombre, les blocs d'accueil (bureau et studio) se détachent du fond. */
  :root:not([data-theme="light"]) .hero, :root:not([data-theme="light"]) .studio-hero { background: var(--surface-2); }
  :root:not([data-theme="light"]) .studio-hero .studio-invite, :root:not([data-theme="light"]) .hero .composeur { background: var(--surface); }
  :root:not([data-theme="light"]) .studio-idee { background: var(--surface-3); color: var(--encre-2); }
}
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .studio-hero { background: var(--surface-2); }
:root[data-theme="dark"] .studio-hero .studio-invite, :root[data-theme="dark"] .hero .composeur { background: var(--surface); }
:root[data-theme="dark"] .studio-idee { background: var(--surface-3); color: var(--encre-2); }

/* Mobile : le chat et le studio laissent la place à la barre basse (60 px). */
@media (max-width: 900px) {
  .principal.plein { padding-bottom: 0; }
  .chat, .chat-fil { height: calc(100dvh - 56px - 60px); }
  body:has(#bandeau:not([hidden])) .chat, body:has(#bandeau:not([hidden])) .chat-fil { height: calc(100dvh - 56px - 38px - 60px); }
  .studio { height: calc(100dvh - 56px - 60px); }
  body:has(#bandeau:not([hidden])) .studio { height: calc(100dvh - 56px - 38px - 60px); }
  .appel-ecran { height: calc(100dvh - 56px - 60px); }
}

/* --- Studio : explorateur de fichiers, visionneuse, différences, pièces jointes ------------- */
.studio-trombone { flex: none; }
.studio-trombone[aria-disabled="true"] { pointer-events: none; opacity: .45; }
.studio-composeur .fichiers-joints { flex-basis: 100%; margin: 0; }
.studio-composeur .fichiers-joints:empty { display: none; }
.st-joints { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.st-moi .st-joints .puce { background: var(--nav-actif); color: var(--nav-encre); cursor: default; }
.arbre, .arbre-enfants { list-style: none; margin: 0; padding: 0; }
.arbre-enfants { padding-left: var(--s4); }
.arbre-ligne { display: flex; align-items: center; gap: var(--s2); width: 100%; border: 0; background: transparent; color: var(--encre); text-align: left; padding: 5px var(--s2); border-radius: var(--rayon-petit); cursor: pointer; font-size: var(--t-s); min-height: 32px; }
.arbre-ligne:hover { background: var(--surface-3); }
.arbre-ligne.actif { background: var(--surface); box-shadow: var(--sh-1); }
.arbre-fleche { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--encre-3); transform: rotate(-90deg); transition: transform .15s; flex: none; margin-left: 2px; }
.arbre-ligne[aria-expanded="true"] .arbre-fleche { transform: none; }
.arbre-fleche.vide { border: 0; width: 10px; }
.arbre-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arbre-dossier > .arbre-ligne .arbre-nom { font-weight: var(--g-demi); }
.arbre-taille { font-size: var(--t-xs); color: var(--encre-3); flex: none; font-variant-numeric: tabular-nums; }
.code-vue { margin-top: var(--s3); background: var(--code); border-radius: var(--rayon); overflow: hidden; }
.code-tete { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); background: var(--surface-2); font-size: var(--t-s); }
.code-tete .studio-outil { width: 30px; height: 30px; background: transparent; }
.code-texte { margin: 0; padding: var(--s3) var(--s3) var(--s3) 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow: auto; max-height: 60vh; tab-size: 2; }
.code-texte .ln { display: inline-block; width: 44px; padding-right: var(--s3); text-align: right; color: var(--encre-3); user-select: none; }
.studio-diff { margin-top: var(--s3); }
.diff-entete { margin: 0 0 var(--s2); font-size: var(--t-s); }
.diff-resume { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); }
.diff-resume li { display: flex; gap: var(--s2); align-items: center; min-width: 0; }
.diff-resume code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-plus { color: var(--ok); font-weight: var(--g-demi); font-variant-numeric: tabular-nums; }
.diff-moins { color: var(--erreur); font-weight: var(--g-demi); font-variant-numeric: tabular-nums; }
.diff-fichier { background: var(--surface); border-radius: var(--rayon-petit); margin-top: var(--s2); }
.diff-fichier summary { cursor: pointer; padding: var(--s2) var(--s3); font-size: var(--t-s); font-weight: var(--g-demi); }
.diff-corps { margin: 0; padding: var(--s2) 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; overflow: auto; max-height: 50vh; tab-size: 2; }
.diff-corps span { display: block; padding: 0 var(--s3); white-space: pre; }
.diff-ajout { background: var(--ok-doux); color: var(--ok); }
.diff-retrait { background: var(--erreur-doux); color: var(--erreur); }
.diff-tete { color: var(--encre-3); background: var(--surface-2); }

/* --- Studio : direct, plan, version passée ------------------------------------------------- */
.st-action { margin: var(--s1) 0 0; font-size: var(--t-s); color: var(--encre-2); overflow-wrap: anywhere; }
.st-etapes { margin-top: var(--s2); font-size: var(--t-xs); color: var(--encre-3); }
.st-etapes summary { cursor: pointer; font-weight: var(--g-demi); color: var(--encre-2); }
.st-etapes ol { margin: var(--s1) 0 0; padding-left: var(--s5); display: flex; flex-direction: column; gap: 2px; }
.st-etapes .st-etape-texte { color: var(--encre-2); }
.st-badge-plan { display: inline-block; margin: 0 var(--s2) 2px 0; }
.studio-plan { width: auto; padding: 0 var(--s3); font-size: var(--t-xs); font-weight: var(--g-fort); letter-spacing: .3px; }
.studio-plan.actif { background: var(--or); color: var(--encre); }
.studio-cadre { flex-direction: column; }
.studio-bandeau-version { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s2) var(--s4); background: var(--alerte-doux); color: var(--alerte); font-size: var(--t-s); }

/* --- Studio : serveur du projet et variables d'environnement ------------------------------- */
.st-serveur-etat { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; font-size: var(--t-s); font-weight: var(--g-demi); color: var(--encre-3); overflow-wrap: anywhere; }
.st-serveur-etat .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--encre-3); flex: none; }
.st-serveur-etat.direct { color: var(--ok); } .st-serveur-etat.direct .pastille { background: var(--ok); }
.st-serveur-etat.travail { color: var(--alerte); } .st-serveur-etat.travail .pastille { background: var(--alerte); }
.st-serveur-etat.erreur { color: var(--erreur); } .st-serveur-etat.erreur .pastille { background: var(--erreur); }
.env-liste { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.env-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: var(--s2); align-items: center; }
.env-ligne input { min-height: 36px; font-size: var(--t-s); font-family: var(--mono); background: var(--surface); border: 0; border-radius: var(--rayon-petit); padding: var(--s1) var(--s3); width: 100%; }
.env-ligne .studio-outil { width: 32px; height: 32px; background: var(--surface); }
@media (max-width: 900px) { .env-ligne { grid-template-columns: minmax(0, 1fr) auto auto; } .env-ligne .env-valeur { grid-column: 1 / -1; } }

/* --- Studio : import Git, export, archivage ------------------------------------------------- */
.studio-import { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s5); font-size: var(--t-s); color: var(--nav-encre); }
.studio-import input { background: var(--nav-actif); color: #FFFFFF; border: 0; border-radius: var(--rayon-petit); padding: var(--s2) var(--s3); min-height: 38px; width: auto; }
.studio-import #si-url { min-width: 300px; flex: 1 1 300px; max-width: 460px; }
.studio-import #si-import-nom { width: 180px; }
.studio-import .bouton { min-height: 38px; }
.studio-tete > .studio-outil { flex: none; }
.studio-tete > .studio-outil[aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .studio-import #si-url, .studio-import #si-import-nom { width: 100%; max-width: none; } .studio-import .bouton { width: 100%; } }
.studio-vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* --- Studio : mise en ligne ----------------------------------------------------------------- */
.deploi-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s3); }
.deploi-form .champ span { font-weight: var(--g-demi); font-size: var(--t-xs); color: var(--encre-2); }
.deploi-form input, .deploi-form select, .deploi-form textarea { background: var(--surface); border: 0; border-radius: var(--rayon-petit); padding: var(--s2) var(--s3); min-height: 36px; width: 100%; font-size: var(--t-s); }
.deploi-form textarea { font-family: var(--mono); resize: vertical; }
.deploi-large { grid-column: 1 / -1; }
.deploi-code { font-family: var(--mono); letter-spacing: 3px; font-size: var(--t-l); color: var(--encre); }
.deploi-historique { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-xs); }
.deploi-historique li { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .deploi-form { grid-template-columns: 1fr; } }

/* --- Finitions communes : fil d'Ariane, pagination, accueil, cibles tactiles, mouvement réduit ------- */
.ariane { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); font-size: var(--t-s); color: var(--encre-3); }
.ariane a { color: var(--encre-2); text-decoration: none; font-weight: var(--g-demi); }
.ariane a:hover { color: var(--encre); text-decoration: underline; }
.ariane [aria-current] { color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.plus-elements { display: flex; margin: var(--s4) auto 0; }
.poste-repos-resume { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 120px; text-align: center; }
.poste-repos-nombre { font-size: var(--t-xl); font-weight: var(--g-fort); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.boite:focus { outline: none; }
@media (max-width: 900px) {
  /* Cibles tactiles d'au moins 40 à 44 px. */
  .bouton.petit { min-height: 40px; }
  .onglets [role="tab"] { min-height: 40px; padding: var(--s2) var(--s4); }
  .lien-discret { padding: var(--s2) var(--s3); min-height: 40px; }
  .outil-icone, .bouton-rond, .studio-outil { width: 40px; height: 40px; }
  .nav a, .nav button.lien { min-height: 44px; }
  .studio-cible .studio-outil { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .appel-onde, .reflechit::after, .secoue, .carte-mdp.secoue { animation: none !important; }
  a.kpi, .studio-carte, a.poste, .poste.travail { transition: none; transform: none !important; }
  .appel-ecran[data-etat] .appel-onde { animation: none !important; }
}

.integrations-corps > .titre-page { margin-bottom: var(--s4); }

/* --- studio.wapidi.com : studio plein écran, sans barre latérale -------------------------------- */
.coque-studio { min-height: 100dvh; display: flex; flex-direction: column; background: var(--fond); }
.studio-entete { display: flex; align-items: center; gap: var(--s3); height: 56px; padding: 0 var(--s4); background: var(--nav); color: #FFFFFF; flex: none; }
.studio-marque { display: flex; align-items: center; gap: var(--s2); color: #FFFFFF; text-decoration: none; }
.studio-marque img { width: 28px; height: 28px; }
.studio-marque strong { letter-spacing: 3px; font-size: var(--t-m); text-transform: uppercase; }
.studio-entete .espace { flex: 1; }
.studio-compte { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-size: var(--t-s); }
.studio-compte .discret { color: var(--nav-encre); font-size: var(--t-xs); }
.studio-entete .bouton.second { background: var(--nav-actif); color: #FFFFFF; }
.coque-studio .principal { flex: 1; min-height: 0; }
.coque-studio .principal.plein { padding: 0; max-width: none; }
.coque-studio .studio { height: calc(100dvh - 56px); }
.studio-hero-compact { padding: var(--s8) var(--s8) var(--s6); }
.studio-lecture { flex-basis: 100%; margin: 0; padding: var(--s2) var(--s3); border-radius: var(--rayon-petit); background: var(--info-doux); color: var(--info); font-size: var(--t-s); }
.as-projets { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s1); }
.as-projets legend { padding: 0; font-weight: var(--g-demi); font-size: var(--t-s); color: var(--encre-2); margin-bottom: var(--s1); }
@media (max-width: 900px) {
  .coque-studio .studio { height: calc(100dvh - 56px); }
  .coque-studio .principal { padding-bottom: var(--s5); }
  .coque-studio .principal.plein { padding-bottom: 0; }
  .studio-compte { display: none; }
}
/* Compte staff sans demandes ouvertes : seule l'explication reste dans le composeur. */
.studio-composeur.lecture-seule > :not(.studio-lecture):not(.studio-cible) { display: none; }

/* --- Suivi de la consommation du studio ------------------------------------------------------------ */
.studio-suivi { display: flex; gap: var(--s2); overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: none; }
.studio-suivi::-webkit-scrollbar { display: none; }
.studio-puce-suivi { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; background: var(--nav-actif); color: var(--nav-encre); border-radius: 999px; padding: 4px var(--s3); font-size: var(--t-xs); }
.studio-puce-suivi strong { color: #FFFFFF; font-weight: var(--g-demi); }
.studio-puce-suivi .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--or); }
.studio-puce-suivi.actif { color: #FFFFFF; }
.suivi-defile { overflow-x: auto; }
.suivi-table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.suivi-table th, .suivi-table td { text-align: left; padding: var(--s2) var(--s3); vertical-align: top; }
.suivi-table thead th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--encre-3); }
.suivi-table tbody tr:nth-child(odd) { background: var(--surface-2); }
.suivi-table tbody th { font-weight: var(--g-demi); }
.suivi-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.suivi-recentes li { font-size: var(--t-s); }
@media (max-width: 900px) { .studio-suivi { display: none; } }