/* Fondation : une seule feuille, en deux couches. La couche « pupitre »
   l'emporte sur « base » quelle que soit la spécificité. Règles pour la
   suite : tout nouveau style va dans @layer pupitre ; une règle de base
   devenue inutile se supprime au lieu d'être surchargée ; une autre feuille
   éventuelle se déclare aussi dans une couche (hors couche, elle passerait
   devant les deux). Attention : entre couches, un !important de « base »
   bat un !important de « pupitre ». */
@layer base, pupitre;

@font-face {
  font-family: "Geist";
  src: url(/static/fonts/geist-latin-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url(/static/fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+A720-A7FF;
}
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

@layer base {
/* Fondation — feuille de style unique.
   Idée directrice : « Obsidian Telemetry », une console d'instruments.
   Fond nuit spatiale en couches (canevas, conteneur, carte), traits fins,
   cyan électrique pour ce qu'on peut faire, couleurs d'état réservées à
   l'état (émeraude, ambre, rubis, violet). Les pages se rangent en tuiles
   « bento » ; les identifiants techniques (numéros, IP, inventaire) sont en
   chasse fixe. Typographie : Geist pour l'interface, JetBrains Mono pour les
   données (toutes deux sous licence OFL, intégrées au binaire). */



/* ------------------------------------------------------------ jetons */

/* Deux thèmes, une seule liste de couleurs : chaque teinte donne sa valeur
   claire puis sombre (light-dark). Par défaut on suit le système ;
   data-theme="clair" ou "sombre" sur <html> impose un choix (menu du compte).
   Le thème sombre est la référence (maquettes « Obsidian Telemetry ») ; le
   clair en est la transposition ardoise sur blanc. */
:root { color-scheme: light dark; }
:root[data-theme="clair"] { color-scheme: light; }
:root[data-theme="sombre"] { color-scheme: dark; }

:root {
  /* La nuit : barre de connexion, éditeurs, fond de l'icône (identique
     dans les deux thèmes). */
  --nuit: #0B1326;
  --neon: #38BDF8;          /* le cyan électrique : signal (rubrique courante, focus) */
  --papier: light-dark(#F1F5F9, #060E20);       /* canevas */
  --surface: light-dark(#FFFFFF, #131B2E);      /* carte bento */
  --surface-2: light-dark(#F8FAFC, #1C263C);    /* survol, ligne active */
  --surface-3: light-dark(#E2E8F0, #25324E);    /* onglet choisi, bouton secondaire */
  --encre: light-dark(#0F172A, #F8FAFC);
  --encre-2: light-dark(#475569, #94A3B8);
  --encre-3: light-dark(#5B6B82, #64748B);
  --trait: light-dark(#E2E8F0, rgb(56 189 248 / .12));
  --trait-fort: light-dark(#CBD5E1, #334155);
  --prusse: #0B1326;                             /* barre du haut, rubans, rail */
  --prusse-2: #1C263C;
  --prusse-encre: #E2E8F0;
  --prusse-doux: #94A3B8;
  /* Barre du haut (A2) : elle suit le thème. Chaque jeton donne la valeur claire puis la sombre d'origine (sombre inchangé). */
  --barre-fond: light-dark(color-mix(in srgb, #FFFFFF 90%, transparent), color-mix(in srgb, var(--prusse) 86%, transparent));
  --barre-trait: light-dark(#CBD5E1, rgb(56 189 248 / .12));
  --barre-encre: light-dark(#0F172A, #E2E8F0);
  --barre-encre-forte: light-dark(#0F172A, #FFFFFF);
  --barre-lien: light-dark(#475569, #CBD5E1);
  --barre-doux: light-dark(#475569, #94A3B8);
  --barre-survol: light-dark(#E2E8F0, rgb(19 30 54 / .6));
  --barre-survol-compte: light-dark(rgb(15 23 42 / .06), rgb(255 255 255 / .04));
  --barre-champ: light-dark(#F1F5F9, #0A1120);
  --barre-champ-survol: light-dark(#E2E8F0, rgb(255 255 255 / .08));
  --barre-champ-trait: light-dark(#CBD5E1, rgb(30 46 74 / .8));
  --barre-kbd: light-dark(#E2E8F0, #131E36);
  --barre-kbd-trait: light-dark(#CBD5E1, #1E2E4A);
  --barre-courant: light-dark(#0369A1, #22D3EE);
  --barre-courant-fond: light-dark(#E0F2FE, rgb(8 51 68 / .3));
  --barre-courant-trait: light-dark(rgb(2 132 199 / .35), rgb(6 182 212 / .25));
  --barre-ligne-a: light-dark(#0284C7, #22D3EE);
  --barre-ligne-b: light-dark(#2563EB, #3B82F6);
  --barre-ligne-lueur: light-dark(rgb(2 132 199 / .45), #06B6D4);
  --barre-anneau: light-dark(#FFFFFF, #070C14);
  --repere: var(--neon);
  --action: light-dark(#0369A1, #38BDF8);        /* ce qu'on peut faire */
  --action-survol: light-dark(#075985, #7DD3FC);
  --action-encre: light-dark(#FFFFFF, #020617);
  --action-doux: light-dark(#E0F2FE, rgb(56 189 248 / .10));
  --lueur: light-dark(rgb(2 132 199 / .25), rgb(56 189 248 / .35));
  --etiquette: light-dark(#F3C432, #E7B928);
  --etiquette-encre: #2A2205;
  --ok: light-dark(#047857, #10B981);
  --avert: light-dark(#92400E, #F59E0B);
  --travaux: light-dark(#A16207, #FACC15);              /* page en travaux : liseré et texte */
  --travaux-fond: light-dark(#FEF9C3, #2A2306);         /* page en travaux : fond jaune */
  --crit: light-dark(#B91C1C, #EF4444);
  --info: light-dark(#0369A1, #38BDF8);
  --cobalt: light-dark(#7C3AED, #8B5CF6);       /* chiffrement, protocoles */
  --muet: light-dark(#64748B, #64748B);
  --famille-plan: light-dark(#1E3A5F, #94A3B8);  /* diagrammes */
  /* Arrondis : précis pour ce qu'on actionne, plus doux pour les tuiles. */
  --rayon-s: 4px;
  --rayon-m: 6px;
  --rayon-l: 12px;
  --texte: "Geist", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --donnees: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  /* Échelle typographique resserrée (console dense). */
  --t-1: .75rem; --t0: .9375rem; --t1: 1.125rem; --t2: 1.375rem; --t3: 1.75rem; --t4: 2rem;
  /* Grille matricielle, pour les rares endroits où l'on « dessine ». */
  --quadrillage:
    linear-gradient(color-mix(in srgb, var(--action) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--action) 7%, transparent) 1px, transparent 1px) 0 0 / 24px 24px;
}

/* Fond du bouton principal : uni en clair, dégradé cyan en sombre (un
   dégradé ne passe pas dans light-dark, d'où la variable posée par thème). */
:root { --fond-bouton: var(--action); }
:root[data-theme="sombre"] { --fond-bouton: linear-gradient(90deg, #38BDF8, #22D3EE); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --fond-bouton: linear-gradient(90deg, #38BDF8, #22D3EE); }
}

/* ------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

/* « hidden » doit toujours gagner, même sur un élément stylé en grid ou flex. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 var(--t0)/1.5 var(--texte);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-size: var(--t3); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--t1); font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 .75rem; max-width: 72ch; }
small { font-size: .8125rem; }

a { color: var(--action); text-underline-offset: .15em; }
a:hover { color: var(--action-survol); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--rayon-s);
}

code, .donnee, kbd { font-family: var(--donnees); font-size: .88em; }
/* Micro-libellé : capitales espacées, pour les en-têtes de tableau et de tuile. */
.micro { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.secondaire { color: var(--encre-2); }

/* ------------------------------------------------------------ barre du haut */

/* La barre de pilotage : nuit translucide floutée, toujours là. */
.barre-haut {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--barre-fond);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--barre-encre);
  border-bottom: 1px solid var(--barre-trait);
}
.barre-interieur {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  max-width: 96rem;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: 4rem;
}
.barre-haut .marque { align-self: center; }
.nav-principale { flex: 1; min-width: 0; display: flex; }
.nav-principale > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: .15rem; }
.nav-principale > ul > li { display: flex; }
/* Entre « ce qui est à moi » et « l'informatique » : un léger espace, pas un trait. */
.nav-principale li.separation { margin-left: 1.25rem; }
.nav-principale > ul > li > a, .nav-principale summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .75rem;
  color: var(--barre-doux);
  text-decoration: none;
  font-weight: 500;
  font-size: .875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duree-retour) var(--sortie), background-color var(--duree-retour) var(--sortie);
}
.nav-principale > ul > li > a:hover, .nav-principale summary:hover { background: var(--barre-survol-compte); color: var(--barre-encre-forte); }

/* Rubrique courante : soulignée d'un trait clair, lisible sur le bleu de Prusse. */
[data-section="accueil"] .nav-accueil,
[data-section="fichiers"] .nav-fichiers,
[data-section="courrier"] .nav-courrier,
[data-section="agenda"] .nav-agenda,
[data-section="visio"] .nav-visio,
[data-section="bureau"] .nav-bureau,
[data-section="intranet"] .nav-intranet,
[data-section="aide"] .nav-aide,
[data-section="tickets"] .nav-tickets,
[data-section="parc"] .nav-parc,
[data-section="supervision"] .nav-admin-groupe > summary,
[data-section="reseau"] .nav-admin-groupe > summary,
[data-section="admin"] .nav-admin-groupe > summary,
[data-section="utilisateurs"] .nav-admin-groupe > summary {
  color: var(--barre-encre-forte);
  box-shadow: inset 0 -2px 0 var(--repere), 0 6px 14px -8px var(--repere);
}
[data-section="supervision"] .nav-supervision,
[data-section="reseau"] .nav-reseau,
[data-section="admin"] .nav-admin,
[data-section="utilisateurs"] .nav-admin { font-weight: 700; box-shadow: inset 3px 0 0 var(--action); }

/* Menus déroulants (Administration, mon compte) : des <details>, sans script indispensable. */
details.menu { position: relative; display: flex; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary::after { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); opacity: .7; }
details.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details.menu > ul {
  position: absolute;
  z-index: 20;
  top: 100%;
  min-width: 13rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 16px 32px -8px rgb(0 0 0 / .55);
}
/* Un élément de menu, quelle que soit sa nature (lien, bouton de formulaire,
   étiquette d'envoi) : même hauteur, pictogramme à gauche, libellé aligné. */
details.menu > ul :is(a, button.lien, .lien-menu) {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 2.35rem;
  padding: .35rem .7rem;
  border-radius: var(--rayon-s);
  color: var(--encre);
  font: 500 .875rem/1.25 var(--texte);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
details.menu > ul :is(a, button.lien, .lien-menu):hover { background: var(--surface-2); color: var(--encre); }
details.menu > ul :is(a, button.lien, .lien-menu):focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
details.menu > ul svg.picto { flex: none; width: 1.15rem; height: 1.15rem; color: var(--encre-2); }
details.menu > ul :is(a, button.lien, .lien-menu):hover svg.picto { color: var(--action); }
details.menu > ul button.lien.danger, details.menu > ul button.lien.danger svg.picto { color: var(--crit); }
details.menu > ul button.lien.danger:hover { background: color-mix(in srgb, var(--crit) 9%, transparent); }
/* Les feuilles des types de document, en réduction : celles qu'on retrouvera dans la liste. */
details.menu > ul svg.feuille { flex: none; width: 1.2rem; height: 1.45rem; margin-block: -.1rem; }
/* Un trait sépare des familles d'actions (importer / créer ; l'action qui détruit). */
details.menu > ul > li.separe { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--trait); }
details.menu > ul form { margin: 0; }
/* Le menu Administration s'ouvre sous son libellé, pas au bord de la fenêtre. */
.nav-admin-groupe > ul { left: 0; }

.moi { align-items: stretch; }
.moi > summary { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem 0 .6rem; cursor: pointer; font-weight: 600; }
.moi > summary:hover { background: var(--barre-survol-compte); }
.moi > ul { right: 0; }
.moi-identite { display: grid; padding: .45rem .7rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--trait); }
.moi-identite small { color: var(--encre-2); }

/* Recherche rapide : un faux champ dans la barre, une fenêtre au centre. */
.bouton-recherche {
  flex: none;
  align-self: center;
  gap: .5rem;
  min-width: 15rem;
  padding: .45rem .55rem .45rem .7rem;
  border: 1px solid rgb(148 163 184 / .22);
  background: rgb(255 255 255 / .04);
  color: var(--barre-doux);
  font-weight: 400;
}
.bouton-recherche:hover { background: var(--barre-champ-survol); color: var(--barre-encre-forte); box-shadow: none; }
.bouton-recherche svg.picto { width: 1rem; height: 1rem; }
.bouton-recherche-texte { flex: 1; text-align: left; }
kbd {
  padding: .05rem .35rem;
  border: 1px solid currentColor;
  border-radius: var(--rayon-s);
  font-size: .7rem;
  opacity: .7;
  white-space: nowrap;
}
.recherche-rapide {
  width: min(40rem, calc(100vw - 2rem));
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .5), 0 24px 48px -12px rgb(0 0 0 / .7);
}
.recherche-rapide::backdrop { background: rgb(2 6 23 / .55); }
/* Action clavier répétée (Ctrl+K) : ouverture et fermeture instantanées (S-P13). */
dialog.recherche-rapide, dialog.recherche-rapide:not([open]), dialog.recherche-rapide::backdrop, dialog.recherche-rapide:not([open])::backdrop { transition: none; }
.recherche-champ { display: flex; align-items: center; gap: .6rem; padding: .35rem .9rem; border-bottom: 1px solid var(--trait); }
.recherche-champ svg.picto { flex: none; width: 1.15rem; height: 1.15rem; color: var(--action); }
.recherche-champ input { border: 0; background: none; padding: .7rem 0; font-size: 1rem; }
.recherche-champ input:focus-visible { box-shadow: none; }
.recherche-champ kbd { color: var(--encre-3); }
.resultats-recherche { max-height: min(60vh, 32rem); overflow-y: auto; padding: .4rem; }
.recherche-aide { margin: 0; padding: 1rem .75rem; font-size: .875rem; }
.recherche-famille + .recherche-famille { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--trait); }
.recherche-famille h3 { display: flex; justify-content: space-between; padding: .45rem .6rem .25rem; }
.recherche-famille h3 a { font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; }
.recherche-famille ul { list-style: none; margin: 0; padding: 0; }
a.resultat { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; }
a.resultat svg.picto { flex: none; width: 1.1rem; height: 1.1rem; color: var(--encre-2); }
a.resultat span { display: grid; min-width: 0; }
a.resultat strong { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.resultat small { color: var(--encre-2); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.resultat:hover, a.resultat[data-choisi] { background: var(--action-doux); color: var(--encre); }
a.resultat[data-choisi] { box-shadow: inset 2px 0 0 var(--action); }
a.resultat[data-choisi] svg.picto { color: var(--action); }

.contenu {
  padding: 2rem 2rem 3.5rem;
  min-width: 0;
  max-width: 96rem;
  margin: 0 auto;
}

/* Entre 900 et 1 400 px, les rubriques d'un administrateur remplissent la barre :
   le compte se résume à son avatar (le nom reste dans le menu). */
/* Sous 1 600 px, les rubriques d'un administrateur prennent la place : la
   recherche se réduit à sa loupe (Ctrl+K marche toujours). */
@media (max-width: 1600px) {
  .bouton-recherche { min-width: 0; padding: .45rem; }
  .bouton-recherche-texte, .bouton-recherche kbd { display: none; }
}
@media (max-width: 1400px) {
  .barre-interieur { gap: 1rem; }
  .moi-nom { display: none; }
}
@media (max-width: 1240px) {
  .barre-interieur { gap: .6rem; padding-inline: 1.25rem; }
  .barre-haut .marque { font-size: 0; gap: 0; }   /* le logo seul : le mot tient dans l'icône */
  .nav-principale > ul > li > a, .nav-principale summary { padding-inline: .5rem; }
  .nav-principale li.separation { margin-left: .5rem; }
}

@media (max-width: 900px) {
  .barre-interieur { flex-wrap: wrap; gap: 0 1rem; padding: 0 1rem; }
  .barre-haut .marque { padding: .6rem 0; }
  .moi { margin-left: auto; }
  .moi-nom { display: none; }
  /* Rubriques sur leur propre ligne, défilant à l'horizontale : jamais plus large que l'écran. */
  .nav-principale { order: 3; flex: 1 0 100%; overflow-x: auto; }
  .nav-principale > ul > li > a, .nav-principale summary { padding: .7rem .7rem; }
  .nav-principale li.separation { margin-left: .5rem; }
  /* Le menu Administration s'ouvre sous la barre, à pleine largeur. */
  .nav-admin-groupe { position: static; }
  .nav-admin-groupe > ul { left: 1rem; right: 1rem; }
  .contenu { padding: 1.25rem 1rem 2.5rem; }
}

/* Pied de page : version, état du parc, quelques liens. Absent des pages
   qui occupent toute la fenêtre (courrier, calendrier, éditeurs, appels). */
.pied-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  max-width: 96rem;
  margin: 0 auto;
  padding: 1.25rem 2rem 1.5rem;
  border-top: 1px solid var(--trait);
  color: var(--encre-3);
  font-size: .75rem;
}
.mentions { max-width: 70ch; display: grid; gap: 1.5rem; }
.mentions section { min-width: 0; }
.mentions .table-cadre table { width: 100%; margin-bottom: 0; }
@media (min-width: 901px) { .mentions .table-cadre th, .mentions .table-cadre td { border: 0; border-top: 1px solid var(--trait); } }
@media (max-width: 900px) { .mentions .table-cadre th, .mentions .table-cadre td { border: 0; } }
.filtre-crates { width: 100%; margin-bottom: .75rem; }
.crates-licence { margin-bottom: .5rem; }
.crates-liste { columns: 2; column-gap: 2rem; margin: .5rem 0 0; padding-left: 1.25rem; font-size: .9rem; }
@media (max-width: 560px) { .crates-liste { columns: 1; } }
.pied-page nav { display: flex; gap: 1.25rem; margin-left: auto; }
.pied-page a { color: var(--encre-2); text-decoration: none; }
.pied-page a:hover { color: var(--encre); }
.etat-parc { display: inline-flex; align-items: center; gap: .4rem; }
.etat-parc::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent); }
.etat-parc.avert::before { background: var(--avert); box-shadow: none; }
.etat-parc.crit::before { background: var(--crit); box-shadow: none; }
.etat-parc.crit { position: relative; }
/* Le pied de page répète l'alerte déjà animée dans la barre (S-P14) : halo fixe. */
.etat-parc.crit::after { content: ""; position: absolute; left: 0; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50%; background: var(--crit); pointer-events: none; opacity: .35; transform: scale(1.8); }
body:has(.messagerie, .editeur, .salle, .discussion, .app-fichiers) .pied-page { display: none; }
@media (max-width: 900px) { .pied-page { padding-inline: 1rem; } .pied-page nav { margin-left: 0; } }

/* ------------------------------------------------------------ marque */

/* « socle » posé sur sa dalle : le mot repose sur un trait de granit épais. */
.marque {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--barre-encre-forte);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
}
.marque:hover { color: var(--barre-encre-forte); }
.marque img, .marque svg { width: 2.25rem; height: 2.25rem; border-radius: 8px; box-shadow: 0 0 0 1px rgb(56 189 248 / .25), 0 0 14px rgb(56 189 248 / .25); }

/* ------------------------------------------------------------ en-têtes de page */

/* En-tête de vue : titre net, sous-titre gris, actions à droite, séparé du
   contenu par un trait fin. */
.entete, .barre-fichiers {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--trait);
}
.entete h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.entete h1.titre-long { font-size: var(--t2); }
/* Surtitre facultatif : « Console ITSM », « Espace personnel »… */
.entete .surtitre { display: block; margin-bottom: .35rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--action); }
.entete .actions, .entete > .bouton, .entete > form { margin-bottom: .1rem; }
.numero { color: var(--encre-2); font-weight: 500; }
@media (max-width: 760px) {
  h1 { font-size: var(--t2); }
}

/* ------------------------------------------------------------ contrôles */

.bouton, button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-m);
  background: var(--fond-bouton);
  color: var(--action-encre);
  font: 600 .875rem/1.2 var(--texte);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover, button:hover { background: var(--action-survol); color: var(--action-encre); box-shadow: 0 0 16px var(--lueur); }
.bouton.discret, button.discret {
  background: var(--surface-2);
  color: var(--encre);
  border-color: var(--trait-fort);
  font-weight: 500;
}
.bouton.discret:hover, button.discret:hover { background: var(--surface-3); color: var(--encre); box-shadow: none; }
button.secondaire {
  background: transparent;
  color: var(--encre);
  border-color: var(--trait-fort);
  font-weight: 500;
}
button.secondaire:hover { background: var(--surface-2); color: var(--encre); box-shadow: none; }
button.lien {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .15em;
}
button.lien:hover { background: none; color: var(--action-survol); box-shadow: none; }
/* Désactivé (S-P10, UI-19) : une seule règle, à .5, curseur interdit. */
button:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* Requête htmx en cours (S-P15) : l'indicateur n'apparaît qu'après 150 ms, donc jamais pour une réponse rapide. */
button.htmx-request, form.htmx-request button:not(.lien, [type="button"]) { opacity: .7; cursor: progress; transition: opacity var(--duree-retour) var(--sortie) var(--delai-attente), transform var(--duree-retour) var(--sortie); }

label { display: grid; align-content: start; gap: .3rem; font-weight: 500; font-size: .875rem; }
label > small { font-weight: 400; color: var(--encre-2); }
label.case { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

input, select, textarea {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon-m);
  background: light-dark(#FFFFFF, #0B1326);
  color: var(--encre);
  font: 400 .9375rem/1.4 var(--texte);
  transition: border-color var(--duree-retour) var(--sortie), box-shadow var(--duree-retour) var(--sortie);
}
::placeholder { color: var(--encre-3); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--action); }
input[type="file"] { padding: .45rem; background: var(--papier); }
textarea { resize: vertical; min-height: 6rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 1px var(--action), 0 0 12px var(--lueur); }

.formulaire { display: grid; gap: 1rem; max-width: 46rem; }
.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; align-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.message {
  padding: .65rem .9rem;
  border: 1px solid color-mix(in srgb, var(--avert) 35%, transparent);
  background: color-mix(in srgb, var(--avert) 10%, var(--surface));
  border-radius: var(--rayon-m);
}
.message.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }

/* ------------------------------------------------------------ étiquette d'inventaire */

/* La plaque d'identité d'un ordinateur. */
.plaque {
  display: inline-grid;
  grid-template-columns: auto auto;
  max-width: 100%;
  align-items: stretch;
  border-radius: var(--rayon-s);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14);
  background: var(--etiquette);
  color: var(--etiquette-encre);
  text-decoration: none;
  vertical-align: middle;
}
.plaque-nom { padding: .15rem .55rem; font-weight: 700; }
.plaque-num { white-space: nowrap; }
/* Dans une colonne étroite, le numéro passe sous un nom trop long au lieu de l'écraser. */
dl.details .plaque { display: inline-flex; flex-wrap: wrap; }
dl.details .plaque-nom { flex: 1 1 auto; overflow-wrap: break-word; }
dl.details .plaque-num { flex: 1 0 auto; }
.plaque-num {
  padding: .15rem .55rem;
  font-family: var(--donnees);
  font-size: .9em;
  background: rgb(255 255 255 / .45);
  border-left: 1px dashed rgb(0 0 0 / .3);
}
a.plaque:hover { color: var(--etiquette-encre); filter: brightness(1.05); }
.plaque-grande { font-size: 1.6rem; }
.plaque-grande .plaque-nom { min-width: 0; padding: .35rem .9rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.plaque-grande .plaque-num { padding: .35rem .9rem; display: grid; place-items: center; }


/* ------------------------------------------------------------ tableaux */

.table-cadre {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { padding: .7rem 1rem; text-align: left; vertical-align: top; }
thead th {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
  background: light-dark(#F8FAFC, #0F1729);
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid light-dark(#EEF2F6, rgb(255 255 255 / .05)); }
tbody tr { transition: background-color var(--duree-apparition) var(--sortie); }
@media (hover: hover) and (pointer: fine) { tbody tr:hover { transition-duration: var(--duree-retour); } }
/* Une ligne ajoutée par htmx : fond d'action, effacé en 300 ms. */
tbody tr.htmx-added { background: var(--action-doux); }
@media (hover: hover) and (pointer: fine) { tbody tr:hover { background: var(--surface-2); } }
/* Numéros de ticket et identifiants en tête de ligne : chasse fixe, cyan. */
td a.titre { font-weight: 600; }
td.vide { padding: 2rem .8rem; color: var(--encre-2); }
td .titre { font-weight: 600; }
td a.titre { text-decoration: none; }
td a.titre:hover { text-decoration: underline; }
td small { white-space: nowrap; }
td .sous { display: block; font-size: .85rem; color: var(--encre-2); }
td.col-titre { min-width: 16rem; max-width: 30rem; overflow-wrap: anywhere; }
td.date { white-space: nowrap; }
.nombre { text-align: right; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; color: var(--encre-2); font-size: .875rem; }
.pagination span { margin-right: auto; }
.limite-liste { margin: 0; padding: .75rem .8rem; border-top: 1px solid var(--trait); color: var(--encre-2); font-size: .9rem; }

/* Filtres en onglets */
.filtres { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.filtres a {
  padding: .3rem .8rem;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-2);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 500;
  transition: color var(--duree-retour) var(--sortie), border-color var(--duree-retour) var(--sortie);
}
.filtres a:hover { color: var(--encre); border-color: var(--encre-3); }
.filtres a[aria-current="page"] { background: var(--action-doux); border-color: color-mix(in srgb, var(--action) 55%, transparent); color: var(--action); }

.recherche { max-width: 30rem; margin-bottom: 1rem; }
.annuaire-filtres { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e3, .75rem) 1rem; max-width: none; }
.annuaire-filtres > label:first-child { flex: 1 1 16rem; max-width: 26rem; }
.annuaire-filtres > label.case { align-self: center; display: inline-flex; align-items: center; gap: .4rem; }
.notif-prefs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.notif-prefs li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem 1.25rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.notif-prefs li:first-child { border-top: 0; }
.notif-prefs li > div { display: grid; gap: .1rem; }
.notif-prefs small { font-size: var(--t-s, .8rem); }
@media (max-width: 520px) { .notif-prefs li { grid-template-columns: 1fr 1fr; } .notif-prefs li > div { grid-column: 1 / -1; } }

/* Bascule Tableau / Kanban : deux segments. */
.bascule-vue { display: inline-flex; gap: .15rem; padding: 2px; border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--surface); }
.bascule-vue a { padding: .3rem .75rem; border-radius: var(--rayon-s); color: var(--encre-2); font-size: .8125rem; font-weight: 500; text-decoration: none; }
.bascule-vue a:hover { color: var(--encre); }
.bascule-vue a[aria-current="page"] { background: var(--action-doux); color: var(--action); }
@media (max-width: 900px) { .bascule-vue { flex-wrap: wrap; max-width: 100%; } }

/* Kanban : une colonne par état, défilement horizontal si l'écran est étroit. */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(14rem, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.kanban-colonne { min-height: 12rem; padding: .6rem; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: light-dark(#F8FAFC, #0B1326); transition: border-color var(--duree-retour) var(--sortie), background-color var(--duree-retour) var(--sortie); }
.kanban-colonne.survolee { border-color: var(--action); background: var(--action-doux); }
.kanban-colonne h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 .15rem .6rem; font-size: .875rem; }
.kanban-compte { font: 500 .75rem var(--donnees); color: var(--encre-3); }
.kanban-colonne ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; min-height: 3rem; }
.kanban-carte { padding: .65rem .75rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); cursor: grab; transition: border-color var(--duree-retour) var(--sortie), opacity var(--duree-retour) var(--sortie); }
@media (hover: hover) and (pointer: fine) { .kanban-carte:hover { border-color: light-dark(#CBD5E1, rgb(56 189 248 / .28)); } }
.kanban-carte.deplacee { opacity: .45; }
.kanban-carte.en-cours { opacity: .6; cursor: progress; }
@media (max-width: 760px) {
  .kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .kanban-colonne { scroll-snap-align: start; }
}
.kanban-carte a { display: block; color: var(--encre); font-size: .875rem; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.kanban-carte a:hover { color: var(--action); }
.kanban-carte .donnee { color: var(--action); }
.kanban-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; color: var(--encre-2); }
.kanban-meta small { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ états et priorités */

/* État d'un ticket : un voyant de forme et couleur propres, plus le libellé. */
.etat {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .1rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  white-space: nowrap; font-size: .75rem; font-weight: 600;
}
.etat::before { content: ""; width: .4rem; height: .4rem; flex: none; border-radius: 50%; background: currentColor; }
.etat-nouveau { color: var(--info); }
.etat-en_cours { color: var(--avert); }
.etat-en_attente { color: var(--muet); }
.etat-en_attente::before { background: none; box-shadow: inset 0 0 0 2px currentColor; }
.etat-resolu { color: var(--ok); }
.etat-clos { color: var(--muet); }
.etat-clos::before { border-radius: 1px; }

/* Criticité 1 à 3 : barres croissantes, comme un niveau de signal. */
.prio { display: inline-flex; align-items: flex-end; gap: 2px; height: 1rem; vertical-align: middle; }
.prio i { width: 4px; border-radius: 1px; background: var(--trait-fort); }
.prio i:nth-child(1) { height: 40%; } .prio i:nth-child(2) { height: 70%; } .prio i:nth-child(3) { height: 100%; }
.prio[data-n="1"] i:nth-child(-n+1) { background: var(--muet); }
.prio[data-n="2"] i:nth-child(-n+2) { background: var(--avert); }
.prio[data-n="3"] i { background: var(--crit); }

/* Voyants de supervision */
.voyant { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.voyant::before { content: ""; width: .65rem; height: .65rem; flex: none; border-radius: 50%; background: var(--muet); }
.voyant-ok::before { background: var(--ok); }
.voyant-problem::before { background: var(--avert); }
.voyant-down::before { background: var(--crit); }
.voyant-ok::before { box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent); }
/* Halo d'urgence (S-P13, S-P14) : un seul mouvement, sur ::after, en transform et opacity.
   Réservé aux états critiques non pris en compte : .compteur.grave, .grav-5 et le pouls cyan de « À attribuer » (le voyant .etat-parc.crit du pied de page, qui répète la barre, a un halo fixe). */
:root { --duree-halo: 2000ms; --cadence-halo: cubic-bezier(0, 0, .2, 1); }
@keyframes halo { from { transform: scale(1); opacity: .5; } to { transform: scale(2.2); opacity: 0; } }
.voyant-none::before { background: none; box-shadow: inset 0 0 0 2px var(--trait-fort); }

/* Gravité d'un problème (échelle Zabbix). */
.grav {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .05rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-weight: 600; font-size: .75rem; white-space: nowrap;
}
.grav::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.grav-1 { color: var(--info); } .grav-2 { color: var(--avert); }
.grav-3, .grav-4 { color: var(--crit); }
.grav-5 { color: #fff; background: var(--crit); border-color: var(--crit); }
.grav.grav-5 { position: relative; isolation: isolate; }
.grav.grav-5::after { content: ""; position: absolute; z-index: -1; left: calc(.5rem + 1px); top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem; border-radius: 50%; background: currentColor; pointer-events: none; opacity: 0; animation: halo var(--duree-halo) var(--cadence-halo) infinite; }

/* Compteur de problèmes dans le rail. */
.compteur {
  min-width: 1.4rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--avert);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
}
.compteur.grave { position: relative; isolation: isolate; background: var(--crit); }
.compteur.grave::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--crit); pointer-events: none; opacity: 0; animation: halo var(--duree-halo) var(--cadence-halo) infinite; }
/* Mouvement réduit : le halo reste, fixe et discret. */
@media (prefers-reduced-motion: reduce) {
  .compteur.grave::after, .grav.grav-5::after, .pouls:not(.vert, .calme)::after { animation: none; transform: scale(1.8); opacity: .35; }
}

/* ------------------------------------------------------------ fiches */

.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .fiche { grid-template-columns: minmax(0, 1fr); } }

.panneau {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
}
.panneau + .panneau { margin-top: 1rem; }
.fiche > .panneau + .panneau, .tableau > .panneau + .panneau { margin-top: 0; }
.panneau h2 { margin-bottom: .75rem; }

.bloc { margin-bottom: 2rem; }
.bloc > h2 { margin-bottom: .75rem; }

dl.details { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
dl.details dt { color: var(--encre-2); font-size: .9rem; padding-top: .05rem; }
dl.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.details.large { grid-template-columns: 12rem 1fr; }
@media (max-width: 560px) { dl.details, dl.details.large { grid-template-columns: 1fr; gap: .1rem; } dl.details dd { margin-bottom: .5rem; } }

.texte { white-space: pre-wrap; max-width: 72ch; overflow-wrap: anywhere; }
.description { font-size: 1.05rem; line-height: 1.6; }

/* ------------------------------------------------------------ fil des suivis */

/* Une vraie séquence chronologique : un fil vertical relie les messages. */
.fil { list-style: none; margin: 0 0 1.25rem; padding: 0 0 0 1.25rem; border-left: 2px solid var(--trait); }
.suivi { position: relative; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); }
.suivi::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 7px);
  top: 1.05rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--trait-fort);
}
.suivi header { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .35rem; font-size: .9rem; }
.suivi header strong { font-size: 1rem; }
/* Note privée : hachurée, pour qu'on ne la confonde jamais avec une réponse au demandeur. */
.suivi.prive {
  border-style: dashed;
  border-color: var(--avert);
  background: repeating-linear-gradient(-45deg, var(--surface) 0 10px, color-mix(in srgb, var(--avert) 7%, var(--surface)) 10px 20px);
}
.suivi.prive::before { border-color: var(--avert); }
/* Un ajout par htmx entre en 200 ms (jamais au chargement, jamais sur un rafraîchissement périodique). */
.suivi, .fil-messages .bulle { transition: opacity var(--duree-apparition) var(--sortie), transform var(--duree-apparition) var(--sortie); }
.suivi.htmx-added, .fil-messages .bulle.htmx-added { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .suivi.htmx-added, .fil-messages .bulle.htmx-added { transform: none; } }

/* ------------------------------------------------------------ jauges */

.jauges { display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.jauge-tete { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .93rem; }
.jauge-tete span:first-child { font-weight: 600; }
.jauge-tete span:last-child { color: var(--encre-2); }
.jauge-piste {
  position: relative;
  height: .7rem;
  border-radius: var(--rayon-s);
  background: color-mix(in srgb, var(--trait) 70%, var(--papier));
}
.jauge-valeur { width: var(--v); height: 100%; border-radius: var(--rayon-s); background: var(--ok); }
.jauge.warn .jauge-valeur { background: var(--avert); }
.jauge.crit .jauge-valeur { background: var(--crit); }
/* Repères aux seuils d'alerte : on voit la marge qui reste. */
.jauge-piste::before, .jauge-piste::after {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--encre);
  opacity: .45;
}
.jauge-piste::before { left: var(--w); }
.jauge-piste::after { left: var(--c); opacity: .8; }

.courbes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.courbes figure { margin: 0; }
.courbes figcaption { font-size: .88rem; color: var(--encre-2); margin-bottom: .25rem; }
.courbe { display: block; width: 100%; height: 64px; border-bottom: 1px solid var(--trait-fort); background: linear-gradient(var(--trait) 1px, transparent 1px) 0 0 / 100% 25%; }
.courbe polyline { fill: none; stroke: var(--action); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

.problemes { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.problemes li { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.problemes li > a { min-width: 0; overflow-wrap: anywhere; }

.jeton {
  padding: 1rem;
  border: 2px dashed var(--etiquette);
  border-radius: var(--rayon-m);
  background: var(--surface);
  font-family: var(--donnees);
  font-size: 1.15rem;
  word-break: break-all;
  user-select: all;
}
pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--rayon-m);
  background: var(--encre);
  color: var(--papier);
  font: .88rem/1.5 var(--donnees);
}

/* ------------------------------------------------------------ carte du réseau */

.carte { display: grid; justify-items: center; margin-top: 1.5rem; }
/* Traits verticaux : Internet → passerelle → segment. */
.noeud-internet, .passerelles { position: relative; margin-bottom: 1.75rem; }
.noeud-internet::after, .passerelles::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.75rem;
  height: 1.75rem;
  border-left: 2px solid var(--trait-fort);
}
.segment { width: 100%; display: grid; justify-items: center; margin-bottom: 3rem; }
.segment + .segment { padding-top: 1rem; border-top: 1px dashed var(--trait-fort); }
.passerelles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* Le segment lui-même : un bus épais auquel tout le monde est raccordé. */
.bus {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .45rem;
  border-top: 5px solid var(--encre);
  border-radius: 2px;
}
.groupes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 1.25rem;
  margin-top: 1.25rem;
}
.groupe { position: relative; }
.groupe::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: -1.25rem;
  height: 1.25rem;
  border-left: 2px solid var(--trait-fort);
}
.groupe h2 { font-size: 1rem; margin: 0 0 .5rem; }
.groupe ul { list-style: none; margin: 0 0 0 1.1rem; padding: 0 0 0 1rem; border-left: 2px solid var(--trait-fort); display: grid; gap: .5rem; }
.groupe li { position: relative; }
.groupe li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 1rem;
  border-top: 2px solid var(--trait-fort);
}

.noeud {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  column-gap: .6rem;
  align-items: center;
  padding: .45rem .7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-m);
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
  min-width: 0;
}
@media (hover: hover) and (pointer: fine) { a.noeud:hover { border-color: var(--action); color: var(--encre); } }
.noeud svg {
  grid-row: span 2;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: var(--action);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.noeud .nom { font-weight: 600; overflow-wrap: anywhere; }
.noeud .detail { grid-column: 2; font-size: .82rem; color: var(--encre-2); overflow-wrap: anywhere; }
.noeud.absent { opacity: .5; }
.noeud.absent .nom { text-decoration: line-through; text-decoration-thickness: 1px; }
.noeud.scanner { border: 1px dashed var(--action); }
.passerelles .noeud { border: 2px solid var(--encre); padding: .6rem .9rem; }
.noeud-internet { border-style: dashed; }
.noeud-internet svg { grid-row: auto; }

/* ------------------------------------------------------------ tableau de bord, administration */

.tableau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; align-items: stretch; }
/* Grille bento : chaque bloc du tableau de bord est une tuile. */
.tableau > .bloc, .actualites-bloc {
  margin: 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
  transition: border-color var(--duree-apparition) var(--sortie);
}
.actualites-bloc { margin-bottom: 1rem; }
@media (hover: hover) and (pointer: fine) { .tableau > .bloc:hover { border-color: light-dark(#CBD5E1, rgb(56 189 248 / .28)); } }
.tableau > .bloc > h2 { display: flex; align-items: baseline; gap: .4rem; font-size: 1rem; }
/* Dans une tuile, le tableau prend toute la largeur sans second cadre. */
.tableau > .bloc .table-cadre { margin-inline: -1.25rem; border: 0; border-radius: 0; border-top: 1px solid var(--trait); background: none; }
.tableau > .bloc .table-cadre thead th { background: none; }

/* Tuiles d'indicateurs : micro-libellé, pictogramme teinté, grand chiffre, contexte. */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tuile {
  --teinte: var(--action);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
  transition: border-color var(--duree-apparition) var(--sortie), box-shadow var(--duree-apparition) var(--sortie);
}
@media (hover: hover) and (pointer: fine) { a.tuile:hover { color: var(--encre); } }
.tuile-libelle { align-self: center; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.tuile svg.picto { width: 2rem; height: 2rem; padding: .4rem; border-radius: var(--rayon-m); color: var(--teinte); background: color-mix(in srgb, var(--teinte) 14%, transparent); border: 1px solid color-mix(in srgb, var(--teinte) 28%, transparent); }
.tuile-valeur { grid-column: 1 / -1; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--teinte); }
.tuile-valeur small { margin-left: .35rem; font: 400 .75rem var(--donnees); letter-spacing: 0; color: var(--encre-3); }
.tuile-contexte { grid-column: 1 / -1; font-size: .8125rem; color: var(--encre-2); }
.tuile.ok { --teinte: var(--ok); }
.tuile.avert { --teinte: var(--avert); }
.tuile.crit { --teinte: var(--crit); }
.tuile.calme-tuile { --teinte: var(--encre); }
.tuile.cobalt { --teinte: var(--cobalt); }
.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline input:not([type="hidden"], [type="checkbox"]) { flex: 1 1 12rem; width: auto; }
.referentiel { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

/* Événements du journal, entre les messages du fil. */
.evenement { position: relative; margin: 0 0 1rem; color: var(--encre-2); }
.evenement::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 4px);
  top: .45rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--trait-fort);
}
.evenement.erreur { color: var(--crit); }
.evenement.attente small { animation: attente 1.6s ease-in-out infinite; }
@keyframes attente { 50% { opacity: .45; } }
/* Réponse de l'assistant : bordure d'action, pour la distinguer d'un humain. */
.suivi.ia { border-left: 4px solid var(--action); }
.suivi.ia.prive { border-left-style: solid; }
fieldset.choix { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
fieldset.choix legend { font-weight: 600; font-size: .93rem; margin-bottom: .3rem; }

/* ------------------------------------------------------------ pictos, avatars, états calmes */

svg.picto { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Avatars à initiales : on voit qui parle sans lire le nom. Teinte dérivée du nom. */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: light-dark(hsl(var(--h, 180) 45% 88%), hsl(var(--h, 180) 30% 26%));
  color: light-dark(hsl(var(--h, 180) 55% 24%), hsl(var(--h, 180) 60% 85%));
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.avatar.assistant { background: var(--action); color: var(--action-encre); }
.avatar.oeil { background: none; }
.avatar.oeil img { width: 2rem; height: 2rem; }
.suivi header { align-items: center; }

/* États calmes de la supervision : l'œil veille, rien à signaler. */
.calme { display: flex; align-items: center; gap: .75rem; color: var(--encre-2); }
.calme img { width: 2.25rem; height: 2.25rem; }

/* ------------------------------------------------------------ connexion */

/* La porte d'entrée, toujours de nuit : à gauche la marque sur une grille
   éclairée de halos cyan, à droite le formulaire (maquette « Connexion »). */
.connexion {
  color-scheme: dark;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  background: #060E20;
  color: var(--encre);
}
.connexion .dalle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, rgb(14 165 233 / .22), transparent 30%),
    radial-gradient(circle at 85% 85%, rgb(14 165 233 / .16), transparent 35%),
    linear-gradient(90deg, rgb(56 189 248 / .05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(rgb(56 189 248 / .05) 1px, transparent 1px) 0 0 / 40px 40px,
    #0B1326;
  border-right: 1px solid rgb(30 41 59 / .8);
  color: var(--prusse-encre);
}
.dalle-tete { display: flex; align-items: center; gap: 1rem; }
.dalle-logo { display: grid; place-items: center; width: 5rem; height: 5rem; padding: .4rem; border-radius: 1rem; background: rgb(15 23 42 / .8); box-shadow: 0 0 0 1px rgb(6 182 212 / .4), 0 0 35px rgb(56 189 248 / .35); }
.dalle-logo img { width: 100%; height: 100%; border-radius: .7rem; }
.badge-version { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border: 1px solid rgb(6 182 212 / .3); border-radius: 999px; background: rgb(8 51 68 / .8); color: #67E8F9; font: 500 .75rem var(--donnees); }
.dalle-tete p { margin: .3rem 0 0; font-size: .75rem; color: #94A3B8; }
.dalle-centre { margin-block: auto; }
.connexion .dalle .mot-marque { margin: 0; max-width: none; color: #fff; font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cote-lumineuse { display: flex; align-items: center; gap: .5rem; max-width: 36rem; margin: 1.25rem 0; }
.cote-lumineuse i { width: .55rem; height: .55rem; border: 2px solid #22D3EE; border-radius: 50%; background: #0B1326; box-shadow: 0 0 8px #38BDF8; }
.cote-lumineuse span { flex: 1; height: 2px; background: linear-gradient(90deg, #22D3EE, rgb(34 211 238 / .8), rgb(6 182 212 / .2)); box-shadow: 0 0 10px #38BDF8; }
.accroche { margin: 0 0 2.5rem; font-size: 1.25rem; color: #CBD5E1; }
.atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; max-width: 42rem; }
.atout { padding: .9rem; border: 1px solid #1E293B; border-radius: 12px; background: rgb(15 23 42 / .6); transition: border-color var(--duree-retour); }
@media (hover: hover) and (pointer: fine) { .atout:hover { border-color: rgb(6 182 212 / .4); } }
.atout-ic { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .6rem; border: 1px solid rgb(6 182 212 / .3); border-radius: 8px; background: rgb(8 51 68 / .7); color: #22D3EE; }
.atout-ic svg, .dalle-pied svg, .badge-acces svg, .champ-icone svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.atout h2 { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #E2E8F0; }
.atout p { margin: .3rem 0 0; font-size: .75rem; color: #94A3B8; }
.dalle-pied { display: flex; align-items: center; gap: .5rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid rgb(30 41 59 / .8); max-width: none; font-size: .75rem; color: #94A3B8; }
.connexion .panneau-connexion {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 3rem clamp(1.5rem, 5vw, 3.5rem);
  background: radial-gradient(ellipse at top right, rgb(8 51 68 / .3), transparent 60%), #060E20;
}
.connexion-carte { width: min(100%, 28rem); }
.badge-acces { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .75rem; padding: .25rem .75rem; border: 1px solid rgb(6 182 212 / .2); border-radius: 999px; background: rgb(8 51 68 / .6); color: #22D3EE; font-size: .75rem; font-weight: 500; }
.connexion-carte h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.connexion-carte > p.secondaire { margin: .5rem 0 2rem; font-size: .875rem; color: #94A3B8; }
.connexion .formulaire { display: grid; gap: .45rem; max-width: none; padding: 0; border: 0; background: none; box-shadow: none; }
.connexion .formulaire label { margin-top: .75rem; font-size: .875rem; font-weight: 500; color: #CBD5E1; }
.champ-icone { position: relative; display: flex; align-items: center; border: 1px solid rgb(51 65 85 / .8); border-radius: 12px; background: rgb(15 23 42 / .75); transition: border-color var(--duree-retour), box-shadow var(--duree-retour); }
.champ-icone:hover { border-color: #475569; }
.champ-icone:focus-within { border-color: rgb(6 182 212 / .6); box-shadow: 0 0 0 2px rgb(56 189 248 / .5), 0 0 20px -3px rgb(56 189 248 / .3); }
.champ-icone > svg { position: absolute; left: .9rem; color: #94A3B8; pointer-events: none; }
.champ-icone input { flex: 1; padding: .8rem 1rem .8rem 2.75rem; border: 0; background: none; color: #F1F5F9; font-size: .875rem; }
.champ-icone input:focus-visible { outline: none; box-shadow: none; }
.champ-icone input[type="password"] { font-family: var(--donnees); }
.voir-mdp { margin-right: .4rem; padding: .35rem; border: 0; background: none !important; color: #94A3B8; box-shadow: none !important; }
.voir-mdp:hover, .voir-mdp[aria-pressed="true"] { color: #E2E8F0; }
.voir-mdp svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton-connexion { justify-content: center; width: 100%; margin-top: 1.5rem; padding: .85rem 1.5rem; border-radius: 12px; background: linear-gradient(90deg, #22D3EE, #06B6D4) !important; color: #020617; font-weight: 700; letter-spacing: .01em; box-shadow: 0 0 22px -4px rgb(34 211 238 / .55) !important; transition: transform var(--duree-retour); }
.bouton-connexion:hover { transform: translateY(-1px); color: #020617; }
.aide-connexion { margin: 2rem 0 0; text-align: center; font-size: .75rem; color: #94A3B8; }
@media (max-width: 1000px) {
  .atouts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion .dalle { gap: 1.5rem; padding: 1.5rem 1.25rem 2rem; border-right: 0; border-bottom: 1px solid rgb(30 41 59 / .8); }
  .atouts, .dalle-pied { display: none; }
  .accroche { margin-bottom: 0; }
  .connexion .dalle .mot-marque { font-size: 3.2rem; }
  .connexion .panneau-connexion { padding: 2rem 1.25rem; align-content: start; }
}

/* Mouvement : rare, court, et toujours une raison. On anime ce qui apparaît
   (fenêtres, menus, toast) et l'appui sur un bouton ; jamais le reste. */
:root {
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  /* Durées : retour d'action 160 ms, apparition 200 ms (S-P13). Un délai d'attente de 150 ms avant tout indicateur (S-P15). */
  --duree-retour: 160ms;
  --duree-apparition: 200ms;
  --delai-attente: 150ms;
  --duree-entree: 240ms;
}
:where(.bouton, button:not(.lien, .languette-barre)) { transition: transform var(--duree-retour) var(--sortie); }
:where(.bouton, button:not(.lien, .languette-barre)):active:not(:disabled) { transform: scale(0.97); }

details.menu > ul {
  transform-origin: top left;
  transition: opacity var(--duree-retour) var(--sortie), transform var(--duree-retour) var(--sortie);
  @starting-style { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

dialog {
  transition: opacity var(--duree-apparition) var(--sortie), transform var(--duree-apparition) var(--sortie), overlay var(--duree-apparition) allow-discrete, display var(--duree-apparition) allow-discrete;
}
dialog:not([open]) { opacity: 0; transform: scale(0.97); transition-duration: var(--duree-retour); }
dialog[open] { @starting-style { opacity: 0; transform: scale(0.96); } }
dialog::backdrop { transition: opacity var(--duree-apparition) var(--sortie), overlay var(--duree-apparition) allow-discrete, display var(--duree-apparition) allow-discrete; }
dialog:not([open])::backdrop { opacity: 0; }
dialog[open]::backdrop { @starting-style { opacity: 0; } }

/* Mouvement réduit (S-P17) : plus aucun mouvement, mais tout indicateur de chargement reste visible, en statique
   (halos : .35 fixe ; relève du courrier : trait .6 ; « en attente » : texte plein). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ vérifications par machine */

.sous-menu { margin-bottom: 1.5rem; }
.verifications { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .45rem; }
.verifications li { display: flex; gap: .75rem; align-items: baseline; padding: .5rem .75rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); }
.etat-verif { flex: none; min-width: 5.5rem; font-weight: 700; font-size: .85rem; }
.verifications .ok .etat-verif { color: var(--ok); }
.verifications .echec { border-color: var(--crit); }
.verifications .echec .etat-verif { color: var(--crit); }
.verifications .attente .etat-verif, .verifications .desactivee .etat-verif { color: var(--muet); }
tr.desactivee td { opacity: .55; }

/* ------------------------------------------------------------ services d'un serveur */

/* Réglage en trois positions : un seul bouton enfoncé à la fois. */
.bascule { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); overflow: hidden; }
.bascule button {
  padding: .35rem .7rem;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--encre-2);
  font-weight: 500;
  font-size: .85rem;
}
.bascule button + button { border-left: 1px solid var(--trait-fort); }
.bascule button:hover { background: var(--papier); color: var(--encre); }
.bascule button[aria-pressed="true"] { background: var(--action); color: var(--action-encre); font-weight: 700; }
.bascule button[value="ignore"][aria-pressed="true"] { background: var(--muet); }
.avert-texte { color: var(--avert); }
tr.htmx-settling { background: var(--action-doux); }

/* Fichiers */
.ariane { margin: 0 0 1.25rem; }
.actions-fichier summary { cursor: pointer; }
.actions-fichier[open] { min-width: 16rem; }
.actions-fichier form { margin-top: .5rem; }

/* Tableau de bord des utilisateurs */
.liste-simple { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.liste-simple li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.sous-titre { margin: 2rem 0 .75rem; }
.pied-bloc { margin-top: .75rem; }
.intro { margin-bottom: 1.75rem; }

/* ------------------------------------------------------------ bureau : documents et tableur */

.emplacement { margin: -1rem 0 1.25rem; }
.note-bureau { font-size: .9rem; margin-top: 1rem; }
.entete h1 { overflow-wrap: anywhere; }
.etat-enregistrement { font-size: .9rem; }

/* Liste des documents : le type se lit à la pastille, pas qu'à l'extension. */
a.doc-texte::before, a.doc-tableur::before {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .9rem;
  margin-right: .5rem;
  border-radius: 1px;
  vertical-align: -0.05em;
}
a.doc-texte::before { background: var(--info); }
a.doc-tableur::before { background: var(--ok); }

/* ------------------------------------------------------------ aide et intranet */

/* Texte rédigé (articles, actualités) : une colonne de lecture confortable. */
.prose { max-width: 70ch; font-size: 1.05rem; line-height: 1.65; }
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3 { margin: 1.6rem 0 .5rem; }
.prose h2 { font-size: var(--t1); }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose li + li { margin-top: .3rem; }
.prose code { padding: .05rem .3rem; border-radius: var(--rayon-s); background: var(--papier); }
.prose pre { overflow-x: auto; padding: .8rem 1rem; border-radius: var(--rayon-m); background: var(--papier); }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 4px solid var(--trait-fort); color: var(--encre-2); }
.prose table { width: auto; margin-bottom: 1rem; }
.prose th, .prose td { border: 1px solid var(--trait); }

.recherche-aide { max-width: 42rem; }
.recherche-aide input { padding: .8rem 1rem; font-size: 1.1rem; }
.articles { list-style: none; margin: 0; padding: 0; }
.articles li { padding: 1rem 0; border-bottom: 1px solid var(--trait); }
.articles li:first-child { padding-top: 0; }
.articles .titre { font-size: var(--t1); font-weight: 700; text-decoration: none; }
.articles .titre:hover { text-decoration: underline; }
.articles p { margin: .3rem 0; }
.pastille-equipe { display: inline-block; margin-left: .4rem; padding: .05rem .45rem; border-radius: var(--rayon-s); background: var(--prusse); color: var(--prusse-encre); font-size: .78rem; font-weight: 700; vertical-align: .15em; }
.categories { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.categories a[aria-current="page"] { font-weight: 700; color: var(--encre); text-decoration: none; }

.suggestions { margin: -.25rem 0 .25rem; padding: .75rem 1rem; border-left: 4px solid var(--action); background: var(--action-doux); border-radius: 0 var(--rayon-m) var(--rayon-m) 0; }
.suggestions p { margin-bottom: .35rem; }
.suggestions ul { margin: 0; padding-left: 1.2rem; }

.redaction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.redaction textarea { font-family: var(--donnees); font-size: .92rem; line-height: 1.5; }
.apercu { padding: 1.25rem 1.5rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-m); }
.apercu > h2 { font-size: .9rem; color: var(--encre-2); margin-bottom: .75rem; }
@media (max-width: 1000px) { .redaction { grid-template-columns: 1fr; } }

/* Actualités : un fil, la plus récente en haut ; une épinglée est marquée d'un trait cobalt. */
.actualite { padding: 0 0 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--trait); }
.actualite > header { margin-bottom: .75rem; }
.actualite > header h2 { font-size: var(--t2); letter-spacing: -0.015em; margin-bottom: .2rem; }
.actualite.epinglee { padding-left: 1.25rem; border-left: 4px solid var(--action); }
.actualite .actions { margin-top: .5rem; font-size: .9rem; }
.liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.liens li { display: grid; }
.liens form { margin: 0; }
.personne { display: inline-flex; align-items: center; gap: .6rem; }
.actualites-accueil { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.actualites-accueil a { font-weight: 700; }

/* ------------------------------------------------------------ fichiers (à la Nextcloud) */

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app-fichiers { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.app-nav { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: 1.5rem; min-height: calc(100vh - 8rem); }
.app-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.app-nav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; font-weight: 600; }
.app-nav a:hover { background: var(--surface); }
.app-nav a[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--action); }
.app-nav a svg.picto { flex: none; width: 1.2rem; height: 1.2rem; color: var(--encre-2); }
.app-nav a[aria-current="page"] svg.picto { color: var(--action); }
.app-nav-pied { margin-top: auto; font-size: .88rem; color: var(--encre-2); }
.app-nav-pied p { margin: 0 0 .5rem; }

.barre-fichiers .ariane { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; font-size: var(--t3); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.barre-fichiers .ariane a { color: var(--encre-2); text-decoration: none; font-weight: 700; }
.barre-fichiers .ariane a:hover { color: var(--action); text-decoration: underline; }
.barre-fichiers .ariane .sep { color: var(--trait-fort); font-weight: 400; }
.titre-vue { font-size: var(--t3); }
.pp-bascule-fichiers { margin-left: auto; display: flex; gap: .15rem; }
.pp-bascule-fichiers .outil[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.outil svg.picto { width: 1.15rem; height: 1.15rem; }

/* Menus « + Nouveau » et « ⋯ » : mêmes menus déroulants que la barre du haut. */
.menu-nouveau > summary.bouton::after { border-color: var(--action-encre); }
.menu-nouveau > ul { top: calc(100% + .35rem); border-radius: var(--rayon-m); }
.menu-nouveau > summary.bouton { display: inline-flex; align-items: center; gap: .4rem; }
.menu-nouveau > summary.bouton svg.picto { width: 1.05rem; height: 1.05rem; stroke-width: 2.2; }
.menu-nouveau > ul { min-width: 15rem; }
.menu-ligne > summary {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--rayon-s);
  color: var(--encre-2);
  cursor: pointer;
}
.menu-ligne > summary svg.picto { width: 1.25rem; height: 1.25rem; }
.menu-ligne > summary::after { display: none; }
.menu-ligne > summary:hover, .menu-ligne[open] > summary { background: var(--papier); color: var(--encre); }
.menu-ligne > ul { right: 0; top: 100%; z-index: 5; border-radius: var(--rayon-m); }
button.lien.danger { color: var(--crit); }

.barre-selection {
  position: sticky;
  top: 4rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--rayon-m);
  background: var(--prusse);
  color: var(--prusse-encre);
}
.barre-selection button.secondaire { color: var(--prusse-encre); border-color: var(--prusse-doux); }
.barre-selection button.secondaire:hover { background: var(--prusse-2); color: #fff; }
.barre-selection button.lien { color: var(--prusse-doux); }

/* Liste : une ligne par élément, colonnes alignées sur l'en-tête. */
.entete-liste, .fichier {
  display: grid;
  grid-template-columns: 1.75rem 2.6rem minmax(0, 1fr) auto 6.5rem 8.5rem;
  align-items: center;
  gap: .75rem;
  padding: 0 .5rem;
}
.entete-liste { padding-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--encre-2); }
.fichiers { list-style: none; margin: 0; padding: 0; }
.fichier { position: relative; min-height: 3.4rem; border-top: 1px solid var(--trait); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .fichier:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); } }
.fichier.choisi { background: var(--action-doux); }
.fichier > input[type="checkbox"] { opacity: .3; justify-self: center; }
.fichier:hover > input, .fichier > input:focus-visible, .fichier > input:checked, .en-selection .fichier > input { opacity: 1; }
.vignette { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; }
.vignette svg { width: 2rem; height: 2.4rem; }
.vignette { position: relative; }
.vignette img { position: absolute; width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: var(--rayon-s); border: 1px solid var(--trait); background: var(--surface); }
.fichier .nom { min-width: 0; display: grid; }
.fichier .nom a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); font-weight: 600; text-decoration: none; }
.fichier .nom a:hover { color: var(--action); text-decoration: underline; }
.dossier-parent { color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-ligne { display: flex; align-items: center; gap: .1rem; }
.actions-ligne form { margin: 0; }
.droits-liste { display: grid; gap: 1rem; }
.droits-personne { display: grid; gap: .75rem; min-width: 0; }
.panneau.droits-personne + .panneau.droits-personne { margin-top: 0; }
.droits-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; }
.droits-tete h2 { margin: 0; }
.droits-note { margin: 0; }
.droits-grille { display: grid; gap: .75rem; min-width: 0; }
.cases-droits { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem .75rem; }
.cases-droits legend { grid-column: 1 / -1; }
.cases-droits label.case small { flex: 0 1 auto; padding-left: 0; color: var(--encre-2); white-space: nowrap; }
.droits-rh { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0; padding-top: .5rem; border-top: 1px solid var(--trait); }
.droits-inactifs { margin-top: 2rem; }
.taille, .quand { font-size: .88rem; color: var(--encre-2); white-space: nowrap; }
.etoile { width: 2rem; height: 2rem; justify-content: center; padding: 0; background: transparent; border: 0; }
.etoile svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--muet); stroke-width: 1.8; stroke-linejoin: round; }
.etoile:hover { background: var(--papier); }
.etoile[aria-pressed="true"] svg { fill: var(--action); stroke: var(--action); }
/* L'étoile vide n'apparaît qu'au survol ; une étoile pleine reste visible. */
.fichier .etoile[aria-pressed="false"] { opacity: 0; }
.fichier:hover .etoile, .fichier .etoile:focus-visible { opacity: 1; }

/* Grille : des cartes, la vignette en grand. */
.vue-grille .entete-liste { display: none; }
.vue-grille .fichiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.vue-grille .fichier {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .4rem;
  padding: 1rem .6rem .75rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-l);
  text-align: center;
}
@media (hover: hover) and (pointer: fine) { .vue-grille .fichier:hover, .vue-grille .fichier.choisi { border-color: var(--trait); background: var(--surface); } }
.vue-grille .fichier > input { position: absolute; top: .6rem; left: .6rem; }
.vue-grille .actions-ligne { position: absolute; top: .3rem; right: .3rem; }
.vue-grille .vignette { width: 100%; height: 6.5rem; }
.vue-grille .vignette svg { width: 4.5rem; height: 5.4rem; }
.vue-grille .vignette img { inset: 0; width: 100%; height: 6.5rem; }
.vue-grille .nom a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vue-grille .taille { display: none; }

.vide-fichiers { padding: 3rem 1.5rem; border: 2px dashed var(--trait-fort); border-radius: var(--rayon-l); text-align: center; }
.vide-fichiers p { margin-inline: auto; }

/* Dépôt de fichiers : tout l'écran devient la cible. */
.depot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 2rem; background: color-mix(in srgb, var(--prusse) 72%, transparent); }
.depot p { margin: 0; padding: 3rem 4rem; border: 3px dashed var(--action); border-radius: var(--rayon-l); background: var(--surface); font-size: var(--t1); text-align: center; }
.progression { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40; display: grid; gap: .5rem; width: min(22rem, calc(100vw - 3rem)); padding: 1rem 1.1rem; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--surface); box-shadow: 0 10px 30px rgb(10 25 28 / .2); }
.progression progress { width: 100%; accent-color: var(--action); }
/* Avancement d'un scan réseau du Parc, dans son panneau (pas le toast `.progression`). */
.scan-avancement progress { width: 100%; accent-color: var(--action); }

dialog { width: min(28rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: var(--rayon-l); background: var(--surface); color: var(--encre); box-shadow: 0 20px 50px rgb(10 25 28 / .3); }
dialog::backdrop { background: rgb(10 25 28 / .45); }

@media (max-width: 900px) {
  .app-fichiers { grid-template-columns: 1fr; gap: 1rem; }
  .app-nav { position: static; min-height: 0; }
  .app-nav ul { display: flex; overflow-x: auto; }
  .app-nav-pied { display: none; }
  .entete-liste { display: none; }
  .fichier { grid-template-columns: 1.75rem 2.6rem minmax(0, 1fr) auto; }
  .fichier .taille, .fichier .quand { display: none; }
  .fichier .etoile[aria-pressed="false"] { opacity: 1; }
}

/* ------------------------------------------------------------ éditeurs (organisation à la Euro-Office) */

/* L'éditeur occupe la fenêtre sous la barre de Fondation : en-tête, ruban,
   plan de travail, barre d'état. En pleine page, la barre s'efface. */
body:has(.editeur) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.editeur { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cadre-eo { flex: 1; min-height: 0; position: relative; }
.cadre-eo > iframe, .cadre-eo > #editeur { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* La barre ne colle plus en haut : c'est le corps qui ne défile pas. */
body:has(.editeur) .barre-haut { position: static; flex: none; }
body:has(.editeur) .moi-nom { display: none; }

.bouton-pleine-page {
  align-self: center;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--barre-doux);
  border-radius: var(--rayon-m);
  background: transparent;
  color: var(--barre-encre);
  cursor: pointer;
}
.bouton-pleine-page:hover { background: light-dark(#E2E8F0, var(--prusse-2)); color: var(--barre-encre-forte); }
.bouton-pleine-page svg.picto { width: 1.1rem; height: 1.1rem; }
.bouton-pleine-page[hidden] { display: none; }

/* La languette : un liseré au milieu du haut de la fenêtre, qui s'ouvre au survol. */
.languette-barre { display: none; }
.pleine-page .barre-haut { display: none; }
.pleine-page .languette-barre {
  display: block;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: .45rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 var(--rayon-m) var(--rayon-m);
  background: var(--prusse);
  color: #fff;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  opacity: .75;
  transition: height var(--duree-retour) var(--sortie), width var(--duree-retour) var(--sortie), opacity var(--duree-retour) var(--sortie);
}
.pleine-page .languette-barre span { display: block; padding: .45rem .9rem; opacity: 0; transition: opacity var(--duree-retour) var(--sortie); }
.pleine-page .languette-barre:hover, .pleine-page .languette-barre:focus-visible { width: 16rem; height: 2.1rem; opacity: 1; box-shadow: 0 4px 12px rgb(10 25 28 / .25); }
.pleine-page .languette-barre:hover span, .pleine-page .languette-barre:focus-visible span { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .languette-barre, .languette-barre span { transition: none !important; } }

.editeur-entete {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 3.25rem;
  padding: 0 1rem;
  background: var(--prusse);
  color: var(--prusse-encre);
}
.editeur-retour { display: grid; place-items: center; border-radius: var(--rayon-m); }
.editeur-retour img { display: block; }
.editeur-titre { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 1rem; }
.nom-doc input {
  width: auto;
  max-width: 40vw;
  padding: .2rem .4rem;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  font: 700 1.1rem/1.2 var(--texte);
}
.nom-doc input:hover { border-color: var(--prusse-2); }
.nom-doc input:focus-visible { border-color: var(--action); background: var(--prusse-2); outline: none; }
.editeur .etat-enregistrement { color: var(--prusse-doux); font-size: .88rem; white-space: nowrap; }
.editeur .etat-enregistrement.a-enregistrer { color: #fff; }
.editeur-actions { display: flex; align-items: center; gap: .4rem; }
.editeur-actions .outil { color: var(--prusse-encre); }
.editeur-actions .outil:hover { background: var(--prusse-2); color: #fff; }
.editeur-actions .bouton.discret { background: transparent; color: var(--prusse-encre); border-color: var(--prusse-doux); }
.editeur-actions .bouton.discret:hover { background: var(--prusse-2); color: #fff; }

/* Onglets du ruban : l'onglet ouvert se fond dans le ruban blanc, comme un intercalaire. */
.onglets-ruban { display: flex; gap: .15rem; padding: 0 1rem; background: var(--prusse); }
.onglets-ruban [role="tab"] {
  padding: .45rem 1rem;
  border: 0;
  border-radius: var(--rayon-m) var(--rayon-m) 0 0;
  background: transparent;
  color: var(--prusse-encre);
  font-weight: 600;
}
.onglets-ruban [role="tab"]:hover { background: var(--prusse-2); color: #fff; }
.onglets-ruban [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--encre); }
.onglets-ruban [role="tab"] { font-stretch: 108%; }
.ruban { background: var(--surface); border-bottom: 1px solid var(--trait); }
.ruban [role="tabpanel"] { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: .4rem .75rem; min-height: 3.6rem; }
.groupe-ruban { display: flex; align-items: center; gap: .15rem; padding: 0 .75rem; border-right: 1px solid var(--trait); }
.groupe-ruban:first-child { padding-left: 0; }
.groupe-ruban:last-child { border-right: 0; }
.separateur-ruban { width: 1px; align-self: stretch; margin: .3rem .35rem; background: var(--trait); }

button.outil, a.outil, summary.outil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: .3rem .5rem;
  border: 0;
  border-radius: var(--rayon-s);
  background: transparent;
  color: var(--encre);
  font: 600 .9rem/1.1 var(--texte);
  text-decoration: none;
  cursor: pointer;
}
button.outil:hover, a.outil:hover, summary.outil:hover { background: var(--papier); color: var(--encre); }
button.outil[aria-pressed="true"] { background: var(--action-doux); color: var(--action); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 35%, transparent); }
.outil .lettre, .outil b { font-size: 1.05rem; font-family: Georgia, "Times New Roman", serif; }
/* Bouton « grand » : icône au-dessus, libellé dessous, pour les actions qu'on lit. */
.outil.grand { flex-direction: column; gap: .15rem; min-width: 4.5rem; padding: .3rem .55rem; font-size: .78rem; font-weight: 500; }
.outil.grand svg.picto { width: 1.35rem; height: 1.35rem; }
.outil .pourcent, .outil .fx { font: 700 .95rem/1.35rem var(--texte); }
.fx { font-style: italic; font-family: Georgia, "Times New Roman", serif !important; }
.ruban details.menu { position: relative; display: flex; }
.ruban details.menu > summary.outil::after { display: none; }
.menu-fonctions > ul { top: 100%; left: 0; border-radius: var(--rayon-m); min-width: 16rem; }
.menu-fonctions small { color: var(--encre-2); font-weight: 400; margin-left: .35rem; }

/* Galerie de styles : chaque style se montre tel qu'il sera. */
.galerie-styles { gap: .35rem; }
.galerie-styles button {
  min-width: 5.5rem;
  height: 2.6rem;
  padding: 0 .65rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-s);
  background: var(--surface);
  color: var(--encre);
  font-family: var(--texte);
}
.galerie-styles button:hover { border-color: var(--trait-fort); background: var(--surface); color: var(--encre); }
.galerie-styles button[aria-pressed="true"] { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.galerie-styles .style-p { font-weight: 400; font-size: .92rem; }
.galerie-styles .style-h1 { font-weight: 800; font-size: 1.05rem; }
.galerie-styles .style-h2 { font-weight: 700; font-size: .98rem; }
.galerie-styles .style-h3 { font-weight: 700; font-size: .9rem; color: var(--encre-2); }

.bandeau-pertes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--avert) 40%, transparent);
  background: color-mix(in srgb, var(--avert) 12%, var(--surface));
  font-size: .9rem;
}
.bandeau-pertes p { margin: 0; max-width: none; }
.bandeau-pertes summary { cursor: pointer; color: var(--action); }
.bandeau-pertes ul { margin: .35rem 0 0; }

/* Plan de travail : la feuille A4 posée sur un bureau gris. */
.plan-travail { flex: 1; min-height: 0; overflow: auto; padding: 2rem 1.5rem 4rem; background: var(--quadrillage), color-mix(in srgb, var(--papier) 82%, var(--trait)); }
.page {
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  padding: 25mm 22mm;
  background: #fff;
  color: #1b1b1b;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 6px 24px rgb(0 0 0 / .08);
  font: 400 11pt/1.55 Calibri, Carlito, "Archivo", sans-serif;
}
.page:focus { outline: none; }
.page h1 { font-size: 18pt; font-weight: 700; margin: 0 0 8pt; letter-spacing: 0; }
.page h2 { font-size: 14pt; font-weight: 700; margin: 14pt 0 5pt; }
.page h3 { font-size: 12pt; font-weight: 700; margin: 12pt 0 4pt; }
.page p { margin: 0 0 8pt; max-width: none; }
.page ul, .page ol { margin: 0 0 8pt; padding-left: 0.7cm; }
@media (max-width: 900px) { .page { padding: 12mm 10mm; min-height: 0; } .plan-travail { padding: 1rem .5rem 3rem; } }

/* Tableur : zone de nom, fx, barre de formule. */
.barre-formule {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .75rem;
  border-bottom: 1px solid var(--trait);
  background: var(--surface);
}
.zone-nom input { width: 7rem; padding: .3rem .5rem; font: 700 .9rem var(--donnees); text-align: center; }
.barre-formule > .fx { color: var(--encre-2); padding: 0 .25rem; }
.champ-formule { flex: 1; }
.champ-formule input { padding: .3rem .55rem; font: 400 .92rem var(--donnees); }
.plan-tableur { padding: 0; background: var(--surface); }
.grille-cadre { min-height: 100%; }
table.grille { width: auto; border-collapse: separate; border-spacing: 0; }
.grille.glisse input { user-select: none; cursor: cell; }
.grille th, .grille td { padding: 0; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.grille tbody tr:hover { background: none; }
.grille tbody tr + tr td { border-top: 0; }
.grille thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 1.6rem;
  padding: 0 .4rem;
  background: var(--papier);
  color: var(--encre-2);
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}
.grille tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 2.75rem;
  padding: 0 .45rem;
  background: var(--papier);
  color: var(--encre-2);
  font-size: .78rem;
  font-weight: 600;
  text-align: right;
  vertical-align: middle;
}
.grille thead th:first-child { left: 0; z-index: 3; }
.grille th.sel { background: color-mix(in srgb, var(--action) 18%, var(--papier)); color: var(--encre); }
.grille td.sel { background: color-mix(in srgb, var(--action) 10%, transparent); }
.grille input {
  width: 7.5rem;
  height: 1.75rem;
  padding: 0 .45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 400 .9rem var(--texte);
  cursor: cell;
}
.grille td:nth-child(2) input { width: 10rem; }
.grille input.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.grille input.erreur { color: var(--crit); }
.grille input:focus { cursor: text; }
.grille input:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 0; }
/* Une formule se reconnaît à son coin cobalt, sans changer la couleur de la cellule. */
.grille td:has(input.formule) { background-image: linear-gradient(135deg, var(--action) 0 5px, transparent 5px); }
/* Figer la première ligne : elle reste sous les lettres de colonnes en faisant défiler. */
.grille.figee tbody tr:first-child > * { position: sticky; top: 1.6rem; z-index: 2; background: var(--surface); box-shadow: 0 2px 0 var(--trait-fort); }
.grille.figee tbody tr:first-child > th { z-index: 3; background: var(--papier); }

/* Barre d'état : discrète, toujours en bas. */
.barre-etat {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.25rem;
  padding: 0 .75rem;
  border-top: 1px solid var(--trait);
  background: var(--surface);
  color: var(--encre-2);
  font-size: .85rem;
}
.barre-etat-droite { margin-left: auto; display: flex; align-items: center; gap: .35rem; white-space: pre; }
.barre-etat .outil { min-width: 1.9rem; min-height: 1.9rem; padding: .15rem; }
.barre-etat output { min-width: 3.2rem; text-align: center; color: var(--encre); font-weight: 600; }
.barre-etat [data-statistiques] { color: var(--encre); }
.barre-etat .onglets { display: flex; align-self: stretch; border: 0; border-radius: 0; background: none; }
.barre-etat button.onglet {
  padding: 0 .9rem;
  border: 0;
  border-right: 1px solid var(--trait);
  border-radius: 0;
  background: transparent;
  color: var(--encre-2);
  font-weight: 600;
}
.barre-etat button.onglet:hover { background: var(--papier); color: var(--encre); }
.barre-etat button.onglet[aria-selected="true"] { background: var(--papier); color: var(--encre); box-shadow: inset 0 3px 0 var(--action); }
.barre-etat button.onglet.ajout { color: var(--action); font-size: 1.1rem; }

@media print {
  .barre-haut, .languette-barre, .editeur-entete, .onglets-ruban, .ruban, .bandeau-pertes, .barre-etat { display: none !important; }
  body:has(.editeur), .editeur { height: auto; overflow: visible; display: block; }
  .plan-travail { padding: 0; background: none; overflow: visible; }
  .page { box-shadow: none; width: auto; min-height: 0; padding: 0; zoom: 1 !important; }
}

/* ------------------------------------------------------------ accueil des documents */

.creer { margin-bottom: 2.5rem; }
.creer h2, .creer + section > h2 { margin-bottom: 1rem; }
.tuiles-creer { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.tuiles-creer form { margin: 0; }
button.tuile-creer {
  display: grid;
  justify-items: start;
  gap: .2rem;
  width: 15rem;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  text-align: left;
}
@media (hover: hover) and (pointer: fine) { button.tuile-creer:hover { border-color: var(--action); background: var(--surface); color: var(--encre); } }
.tuile-creer strong { margin-top: .6rem; font-size: var(--t1); }
.tuile-creer small { color: var(--encre-2); font-weight: 400; }
/* Aperçu d'une feuille vierge, dessiné en CSS : des lignes de texte, ou une grille. */
.apercu-feuille { position: relative; display: block; width: 100%; height: 8.5rem; border: 1px solid var(--trait); border-radius: var(--rayon-s); background: #fff; }
.apercu-texte { padding: 1.1rem 1.3rem; display: grid; align-content: start; gap: .55rem; }
.apercu-texte i { display: block; height: .32rem; border-radius: 1px; background: #d6dde0; }
.apercu-texte i:first-child { width: 55%; height: .55rem; background: var(--info); opacity: .7; margin-bottom: .2rem; }
.apercu-texte i:nth-child(4) { width: 80%; }
.apercu-texte i:last-child { width: 45%; }
.apercu-tableur {
  background:
    linear-gradient(var(--ok), var(--ok)) 0 0 / 100% .9rem no-repeat,
    repeating-linear-gradient(to right, transparent 0 3.2rem, #d6dde0 3.2rem calc(3.2rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 .9rem, #d6dde0 .9rem calc(.9rem + 1px)),
    #fff;
}
.apercu-tableur::after { content: ""; position: absolute; inset: 0 0 auto 0; height: .9rem; background: color-mix(in srgb, var(--ok) 25%, #fff); }

.cartes-docs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
a.carte-doc {
  display: grid;
  justify-items: center;
  gap: .3rem;
  height: 100%;
  padding: 1.1rem .8rem .9rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { a.carte-doc:hover { border-color: var(--action); color: var(--encre); } }
.carte-doc svg { width: 3.4rem; height: 4.1rem; margin-bottom: .3rem; }
.carte-doc strong { overflow-wrap: anywhere; }
.carte-doc small { color: var(--encre-2); }

/* ------------------------------------------------------------ intranet */

.intranet { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
@media (max-width: 1000px) { .intranet { grid-template-columns: 1fr; } }

/* À la une : la seule actualité en grand, marquée d'un trait cobalt. */
.a-la-une { padding: 0 0 1.5rem 1.5rem; border-left: 6px solid var(--action); }
.rubrique-une { margin: 0 0 .35rem; color: var(--action); font-weight: 700; font-size: .9rem; }
.a-la-une h2 { font-size: var(--t4); line-height: 1.08; letter-spacing: -0.03em; margin-bottom: .5rem; }
.a-la-une h2 a { color: var(--encre); text-decoration: none; }
.a-la-une h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.meta-actualite { color: var(--encre-2); font-size: .9rem; margin-bottom: 1rem; }
.actions-admin { margin-top: .5rem; font-size: .9rem; }

.cartes-actualites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
a.carte-actualite {
  display: grid;
  align-content: start;
  gap: .35rem;
  height: 100%;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--encre);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { a.carte-actualite:hover { border-color: var(--action); color: var(--encre); } }
.carte-actualite small { color: var(--encre-2); }
.carte-actualite strong { font-size: 1.1rem; line-height: 1.25; }
.carte-actualite span { color: var(--encre-2); font-size: .93rem; }

.encarts { display: grid; gap: 1.25rem; }
.encart { padding: 1.1rem 1.25rem; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--surface); }
.encart h2 { font-size: 1.05rem; margin-bottom: .75rem; }
.encart p { margin: .6rem 0 0; }
.tuiles-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tuiles-liens li { display: flex; align-items: center; gap: .5rem; }
.tuiles-liens li form { margin: 0 0 0 auto; font-size: .82rem; }
.tuiles-liens a { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; padding: .35rem; border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tuiles-liens a:hover { background: var(--papier); } }
.tuiles-liens a > span:last-child { display: grid; min-width: 0; }
.tuiles-liens small { color: var(--encre-2); }
.initiale {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--rayon-m);
  background: light-dark(hsl(var(--h, 180) 40% 90%), hsl(var(--h, 180) 25% 25%));
  color: light-dark(hsl(var(--h, 180) 50% 25%), hsl(var(--h, 180) 60% 85%));
  font-weight: 800;
}
.ajout-lien { margin-top: .75rem; }
.ajout-lien summary { cursor: pointer; color: var(--action); font-weight: 600; }
.ajout-lien form { margin-top: .75rem; }
.populaires { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }

/* Éditeurs sur petit écran : l'essentiel seulement dans l'en-tête
   (Télécharger reste dans l'onglet Fichier). */
@media (max-width: 700px) {
  .editeur-entete { gap: .5rem; padding: 0 .5rem; }
  .editeur-actions .bouton.discret, .editeur-actions .avatar { display: none; }
  .editeur-titre { flex-direction: column; align-items: flex-start; gap: 0; }
  .nom-doc input { max-width: 45vw; font-size: 1rem; }
  .editeur .etat-enregistrement { font-size: .75rem; }
  .editeur-actions button[data-enregistrer] { padding: .45rem .7rem; }
  .ruban [role="tabpanel"] { flex-wrap: nowrap; overflow-x: auto; }
  .groupe-ruban { flex: none; }
  .barre-etat [data-statistiques] { display: none; }
}

/* Configuration : une case par brique, son nom puis ce qu'elle apporte. */
.briques ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .25rem; }
label.brique { align-items: flex-start; gap: .75rem; padding: .55rem .5rem; border-radius: var(--rayon-m); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { label.brique:hover { background: var(--papier); } }
label.brique input { margin-top: .2rem; }
label.brique > span { display: grid; gap: .1rem; }
label.brique small { color: var(--encre-2); font-weight: 400; }

/* Dans la page d'un document, les titres gardent une largeur normale :
   c'est ainsi qu'ils apparaîtront dans Word ou LibreOffice. */
.page h1, .page h2, .page h3 { font-stretch: 100%; }

/* ------------------------------------------------------------ messagerie (courrier et calendrier)
   Disposition d'Outlook : rail des applications à gauche, ruban en haut, puis
   volets côte à côte. L'identité reste celle de Fondation : rail en bleu de
   Prusse comme la barre du haut, cobalt pour ce qui se clique. */

body:has(.messagerie) { height: 100dvh; overflow: hidden; }
body:has(.messagerie) .contenu { max-width: none; padding: 0; margin: 0; }
.messagerie {
  --hauteur-barre: calc(4rem + 1px);   /* barre du haut + son trait */
  display: grid;
  grid-template-columns: 4.5rem minmax(13rem, 15.5rem) minmax(20rem, 27rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "rail ruban ruban ruban" "rail dossiers liste lecture";
  height: calc(100dvh - var(--hauteur-barre));
  background: var(--papier);
}
.appli-agenda { grid-template-columns: 4.5rem minmax(14rem, 16.5rem) minmax(0, 1fr); grid-template-areas: "rail ruban ruban" "rail dossiers grille"; }
.messagerie[data-volet="masque"] { grid-template-columns: 4.5rem minmax(13rem, 15.5rem) minmax(0, 1fr) 0; }
.messagerie[data-volet="masque"] .volet-lecture { display: none; }
.messagerie[data-volet="masque"].avec-selection { grid-template-columns: 4.5rem minmax(13rem, 15.5rem) 0 minmax(0, 1fr); }
.messagerie[data-volet="masque"].avec-selection .volet-liste { display: none; }
.messagerie[data-volet="masque"].avec-selection .volet-lecture { display: block; }

.rail-apps { grid-area: rail; display: flex; flex-direction: column; gap: .25rem; padding: .6rem .35rem; background: var(--prusse); border-top: 1px solid var(--prusse-2); }
.rail-app { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .55rem .2rem; border-radius: var(--rayon-m); color: var(--prusse-encre); font-size: .72rem; font-weight: 600; text-decoration: none; }
.rail-app svg.picto { width: 1.5rem; height: 1.5rem; }
.rail-app:hover { background: var(--prusse-2); color: #fff; }
.rail-app.actif { background: var(--prusse-2); color: #fff; box-shadow: inset 3px 0 0 var(--repere); }

.ruban-messagerie { grid-area: ruban; min-width: 0; }
.ruban-messagerie .onglets-ruban { padding-top: .25rem; border-top: 1px solid var(--prusse-2); }
.ruban-messagerie .ruban [role="tabpanel"] { min-height: 4.1rem; flex-wrap: nowrap; overflow-x: auto; }
.ruban-messagerie .groupe-ruban { flex: none; }
.intitule-ruban { color: var(--encre-2); font-size: .8rem; margin-right: .35rem; }
button.nouveau-message { align-self: center; padding: .55rem 1rem; font-weight: 700; white-space: nowrap; }
button.nouveau-message svg.picto { width: 1.15rem; height: 1.15rem; flex: none; }
.messagerie [data-besoin-message] .outil { opacity: .45; pointer-events: none; }
.messagerie.avec-selection [data-besoin-message] .outil { opacity: 1; pointer-events: auto; }
.menu-deplacer > ul { max-height: 60vh; overflow: auto; }
.menu-deplacer button.lien { padding-left: calc(.7rem + var(--profondeur, 0) * .9rem) !important; }
/* Relève en cours : un trait qui court sous le ruban (transform seul). Mouvement réduit : trait fixe et libellé (S-P17). */
.ruban-messagerie { position: relative; }
.messagerie.htmx-request .ruban-messagerie::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--action); pointer-events: none; animation: releve 1100ms linear infinite; }
@keyframes releve { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(233.33%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .messagerie.htmx-request .ruban-messagerie::after { width: 100%; opacity: .6; transform: none; }
  .messagerie.htmx-request .ruban-messagerie::before { content: "Relève en cours…"; position: absolute; right: .75rem; bottom: 4px; color: var(--prusse-doux); font-size: .7rem; pointer-events: none; }
}

/* Volet des dossiers */
.volet-dossiers { grid-area: dossiers; overflow-y: auto; padding: .75rem .5rem 1.5rem; background: var(--surface); border-right: 1px solid var(--trait); }
.compte-courrier > summary { padding: .35rem .5rem; font-weight: 700; font-size: .85rem; color: var(--encre-2); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte-courrier ul { list-style: none; margin: .1rem 0 .8rem; padding: 0; }
a.dossier { display: flex; align-items: center; gap: .55rem; padding: .42rem .6rem .42rem calc(.6rem + var(--profondeur, 0) * .9rem); border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; font-size: .92rem; }
a.dossier svg.picto { width: 1.1rem; height: 1.1rem; flex: none; color: var(--encre-2); }
@media (hover: hover) and (pointer: fine) { a.dossier:hover { background: var(--papier); } }
a.dossier.actif { background: var(--action-doux); color: var(--action); font-weight: 700; }
a.dossier.actif svg.picto { color: var(--action); }
.nom-dossier { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.non-lus-dossier { color: var(--action); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.erreur-compte { margin: .2rem .5rem .5rem; padding: .4rem .55rem; border-radius: var(--rayon-s); background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); font-size: .8rem; overflow-wrap: anywhere; }
.gerer-comptes { padding: 0 .6rem; font-size: .85rem; }

/* Liste des messages */
.volet-liste { grid-area: liste; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-right: 1px solid var(--trait); }
.liste-entete { padding: .8rem 1rem .4rem; border-bottom: 1px solid var(--trait); }
.titre-dossier { margin: 0 0 .55rem; font-size: 1.15rem; font-stretch: 108%; }
.titre-dossier small { color: var(--action); font-size: .8rem; font-weight: 600; font-stretch: 100%; margin-left: .3rem; }
.recherche-courrier label { position: relative; display: block; }
.recherche-courrier svg.picto { position: absolute; left: .6rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1rem; color: var(--encre-2); }
.recherche-courrier input { width: 100%; padding: .45rem .6rem .45rem 2rem; border-radius: var(--rayon-m); }
.filtres-courrier { display: flex; gap: .15rem; margin-top: .45rem; overflow-x: auto; }
.filtres-courrier a { padding: .25rem .55rem; border-radius: 999px; color: var(--encre-2); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.filtres-courrier a:hover { background: var(--papier); color: var(--encre); }
.filtres-courrier a[aria-current] { background: var(--action-doux); color: var(--action); }
.liste-defilement { flex: 1; overflow-y: auto; }
.groupe-date { position: sticky; top: 0; z-index: 1; margin: 0; padding: .45rem 1rem .3rem; background: var(--surface); color: var(--encre-2); font-size: .78rem; font-weight: 700; font-stretch: 100%; border-bottom: 1px solid var(--trait); }
.ligne-message { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; padding: .65rem .75rem .65rem 1rem; border-bottom: 1px solid var(--trait); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ligne-message:hover { background: var(--papier); } }
.ligne-message:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.ligne-message.actif { background: var(--action-doux); }
.ligne-message.non-lu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--action); }
.ligne-message .avatar { width: 2.25rem; height: 2.25rem; }
.ligne-haut { display: flex; align-items: baseline; gap: .4rem; }
.expediteur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.non-lu .expediteur, .non-lu .objet { font-weight: 700; }
.non-lu .objet { color: var(--action); }
.marques { display: inline-flex; gap: .2rem; color: var(--encre-2); }
.marques svg.picto { width: .95rem; height: .95rem; }
.ligne-message time { color: var(--encre-2); font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.non-lu time { color: var(--action); font-weight: 600; }
.objet, .apercu-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.objet { font-size: .9rem; }
.apercu-message { color: var(--encre-2); font-size: .85rem; }
.messagerie[data-densite="compact"] .ligne-message { padding-block: .35rem; }
.messagerie[data-densite="compact"] .apercu-message, .messagerie[data-densite="compact"] .ligne-message .avatar { display: none; }
.messagerie[data-densite="compact"] .ligne-message { grid-template-columns: minmax(0, 1fr) auto; }
button.drapeau { align-self: start; min-height: 0; padding: .2rem; border: 0; background: none; color: var(--trait-fort); opacity: 0; }
.ligne-message:hover button.drapeau, button.drapeau[aria-pressed="true"] { opacity: 1; }
button.drapeau[aria-pressed="true"] { color: var(--crit); }
button.drapeau:hover { background: var(--papier); color: var(--crit); }
button.drapeau svg.picto { width: 1rem; height: 1rem; }
.avec-indicateur { background: color-mix(in srgb, var(--crit) 5%, var(--surface)); }
.liste-vide { padding: 3rem 1.5rem; text-align: center; }
.plus-anciens { display: block; margin: 1rem auto 1.5rem; }

/* Volet de lecture */
.volet-lecture { grid-area: lecture; overflow-y: auto; min-width: 0; background: var(--surface); }
.lecture-vide { display: grid; place-items: center; align-content: center; gap: .6rem; height: 100%; padding: 2rem; color: var(--encre-2); text-align: center; }
.lecture-vide > svg.picto { width: 3.5rem; height: 3.5rem; stroke-width: 1.2; color: var(--trait-fort); }
.lecture-vide.envoye > svg.picto { color: var(--ok); }
.lecture-vide .avertissement { max-width: 32rem; color: var(--avert); }
.lecture { padding: 1.25rem 1.75rem 2rem; }
.objet-lecture { margin: 0 0 1rem; font-size: 1.35rem; font-stretch: 108%; overflow-wrap: anywhere; }
.expediteur-lecture { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); }
.avatar.grand { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.qui p { margin: 0; }
.destinataires { font-size: .85rem; overflow-wrap: anywhere; }
.actions-lecture { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.actions-lecture time { font-size: .82rem; white-space: nowrap; }
.boutons-reponse { display: flex; gap: .1rem; }
.bandeau-images { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .9rem 0 0; padding: .55rem .8rem; border-radius: var(--rayon-m); background: var(--papier); font-size: .88rem; }
.bandeau-images p { margin: 0; flex: 1; min-width: 14rem; }
.pieces-jointes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.pieces-jointes a:not(.pp-bouton), .pieces-jointes .carte-piece { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .45rem; max-width: 16rem; padding: .45rem .7rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; font-size: .88rem; }
@media (hover: hover) and (pointer: fine) { .pieces-jointes a:not(.pp-bouton):hover { border-color: var(--action); } }
/* Pièce à indice PDF (EX-18) : carte sans lien, puis « Ouvrir » et « Télécharger » (S-P19). */
.pieces-jointes li > .pp-bouton { align-self: center; flex: none; }
.pieces-jointes .carte-piece { min-width: 0; }
.pieces-jointes svg.picto { grid-row: span 2; width: 1.1rem; height: 1.1rem; color: var(--encre-2); align-self: center; }
.pieces-jointes li { display: flex; gap: .3rem; }
.nom-piece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pieces-jointes small { color: var(--encre-2); }
/* Le message garde ses couleurs d'origine : on lui donne un papier blanc, même en mode sombre. */
iframe.corps-message { display: block; width: 100%; height: 60vh; margin-top: 1.1rem; border: 0; border-radius: var(--rayon-m); background: #fff; }

/* Rédaction */
.redaction-courriel { display: flex; flex-direction: column; min-height: 100%; }
.barre-redaction button.envoyer svg.picto, .barre-redaction .outil svg.picto { width: 1.1rem; height: 1.1rem; flex: none; }
.barre-redaction .joindre { display: inline-flex; flex-direction: row; align-items: center; font-weight: 600; }
.barre-redaction { display: flex; align-items: center; gap: .35rem; padding: .6rem 1rem; border-bottom: 1px solid var(--trait); }
.barre-redaction .espace { flex: 1; }
.joindre { cursor: pointer; }
.champs-redaction { padding: 0 1rem; }
.ligne-champ { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--trait); }
.ligne-champ > span { width: 3rem; flex: none; color: var(--encre-2); font-size: .88rem; }
.ligne-champ input, .ligne-champ select { flex: 1; min-width: 0; border: 0; background: transparent; padding: .45rem .2rem; box-shadow: none; }
.ligne-champ input:focus-visible, .ligne-champ select:focus-visible { outline: none; }
.ligne-champ:focus-within { border-bottom-color: var(--action); }
.objet-champ input { font-weight: 600; }
.pieces-choisies { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 1rem 0; padding: 0; list-style: none; font-size: .85rem; }
.pieces-choisies li { padding: .2rem .55rem; border-radius: 999px; background: var(--papier); }
.outils-redaction { display: flex; align-items: center; gap: .1rem; padding: .4rem .75rem; }
.zone-redaction { flex: 1; min-height: 18rem; margin: 0 1rem 1rem; padding: .9rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: #fff; color: #1b2333; font: 15px/1.55 system-ui, sans-serif; overflow-wrap: anywhere; }
.zone-redaction p { margin: 0; max-width: none; }
.zone-redaction:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.zone-redaction blockquote { margin: 0 0 0 .6em; padding-left: .8em; border-left: 3px solid #c9d2e3; color: #4a5468; }
.zone-redaction .signature { color: #4a5468; }
.erreur-envoi { margin: 0 1rem 1rem; padding: .55rem .8rem; border-radius: var(--rayon-m); background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }

.toast-courrier { position: fixed; z-index: 50; left: 50%; bottom: 1.5rem; translate: -50% 0; max-width: min(36rem, calc(100vw - 2rem)); padding: .7rem 1rem; border-radius: var(--rayon-m); background: var(--prusse); color: var(--prusse-encre); box-shadow: 0 10px 30px rgb(0 0 0 / .25); transition: opacity var(--duree-apparition) var(--sortie), translate var(--duree-apparition) var(--sortie), display var(--duree-apparition) allow-discrete; @starting-style { opacity: 0; translate: -50% .75rem; } }
.toast-courrier[hidden] { opacity: 0; translate: -50% .75rem; transition-duration: var(--duree-retour); }

/* Invitation dans un message */
.carte-invitation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--trait); border-left: 4px solid var(--action); border-radius: var(--rayon-m); background: var(--papier); }
.carte-invitation.perimee { border-left-color: var(--trait-fort); opacity: .8; }
.date-invitation svg.picto { width: 1.8rem; height: 1.8rem; color: var(--action); }
.nature-invitation { margin: 0; color: var(--encre-2); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.detail-invitation h2 { margin: .15rem 0 .35rem; font-size: 1.05rem; }
.detail-invitation p { display: flex; align-items: center; gap: .45rem; margin: .15rem 0; }
.detail-invitation svg.picto { width: 1rem; height: 1rem; color: var(--encre-2); }
.reponses-invitation { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
.reponses-invitation button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--action); }
.participants-invitation ul, .carte-apercu .participants { margin: .3rem 0 0; padding-left: 1rem; font-size: .88rem; }
.reponse-accepted small, li.reponse-accepted small { color: var(--ok); }
.reponse-declined small, li.reponse-declined small { color: var(--crit); }
.reponse-tentative small { color: var(--avert); }
.avertissement-invitation { color: var(--avert); font-weight: 600; }
.reponse-recue.reponse-accepted strong { color: var(--ok); }
.reponse-recue.reponse-declined strong { color: var(--crit); }

/* Comptes */
.intro-comptes { max-width: 46rem; }
.liste-comptes { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; max-width: 52rem; }
.carte-compte { display: grid; gap: .8rem; padding: 1rem 1.2rem; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--surface); }
.identite-compte { display: grid; gap: .15rem; }
.grille-serveur { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .6rem; margin: .6rem 0; }
.reglages-serveur > summary { cursor: pointer; font-weight: 600; }
.aide-fournisseur { margin: -.4rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--info); background: var(--papier); }
button.danger { color: var(--crit); }

/* ------------------------------------------------------------ calendrier */

.volet-agendas .titre-volet { margin: 1rem .5rem .3rem; font-size: .85rem; color: var(--encre-2); font-stretch: 100%; }
.mini-calendrier { padding: 0 .25rem; }
.mini-entete { display: flex; align-items: center; justify-content: space-between; padding: 0 .25rem .2rem; text-transform: capitalize; }
.mini-entete .outil { min-width: 1.8rem; min-height: 1.8rem; padding: .2rem; }
.mini-calendrier table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-calendrier th { color: var(--encre-2); font-size: .72rem; font-weight: 600; padding: .2rem 0; }
.mini-calendrier td { padding: 1px; text-align: center; }
button.mini-jour { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin: 0 auto; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre); font: 500 .8rem var(--texte); font-variant-numeric: tabular-nums; }
button.mini-jour:hover { background: var(--papier); color: var(--encre); }
button.mini-jour.hors-mois { color: var(--muet); }
button.mini-jour.choisi { background: var(--action-doux); color: var(--action); font-weight: 700; }
button.mini-jour.aujourdhui { background: var(--action); color: var(--action-encre); font-weight: 700; }
.liste-agendas { list-style: none; margin: 0; padding: 0 .5rem; }
.liste-agendas li { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; }
.pastille { display: inline-block; width: .8rem; height: .8rem; flex: none; border-radius: 3px; background: var(--c, var(--action)); }
.nouvel-agenda, .aide-caldav { margin: .8rem .5rem 0; font-size: .88rem; }
.nouvel-agenda > summary, .aide-caldav > summary { cursor: pointer; color: var(--action); font-weight: 600; }
.aide-caldav code { overflow-wrap: anywhere; }

.volet-grille { grid-area: grille; min-width: 0; min-height: 0; background: var(--surface); }
.grille-agenda { display: flex; flex-direction: column; height: 100%; }
.barre-agenda { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--trait); }
.fleches { display: inline-flex; }
.titre-periode { margin: 0; font-size: 1.15rem; font-stretch: 108%; text-transform: capitalize; }

.semaine { display: flex; flex-direction: column; flex: 1; min-height: 0; --colonne-heures: 3.6rem; }
/* Même gouttière de défilement que la grille horaire, pour que les colonnes restent alignées. */
.entetes-jours, .ligne-journee { display: grid; grid-template-columns: var(--colonne-heures) repeat(var(--jours), minmax(0, 1fr)); border-bottom: 1px solid var(--trait); overflow-y: hidden; scrollbar-gutter: stable; }
.entete-jour { display: flex; align-items: baseline; justify-content: center; gap: .35rem; min-height: 0; padding: .45rem 0; border: 0; border-left: 1px solid var(--trait); border-radius: 0; background: none; color: var(--encre-2); font-weight: 500; }
.entete-jour strong { font-size: 1.15rem; color: var(--encre); }
.entete-jour:hover { background: var(--papier); color: var(--encre); }
.entete-jour.aujourdhui { box-shadow: inset 0 3px 0 var(--action); color: var(--action); }
.entete-jour.aujourdhui strong { color: var(--action); }
.coin { display: grid; place-items: end center; padding-bottom: .3rem; color: var(--encre-2); font-size: .7rem; }
.cellule-journee { display: flex; flex-direction: column; gap: 2px; min-height: 1.8rem; padding: 2px; border-left: 1px solid var(--trait); cursor: copy; }
.defilement-heures { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.corps-semaine { display: grid; grid-template-columns: var(--colonne-heures) repeat(var(--jours), minmax(0, 1fr)); height: calc(24 * 3.2rem); }
.colonne-heures .heure { height: 3.2rem; position: relative; }
.colonne-heures .heure span { position: absolute; top: -.55rem; right: .45rem; color: var(--encre-2); font-size: .72rem; font-variant-numeric: tabular-nums; }
.colonne-heures .heure:first-child span { display: none; }
/* Lignes des heures (pleines) et des demi-heures (pointillées), dessinées en fond. */
.colonne-jour {
  position: relative;
  border-left: 1px solid var(--trait);
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(3.2rem - 1px), var(--trait) calc(3.2rem - 1px) 3.2rem),
    repeating-linear-gradient(to bottom, transparent 0 calc(1.6rem - 1px), color-mix(in srgb, var(--trait) 55%, transparent) calc(1.6rem - 1px) 1.6rem);
  cursor: copy;
  touch-action: none;
}
.colonne-jour.weekend, .case-mois.weekend { background-color: color-mix(in srgb, var(--papier) 60%, transparent); }
.colonne-jour.aujourdhui { background-color: color-mix(in srgb, var(--action) 4%, transparent); }
.maintenant { position: absolute; left: 0; right: 0; height: 2px; background: var(--crit); pointer-events: none; z-index: 3; }
.maintenant::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--crit); }
.selection-creneau { position: absolute; left: 2px; right: 2px; border-radius: var(--rayon-s); background: color-mix(in srgb, var(--action) 22%, transparent); outline: 1px solid var(--action); pointer-events: none; z-index: 4; }

/* Événement : fond teinté de la couleur de l'agenda, liseré plein à gauche. */
button.evt-agenda {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 0;
  padding: .15rem .35rem;
  border: 0;
  border-left: 3px solid var(--c);
  border-radius: var(--rayon-s);
  background: color-mix(in srgb, var(--c) 18%, var(--surface));
  color: var(--encre);
  font: 500 .78rem/1.25 var(--texte);
  text-align: left;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 0 0 1px var(--surface);
}
button.evt-agenda:hover { background: color-mix(in srgb, var(--c) 30%, var(--surface)); color: var(--encre); }
button.evt-agenda strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
button.evt-agenda span { color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
button.evt-agenda.court { flex-direction: row; align-items: center; }
button.evt-agenda.provisoire { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
button.evt-agenda.journee { position: static; width: 100%; padding: .2rem .45rem; background: var(--c); color: #fff; border-left: 0; white-space: nowrap; text-overflow: ellipsis; }
button.evt-agenda.journee:hover { filter: brightness(1.08); color: #fff; }
a.evt-agenda.partage, span.evt-agenda.partage { display: block; box-sizing: border-box; cursor: default; width: 100%; padding: .2rem .45rem; border-left: 3px solid var(--c); border-radius: var(--rayon-s); background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--encre); font: 500 .78rem/1.25 var(--texte); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.evt-agenda.partage:hover, span.evt-agenda.partage:hover { background: color-mix(in srgb, var(--c) 30%, var(--surface)); color: var(--encre); }
a.evt-agenda.partage.provisoire { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0 6px, var(--surface) 6px 12px); }
a.evt-agenda.partage.bloc, span.evt-agenda.partage.bloc { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: .15rem .35rem; z-index: 2; box-shadow: 0 0 0 1px var(--surface); white-space: normal; }
a.evt-agenda.partage.bloc.court, span.evt-agenda.partage.bloc.court { flex-direction: row; align-items: center; }
a.evt-agenda.partage.bloc span, span.evt-agenda.partage.bloc span { color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
a.evt-agenda.partage.ligne, span.evt-agenda.partage.ligne { display: flex; align-items: center; gap: .3rem; padding: .1rem .3rem; border-left: 0; background: none; }
a.evt-agenda.partage.ligne .pastille, span.evt-agenda.partage.ligne .pastille { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
button.evt-agenda.ligne { position: static; flex-direction: row; align-items: center; gap: .3rem; width: 100%; padding: .1rem .3rem; border-left: 0; background: none; white-space: nowrap; }
button.evt-agenda.ligne:hover { background: var(--papier); }
button.evt-agenda.ligne .pastille { width: .55rem; height: .55rem; border-radius: 50%; }
.heure-evt { color: var(--encre-2); font-variant-numeric: tabular-nums; }

.mois { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.entetes-mois, .semaine-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.entetes-mois div { padding: .35rem .5rem; color: var(--encre-2); font-size: .8rem; border-bottom: 1px solid var(--trait); }
.semaine-mois { flex: 1; min-height: 0; border-bottom: 1px solid var(--trait); }
.case-mois { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: .2rem .25rem; border-left: 1px solid var(--trait); overflow: hidden; cursor: copy; }
.case-mois:first-child { border-left: 0; }
.case-mois.hors-mois { color: var(--muet); background-color: color-mix(in srgb, var(--papier) 70%, transparent); }
button.numero-jour { align-self: flex-start; min-width: 1.7rem; min-height: 1.7rem; padding: 0 .3rem; border: 0; border-radius: 999px; background: none; color: inherit; font-weight: 600; font-size: .85rem; }
button.numero-jour:hover { background: var(--papier); color: var(--encre); }
.case-mois.aujourdhui button.numero-jour { background: var(--action); color: var(--action-encre); }
.plus-evenements { align-self: flex-start; font-size: .78rem; padding: 0 .3rem; }

dialog.apercu-evenement { width: min(22rem, calc(100vw - 24px)); padding: 0; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--surface); color: var(--encre); box-shadow: 0 18px 40px rgb(10 20 40 / .22); z-index: 30; }
.carte-apercu { padding: .9rem 1rem 1rem; border-top: 5px solid var(--c, var(--action)); border-radius: var(--rayon-l) var(--rayon-l) 0 0; }
.carte-apercu header, .editeur-evenement header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.carte-apercu h2 { margin: 0 0 .5rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.carte-apercu p { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .9rem; }
.carte-apercu p svg.picto { width: 1rem; height: 1rem; flex: none; color: var(--encre-2); }
.description-evenement { white-space: pre-wrap; display: block !important; padding-top: .4rem; border-top: 1px solid var(--trait); }
.carte-apercu footer { display: flex; gap: .4rem; margin-top: .9rem; }
.supprimer-serie > ul { bottom: 100%; top: auto !important; border-radius: var(--rayon-m) !important; }

dialog.dialogue-evenement { width: min(40rem, calc(100vw - 24px)); padding: 0; border: 0; border-radius: var(--rayon-l); background: var(--surface); color: var(--encre); box-shadow: 0 24px 60px rgb(10 20 40 / .3); }
dialog.dialogue-evenement::backdrop { background: rgb(10 20 40 / .35); }
.editeur-evenement { display: grid; gap: .1rem; padding: 1rem 1.25rem 1.25rem; }
.editeur-evenement h2 { margin: 0; font-size: 1rem; color: var(--encre-2); font-stretch: 100%; }
.champ-titre input { width: 100%; margin: .4rem 0 .3rem; padding: .4rem .1rem; border: 0; border-bottom: 2px solid var(--trait); border-radius: 0; background: transparent; font-size: 1.35rem; font-weight: 700; box-shadow: none; }
.champ-titre input:focus-visible { outline: none; border-bottom-color: var(--action); }
.editeur-evenement .ligne-champ { border-bottom: 0; align-items: flex-start; padding: .35rem 0; gap: .7rem; }
.editeur-evenement .ligne-champ > svg.picto { width: 1.15rem; height: 1.15rem; margin-top: .55rem; flex: none; color: var(--encre-2); }
.editeur-evenement .ligne-champ input, .editeur-evenement .ligne-champ select, .editeur-evenement textarea { border: 1px solid var(--trait); border-radius: var(--rayon-s); background: var(--surface); padding: .4rem .55rem; }
.editeur-evenement .ligne-champ > label { flex: 1; display: flex; align-items: center; gap: .4rem; }
.grille-horaires { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: 1; }
.grille-horaires .a { color: var(--encre-2); }
.grille-horaires .case { display: flex; align-items: center; gap: .35rem; margin-left: .5rem; }
.editeur-evenement textarea { flex: 1; width: 100%; resize: vertical; font: inherit; }
.note-serie { margin: 0 0 0 1.9rem; font-size: .85rem; }
.editeur-evenement footer { display: flex; gap: .5rem; margin-top: .6rem; }
.editeur-evenement .erreur-envoi { margin: .3rem 0 0; }

@media (max-width: 1100px) {
  .messagerie { grid-template-columns: 4.5rem minmax(0, 22rem) minmax(0, 1fr); grid-template-areas: "rail ruban ruban" "rail liste lecture"; }
  .appli-courrier .volet-dossiers { display: none; }
  .appli-agenda { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "rail ruban" "rail grille"; }
  .appli-agenda .volet-agendas { display: none; }
}
@media (max-width: 720px) {
  .messagerie { --hauteur-barre: 3.25rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "rail" "ruban" "liste"; }
  .rail-apps { flex-direction: row; justify-content: center; padding: .3rem; }
  .rail-app { flex-direction: row; gap: .4rem; padding: .35rem .8rem; }
  .appli-courrier .volet-lecture { display: none; }
  .appli-courrier.avec-selection { grid-template-areas: "rail" "ruban" "lecture"; }
  .appli-courrier.avec-selection .volet-liste { display: none; }
  .appli-courrier.avec-selection .volet-lecture { display: block; }
  .appli-agenda { grid-template-areas: "rail" "ruban" "grille"; grid-template-columns: minmax(0, 1fr); }
  .lecture { padding: 1rem; }
  .expediteur-lecture { grid-template-columns: auto minmax(0, 1fr); }
  .actions-lecture { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .grille-serveur { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- administration */

.administration { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.menu-admin { position: sticky; top: calc(var(--hauteur-barre, 3.75rem) + 1rem); }
.menu-admin ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .15rem; }
.titre-menu-admin { margin: 0 0 .4rem; font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.menu-admin a { display: block; padding: .45rem .7rem; border-radius: var(--rayon-s); color: var(--encre); text-decoration: none; border-left: 3px solid transparent; }
@media (hover: hover) and (pointer: fine) { .menu-admin a:hover { background: var(--surface); } }
.menu-admin a[aria-current="page"] { background: var(--surface); border-left-color: var(--action); font-weight: 600; }
.corps-admin { min-width: 0; }
.corps-admin .formulaire { max-width: 52rem; }
@media (max-width: 860px) {
  .administration { grid-template-columns: 1fr; gap: 1rem; }
  .menu-admin { position: static; }
  .menu-admin ul { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }
  .menu-admin a { border-left: 0; border-bottom: 3px solid transparent; }
  .menu-admin a[aria-current="page"] { border-bottom-color: var(--action); }
}
label.case:has(> small) { flex-wrap: wrap; }
label.case > small { flex-basis: 100%; padding-left: 1.6rem; color: var(--encre-2); font-weight: 400; }
.selectionnable { user-select: all; overflow-wrap: anywhere; }
.etapes-certificat { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.cadre-ovh { border: 1px solid var(--trait); border-radius: var(--rayon-m); padding: .75rem 1rem 1rem; display: grid; gap: .75rem; margin: 0; }
.cadre-ovh legend { padding: 0 .35rem; font-weight: 600; }
.actions-etat { margin-top: 1rem; }
.consignes-autorite { display: grid; gap: .5rem; margin-top: 1rem; }
.consignes-autorite details { border: 1px solid var(--trait); border-radius: var(--rayon-m); padding: .6rem 1rem; }
.consignes-autorite summary { cursor: pointer; font-weight: 600; }
.consignes-autorite ol { margin: .6rem 0 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.empreinte { overflow-wrap: anywhere; }
.journal-certificat { margin-top: .75rem; }
.journal-certificat pre { margin: .5rem 0 0; padding: .75rem; max-height: 18rem; overflow: auto; background: var(--papier); border-radius: var(--rayon-s); font-size: .85rem; white-space: pre-wrap; }
.actions-compte { white-space: nowrap; text-align: right; }
.actions-compte > * { display: inline-block; vertical-align: top; margin-left: .5rem; }
.menu-mot-de-passe[open] { display: block; white-space: normal; text-align: left; margin-bottom: .5rem; }
.menu-mot-de-passe summary { list-style: none; cursor: pointer; color: var(--action); }
.menu-mot-de-passe summary::-webkit-details-marker { display: none; }
.menu-mot-de-passe .formulaire { margin-top: .5rem; min-width: 16rem; }

/* ---------------------------------------------------------------- éditeur de texte */
.nom-fixe { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruban-texte { display: flex; flex-wrap: wrap; gap: .5rem; }
.zone-texte { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--papier); }
.zone-texte[data-mode="saisie"] { grid-template-columns: 1fr; }
.zone-texte[data-mode="saisie"] .apercu-markdown { display: none; }
.zone-texte[data-mode="apercu"] { grid-template-columns: 1fr; }
.zone-texte[data-mode="apercu"] textarea { display: none; }
.zone-texte textarea {
  resize: none; border: 0; border-right: 1px solid var(--trait); padding: 1.5rem 2rem; margin: 0;
  font: 1rem/1.6 "Atkinson Hyperlegible Mono", ui-monospace, monospace; background: var(--surface); color: var(--encre);
  outline: none; width: 100%; height: 100%; box-sizing: border-box;
}
.zone-texte[data-mode="saisie"] textarea { max-width: 60rem; justify-self: center; border-right: 0; }
.apercu-markdown { overflow: auto; padding: 1.5rem 2rem; background: var(--surface); color: var(--encre); }
.cadre-diagramme { flex: 1; width: 100%; border: 0; display: block; }

/* Un pictogramme dans un bouton : à la taille du texte, aligné avec lui. */
.bouton:has(> svg.picto), button:has(> svg.picto) { display: inline-flex; align-items: center; gap: .4rem; }
:is(.bouton, button) > svg.picto { flex: none; width: 1.05rem; height: 1.05rem; }

/* ------------------------------------------------------------ aide (wiki) */

/* Trois colonnes, comme un manuel ouvert : le plan à gauche, la page au milieu,
   ce qui l'entoure (sommaire, étiquettes, liens entrants) dans la marge. */
.wiki { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 15rem; gap: 2.25rem; align-items: start; }
.wiki-nav { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; display: grid; gap: .75rem; font-size: .93rem; }
.wiki-chercher input { width: 100%; padding: .45rem .65rem; }
.wiki-nav-accueil { font-weight: 700; text-decoration: none; color: var(--encre); padding: .3rem .5rem; border-radius: var(--rayon-m); }
@media (hover: hover) and (pointer: fine) { .wiki-nav-accueil:hover { background: var(--surface); } }
.wiki-arbre ul { list-style: none; margin: 0; padding: 0; }
.wiki-arbre ul ul { margin-left: .7rem; padding-left: .55rem; border-left: 1px solid var(--trait); }
.wiki-arbre a, .wiki-arbre .nav-dossier { display: block; padding: .28rem .5rem; border-radius: var(--rayon-s); color: var(--encre); text-decoration: none; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .wiki-arbre a:hover { background: var(--surface); } }
.wiki-arbre a[aria-current="page"] { background: var(--surface); color: var(--action); font-weight: 700; box-shadow: inset 3px 0 0 var(--action); }
.wiki-arbre summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.wiki-arbre summary::-webkit-details-marker { display: none; }
.wiki-arbre summary::before { content: ""; flex: none; width: .4rem; height: .4rem; margin: 0 .2rem 0 .3rem; border: solid var(--encre-2); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform var(--duree-retour); }
.wiki-arbre details[open] > summary::before { transform: rotate(45deg); }
.wiki-arbre summary > * { flex: 1; font-weight: 600; }
.wiki-nav-pied { list-style: none; margin: .5rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--trait); display: grid; gap: .1rem; }
.wiki-nav-pied a { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: var(--rayon-s); color: var(--encre-2); text-decoration: none; }
.wiki-nav-pied a:hover { background: var(--surface); color: var(--encre); }
.wiki-nav-pied svg.picto { width: 1.05rem; height: 1.05rem; }

.fil-wiki { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; font-size: .9rem; }
.fil-wiki a { color: var(--encre-2); text-decoration: none; }
.fil-wiki a:hover { color: var(--action); text-decoration: underline; }
.fil-wiki .sep { color: var(--trait-fort); }
.wiki-entete { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); }
.wiki-entete h1 { margin: 0; font-size: var(--t3); letter-spacing: -0.02em; line-height: 1.15; }
.wiki-description { margin: .5rem 0 0; color: var(--encre-2); font-size: 1.1rem; }
.wiki-contenu h2, .wiki-contenu h3 { scroll-margin-top: 5rem; }
.wiki-contenu img { max-width: 100%; height: auto; border-radius: var(--rayon-m); border: 1px solid var(--trait); }
/* Un lien vers une page qui n'existe pas encore : rouge et pointillé, comme dans tout wiki. */
.prose a.lien-absent { color: var(--crit); text-decoration: underline dashed; text-underline-offset: .2em; }
.wiki-pied { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--trait); }

.wiki-marge { position: sticky; top: 5.5rem; display: grid; gap: 1.25rem; font-size: .93rem; }
.wiki-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.wiki-actions .bouton { display: inline-flex; align-items: center; gap: .4rem; }
.wiki-actions svg.picto { width: 1rem; height: 1rem; }
.wiki-bloc h2 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; color: var(--encre-2); }
.wiki-bloc.details { margin: 0; display: block; }
.wiki-bloc.details dt { margin: 0 0 .1rem; font-size: .8rem; font-weight: 700; color: var(--encre-2); }
.wiki-bloc.details dd { margin: 0 0 .75rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0 0 0 .75rem; border-left: 2px solid var(--trait); display: grid; gap: .3rem; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { color: var(--action); text-decoration: underline; }
.sommaire .niveau-3 { padding-left: .8rem; font-size: .88rem; }
.etiquettes { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.etiquette { display: inline-flex; align-items: baseline; gap: .3rem; padding: .15rem .55rem; border: 1px solid var(--trait-fort); border-radius: 999px; color: var(--encre); font-size: .85rem; text-decoration: none; }
.etiquette:hover { border-color: var(--action); color: var(--action); }
.etiquette[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--action-encre); }
.etiquette small { color: inherit; opacity: .7; }
.wiki-supprimer button { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.wiki-supprimer svg.picto { width: 1rem; height: 1rem; }

.wiki-absente { max-width: 40rem; padding: 2rem 0; }
.wiki-absente h1 { margin: 0 0 .75rem; font-size: var(--t2); }
.wiki-absente p { margin: 0 0 1rem; }
.wiki-absente h2 { margin: 2.25rem 0 .6rem; font-size: var(--t1); }
.wiki-absente .bouton { display: inline-flex; align-items: center; gap: .4rem; }

.wiki-accueil { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.25rem; align-items: start; margin-top: 1.5rem; }
.rubriques { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; align-items: start; }
.rubrique { padding: 1rem 1.15rem 1.1rem; border: 1px solid var(--trait); border-top: 3px solid var(--prusse); border-radius: var(--rayon-l); background: var(--surface); }
.rubrique h2 { margin: 0 0 .7rem; font-size: var(--t1); }
.rubrique h2 a { color: var(--encre); text-decoration: none; }
.rubrique .liste-simple { gap: .4rem; }
.ajout-rubrique { font-size: .88rem; }
.recentes-wiki li { flex-direction: column; align-items: flex-start; gap: 0; }

.wiki-editeur .wiki-proprietes { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; margin-bottom: 1rem; max-width: none; }
.wiki-editeur .champ-titre, .wiki-editeur .case { grid-column: 1 / -1; }
.champ-adresse { display: flex; align-items: stretch; }
.champ-adresse .prefixe { display: grid; place-items: center; padding: 0 .55rem; border: 1px solid var(--trait-fort); border-right: 0; border-radius: var(--rayon-s) 0 0 var(--rayon-s); background: var(--papier); color: var(--encre-2); font: 400 .9rem var(--donnees); }
.champ-adresse input { flex: 1; min-width: 0; border-radius: 0 var(--rayon-s) var(--rayon-s) 0; font-family: var(--donnees); }
.wiki-editeur .ruban { border: 1px solid var(--trait); border-bottom: 0; border-radius: var(--rayon-m) var(--rayon-m) 0 0; }
.wiki-editeur .ruban .outil { gap: .35rem; }
.wiki-editeur .zone-texte { height: 62vh; min-height: 22rem; border: 1px solid var(--trait); border-radius: 0 0 var(--rayon-m) var(--rayon-m); overflow: hidden; }
.wiki-editeur .apercu-markdown img { max-width: 100%; }
.wiki-editeur [data-etat] { margin-left: auto; align-self: center; color: var(--encre-2); font-size: .88rem; }
.wiki-editeur .zone-texte + .formulaire { margin-top: 1rem; }
.wiki-raison { margin-top: 1rem; max-width: 42rem; }
.choix-pages { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-y: auto; display: grid; gap: .1rem; }
.choix-pages button.lien { display: grid; width: 100%; padding: .4rem .5rem; border-radius: var(--rayon-s); color: var(--encre); text-align: left; text-decoration: none; }
.choix-pages button.lien:hover { background: var(--papier); }
.choix-pages small { color: var(--encre-2); font-family: var(--donnees); font-size: .8rem; }

.wiki-historique { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.versions table { width: 100%; table-layout: fixed; }
.versions th:nth-child(-n+2), .versions td:nth-child(-n+2) { width: 3.5rem; text-align: center; }
.versions th:last-child, .versions td:last-child { width: 3.5rem; }
.versions td { vertical-align: top; overflow-wrap: anywhere; }
.versions tr.choisie { background: var(--action-doux); }
.versions button { margin-top: .75rem; }
.comparaison h2 { margin-top: 0; font-size: var(--t1); }
.diff { margin: 0; padding: .75rem 0; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); font: .88rem/1.55 var(--donnees); white-space: pre-wrap; overflow-wrap: anywhere; }
.diff > * { display: block; padding: 0 1rem; text-decoration: none; }
.diff ins { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--encre); }
.diff del { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--encre); }
.diff > span { color: var(--encre-2); }
.diff .coupure { text-align: center; }
.comparaison dd del { color: var(--crit); }
.comparaison dd ins { color: var(--ok); text-decoration: none; }
.source-version { max-height: 30rem; overflow: auto; white-space: pre-wrap; font: .85rem/1.5 var(--donnees); }

@media (max-width: 1200px) {
  .wiki { grid-template-columns: 14rem minmax(0, 1fr); }
  .wiki-marge { grid-column: 2; position: static; }
}
@media (max-width: 900px) {
  .wiki, .wiki-accueil, .wiki-historique { grid-template-columns: 1fr; }
  .wiki-nav, .wiki-marge { position: static; max-height: none; grid-column: auto; }
  .wiki-editeur .wiki-proprietes { grid-template-columns: 1fr; }
  .wiki-editeur .zone-texte { grid-template-columns: 1fr; }
  .wiki-editeur .apercu-markdown { display: none; }
}

/* ------------------------------------------------------------ dépôts et sauvegardes des postes */

pre.commande { margin: 0 0 1rem; font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; color: light-dark(#2B2F36, #fff); }
code.empreinte { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fil-sauvegarde { margin: -1rem 0 1rem; color: var(--encre-2); overflow-wrap: anywhere; }
.fil-sauvegarde [aria-current] { color: var(--encre); font-weight: 600; }

/* Double authentification : QR code à scanner et clé à saisir à la main. */
.qr-totp { margin: .5rem 0 1rem; width: 13rem; padding: .5rem; background: #fff; border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); }
.qr-totp svg { display: block; width: 100%; height: auto; }
.secret-totp { word-break: break-all; letter-spacing: .08em; font-size: 1.05rem; }
/* Double authentification native : page Mon compte, codes de secours, connexion. */
.double-auth { max-width: 40rem; }
.codes-secours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; margin: .75rem 0 1rem; padding: .85rem 1rem .85rem 2.4rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-s); background: var(--surface); letter-spacing: .06em; }
.codes-secours li { padding-left: .2rem; white-space: nowrap; }
@media (max-width: 480px) { .codes-secours { grid-template-columns: minmax(0, 1fr); } }
.pp-cx-secours { margin-top: var(--e3); font-size: var(--t-s); }
.pp-cx-secours > summary { cursor: pointer; color: var(--action); }
.pp-cx-secours[open] > summary { margin-bottom: var(--e3); }
.pp-cx-carte .qr-totp { margin-inline: auto; }

/* ---------------------------------------------------------------- Visio */
.visio-accueil { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1rem; align-items: start; }
.visio-creation { display: grid; gap: 1rem; }
.liste-salons { list-style: none; margin: 0; padding: 0; }
.liste-salons a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom quand" "apercu non-lus"; gap: .1rem .75rem; padding: .6rem .5rem; border-bottom: 1px solid var(--trait); color: inherit; text-decoration: none; border-radius: var(--rayon-s); }
@media (hover: hover) and (pointer: fine) { .liste-salons a:hover { background: var(--action-doux); } }
.salon-nom { grid-area: nom; font-weight: 600; }
.salon-apercu { grid-area: apercu; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-quand { grid-area: quand; font-size: .85rem; }
.compteur-non-lus { grid-area: non-lus; justify-self: end; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--action); color: var(--action-encre); font-size: .8rem; font-weight: 700; text-align: center; }

.visio-salon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: 1rem; align-items: start; }
.discussion { display: flex; flex-direction: column; height: calc(100dvh - var(--hauteur-barre, 3.75rem) - 9rem); min-height: 22rem; padding: 0; overflow: hidden; }
.fil-messages { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overscroll-behavior: contain; }
.fil-messages .bulle { position: relative; max-width: 46rem; padding: .45rem .7rem; border-radius: var(--rayon-l); background: var(--papier); }
.fil-messages .bulle.moi { align-self: flex-end; background: var(--action-doux); }
.fil-messages .bulle.systeme { align-self: center; background: none; padding: 0; font-size: .85rem; color: var(--muet); }
.fil-messages .bulle p { margin: 0; }
.bulle-entete { font-size: .88rem; }
.bulle .prose > :first-child { margin-top: .15rem; }
.bulle .prose > :last-child { margin-bottom: 0; }
.bulle-cite { margin: .25rem 0; padding: .15rem .5rem; border-left: 3px solid var(--trait-fort); font-size: .88rem; color: var(--muet); }
.bulle-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
/* Actions au survol : elles flottent sur le haut de la bulle sans réserver de place. */
.bulle-actions { position: absolute; top: -.95rem; right: .5rem; display: none; opacity: 0; gap: .2rem; transition: opacity var(--duree-retour) var(--sortie), display var(--duree-retour) allow-discrete; padding: .15rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); box-shadow: 0 2px 6px color-mix(in srgb, var(--encre) 12%, transparent); }
.bulle:focus-within .bulle-actions { display: flex; opacity: 1; @starting-style { opacity: 0; } }
@media (hover: hover) { .bulle:hover .bulle-actions { display: flex; opacity: 1; @starting-style { opacity: 0; } } }
.bulle-actions .discret { padding: .05rem .4rem; font-size: .82rem; }
/* Écran tactile : les actions n'apparaissent que sur la bulle touchée (la bulle est focalisable, tabindex="0"). */
@media (hover: none) { .bulle-actions { position: static; margin-top: .3rem; border: 0; box-shadow: none; padding: 0; background: none; } .fil-messages .bulle:focus { outline: none; } .fil-messages .bulle:focus-visible { outline: 2px solid var(--action); } }
.reaction { padding: .05rem .4rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--encre); font-size: .85rem; line-height: 1.4; cursor: pointer; }
.reaction.mienne { border-color: var(--action); background: var(--action-doux); }
.composeur { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .75rem; border-top: 1px solid var(--trait); }
.composeur #reponse-cible { grid-column: 1 / -1; margin: 0; }
.composeur textarea { resize: vertical; min-height: 2.6rem; max-height: 12rem; }
.participants-salon ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.participants-salon li { padding: .25rem 0; }
.participants-salon form.en-ligne { display: inline; }
.reglages-salon { margin: 1rem 0; }

@media (max-width: 52rem) {
  .visio-accueil, .visio-salon { grid-template-columns: 1fr; }
  .discussion { height: calc(100dvh - var(--hauteur-barre, 3.75rem) - 7rem); }
}

/* Statut des personnes : un point de couleur (forme distincte pour « ne pas déranger »). */
.point-statut { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; vertical-align: .05em; background: var(--muet); box-shadow: 0 0 0 2px var(--surface); }
.point-statut.online { background: var(--ok); }
.point-statut.away { background: var(--avert); }
.point-statut.busy, .point-statut.dnd { background: var(--crit); }
.point-statut.dnd { background: var(--surface); box-shadow: inset 0 0 0 .18rem var(--crit), 0 0 0 2px var(--surface); }
.point-statut.offline, .point-statut.invisible { background: transparent; box-shadow: inset 0 0 0 2px var(--muet); }
.statut-message { font-weight: 400; }
.moi-statut { padding: .4rem .75rem; border-bottom: 1px solid var(--trait); }
.statut-menu .statut-actuel { margin: 0 0 .4rem; font-size: .9rem; }
.statut-menu .formulaire { gap: .4rem; }
.choix-statut { display: grid; gap: .15rem; margin: 0; padding: 0; border: 0; }
.choix-statut label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.composeur-boutons { display: flex; flex-direction: column; gap: .35rem; }
.composeur .joindre { cursor: pointer; text-align: center; }
.piece-jointe { display: inline-flex; flex-direction: column; gap: .2rem; margin: .25rem 0; padding: .4rem .55rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); color: inherit; text-decoration: none; max-width: 22rem; }
@media (hover: hover) and (pointer: fine) { .piece-jointe:hover { border-color: var(--action); } }
.piece-jointe img { max-width: 100%; max-height: 16rem; border-radius: var(--rayon-s); object-fit: contain; }
.piece-nom { font-weight: 600; overflow-wrap: anywhere; }

/* Cloche des notifications. */
.menu.cloche > summary { position: relative; display: flex; align-items: center; padding: .4rem; color: var(--barre-encre); }
.menu.cloche .picto { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cloche-compte { position: absolute; top: .05rem; right: -.1rem; min-width: 1.05rem; padding: 0 .25rem; border-radius: 999px; background: var(--neon); color: var(--nuit); font-size: .7rem; font-weight: 700; line-height: 1.05rem; text-align: center; }
.liste-notifications { width: min(24rem, calc(100vw - 2rem)); max-height: 70vh; overflow-y: auto; }
.liste-notifications a { display: grid; gap: .1rem; }
.liste-notifications .notif-vide { padding: .6rem .75rem; }
.cloche > ul { right: 0; }
.menu.cloche > summary::after { display: none; }

/* ---------------------------------------------------------------- Appel (plein écran sombre) */
[data-section="appel"] { background: #0d0f12; color: #e8ecf1; }
.appel { --fond: #0d0f12; --tuile: #1c1f24; --barre: #16181c; --texte: #e8ecf1; --muet-appel: #9aa3ad; --rouge: #e5484d; --vert: #30a46c; --bleu: #3e8ef7;
  min-height: 100dvh; display: flex; flex-direction: column; }
.appel svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appel button { font: inherit; color: inherit; }

/* Avant d'entrer */
.avant { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr); gap: 2.5rem; align-items: center; max-width: 72rem; width: 100%; margin: 0 auto; padding: 2rem 1.5rem; }
.avant-apercu { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--tuile); }
.avant-apercu video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.apercu-sans { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tuile); }
.avant-boutons { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: .75rem; }
.rond { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; background: rgb(255 255 255 / .16); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); }
.rond[aria-pressed="true"] { background: var(--rouge); }
.avant-reglages { display: grid; gap: .8rem; }
.avant-reglages h1 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--texte); }
.avant-sur { margin: 0; color: var(--muet-appel); }
.avant-reglages label { display: grid; gap: .3rem; color: var(--muet-appel); font-size: .9rem; }
.avant-reglages select { padding: .55rem .6rem; border: 1px solid #2c3138; border-radius: 8px; background: var(--tuile); color: var(--texte); }
.avant-actions { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.bouton-rejoindre { padding: .8rem 2.2rem; border: 0; border-radius: 10px; background: var(--bleu); color: #fff !important; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.bouton-rejoindre:disabled { cursor: progress; }
.bouton-discret-sombre { color: var(--muet-appel); }
.avant-erreur { margin: 0; padding: .6rem .8rem; border-radius: 8px; background: rgb(229 72 77 / .15); color: #ffb4b6; }

/* Dans l'appel */
.appel [hidden] { display: none !important; }
.salle { flex: 1; display: flex; flex-direction: column; height: 100dvh; }
.salle-haut { display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; font-size: .92rem; }
.salle-nom { font-weight: 600; }
.salle-duree { color: var(--muet-appel); font-variant-numeric: tabular-nums; }
.salle-outils { margin-left: auto; display: flex; gap: .4rem; }
.discret-sombre { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.discret-sombre:hover { background: rgb(255 255 255 / .08); }
.scene { position: relative; flex: 1; display: flex; min-height: 0; padding: 0 .75rem .5rem; gap: .75rem; }
.grille { flex: 1; display: grid; gap: .5rem; grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; min-height: 0; }
.grille.vue-orateur { grid-template-columns: minmax(0, 1fr) 13rem; grid-template-rows: repeat(var(--n), minmax(0, 7.5rem)); grid-auto-flow: dense; }
.grille.vue-orateur .tuile { grid-column: 2; }
.grille.vue-orateur .tuile.principale { grid-column: 1; grid-row: 1 / -1; }
.tuile { position: relative; margin: 0; min-height: 0; border-radius: 12px; overflow: hidden; background: var(--tuile); outline: 3px solid transparent; outline-offset: -3px; transition: outline-color var(--duree-retour); }
.tuile.parle { outline-color: var(--vert); }
/* La vidéo ne dicte pas la taille de la tuile : elle la remplit. */
.tuile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tuile[data-sid="moi"][data-genre="video"] video { transform: scaleX(-1); }
.tuile.ecran video { object-fit: contain; background: #000; }
.tuile.sans-video video { visibility: hidden; }
.tuile-avatar { position: absolute; inset: 0; margin: auto; width: clamp(3rem, 22%, 6.5rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #2f6fd1; color: #fff; font-size: clamp(1.1rem, 3vw, 2.2rem); font-weight: 700; }
.avant .tuile-avatar { position: static; width: 7rem; }
.tuile:not(.sans-video) .tuile-avatar, .tuile.ecran .tuile-avatar { display: none; }
.tuile figcaption { position: absolute; left: .5rem; bottom: .5rem; display: flex; align-items: center; gap: .35rem; max-width: calc(100% - 1rem); padding: .2rem .5rem; border-radius: 6px; background: rgb(0 0 0 / .55); font-size: .85rem; }
.tuile-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-main { display: none; }
.tuile.main-levee .tuile-main { display: inline; }
.tuile.main-levee { outline-color: #f5b301; }
.tuile-muet { display: none; position: relative; width: .95rem; height: .95rem; border-radius: 50%; background: var(--rouge); }
.tuile-muet::after { content: ""; position: absolute; inset: 42% 18%; border-radius: 1px; background: #fff; }
.tuile.muet .tuile-muet { display: inline-block; }

.panneau-appel { width: 20rem; flex: none; display: flex; flex-direction: column; border-radius: 12px; background: var(--tuile); padding: .9rem; overflow: hidden; }
.panneau-appel h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--texte); }
.panneau-appel section { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.liste-appel { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.discussion-appel .fil-messages { flex: 1; overflow-y: auto; padding: 0; }
.discussion-appel .bulle { background: #262a30; color: var(--texte); }
.discussion-appel .bulle.moi { background: #1f3a63; }
.discussion-appel .bulle-actions { display: none !important; }
.composeur-appel { display: flex; gap: .4rem; margin-top: .5rem; }
.composeur-appel input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid #2c3138; border-radius: 8px; background: var(--fond); color: var(--texte); }
.composeur-appel button { padding: .45rem .8rem; border: 0; border-radius: 8px; background: var(--bleu); color: #fff; cursor: pointer; }

.commandes { display: flex; align-items: center; gap: 1rem; padding: .45rem 1rem; background: var(--barre); }
.commandes-gauche, .commandes-centre, .commandes-droite { display: flex; align-items: center; gap: .25rem; }
.commandes-centre { margin: 0 auto; }
.appel .commande { display: grid; justify-items: center; gap: .15rem; min-width: 4.6rem; padding: .35rem .5rem; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: .74rem; list-style: none; }
.commande::-webkit-details-marker { display: none; }
.commande:hover { background: rgb(255 255 255 / .08); }
.commande[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / .1); }
.commande .picto-off, .rond .picto-off { display: none; }
.commande[aria-pressed="true"] .picto-on, .rond[aria-pressed="true"] .picto-on { display: none; }
.commande[aria-pressed="true"] .picto-off, .rond[aria-pressed="true"] .picto-off { display: inline; }
.commande[data-commande="micro"][aria-pressed="true"] .picto-off, .commande[data-commande="camera"][aria-pressed="true"] .picto-off { color: var(--rouge); }
.commande.partager { color: #4cd38a; }
.commande.partager[aria-pressed="true"] { color: #fff; background: var(--vert); }
.quitter { padding: .55rem 1.1rem; border: 0; border-radius: 8px; background: var(--rouge); color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.quitter::-webkit-details-marker { display: none; }
.menu-reactions, .menu-quitter { position: relative; }
.choix-reactions, .choix-quitter { position: absolute; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); display: flex; gap: .25rem; padding: .4rem; border-radius: 10px; background: #2a2e35; box-shadow: 0 8px 24px rgb(0 0 0 / .4); }
.choix-quitter { left: auto; right: 0; transform: none; flex-direction: column; min-width: 15rem; }
.choix-quitter button { padding: .55rem .8rem; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; }
.choix-quitter button:hover { background: rgb(255 255 255 / .08); }
.choix-quitter .terminer { background: var(--rouge); color: #fff; }
.choix-reactions button { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 8px; background: transparent; font-size: 1.35rem; cursor: pointer; }
.choix-reactions button:hover { background: rgb(255 255 255 / .1); }
.reactions-volantes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.reaction-volante { position: absolute; bottom: 1rem; display: grid; justify-items: center; animation: envolee 4s ease-out forwards; }
.reaction-volante .emoji { font-size: 2.4rem; }
.reaction-volante .qui { font-size: .75rem; padding: .05rem .4rem; border-radius: 4px; background: rgb(0 0 0 / .5); }
@keyframes envolee { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-60vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reaction-volante { animation: none; } }
.signal { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); margin: 0; padding: .45rem .9rem; border-radius: 8px; background: rgb(0 0 0 / .7); }

@media (max-width: 52rem) {
  .avant { grid-template-columns: 1fr; gap: 1.2rem; padding: 1rem; }
  .commande { min-width: 3rem; }
  .commande .libelle { display: none; }
  .panneau-appel { position: absolute; inset: 0 .75rem .5rem; width: auto; z-index: 3; }
  .grille.vue-orateur { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 6rem; grid-auto-flow: column; grid-auto-columns: 8rem; overflow-x: auto; }
  .grille.vue-orateur .tuile { grid-column: auto; grid-row: 2; }
  .grille.vue-orateur .tuile.principale { grid-row: 1; grid-column: 1 / -1; }
}

/* Accueil de la Visio : grandes actions, collègues à appeler. */
.visio-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.visio-actions form { margin: 0; }
.action-visio { display: grid; justify-items: center; align-content: center; gap: .55rem; width: 100%; min-height: 7.5rem; padding: 1rem; border: 0; border-radius: 14px; background: var(--action); color: var(--action-encre); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--duree-retour), filter var(--duree-retour); }
.action-visio:hover { filter: brightness(1.08); }
.action-visio:active { transform: scale(.98); }
.action-visio svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.action-nouvelle { background: #e8702a; color: #fff; }
.action-rejoindre { display: grid; gap: .4rem; }
.action-rejoindre .action-visio { min-height: 5.4rem; }
.action-rejoindre input { width: 100%; }
.liste-collegues { list-style: none; margin: 0; padding: 0; }
.liste-collegues li { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--trait); }
.avatar-statut { position: relative; flex: none; }
.avatar-statut .point-statut { position: absolute; right: -1px; bottom: -1px; width: .7rem; height: .7rem; }
.collegue-texte { display: grid; min-width: 0; flex: 1; }
.collegue-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collegue-actions { display: flex; gap: .35rem; }
.collegue-actions form { margin: 0; }
.bouton-appeler { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 0; border-radius: 8px; background: var(--ok); color: #fff; font-weight: 600; cursor: pointer; }
.bouton-appeler svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liste-salons li { display: flex; align-items: center; gap: .5rem; }
.liste-salons li > a:first-child { flex: 1; min-width: 0; }
.en-appel { color: var(--ok); }
.bouton-rejoindre-petit { flex: none; padding: .35rem .7rem; border-radius: 8px; background: var(--ok); color: #fff; font-weight: 600; text-decoration: none; }
@media (max-width: 52rem) { .visio-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .collegue-actions .discret { display: none; } }

/* Appel entrant : en bas à droite de toutes les pages. */
.appel-entrant { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; width: min(22rem, calc(100vw - 2rem)); padding: 1rem; border-radius: 14px; background: #16181c; color: #e8ecf1; box-shadow: 0 16px 40px rgb(0 0 0 / .35); transition: opacity var(--duree-entree) var(--sortie), transform var(--duree-entree) var(--sortie); @starting-style { opacity: 0; transform: translateY(12px); } }
/* Sonnerie : un halo vert dont seule l'opacité bat (S-P13). */
.appel-entrant::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 28px rgb(48 164 108 / .7); opacity: 0; pointer-events: none; animation: sonne 1000ms ease-in-out infinite alternate; }
.appel-entrant-sujet { margin: 0 0 .8rem; font-weight: 600; }
.appel-entrant-boutons { display: flex; gap: .6rem; }
.appel-entrant-boutons > * { flex: 1; display: inline-flex; justify-content: center; align-items: center; padding: .55rem; border: 0; border-radius: 8px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.appel-entrant .refuser { background: #e5484d; color: #fff; }
.appel-entrant .repondre { background: #30a46c; color: #fff; }
@keyframes sonne { from { opacity: 0; } to { opacity: .6; } }
/* Mouvement réduit : entrée en opacité seule, pas de sonnerie visuelle. */
@media (prefers-reduced-motion: reduce) { .appel-entrant { transition: opacity var(--duree-entree) linear !important; @starting-style { opacity: 0; transform: none; } } .appel-entrant::after { display: none; } }
.entete-actions { display: flex; align-items: center; gap: .6rem; }
.bouton-appeler { text-decoration: none; }

/* ------------------------------------------------------------ pages métier : tickets, parc, supervision */

/* Sous-titre d'en-tête, sous le h1. */
.entete-sous { margin: .35rem 0 0; color: var(--encre-2); font-size: .9rem; }
.bouton svg.picto { width: 1rem; height: 1rem; stroke-width: 2.2; }
.bouton.plein { display: flex; justify-content: center; width: 100%; margin-top: .75rem; }
/* Point coloré devant un libellé (état, urgence, gravité). */
.point { display: inline-block; flex: none; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: currentColor; vertical-align: .1em; }
.point.crit { background: var(--crit); }
.point.etat-nouveau { background: var(--info); } .point.etat-en_cours { background: var(--avert); }
.point.etat-en_attente { background: var(--cobalt); } .point.etat-resolu { background: var(--ok); } .point.etat-clos { background: var(--muet); }
.ok-texte { color: var(--ok); font: 500 .75rem var(--texte); }
.tuile-valeur small.delta { padding: .05rem .35rem; border-radius: var(--rayon-s); background: color-mix(in srgb, var(--teinte) 14%, transparent); color: var(--teinte); }

/* Barre de recherche et filtres posée dans une carte, comme les maquettes. */
.barre-filtres { margin-bottom: 1rem; padding: .85rem 1rem; }
.barre-filtres .recherche { max-width: none; margin: 0; }
.barre-filtres .recherche input[type="search"] { flex: 1 1 24rem; }
.filtres a { display: inline-flex; align-items: center; }
.filtre-compte { margin-left: .45rem; padding: 0 .4rem; border-radius: var(--rayon-s); background: var(--surface-3); font: 500 .7rem/1.5 var(--donnees); color: var(--encre-2); }
.filtres a[aria-current="page"] .filtre-compte { background: color-mix(in srgb, var(--action) 22%, transparent); color: var(--action); }

/* En-tête de carte de tableau : micro-titre à gauche, méta à droite. */
.cadre-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--trait); }
.cadre-tete h2 { margin: 0; color: var(--encre); }
.table-cadre .pagination { margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--trait); }

/* Étiquettes sous le titre d'un ticket : origine, catégorie, machine. */
.etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .3rem; font-size: .8rem; color: var(--encre-2); }
.etiquette { padding: .05rem .4rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); font-size: .72rem; color: var(--encre-2); background: var(--surface-2); }
.etiquette.supervision { border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); font-family: var(--donnees); }
.etiquette.donnee { font-family: var(--donnees); color: var(--action); border-color: color-mix(in srgb, var(--action) 30%, transparent); background: var(--action-doux); }
td a.titre-supervision { color: light-dark(#0F766E, #5EEAD4); }
.prio-cellule { white-space: nowrap; }
.prio-cellule small { margin-left: .3rem; font-size: .75rem; color: var(--encre-2); }
.prio-cellule.prio-2 small { color: var(--avert); } .prio-cellule.prio-3 small { color: var(--crit); font-weight: 600; }
.personne { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.avatar.petit { width: 1.6rem; height: 1.6rem; font-size: .65rem; }
.kanban-supervision { border-left: 3px solid var(--crit); }
.kanban-carte .etiquettes { margin: .35rem 0 0; }

/* Tableau + colonne latérale (personnel). */
.tickets-bento { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.tickets-cote { display: grid; gap: 1rem; }
.tickets-cote .bloc { margin: 0; }
@media (max-width: 1100px) { .tickets-bento { grid-template-columns: 1fr; } }
.bloc-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font-size: 1rem; }
.bloc-titre svg.picto { width: 1.1rem; height: 1.1rem; color: var(--action); }
.bloc-titre small { margin-left: auto; font-size: .72rem; font-weight: 400; }

/* Répartition des tickets ouverts par urgence. */
.barre-repartition { display: flex; gap: 2px; height: .5rem; margin-bottom: .9rem; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.u-3 { background: var(--crit); color: var(--crit); } .u-2 { background: var(--avert); color: var(--avert); }
.u-1 { background: var(--muet); color: var(--muet); }
.repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .875rem; }
.repartition li { display: grid; grid-template-columns: auto 1fr auto 3rem; align-items: center; }
.repartition .donnee { font-weight: 600; text-align: right; }
.repartition small { text-align: right; }

/* Alertes de supervision dans la colonne latérale. */
.alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.alerte { display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem; padding: .6rem .7rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface-2); }
.alerte > a { display: inline-flex; align-items: center; font-weight: 600; font-size: .85rem; color: inherit; text-decoration: none; }
.alerte > a:hover { text-decoration: underline; }
.alerte p { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--encre-2); }
.alerte.grav-1 > a { color: var(--info); } .alerte.grav-2 > a { color: var(--avert); }
.alerte.grav-3 > a, .alerte.grav-4 > a, .alerte.grav-5 > a { color: var(--crit); }
.alerte .point { background: currentColor; }

/* Bandeau-lien en bas de page (Parc et infrastructure). */
.bandeau-lien { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: 1rem 1.15rem; color: var(--encre); text-decoration: none; transition: border-color var(--duree-apparition) var(--sortie); }
@media (hover: hover) and (pointer: fine) { .bandeau-lien:hover { color: var(--encre); border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); } }
.bandeau-lien > svg.picto { flex: none; width: 2.4rem; height: 2.4rem; padding: .5rem; border-radius: var(--rayon-m); color: var(--action); background: var(--action-doux); }
.bandeau-lien .etiquette { margin-left: .4rem; }
.bandeau-fleche { margin-left: auto; color: var(--action); font-weight: 600; font-size: .875rem; white-space: nowrap; }

/* Parc */
.badge-entete { display: inline-flex; align-items: center; padding: .15rem .6rem; border: 1px solid var(--trait-fort); border-radius: 999px; font: 500 .75rem var(--donnees); color: var(--encre-2); letter-spacing: 0; }
.badge-entete.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.badge-entete.avert { color: var(--avert); border-color: color-mix(in srgb, var(--avert) 40%, transparent); background: color-mix(in srgb, var(--avert) 10%, transparent); }
.badge-entete.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: color-mix(in srgb, var(--crit) 10%, transparent); }
.badge-entete .point { background: currentColor; }
.tuile .barre-repartition { grid-column: 1 / -1; margin: .2rem 0 0; height: .35rem; }
.s-0 { background: var(--action); } .s-1 { background: var(--crit); } .s-2 { background: var(--avert); } .s-3 { background: var(--ok); } .s-4, .s-5, .s-6 { background: var(--muet); }
.tuile-valeur:has(+ .barre-repartition) { font-size: 1.5rem; }
.filtre-alerte .point { background: var(--avert); }
.filtres a.filtre-alerte { color: var(--avert); border-color: color-mix(in srgb, var(--avert) 40%, transparent); }
.filtres a.filtre-alerte[aria-current="page"] { background: color-mix(in srgb, var(--avert) 12%, transparent); }
.filtres a.filtre-alerte .filtre-compte { background: color-mix(in srgb, var(--avert) 20%, transparent); color: var(--avert); }
.table-parc td { vertical-align: middle; }
.machine { display: flex; align-items: center; gap: .75rem; }
.icone-machine { flex: none; width: 2.5rem; height: 2.5rem; padding: .55rem; border: 1px solid color-mix(in srgb, var(--action) 30%, transparent); border-radius: var(--rayon-m); color: var(--action); background: var(--action-doux); }
.icone-machine.serveur { color: var(--cobalt); border-color: color-mix(in srgb, var(--cobalt) 35%, transparent); background: color-mix(in srgb, var(--cobalt) 12%, transparent); }
.machine .etiquette { margin-left: .3rem; vertical-align: .1em; }
.sous.petit { font-size: .75rem; }
.type-machine { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border: 1px solid color-mix(in srgb, var(--action) 35%, transparent); border-radius: var(--rayon-m); font-size: .8rem; color: var(--encre); white-space: nowrap; }
.type-machine svg.picto { width: .95rem; height: .95rem; color: var(--action); }
.type-machine.serveur { border-color: color-mix(in srgb, var(--cobalt) 40%, transparent); background: color-mix(in srgb, var(--cobalt) 8%, transparent); }
.type-machine.serveur svg.picto { color: var(--cobalt); }
.donnee.encadre { padding: .2rem .45rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); background: var(--surface-2); font-size: .8rem; }
.lien-donnee { color: var(--action); font-size: .8rem; }
td.specs { min-width: 14rem; font-size: .8rem; }
td.specs .sous { color: var(--encre-3); }
.cartes-parc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.carte-parc { --teinte: var(--action); display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem 1.25rem; }
.carte-parc.ok { --teinte: var(--ok); } .carte-parc.avert { --teinte: var(--avert); } .carte-parc.cobalt { --teinte: var(--cobalt); }
.carte-parc header { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }
.carte-parc header h2 { margin: 0; font-size: 1rem; }
.carte-parc header svg.picto { flex: none; width: 2.5rem; height: 2.5rem; padding: .55rem; border: 1px solid color-mix(in srgb, var(--teinte) 35%, transparent); border-radius: var(--rayon-m); color: var(--teinte); background: color-mix(in srgb, var(--teinte) 12%, transparent); }
.carte-parc p { margin: 0 0 .5rem; font-size: .875rem; }
.carte-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.carte-parc.avert .carte-actions .bouton:not(.discret) { background: color-mix(in srgb, var(--avert) 18%, transparent); border-color: color-mix(in srgb, var(--avert) 60%, transparent); color: var(--avert); }
.lien-fleche { font-weight: 600; font-size: .875rem; text-decoration: none; }
.cartes-parc > .panneau { margin: 0; }
.table-cadre > .limite-liste { max-width: none; }

/* Supervision */
.entete .actions .sous-menu { margin: 0; }
.tuile.ok-tuile { --teinte: var(--ok); } .tuile.warn-tuile { --teinte: var(--avert); } .tuile.crit-tuile { --teinte: var(--crit); }
.tuile-valeur.donnee { font-family: var(--donnees); font-weight: 600; }
.tuile-pied { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .35rem -1.15rem -1rem; padding: .55rem 1.15rem; border-top: 1px solid var(--trait); font-size: .8rem; color: var(--encre-2); }
.tuile-pied .donnee { font-size: .75rem; color: var(--teinte); white-space: nowrap; }
.mini-jauge { flex: 1; display: block; height: .3rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.mini-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--teinte, var(--ok)); }
.section-supervision { margin-top: 1.75rem; }
.section-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .85rem; }
.section-tete h2 { display: flex; align-items: center; gap: .6rem; margin: 0; }
.section-tete h2 small { font-size: .8rem; font-weight: 400; }
.table-problemes td { vertical-align: middle; }
.table-problemes .etiquette { margin-left: .25rem; }
tr.grav-ligne-4, tr.grav-ligne-5 { background: color-mix(in srgb, var(--crit) 5%, transparent); }
.depuis { color: var(--crit) !important; }
.puce-ticket { display: inline-block; padding: .15rem .45rem; border: 1px solid color-mix(in srgb, var(--action) 40%, transparent); border-radius: var(--rayon-s); background: var(--action-doux); font: 600 .8rem var(--donnees); text-decoration: none; }
.crit-texte { color: var(--crit); }
.ok-point { background: var(--ok); }

.cartes-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 1rem; }
.cartes-machines > .panneau { margin: 0; }
.carte-machine { --teinte: var(--ok); display: flex; flex-direction: column; gap: .9rem; padding: 1.15rem 1.25rem; }
.carte-machine.alerte { --teinte: var(--avert); }
.carte-machine.critique, .carte-machine.hors-ligne { --teinte: var(--crit); }
.carte-machine.critique, .carte-machine.hors-ligne { border-color: color-mix(in srgb, var(--crit) 30%, var(--trait)); }
.carte-machine > header { display: flex; align-items: flex-start; gap: .85rem; padding-bottom: .9rem; border-bottom: 1px solid var(--trait); }
.carte-machine-titre { flex: 1; min-width: 0; }
.carte-machine h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .15rem; font-size: 1.1rem; }
.carte-machine h3 a { text-decoration: none; }
.carte-machine h3 .encadre { font-size: .72rem; font-weight: 400; }
.carte-machine > header .badge-entete { flex: none; }
.mesures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mesure { --teinte: var(--ok); display: grid; gap: .4rem; padding: .7rem .8rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface-2); min-width: 0; }
.mesure.warn { --teinte: var(--avert); border-color: color-mix(in srgb, var(--avert) 55%, transparent); background: color-mix(in srgb, var(--avert) 6%, var(--surface-2)); }
.mesure.crit { --teinte: var(--crit); border-color: color-mix(in srgb, var(--crit) 55%, transparent); background: color-mix(in srgb, var(--crit) 6%, var(--surface-2)); }
.mesure-tete { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.mesure-tete .donnee { color: var(--teinte); font-weight: 600; }
.mesure small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.mesure .mini-jauge { flex: none; }
.carte-machine-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; max-width: none; margin: 0; padding: .6rem .8rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); font-size: .82rem; }
.carte-machine > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; font-size: .82rem; }
.carte-machine > footer .carte-actions { margin: 0; padding: 0; gap: .4rem; }
.carte-machine > footer .bouton { padding: .35rem .7rem; font-size: .8rem; }
.bouton.discret.accent { color: var(--action); border-color: color-mix(in srgb, var(--action) 35%, transparent); }
@media (max-width: 640px) { .mesures { grid-template-columns: 1fr; } }

/* Visio : colonne de salons et collègues, bannière du salon, discussion, fichiers. */
.visio-page { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.visio-page.avec-cote { grid-template-columns: 19rem minmax(0, 1fr) 19rem; grid-template-rows: auto 1fr; }
.visio-page.avec-cote .visio-rail { grid-row: 1 / span 2; }
.visio-page.avec-cote .banniere-salon { grid-column: 2 / -1; }
.visio-page .panneau { margin: 0; }
.visio-rail, .visio-cote, .visio-centre { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.rail-bloc { padding: 1rem; }
.rail-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .85rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--encre); }
.rail-titre svg.picto { width: 1rem; height: 1rem; color: var(--action); }
.rail-titre .point { margin: 0; }
.pastille-ligne, .pastille-direct { margin-left: auto; padding: .05rem .45rem; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); border-radius: var(--rayon-s); color: var(--ok); font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.pastille-direct { border-color: color-mix(in srgb, var(--crit) 40%, transparent); color: var(--crit); }

.actions-instant { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.actions-instant form { margin: 0; display: grid; }
.instant { --teinte: var(--action); display: grid; justify-items: center; align-content: center; gap: .45rem; min-height: 5.6rem; padding: .6rem .3rem; border: 1px solid color-mix(in srgb, var(--teinte) 35%, transparent); border-radius: var(--rayon-l); background: color-mix(in srgb, var(--teinte) 8%, var(--surface)); color: var(--encre); font: 600 .78rem/1.2 var(--texte); text-align: center; text-decoration: none; cursor: pointer; transition: border-color var(--duree-retour) var(--sortie), background-color var(--duree-retour) var(--sortie); }
.instant:hover { color: var(--encre); background: color-mix(in srgb, var(--teinte) 16%, var(--surface)); border-color: color-mix(in srgb, var(--teinte) 60%, transparent); box-shadow: none; }
.instant svg { width: 2.1rem; height: 2.1rem; padding: .4rem; border-radius: var(--rayon-m); background: color-mix(in srgb, var(--teinte) 18%, transparent); fill: none; stroke: var(--teinte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.instant.cobalt { --teinte: var(--cobalt); } .instant.vert { --teinte: var(--ok); }

.rail-salons, .rail-collegues, .fichiers-salon, .appels-en-cours { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rail-salons a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .55rem; border: 1px solid transparent; border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rail-salons a:hover { background: var(--surface-2); color: var(--encre); } }
.rail-salons a[aria-current="page"] { border-color: color-mix(in srgb, var(--action) 45%, transparent); background: var(--action-doux); box-shadow: inset 3px 0 0 var(--action); }
.salon-icone { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--rayon-m); background: var(--surface-3); color: var(--encre-2); font: 600 .9rem var(--donnees); }
.salon-icone.non-lu { background: var(--action-doux); color: var(--action); }
.salon-icone.direct { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.salon-texte, .collegue-texte { display: grid; min-width: 0; }
.salon-texte strong, .collegue-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; }
.salon-texte small, .collegue-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--encre-2); }
.salon-quand { font-size: .68rem; color: var(--encre-3); }
.badge-direct { padding: .1rem .4rem; border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 999px; color: var(--ok); font: 600 .65rem var(--donnees); text-transform: uppercase; }
.compteur-non-lus { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--action); color: var(--action-encre); font: 700 .7rem var(--donnees); }

.rail-collegues li { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface-2); }
.rail-collegues li.offline, .rail-collegues li.invisible { background: none; }
.rail-collegues li.offline .avatar { filter: grayscale(.7); opacity: .7; }
.collegue-texte { flex: 1; }
.avatar.carre { border-radius: var(--rayon-m); }
.collegue-actions { display: flex; gap: .2rem; }
.collegue-actions form { margin: 0; }
.icone-action { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid transparent; border-radius: var(--rayon-m); background: none; color: var(--encre-2); }
.icone-action:hover { background: var(--surface-3); color: var(--action); box-shadow: none; }
.icone-action.appeler { color: var(--ok); }
.icone-action svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.banniere-salon { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.banniere-icone { flex: none; width: 3rem; height: 3rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--action) 35%, transparent); border-radius: var(--rayon-l); background: var(--action-doux); color: var(--action); }
.banniere-texte { flex: 1; min-width: 16rem; }
.banniere-texte h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: var(--t2); }
.banniere-texte h1 > .secondaire { font-weight: 600; color: var(--encre); }
.nom-salon { color: var(--action); }
.banniere-texte p { margin: 0; font-size: .875rem; }

.visio-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; }
.visio-hero .panneau { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; }
.visio-hero h2 { margin: 0; font-size: 1.25rem; }
.visio-hero p { margin: 0 0 .5rem; }
.hero-reunion { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--action) 16%, transparent), transparent 60%), var(--surface) !important; }
.bouton-grand { align-self: flex-start; margin-top: auto; padding: .8rem 1.3rem; font-size: 1rem; }
.bouton-grand svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-rejoindre button { align-self: flex-start; }
.appels-en-cours li { display: flex; align-items: center; gap: .75rem; }
.appels-en-cours li > a:nth-child(2) { flex: 1; font-weight: 600; }

/* Salon : discussion entre les deux colonnes. */
.visio-page .discussion { height: calc(100dvh - var(--hauteur-barre, 4rem) - 13rem); min-height: 26rem; }
.discussion-tete { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--trait); }
.discussion-tete .rail-titre { margin: 0; }
.fil-messages .bulle:not(.systeme) { padding: .55rem .8rem .6rem 3.4rem; border: 1px solid var(--trait); background: var(--surface-2); min-height: 3rem; }
.fil-messages .bulle.moi:not(.systeme) { border-color: color-mix(in srgb, var(--action) 35%, transparent); background: var(--action-doux); }
.bulle-avatar { position: absolute; left: .6rem; top: .6rem; width: 2.1rem; height: 2.1rem; font-size: .72rem; }
.bulle-entete strong { color: var(--action); }
.bulle.moi .bulle-entete strong { color: var(--encre); }
.bulle-entete .donnee { margin-left: .3rem; font-size: .72rem; }
.composeur { background: var(--surface); }
p.composeur { display: block; margin: 0; max-width: none; }

.participants-salon .rail-collegues { margin-bottom: .75rem; }
.participants-salon .etiquette { padding: 0 .3rem; font-size: .65rem; }
.ajout-participant { display: flex; gap: .4rem; }
.ajout-participant select { flex: 1; min-width: 0; }
.fichiers-salon a { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface-2); color: var(--encre); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fichiers-salon a:hover { border-color: color-mix(in srgb, var(--action) 45%, transparent); color: var(--encre); } }
.fichiers-salon svg.picto { flex: none; width: 1rem; height: 1rem; color: var(--encre-2); }
.vignette-ext { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: var(--rayon-m); background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); font: 700 .62rem var(--donnees); }
.vignette-ext.ext-pdf { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.vignette-ext.ext-log, .vignette-ext.ext-txt { background: color-mix(in srgb, var(--avert) 14%, transparent); color: var(--avert); }
.vignette-ext.ext-png, .vignette-ext.ext-jpg, .vignette-ext.ext-jpeg, .vignette-ext.ext-webp { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.plein-largeur { width: 100%; justify-content: center; }
.reglages-salon + form { margin-top: .75rem; }

@media (max-width: 1280px) {
  .visio-page.avec-cote { grid-template-columns: 17rem minmax(0, 1fr); }
  .visio-page.avec-cote .visio-cote { grid-column: 2; }
}
@media (max-width: 900px) {
  .visio-page, .visio-page.avec-cote { grid-template-columns: 1fr; }
  .visio-page.avec-cote .visio-rail { grid-row: auto; order: 3; }
  .visio-page.avec-cote .banniere-salon, .visio-page.avec-cote .visio-cote { grid-column: auto; }
  .visio-hero { grid-template-columns: 1fr; }
}
.rail-salons .salon-quand, .rail-salons .compteur-non-lus { grid-area: auto; justify-self: end; }
.fil-messages > .bulle { flex-shrink: 0; }

/* ------------------------------------------------------------ habillage des maquettes : verre, lueurs, cote */

/* Fond maillé de lueurs et cartes de verre : en sombre seulement (le clair reste net). */
:root {
  /* Accents de l'habillage : texte lisible en clair (>= 4,5:1), teinte néon d'origine en sombre. */
  --cyan-vif: light-dark(#0369A1, #22D3EE); --cyan-clair: light-dark(#075985, #67E8F9);
  --cyan-fond: light-dark(#E0F2FE, rgb(8 51 68 / .6)); --cyan-trait: light-dark(rgb(2 132 199 / .4), rgb(6 182 212 / .3));
  --rose-texte: light-dark(#BE123C, #FB7185); --rose-fond: light-dark(rgb(225 29 72 / .09), rgb(244 63 94 / .15)); --rose-trait: light-dark(rgb(190 18 60 / .35), rgb(244 63 94 / .25));
  --vert-texte: light-dark(#047857, #34D399); --bleu-texte: light-dark(#1D4ED8, #60A5FA);
  --violet-texte: light-dark(#6D28D9, #A78BFA); --ambre-texte: light-dark(#92400E, #FBBF24);
  --fond-maille: none; --verre: var(--surface); --verre-trait: var(--trait); --verre-fonce: var(--surface-2); --rayon-xl: 16px; }
:root[data-theme="sombre"] {
  --fond-maille: radial-gradient(circle at 18% 10%, rgb(6 182 212 / .08) 0%, transparent 40%), radial-gradient(circle at 82% 18%, rgb(59 130 246 / .06) 0%, transparent 45%), radial-gradient(circle at 50% 80%, rgb(16 185 129 / .04) 0%, transparent 50%);
  --verre: rgb(19 30 54 / .72); --verre-trait: rgb(42 63 101 / .55); --verre-fonce: rgb(10 17 32 / .7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond-maille: radial-gradient(circle at 18% 10%, rgb(6 182 212 / .08) 0%, transparent 40%), radial-gradient(circle at 82% 18%, rgb(59 130 246 / .06) 0%, transparent 45%), radial-gradient(circle at 50% 80%, rgb(16 185 129 / .04) 0%, transparent 50%);
    --verre: rgb(19 30 54 / .72); --verre-trait: rgb(42 63 101 / .55); --verre-fonce: rgb(10 17 32 / .7);
  }
}
body { background: var(--fond-maille), var(--papier); background-attachment: fixed; }
.panneau, .tuile, .table-cadre { background: var(--verre); border-color: var(--verre-trait); border-radius: var(--rayon-xl); }
.panneau, .table-cadre { box-shadow: 0 10px 30px -12px light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .45)); }
@media (hover: hover) and (pointer: fine) { a.tuile:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); box-shadow: 0 8px 30px light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .35)), 0 0 15px light-dark(rgb(2 132 199 / .1), rgb(6 182 212 / .08)); } }
.bouton, button { border-radius: 10px; }
.bouton:not(.discret), button:not(.discret, .lien, .icone-action, .instant, .reaction, .outil, .mini-jour, .evt-agenda, .numero-jour, .entete-jour, .drapeau, .pp-rond, .pp-bascule, .pp-prendre, .tuile-creer, .etoile, [role="tab"]) { box-shadow: 0 6px 18px -6px var(--lueur); }

/* Barre du haut : rubrique courante en pastille cyan, soulignée d'une lueur. */
.nav-principale > ul > li { align-items: center; }
.nav-principale > ul > li > a, .nav-principale summary { position: relative; padding: .45rem .8rem; border: 1px solid transparent; border-radius: 8px; color: var(--barre-lien); }
.nav-principale > ul > li > a:hover, .nav-principale summary:hover { background: var(--barre-survol); color: var(--barre-encre-forte); }
[data-section="accueil"] .nav-accueil,
[data-section="fichiers"] .nav-fichiers,
[data-section="courrier"] .nav-courrier,
[data-section="agenda"] .nav-agenda,
[data-section="visio"] .nav-visio,
[data-section="bureau"] .nav-bureau,
[data-section="intranet"] .nav-intranet,
[data-section="aide"] .nav-aide,
[data-section="tickets"] .nav-tickets,
[data-section="parc"] .nav-parc,
[data-section="supervision"] .nav-admin-groupe > summary,
[data-section="reseau"] .nav-admin-groupe > summary,
[data-section="admin"] .nav-admin-groupe > summary,
[data-section="utilisateurs"] .nav-admin-groupe > summary {
  color: var(--barre-courant);
  font-weight: 600;
  background: var(--barre-courant-fond);
  border-color: var(--barre-courant-trait);
  box-shadow: none;
}
[data-section="accueil"] .nav-accueil::before,
[data-section="fichiers"] .nav-fichiers::before,
[data-section="courrier"] .nav-courrier::before,
[data-section="agenda"] .nav-agenda::before,
[data-section="visio"] .nav-visio::before,
[data-section="bureau"] .nav-bureau::before,
[data-section="intranet"] .nav-intranet::before,
[data-section="aide"] .nav-aide::before,
[data-section="tickets"] .nav-tickets::before,
[data-section="parc"] .nav-parc::before,
[data-section="supervision"] .nav-admin-groupe > summary::before,
[data-section="reseau"] .nav-admin-groupe > summary::before,
[data-section="admin"] .nav-admin-groupe > summary::before,
[data-section="utilisateurs"] .nav-admin-groupe > summary::before {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: calc(-.95rem - 1px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--barre-ligne-a), var(--barre-ligne-b));
  box-shadow: 0 0 8px var(--barre-ligne-lueur);
}
.bouton-recherche { border-radius: 8px; background: var(--barre-champ); border-color: var(--barre-champ-trait); font-size: .78rem; color: var(--barre-doux); }
.bouton-recherche kbd { border-color: var(--barre-kbd-trait); background: var(--barre-kbd); opacity: 1; font-size: .65rem; }
.cloche-compte { background: #F59E0B; color: #070C14; box-shadow: 0 0 0 2px var(--barre-anneau); }
.moi > summary .avatar { width: 1.85rem; height: 1.85rem; font-size: .72rem; box-shadow: 0 0 0 2px rgb(16 185 129 / .3); }
@media (min-width: 1401px) { .moi-nom { display: grid; line-height: 1.15; font-size: .85rem; } }
.moi-nom small { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 500; color: var(--vert-texte); }
.moi-nom small::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ok); }
.barre-haut .cloche { padding-right: .75rem; margin-right: .1rem; border-right: 1px solid var(--barre-champ-trait); }
@media (max-width: 900px) {
  .nav-principale > ul > li > a, .nav-principale summary { padding: .45rem .7rem; margin-block: .35rem; }
  [data-section="accueil"] .nav-accueil::before,
[data-section="fichiers"] .nav-fichiers::before,
[data-section="courrier"] .nav-courrier::before,
[data-section="agenda"] .nav-agenda::before,
[data-section="visio"] .nav-visio::before,
[data-section="bureau"] .nav-bureau::before,
[data-section="intranet"] .nav-intranet::before,
[data-section="aide"] .nav-aide::before,
[data-section="tickets"] .nav-tickets::before,
[data-section="parc"] .nav-parc::before,
[data-section="supervision"] .nav-admin-groupe > summary::before,
[data-section="reseau"] .nav-admin-groupe > summary::before,
[data-section="admin"] .nav-admin-groupe > summary::before,
[data-section="utilisateurs"] .nav-admin-groupe > summary::before { display: none; }
}

/* En-tête de page : la ligne de cote du plan, un trait sombre tenu par deux points lumineux. */
.entete { border-bottom: 0; padding-bottom: 1.5rem; }
.entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background:
    radial-gradient(circle, #22D3EE 0 2.4px, transparent 3px) left center / 7px 7px no-repeat,
    radial-gradient(circle, #22D3EE 0 2.4px, transparent 3px) right center / 7px 7px no-repeat,
    linear-gradient(var(--trait-fort), var(--trait-fort)) center / calc(100% - 8px) 1px no-repeat;
  filter: drop-shadow(0 0 3px rgb(34 211 238 / .7));
}
.entete h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; align-items: center; }
.entete-hero h1 { font-size: 2.25rem; }
.badge-entete { letter-spacing: 0; text-transform: none; }
.entete-sous.resume { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.entete-sous strong { color: var(--encre); font-weight: 600; }
.entete-sous .sep, .sep { color: var(--encre-3); }
.point-cyan { width: .4rem; height: .4rem; border-radius: 50%; background: var(--cyan-vif); }

/* Tuiles des maquettes : libellé et valeur à gauche, pictogramme carré à droite. */
.tuile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "libelle picto" "valeur picto" "contexte picto"; align-items: center; padding: 1.15rem 1.25rem; }
.tuile-libelle { grid-area: libelle; align-self: end; }
.tuile svg.picto { grid-area: picto; width: 3rem; height: 3rem; padding: .75rem; border-radius: 12px; }
.tuile-valeur { grid-area: valeur; grid-column: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; font-size: 1.85rem; font-weight: 800; }
.tuile-contexte { grid-area: contexte; grid-column: auto; }
.tuile-pied { grid-area: auto; grid-column: 1 / -1; }
.tuile .barre-repartition { grid-column: 1 / 2; }
.tuile-valeur.blanc { color: var(--encre); }
.puce { align-self: center; padding: .1rem .5rem; border: 1px solid color-mix(in srgb, var(--teinte) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--teinte) 10%, transparent); color: var(--teinte); font: 500 .72rem/1.4 var(--texte); letter-spacing: 0; white-space: nowrap; }
.puce.ok { --teinte: var(--ok); }

/* Accueil du personnel. */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.5rem; }
.accueil-principal, .accueil-cote { display: grid; gap: 1.5rem; min-width: 0; }
.accueil-grille .panneau { margin: 0; padding: 1.4rem 1.5rem; }
.accueil-grille .carte-liste { padding: 0; overflow: hidden; }
@media (max-width: 1100px) { .accueil-grille { grid-template-columns: 1fr; } }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--verre-trait); }
.carte-liste .carte-tete { margin: 0; padding: 1rem 1.5rem; background: var(--verre-fonce); }
.carte-tete > .bouton { flex: none; white-space: nowrap; }
.carte-tete h2 { display: flex; align-items: center; gap: .65rem; margin: 0; font-size: 1.1rem; font-weight: 700; }
.compte-cyan { color: var(--cyan-vif); font-weight: 600; } .compte-avert { color: var(--avert); }
.lien-discret { font-size: .78rem; font-weight: 600; color: var(--action); text-decoration: none; }
.pouls { position: relative; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: light-dark(#0891B2, #06B6D4); }
.pouls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.pouls:not(.vert, .calme)::after { animation: halo var(--duree-halo) var(--cadence-halo) infinite; }
.pouls.vert { background: var(--ok); }
.icone-carte { width: 2rem; height: 2rem; padding: .4rem; border-radius: 8px; }
.icone-carte.avert { color: var(--avert); background: color-mix(in srgb, var(--avert) 10%, transparent); border: 1px solid color-mix(in srgb, var(--avert) 20%, transparent); }
.table-accueil { font-size: .875rem; }
.table-accueil thead th { padding: .75rem 1.5rem; background: light-dark(var(--surface-2), rgb(7 12 20 / .4)); font-size: .68rem; }
.table-accueil td { padding: 1rem 1.5rem; vertical-align: middle; }
.table-accueil tbody tr + tr td { border-top-color: light-dark(#EEF2F6, rgb(30 46 74 / .4)); }
.centre { text-align: center !important; } .droite { text-align: right !important; }
.ticket-ligne { display: flex; align-items: flex-start; gap: .75rem; }
.num-ticket { flex: none; margin-top: .1rem; padding: .1rem .45rem; border: 1px solid var(--cyan-trait); border-radius: 4px; background: var(--cyan-fond); color: var(--cyan-vif); font: 700 .72rem var(--donnees); }
.titre-ticket { display: block; color: var(--encre); font-weight: 600; text-decoration: none; line-height: 1.35; }
.titre-ticket:hover { color: var(--cyan-clair); }
.ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .75rem; color: var(--encre-2); }
.ticket-meta svg.picto { width: .85rem; height: .85rem; }
.puce-prio { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border: 1px solid light-dark(var(--trait-fort), rgb(71 85 105 / .4)); border-radius: 999px; background: light-dark(var(--surface-3), rgb(51 65 85 / .3)); font-size: .75rem; font-weight: 600; color: var(--encre-2); white-space: nowrap; }
.puce-prio .prio { height: .75rem; }
.puce-prio.p2 { color: var(--avert); border-color: color-mix(in srgb, var(--avert) 25%, transparent); background: color-mix(in srgb, var(--avert) 10%, transparent); }
.puce-prio.p3 { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 25%, transparent); background: color-mix(in srgb, var(--crit) 10%, transparent); }
.bouton-prendre { padding: .35rem .75rem; border: 1px solid var(--cyan-trait); border-radius: 8px; background: light-dark(var(--action-doux), rgb(8 51 68 / .4)); color: var(--cyan-clair); font-size: .75rem; font-weight: 500; box-shadow: none !important; }
.bouton-prendre:hover { background: light-dark(#BAE6FD, rgb(22 78 99 / .6)); color: light-dark(#0C4A6E, #A5F3FC); border-color: light-dark(#0284C7, rgb(34 211 238 / .5)); }
.table-accueil form { margin: 0; }

.cartes-problemes { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.carte-probleme { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--verre-trait); border-radius: 12px; background: var(--verre-fonce); transition: border-color var(--duree-retour); }
.carte-probleme.sev-3, .carte-probleme.sev-4, .carte-probleme.sev-5 { border-color: light-dark(color-mix(in srgb, var(--avert) 30%, transparent), rgb(245 158 11 / .2)); }
@media (hover: hover) and (pointer: fine) { .carte-probleme:hover { border-color: light-dark(color-mix(in srgb, var(--avert) 55%, transparent), rgb(245 158 11 / .4)); } }
.grav-etiquette { align-self: flex-start; padding: .25rem .6rem; border: 1px solid; border-radius: 6px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.grav-etiquette.g1 { color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); background: color-mix(in srgb, var(--info) 15%, transparent); }
.grav-etiquette.g2 { color: var(--avert); border-color: color-mix(in srgb, var(--avert) 25%, transparent); background: color-mix(in srgb, var(--avert) 15%, transparent); }
.grav-etiquette.g3, .grav-etiquette.g4, .grav-etiquette.g5 { color: var(--rose-texte); border-color: var(--rose-trait); background: var(--rose-fond); }
.carte-probleme-texte { flex: 1; min-width: 14rem; display: grid; gap: .15rem; }
.carte-probleme-texte p { margin: 0; }
.carte-probleme-texte p a { font-weight: 600; text-decoration: none; }
.carte-probleme-texte .donnee { font-size: .72rem; }
.carte-probleme-texte strong { font-size: .875rem; font-weight: 500; }
.carte-probleme-texte small { font-size: .75rem; }
.carte-probleme-actions { display: flex; gap: .5rem; margin-left: auto; }
.carte-probleme-actions form { margin: 0; }
.bouton.petit, button.petit { padding: .35rem .75rem; font-size: .75rem; }

.etat-vide { display: grid; justify-items: center; gap: .3rem; padding: 2rem 1rem; text-align: center; }
.etat-vide svg.picto { width: 3.5rem; height: 3.5rem; margin-bottom: .5rem; padding: .95rem; border: 1px solid var(--verre-trait); border-radius: 16px; background: var(--surface-2); color: var(--encre-2); }
.etat-vide strong { font-size: .875rem; }
.etat-vide small { max-width: 20rem; color: var(--encre-2); font-size: .75rem; }
.etat-vide .lien-discret { margin-top: .75rem; }
.encart-ok { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid light-dark(color-mix(in srgb, var(--ok) 25%, transparent), rgb(16 185 129 / .2)); border-radius: 12px; background: var(--verre-fonce); }
.encart-ok > div { display: grid; }
.encart-ok strong { font-size: .875rem; }
.encart-ok small { color: var(--encre-2); font-size: .75rem; }
.encart-icone { position: relative; flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--ok) 10%, transparent); }
.encart-icone img { width: 1.9rem; height: 1.9rem; }
.encart-icone .pouls { position: absolute; top: -.25rem; right: -.25rem; }
.mini-machines { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.mini-machines li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .5rem .75rem; border: 1px solid var(--verre-trait); border-radius: 8px; background: color-mix(in srgb, var(--verre-fonce) 60%, transparent); font-size: .75rem; color: var(--encre-2); }
.mini-machines li > a { display: flex; align-items: center; gap: .45rem; margin-right: auto; color: var(--encre); text-decoration: none; }
.mini-machines li > a small { font-size: .65rem; color: var(--encre-3); }
.mini-machines strong { color: var(--encre); font-weight: 600; }
.mini-machines .point { margin: 0; }
.avert-point { background: var(--avert); }
.liste-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.liste-cartes a { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border: 1px solid var(--verre-trait); border-radius: 10px; background: var(--verre-fonce); color: var(--encre); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .liste-cartes a:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); color: var(--encre); } }
.liste-cartes-texte { flex: 1; display: grid; min-width: 0; }
.liste-cartes-texte strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 600; }
.liste-cartes-texte small { font-size: .72rem; color: var(--encre-2); }
.acces-rapide { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.acces-rapide a { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--verre-trait); border-radius: 12px; background: var(--verre-fonce); color: var(--encre); font-size: .78rem; font-weight: 600; text-decoration: none; transition: border-color var(--duree-retour); }
@media (hover: hover) and (pointer: fine) { .acces-rapide a:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); color: var(--cyan-clair); } }
.acces-rapide .ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; }
.acces-rapide .ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.bleu { color: var(--bleu-texte); background: rgb(59 130 246 / .1); } .ic.cyan { color: var(--cyan-vif); background: rgb(6 182 212 / .1); }
.ic.vert { color: var(--vert-texte); background: rgb(16 185 129 / .1); } .ic.violet { color: var(--violet-texte); background: rgb(139 92 246 / .1); } .ic.ambre { color: var(--ambre-texte); background: rgb(245 158 11 / .1); }
.titre-carte { display: flex; align-items: center; gap: .5rem; }
.titre-carte svg.picto { width: 1.1rem; height: 1.1rem; color: var(--action); }
.actualites-bloc { margin-top: 1.5rem; }
.moi-nom small.statut-away::before { background: var(--avert); } .moi-nom small.statut-away { color: var(--ambre-texte); }
.moi-nom small.statut-dnd::before, .moi-nom small.statut-busy::before { background: var(--crit); } .moi-nom small.statut-dnd, .moi-nom small.statut-busy { color: var(--rose-texte); }
.moi-nom small.statut-offline::before, .moi-nom small.statut-invisible::before { background: var(--muet); } .moi-nom small.statut-offline, .moi-nom small.statut-invisible { color: var(--encre-2); }

/* Accueil collaborateur : cockpit, courriels, agenda, documents. */
.cockpit { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.5rem; padding: 1.75rem 2rem !important; overflow: hidden; }
.cockpit::before { content: ""; position: absolute; inset: 0; background: var(--quadrillage); opacity: .6; pointer-events: none; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.cockpit::after { content: ""; position: absolute; top: -40%; right: -10%; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgb(14 165 233 / .14), transparent 70%); pointer-events: none; }
.cockpit > * { position: relative; z-index: 1; }
.cockpit-texte { min-width: 0; }
.cockpit-sur { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-clair); }
.cockpit-sur .donnee { letter-spacing: .02em; text-transform: none; color: var(--encre-2); }
.cockpit-sur small { font-size: inherit; }
.cockpit h1 { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.cockpit-resume { display: flex; flex-wrap: wrap; gap: .45rem; margin: .6rem 0 0; max-width: none; font-size: .875rem; color: var(--encre-2); }
.cockpit-resume span:first-child { color: var(--encre); font-weight: 600; }
.cockpit-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cockpit-actions form { margin: 0; }
.tuiles-cockpit .tuile-valeur small { font-family: var(--texte); font-size: .8rem; color: var(--encre-2); }
.tuiles-cockpit .tuile-contexte { margin-top: .25rem; }
.tuiles-cockpit .puce { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.accueil-grille.collaborateur { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.accueil-grille.collaborateur > .panneau:nth-of-type(3) { grid-column: 1; }
.accueil-grille.collaborateur > .accueil-cote { grid-column: 2; grid-row: 2; }
@media (max-width: 1100px) { .accueil-grille.collaborateur { grid-template-columns: 1fr; } .accueil-grille.collaborateur > * { grid-column: auto !important; grid-row: auto !important; } }
.carte-tete h2 > span:not(.icone-titre, .badge-entete, .compte-cyan, .compte-avert, .secondaire, .pouls) { display: grid; }
.carte-tete h2 small { font-size: .75rem; font-weight: 400; color: var(--encre-2); }
.icone-titre { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; border: 1px solid; }
.icone-titre svg.picto { width: 1.2rem; height: 1.2rem; }
.icone-titre.cyan { color: var(--cyan-vif); background: rgb(6 182 212 / .1); border-color: rgb(6 182 212 / .25); }
.icone-titre.ambre { color: var(--ambre-texte); background: rgb(245 158 11 / .1); border-color: rgb(245 158 11 / .25); }
.icone-titre.vert { color: var(--vert-texte); background: rgb(16 185 129 / .1); border-color: rgb(16 185 129 / .25); }
.actions-tete { display: flex; align-items: center; gap: .5rem; }

.courriels { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.courriels a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--verre-trait); border-radius: 12px; background: var(--verre-fonce); color: var(--encre); text-decoration: none; transition: border-color var(--duree-retour); }
@media (hover: hover) and (pointer: fine) { .courriels a:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); color: var(--encre); } }
.courriels li.vedette a { border-color: rgb(148 163 184 / .5); box-shadow: 0 0 0 1px rgb(148 163 184 / .15); }
.courriels .avatar { width: 2.4rem; height: 2.4rem; }
.courriel-texte { display: grid; gap: .1rem; min-width: 0; }
.courriel-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; }
.courriel-sujet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--encre); }
.courriels li.non-lu .courriel-sujet { font-weight: 600; }
.courriels li:not(.non-lu) .courriel-ligne strong { font-weight: 500; color: var(--encre-2); }
.courriel-texte small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre-2); font-size: .78rem; }
.courriel-quand { display: grid; justify-items: end; align-content: start; gap: .35rem; font-size: .75rem; color: var(--encre-2); }
.courriels li.non-lu .courriel-quand .donnee { color: var(--rose-texte); font-weight: 600; }
.courriel-quand svg.picto { width: .95rem; height: .95rem; }
.etiquette-importante { padding: .05rem .5rem; border: 1px solid light-dark(rgb(190 18 60 / .35), rgb(244 63 94 / .35)); border-radius: 999px; background: light-dark(rgb(225 29 72 / .09), rgb(244 63 94 / .12)); color: var(--rose-texte); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.agenda-carte { display: flex; flex-direction: column; }
.prochaine-reunion { display: grid; gap: .55rem; padding: 1.1rem; border: 1px solid light-dark(rgb(2 132 199 / .4), rgb(6 182 212 / .35)); border-radius: 14px; background: linear-gradient(160deg, light-dark(#E0F2FE, rgb(8 51 68 / .55)), light-dark(#F8FAFC, rgb(10 17 32 / .7))); box-shadow: 0 0 24px -8px light-dark(rgb(2 132 199 / .25), rgb(6 182 212 / .35)); }
.prochaine-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.horaire { padding: .15rem .5rem; border: 1px solid light-dark(rgb(2 132 199 / .4), rgb(6 182 212 / .35)); border-radius: 6px; color: var(--cyan-clair); font-size: .72rem; }
.prochaine-reunion h3 { font-size: 1.05rem; }
.prochaine-reunion h3 a { color: var(--encre); text-decoration: none; }
.prochaine-reunion p { margin: 0; font-size: .78rem; }
.prochaine-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.pile-avatars { display: inline-flex; }
.pile-avatars .avatar { width: 1.6rem; height: 1.6rem; margin-left: -.35rem; font-size: .6rem; box-shadow: 0 0 0 2px light-dark(#F1F8FD, #0A1120); }
.pile-avatars .avatar:first-child { margin-left: 0; }
.pile-avatars .avatar.plus { background: var(--surface-3); color: var(--encre-2); }
.etiquette.supervision-ok { border-color: light-dark(color-mix(in srgb, var(--ok) 40%, transparent), rgb(16 185 129 / .35)); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--vert-texte); }
.prochaine-reunion .bouton { margin-top: .35rem; }
.reunions-suivantes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.reunions-suivantes a { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border: 1px solid var(--verre-trait); border-radius: 10px; background: var(--verre-fonce); color: var(--encre); text-decoration: none; font-size: .8rem; }
@media (hover: hover) and (pointer: fine) { .reunions-suivantes a:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); color: var(--encre); } }
.reunion-texte { flex: 1; display: grid; min-width: 0; }
.reunion-texte strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reunion-texte small { color: var(--encre-2); font-size: .7rem; }
.carte-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: 1rem; font-size: .75rem; }

.docs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.doc-carte { display: flex; flex-direction: column; justify-content: space-between; gap: .9rem; padding: .9rem; border: 1px solid var(--verre-trait); border-radius: 12px; background: var(--verre-fonce); color: var(--encre); text-decoration: none; transition: border-color var(--duree-retour); }
@media (hover: hover) and (pointer: fine) { .doc-carte:hover { border-color: light-dark(color-mix(in srgb, var(--action) 45%, transparent), rgb(6 182 212 / .4)); color: var(--encre); } }
.doc-tete { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.doc-nom { display: grid; min-width: 0; }
.doc-nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 600; }
.doc-nom small { font-size: .7rem; color: var(--encre-2); }
.doc-pied { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--verre-trait); }
.doc-pied small { font-size: .7rem; }
.vignette-ext.doc-texte, .vignette-ext.doc-note { background: rgb(59 130 246 / .14); color: var(--bleu-texte); }
.vignette-ext.doc-tableur { background: rgb(16 185 129 / .14); color: var(--vert-texte); }
.vignette-ext.doc-presentation { background: rgb(245 158 11 / .14); color: var(--ambre-texte); }
.vignette-ext.doc-pdf { background: rgb(244 63 94 / .14); color: var(--rose-texte); }
.vignette-ext.doc-image { background: rgb(139 92 246 / .14); color: var(--violet-texte); }
.stockage { margin: 1rem 0 0; max-width: none; font-size: .75rem; color: var(--encre-2); }
.demande-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.liste-cartes.demandes a { align-items: stretch; }
.liste-cartes.demandes + .lien-discret { display: inline-block; margin-top: .75rem; }
.acces-rapide a > span:last-child { display: grid; }
.acces-rapide a small { font-size: .65rem; font-weight: 400; color: var(--encre-2); }

/* Mobile : logo, cloche et compte ; les rubriques derrière un bouton menu. */
.barre-haut .bouton-menu { display: none; }
.bouton-menu .croix, .bouton-menu[aria-expanded="true"] .barres { display: none; }
.bouton-menu[aria-expanded="true"] .croix { display: inline; }
@media (max-width: 900px) {
  .barre-interieur { flex-wrap: wrap; align-items: center; min-height: 3.75rem; }
  .barre-haut .bouton-menu { display: grid; place-items: center; order: 2; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--barre-champ-trait); border-radius: 8px; background: var(--barre-champ) !important; color: var(--barre-lien); box-shadow: none !important; }
  .bouton-menu svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .barre-haut .marque { order: 1; margin-right: auto; font-size: 1.2rem !important; gap: .6rem !important; }
  .bouton-recherche { order: 3; }
  .barre-haut .cloche { order: 4; padding-right: .5rem; }
  .moi { order: 5; margin-left: 0; }
  .nav-principale { display: none; order: 9; }
  .barre-haut.menu-ouvert .nav-principale { display: block; flex: 1 0 100%; overflow: visible; padding: .25rem 0 .9rem; transition: opacity var(--duree-apparition) var(--sortie), transform var(--duree-apparition) var(--sortie); @starting-style { opacity: 0; transform: translateY(-6px); } }
  .barre-haut.menu-ouvert .nav-principale > ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .barre-haut.menu-ouvert .nav-principale li.separation { margin: .4rem 0 0; padding-top: .4rem; border-top: 1px solid var(--barre-champ-trait); }
  .barre-haut.menu-ouvert .nav-principale > ul > li > a, .barre-haut.menu-ouvert .nav-principale summary { margin: 0; padding: .65rem .8rem; }
  .entete h1, .entete-hero h1, .cockpit h1 { font-size: 1.75rem; }
  .entete .actions { width: 100%; }
}

/* Tableaux en cartes empilées sous 900 px (classe opt-in « cartes-mobiles »).
   Chaque cellule reprend son libellé (data-label) ; la première cellule, sans libellé, ouvre la carte ;
   l'action principale (.action-carte ou .lien-carte) ferme la carte, sur toute la largeur, zone >= 40 px. */
td.lien-carte { display: none; }
@media (max-width: 900px) {
  .table-cadre:has(.cartes-mobiles) { overflow-x: visible; border: 0; background: none; box-shadow: none; }
  table.cartes-mobiles, table.cartes-mobiles tbody { display: block; width: 100%; }
  table.cartes-mobiles thead { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cartes-mobiles tbody { display: grid; gap: .75rem; }
  table.cartes-mobiles tbody tr { display: grid; gap: .55rem; min-width: 0; padding: 1rem; border: 1px solid var(--verre-trait); border-radius: 12px; background: var(--verre); box-shadow: 0 6px 20px -10px light-dark(rgb(15 23 42 / .14), rgb(0 0 0 / .5)); }
  table.cartes-mobiles tbody tr:hover { background: var(--verre); }
  table.cartes-mobiles tbody tr td { display: block; min-width: 0; max-width: none; padding: 0; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
  table.cartes-mobiles tbody tr td:empty { display: none; }
  /* Libellé flottant dans la marge de la cellule (flow-root) : un libellé long (« Double authentification ») passe à la ligne
     sans chevaucher la valeur, et la cellule grandit avec lui. */
  table.cartes-mobiles tbody tr td[data-label] { display: flow-root; padding-left: 9.75rem; min-height: 1.2rem; }
  table.cartes-mobiles tbody tr td[data-label]::before { content: attr(data-label); float: left; width: 9.5rem; margin-left: -9.75rem; overflow-wrap: normal; hyphens: manual; padding-top: .15rem; font-size: .68rem; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
  table.cartes-mobiles td.col-titre { order: -1; }
  table.cartes-mobiles td small, table.cartes-mobiles td.date { white-space: normal; }
  table.cartes-mobiles td.vide { padding: 1.25rem .5rem; text-align: center !important; }
  table.cartes-mobiles tbody tr:has(td.vide) { background: var(--verre-fonce); }
  /* Action principale : bas de carte, pleine largeur. */
  table.cartes-mobiles tbody tr td.action-carte, table.cartes-mobiles tbody tr td.lien-carte { display: block; order: 99; margin-top: .25rem; padding-top: .8rem; border-top: 1px solid var(--verre-trait); }
  table.cartes-mobiles td.action-carte form, table.cartes-mobiles td.action-carte .inline { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; }
  table.cartes-mobiles td.action-carte input:not([type="hidden"]) { width: 100%; min-height: 2.5rem; }
  table.cartes-mobiles td.action-carte :is(button, .bouton), table.cartes-mobiles td.lien-carte .bouton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 2.5rem; padding-block: .5rem; font-size: .85rem; }
  table.cartes-mobiles td a.titre, table.cartes-mobiles td a.titre-ticket { display: inline-block; min-height: 1.5rem; }
}

/* Actions de masse de la liste des tickets (personnel) : barre au-dessus du tableau, une case par
   ligne ; en cartes (mobile), la case ouvre la carte avec son libellé visible, zone >= 40 px. */
.masse-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: .7rem 1rem; border: 0; border-bottom: 1px solid var(--trait); }
.masse-compte { margin: 0; flex: 1 1 14rem; font-size: .85rem; }
.masse-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.masse-groupe { display: inline-flex; gap: .35rem; align-items: center; }
.masse-groupe select { max-width: 12rem; }
.masse-barre button { white-space: nowrap; flex: none; }
.masse-groupe { flex: none; }
.masse-barre button:disabled { opacity: .5; cursor: not-allowed; }
.masse-attente { opacity: 0; font-size: .8rem; }
form.htmx-request .masse-attente { opacity: 1; transition: opacity 0s linear var(--delai-attente); }
.masse-resultat { margin: .7rem 1rem 0; }
.masse-resultat:focus { outline: 2px solid var(--action); outline-offset: 2px; }
th.masse-case, td.masse-case { width: 2.5rem; text-align: center; }
.masse-coche { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; min-height: 1.75rem; cursor: pointer; }
.masse-coche-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.masse-case input, .masse-coche input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--action); }
@media (max-width: 900px) {
  .table-cadre:has(.cartes-mobiles) .masse-barre { padding-inline: 0; }
  .masse-actions, .masse-groupe { width: 100%; }
  .masse-groupe select { flex: 1 1 auto; max-width: none; min-height: 2.5rem; }
  .masse-actions > button, .masse-groupe button { min-height: 2.5rem; }
  .masse-actions > button { width: 100%; }
  table.cartes-mobiles tbody tr td.masse-case { order: -2; width: auto; text-align: left !important; }
  table.cartes-mobiles .masse-coche { justify-content: flex-start; gap: .6rem; min-height: 2.5rem; }
  table.cartes-mobiles .masse-coche-texte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: .8rem; color: var(--encre-2); }
  .masse-resultat { margin-inline: 0; }
}

/* Retour tactile (S-P16) : les survols des cartes, tuiles et lignes sont réservés à la souris ; au toucher,
   l'appui change le fond tout de suite et le relâchement l'efface en 150 ms. */
:is(a.tuile, a.carte-doc, a.carte-actualite, .kanban-carte, .liste-cartes a, .acces-rapide a, .courriels a, .reunions-suivantes a, .doc-carte, .carte-probleme, .ligne-message, .bandeau-lien, .fichiers-salon a, .rail-salons a, .liste-salons a) { transition-property: background-color, border-color, box-shadow, opacity; transition-duration: var(--duree-retour); }
@media (hover: none), (pointer: coarse) {
  :is(a.tuile, a.carte-doc, a.carte-actualite, .kanban-carte, .liste-cartes a, .acces-rapide a, .courriels a, .reunions-suivantes a, .doc-carte, .carte-probleme, .ligne-message, .bandeau-lien, .fichiers-salon a, .rail-salons a, .liste-salons a, tbody tr):active { background: var(--surface-2); transition-duration: 0ms; }
}


}

@layer pupitre {
/* ------------------------------------------------------------ Pupitre (direction 2026-10-30)
   Coquille commune (rail latéral, barre haute, bascule de thème, aurore,
   onglets mobiles), composant d'état unique `.statut`, grammaire du
   mouvement, et l'accueil administrateur. Les classes sont préfixées `pp-`
   pour ne rien écraser des pages existantes ; `.statut` et `.entre` sont
   neufs. Chargé après app.css (layout.html) : il gagne la cascade sur
   tout ce qui précède. Il a vocation à fusionner dans app.css quand la
   feuille sera rangée en couches (lot « @layer » de la direction). */

/* ---- jetons ajoutés */
:root {
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem;
  --t-2: .6875rem; --t-s: .875rem; --t5: 3rem;
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-xl: 22px; --rond: 999px;
  --violet: light-dark(#6D28D9, #A78BFA);
  --ombre: 0 18px 40px -18px light-dark(rgb(15 23 42 / .18), rgb(0 0 0 / .6));
  --sortie: cubic-bezier(.23, 1, .32, 1);
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
  --d-retour: 160ms; --d-apparition: 300ms; --d-entree: 700ms; --d-theme: 600ms;
  /* contrastes relevés en sombre */
  --papier: light-dark(#EEF2F7, #050B1A);
  --surface: light-dark(#FFFFFF, #0F172C);
  --surface-2: light-dark(#F5F7FB, #172138);
  --surface-3: light-dark(#E6EBF2, #223050);
  --encre-2: light-dark(#475569, #A3B1C6);
  --encre-3: light-dark(#5B6B82, #7F8DA5);
  --ok: light-dark(#047857, #34D399);
  --avert: light-dark(#B45309, #FBBF24);
  --crit: light-dark(#B91C1C, #F87171);
  --muet: light-dark(#64748B, #8593A8);
  --verre: light-dark(rgb(255 255 255 / .82), rgb(15 23 44 / .66));
  --verre-trait: light-dark(rgb(255 255 255 / .9), rgb(148 163 184 / .14));
  --lueur: light-dark(rgb(3 105 161 / .25), rgb(56 189 248 / .45));
  --fond-maille: none;   /* l'aurore remplace le maillage */
}
:root[data-theme="sombre"], :root[data-theme="clair"] { --verre: light-dark(rgb(255 255 255 / .82), rgb(15 23 44 / .66)); --verre-trait: light-dark(rgb(255 255 255 / .9), rgb(148 163 184 / .14)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --verre: rgb(15 23 44 / .66); --verre-trait: rgb(148 163 184 / .14); } }

body { background: var(--papier); transition: background-color var(--d-theme) var(--sortie), color var(--d-theme) var(--sortie); }
.pp-panneau, .pp-tuile, .pp-rail, .pp-haut > * { transition: background-color var(--d-theme) var(--sortie), border-color var(--d-theme) var(--sortie), color var(--d-theme) var(--sortie); }

/* ---- aurore : trois lueurs qui dérivent, derrière tout */
.pp-aurore { position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: light-dark(.55, .8); }
.pp-aurore i { position: absolute; display: block; border-radius: 50%; }
.pp-aurore .a { width: 46%; height: 46%; left: -6%; top: -10%; background: radial-gradient(circle, rgb(56 189 248 / .32), transparent 65%); animation: pp-derive-a 26s ease-in-out infinite alternate; }
.pp-aurore .b { width: 40%; height: 40%; right: -4%; top: 10%; background: radial-gradient(circle, rgb(139 92 246 / .26), transparent 65%); animation: pp-derive-b 32s ease-in-out infinite alternate; }
.pp-aurore .c { width: 36%; height: 36%; left: 30%; bottom: -14%; background: radial-gradient(circle, rgb(16 185 129 / .18), transparent 65%); animation: pp-derive-a 38s ease-in-out infinite alternate-reverse; }
@keyframes pp-derive-a { to { transform: translate(12%, 10%) scale(1.15); } }
@keyframes pp-derive-b { to { transform: translate(-14%, 16%) scale(.9); } }

/* ---- coquille : rail + scène */
.pp { display: flex; min-height: 100dvh; }
.pp-scene { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-scene > .contenu { flex: 1; width: 100%; }

.pp-rail { width: 76px; flex: none; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e3); background: var(--verre); border-right: 1px solid var(--verre-trait); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); position: sticky; top: 0; height: 100dvh; overflow: hidden auto; scrollbar-width: none; z-index: 11; transition: width .36s var(--sortie), margin-right .36s var(--sortie); }
/* déplié par-dessus le contenu (marge négative) : rien ne bouge derrière */
.pp-rail:hover, .pp-rail:focus-within { width: 236px; margin-right: -160px; box-shadow: var(--ombre); }
.pp-rail .pp-marque { display: flex; align-items: center; gap: var(--e3); padding: var(--e2); margin-bottom: var(--e4); text-decoration: none; color: var(--encre); font-weight: 700; letter-spacing: -.02em; font-size: var(--t1); white-space: nowrap; overflow: hidden; }
.pp-rail .pp-marque img { width: 36px; height: 36px; flex: none; border-radius: 10px; filter: drop-shadow(0 0 10px var(--lueur)); }
@keyframes pp-tourne { to { transform: rotate(360deg); } }
.pp-rail .lib { opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--sortie) .05s, transform .3s var(--sortie) .05s; white-space: nowrap; }
.pp-rail:hover .lib, .pp-rail:focus-within .lib { opacity: 1; transform: none; }
.pp-rail a:not(.pp-marque) { position: relative; display: flex; align-items: center; gap: var(--e3); height: 48px; padding: 0 var(--e3); border-radius: 14px; color: var(--encre-2); text-decoration: none; font-size: var(--t-s); font-weight: 500; overflow: hidden; box-shadow: none; background: none; transition: background .2s, color .2s, transform .2s var(--sortie); }
.pp-rail a svg.picto { width: 22px; height: 22px; flex: none; }
.pp-rail a:not(.pp-marque):hover { background: var(--surface-2); color: var(--encre); transform: translateX(2px); }
.pp-rail a.actif { color: var(--action); background: var(--action-doux); font-weight: 600; }
.pp-rail a.actif::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 4px; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 14px var(--lueur); animation: pp-allume .6s var(--rebond) both; }
@keyframes pp-allume { from { transform: scaleY(0); } }
.pp-rail .pp-badge-zone { margin-left: auto; display: flex; }
.pp-rail .pp-badge-zone .compteur { font: 700 var(--t-2) var(--donnees); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rond); display: grid; place-items: center; animation: none; }
.pp-rail .pp-groupe { font: 600 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .12em; color: var(--encre-3); padding: var(--e3) var(--e3) var(--e1); white-space: nowrap; overflow: hidden; height: 2rem; }
.pp-rail .pp-bas { margin-top: auto; display: grid; gap: var(--e2); }
/* rubrique courante : mêmes classes nav-* que la barre d'avant, lues depuis body[data-section] */
[data-section="accueil"] .pp-rail .nav-accueil, [data-section="fichiers"] .pp-rail .nav-fichiers, [data-section="courrier"] .pp-rail .nav-courrier,
[data-section="agenda"] .pp-rail .nav-agenda, [data-section="visio"] .pp-rail .nav-visio, [data-section="intranet"] .pp-rail .nav-intranet,
[data-section="aide"] .pp-rail .nav-aide, [data-section="tickets"] .pp-rail .nav-tickets, [data-section="parc"] .pp-rail .nav-parc,
[data-section="supervision"] .pp-rail .nav-supervision, [data-section="reseau"] .pp-rail .nav-reseau, [data-section="securite"] .pp-rail .nav-securite,
[data-section="equipes"] .pp-rail .nav-equipes, [data-section="gestion"] .pp-rail .nav-gestion, [data-section="admin"] .pp-rail .nav-admin, [data-section="utilisateurs"] .pp-rail .nav-admin { color: var(--action); background: var(--action-doux); font-weight: 600; border-color: transparent; box-shadow: none; }
[data-section="accueil"] .pp-rail .nav-accueil::before, [data-section="fichiers"] .pp-rail .nav-fichiers::before, [data-section="courrier"] .pp-rail .nav-courrier::before,
[data-section="agenda"] .pp-rail .nav-agenda::before, [data-section="visio"] .pp-rail .nav-visio::before, [data-section="intranet"] .pp-rail .nav-intranet::before,
[data-section="aide"] .pp-rail .nav-aide::before, [data-section="tickets"] .pp-rail .nav-tickets::before, [data-section="parc"] .pp-rail .nav-parc::before,
[data-section="supervision"] .pp-rail .nav-supervision::before, [data-section="reseau"] .pp-rail .nav-reseau::before, [data-section="securite"] .pp-rail .nav-securite::before,
[data-section="equipes"] .pp-rail .nav-equipes::before, [data-section="gestion"] .pp-rail .nav-gestion::before, [data-section="admin"] .pp-rail .nav-admin::before, [data-section="utilisateurs"] .pp-rail .nav-admin::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 4px; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 14px var(--lueur); animation: pp-allume .6s var(--rebond) both; }

/* ---- barre haute allégée */
.pp-haut { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e6) 0; max-width: 96rem; width: 100%; margin: 0 auto; }
.pp-haut .bouton-recherche { flex: 1; max-width: 520px; min-width: 0; display: flex; align-items: center; gap: var(--e3); height: 46px; padding: 0 var(--e4); border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--verre); color: var(--encre-3); font-size: var(--t-s); font-weight: 400; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; transition: box-shadow .3s, border-color .3s; }
.pp-haut .bouton-recherche:hover { border-color: var(--action); box-shadow: 0 0 0 4px var(--action-doux); color: var(--encre-2); background: var(--verre); }
.pp-haut .bouton-recherche svg.picto { width: 1.1rem; height: 1.1rem; }
.pp-haut .bouton-recherche-texte { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-haut .bouton-recherche kbd { margin-left: auto; font: 600 var(--t-2) var(--donnees); padding: 2px 7px; border: 0; border-radius: 6px; background: var(--surface-3); color: var(--encre-2); opacity: 1; }
.pp-haut .pp-espace { flex: 1; }
.pp-haut .pp-menu-mobile { display: none; }
/* l'ancienne barre imposait un ordre et masquait le texte de recherche sous 1 600 px : on repart de l'ordre du gabarit */
.pp-haut > * { order: 0; margin: 0; }
.pp-haut .bouton-recherche-texte, .pp-haut .bouton-recherche kbd { display: block; }
.pp-rond { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--trait-fort); background: var(--verre); display: grid; place-items: center; color: var(--encre-2); position: relative; padding: 0; cursor: pointer; box-shadow: none; transition: transform .25s var(--rebond), color .2s, border-color .2s; }
.pp-rond:hover { transform: translateY(-2px) scale(1.04); color: var(--action); border-color: var(--action); background: var(--verre); box-shadow: none; }
.pp-rond svg.picto { width: 1.25rem; height: 1.25rem; }
.pp-rond .pp-n { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rond); background: var(--crit); color: #fff; font: 700 var(--t-2) var(--donnees); display: grid; place-items: center; border: 2px solid var(--papier); }
.pp-rond .pp-n:empty, .pp-rond .pp-n > :empty { display: none; }
.pp-haut details.menu > summary::after { display: none; }
.pp-haut .cloche > summary.pp-rond:hover svg.picto { animation: pp-sonne .7s var(--sortie); }
@keyframes pp-sonne { 20% { transform: rotate(14deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
.pp-haut details.menu > ul { top: calc(100% + 8px); border-radius: var(--r-l); box-shadow: var(--ombre); }
.pp-bascule { width: 68px; height: 34px; flex: none; border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface-2); position: relative; padding: 0; cursor: pointer; box-shadow: none; transition: background .4s; }
.pp-bascule:hover { box-shadow: none; }
.pp-bascule i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #FDE68A, #F59E0B); box-shadow: 0 2px 8px rgb(245 158 11 / .5); transition: transform .45s var(--rebond), background .45s, box-shadow .45s; }
.pp-bascule[aria-pressed="true"] i { transform: translateX(34px); background: linear-gradient(135deg, #C7D2FE, #818CF8); box-shadow: 0 0 14px rgb(129 140 248 / .7); }
.pp-haut .moi > summary { display: flex; align-items: center; gap: var(--e3); height: 46px; padding: 4px 14px 4px 4px; border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--verre); color: var(--encre); font-weight: 600; cursor: pointer; }
.pp-haut .moi > summary:hover { background: var(--verre); border-color: var(--action); }
.pp-haut .moi > summary .avatar { width: 36px; height: 36px; font-size: var(--t-1); color: #fff; background: linear-gradient(135deg, #38BDF8, #8B5CF6); box-shadow: none; }
.pp-haut .moi-nom { display: grid; line-height: 1.2; }
.pp-haut .moi-nom > span { font-size: var(--t-s); }
.pp-haut .moi-nom small { font-size: var(--t-2); color: var(--encre-3); }
.pp-haut .bouton-pleine-page { background: var(--verre); color: var(--encre-2); border: 1px solid var(--trait-fort); }

/* ---- onglets mobiles (≤ 900 px) */
.pp-onglets { display: none; }
@media (max-width: 900px) {
  .pp-rail { display: none; }
  .pp-haut { padding: var(--e3) var(--e4) 0; gap: var(--e2); }
  .pp-haut .bouton-recherche { max-width: none; }
  .pp-haut .moi-nom { display: none; }
  .pp-haut .moi > summary { padding: 3px; }
  .pp-haut .bouton-recherche kbd { display: none; }
  .pp-haut .pp-espace { display: none; }
  .pp-haut .pp-menu-mobile { display: grid; }
  .pp-scene > .contenu { padding-bottom: 104px; }
  .pp-onglets { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 12; height: 68px; border-radius: 24px; background: var(--verre); border: 1px solid var(--verre-trait); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--ombre); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 6px; }
  .pp-onglets a { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: var(--encre-3); font-size: 10px; font-weight: 600; position: relative; padding: 8px 0; min-height: 44px; }
  .pp-onglets a svg.picto { width: 22px; height: 22px; transition: transform .3s var(--rebond); }
  .pp-onglets a.actif, [data-section="accueil"] .pp-onglets .nav-accueil, [data-section="tickets"] .pp-onglets .nav-tickets, [data-section="parc"] .pp-onglets .nav-parc { color: var(--action); background: none; box-shadow: none; }
  [data-section="accueil"] .pp-onglets .nav-accueil svg.picto, [data-section="tickets"] .pp-onglets .nav-tickets svg.picto, [data-section="parc"] .pp-onglets .nav-parc svg.picto { transform: translateY(-2px); }
  [data-section="accueil"] .pp-onglets .nav-accueil::before, [data-section="tickets"] .pp-onglets .nav-tickets::before, [data-section="parc"] .pp-onglets .nav-parc::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; translate: -50% 0; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 12px var(--lueur); }
  .pp-onglets .pp-plus { width: 52px; height: 52px; border-radius: 50%; background: var(--action); color: var(--action-encre); display: grid; place-items: center; margin: 0 auto; box-shadow: 0 10px 24px -8px var(--lueur); transform: translateY(-14px); animation: pp-pop .6s var(--rebond) .8s both; }
  .pp-onglets .pp-plus svg.picto { width: 24px; height: 24px; }
  .pp-onglets .pp-menu-mobile { width: 100%; background: none; border: 0; box-shadow: none; }
  .pp-rail.ouvert { display: flex; position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20; box-shadow: var(--ombre); animation: pp-glisse .3s var(--sortie); }
  .pp-rail.ouvert .lib { opacity: 1; transform: none; }
  .pp-voile { position: fixed; inset: 0; z-index: 19; background: rgb(2 6 23 / .45); }
}
@keyframes pp-pop { from { transform: translateY(-14px) scale(0); } }
@keyframes pp-glisse { from { transform: translateX(-100%); } }

/* ---- mouvement : entrée en cascade */
.entre { animation: pp-entre var(--d-entree) var(--sortie) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pp-entre { from { opacity: 0; transform: translateY(16px) scale(.985); } }

/* ---- LE composant d'état : teinte + au plus une forme */
.statut { --c: var(--muet); display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .7rem .15rem .55rem; border-radius: var(--rond); color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); font-size: var(--t-1); font-weight: 600; line-height: 1.5; white-space: nowrap; position: relative; vertical-align: middle; }
.statut::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); flex: none; }
.statut.ok { --c: var(--ok); } .statut.avert { --c: var(--avert); } .statut.crit { --c: var(--crit); } .statut.info { --c: var(--info); } .statut.violet { --c: var(--violet); } .statut.muet { --c: var(--muet); }
.statut[data-forme="anneau"]::before { background: none; box-shadow: inset 0 0 0 2px var(--c); }
.statut[data-forme="carre"]::before, .statut.carre::before { border-radius: 1px; }
/* Même forme en classe, quand elle dépend d'une condition du gabarit. */
.statut.anneau::before { background: none; box-shadow: inset 0 0 0 2px var(--c); }
.statut.plein { background: var(--c); border-color: var(--c); color: #fff; }
.statut.plein::before { background: #fff; }
.statut.point { padding: 0; background: none; border: 0; gap: 0; }
.statut.point::before { width: .65rem; height: .65rem; }
.statut.compteur { padding: 0 .5rem; min-width: 1.5rem; justify-content: center; font-family: var(--donnees); font-weight: 700; }
.statut.compteur::before { display: none; }
.statut.mono { font-family: var(--donnees); font-weight: 500; }
.statut.vif::after { content: ""; position: absolute; left: .55rem; top: 50%; width: .5rem; height: .5rem; translate: 0 -50%; border-radius: 50%; background: var(--c); opacity: .55; animation: pp-vif 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.statut.point.vif::after { left: 0; width: .65rem; height: .65rem; }
@keyframes pp-vif { to { transform: scale(2.6); opacity: 0; } }

/* ---- boutons : pastille, reflet au survol */
.pp-bouton { display: inline-flex; align-items: center; gap: var(--e2); height: 46px; padding: 0 var(--e5); border-radius: var(--rond); border: 1px solid transparent; background: var(--action); color: var(--action-encre); font-weight: 600; font-size: var(--t-s); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; cursor: pointer; box-shadow: 0 10px 26px -10px var(--lueur); transition: transform .25s var(--rebond), box-shadow .25s; }
.pp-bouton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--sortie); }
.pp-bouton:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--lueur); color: var(--action-encre); background: var(--action); }
.pp-bouton:hover::after { transform: translateX(120%); }
.pp-bouton:active:not(:disabled) { transform: scale(.97); }
.pp-bouton.discret { background: var(--verre); color: var(--encre); border-color: var(--trait-fort); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pp-bouton.discret:hover { background: var(--surface); color: var(--encre); box-shadow: none; }
.pp-bouton.petit { height: 36px; padding: 0 var(--e4); font-size: var(--t-1); }
.pp-bouton:disabled, .pp-bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.pp-bouton svg.picto { width: 1.1rem; height: 1.1rem; }

/* ---- accueil : héros */
.pp-contenu { display: grid; gap: var(--e5); }
.pp-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--e5); align-items: stretch; }
.pp-salut h1 { font-size: var(--t5); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; display: block; }
.pp-salut h1 em { font-style: normal; background: linear-gradient(92deg, var(--action), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pp-salut .pp-sous { margin: var(--e3) 0 0; font-size: var(--t1); color: var(--encre-2); max-width: 40ch; }
.pp-salut .pp-sous strong { color: var(--encre); font-weight: 600; }
.pp-salut .pp-actions { display: flex; gap: var(--e3); margin-top: var(--e5); flex-wrap: wrap; }
.pp-pouls { background: var(--verre); border: 1px solid var(--verre-trait); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: var(--e4) var(--e5); display: grid; grid-template-rows: auto 1fr auto; gap: var(--e2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pp-pouls .pp-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-size: var(--t-s); color: var(--encre-2); }
.pp-pouls .pp-tete b { color: var(--encre); font-weight: 600; }
.pp-pouls svg { width: 100%; height: auto; max-height: 180px; overflow: visible; display: block; align-self: center; }
.pp-pouls .pp-courbe { fill: none; stroke: var(--action); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: pp-trace 1.8s var(--sortie) .3s forwards; }
.pp-pouls .pp-aire { fill: url(#pp-deg); opacity: 0; animation: pp-fondu .8s 1.4s forwards; }
.pp-pouls .pp-bille { fill: var(--action); stroke: var(--papier); stroke-width: 3; opacity: 0; animation: pp-fondu .4s 2s forwards, pp-respire 2.4s ease-in-out 2.4s infinite; }
@keyframes pp-trace { to { stroke-dashoffset: 0; } }
@keyframes pp-fondu { to { opacity: 1; } }
@keyframes pp-respire { 50% { r: 7; } }
.pp-pouls .pp-pied { display: flex; gap: var(--e3) var(--e4); flex-wrap: wrap; font-size: var(--t-1); color: var(--encre-3); }
.pp-pouls .pp-pied b { color: var(--encre-2); font-family: var(--donnees); font-weight: 600; }

/* ---- accueil : tuiles comptées */
.pp-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
.pp-tuile { --teinte: var(--action); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); padding: var(--e5); border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); text-decoration: none; color: inherit; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: transform .3s var(--rebond), border-color .3s; overflow: hidden; }
.pp-tuile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--teinte) 45%, var(--verre-trait)); color: inherit; }
.pp-tuile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--teinte) 22%, transparent), transparent 55%); pointer-events: none; }
.pp-tuile.avert { --teinte: var(--avert); } .pp-tuile.crit { --teinte: var(--crit); } .pp-tuile.ok { --teinte: var(--ok); } .pp-tuile.violet { --teinte: var(--violet); }
.pp-tuile .pp-lib { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-s); font-weight: 500; color: var(--encre-2); position: relative; }
.pp-tuile .pp-lib > span:first-child { min-width: 0; }
.pp-tuile .pp-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--teinte) 16%, transparent); color: var(--teinte); }
.pp-tuile .pp-ic svg.picto { width: 1.2rem; height: 1.2rem; }
.pp-tuile .pp-val { font: 600 2.25rem/1 var(--donnees); letter-spacing: -.03em; display: flex; align-items: baseline; gap: var(--e3); position: relative; color: var(--encre); }
.pp-tuile .pp-val small { font: 500 var(--t1) var(--donnees); color: var(--encre-3); }
.pp-tuile .pp-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); position: relative; font-size: var(--t-1); color: var(--encre-3); min-height: 28px; }
.pp-mini { width: 84px; height: 28px; overflow: visible; flex: none; }
.pp-mini path { fill: none; stroke: var(--teinte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: pp-trace 1.4s var(--sortie) .6s forwards; }
.pp-anneau { width: 56px; height: 56px; flex: none; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-3) 0); display: grid; place-items: center; position: relative; animation: pp-remplit 1.4s var(--sortie) .4s both; }
.pp-anneau::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.pp-anneau b { position: relative; z-index: 1; font: 700 var(--t-2) var(--donnees); color: var(--encre); }
@keyframes pp-remplit { from { --p: 0; } }

/* ---- accueil : grille, panneaux */
.pp-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: var(--e5); align-items: start; }
.pp-colonne { display: grid; gap: var(--e5); min-width: 0; }
.pp-panneau { background: var(--verre); border: 1px solid var(--verre-trait); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: var(--e5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); margin: 0; }
.pp-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.pp-tete h2 { margin: 0; font-size: var(--t1); font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: var(--e2); }
.pp-lien { font-size: var(--t-s); color: var(--action); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pp-lien svg.picto { width: 1rem; height: 1rem; transition: transform .25s var(--sortie); }
.pp-lien:hover svg.picto { transform: translateX(3px); }
.pp-panneau .etat-vide { padding: var(--e5) var(--e4); border: 1px dashed var(--trait-fort); border-radius: var(--r-l); }

/* ---- accueil : cartes « à attribuer » */
.pp-cartes { display: grid; gap: var(--e3); }
.pp-carte { --teinte: var(--trait-fort); display: grid; grid-template-columns: auto 1fr auto; gap: var(--e4); align-items: center; padding: var(--e4) var(--e4) var(--e4) var(--e5); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid transparent; position: relative; transition: transform .3s var(--rebond), border-color .3s, background .3s; }
.pp-carte:hover { transform: translateX(4px); border-color: var(--trait-fort); background: var(--surface); }
.pp-carte::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: var(--rond); background: var(--teinte); }
.pp-carte.p3 { --teinte: var(--crit); } .pp-carte.p2 { --teinte: var(--avert); } .pp-carte.p1 { --teinte: var(--muet); }
.pp-num { font: 600 var(--t-1) var(--donnees); color: var(--action); background: var(--action-doux); padding: 3px 8px; border-radius: 8px; align-self: start; white-space: nowrap; }
.pp-carte h3 { margin: 0; font-size: var(--t0); font-weight: 600; letter-spacing: -.01em; }
.pp-carte h3 a { color: inherit; text-decoration: none; }
.pp-carte h3 a:hover { color: var(--action); }
.pp-carte .pp-meta { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: var(--t-1); color: var(--encre-3); }
.pp-carte .pp-meta .pp-qui { display: inline-flex; align-items: center; gap: 6px; color: var(--encre-2); }
.pp-carte .pp-meta .pp-qui i { width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--h, 200) 60% 55%); display: inline-block; }
.pp-carte .prio { height: 14px; }
.pp-carte .pp-droite { display: grid; justify-items: end; gap: var(--e2); font-size: var(--t-1); color: var(--encre-3); }
.pp-carte .pp-droite form { margin: 0; }
.pp-prendre { height: 38px; padding: 0 var(--e4); border-radius: var(--rond); border: 1px solid var(--action); background: transparent; color: var(--action); font-weight: 600; font-size: var(--t-1); position: relative; overflow: hidden; isolation: isolate; cursor: pointer; box-shadow: none; transition: color .25s; }
.pp-prendre::before { content: ""; position: absolute; inset: 0; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sortie); z-index: -1; }
.pp-prendre:hover { color: var(--action-encre); background: transparent; box-shadow: none; }
.pp-prendre:hover::before { transform: scaleX(1); }

/* ---- accueil : flux unifié */
.pp-flux { position: relative; display: grid; }
.pp-flux::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--trait-fort), transparent); }
.pp-evt { --c: var(--trait-fort); display: grid; grid-template-columns: 24px 1fr; gap: var(--e3); padding: var(--e2) 0; align-items: start; position: relative; }
.pp-evt .pp-pt { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--c); color: var(--c); position: relative; z-index: 1; }
.pp-evt .pp-pt svg.picto { width: 12px; height: 12px; stroke-width: 2.4; }
.pp-evt.crit { --c: var(--crit); } .pp-evt.avert { --c: var(--avert); } .pp-evt.ok { --c: var(--ok); } .pp-evt.info { --c: var(--info); } .pp-evt.violet { --c: var(--violet); }
.pp-evt .pp-corps { padding: var(--e2) var(--e3); border-radius: 12px; min-width: 0; transition: background .25s; }
.pp-evt:hover .pp-corps { background: var(--surface-2); }
.pp-evt .pp-corps strong { display: block; font-size: var(--t-s); font-weight: 600; }
.pp-evt .pp-corps small { display: block; font-size: var(--t-1); color: var(--encre-3); margin-top: 2px; }
.pp-evt .pp-corps a { text-decoration: none; font-weight: 600; }
.pp-evt .pp-act { display: flex; gap: var(--e2); margin-top: var(--e2); flex-wrap: wrap; }
.pp-evt .pp-act form { margin: 0; }
.pp-evt .pp-pt.vif::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); animation: pp-vif 1.8s cubic-bezier(0, 0, .2, 1) infinite; }

/* ---- accueil : parc thermique */
.pp-parc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e2); }
.pp-cell { --c: var(--ok); aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); display: grid; align-content: end; gap: 3px; padding: var(--e2); font-size: var(--t-2); color: var(--encre-2); text-decoration: none; position: relative; min-width: 0; transition: transform .25s var(--rebond); }
.pp-cell:hover { transform: scale(1.06); z-index: 1; color: var(--encre-2); }
.pp-cell b { font: 600 var(--t-2) var(--donnees); color: var(--encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cell i { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pp-cell.avert { --c: var(--avert); } .pp-cell.crit { --c: var(--crit); } .pp-cell.muet { --c: var(--muet); }
.pp-cell.crit i { animation: pp-respire-cell 1.6s ease-in-out infinite; }
@keyframes pp-respire-cell { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--crit) 25%, transparent); } }
.pp-jauge { height: 6px; border-radius: var(--rond); background: var(--surface-3); overflow: hidden; }
.pp-jauge i { position: static; display: block; height: 100%; width: var(--w, 0%); border-radius: var(--rond); background: var(--c); animation: pp-pousse 1.2s var(--sortie) .8s both; }
@keyframes pp-pousse { from { width: 0; } }

/* ---- accueil : actualités, accès rapide */
.pp-actus { display: grid; gap: var(--e2); }
.pp-actu { display: flex; gap: var(--e3); align-items: center; padding: var(--e3); border-radius: 14px; background: var(--surface-2); text-decoration: none; color: inherit; transition: transform .25s var(--rebond); }
.pp-actu:hover { transform: translateX(3px); color: inherit; }
.pp-actu .pp-date { font: 600 var(--t-2) var(--donnees); color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); padding: 6px 8px; border-radius: 10px; text-align: center; line-height: 1.1; min-width: 46px; flex: none; }
.pp-actu strong { display: block; font-size: var(--t-s); font-weight: 600; }
.pp-actu small { font-size: var(--t-1); color: var(--encre-3); }
.pp-acces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.pp-acces a { display: grid; justify-items: center; gap: var(--e2); padding: var(--e3) var(--e2); border-radius: 16px; background: var(--surface-2); text-decoration: none; color: var(--encre); font-size: var(--t-1); font-weight: 500; transition: transform .25s var(--rebond), background .25s; }
.pp-acces a:hover { transform: translateY(-3px); background: var(--surface); color: var(--encre); }
.pp-acces .pp-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.pp-acces .pp-ic svg.picto { width: 1.25rem; height: 1.25rem; }

/* ---- réactivité */
@media (max-width: 1200px) { .pp-hero { grid-template-columns: 1fr; } .pp-salut h1 { font-size: 2.25rem; } }
@media (max-width: 900px) {
  .pp-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
  .pp-tuile { padding: var(--e4); }
  .pp-tuile .pp-val { font-size: 1.75rem; }
  .pp-grille { grid-template-columns: 1fr; }
  .pp-panneau { padding: var(--e4); }
  .pp-carte { grid-template-columns: auto 1fr; padding: var(--e3) var(--e3) var(--e3) var(--e4); gap: var(--e3); }
  .pp-carte .pp-droite { grid-column: 1 / -1; justify-items: stretch; }
  .pp-carte .pp-droite form, .pp-prendre { width: 100%; height: 44px; }
  .pp-parc { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-salut h1 { font-size: 1.75rem; }
  .pp-salut .pp-sous { font-size: var(--t-s); }
}
@media (max-width: 600px) { .pp-mini, .pp-anneau { display: none; } .pp-parc { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* survols réservés au pointeur fin ; au toucher, un retour à l'appui */
@media (hover: none) {
  .pp-tuile:hover, .pp-carte:hover, .pp-cell:hover, .pp-actu:hover, .pp-acces a:hover, .pp-rond:hover, .pp-bouton:hover { transform: none; }
  .pp-carte:active, .pp-actu:active, .pp-acces a:active { background: var(--surface-3); }
}

/* mouvement réduit : tout coupé, les valeurs restent, l'incident garde un halo fixe */
@media (prefers-reduced-motion: reduce) {
  .pp-aurore i, .pp-rail .pp-marque i, .entre, .pp-pouls .pp-courbe, .pp-pouls .pp-aire, .pp-pouls .pp-bille, .pp-mini path, .pp-anneau, .pp-jauge i, .pp-cell.crit i, .pp-onglets .pp-plus, .pp-rail a.actif::before, .statut.vif::after, .pp-evt .pp-pt.vif::after { animation: none !important; }
  .entre { opacity: 1; transform: none; }
  .pp-pouls .pp-courbe, .pp-mini path { stroke-dashoffset: 0; }
  .pp-pouls .pp-aire, .pp-pouls .pp-bille { opacity: 1; }
  .statut.vif::after, .pp-evt .pp-pt.vif::after { transform: scale(1.8); opacity: .35; }
  .pp-rail, .pp-rail .lib, .pp-bascule i, .pp-bouton, .pp-tuile, .pp-carte, .pp-cell, .pp-actu, .pp-acces a, .pp-rond, .pp-prendre, .pp-prendre::before, .pp-bouton::after { transition: none !important; }
}

/* ---- coquilles « application » (Courrier, Calendrier, Documents) sous la nouvelle barre haute :
   62 px (16 de marge + 46 de contrôles) au lieu des 4 rem de l'ancienne barre. */
.messagerie, .visio-page, .discussion { --hauteur-barre: 62px; }
body:has(.messagerie) .pp-haut { padding-bottom: 0; }

/* ============================================================ toutes les pages sous la coquille
   Restylage des composants partagés (en-tête, tuiles, panneaux, cadres de tableau,
   états, filtres, boutons, champs, Kanban, cartes machines) pour que Tickets, Parc,
   Supervision, fiches et formulaires parlent la même langue que l'accueil, sans
   toucher à leurs gabarits. Tout est sous `.pp-scene` : l'appel plein écran et la
   connexion, qui n'y sont pas, gardent leurs propres règles. */

/* en-tête de page */
.pp-scene .entete { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--e5); animation: pp-entre var(--d-entree) var(--sortie) both; }
.pp-scene .entete::after { display: none; }
.pp-scene .entete .surtitre { font: 500 var(--t-2) var(--donnees); letter-spacing: .1em; color: var(--encre-3); margin-bottom: var(--e2); }
.pp-scene .entete .surtitre a { color: var(--encre-3); text-decoration: none; }
.pp-scene .entete .surtitre a:hover { color: var(--action); }
.pp-scene .entete h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; align-items: center; }
.pp-scene .entete h1 .numero { font: 600 var(--t1) var(--donnees); color: var(--action); background: var(--action-doux); padding: .15rem .6rem; border-radius: 10px; letter-spacing: 0; }
.pp-scene .entete-sous { color: var(--encre-2); font-size: var(--t0); }
.pp-scene .entete .actions { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

/* boutons : pastilles, reflet, rebond */
.pp-scene .bouton, .pp-scene button:not(.lien, .icone-action, .instant, .reaction, .outil, .mini-jour, .evt-agenda, .numero-jour, .drapeau, .pp-rond, .pp-bascule, .pp-prendre, .tuile-creer, .etoile, [role="tab"], .entete-jour) {
  border-radius: var(--rond); min-height: 40px; padding: 0 var(--e4); font-weight: 600; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--rebond), box-shadow .25s, background-color .2s, color .2s;
}
.pp-scene .bouton:not(.discret, .lien)::after, .pp-scene button:not(.discret, .lien, .icone-action, .instant, .reaction, .outil, .mini-jour, .evt-agenda, .numero-jour, .drapeau, .pp-rond, .pp-bascule, .pp-prendre, .tuile-creer, .etoile, [role="tab"], .entete-jour)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--sortie); pointer-events: none; }
.pp-scene .bouton:hover::after, .pp-scene button:hover::after { transform: translateX(120%); }
.pp-scene .bouton:not(.discret):hover, .pp-scene button:not(.discret, .lien, .icone-action, .instant, .reaction, .outil, .mini-jour, .evt-agenda, .numero-jour, .drapeau, .pp-rond, .pp-bascule, .pp-prendre, .tuile-creer, .etoile, [role="tab"], .entete-jour):hover { transform: translateY(-2px); background: var(--action); color: var(--action-encre); box-shadow: 0 14px 28px -10px var(--lueur); }
.pp-scene .bouton.discret, .pp-scene button.discret { background: var(--verre); border: 1px solid var(--trait-fort); color: var(--encre); box-shadow: none; }
.pp-scene .bouton.discret:hover, .pp-scene button.discret:hover { background: var(--surface); transform: translateY(-1px); box-shadow: none; }
.pp-scene .bouton.danger, .pp-scene button.danger { background: transparent; color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.pp-scene .bouton.petit, .pp-scene button.petit { min-height: 32px; padding: 0 var(--e3); font-size: var(--t-1); }
.pp-scene button:disabled, .pp-scene .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.pp-scene .bouton:active:not(:disabled), .pp-scene button:active:not(:disabled) { transform: scale(.97); }
.pp-scene input:not([type="checkbox"], [type="radio"], [type="range"]), .pp-scene select, .pp-scene textarea { border-radius: var(--r-m); border-color: var(--trait-fort); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pp-scene input:focus-visible, .pp-scene select:focus-visible, .pp-scene textarea:focus-visible { outline: 0; border-color: var(--action); box-shadow: 0 0 0 4px var(--action-doux); }
.pp-scene .bascule-vue { border-radius: var(--rond); padding: 3px; background: var(--verre); }
.pp-scene .bascule-vue a { border-radius: var(--rond); padding: .35rem .9rem; }
.pp-scene .bascule-vue a[aria-current="page"] { background: var(--action); color: var(--action-encre); }

/* tuiles et panneaux : verre, 22 px, ombre, entrée en cascade, survol qui soulève */
.pp-scene .tuiles { gap: var(--e4); margin-bottom: var(--e5); }
.pp-scene .tuile { border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: var(--e5); overflow: hidden; animation: pp-entre var(--d-entree) var(--sortie) both; transition: transform .3s var(--rebond), border-color .3s; }
.pp-scene .tuile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--teinte, var(--action)) 20%, transparent), transparent 55%); pointer-events: none; }
.pp-scene .tuile > * { position: relative; }
.pp-scene a.tuile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--teinte, var(--action)) 45%, var(--verre-trait)); box-shadow: var(--ombre); }
.pp-scene .tuile:nth-child(1) { animation-delay: 140ms; } .pp-scene .tuile:nth-child(2) { animation-delay: 210ms; } .pp-scene .tuile:nth-child(3) { animation-delay: 280ms; } .pp-scene .tuile:nth-child(4) { animation-delay: 350ms; } .pp-scene .tuile:nth-child(5) { animation-delay: 420ms; } .pp-scene .tuile:nth-child(n+6) { animation-delay: 490ms; }
.pp-scene .tuile-libelle { font: 500 var(--t-s) var(--texte); letter-spacing: 0; text-transform: none; color: var(--encre-2); }
.pp-scene .tuile svg.picto { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: color-mix(in srgb, var(--teinte, var(--action)) 16%, transparent); color: var(--teinte, var(--action)); }
.pp-scene .tuile-valeur { font: 600 2.25rem/1 var(--donnees); letter-spacing: -.03em; color: var(--encre); }
.pp-scene .tuile-valeur small { font: 500 var(--t-s) var(--texte); color: var(--encre-3); letter-spacing: 0; }
.pp-scene .tuile-valeur small.delta { font-family: var(--donnees); font-size: var(--t-1); padding: .1rem .45rem; border-radius: var(--rond); }
.pp-scene .tuile-contexte, .pp-scene .tuile-pied { font-size: var(--t-1); color: var(--encre-3); }
.pp-scene .tuile-pied { margin: var(--e1) 0 0; padding: 0; border: 0; }
.pp-scene .mini-jauge { height: 6px; border-radius: var(--rond); }
.pp-scene .mini-jauge i { animation: pp-pousse 1.2s var(--sortie) .8s both; }
.pp-scene .panneau, .pp-scene .table-cadre, .pp-scene .kanban-colonne { border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
@media (max-width: 900px) { .pp-scene .mentions .table-cadre:has(.cartes-mobiles) { border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.pp-scene .panneau { padding: var(--e5); }
.pp-scene .bloc > h2, .pp-scene .section-tete h2, .pp-scene .panneau > h2, .pp-scene .carte-tete h2 { font-size: var(--t1); font-weight: 600; letter-spacing: -.015em; }
.pp-scene .section-supervision, .pp-scene .bloc { animation: pp-entre var(--d-entree) var(--sortie) both; animation-delay: 420ms; }
.pp-scene .cadre-tete { padding: var(--e4) var(--e5); }
.pp-scene .cadre-tete h2.micro { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); }
.pp-scene table th { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); }
.pp-scene table tbody tr { transition: background .2s; }
.pp-scene table tbody tr:hover { background: var(--surface-2); }
.pp-scene td.vide { padding: var(--e5); text-align: center; color: var(--encre-2); }
.pp-scene .etat-vide { border: 1px dashed var(--trait-fort); border-radius: var(--r-l); }

/* un seul langage d'état : .etat, .grav, .badge-entete, .voyant, .puce prennent la forme de .statut */
.pp-scene .etat, .pp-scene .grav, .pp-scene .badge-entete, .pp-scene .puce, .pp-scene .grav-etiquette { display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .7rem .15rem .55rem; border-radius: var(--rond); font: 600 var(--t-1)/1.5 var(--texte); letter-spacing: 0; text-transform: none; background: color-mix(in srgb, currentColor 13%, transparent); border: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.pp-scene .badge-entete .point { width: .5rem; height: .5rem; margin: 0; }
.pp-scene .badge-entete.direct .point, .pp-scene .grav-4::before, .pp-scene .grav-5::before, .pp-scene .voyant-down::before, .pp-scene .compteur.grave { animation: none; }
.pp-scene .etat::before, .pp-scene .grav::before { width: .5rem; height: .5rem; }
.pp-scene .grav-5 { color: #fff; background: var(--crit); border-color: var(--crit); }
.pp-scene .grav-5::before { background: #fff; }
.pp-scene .filtres { gap: var(--e2); }
.pp-scene .filtres a { border-radius: var(--rond); padding: .4rem var(--e3) .4rem var(--e4); background: var(--verre); border: 1px solid var(--trait-fort); font-weight: 500; transition: transform .2s var(--rebond), border-color .2s, background .2s; }
.pp-scene .filtres a:hover { transform: translateY(-1px); }
.pp-scene .filtre-compte { border-radius: var(--rond); padding: 0 .45rem; font-weight: 600; }
.pp-scene .filtres .point { width: .5rem; height: .5rem; margin-right: .3rem; }

/* fiches : fil des suivis, détails */
.pp-scene .fil { border-left: 2px solid var(--trait-fort); padding-left: var(--e5); }
.pp-scene .suivi { border-radius: var(--r-l); background: var(--surface-2); border-color: transparent; animation: pp-entre var(--d-entree) var(--sortie) both; }
.pp-scene .suivi.htmx-added { animation: pp-entre var(--d-apparition) var(--sortie) both; }
.pp-scene .suivi::before { width: .7rem; height: .7rem; border-width: 2px; }
.pp-scene .details { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4); margin: 0; }
.pp-scene .details dt { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); align-self: center; }
.pp-scene .details dd { margin: 0; }

/* Kanban */
.pp-scene .kanban { gap: var(--e4); }
.pp-scene .kanban-colonne { padding: var(--e3); }
.pp-scene .kanban-colonne.survolee { border-color: var(--action); background: var(--action-doux); box-shadow: 0 0 0 4px var(--action-doux); }
.pp-scene .kanban-carte { border-radius: var(--r-l); border-color: transparent; background: var(--surface-2); padding: var(--e3) var(--e4); transition: transform .25s var(--rebond), background .2s, border-color .2s; }
.pp-scene .kanban-carte:hover { transform: translateY(-2px); background: var(--surface); border-color: var(--trait-fort); }
.pp-scene .kanban-carte.deplacee { opacity: .45; transform: rotate(-1.5deg) scale(1.02); }
.pp-scene .kanban-supervision { border-left: 3px solid var(--crit); }

/* cartes machines de la Supervision */
.pp-scene .carte-machine { transition: transform .3s var(--rebond), border-color .3s; }
.pp-scene .carte-machine:hover { transform: translateY(-3px); }
.pp-scene .carte-machine.critique, .pp-scene .carte-machine.hors-ligne { border-color: color-mix(in srgb, var(--crit) 40%, var(--verre-trait)); }
.pp-scene .mesure { border-radius: var(--r-m); }
.pp-scene .table-problemes .inline { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pp-scene .table-problemes .inline input { min-height: 36px; }

/* toast de refus (remplace alert()) */
.pp-toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 30; padding: var(--e3) var(--e5); border-radius: var(--rond); background: var(--crit); color: #fff; font-weight: 600; font-size: var(--t-s); box-shadow: var(--ombre); animation: pp-toast .22s var(--sortie) both; }
.pp-toast.ok { background: var(--ok); }
@keyframes pp-toast { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 900px) { .pp-toast { bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .pp-scene .entete, .pp-scene .tuile, .pp-scene .section-supervision, .pp-scene .bloc, .pp-scene .suivi, .pp-scene .mini-jauge i, .pp-toast { animation: none !important; } }
.contenu > .pp-tuiles { margin: var(--e5) 0; }
.pp-scene .actualites-accueil a { text-decoration: none; font-weight: 600; }

/* ---- Supervision : problèmes en cartes, parc en pavés riches */
.pp-problemes { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.pp-probleme { --teinte: var(--avert); display: grid; grid-template-columns: auto 1fr auto; gap: var(--e4); align-items: center; padding: var(--e4) var(--e4) var(--e4) var(--e5); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid transparent; position: relative; transition: transform .3s var(--rebond), border-color .3s, background .3s; }
.pp-probleme.crit { --teinte: var(--crit); }
.pp-probleme::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: var(--rond); background: var(--teinte); }
.pp-probleme:hover { transform: translateX(4px); border-color: var(--trait-fort); background: var(--surface); }
.pp-probleme-corps { display: grid; gap: 2px; min-width: 0; font-size: var(--t-s); }
.pp-probleme-corps strong a { text-decoration: none; }
.pp-probleme-corps small { font-size: var(--t-1); color: var(--encre-3); }
.pp-probleme-ack { display: grid; justify-items: end; gap: var(--e1); font-size: var(--t-1); color: var(--encre-2); text-align: right; }
.pp-ack { display: flex; gap: var(--e2); margin: 0; }
.pp-ack input { min-height: 36px; width: 15rem; max-width: 40vw; font-size: var(--t-s); }
.pp-parc-riche { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--e3); }
.pp-cell-riche { aspect-ratio: auto; align-content: start; gap: var(--e3); padding: var(--e4); border-radius: var(--r-l); font-size: var(--t-s); color: var(--encre-2); }
.pp-cell-riche:hover { transform: translateY(-3px); }
.pp-cell-riche header { display: flex; align-items: center; gap: var(--e3); min-width: 0; padding-right: var(--e4); }
.pp-cell-riche header svg.picto { width: 1.4rem; height: 1.4rem; flex: none; color: var(--c); }
.pp-cell-riche header div { display: grid; min-width: 0; }
.pp-cell-riche header b { font: 600 var(--t0) var(--texte); color: var(--encre); }
.pp-cell-riche header b a { color: inherit; text-decoration: none; }
.pp-cell-riche header b a:hover { color: var(--action); }
.pp-cell-riche header small { font-size: var(--t-1); color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cell-riche > .statut { justify-self: start; }
.pp-mesures { display: grid; gap: var(--e2); }
.pp-mesures > span { display: grid; grid-template-columns: 3.2rem 1fr 3rem; align-items: center; gap: var(--e2); font-size: var(--t-1); }
.pp-mesures em { font-style: normal; color: var(--encre-3); }
.pp-mesures b { font: 600 var(--t-1) var(--donnees); color: var(--encre); text-align: right; }
.pp-cell-ligne { display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t-2); color: var(--encre-3); }
.pp-cell-ligne b { color: var(--encre-2); }
.pp-cell-riche footer { display: flex; gap: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--trait); font-size: var(--t-1); }
.pp-cell-riche footer a { color: var(--encre-2); text-decoration: none; font-weight: 500; }
.pp-cell-riche footer a:hover, .pp-cell-riche footer a:last-child { color: var(--action); }
.pp-cell-riche footer a:last-child { margin-left: auto; font-weight: 600; }
.pp-table-resolus td, .pp-table-resolus th { padding-left: 0; padding-right: var(--e4); }
/* un rafraîchissement htmx ne rejoue jamais les entrées ni les compteurs */
.pp-sans-entree .entre, .pp-sans-entree .pp-anneau, .pp-sans-entree .pp-jauge i, .pp-sans-entree .pp-mini path, .pp-sans-entree .tuile { animation: none !important; }
@media (max-width: 900px) {
  .pp-probleme { grid-template-columns: auto 1fr; }
  .pp-probleme-ack { grid-column: 1 / -1; justify-items: stretch; text-align: left; }
  .pp-ack { flex-wrap: wrap; } .pp-ack input { width: 100%; max-width: none; } .pp-ack button { width: 100%; min-height: 44px; }
  .pp-parc-riche { grid-template-columns: 1fr; }
}

/* ---- Visio : coquille (rail des salons, centre, côté), accueil, bannière de salon, bulles */
.pp-scene .visio-page { gap: var(--e5); }
.pp-scene .visio-rail .panneau, .pp-scene .visio-cote .panneau { padding: var(--e4); }
.pp-scene .rail-titre { font: 600 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); }
.pp-scene .instant { border-radius: var(--r-l); transition: transform .25s var(--rebond), background .2s, border-color .2s; min-height: 0; padding: var(--e3) var(--e1); }
.pp-scene .instant::after { display: none; }
.pp-scene .instant:hover { transform: translateY(-3px); box-shadow: none; }
.pp-scene .instant svg { border-radius: 12px; }
.pp-scene .rail-salons a { border-radius: 14px; transition: transform .2s var(--rebond), background .2s; }
.pp-scene .rail-salons a:hover { transform: translateX(3px); }
.pp-scene .rail-salons a[aria-current="page"] { background: var(--action-doux); border-color: transparent; }
.pp-scene .salon-icone { border-radius: 10px; }
.pp-scene .compteur-non-lus { font: 700 var(--t-2) var(--donnees); }
.pp-scene .rail-collegues li { border-radius: 12px; }
.pp-avis { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-l); background: color-mix(in srgb, var(--avert) 10%, transparent); border: 1px solid color-mix(in srgb, var(--avert) 30%, transparent); font-size: var(--t-s); color: var(--encre-2); }
.pp-visio-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e4); }
.pp-visio-hero .pp-panneau { display: grid; gap: var(--e3); align-content: start; }
.pp-visio-hero .surtitre { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); }
.pp-visio-hero h2 { font-size: var(--t2); font-weight: 700; letter-spacing: -.02em; }
.pp-visio-hero p { margin: 0; }
.pp-reunion { position: relative; overflow: hidden; }
.pp-reunion::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--action) 22%, transparent), transparent 60%); pointer-events: none; }
.pp-reunion > * { position: relative; }
.pp-bouton.grand { height: 56px; padding: 0 var(--e6); font-size: var(--t0); justify-self: start; }
.pp-bouton.grand svg.picto { width: 1.35rem; height: 1.35rem; }
.pp-rejoindre input { font-size: var(--t0); }
.pp-rejoindre .pp-bouton { justify-self: start; }
.pp-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); cursor: pointer; }
.pp-details > summary::-webkit-details-marker { display: none; }
.pp-details > summary h2 { font-size: var(--t1); font-weight: 600; display: flex; align-items: center; gap: var(--e2); }
.pp-details > summary::after { content: ""; width: .55rem; height: .55rem; border: solid var(--encre-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s var(--sortie); margin-left: var(--e2); }
.pp-details[open] > summary::after { transform: rotate(-135deg); }
.pp-details > form { margin-top: var(--e4); animation: pp-entre var(--d-apparition) var(--sortie) both; }
.pp-details .secondaire { font-size: var(--t-s); }
.pp-banniere { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); padding: var(--e4) var(--e5); position: relative; overflow: hidden; animation: pp-entre var(--d-entree) var(--sortie) both; }
.pp-banniere.en-direct { border-color: color-mix(in srgb, var(--ok) 40%, var(--verre-trait)); }
.pp-banniere.en-direct::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--ok) 18%, transparent), transparent 60%); pointer-events: none; }
.pp-banniere > * { position: relative; }
.pp-banniere-icone { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--action-doux); color: var(--action); flex: none; }
.pp-banniere.en-direct .pp-banniere-icone { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pp-banniere-icone svg.picto { width: 1.5rem; height: 1.5rem; }
.pp-banniere-texte { flex: 1; min-width: 14rem; }
.pp-banniere-texte .surtitre { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); display: block; margin-bottom: var(--e1); }
.pp-banniere-texte h1 { font-size: var(--t2); font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.pp-banniere-texte p { margin: var(--e1) 0 0; font-size: var(--t-s); }
.pp-banniere-actions { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pp-scene .visio-page.avec-cote .pp-banniere { grid-column: 2 / -1; }
.pp-scene .discussion { overflow: hidden; }
.pp-scene .fil-messages .bulle:not(.systeme) { border-radius: var(--r-l); border-color: transparent; }
.pp-scene .fil-messages .bulle.htmx-added { animation: pp-entre var(--d-apparition) var(--sortie) both; }
.pp-scene .composeur textarea { border-radius: var(--r-l); }
.pp-scene .composeur button { border-radius: var(--rond); }
.pp-scene .bulle-actions { border-radius: var(--rond); padding: 2px 4px; }
.pp-scene .bulle-actions .reaction { border-radius: var(--rond); }
@media (hover: hover) and (pointer: fine) { .pp-scene .bulle:hover .bulle-actions, .pp-scene .bulle:focus-within .bulle-actions { display: flex; } }
@media (hover: none) { .pp-scene .bulle:focus-within .bulle-actions { display: flex; } }
@media (max-width: 1200px) { .pp-visio-hero { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .pp-scene .visio-page, .pp-scene .visio-page.avec-cote { grid-template-columns: 1fr; } .pp-scene .visio-page.avec-cote .visio-rail { grid-row: auto; order: 9; } .pp-scene .visio-page.avec-cote .pp-banniere { grid-column: auto; } .pp-banniere-actions .pp-bouton { width: 100%; justify-content: center; } }
.pp-details > summary h2 svg.picto { width: 1.2rem; height: 1.2rem; }
.pp-scene .pastille-direct, .pp-scene .pastille-ligne { white-space: nowrap; border-radius: var(--rond); }
.pp-avis.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.pp-scene .fiche { gap: var(--e5); }
.pp-scene .fiche .pp-panneau.formulaire { max-width: none; }
.pp-scene .plaque-grande { font-size: var(--t2); }
.pp-scene .jeton { font: 600 var(--t1) var(--donnees); padding: var(--e4); border-radius: var(--r-l); background: var(--surface-2); border: 1px dashed var(--trait-fort); overflow-wrap: anywhere; user-select: all; }
.pp-scene pre { border-radius: var(--r-l); padding: var(--e4); background: var(--surface-2); overflow-x: auto; }

/* ======================================================= Parc */
.pp-recherche-parc { padding: var(--e3) var(--e4); margin: var(--e5) 0 var(--e4); }
.pp-recherche-parc input[type="search"] { width: 100%; border-radius: var(--rond); height: 44px; padding: 0 var(--e4); }
.pp-tuile .point { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin: 0 .3rem 0 0; vertical-align: middle; }
.pp-tuile .barre-repartition { width: 100%; height: 6px; margin: var(--e1, 2px) 0 0; }
.pp-inventaire { margin-top: var(--e4); }
.pp-inventaire .table-cadre { background: none; border: 0; box-shadow: none; margin: 0 calc(-1 * var(--e5)) calc(-1 * var(--e5)); border-radius: 0 0 var(--r-xl) var(--r-xl); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pp-inventaire .table-parc tbody tr { transition: background-color .2s; }
.pp-inventaire .table-parc tbody tr:hover { background: color-mix(in srgb, var(--action) 6%, transparent); }
.pp-inventaire .table-parc td .statut { white-space: nowrap; }
.pp-inventaire .pp-cell-riche .pp-cell-ligne { display: flex; flex-wrap: wrap; }
.pp-inventaire .pp-cell-riche .pp-cell-ligne.donnee { font-family: var(--donnees); }
.pp-cartes-parc .carte-parc { padding: var(--e5); gap: var(--e2); }
.pp-cartes-parc .carte-parc header svg.picto { width: 38px; height: 38px; border-radius: 12px; }
.pp-cartes-parc .carte-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }

/* ======================================================= Documents */
.pp-scene .app-fichiers { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e5); }
.pp-scene .app-nav.pp-panneau { top: var(--e5); min-height: calc(100dvh - 9rem); padding: var(--e4); gap: var(--e4); }
.pp-scene .app-nav .surtitre { font: 500 var(--t-2) var(--donnees); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); padding: 0 var(--e2); }
.pp-scene .app-nav a { position: relative; height: 44px; padding: 0 var(--e3); border-radius: 14px; font-weight: 500; color: var(--encre-2); transition: background-color .2s, color .2s, transform .2s var(--sortie); }
.pp-scene .app-nav a:hover { background: var(--surface-2); color: var(--encre); transform: translateX(2px); }
.pp-scene .app-nav a[aria-current="page"] { background: var(--action-doux); color: var(--action); box-shadow: none; }
.pp-scene .app-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--action); box-shadow: 0 0 14px var(--lueur); }
.pp-scene .app-nav-pied { display: grid; gap: var(--e3); }
.pp-stockage { display: flex; align-items: center; gap: var(--e3); margin: 0; padding: var(--e3); border-radius: var(--r-l); background: var(--surface-2); }
.pp-stockage svg.picto { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--action-doux); color: var(--action); flex: none; }
.pp-stockage span { display: grid; }
.pp-stockage strong { font-size: var(--t1); color: var(--encre); }
.pp-stockage small { font-size: var(--t-2); color: var(--encre-3); }
.pp-scene .app-nav-pied .pp-bouton { width: 100%; justify-content: center; }
.pp-scene .barre-fichiers { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.pp-scene .barre-fichiers .fil-dossier { margin: 0 0 var(--e2); display: flex; flex-wrap: wrap; gap: .4rem; font-weight: 500; line-height: 1.4; }
.pp-scene .barre-fichiers .fil-dossier a { color: var(--encre-3); font-weight: 500; text-decoration: none; }
.pp-scene .barre-fichiers .fil-dossier a:hover { color: var(--action); text-decoration: none; }
.pp-scene .barre-fichiers .fil-dossier .sep { color: var(--encre-3); }
.pp-scene .barre-fichiers .actions { display: flex; align-items: center; gap: var(--e3); }
.pp-scene .pp-bascule-fichiers { margin: 0; padding: 3px; gap: 2px; border: 1px solid var(--trait-fort); border-radius: var(--rond); background: var(--verre); }
.pp-scene .pp-bascule-fichiers .outil { width: 40px; height: 36px; border-radius: var(--rond); display: grid; place-items: center; padding: 0; }
.pp-scene .pp-bascule-fichiers .outil[aria-pressed="true"] { background: var(--action); color: var(--action-encre); box-shadow: none; }
.pp-liste-fichiers { padding: 0; }
.pp-liste-fichiers .entete-liste { padding: var(--e2) 0; font: 500 var(--t-2) var(--donnees); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.pp-liste-fichiers .fichier { border-top-color: var(--trait); border-radius: 12px; transition: background-color .2s, transform .25s var(--rebond); }
@media (hover: hover) and (pointer: fine) { .pp-liste-fichiers .fichier:hover { background: color-mix(in srgb, var(--action) 7%, transparent); } }
.pp-liste-fichiers .fichier .taille, .pp-liste-fichiers .fichier .quand { font-family: var(--donnees); font-size: var(--t-1); color: var(--encre-3); }
.pp-liste-fichiers .vide-fichiers { margin: var(--e3) 0; }
.pp-liste-fichiers .etoile { box-shadow: none; background: none; }
.vue-grille .pp-liste-fichiers { padding: 0; }
.vue-grille .pp-liste-fichiers .fichier { border: 1px solid var(--trait); border-radius: var(--r-l); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .vue-grille .pp-liste-fichiers .fichier:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--action) 45%, var(--trait)); } }
@media (max-width: 900px) {
  .pp-scene .app-fichiers { grid-template-columns: minmax(0, 1fr); }
  .pp-scene .app-nav.pp-panneau { min-height: 0; min-width: 0; padding: var(--e2); }
  .pp-scene .app-nav .surtitre, .pp-scene .app-nav-pied { display: none; }
  .pp-scene .app-nav a { white-space: nowrap; }
}

/* ======================================================= Courrier et Calendrier (coquille .messagerie)
   Le rail principal porte déjà Courrier et Calendrier : plus de rail interne.
   Les volets deviennent des panneaux de verre posés sur l'aurore. */
body:has(.messagerie) .pp-scene > .contenu { padding: 0 var(--e6) var(--e4); }
.pp-scene .messagerie {
  grid-template-columns: minmax(13rem, 15.5rem) minmax(20rem, 27rem) minmax(0, 1fr);
  grid-template-areas: "ruban ruban ruban" "dossiers liste lecture";
  gap: var(--e3);
  height: calc(100dvh - var(--hauteur-barre) - var(--e4));
  background: none;
}
.pp-scene .appli-agenda { grid-template-columns: minmax(14rem, 16.5rem) minmax(0, 1fr); grid-template-areas: "ruban ruban" "dossiers grille"; }
.pp-scene .messagerie[data-volet="masque"] { grid-template-columns: minmax(13rem, 15.5rem) minmax(0, 1fr) 0; }
.pp-scene .messagerie[data-volet="masque"].avec-selection { grid-template-columns: minmax(13rem, 15.5rem) 0 minmax(0, 1fr); }
.pp-scene .messagerie > .ruban-messagerie, .pp-scene .messagerie > .volet-dossiers, .pp-scene .messagerie > .volet-liste, .pp-scene .messagerie > .volet-lecture, .pp-scene .messagerie > .volet-grille {
  background: var(--verre); border: 1px solid var(--verre-trait); border-radius: var(--r-xl); box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow: hidden;
}
.pp-scene .messagerie > .volet-dossiers, .pp-scene .messagerie > .volet-lecture { overflow-y: auto; }
/* Ruban : onglets en pastille à gauche, outils à droite, sur une seule bande. */
.pp-scene .messagerie .ruban-messagerie { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); margin-top: var(--e3); }
.pp-scene .messagerie .onglets-ruban { flex-direction: column; gap: 2px; padding: 3px; border: 0; border-radius: 14px; background: var(--surface-2); }
.pp-scene .messagerie .onglets-ruban [role="tab"] { min-height: 0; box-shadow: none; padding: .25rem .8rem; border-radius: 10px; background: none; color: var(--encre-2); font-size: var(--t-1); font-weight: 600; }
.pp-scene .messagerie .onglets-ruban [role="tab"]:hover { background: var(--surface-3); color: var(--encre); }
.pp-scene .messagerie .onglets-ruban [role="tab"][aria-selected="true"] { background: var(--action); color: var(--action-encre); }
.pp-scene .messagerie .ruban { flex: 1; min-width: 0; background: none; border: 0; }
.pp-scene .messagerie .ruban [role="tabpanel"] { padding: 0; min-height: 3.6rem; align-items: center; }
.pp-scene .messagerie .groupe-ruban { border-right-color: var(--trait); }
.pp-scene .messagerie .outil { border-radius: 12px; color: var(--encre-2); transition: background-color .2s, color .2s, transform .2s var(--rebond); }
.pp-scene .messagerie .outil:hover { background: var(--surface-2); color: var(--encre); }
.pp-scene .messagerie.avec-selection [data-besoin-message] .outil:hover { transform: translateY(-2px); }
.pp-scene .messagerie button.nouveau-message { height: 46px; padding: 0 var(--e5); border: 0; border-radius: var(--rond); background: var(--action); color: var(--action-encre); box-shadow: 0 10px 26px -10px var(--lueur); transition: transform .25s var(--rebond), box-shadow .25s; }
.pp-scene .messagerie button.nouveau-message:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--lueur); }
.pp-scene .messagerie.htmx-request .ruban-messagerie::after { bottom: 0; border-radius: 2px; box-shadow: 0 0 10px var(--lueur); }
/* Dossiers */
.pp-scene .messagerie .volet-dossiers { padding: var(--e4) var(--e3); border-right: 0; }
.pp-scene .messagerie .compte-courrier > summary { font: 500 var(--t-2) var(--donnees); letter-spacing: .06em; color: var(--encre-3); text-transform: none; }
.pp-scene .messagerie a.dossier { position: relative; height: 40px; padding-block: 0; border-radius: 12px; color: var(--encre-2); font-weight: 500; transition: background-color .2s, color .2s, transform .2s var(--sortie); }
@media (hover: hover) and (pointer: fine) { .pp-scene .messagerie a.dossier:hover { background: var(--surface-2); color: var(--encre); transform: translateX(2px); } }
.pp-scene .messagerie a.dossier.actif { background: var(--action-doux); color: var(--action); font-weight: 600; }
.pp-scene .messagerie a.dossier.actif::before { content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 4px; border-radius: 4px; background: var(--action); box-shadow: 0 0 14px var(--lueur); }
.pp-scene .messagerie .non-lus-dossier { min-width: 1.5rem; padding: 0 .4rem; border-radius: var(--rond); background: var(--action); color: var(--action-encre); font: 600 var(--t-2)/1.5rem var(--donnees); text-align: center; }
.pp-scene .messagerie .erreur-compte { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); }
.pp-scene .messagerie .gerer-comptes a { color: var(--action); text-decoration: none; font-weight: 500; }
/* Liste */
.pp-scene .messagerie .volet-liste { border-right: 0; }
.pp-scene .messagerie .liste-entete { padding: var(--e4) var(--e4) var(--e3); border-bottom-color: var(--trait); }
.pp-scene .messagerie .titre-dossier { font-size: var(--t1); font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--e2); }
.pp-scene .messagerie .titre-dossier small { padding: .1rem .55rem; border-radius: var(--rond); background: var(--action-doux); font: 600 var(--t-2) var(--donnees); }
.pp-scene .messagerie .recherche-courrier input { height: 40px; border-radius: var(--rond); padding-left: 2.2rem; }
.pp-scene .messagerie .recherche-courrier svg.picto { left: .85rem; }
.pp-scene .messagerie .filtres-courrier a { padding: .3rem .75rem; border-radius: var(--rond); font-weight: 500; }
.pp-scene .messagerie .filtres-courrier a[aria-current] { background: var(--action); color: var(--action-encre); }
.pp-scene .messagerie .groupe-date { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 var(--t-2) var(--donnees); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); border-bottom: 0; padding: var(--e3) var(--e4) var(--e2); }
.pp-scene .messagerie .ligne-message { margin: 0 var(--e2) 2px; border: 0; border-radius: 14px; padding: var(--e3); transition: background-color .2s, transform .25s var(--rebond); }
@media (hover: hover) and (pointer: fine) { .pp-scene .messagerie .ligne-message:hover { background: var(--surface-2); transform: translateX(3px); } }
.pp-scene .messagerie .ligne-message.actif { background: var(--action-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 35%, transparent); }
.pp-scene .messagerie .ligne-message.non-lu::before { left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; box-shadow: 0 0 12px var(--lueur); }
.pp-scene .messagerie .ligne-message time { font: 500 var(--t-2) var(--donnees); }
.pp-scene .messagerie .avec-indicateur { background: color-mix(in srgb, var(--crit) 7%, transparent); }
/* Lecture */
.pp-scene .messagerie .lecture { padding: var(--e5) var(--e5) var(--e6, 2.5rem); }
.pp-scene .messagerie .objet-lecture { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; }
.pp-scene .messagerie .lecture-vide > svg.picto { width: 64px; height: 64px; padding: 16px; border-radius: 20px; background: var(--surface-2); color: var(--encre-3); stroke-width: 1.5; }
@media (max-width: 1100px) {
  .pp-scene .messagerie { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); grid-template-areas: "ruban ruban" "liste lecture"; }
  .pp-scene .appli-agenda { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ruban" "grille"; }
  .pp-scene .appli-agenda .volet-agendas { display: none; }
}
@media (max-width: 900px) {
  body:has(.messagerie) .pp-scene > .contenu { padding: 0 var(--e3) 96px; }
  .pp-scene .messagerie { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "ruban" "liste"; height: calc(100dvh - var(--hauteur-barre) - 96px); }
  .pp-scene .messagerie.avec-selection { grid-template-areas: "ruban" "lecture"; }
  .pp-scene .appli-agenda, .pp-scene .appli-agenda.avec-selection { grid-template-areas: "ruban" "grille"; }
  .pp-scene .messagerie .ruban-messagerie { margin-top: var(--e2); }
  .pp-scene .messagerie .onglets-ruban { display: none; }
  .pp-scene .messagerie .volet-lecture, .pp-scene .messagerie .volet-dossiers { display: none; }
  .pp-scene .messagerie.avec-selection .volet-liste { display: none; }
  .pp-scene .messagerie.avec-selection .volet-lecture { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-scene .messagerie .ligne-message, .pp-scene .messagerie a.dossier, .pp-scene .messagerie .outil, .pp-scene .messagerie button.nouveau-message { transition: none; }
}
.pp-scene .volet-agendas .titre-volet { font: 500 var(--t-2) var(--donnees); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); margin: var(--e4) var(--e2) var(--e2); }
.pp-scene .volet-agendas .liste-agendas li { border-radius: 12px; padding: var(--e2); }
.pp-scene .volet-agendas details > summary { border-radius: 12px; padding: var(--e2); color: var(--action); font-weight: 500; }
.pp-scene .messagerie > .volet-grille { overflow: hidden; }


/* ======================================================= Fiche d'un ordinateur */
.pp-scene .fiche { gap: var(--e4); }
.pp-scene .fiche > div, .pp-scene .fiche > aside { display: grid; gap: var(--e4); align-content: start; }
.pp-scene .fiche .pp-panneau { margin: 0; }
.pp-scene .fiche .pp-panneau .details { margin: 0; }
.pp-scene .fiche .problemes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pp-scene .fiche .problemes li { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e2) var(--e3); border-radius: 12px; }
.pp-scene .fiche .problemes li:hover { background: var(--surface-2); }
.pp-scene .entete .entete-sous .statut { vertical-align: middle; }
.pp-bouton.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.pp-bouton.danger:hover { color: #fff; background: var(--crit); border-color: var(--crit); }
@media (max-width: 900px) { .pp-scene .fiche { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================= Appel plein écran (hors coquille)
   Même palette que le reste : canevas Obsidian, aurore, verre ; la barre de
   commandes flotte en pilule au lieu de coller au bas de l'écran. Toujours sombre. */
.appel {
  --fond: #060E20; --tuile: #131B2E; --barre: rgb(15 23 44 / .72); --texte: #E2E8F0; --muet-appel: #94A3B8;
  --rouge: #EF4444; --vert: #10B981; --bleu: #38BDF8;
  color-scheme: dark;
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgb(56 189 248 / .14), transparent 60%),
    radial-gradient(50rem 36rem at 110% 110%, rgb(139 92 246 / .14), transparent 60%),
    var(--fond);
}
.appel .avant-apercu, .appel .tuile { border-radius: 22px; border: 1px solid rgb(148 163 184 / .14); }
.appel .tuile.parle { outline-color: var(--vert); box-shadow: 0 0 24px rgb(16 185 129 / .35); }
.appel .tuile-avatar { background: linear-gradient(135deg, #38BDF8, #8B5CF6); }
.appel .tuile figcaption { border-radius: 999px; padding: .25rem .65rem; background: rgb(6 14 32 / .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.appel .avant-reglages select { border-radius: 14px; border-color: rgb(148 163 184 / .22); height: 44px; }
.appel .panneau-appel { border-radius: 22px; background: rgb(15 23 44 / .72); border: 1px solid rgb(148 163 184 / .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.appel .commandes {
  margin: 0 auto .9rem; width: min(100% - 1.5rem, 64rem); padding: .4rem .6rem; border-radius: 999px;
  background: var(--barre); border: 1px solid rgb(148 163 184 / .16); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .7);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.appel .commande { border-radius: 999px; transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.appel .commande:hover { transform: translateY(-2px); }
.appel .commande[aria-pressed="true"] { background: rgb(56 189 248 / .16); color: #38BDF8; }
.appel .commande.partager[aria-pressed="true"] { background: var(--vert); color: #fff; }
.appel .salle-haut { padding: .8rem 1.1rem; }
.appel .salle-nom { font-size: 1.05rem; letter-spacing: -.01em; }
.appel .salle-duree { font-family: var(--donnees); }
@media (prefers-reduced-motion: reduce) { .appel .commande { transition: none; } .appel .commande:hover { transform: none; } }

/* ======================================================= Pages secondaires */
/* Administration : tous les panneaux d'une page à la même largeur (UI-09). */
.pp-scene .administration .panneau.formulaire, .pp-scene .administration form.panneau { max-width: none; }
.pp-scene .administration .titre-menu-admin { font: 500 var(--t-2) var(--donnees); letter-spacing: .1em; color: var(--encre-3); }
/* Mon compte : identité en tête, puis deux colonnes (UI-07). */
.pp-identite { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e4); }
.pp-identite-avatar { width: 56px; height: 56px; flex: none; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--action), var(--violet)); color: #fff; font: 700 var(--t1) var(--texte); box-shadow: 0 10px 26px -10px var(--lueur); }
.pp-identite > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pp-identite strong { font-size: var(--t1); }
.pp-compte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
.pp-compte > .pp-panneau { margin: 0; max-width: none; }
.pp-compte > .pp-compte-large { grid-column: 1 / -1; }
@media (max-width: 900px) { .pp-compte { grid-template-columns: minmax(0, 1fr); } }
/* Sélecteur segmenté (Apparence) : seul le choix actif est plein. */
.pp-scene .bascule button:not([aria-pressed="true"]) { background: none; box-shadow: none; color: var(--encre-2); }
.pp-scene .bascule button:not([aria-pressed="true"])::after { display: none; }

/* ======================================================= Sécurité */
.pp-sousmenu { margin-top: var(--e5); }
.pp-score { display: grid; gap: var(--e4); }
.pp-score-corps { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--e5); align-items: center; }
.pp-score-anneau { --c: var(--muet); width: 148px; height: 148px; border-radius: 50%; position: relative; display: grid; place-items: center; align-content: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); box-shadow: 0 0 32px -8px color-mix(in srgb, var(--c) 60%, transparent); }
.pp-score-anneau::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.pp-score-anneau b, .pp-score-anneau small { position: relative; z-index: 1; text-align: center; }
.pp-score-anneau b { font: 700 2.6rem/1 var(--donnees); color: var(--encre); }
.pp-score-anneau small { font: 500 var(--t-2) var(--donnees); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); margin-top: 4px; }
.pp-score-anneau.ok { --c: var(--ok); } .pp-score-anneau.avert { --c: var(--avert); } .pp-score-anneau.crit { --c: var(--crit); }
.pp-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-score .pp-controles { max-height: 22rem; overflow-y: auto; }
.pp-controles li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: 14px; background: var(--surface-2); }
.pp-controles li span:nth-child(2) { display: grid; }
.pp-controles li b { font-weight: 600; font-size: var(--t-s); }
.pp-controles li small { font-size: var(--t-1); color: var(--encre-3); }
.pp-controles li.conforme { background: none; padding-block: 4px; }
.pp-controles li.conforme b { font-weight: 500; color: var(--encre-2); }
.pp-ports, .pp-sessions, .pp-actions-comptes, .pp-surveille { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pp-ports li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3); border-radius: 14px; background: var(--surface-2); }
.pp-ports li span:nth-child(2) { color: var(--encre-2); font-size: var(--t-s); }
.pp-sessions li, .pp-actions-comptes li { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3); border-radius: 14px; background: var(--surface-2); border: 1px solid transparent; }
.pp-sessions li.ici { border-color: color-mix(in srgb, var(--action) 45%, transparent); background: var(--action-doux); }
.pp-sessions li > span:first-child, .pp-actions-comptes li > span:first-child { display: grid; min-width: 0; }
.pp-sessions small, .pp-actions-comptes small { font-size: var(--t-1); color: var(--encre-3); }
.pp-actions-ip { display: flex; gap: var(--e3); }
.pp-bloquer { display: flex; gap: var(--e2); margin-top: var(--e3); }
.pp-bloquer input { flex: 1; min-width: 0; border-radius: var(--rond); }
.pp-surveille li { display: flex; gap: var(--e2); align-items: baseline; font-size: var(--t-s); color: var(--encre-2); }
.pp-journal { margin: 0 calc(-1 * var(--e5)); background: none; border: 0; box-shadow: none; }
.pp-journal td { vertical-align: middle; }
.pp-qui { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 600; }
.pp-qui .avatar { width: 28px; height: 28px; font-size: .7rem; background: linear-gradient(135deg, var(--action), var(--violet)); color: #fff; }
.pp-journal .sous { display: block; font-size: var(--t-1); color: var(--encre-3); }
.pp-postes-secu { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--e3); }
.pp-poste-secu { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid var(--trait); text-decoration: none; color: inherit; transition: transform .25s var(--rebond), border-color .2s; }
.pp-poste-secu:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--action) 45%, var(--trait)); color: inherit; }
.pp-poste-secu small { color: var(--encre-3); font-size: var(--t-1); }
.pp-faits { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-fait { font-size: var(--t-2); padding: 2px 8px; border-radius: var(--rond); border: 1px solid var(--trait-fort); color: var(--encre-3); }
.pp-fait.connu { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); }
.pp-fait.a-corriger { border-color: color-mix(in srgb, var(--crit) 45%, transparent); color: var(--crit); }
.pp-actions-compte { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; justify-content: flex-end; }
.pp-actions-compte form { margin: 0; }
.pagination { display: flex; gap: var(--e4); justify-content: center; align-items: center; margin-top: var(--e3); font-size: var(--t-s); }
@media (max-width: 900px) {
  .pp-score-corps { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pp-journal { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-poste-secu { transition: none; } }
.pp-salut .surtitre { display: block; font: 500 var(--t-2) var(--donnees); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); margin-bottom: var(--e3); }
.pp-salut .pp-sous strong { font-weight: 600; }
.pp-panneau > .filtres { margin: 0 0 var(--e3); }

/* ---- fiche parc : état de santé */
.pp-fiche { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); }
.pp-fiche > .pp-colonne > :first-child { margin-top: 0; }
.pp-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.pp-jauges .jauge { padding: var(--e3) var(--e4); border-radius: var(--r-l); background: var(--surface-2); }
.pp-jauges .jauge-tete { font-size: var(--t-s); }
.pp-jauges .jauge-piste { height: 8px; border-radius: var(--rond); background: var(--surface-3); }
.pp-jauges .jauge-valeur { border-radius: var(--rond); animation: pp-pousse 1.2s var(--sortie) .6s both; }
.pp-courbes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.pp-courbes figure { margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-l); background: var(--surface-2); }
.pp-courbes figcaption { font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); margin-bottom: var(--e2); }
.pp-courbes .courbe { width: 100%; height: 60px; display: block; }
.pp-courbes .courbe polyline { fill: none; stroke: var(--action); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pp-scene .verifications { display: grid; gap: var(--e2); margin: 0 0 var(--e4); padding: 0; list-style: none; }
.pp-scene .verifications li { display: flex; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: 12px; background: var(--surface-2); font-size: var(--t-s); }
.pp-scene .etat-verif { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .15rem .7rem .15rem .55rem; border-radius: var(--rond); font: 600 var(--t-1)/1.5 var(--texte); --c: var(--muet); color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
.pp-scene .etat-verif::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.pp-scene .verifications li.ok .etat-verif { --c: var(--ok); } .pp-scene .verifications li.echec .etat-verif { --c: var(--crit); } .pp-scene .verifications li.attente .etat-verif { --c: var(--muet); }
.pp-faits { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: var(--e4); }
.pp-faits > summary { padding: var(--e3) var(--e4); border-radius: var(--r-l); background: var(--surface-2); }
.pp-faits > summary h2 { font-weight: 600; margin: 0; }
.pp-faits-liste { margin-top: var(--e3) !important; padding: 0 var(--e4); grid-template-columns: minmax(9rem, auto) 1fr !important; }
.pp-faits-liste dd { font-size: var(--t-s); overflow-wrap: anywhere; }
.pp-pied-sante { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; padding-top: var(--e3); border-top: 1px solid var(--trait); }
.pp-pied-sante select { height: 36px; border-radius: var(--rond); padding: 0 var(--e3); font-size: var(--t-s); }
@media (max-width: 900px) { .pp-fiche { grid-template-columns: 1fr; } }
.pp-pied-sante .pp-bouton { white-space: nowrap; }
/* Pied de l'état de santé : le formulaire de maintenance garde sa taille et passe à la ligne. */
.pp-pied-sante .pp-ack { display: flex; flex-wrap: wrap; gap: var(--e2); flex: 0 1 auto; max-width: 100%; }
.pp-pied-sante .pp-ack select { width: auto; flex: none; }
.pp-pied-sante .pp-ack button { flex: none; white-space: nowrap; }

/* ---- fiche ticket : fil et réponse */
.pp-fil { border-left: 0; padding: 0; margin: 0 0 var(--e4); display: grid; gap: var(--e3); }
.pp-fil .suivi { margin: 0; padding: var(--e4); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid transparent; }
.pp-fil .suivi::before { display: none; }
.pp-fil .suivi.prive { background: color-mix(in srgb, var(--avert) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--avert) 30%, transparent); }
.pp-fil .suivi.ia { border-left: 3px solid var(--action); }
.pp-fil .suivi header { align-items: center; gap: var(--e2) var(--e3); margin-bottom: var(--e2); }
.pp-fil .suivi header strong { font-size: var(--t0); }
.pp-fil .suivi header .secondaire { font-size: var(--t-1); }
.pp-fil .suivi .texte { font-size: var(--t-s); }
.pp-fil .pp-evenement { margin: 0; padding: 0 var(--e3); color: var(--encre-3); font-size: var(--t-1); }
.pp-fil .pp-evenement::before { display: none; }
.pp-fil .pp-evenement small { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pp-fil .pp-evenement.attente small { animation: none; }
.pp-reponse { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; padding-top: var(--e4); border-top: 1px solid var(--trait); }
.pp-reponse .avatar { width: 36px; height: 36px; font-size: var(--t-1); }
.pp-reponse-champ { display: grid; gap: var(--e2); }
.pp-reponse textarea { width: 100%; border-radius: var(--r-l); resize: vertical; min-height: 5rem; }
.pp-reponse-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; font-size: var(--t-s); }
.pp-scene .description { font-size: var(--t0); line-height: 1.6; white-space: pre-wrap; }

/* ---- création de ticket */
.pp-nouveau { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.pp-choix { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.pp-choix legend { font-weight: 600; margin-bottom: var(--e2); padding: 0; }
.pp-option { --c: var(--action); display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border-radius: var(--r-l); border: 1px solid var(--trait-fort); background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--rebond); }
.pp-option:hover { transform: translateX(2px); }
.pp-option:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.pp-option input { margin: 0; accent-color: var(--c); width: 1.1rem; height: 1.1rem; }
.pp-option strong { display: block; font-weight: 600; }
.pp-option small { display: block; color: var(--encre-3); font-size: var(--t-1); }
.pp-option.avert { --c: var(--avert); } .pp-option.crit { --c: var(--crit); }
.pp-urgence { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.pp-urgence legend { grid-column: 1 / -1; }
.pp-urgence .pp-option { grid-template-columns: auto 1fr; padding: var(--e3); }
.pp-nouveau .formulaire .actions { display: flex; gap: var(--e2); align-items: center; }
@media (max-width: 900px) { .pp-nouveau { grid-template-columns: 1fr; } .pp-urgence { grid-template-columns: 1fr; } }

/* ---- Mon compte */
.pp-identite { display: flex !important; align-items: center; gap: var(--e3); }
.pp-identite .avatar { width: 48px; height: 48px; font-size: var(--t0); color: #fff; background: linear-gradient(135deg, #38BDF8, #8B5CF6); }
.pp-compte { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
.pp-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-scene button.pp-theme { min-height: 0; height: auto; padding: var(--e3); border-radius: var(--r-l); background: var(--surface); color: var(--encre); border: 1px solid var(--trait-fort); box-shadow: none; grid-template-columns: 1fr; justify-items: center; gap: var(--e2); text-align: center; font-weight: 500; }
.pp-scene button.pp-theme::after { display: none; }
.pp-scene button.pp-theme:hover { transform: translateY(-2px); background: var(--surface); color: var(--encre); box-shadow: none; }
.pp-scene button.pp-theme[aria-pressed="true"] { border-color: var(--action); background: var(--action-doux); box-shadow: 0 0 0 4px var(--action-doux); }
.pp-theme-apercu { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--trait-fort); background: linear-gradient(135deg, #F1F5F9 50%, #050B1A 50%); }
.pp-theme-apercu.clair { background: linear-gradient(#FFFFFF, #EEF2F7); }
.pp-theme-apercu.sombre { background: linear-gradient(#0F172C, #050B1A); }
@media (max-width: 900px) { .pp-compte { grid-template-columns: 1fr; } }
.pp-scene button.pp-theme { overflow: visible; display: grid; }

/* ---- Administration : menu latéral en panneau, corps en panneaux */
.pp-administration { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e5); }
.pp-menu-admin { top: var(--e4); padding: var(--e3); border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: pp-entre var(--d-entree) var(--sortie) both; }
.pp-menu-admin .titre-menu-admin { display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); margin: 0 0 var(--e1); font: 600 var(--t-2) var(--donnees); letter-spacing: .1em; color: var(--encre-3); }
.pp-menu-admin .titre-menu-admin svg.picto { width: 1rem; height: 1rem; }
.pp-menu-admin ul { gap: 2px; margin-bottom: var(--e3); }
.pp-menu-admin a { position: relative; border-left: 0; border-radius: 12px; padding: .5rem var(--e3); font-size: var(--t-s); font-weight: 500; color: var(--encre-2); transition: background .2s, color .2s, transform .2s var(--sortie); }
.pp-menu-admin a:hover { background: var(--surface-2); color: var(--encre); transform: translateX(2px); }
.pp-menu-admin a[aria-current="page"] { background: var(--action-doux); color: var(--action); font-weight: 600; }
.pp-menu-admin a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 14px var(--lueur); }
.corps-admin > .panneau, .corps-admin > form.panneau, .corps-admin > section.panneau, .corps-admin > .table-cadre { margin: 0 0 var(--e5); animation: pp-entre var(--d-entree) var(--sortie) both; }
.corps-admin > *:nth-child(2) { animation-delay: 80ms; } .corps-admin > *:nth-child(3) { animation-delay: 160ms; } .corps-admin > *:nth-child(4) { animation-delay: 240ms; } .corps-admin > *:nth-child(n+5) { animation-delay: 320ms; }
.corps-admin .formulaire { max-width: none; }
.corps-admin .panneau > h2, .corps-admin .panneau h2:first-child { font-size: var(--t1); font-weight: 600; letter-spacing: -.015em; margin-bottom: var(--e3); }
.corps-admin .panneau > p.secondaire { font-size: var(--t-s); }
.pp-scene .message { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); border-radius: var(--r-l); border: 1px solid color-mix(in srgb, var(--avert) 30%, transparent); background: color-mix(in srgb, var(--avert) 10%, transparent); font-size: var(--t-s); }
.pp-scene .message.ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.pp-scene .briques ul { gap: var(--e2); }
.pp-scene .briques .brique { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border-radius: var(--r-l); border: 1px solid var(--trait-fort); background: var(--surface); transition: border-color .2s, background .2s; }
.pp-scene .briques .brique:has(input:checked) { border-color: color-mix(in srgb, var(--action) 40%, transparent); background: color-mix(in srgb, var(--action) 8%, var(--surface)); }
.pp-scene .briques .brique small { display: block; color: var(--encre-3); font-size: var(--t-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-scene .briques .brique > span { min-width: 0; }
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--e3); }
.pp-stat { display: grid; gap: var(--e1); padding: var(--e3) var(--e4); border-radius: 14px; background: var(--surface-2); }
.pp-stat small { font-size: var(--t-1); color: var(--encre-3); }
.pp-stat b { font: 600 var(--t2) var(--donnees); letter-spacing: -.02em; color: var(--encre); }
@media (max-width: 1200px) { .pp-administration { grid-template-columns: 1fr; } .pp-menu-admin { position: static; } .pp-menu-admin ul { display: flex; flex-wrap: wrap; } }
.pp-scene .briques ul { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* ---- Annuaire en cartes */
.pp-personnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--e3); }
.pp-personne { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; padding: var(--e4); border-radius: var(--r-l); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); transition: transform .25s var(--rebond); }
.pp-personne:hover { transform: translateY(-3px); }
.pp-personne .avatar { width: 44px; height: 44px; font-size: var(--t-s); }
.pp-personne-texte { display: grid; gap: 2px; min-width: 0; }
.pp-personne-texte strong { font-weight: 600; }
.pp-personne-texte small { font-size: var(--t-1); color: var(--encre-2); display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.pp-personne-contact { display: grid; gap: 2px; margin-top: var(--e1); font-size: var(--t-s); }
.pp-personne-contact a { display: inline-flex; align-items: center; gap: var(--e2); text-decoration: none; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-personne-contact a:hover { color: var(--action); }
.pp-personne-contact svg.picto { width: .95rem; height: .95rem; flex: none; }

/* ---- Aide : rubriques en cartes, liens en lignes (UI-08) */
.pp-scene .wiki-accueil { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--e5); margin-top: var(--e5); }
.pp-scene .rubriques { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--e4); }
.pp-scene .rubrique { border: 1px solid var(--verre-trait); border-top-width: 1px; border-radius: var(--r-l); background: var(--verre); box-shadow: var(--ombre); padding: var(--e4); animation: pp-entre var(--d-entree) var(--sortie) both; transition: transform .25s var(--rebond); }
.pp-scene .rubrique:hover { transform: translateY(-3px); }
.pp-scene .rubrique h2 { font-size: var(--t0); font-weight: 600; }
.pp-liens { gap: 2px !important; }
.pp-liens li a { display: flex; align-items: center; gap: var(--e2); width: 100%; padding: .4rem var(--e2); border-radius: 10px; color: var(--encre); text-decoration: none; font-size: var(--t-s); transition: background .2s; }
.pp-liens li a:hover { background: var(--surface-2); color: var(--action); }
.pp-liens svg.picto { width: .95rem; height: .95rem; color: var(--encre-3); flex: none; }
.pp-scene .ajout-rubrique { margin-top: var(--e2); }
.pp-scene .recherche-aide { margin-bottom: 0; }
.pp-scene .recherche-aide input { min-height: 46px; border-radius: var(--rond); padding-inline: var(--e4); font-size: var(--t0); }
@media (max-width: 1200px) { .pp-scene .wiki-accueil { grid-template-columns: 1fr; } }

/* ---- Documents : navigation en panneau, lignes de fichiers (UI-16) */
.pp-scene .app-fichiers { gap: var(--e5); }
.pp-scene .app-nav { top: var(--e4); min-height: 0; padding: var(--e3); border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); gap: var(--e4); animation: pp-entre var(--d-entree) var(--sortie) both; }
.pp-scene .app-nav a { border-radius: 12px; font-size: var(--t-s); font-weight: 500; color: var(--encre-2); position: relative; transition: background .2s, color .2s, transform .2s var(--sortie); }
.pp-scene .app-nav a:hover { background: var(--surface-2); color: var(--encre); transform: translateX(2px); }
.pp-scene .app-nav a[aria-current="page"] { background: var(--action-doux); color: var(--action); font-weight: 600; box-shadow: none; }
.pp-scene .app-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 14px var(--lueur); }
.pp-scene .app-nav-pied { padding-top: var(--e3); border-top: 1px solid var(--trait); font-size: var(--t-1); }
.pp-scene .app-nav-pied p { margin: 0 0 var(--e2); }
.pp-scene .barre-fichiers { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--e4); align-items: center; }
.pp-scene .barre-fichiers .ariane { font-size: var(--t2); font-weight: 700; letter-spacing: -.02em; }
.pp-scene .barre-fichiers .titre-vue { font-size: var(--t2); }
.pp-scene .menu-nouveau > summary.bouton { border-radius: var(--rond); min-height: 40px; }
.pp-scene .fichiers { border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); overflow: hidden; padding: var(--e2); }
.pp-scene .entete-liste { padding: 0 var(--e2) var(--e2); font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); border: 0; }
.pp-scene .fichier { border-top: 0; border-radius: 12px; min-height: 3.2rem; transition: background .2s; }
.pp-scene .fichier + .fichier { margin-top: 2px; }
.pp-scene .fichier:hover { background: var(--surface-2); }
.pp-scene .fichier.choisi { background: var(--action-doux); }
.pp-scene .fichier .nom a { font-weight: 500; }
.pp-scene .fichier .nom a:hover { text-decoration: none; }
.pp-scene .fichier .taille, .pp-scene .fichier .quand { font: 500 var(--t-1) var(--donnees); color: var(--encre-3); }
.pp-scene .vide-fichiers { padding: var(--e7) var(--e5); }
.pp-scene .barre-selection { border-radius: var(--r-l); }
.pp-scene .depot { border-radius: var(--r-xl); }
.pp-scene .progression { border-radius: var(--r-l); }

/* ---- Courrier et Calendrier : coquille « application » harmonisée (A3, UI-12) */
.pp-scene .rail-apps { background: transparent; border-top: 0; padding: var(--e2); gap: var(--e1); }
.pp-scene .rail-app { color: var(--encre-2); border-radius: 12px; font-size: var(--t-2); font-weight: 600; transition: background .2s, color .2s, transform .2s var(--sortie); position: relative; }
.pp-scene .rail-app:hover { background: var(--surface-2); color: var(--encre); transform: translateY(-1px); }
.pp-scene .rail-app.actif { background: var(--action-doux); color: var(--action); box-shadow: none; }
.pp-scene .rail-app.actif::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 4px; border-radius: var(--rond); background: var(--action); box-shadow: 0 0 14px var(--lueur); }
.pp-scene .ruban { background: var(--verre); border-bottom: 1px solid var(--verre-trait); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pp-scene .ruban-messagerie .onglets-ruban { border-top: 0; background: transparent; padding-inline: var(--e3); }
.pp-scene .onglets-ruban [role="tab"] { border-radius: var(--rond) var(--rond) 0 0; color: var(--encre-2); }
.pp-scene .onglets-ruban [role="tab"]:hover { background: var(--surface-2); color: var(--encre); }
.pp-scene .onglets-ruban [role="tab"][aria-selected="true"] { background: var(--action-doux); color: var(--action); font-weight: 600; }
.pp-scene .messagerie { background: transparent; }
.pp-scene .ruban .outil, .pp-scene .ruban button.outil, .pp-scene .ruban a.outil, .pp-scene .ruban summary.outil { border-radius: 10px; }
/* lignes de fichiers : actions collées au nom, étoile et « ⋯ » sans habillage de bouton (UI-16) */
.pp-scene .entete-liste, .pp-scene .fichier { grid-template-columns: 1.75rem 2.6rem minmax(0, max-content) auto minmax(0, 1fr) 6.5rem 8.5rem; }
.pp-scene .fichier > .nom { display: contents; }
.pp-scene .fichier > .nom > a { grid-column: 3; grid-row: 1; }
.pp-scene .fichier > .nom > small { grid-column: 3 / 6; grid-row: 2; }
.pp-scene .fichier > input { grid-column: 1; grid-row: 1; } .pp-scene .fichier > .vignette { grid-column: 2; grid-row: 1; }
.pp-scene .fichier > .actions-ligne { grid-column: 4; grid-row: 1; }
.pp-scene .fichier > .taille { grid-column: 6; grid-row: 1; } .pp-scene .fichier > .quand { grid-column: 7; grid-row: 1; }
.pp-scene .entete-liste > span:nth-child(3) { grid-column: 3 / 6; } .pp-scene .entete-liste > span:nth-child(4) { display: none; }
.pp-scene .entete-liste > span:nth-child(5) { grid-column: 6; } .pp-scene .entete-liste > span:nth-child(6) { grid-column: 7; }
.pp-scene .fichier button.etoile, .pp-scene .fichier .menu-ligne > summary { min-height: 0; height: 2rem; width: 2rem; padding: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--encre-3); display: grid; place-items: center; transition: background .2s, color .2s; }
.pp-scene .fichier button.etoile::after { display: none; }
.pp-scene .fichier button.etoile:hover, .pp-scene .fichier .menu-ligne > summary:hover { background: var(--surface-3); color: var(--encre); transform: none; }
.pp-scene .app-nav a { white-space: normal; }
.pp-scene .app-nav-pied .pp-lien { white-space: normal; align-items: flex-start; }

/* ---- Carte du réseau (interactive) */
.pp-carte-cadre { padding: 0; overflow: hidden; }
.pp-carte-outils { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait); }
.pp-carte-recherche { flex: 1; min-width: 14rem; max-width: 24rem; display: flex; align-items: center; gap: var(--e2); height: 40px; padding: 0 var(--e3); border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre-3); }
.pp-carte-recherche input { flex: 1; min-width: 0; border: 0; background: none; color: var(--encre); font: inherit; min-height: 0; padding: 0; }
.pp-carte-recherche input:focus-visible { outline: 0; box-shadow: none; }
.pp-carte-recherche svg.picto { width: 1rem; height: 1rem; }
.pp-carte-filtres { display: inline-flex; padding: 3px; border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface); }
.pp-scene button.pp-carte-filtre { min-height: 0; height: 32px; padding: 0 var(--e3); border-radius: var(--rond); background: none; color: var(--encre-2); font-size: var(--t-s); font-weight: 500; box-shadow: none; border: 0; }
.pp-scene button.pp-carte-filtre::after { display: none; }
.pp-scene button.pp-carte-filtre:hover { transform: none; background: var(--surface-2); color: var(--encre); }
.pp-scene button.pp-carte-filtre.actif { background: var(--action); color: var(--action-encre); }
.pp-carte-zoom { margin-left: auto; display: flex; gap: var(--e1); }
.pp-scene .pp-carte-zoom .pp-rond { width: 36px; height: 36px; font-size: var(--t1); font-weight: 500; }
.pp-carte-scene { position: relative; height: min(70vh, 760px); min-height: 420px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--action) 8%, transparent), transparent 55%), radial-gradient(color-mix(in srgb, var(--trait-fort) 70%, transparent) 1px, transparent 1.5px) 0 0 / 28px 28px; }
.pp-carte-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; font-family: var(--texte); }
.pp-carte-svg.glisse { cursor: grabbing; }
.pp-c-anneau { fill: color-mix(in srgb, var(--action) 4%, transparent); stroke: var(--trait-fort); stroke-dasharray: 4 8; stroke-width: 1.5; }
.pp-c-subnet { fill: var(--encre-3); font: 500 13px var(--donnees); letter-spacing: .04em; paint-order: stroke; stroke: var(--papier); stroke-width: 6px; stroke-linejoin: round; }
.pp-c-lien { fill: none; stroke: var(--trait-fort); stroke-width: 1.8; opacity: .9; transition: stroke .2s, opacity .2s, stroke-width .2s; }
.pp-c-lien.pointille { stroke-dasharray: 6 6; opacity: .5; }
.pp-c-lien.actif { stroke: var(--action); stroke-width: 3; opacity: 1; }
.pp-c-focus .pp-c-lien:not(.actif) { opacity: .25; }
.pp-c-noeud { cursor: pointer; outline: none; transition: opacity .25s; }
.pp-c-noeud .pp-c-disque { fill: var(--surface); stroke: var(--c, var(--trait-fort)); stroke-width: 2; transition: stroke-width .2s, filter .2s; }
.pp-c-noeud use { fill: none; stroke: var(--c, var(--encre-2)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-c-noeud .pp-c-nom { fill: var(--encre); font-size: 13px; font-weight: 600; }
.pp-c-noeud .pp-c-detail { fill: var(--encre-3); font: 500 11px var(--donnees); }
.pp-c-noeud.infra { --c: var(--action); } .pp-c-noeud.postes { --c: var(--ok); } .pp-c-noeud.imprimantes { --c: var(--avert); } .pp-c-noeud.autres { --c: var(--muet); } .pp-c-noeud.mobiles { --c: var(--violet); } .pp-c-noeud.internet { --c: var(--encre-2); }
.pp-c-noeud.passerelle .pp-c-disque { stroke-width: 3; fill: color-mix(in srgb, var(--action) 14%, var(--surface)); }
.pp-c-noeud.absent .pp-c-disque { stroke-dasharray: 4 4; fill: var(--surface-2); }
.pp-c-noeud.absent use { stroke: var(--encre-3); } .pp-c-noeud.absent .pp-c-nom { fill: var(--encre-2); }
.pp-c-halo { fill: none; stroke: var(--violet); stroke-width: 2; opacity: .6; transform-origin: center; transform-box: fill-box; animation: pp-c-halo 2s cubic-bezier(0, 0, .2, 1) infinite; }
.pp-c-noeud.actif .pp-c-disque, .pp-c-noeud:focus-visible .pp-c-disque { stroke-width: 4; filter: drop-shadow(0 0 10px var(--c)); }
.pp-c-noeud.voisin .pp-c-disque { stroke-width: 3; }
.pp-c-focus .pp-c-noeud:not(.actif, .voisin, .internet) { opacity: .35; }
.pp-c-noeud.estompe { opacity: .15; pointer-events: none; }
.pp-c-noeud.trouve .pp-c-disque { stroke: var(--avert); stroke-width: 4; filter: drop-shadow(0 0 12px var(--avert)); }
@keyframes pp-c-trace { to { stroke-dashoffset: 0; } }
@keyframes pp-c-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
@keyframes pp-c-halo { to { transform: scale(1.6); opacity: 0; } }
.pp-carte-fiche { position: absolute; top: var(--e4); right: var(--e4); width: min(22rem, calc(100% - 2rem)); padding: var(--e4); border-radius: var(--r-l); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; gap: var(--e3); animation: pp-entre var(--d-apparition) var(--sortie) both; }
.pp-carte-fiche header { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: center; }
.pp-carte-fiche header strong { display: block; font-weight: 600; }
.pp-carte-fiche header small { display: block; font: 500 var(--t-1) var(--donnees); color: var(--encre-3); }
.pp-c-fiche-ic { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--c, var(--action)) 16%, transparent); fill: none; stroke: var(--c, var(--action)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-c-fiche-ic.infra { --c: var(--action); } .pp-c-fiche-ic.postes { --c: var(--ok); } .pp-c-fiche-ic.imprimantes { --c: var(--avert); } .pp-c-fiche-ic.autres { --c: var(--muet); } .pp-c-fiche-ic.mobiles { --c: var(--violet); }
.pp-carte-fiche .pp-rond { width: 32px; height: 32px; font-size: var(--t1); }
.pp-c-fiche-etats { display: flex; gap: var(--e2); flex-wrap: wrap; }
.pp-carte-fiche .details { font-size: var(--t-s); }
.pp-carte-legende { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); border-top: 1px solid var(--trait); font-size: var(--t-1); color: var(--encre-2); }
.pp-carte-legende span { display: inline-flex; align-items: center; gap: var(--e2); }
.pp-leg { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c, var(--trait-fort)); background: var(--surface); }
.pp-leg.infra { --c: var(--action); } .pp-leg.postes { --c: var(--ok); } .pp-leg.imprimantes { --c: var(--avert); } .pp-leg.autres { --c: var(--muet); } .pp-leg.mobiles { --c: var(--violet); }
.pp-leg.absent { border-style: dashed; } .pp-leg.scanner { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 35%, transparent); --c: var(--violet); }
.pp-carte-liste .carte { margin-top: var(--e4); }
@media (prefers-reduced-motion: reduce) { .pp-c-halo, .pp-c-lien, .pp-c-noeud { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }
@media (max-width: 900px) { .pp-carte-scene { height: 60vh; } .pp-carte-zoom { margin-left: 0; } }
/* ---- Réseau : liste */
.pp-reseau-bas { grid-template-columns: 1.4fr 1fr; margin-top: var(--e5); }
.pp-table-reseau { margin-top: var(--e4); }
.pp-equip { display: grid; grid-template-columns: auto 1fr; column-gap: var(--e2); align-items: center; }
.pp-equip .sous { grid-column: 2; }
.pp-scene td .statut.plein { margin-left: var(--e2); }
.pp-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pp-agents li { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); border-radius: var(--r-m); background: var(--surface-2); }
.pp-agents li a { font-weight: 500; text-decoration: none; color: inherit; }
.pp-lien-carte { display: grid; gap: 2px; padding: var(--e3); border-radius: var(--r-m); background: var(--surface-2); text-decoration: none; color: inherit; transition: transform .3s var(--rebond); }
.pp-lien-carte:hover { transform: translateX(4px); }
.pp-scene .filtres a .pp-nb { margin-left: var(--e1); font: 500 var(--t-1) var(--donnees); opacity: .65; }
@media (max-width: 900px) { .pp-reseau-bas { grid-template-columns: minmax(0, 1fr); } }
/* ---- Réseau : fiche d'un équipement */
.pp-fiche-reseau-tete .pp-identite { align-items: flex-start; }
.pp-fiche-reseau-tete .pp-identite > div { display: grid; gap: var(--e2); }
.pp-fiche-reseau-tete .entete-sous { margin: 0; }
.pp-fiche-reseau-tete .pp-c-fiche-etats { margin-top: var(--e1); }
.pp-fiche-reseau-tete .pp-c-fiche-etats a.statut { text-decoration: none; }
span.pp-c-fiche-ic.grande { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border-radius: 18px; margin-top: var(--e3); }
span.pp-c-fiche-ic.grande svg { width: 34px; height: 34px; fill: none; stroke: var(--c, var(--action)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-fiche-reseau { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
.pp-voisins { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-voisins li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--e3); padding: var(--e2) var(--e2); border-radius: var(--r-m); border-bottom: 1px solid var(--trait); }
.pp-voisins li:last-child { border-bottom: 0; }
.pp-voisins li:hover { background: var(--surface-2); }
.pp-voisins li a { font-weight: 500; text-decoration: none; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-voisins li.absent a { color: var(--encre-2); }
.pp-voisins .secondaire { font-size: var(--t-1); }
.pp-voisins .donnee { font-size: var(--t-1); }
.pp-sysdescr { white-space: pre-line; word-break: break-word; font-size: var(--t-s); }
@media (max-width: 900px) { .pp-fiche-reseau { grid-template-columns: minmax(0, 1fr); } .pp-voisins li { grid-template-columns: auto minmax(0, 1fr); } .pp-voisins .secondaire, .pp-voisins .donnee { grid-column: 2; } }
/* vocabulaires existants acceptés tels quels : états de supervision (ok/problem/down/none) et de ticket */
.statut.problem { --c: var(--avert); } .statut.down { --c: var(--crit); } .statut.none { --c: var(--muet); }
.statut.nouveau { --c: var(--info); } .statut.en_cours { --c: var(--avert); } .statut.en_attente { --c: var(--muet); } .statut.resolu { --c: var(--ok); } .statut.clos { --c: var(--muet); }
.statut.en_attente::before, .statut.none::before { background: none; box-shadow: inset 0 0 0 2px var(--c); }
.statut.clos::before { border-radius: 1px; }
.pp-scene .filtres a .statut.point { margin-right: .4rem; }

}
@layer pupitre {
.pp-durees { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e4); }
.pp-durees legend { font-weight: 600; margin-bottom: var(--e2); }
}

@layer pupitre {
/* ---- Documents : menus au-dessus de la liste, vue grille (signalé par le Product Owner, 2026-10-31).
   L'en-tête et le panneau de la liste sont animés à l'entrée (transform gardé par « both ») :
   chacun forme son propre empilement et le panneau, venu après, couvrait le menu « Nouveau ».
   Le panneau coupait aussi (overflow) les menus des dernières lignes et des cartes. */
.pp-scene .entete:has(details.menu[open]) { position: relative; z-index: 20; }
.pp-scene .fichiers { overflow: visible; }
.pp-scene .fichier:has(details.menu[open]) { z-index: 6; }
@media (min-width: 901px) { .pp-scene .menu-nouveau > ul { left: auto; right: 0; } }
/* Vue grille : les colonnes de la liste (UI-16) ne s'appliquent pas aux cartes. */
.pp-scene .vue-grille .fichier { grid-template-columns: minmax(0, 1fr); }
.pp-scene .vue-grille .fichier + .fichier { margin-top: 0; }
.pp-scene .vue-grille .fichier > :is(.vignette, .nom, .taille, .quand) { grid-column: 1; grid-row: auto; }
.pp-scene .vue-grille .fichier > .nom { display: grid; justify-items: center; width: 100%; min-width: 0; }
.pp-scene .vue-grille .fichier > .nom > :is(a, small) { grid-column: auto; grid-row: auto; max-width: 100%; }
@media (max-width: 900px) {
  /* Taille et date masquées : leurs pistes (15 rem) écrasaient le nom à zéro. */
  .pp-scene .app-fichiers:not(.vue-grille) .fichier { grid-template-columns: 1.75rem 2.6rem minmax(0, 1fr) auto; }
  .pp-scene .app-fichiers:not(.vue-grille) .fichier > .nom > small { grid-column: 3 / 5; }
  /* Le « ⋯ » suit le nom : sur un écran étroit, le menu s'aligne sur le bord droit de la ligne. */
  .pp-scene .app-fichiers:not(.vue-grille) .fichier .menu-ligne { position: static; }
  .pp-scene .app-fichiers:not(.vue-grille) .fichier .menu-ligne > ul { right: var(--e2); left: auto; top: calc(100% - 4px); }
  /* Dernières lignes : le menu s'ouvre vers le haut, sinon il passe sous la barre d'onglets fixe. */
  .pp-scene .app-fichiers:not(.vue-grille) .fichier:nth-last-child(-n+3) .menu-ligne > ul { top: auto; bottom: calc(100% - 4px); }
}
@media (max-width: 600px) {
  /* Grille sur deux colonnes : les cartes de gauche ouvrent leur menu vers la droite. */
  .pp-scene .vue-grille .fichier:nth-child(odd) .menu-ligne > ul { right: auto; left: 0; }
}

/* ---- Éditeurs dans la coquille Pupitre (A8) : rail et barre du haut, l'éditeur prend le reste
   de la hauteur ; « Pleine page » masque rail et barre. */
body:has(.pp-editeur) { height: 100dvh; overflow: hidden; display: block; }
.pp-editeur { height: 100dvh; min-height: 0; }
.pp-scene-editeur { flex: 1; min-width: 0; height: 100dvh; display: flex; flex-direction: column; }
.pp-editeur .pp-haut { flex: none; max-width: none; padding-bottom: var(--e3); position: relative; z-index: 12; }
.pp-editeur .editeur { flex: 1; min-height: 0; }
.pleine-page .pp-editeur > .pp-rail, .pleine-page .pp-editeur .pp-haut { display: none; }
/* Classeur : `.grille` est aussi la grille des participants de la visio (display: grid),
   qui détachait l'en-tête des colonnes du corps du tableau. */
table.grille { display: table; }
/* Visio : salon refait (commit 15 de fable). */
/* ---- Visio : discussions (liste | fil | informations) */
.pp-v { --v-haut: 70px; display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: var(--e4); align-items: stretch; height: calc(100dvh - var(--v-haut) - 3rem); min-height: 32rem; }
.pp-scene:has(.pp-v) > .contenu { padding-bottom: 1rem; }
.pp-v.salon:has(.pp-v-infos-case:checked) { grid-template-columns: 21rem minmax(0, 1fr) 20rem; }
.pp-v > * { min-height: 0; }
.pp-v-liste, .pp-v-fil, .pp-v-cote { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow: hidden; }
.pp-v-cote { display: none; }
.pp-v.salon:has(.pp-v-infos-case:checked) .pp-v-cote { display: flex; }
.pp-v-infos-bouton { cursor: pointer; }
.pp-v.salon:has(.pp-v-infos-case:checked) .pp-v-infos-bouton { color: var(--action); border-color: var(--action); }

/* colonne des discussions */
.pp-v-liste-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e4) var(--e2); }
.pp-v-liste-tete h2 { margin: 0; font-size: var(--t2); font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--e2); }
.pp-v-nouveau { position: relative; }
.pp-v-nouveau > summary { list-style: none; width: 40px; height: 40px; }
.pp-v-nouveau > summary::-webkit-details-marker { display: none; }
.pp-v-nouveau[open] > summary { color: var(--action); border-color: var(--action); transform: rotate(45deg); }
.pp-v-menu { position: absolute; top: calc(100% + var(--e2)); right: 0; z-index: 5; width: 19rem; display: grid; gap: 2px; padding: var(--e2); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--trait-fort); box-shadow: var(--ombre); animation: pp-entre var(--d-apparition) var(--sortie) both; }
.pp-v-menu form { display: contents; }
.pp-v-menu a, .pp-scene .pp-v-menu button { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; width: 100%; min-height: 0; height: auto; padding: var(--e2) var(--e3); border: 0; border-radius: var(--r-m); background: none; color: var(--encre); text-align: left; text-decoration: none; box-shadow: none; font: inherit; }
.pp-scene .pp-v-menu button::after { display: none; }
.pp-v-menu a:hover, .pp-scene .pp-v-menu button:hover { background: var(--surface-2); transform: none; color: var(--encre); }
.pp-v-menu svg.picto { width: 1.2rem; height: 1.2rem; color: var(--action); }
.pp-v-menu strong { display: block; font-weight: 600; font-size: var(--t-s); }
.pp-v-menu small { display: block; color: var(--encre-3); font-size: var(--t-1); }
.pp-v-recherche { display: flex; align-items: center; gap: var(--e2); margin: 0 var(--e4) var(--e3); height: 38px; padding: 0 var(--e3); border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre-3); }
.pp-v-recherche svg.picto { width: 1rem; height: 1rem; flex: none; }
.pp-v-recherche input { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: var(--encre); font: inherit; font-size: var(--t-s); }
.pp-v-recherche input:focus-visible { outline: 0; box-shadow: none; }
.pp-v-vide { margin: 0; padding: var(--e3) var(--e4); font-size: var(--t-s); }
.pp-v-salons, .pp-v-personnes, .pp-v-fichiers, .pp-v-appels { list-style: none; margin: 0; padding: 0 var(--e2); display: grid; gap: 2px; }
.pp-v-salons { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--e2); }
.pp-v-salons li a, .pp-v-personnes li, .pp-v-fichiers li a, .pp-v-appels li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--r-m); color: inherit; text-decoration: none; transition: background .15s; }
.pp-v-salons li a:hover, .pp-v-personnes li:hover, .pp-v-fichiers li a:hover { background: var(--surface-2); }
.pp-v-salons li.actif a { background: color-mix(in srgb, var(--action) 12%, transparent); box-shadow: inset 3px 0 0 var(--action); }
.pp-v-salons li[hidden], .pp-v-personnes li[hidden] { display: none; }
.pp-v-avatar { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; font: 700 var(--t-1) var(--texte); letter-spacing: .02em; background: light-dark(hsl(var(--h, 200) 45% 88%), hsl(var(--h, 200) 32% 26%)); color: light-dark(hsl(var(--h, 200) 55% 24%), hsl(var(--h, 200) 60% 86%)); }
.pp-v-avatar.salon { background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); font: 700 var(--t1) var(--donnees); border-radius: 12px; }
.pp-v-avatar.grand { width: 52px; height: 52px; font-size: var(--t0); border-radius: 18px; }
.pp-v-avatar.direct { box-shadow: 0 0 0 2px var(--ok), 0 0 18px color-mix(in srgb, var(--ok) 50%, transparent); }
.pp-v-point { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muet); border: 2px solid var(--surface); }
.pp-v-point.online { background: var(--ok); } .pp-v-point.away { background: var(--avert); } .pp-v-point.dnd { background: var(--crit); } .pp-v-point.busy { background: var(--crit); } .pp-v-point.offline, .pp-v-point.invisible { background: var(--muet); opacity: .6; }
.pp-v-texte { min-width: 0; display: grid; gap: 1px; }
.pp-v-texte strong { font-weight: 600; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-v-texte small { color: var(--encre-3); font-size: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-v-direct { color: var(--ok); font-weight: 600; }
.pp-v-meta { display: grid; justify-items: end; gap: 3px; font-size: var(--t-2); color: var(--encre-3); }
.pp-v-meta .statut.compteur { min-width: 1.35rem; padding: 0 .4rem; font-size: var(--t-2); }
.pp-v-epingle { width: .8rem; height: .8rem; color: var(--avert); fill: currentColor; stroke: none; }
.pp-v-collegues { border-top: 1px solid var(--trait); max-height: 42%; display: flex; flex-direction: column; }
.pp-v-collegues > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); cursor: pointer; list-style: none; font: 600 var(--t-s) var(--texte); color: var(--encre-2); }
.pp-v-collegues > summary::-webkit-details-marker { display: none; }
.pp-v-collegues > summary::before { content: "▸"; margin-right: var(--e2); font-size: .7em; color: var(--encre-3); transition: transform .2s; }
.pp-v-collegues[open] > summary::before { transform: rotate(90deg); }
.pp-v-collegues .pp-v-personnes { overflow-y: auto; padding-bottom: var(--e2); }
.pp-v-personnes li.offline .pp-v-avatar { filter: grayscale(.6); opacity: .7; }
.pp-v-actions { display: flex; gap: var(--e1); opacity: 0; transition: opacity .15s; }
.pp-v-personnes li:hover .pp-v-actions, .pp-v-personnes li:focus-within .pp-v-actions { opacity: 1; }
.pp-v-actions form { display: contents; }
.pp-scene .pp-rond.petit { width: 32px; height: 32px; }
.pp-scene .pp-rond.petit svg.picto { width: 1rem; height: 1rem; }
.pp-scene .pp-rond.plein { background: var(--action); color: var(--action-encre); border-color: var(--action); }
.pp-scene .pp-rond.actif { color: var(--avert); border-color: var(--avert); }
.pp-scene .pp-rond.actif svg.picto { fill: currentColor; }

/* fil */
.pp-v-tete { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait); }
.pp-v-retour { display: none; }
.pp-v-titre { min-width: 0; }
.pp-v-titre h1 { margin: 0; font-size: var(--t2); font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--e2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-v-titre p { margin: 2px 0 0; font-size: var(--t-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-v-etat { font-weight: 600; } .pp-v-etat.online { color: var(--ok); } .pp-v-etat.away { color: var(--avert); } .pp-v-etat.dnd, .pp-v-etat.busy { color: var(--crit); }
.pp-v-tete-actions { display: flex; align-items: center; gap: var(--e2); }
.pp-v-tete-actions form { display: contents; }
.pp-v-tete-actions .pp-rond { width: 40px; height: 40px; }
.pp-v-bandeau { display: flex; align-items: center; gap: var(--e3); margin: var(--e3) var(--e4) 0; padding: var(--e2) var(--e3); border-radius: var(--r-l); background: color-mix(in srgb, var(--ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: inherit; text-decoration: none; font-size: var(--t-s); }
.pp-v-bandeau .pp-bouton { margin-left: auto; }
.pp-v-fil .fil-messages { flex: 1; padding: var(--e3) var(--e4); gap: 2px; }
.pp-v-jour { align-self: center; display: flex; align-items: center; gap: var(--e3); width: 100%; margin: var(--e4) 0 var(--e3); color: var(--encre-3); font: 500 var(--t-2) var(--donnees); text-transform: uppercase; letter-spacing: .08em; }
.pp-v-jour::before, .pp-v-jour::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.pp-v-jour span { padding: .15rem .7rem; border-radius: var(--rond); background: var(--surface-2); }
.pp-v-anciens { align-self: center; margin-bottom: var(--e3); }
.pp-v-anciens.htmx-request .pp-bouton { opacity: .5; pointer-events: none; }
.pp-v-debut { align-self: center; display: grid; justify-items: center; gap: var(--e2); margin: auto; padding: var(--e6); text-align: center; max-width: 28rem; }
.pp-v-debut strong { font-size: var(--t1); }
.pp-v-fil .bulle { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--e3); max-width: 100%; padding: var(--e1) var(--e2); margin: 0; border-radius: var(--r-m); background: none; align-self: stretch; }
.pp-v-fil .bulle:hover { background: var(--surface-2); }
.pp-v-fil .bulle.moi { background: none; order: 0; margin-left: 0; align-self: stretch; }
.pp-v-fil .bulle:not(.systeme) { border: 0; min-height: 0; }
.pp-v-fil .bulle.moi:hover { background: var(--surface-2); }
.pp-v-fil .bulle > :not(.bulle-avatar, .bulle-heure) { grid-column: 2; }
.pp-v-fil .bulle-avatar { grid-row: 1 / span 6; width: 36px; height: 36px; border-radius: 12px; font-size: var(--t-1); align-self: start; margin-top: 2px; }
.pp-v-fil .bulle-entete { display: flex; align-items: baseline; gap: var(--e2); font-size: var(--t-s); }
.pp-v-fil .bulle-entete strong { font-weight: 600; }
.pp-v-fil .bulle.moi .bulle-entete strong { color: var(--action); }
.pp-v-fil .bulle-heure { display: none; grid-column: 1; grid-row: 1; align-self: start; justify-self: center; font-size: var(--t-2); color: var(--encre-3); margin-top: 3px; }
.pp-v-fil .bulle.suite { margin-top: -2px; }
.pp-v-fil .bulle.suite .bulle-avatar, .pp-v-fil .bulle.suite .bulle-entete { display: none; }
.pp-v-fil .bulle.suite:hover .bulle-heure { display: block; }
.pp-v-fil .bulle .prose { font-size: var(--t-s); line-height: 1.55; }
.pp-v-fil .bulle.systeme { display: flex; justify-content: center; padding: var(--e1); font-size: var(--t-1); color: var(--encre-3); }
.pp-v-fil .bulle-actions { top: -.9rem; right: var(--e3); border-radius: var(--rond); background: var(--surface); border-color: var(--trait-fort); box-shadow: var(--ombre); }
.pp-v-fil .bulle-cite { border-left-color: var(--action); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--surface-2); }
.pp-v-composeur { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--e2); padding: var(--e3) var(--e4); border-top: 1px solid var(--trait); }
.pp-v-composeur .pp-v-reponse { grid-column: 1 / -1; margin: 0; padding: var(--e1) var(--e3); border-left: 3px solid var(--action); background: var(--surface-2); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--t-1); }
.pp-v-composeur textarea { min-height: 44px; max-height: 14rem; padding: .65rem var(--e3); border-radius: 22px; resize: none; line-height: 1.5; font-size: var(--t-s); }
.pp-v-composeur .joindre { width: 44px; height: 44px; cursor: pointer; }
.pp-v-composeur .pp-rond.plein { width: 44px; height: 44px; }
.pp-v-composeur .pp-rond.plein svg.picto { translate: 1px 0; }
.pp-v-aide { grid-column: 2; font-size: var(--t-2); padding-left: var(--e3); }
.pp-v-envoi { margin: 0; padding: 0 var(--e4) var(--e2); font-size: var(--t-1); }

/* informations */
.pp-v-cote-tete { display: flex; align-items: center; justify-content: space-between; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait); }
.pp-v-cote-tete h2 { margin: 0; font-size: var(--t0); font-weight: 700; }
.pp-v-cote { overflow-y: auto; }
.pp-v-bloc { padding: var(--e3) var(--e2); border-bottom: 1px solid var(--trait); }
.pp-v-bloc:last-child { border-bottom: 0; }
.pp-v-bloc h3 { margin: 0 0 var(--e2); padding: 0 var(--e3); display: flex; align-items: center; gap: var(--e2); font: 600 var(--t-s) var(--texte); color: var(--encre-2); }
.pp-v-bloc > p { margin: 0; padding: 0 var(--e3); font-size: var(--t-1); }
.pp-v-bloc .pp-v-texte strong { white-space: normal; }
.pp-v-ajout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); padding: var(--e2) var(--e3) 0; }
.pp-v-ajout select { min-height: 36px; font-size: var(--t-s); }
.pp-v-fichiers .vignette-ext { flex: none; }
.pp-v-fichiers svg.picto { width: 1rem; height: 1rem; color: var(--encre-3); }
.pp-v-reglages { margin: var(--e2) 0; padding: 0 var(--e3); }
.pp-v-reglages > summary { cursor: pointer; font-size: var(--t-s); font-weight: 600; color: var(--encre-2); }
.pp-v-reglages .formulaire { margin-top: var(--e2); }
.pp-v-bloc > form { padding: var(--e2) var(--e3) 0; }
.pp-scene .pp-bouton.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }

/* accueil */
.pp-v-accueil { padding: var(--e4) var(--e5); gap: var(--e4); overflow-y: auto; }
.pp-v-accueil .entete { margin-bottom: 0; }
.pp-v-appels li { padding: var(--e2) var(--e3); }

@media (max-width: 1200px) {
  .pp-v, .pp-v.salon:has(.pp-v-infos-case:checked) { grid-template-columns: 19rem minmax(0, 1fr); }
  .pp-v.salon:has(.pp-v-infos-case:checked) .pp-v-cote { position: fixed; inset: var(--v-haut) 0 0 auto; width: min(22rem, 100%); z-index: 20; border-radius: var(--r-xl) 0 0 var(--r-xl); animation: pp-entre var(--d-apparition) var(--sortie) both; }
}
@media (max-width: 900px) {
  .pp-v { --v-haut: 64px; height: auto; min-height: calc(100dvh - 10rem); grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pp-v.salon .pp-v-liste { display: none; }
  .pp-v.accueil .pp-v-liste { height: auto; }
  .pp-v.salon .pp-v-fil { height: calc(100dvh - 12.5rem); }
  .pp-v-retour { display: grid; }
  .pp-v-tete { grid-template-columns: auto auto minmax(0, 1fr); row-gap: var(--e2); }
  .pp-v-tete-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .pp-v-aide { display: none; }
  .pp-v.salon:has(.pp-v-infos-case:checked) .pp-v-cote { inset: 0; width: 100%; border-radius: 0; }
  .pp-v-collegues { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-v-menu, .pp-v-cote { animation: none !important; } }
/* Connexion (commit 16 de fable). */
/* ---- Connexion */
.pp-avis.crit { background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
/* Licence de location (lot 1, EX-38) : avis neutre, bandeau en tête du contenu. */
.pp-avis.muet { background: color-mix(in srgb, var(--muet) 10%, transparent); border-color: color-mix(in srgb, var(--muet) 30%, transparent); }
.licence-bandeau { margin: 0 0 var(--e4); }
.pp-avis:has(> .licence-texte) { flex-wrap: nowrap; }
.pp-avis > .licence-texte { flex: 1 1 0; min-width: 0; }
body:has(> .pp-connexion) { margin: 0; min-height: 100dvh; background: var(--papier); color: var(--encre); font-family: var(--texte); }
.pp-connexion { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100dvh; }
.pp-cx-dalle { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e6); padding: var(--e6) var(--e7); color: #E2E8F0; background: radial-gradient(120% 90% at 0% 0%, rgb(56 189 248 / .22), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgb(139 92 246 / .28), transparent 55%), linear-gradient(160deg, #0B1733, #050B1A 70%); overflow: hidden; }
.pp-cx-dalle::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 1px, rgb(255 255 255 / .035) 1px 1.5px, transparent 1.5px) 0 0 / 26px 26px; pointer-events: none; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.pp-cx-dalle > * { position: relative; z-index: 1; }
.pp-cx-marque { display: flex; align-items: center; gap: var(--e3); font-weight: 700; font-size: var(--t1); letter-spacing: -.02em; color: #fff; }
/* Le logo de Fondation (demande du Product Owner), pas de pastille ; pas de numéro de version avant connexion. */
.pp-cx-marque img { width: 40px; height: 40px; filter: drop-shadow(0 0 18px rgb(56 189 248 / .4)); }
.pp-cx-centre { display: grid; gap: var(--e4); max-width: 34rem; }
.pp-cx-accroche { margin: 0; font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.pp-cx-sous { margin: 0; font-size: var(--t0); line-height: 1.55; color: #AAB6CA; max-width: 30rem; }
.pp-cx-pouls { width: 100%; height: 70px; margin: var(--e2) 0; overflow: visible; }
.pp-cx-trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: pp-c-trace 2.4s var(--sortie) .6s forwards; filter: drop-shadow(0 0 8px rgb(56 189 248 / .5)); }
.pp-cx-bille { filter: drop-shadow(0 0 8px #A78BFA); }
.pp-cx-atouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.pp-cx-atouts li { display: grid; gap: var(--e1); padding: var(--e4); border-radius: var(--r-l); background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: var(--t-1); color: #AAB6CA; line-height: 1.45; }
.pp-cx-atouts strong { color: #F1F5F9; font-size: var(--t-s); font-weight: 600; }
.pp-cx-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: var(--e1); border-radius: 11px; background: rgb(56 189 248 / .14); color: #7DD3FC; }
.pp-cx-ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-cx-pied { display: flex; align-items: center; gap: var(--e2); margin: 0; font-size: var(--t-1); color: #8B98B0; }
.pp-cx-pied svg { width: 1rem; height: 1rem; fill: none; stroke: #38BDF8; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.pp-cx-cote { display: grid; place-items: center; padding: var(--e6); }
.pp-cx-carte { width: min(100%, 26rem); display: grid; gap: var(--e3); padding: var(--e6); border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pp-cx-carte > .statut { justify-self: start; }
.pp-cx-carte h1 { margin: var(--e2) 0 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.pp-cx-carte > p.secondaire { margin: 0 0 var(--e3); font-size: var(--t-s); line-height: 1.5; }
.pp-cx-form { display: grid; gap: var(--e3); }
.pp-cx-form .pp-avis { font-size: var(--t-s); }
.pp-cx-champ { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; height: 58px; padding: 0 var(--e2) 0 var(--e3); border-radius: var(--r-l); border: 1px solid var(--trait-fort); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pp-cx-champ:focus-within { border-color: var(--action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 18%, transparent); }
.pp-cx-champ > svg { width: 1.15rem; height: 1.15rem; margin-right: var(--e3); fill: none; stroke: var(--encre-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.pp-cx-champ:focus-within > svg { stroke: var(--action); }
.pp-cx-champ input { grid-column: 2; min-height: 0; height: 100%; padding: 18px 0 0; border: 0; border-radius: 0; background: none; color: var(--encre); font: 500 var(--t0) var(--texte); outline: 0; box-shadow: none; }
.pp-cx-champ input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.pp-cx-champ label { position: absolute; left: calc(var(--e3) + 1.15rem + var(--e3)); top: 50%; translate: 0 -50%; font-size: var(--t0); color: var(--encre-3); pointer-events: none; transition: top .18s var(--sortie), font-size .18s var(--sortie), color .18s; }
.pp-cx-champ input:focus ~ label, .pp-cx-champ input:not(:placeholder-shown) ~ label { top: 11px; translate: 0; font-size: var(--t-2); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); }
.pp-cx-champ:focus-within label { color: var(--action); }
.pp-cx-oeil { grid-column: 3; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre-3); box-shadow: none; cursor: pointer; }
.pp-cx-oeil:hover, .pp-cx-oeil[aria-pressed="true"] { color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); transform: none; box-shadow: none; }
.pp-cx-oeil svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-cx-code input { font: 600 1.6rem var(--donnees); letter-spacing: .35em; }
.pp-cx-maj { margin: calc(var(--e2) * -1) 0 0; font-size: var(--t-1); color: var(--avert); }
.pp-cx-envoyer { width: 100%; justify-content: center; margin-top: var(--e2); }
.pp-cx-envoyer svg.picto { transition: translate .25s var(--sortie); }
.pp-cx-envoyer:hover svg.picto { translate: 4px 0; }
.pp-cx-aide { margin: var(--e2) 0 0; font-size: var(--t-1); line-height: 1.5; }
.pp-cx-aide a { color: var(--action); }
@keyframes pp-tourne { to { rotate: 360deg; } }
@media (max-width: 1100px) { .pp-cx-atouts { grid-template-columns: 1fr; } .pp-cx-atouts li { grid-template-columns: auto 1fr; column-gap: var(--e3); } .pp-cx-atouts .pp-cx-ic { grid-row: 1 / span 2; margin: 0; } }
@media (max-width: 820px) {
  .pp-connexion { grid-template-columns: minmax(0, 1fr); }
  .pp-cx-dalle { order: 2; padding: var(--e5) var(--e5) var(--e6); gap: var(--e5); }
  .pp-cx-accroche { font-size: 2rem; }
  .pp-cx-pouls { display: none; }
  .pp-cx-cote { padding: var(--e5) var(--e4); min-height: 100dvh; align-content: center; }
  .pp-cx-carte { padding: var(--e5); }
}
@media (prefers-reduced-motion: reduce) { .pp-cx-bille animateMotion { animation: none !important; } .pp-cx-trace { stroke-dashoffset: 0; animation: none !important; } .pp-cx-bille { display: none; } }
/* Brique Équipes (maquettes de fable, 2026-10-31), préfixe .pp-rh- et .pp-org. */
.pp-rh-onglets { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface); margin-bottom: var(--e4); }
.pp-rh-onglets a { height: 34px; padding: 0 var(--e4); border-radius: var(--rond); display: inline-flex; align-items: center; gap: var(--e2); color: var(--encre-2); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.pp-rh-onglets a[aria-current] { background: var(--action); color: var(--action-encre); font-weight: 600; }
.pp-rh-onglets a .statut.compteur { font-size: var(--t-2); }
.pp-rh-personne { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--r-m); }
.pp-rh-personne:hover { background: var(--surface-2); }
.pp-rh-av { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 var(--t-1) var(--texte); background: light-dark(hsl(var(--h,200) 45% 88%), hsl(var(--h,200) 32% 26%)); color: light-dark(hsl(var(--h,200) 55% 24%), hsl(var(--h,200) 60% 86%)); }
.pp-rh-av i { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); background: var(--muet); }
.pp-rh-av i.conge { background: var(--avert); } .pp-rh-av i.present { background: var(--ok); } .pp-rh-av i.teletravail { background: var(--action); } .pp-rh-av i.malade { background: var(--crit); }
.pp-rh-personne strong { display: block; font-size: var(--t-s); font-weight: 600; } .pp-rh-personne small { color: var(--encre-3); font-size: var(--t-1); }
.pp-rh-progress { display: grid; grid-template-columns: 1fr auto; gap: var(--e2); align-items: center; font: 500 var(--t-1) var(--donnees); color: var(--encre-3); }
.pp-rh-progress i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; position: relative; }
.pp-rh-progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, var(--action), var(--violet)); border-radius: 3px; }
.pp-rh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* organigramme */
.pp-org { overflow-x: auto; padding: var(--e4) var(--e2) var(--e6); }
.pp-org ul { list-style: none; margin: 0; padding: var(--e5) 0 0; display: flex; justify-content: center; gap: var(--e3); position: relative; width: max-content; min-width: 100%; }
.pp-org > ul { margin: 0 auto; }
.pp-org ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: var(--e5); background: var(--trait-fort); }
.pp-org li { position: relative; display: flex; flex-direction: column; align-items: center; padding: var(--e5) var(--e1) 0; }
.pp-org li::before, .pp-org li::after { content: ""; position: absolute; top: 0; height: var(--e5); width: 50%; border-top: 1px solid var(--trait-fort); }
.pp-org li::before { left: 0; border-right: 1px solid var(--trait-fort); } .pp-org li::after { right: 0; }
.pp-org li:only-child::before, .pp-org li:only-child::after { border-top: 0; } .pp-org li:only-child::before { left: 50%; width: 0; }
.pp-org li:first-child::before { border-top: 0; border-radius: 0; } .pp-org li:last-child::after { border-top: 0; }
.pp-org li:first-child::after, .pp-org li:last-child::before { border-radius: 0; }
.pp-org > ul { padding-top: 0; } .pp-org > ul > li { padding-top: 0; } .pp-org > ul > li::before, .pp-org > ul > li::after { display: none; }
.pp-org-carte { width: 13.5rem; display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e3); align-items: center; padding: var(--e3); border-radius: var(--r-l); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-decoration: none; color: inherit; transition: transform .3s var(--rebond), border-color .2s; }
.pp-org-carte:hover { transform: translateY(-3px); border-color: var(--action); }
.pp-org-carte.service { grid-template-columns: 1fr; width: 15rem; background: color-mix(in srgb, var(--action) 10%, var(--surface)); border-color: color-mix(in srgb, var(--action) 30%, transparent); }
.pp-org-carte.service strong { font-size: var(--t0); } .pp-org-carte.service small { color: var(--encre-2); }
.pp-org-carte strong { font-size: var(--t-s); font-weight: 600; display: block; } .pp-org-carte small { display: block; color: var(--encre-3); font-size: var(--t-1); }
.pp-org-carte .pp-rh-tags { grid-column: 1 / -1; display: flex; gap: var(--e1); flex-wrap: wrap; }
.pp-org-carte.vacant { border-style: dashed; opacity: .8; }
.pp-org-carte.vacant .pp-rh-av { background: var(--surface-2); color: var(--encre-3); border: 1px dashed var(--trait-fort); }
.pp-org-n { font: 500 var(--t-2) var(--donnees); color: var(--encre-3); }
/* parcours */
.pp-rh-parcours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--e5); align-items: start; }
.pp-rh-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pp-rh-etape { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid transparent; }
.pp-rh-etape.fait { opacity: .7; } .pp-rh-etape.bloque { border-color: color-mix(in srgb, var(--crit) 35%, transparent); background: color-mix(in srgb, var(--crit) 8%, var(--surface-2)); }
.pp-rh-etape .pp-rh-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--action); }
.pp-rh-etape.fait .pp-rh-ic { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pp-rh-etape .pp-rh-ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-rh-etape strong { display: block; font-size: var(--t-s); font-weight: 600; } .pp-rh-etape small { color: var(--encre-3); font-size: var(--t-1); }
.pp-rh-etape small a { color: var(--action); text-decoration: none; }
.pp-rh-jour { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); font: 700 var(--t0) var(--donnees); line-height: 1; text-align: center; }
.pp-rh-jour small { font: 500 var(--t-2) var(--donnees); color: var(--encre-3); }
.pp-rh-anneau { --p: 58; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--action) calc(var(--p) * 1%), var(--surface-2) 0); display: grid; place-items: center; }
.pp-rh-anneau b { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 var(--t-s) var(--donnees); }
/* congés */
.pp-rh-soldes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--e3); }
.pp-rh-solde { padding: var(--e3) var(--e4); border-radius: var(--r-l); background: var(--surface-2); display: grid; gap: 2px; }
.pp-rh-solde span { font-size: var(--t-1); color: var(--encre-3); } .pp-rh-solde strong { font: 700 1.6rem/1 var(--donnees); letter-spacing: -.02em; } .pp-rh-solde small { font-size: var(--t-2); color: var(--encre-3); }
.pp-rh-cal { overflow-x: auto; }
.pp-rh-cal table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-1); table-layout: fixed; }
.pp-rh-cal th { position: sticky; top: 0; font: 500 var(--t-2) var(--donnees); color: var(--encre-3); text-align: center; padding: var(--e1) 0 var(--e2); min-width: 24px; }
.pp-rh-cal th.we, .pp-rh-cal td.we { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.pp-rh-cal th.auj { color: var(--action); } .pp-rh-cal td.auj { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action) 50%, transparent); }
.pp-rh-cal th:first-child, .pp-rh-cal td:first-child { position: sticky; left: 0; text-align: left; width: 11rem; background: var(--surface); padding-right: var(--e3); z-index: 1; }
.pp-rh-cal td { height: 34px; overflow: hidden; border-top: 1px solid var(--trait); padding: 3px 1px; }
.pp-rh-cal td i { display: block; height: 100%; border-radius: 4px; }
.pp-rh-cal td i.cp { background: var(--avert); } .pp-rh-cal td i.rtt { background: var(--violet); } .pp-rh-cal td i.tt { background: color-mix(in srgb, var(--action) 45%, transparent); } .pp-rh-cal td i.mal { background: var(--crit); } .pp-rh-cal td i.att { background: repeating-linear-gradient(135deg, var(--avert) 0 4px, transparent 4px 8px); opacity: .8; }
.pp-rh-cal td i.debut { border-radius: 8px 4px 4px 8px; } .pp-rh-cal td i.fin { border-radius: 4px 8px 8px 4px; }
.pp-rh-cal tr.equipe td:first-child { font: 600 var(--t-1) var(--texte); color: var(--encre-2); padding-top: var(--e3); border-top: 0; }
.pp-rh-cal tr.charge td { height: 14px; padding: 2px 1px; border-top: 0; }
.pp-rh-cal tr.charge td i { background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .pp-rh-cal tr.charge td i.c1 { background: color-mix(in srgb, var(--ok) 40%, transparent); } .pp-rh-cal tr.charge td i.c2 { background: color-mix(in srgb, var(--avert) 60%, transparent); } .pp-rh-cal tr.charge td i.c3 { background: var(--crit); }
.pp-rh-leg { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: var(--t-1); color: var(--encre-2); padding-top: var(--e3); }
.pp-rh-leg span { display: inline-flex; align-items: center; gap: var(--e2); } .pp-rh-leg b { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.pp-rh-demande { display: grid; gap: var(--e3); }
.pp-rh-demande .deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.pp-rh-demande label { display: grid; gap: 4px; font-size: var(--t-1); color: var(--encre-2); }
.pp-rh-demande input, .pp-rh-demande select { height: 40px; border-radius: var(--r-m); }
.pp-rh-impact { padding: var(--e3); border-radius: var(--r-l); background: color-mix(in srgb, var(--avert) 10%, transparent); border: 1px solid color-mix(in srgb, var(--avert) 30%, transparent); font-size: var(--t-1); }
.pp-rh-valider { display: grid; gap: var(--e2); }
.pp-rh-valider li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--r-m); background: var(--surface-2); }
.pp-rh-valider .pp-rh-actions { display: flex; gap: var(--e1); }
/* Équipes : fiche, réglages, organigramme en liste sur mobile. */
.pp-fiche-def { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e2) var(--e4); margin: 0 0 var(--e4); }
.pp-fiche-def dt { color: var(--encre-3); font-size: var(--t-1); } .pp-fiche-def dd { margin: 0; }
.pp-rh-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: var(--e2); vertical-align: -1px; }
.pp-rh-service { border-top: 1px solid var(--trait); padding: var(--e2) 0; }
.pp-rh-service summary { cursor: pointer; padding: var(--e2) 0; }
.pp-rh-service form { margin-top: var(--e2); }
.pp-rh-type { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.pp-rh-type input[type=color] { width: 36px; height: 32px; padding: 2px; }
.pp-rh-type label { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-1); color: var(--encre-3); }
.pp-rh-type input[size] { width: 4.5rem; }
.pp-rh-feries { list-style: none; margin: 0 0 var(--e3); padding: 0; display: grid; gap: var(--e1); font-size: var(--t-s); }
.pp-rh-feries li { display: flex; align-items: center; gap: var(--e2); } .pp-rh-feries form { margin-left: auto; }
.pp-rh-feries .donnee { min-width: 5.5rem; color: var(--encre-3); }
.pp-rh-liste > li > a.pp-rh-personne { text-decoration: none; color: inherit; }
@media (max-width: 760px) {
  .pp-org ul, .pp-org > ul { display: block; width: auto; min-width: 0; padding: 0 0 0 var(--e4); }
  .pp-org > ul { padding-left: 0; }
  .pp-org li { display: block; padding: var(--e2) 0 0; }
  .pp-org li::before, .pp-org li::after, .pp-org ul ul::before { display: none; }
  .pp-org-carte, .pp-org-carte.service { width: auto; }
}
/* Équipes : bascule en liens, types d'absence sur une ligne, onglets défilants. */
a.pp-carte-filtre { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--e3); border-radius: var(--rond); color: var(--encre-2); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
a.pp-carte-filtre:hover { background: var(--surface-2); color: var(--encre); }
a.pp-carte-filtre.actif { background: var(--action); color: var(--action-encre); }
.pp-rh-type input[name=libelle] { flex: 1 1 10rem; width: auto; min-width: 8rem; }
.pp-rh-type input[type=color], .pp-rh-service input[type=color], .formulaire input[type=color] { width: 48px; height: 36px; padding: 2px; }
.pp-rh-liste > li > .pp-rh-type + small { display: block; margin: 2px 0 var(--e3); }
.pp-rh-onglets { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pp-rh-onglets a { white-space: nowrap; flex: none; }
/* Équipes, congés : colonnes, légende, types supplémentaires, refus en ligne. */
.pp-rh-conges { grid-template-columns: minmax(0, 1fr) minmax(300px, 24rem); }
@media (max-width: 1100px) { .pp-rh-conges { grid-template-columns: minmax(0, 1fr); } }
.pp-rh-cal th[scope=row] { position: sticky; left: 0; text-align: left; font: 500 var(--t-1) var(--texte); color: var(--encre); background: var(--surface); padding-right: var(--e3); z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-rh-cal td i.recup, .pp-rh-leg b.recup { background: #2DD4BF; }
.pp-rh-cal td i.ss, .pp-rh-cal td i.abs, .pp-rh-leg b.abs { background: var(--muet); }
.pp-rh-leg b.cp { background: var(--avert); } .pp-rh-leg b.rtt { background: var(--violet); } .pp-rh-leg b.tt { background: color-mix(in srgb, var(--action) 45%, transparent); } .pp-rh-leg b.mal, .pp-rh-leg b.c3 { background: var(--crit); }
.pp-rh-leg b.att { background: repeating-linear-gradient(135deg, var(--avert) 0 3px, transparent 3px 6px); }
.pp-rh-mois { display: flex; gap: var(--e1); }
.pp-rh-impact.crit { background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.pp-rh-impact:empty { display: none; }
.pp-rh-valider { list-style: none; margin: 0; padding: 0; }
.pp-rh-valider .pp-rh-actions { align-items: flex-start; }
.pp-rh-refus summary { list-style: none; cursor: pointer; } .pp-rh-refus summary::-webkit-details-marker { display: none; }
.pp-rh-refus[open] form { display: grid; gap: var(--e1); margin-top: var(--e2); }
.pp-rh-liste > li.pp-rh-personne form { margin: 0; }
/* Équipes, congés : noms en casse normale, calendrier défilant, validation sur mobile. */
.pp-rh-cal table { min-width: 46rem; }
.pp-rh-cal th[scope=row], .pp-rh-cal tr.equipe td:first-child { text-transform: none; letter-spacing: normal; font-family: var(--texte); }
.pp-rh-cal tr.equipe td { background: none; }
@media (max-width: 760px) {
  .pp-rh-cal th:first-child, .pp-rh-cal td:first-child, .pp-rh-cal th[scope=row] { width: 7.5rem; max-width: 7.5rem; }
  .pp-rh-valider li { grid-template-columns: auto minmax(0, 1fr); }
  .pp-rh-valider .pp-rh-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.pp-rh-conges > .pp-colonne, .pp-rh-conges .pp-panneau { min-width: 0; }
.pp-rh-cal { max-width: 100%; overflow-x: auto; }
/* Équipes, parcours. */
.pp-rh-avancement { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: center; }
.pp-rh-avancement p { margin: 2px 0 0; font-size: var(--t-s); }
.pp-rh-liste a.pp-rh-personne.actif { background: color-mix(in srgb, var(--action) 12%, transparent); }
.pp-rh-etape-actions { display: grid; justify-items: end; gap: var(--e1); }
.pp-rh-etape-actions select { height: 30px; font-size: var(--t-1); padding: 0 var(--e2); }
@media (max-width: 900px) { .pp-rh-parcours { grid-template-columns: minmax(0, 1fr); } }
/* Équipes, soldes. */
.pp-rh-correction { margin-top: var(--e4); }
.pp-rh-correction-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); }
.pp-rh-journal { margin-top: var(--e3); } .pp-rh-journal summary { cursor: pointer; color: var(--encre-2); }
.pp-grille > #soldes { grid-column: 1 / -1; }
}

@layer pupitre {
/* ---- Visio : salon avec l'appel au centre (A5, Q15), discussion et fichiers dessous ;
   scène 2 × 2 avec indicateurs (micro coupé, qui parle, qualité) ; page des invités.
   Les boutons de la scène passent devant `.pp-scene button:not(…)` par la spécificité
   (`.vs-scene .vs-commandes .vs-commande`), sans toucher à la règle commune. */
.pp-v.vs-salon { height: auto; min-height: 0; align-items: start; }
.vs-salon > .pp-v-liste { position: sticky; top: var(--e4); height: calc(100dvh - var(--v-haut) - 3rem); min-height: 32rem; }
.vs-centre { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.vs-carte { border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.vs-centre > .pp-v-tete { border: 1px solid var(--verre-trait); }
.statut.violet { --c: var(--violet); }

/* scène d'appel */
.vs-scene { --tuile-fond: light-dark(#DCE4EF, #0B1426); display: flex; flex-direction: column; gap: var(--e3); padding: var(--e3) var(--e4) var(--e4); position: relative; }
.vs-scene:fullscreen { background: var(--papier); padding: var(--e5); overflow: auto; border-radius: 0; }
.vs-scene:fullscreen .vs-salle, .vs-scene:fullscreen .vs-scene-corps { flex: 1; }
.vs-scene-tete { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); font-size: var(--t-s); }
.vs-direct { display: inline-flex; align-items: center; gap: var(--e2); padding: .2rem .8rem; border-radius: var(--rond); border: 1px solid var(--trait-fort); font-weight: 600; color: var(--encre-2); background: var(--surface); }
.vs-direct i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--muet); flex: none; }
.vs-direct .donnee { font-weight: 500; }
.vs-scene.en-cours .vs-direct { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); background: color-mix(in srgb, var(--crit) 10%, var(--surface)); }
.vs-scene.en-cours .vs-direct i { background: var(--crit); animation: vs-pouls 2s ease-in-out infinite; }
@keyframes vs-pouls { 50% { opacity: .3; } }
.vs-scene-compte { color: var(--encre-2); }
.vs-scene-compte strong { color: var(--encre); }
.vs-relais { font-size: var(--t-1); color: var(--action); }
.vs-scene-outils { margin-left: auto; display: flex; gap: var(--e2); }
.vs-scene .vs-scene-outils .vs-outil { display: inline-flex; align-items: center; gap: var(--e2); min-height: 36px; height: 36px; padding: 0 var(--e3); border-radius: var(--r-m); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre-2); font-size: var(--t-1); font-weight: 600; box-shadow: none; cursor: pointer; }
.vs-scene .vs-scene-outils .vs-outil:hover { color: var(--action); border-color: var(--action); background: var(--surface); transform: none; box-shadow: none; }
.vs-scene .vs-scene-outils .vs-outil::after { display: none; }
.vs-scene .vs-outil svg.picto { width: 1.05rem; height: 1.05rem; }

/* avant d'entrer : une grille fantôme, le bouton au centre */
.vs-avant { position: relative; display: grid; place-items: center; min-height: 19rem; border-radius: var(--r-l); overflow: hidden; background: var(--tuile-fond); border: 1px solid var(--trait); }
.vs-avant-tuiles { position: absolute; inset: var(--e3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); opacity: .55; }
.vs-avant-tuiles i { border-radius: var(--r-m); border: 1px dashed light-dark(#B6C3D6, rgb(148 163 184 / .22)); background: light-dark(rgb(255 255 255 / .35), rgb(255 255 255 / .02)); }
.vs-avant-texte { position: relative; display: grid; justify-items: center; gap: var(--e3); padding: var(--e5); max-width: 30rem; text-align: center; }
.vs-avant-picto { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--action); background: color-mix(in srgb, var(--action) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--action) 30%, transparent); }
.vs-avant-picto svg.picto { width: 1.6rem; height: 1.6rem; }
.vs-avant-titre { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: -.01em; }
.vs-avant-aide { margin: 0; font-size: var(--t-1); }
.vs-scene .vs-avant .vs-rejoindre { min-height: 46px; padding: 0 var(--e5); }
.vs-appareils { width: 100%; font-size: var(--t-1); text-align: left; }
.vs-appareils > summary { cursor: pointer; color: var(--encre-2); text-align: center; }
.vs-appareils label { display: grid; gap: .2rem; margin-top: var(--e2); color: var(--encre-2); }
.vs-appareils select { min-height: 36px; font-size: var(--t-s); }
.vs-erreur { margin: 0; padding: var(--e2) var(--e3); border-radius: var(--r-m); background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); font-size: var(--t-s); }

/* dans l'appel : grille 2 × 2 */
.vs-salle { display: flex; flex-direction: column; gap: var(--e3); }
.vs-scene-corps { position: relative; }
.vs-scene .vs-grille { display: grid; gap: var(--e3); grid-template-columns: repeat(min(var(--colonnes, 1), 2), minmax(0, 1fr)); grid-auto-rows: auto; min-height: 0; }
.vs-scene .vs-grille[data-nombre="1"] { grid-template-columns: minmax(0, 1fr); max-width: 52rem; width: 100%; margin: 0 auto; }
.vs-scene .vs-grille:not([data-nombre="1"], [data-nombre="2"], [data-nombre="3"], [data-nombre="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-scene .vs-grille.vue-orateur { grid-template-columns: minmax(0, 1fr) 12rem; grid-template-rows: none; grid-auto-flow: row dense; max-width: none; }
.vs-scene .vs-grille.vue-orateur .tuile { grid-column: 2; }
.vs-scene .vs-grille.vue-orateur .tuile.principale { grid-column: 1; grid-row: 1 / span 4; }
.vs-scene .tuile { position: relative; display: block; margin: 0; padding: 0; aspect-ratio: 16 / 9; min-height: 0; border-radius: var(--r-l); overflow: hidden; background: var(--tuile-fond); border: 1px solid var(--trait); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color var(--d-retour), box-shadow var(--d-retour); }
.vs-scene .tuile.parle { outline-color: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 24px -6px color-mix(in srgb, var(--ok) 70%, transparent); }
.vs-scene .tuile.main-levee { outline-color: var(--avert); }
.vs-scene .tuile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-scene .tuile[data-sid="moi"][data-genre="video"] video { transform: scaleX(-1); }
.vs-scene .tuile.ecran video { object-fit: contain; background: #000; }
.vs-scene .tuile.sans-video video { visibility: hidden; }
.vs-scene .tuile-avatar { position: absolute; inset: 0; margin: auto; width: clamp(3rem, 24%, 6rem); aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center; font: 700 clamp(1rem, 2.6vw, 1.9rem) var(--texte); background: light-dark(hsl(var(--h, 200) 55% 46%), hsl(var(--h, 200) 60% 42%)); color: #fff; box-shadow: 0 10px 30px -10px hsl(var(--h, 200) 60% 40% / .7); }
.vs-scene .tuile:not(.sans-video) .tuile-avatar, .vs-scene .tuile.ecran .tuile-avatar { display: none; }
.vs-scene .tuile figcaption { position: absolute; left: var(--e2); right: var(--e2); bottom: var(--e2); display: flex; align-items: center; gap: var(--e2); max-width: max-content; padding: .2rem .6rem; border-radius: var(--rond); background: rgb(2 6 23 / .62); color: #F8FAFC; font-size: var(--t-1); font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vs-scene .tuile-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vs-scene .tuile-main { display: none; }
.vs-scene .tuile.main-levee .tuile-main { display: inline; }
.vs-scene .tuile-muet { display: none; flex: none; position: relative; width: 1rem; height: 1rem; border-radius: 50%; background: #EF4444; }
.vs-scene .tuile-muet::after { content: ""; position: absolute; inset: 44% 20%; border-radius: 1px; background: #fff; }
.vs-scene .tuile.muet .tuile-muet { display: inline-block; }
/* Qui parle : trois barres qui dansent (fixes en mouvement réduit). */
.tuile-parle { display: none; align-items: flex-end; gap: 2px; height: .8rem; flex: none; }
.tuile-parle i { width: 3px; height: 100%; border-radius: 2px; background: #34D399; transform-origin: bottom; animation: vs-barres .9s ease-in-out infinite; }
.tuile-parle i:nth-child(2) { animation-delay: .15s; } .tuile-parle i:nth-child(3) { animation-delay: .3s; }
.tuile.parle .tuile-parle { display: inline-flex; }
@keyframes vs-barres { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
/* Qualité : pastille en haut à gauche (latence · débit · pertes), trois barres teintées. */
.tuile-qualite { position: absolute; top: var(--e2); left: var(--e2); display: inline-flex; align-items: center; gap: var(--e2); max-width: calc(100% - 1rem); padding: .15rem .55rem; border-radius: var(--rond); background: rgb(2 6 23 / .62); color: #E2E8F0; font: 500 var(--t-2) var(--donnees); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); --q: #34D399; }
.tuile-qualite[hidden] { display: none; }
.tuile-qualite[data-niveau="moyen"] { --q: #FBBF24; }
.tuile-qualite[data-niveau="mauvais"] { --q: #F87171; }
.tuile-qualite-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile-barres { display: inline-flex; align-items: flex-end; gap: 2px; height: .7rem; }
.tuile-barres i { width: 3px; border-radius: 1px; background: var(--q); }
.tuile-barres i:nth-child(1) { height: 40%; } .tuile-barres i:nth-child(2) { height: 70%; } .tuile-barres i:nth-child(3) { height: 100%; }
.tuile-qualite[data-niveau="moyen"] .tuile-barres i:nth-child(3), .tuile-qualite[data-niveau="mauvais"] .tuile-barres i:nth-child(n+2) { background: rgb(255 255 255 / .25); }

/* commandes */
.vs-commandes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2); padding: var(--e2); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--trait); }
.vs-commandes-fin { margin-left: auto; display: flex; gap: var(--e2); }
.vs-scene .vs-commandes .vs-commande { display: inline-flex; align-items: center; gap: var(--e2); min-height: 42px; height: 42px; padding: 0 var(--e4); border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface-2); color: var(--encre); font-size: var(--t-s); font-weight: 600; box-shadow: none; cursor: pointer; list-style: none; transition: background-color var(--d-retour), color var(--d-retour), border-color var(--d-retour); }
.vs-scene .vs-commandes .vs-commande::after { display: none; }
.vs-scene .vs-commandes .vs-commande::-webkit-details-marker { display: none; }
.vs-scene .vs-commandes .vs-commande:hover { transform: none; box-shadow: none; background: var(--surface-3); color: var(--encre); }
.vs-scene .vs-commandes .vs-commande svg.picto { width: 1.15rem; height: 1.15rem; }
.vs-commande .picto-off { display: none; }
.vs-commande[aria-pressed="true"] .picto-on { display: none; }
.vs-commande[aria-pressed="true"] .picto-off { display: inline; }
/* Micro et caméra : actifs en couleur (comme la maquette), coupés en rouge. */
.vs-scene .vs-commandes .vs-commande.vs-c-micro, .vs-scene .vs-commandes .vs-commande.vs-c-micro:hover { background: var(--ok); border-color: var(--ok); color: light-dark(#fff, #022C22); }
.vs-scene .vs-commandes .vs-commande.vs-c-camera, .vs-scene .vs-commandes .vs-commande.vs-c-camera:hover { background: var(--action); border-color: var(--action); color: var(--action-encre); }
.vs-scene .vs-commandes .vs-commande:is(.vs-c-micro, .vs-c-camera)[aria-pressed="true"] { background: color-mix(in srgb, var(--crit) 14%, var(--surface)); border-color: color-mix(in srgb, var(--crit) 45%, transparent); color: var(--crit); }
.vs-scene .vs-commandes .vs-commande.vs-c-ecran { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); }
.vs-scene .vs-commandes .vs-commande.vs-c-ecran[aria-pressed="true"] { background: var(--violet); color: #fff; }
.vs-scene .vs-commandes .vs-commande.vs-c-reactions { color: var(--avert); border-color: color-mix(in srgb, var(--avert) 40%, transparent); }
.vs-scene .vs-commandes .vs-commande[data-commande="main"][aria-pressed="true"] { background: color-mix(in srgb, var(--avert) 18%, var(--surface)); border-color: var(--avert); }
.vs-scene .vs-commandes .vs-commande.vs-c-quitter { background: var(--crit); border-color: var(--crit); color: #fff; }
.vs-scene .vs-commandes .vs-commande.vs-c-quitter:hover { background: color-mix(in srgb, var(--crit) 85%, #000); color: #fff; }
.vs-scene .vs-commandes .vs-commande.vs-c-terminer { color: var(--crit); background: transparent; border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.vs-menu-reactions { position: relative; }
.vs-choix-reactions { position: absolute; bottom: calc(100% + var(--e2)); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 2px; padding: var(--e1); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--trait-fort); box-shadow: var(--ombre); }
.vs-scene .vs-choix-reactions button { width: 2.5rem; min-height: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--r-m); background: transparent; font-size: 1.3rem; box-shadow: none; }
.vs-scene .vs-choix-reactions button:hover { background: var(--surface-2); transform: none; box-shadow: none; }
.vs-scene .vs-choix-reactions button::after { display: none; }
.vs-scene .reactions-volantes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vs-scene .reaction-volante .qui { color: #fff; }
.vs-scene .signal { position: absolute; top: var(--e3); left: 50%; transform: translateX(-50%); margin: 0; padding: var(--e2) var(--e4); border-radius: var(--rond); background: rgb(2 6 23 / .78); color: #F8FAFC; font-size: var(--t-s); z-index: 3; }

/* sous la scène : discussion | qualité, fichiers, participants, réglages */
.vs-dessous { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--e4); align-items: start; }
.pp-v-fil.vs-discussion { height: clamp(26rem, 62dvh, 44rem); }
.vs-titre-bloc { margin: 0; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--trait); font-size: var(--t-s); font-weight: 700; display: flex; align-items: center; gap: var(--e2); color: var(--encre-2); text-transform: uppercase; letter-spacing: .06em; }
.vs-cote { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.vs-cote > .pp-v-bloc { border-radius: var(--r-xl); background: var(--verre); border: 1px solid var(--verre-trait); box-shadow: var(--ombre); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: var(--e3) var(--e2); }
.vs-cote > .pp-v-bloc:last-child { border-bottom: 1px solid var(--verre-trait); }
.vs-invite { display: inline-block; padding: 0 .45rem; border-radius: var(--rond); font: 600 var(--t-2) var(--texte); color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); }

/* qualité de l'appel */
.vs-telemetrie h3 .statut { margin-left: auto; }
.vs-mesures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); padding: 0 var(--e3); }
.vs-mesure { display: grid; gap: .3rem; padding: var(--e2) var(--e3); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--trait); min-width: 0; }
.vs-mesure-libelle { font: 600 var(--t-2) var(--texte); color: var(--encre-3); text-transform: uppercase; letter-spacing: .07em; }
.vs-mesure-valeur { font-size: var(--t-s); color: var(--encre-3); }
.vs-mesure-valeur b { font: 600 1.35rem/1 var(--donnees); color: var(--action); letter-spacing: -.02em; }
.vs-mesure-detail { font-size: var(--t-2); }
.vs-mesure .mini-jauge i { transition: width .6s var(--sortie); animation: none; }
.vs-telemetrie[data-niveau="moyen"] .vs-mesure-valeur b { color: var(--avert); }
.vs-telemetrie[data-niveau="mauvais"] .vs-mesure-valeur b { color: var(--crit); }
.vs-telemetrie-note { margin: var(--e2) 0 0; padding: 0 var(--e3); font-size: var(--t-2); }

/* réglages du salon */
.vs-reglage { display: grid; gap: var(--e2); padding: var(--e2) var(--e3) var(--e3); margin: 0 0 var(--e2); border-bottom: 1px solid var(--trait); }
.vs-reglage h4 { margin: 0; font-size: var(--t-s); font-weight: 600; }
.vs-reglage p { margin: 0; font-size: var(--t-1); }
.vs-reglage label { display: grid; gap: .25rem; font-size: var(--t-1); color: var(--encre-2); }
.vs-reglage .actions { display: flex; gap: var(--e2); }
.vs-reglage-suite { padding: 0 var(--e3) var(--e3); margin-top: calc(-1 * var(--e2)); }
.vs-lien { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); }
.vs-lien input { min-height: 36px; font: 400 var(--t-1) var(--donnees); }

/* salle d'attente */
.vs-attente { display: grid; justify-items: center; gap: var(--e3); padding: var(--e7) var(--e5); text-align: center; }
.vs-attente h2 { margin: 0; font-size: var(--t2); }
.vs-attente p { margin: 0; max-width: 36rem; }
.vs-attente-picto { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--avert); background: color-mix(in srgb, var(--avert) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--avert) 35%, transparent); }
.vs-attente-picto svg.picto { width: 1.8rem; height: 1.8rem; }
.vs-mdp { max-width: 32rem; }

/* page des invités */
.vs-page-invite { min-height: 100dvh; }
.vs-haut-invite { padding-bottom: var(--e2); }
.vs-haut-invite form { margin: 0; }
.vs-marque { display: inline-flex; align-items: center; gap: var(--e2); font-weight: 700; letter-spacing: -.02em; }
.vs-moi-invite { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-s); }
.vs-moi-invite > span:last-child { display: grid; line-height: 1.2; }
.vs-moi-invite small { font-size: var(--t-2); }
.vs-centre-invite { max-width: 90rem; margin: 0 auto; }
.vs-composeur-invite { grid-template-columns: minmax(0, 1fr) auto; }

/* Salon : discussion d'abord, appel vidéo par une touche de l'en-tête (2026-11-02, remplace A5/Q15).
   `.vs-appels` accueillera plus tard une touche « Appel » (téléphonie) à côté. */
.vs-appels { display: inline-flex; align-items: center; gap: var(--e2); }
.vs-appels .vs-appel-video { display: inline-flex; align-items: center; gap: var(--e2); min-height: 36px; height: 36px; padding: 0 var(--e4); white-space: nowrap; }
.vs-appels .vs-appel-video svg.picto { width: 1.1rem; height: 1.1rem; }
.vs-appels .vs-appel-video.en-cours { border-color: color-mix(in srgb, var(--crit) 55%, transparent); }
.vs-pastille { width: .55rem; height: .55rem; border-radius: 50%; background: var(--crit); flex: none; animation: vs-pouls 2s ease-in-out infinite; }
.vs-zone-appel { min-width: 0; }
.vs-zone-appel:not([hidden]) .vs-avant { min-height: min(56dvh, 34rem); }
.vs-salon.appel-ouvert .vs-dessous { display: none; }
/* « Retour à la discussion » : seulement dans le salon, et tant qu'on n'est pas dans l'appel. */
.vs-scene #fermer-appel { display: none; }
.vs-zone-appel .vs-scene:not(.en-appel) #fermer-appel { display: inline-flex; }
@media (max-width: 900px) {
  .vs-appels .vs-appel-video { padding: 0 var(--e3); }
}
@media (prefers-reduced-motion: reduce) { .vs-pastille { animation: none; } }

/* La liste des discussions a sa propre hauteur : les lignes restent en haut. */
.vs-salon .pp-v-salons { align-content: start; }
@media (max-width: 1600px) {
  .vs-scene .vs-commandes .vs-commande { padding: 0 var(--e3); font-size: var(--t-1); }
  /* Écran, réactions, main : pictogramme seul (libellé lu et donné en infobulle). */
  .vs-scene .vs-commandes :is(.vs-c-ecran, .vs-c-reactions, .vs-c-main) .libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1200px) {
  .vs-dessous { grid-template-columns: minmax(0, 1fr) 19rem; }
}
@media (max-width: 900px) {
  .pp-v.vs-salon { min-height: 0; }
  .vs-dessous { grid-template-columns: minmax(0, 1fr); }
  .pp-v.salon .pp-v-fil.vs-discussion, .pp-v-fil.vs-discussion { height: 70dvh; }
  .vs-centre { gap: var(--e3); }
  .vs-scene { padding: var(--e2) var(--e3) var(--e3); }
  .vs-relais { display: none; }
  .vs-avant { min-height: 15rem; }
  .vs-scene .vs-commandes .vs-commande { padding: 0 var(--e3); }
  .vs-scene .vs-commandes .vs-commande .libelle, .vs-scene .vs-scene-outils .vs-outil .libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vs-scene .vs-commandes .vs-commande.vs-c-terminer .libelle { position: static; width: auto; height: auto; clip-path: none; }
  .vs-scene .vs-grille.vue-orateur { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-scene .vs-grille.vue-orateur .tuile, .vs-scene .vs-grille.vue-orateur .tuile.principale { grid-column: auto; grid-row: auto; }
  .vs-scene .vs-grille.vue-orateur .tuile.principale { grid-column: 1 / -1; }
  .vs-haut-invite { flex-wrap: wrap; padding: var(--e3) var(--e4) var(--e2); }
  .vs-moi-invite small { display: none; }
}
@media (max-width: 480px) {
  .vs-scene .tuile { aspect-ratio: 4 / 3; }
  .tuile-qualite-texte { display: none; }
  .vs-mesures { padding: 0 var(--e2); }
  .vs-mesure-valeur b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-scene.en-cours .vs-direct i, .tuile-parle i { animation: none; }
  .tuile-parle i { transform: none; }
  .vs-scene .tuile, .vs-mesure .mini-jauge i, .vs-scene .vs-commandes .vs-commande { transition: none; }
}
}

.adresse-longue { overflow-wrap: anywhere; }

@layer pupitre {
/* Page en travaux : gabarit « travaux.html ». Fond jaune sur toute la zone de contenu. */
.contenu.en-travaux { background: var(--travaux-fond); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--travaux) 35%, transparent); }
.bandeau-travaux { margin: 0 0 var(--e5); padding: var(--e3) var(--e4); border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--travaux) 55%, transparent); background: color-mix(in srgb, var(--travaux) 16%, var(--travaux-fond)); color: var(--encre); font-size: var(--t-s); font-weight: 500; }
.bandeau-travaux strong { color: var(--travaux); }

/* Rubrique Gestion */
/* Réglages › Documents : empreinte insécable, et formulaires empilés dans une section. */
.pp-g-coupe { overflow-wrap: anywhere; }
.pp-g-charge .formulaire + .formulaire { margin-top: var(--e4); }
.pp-g-onglets { display: flex; gap: 2px; padding: 3px; border-radius: var(--rond); border: 1px solid var(--trait-fort); background: var(--surface); margin-bottom: var(--e4); max-width: 100%; width: max-content; overflow-x: auto; scrollbar-width: none; }
.pp-g-onglets a { height: 34px; padding: 0 var(--e3); border-radius: var(--rond); display: inline-flex; align-items: center; gap: var(--e2); color: var(--encre-2); text-decoration: none; font-size: var(--t-s); font-weight: 500; white-space: nowrap; }
.pp-g-onglets a[aria-current] { background: var(--action); color: var(--action-encre); font-weight: 600; }
.pp-g-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--e5); align-items: start; }
.pp-g-colonne { display: grid; gap: var(--e5); min-width: 0; }
.pp-g-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.pp-g-tete h2 { margin: 0; }
.pp-g-vide { margin: 0; padding: var(--e4); border: 1px dashed var(--trait-fort); border-radius: var(--r-m); color: var(--encre-3); font-size: var(--t-s); text-align: center; }
.pp-g-flux { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e2); }
.pp-g-etape { padding: var(--e3); border-radius: var(--r-l); background: var(--surface-2); display: grid; gap: 2px; }
.pp-g-etape span { font-size: var(--t-1); color: var(--encre-3); }
.pp-g-etape strong { font: 700 1.4rem/1 var(--donnees); }
.pp-g-etape small { font-size: var(--t-2); color: var(--encre-3); }
.pp-g-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.pp-g-kpi div { padding: var(--e3); border-radius: var(--r-l); background: var(--surface-2); display: grid; gap: 2px; }
.pp-g-kpi span { font-size: var(--t-1); color: var(--encre-3); }
.pp-g-kpi strong { font: 700 1.3rem/1 var(--donnees); }
.pp-g-espace { margin-bottom: var(--e5); }
.pp-g-espace-haut { margin-top: var(--e5); }
/* Lot 4 : données branchées. Un panneau encore en travaux garde le fond jaune à lui seul. */
.panneau.en-travaux { background: var(--travaux-fond); border-color: color-mix(in srgb, var(--travaux) 45%, transparent); }
.panneau.en-travaux h2 { color: var(--travaux); }
.pp-g-reserve { font: 600 var(--t-s)/1.3 var(--texte) !important; color: var(--encre-3); }
.pp-g-kpi small { font-size: var(--t-2); color: var(--encre-3); }
.pp-g-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.pp-g-liste li { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--trait); }
.pp-g-liste li:first-child { border-top: 0; padding-top: 0; }
.pp-g-texte { display: grid; gap: 2px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.pp-g-texte small { color: var(--encre-3); font-size: var(--t-1); }
.pp-g-heure { flex: none; min-width: 4.5rem; color: var(--encre-3); font-size: var(--t-1); }
/* Planning des interventions (cahier du 2026-11-07) : un bloc par jour, lecture seule. */
.pp-g-planning-jour { padding: var(--e3) 0; border-top: 1px solid var(--trait); }
.pp-g-planning-jour:first-of-type { border-top: 0; padding-top: 0; }
.pp-g-planning-titre { margin: 0 0 var(--e2); font-size: var(--t-s); color: var(--encre-2); }
.pp-g-planning-rien { margin: 0; color: var(--encre-3); font-size: var(--t-1); }
.pp-g-texte small.pp-g-planning-sans { color: var(--avert); }
.pp-g-lier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e3); font-size: var(--t-s); }
.pp-g-lier input { width: 7rem; }
@media (max-width: 900px) {
  .pp-g-grille { grid-template-columns: minmax(0, 1fr); }
  .pp-g-flux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pp-g-kpi { grid-template-columns: minmax(0, 1fr); }
  /* G-07 : étapes compactes, « À faire » reste près du haut de la page. */
  .pp-g-flux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .pp-g-etape { padding: var(--e2) var(--e3); }
  .pp-g-etape strong { font-size: 1.1rem; }
  /* G-06 : un bord fondu dit que les onglets continuent. */
  .pp-g-onglets { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
}
/* G-07 : étape en alerte (ambre, jamais rouge). */
.pp-g-etape.alerte { box-shadow: inset 0 0 0 1px var(--avert); }
.pp-g-etape.alerte small { color: var(--encre-2); }
/* G-08 : sur mobile, Contacts avant Historique (les deux colonnes se fondent en une seule pile). */
@media (max-width: 900px) {
  .pp-g-fiche, .pp-g-fiche > .pp-g-colonne { display: contents; }
  .pp-g-fiche { display: grid; gap: var(--e5); }
  .pp-g-o1 { order: 1; } .pp-g-o2 { order: 2; } .pp-g-o3 { order: 3; } .pp-g-o4 { order: 4; } .pp-g-o5 { order: 5; }
}
.pp-g-lier select { max-width: 100%; min-width: 0; }
/* Lot 6 : envoi d'un devis ou d'une facture par le Courrier, au-dessus de la fiche. */
.pp-g-envoi-zone:not(:empty) { margin-bottom: var(--e5); }
.pp-g-envoi .formulaire { max-width: none; }
.pp-g-envoi select, .pp-g-envoi input { max-width: 100%; min-width: 0; }
.pp-disques { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.pp-disques strong { overflow-wrap: anywhere; }
.pp-g-saisie > h3 { margin-top: var(--e4); }
.pp-g-gestes { display: flex; flex-wrap: wrap; gap: var(--e2); flex: none; }
/* UX-01 : sous 600 px, le texte et la pastille restent en haut, les gestes passent dessous. */
@media (max-width: 600px) {
  .pp-g-liste li { flex-wrap: wrap; }
  .pp-g-liste li > .pp-g-gestes { flex-basis: 100%; }
}
/* Lot 5.1 : terrain (liste du jour, fiche d'intervention), d'abord pour le téléphone. */
.pp-g-terrain-fiche { display: grid; gap: var(--e5); max-width: 46rem; }
.pp-g-terrain-fiche .pp-g-envoi-zone:not(:empty) { margin-bottom: 0; }
.pp-g-terrain a.pp-g-texte { color: inherit; text-decoration: none; }
.pp-g-terrain a.pp-g-texte strong { color: var(--action); }
.pp-g-terrain li { min-height: 44px; }
.pp-g-multiligne { white-space: pre-line; }
@media (max-width: 480px) {
  .pp-g-terrain li { flex-wrap: wrap; }
  .pp-g-terrain .pp-g-heure { min-width: 0; }
  .pp-g-terrain-fiche .actions button { width: 100%; min-height: 44px; }
}
/* Lot 8.2 : lignes d'un nouveau devis (produit, quantité, remise, complément). */
.pp-g-lignes-devis { display: grid; gap: var(--e2); }
.pp-g-saisie > .table-cadre, .pp-g-saisie > .pp-g-kpi { margin: var(--e3) 0; }
.pp-g-ligne-devis { display: grid; grid-template-columns: minmax(0, 3fr) minmax(4.5rem, 1fr) minmax(4.5rem, 1fr) minmax(0, 3fr); gap: var(--e2); align-items: center; }
.pp-g-ligne-tete { font-size: var(--t-1); color: var(--encre-3); }
.pp-g-plus-lignes { display: grid; gap: var(--e2); }
.pp-g-plus-lignes > summary { cursor: pointer; color: var(--encre-2); font-size: var(--t-s); padding: var(--e1) 0; }
.pp-g-plus-lignes[open] > .pp-g-ligne-devis + .pp-g-ligne-devis, .pp-g-plus-lignes[open] > summary { margin-bottom: var(--e2); }
@media (max-width: 600px) {
  .pp-g-ligne-devis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--e2); border-bottom: 1px solid var(--trait); }
  .pp-g-ligne-devis > input:first-child, .pp-g-ligne-devis > input:last-child { grid-column: 1 / -1; }
  .pp-g-ligne-tete { display: none; }
}
/* Fiches en consultation (devis, commande, facture, produit, intervention). */
.pp-g-champs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e2) var(--e4); margin: 0; font-size: var(--t-s); }
.pp-g-champs dt { color: var(--encre-3); }
.pp-g-champs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pp-g-kpi.pp-g-totaux { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.pp-g-lignes td.donnee { white-space: nowrap; }
@media (max-width: 480px) {
  .pp-g-champs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pp-g-champs dd { margin-bottom: var(--e2); }
}
/* G-10 : le type d'un résultat de recherche. */
.pp-g-type { display: inline-block; margin-right: .4rem; padding: 0 .4rem; border-radius: var(--rond); background: var(--surface-2); color: var(--encre-2); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
/* G-09 : la version de Dolibarr, en pastille. */
.pp-g-version { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--trait-fort); border-radius: var(--rond); color: var(--encre-2); font-size: var(--t-1); }
/* États S-P18 des panneaux Gestion : neutre, jamais --crit ; « Chargement… » après 150 ms. */
.pp-g-etat { margin: 0; padding: var(--e4); border: 1px dashed var(--trait-fort); border-radius: var(--rayon-m); color: var(--encre-3); font-size: var(--t-s); text-align: center; }
.pp-g-etat[data-etat="indisponible"], .pp-g-etat[data-etat="partiel"] { border-color: var(--avert); color: var(--encre-2); }
.pp-g-etat[data-etat="chargement"] { opacity: 0; animation: pp-g-apparait 0s 150ms forwards; }
@keyframes pp-g-apparait { to { opacity: 1; } }
}

/* UI-06 : un tableau sans ligne n'affiche pas ses en-têtes, seulement l'état vide. */
table:has(tbody > tr:only-child > td.vide) thead { display: none; }

/* UI-08 : catégories de l'Aide à hauteurs égales sur une même rangée, sans trou. */
.pp-scene .rubriques { align-items: stretch; grid-auto-flow: row dense; }
.pp-scene .rubrique { display: flex; flex-direction: column; }
.pp-scene .rubrique .ajout-rubrique { margin-top: auto; padding-top: var(--e2); }

/* Formations : une pastille d état garde sa largeur dans une ligne de liste. */
.pp-rh-liste li.pp-rh-personne > .statut, .pp-rh-liste li > .pp-rh-personne > .statut { justify-self: end; width: fit-content; }

/* Certifications, petit écran : texte et pastille d'état sur la première ligne, boutons dessous (la grille à trois colonnes de .pp-rh-personne ne prévoit que deux éléments). */
@media (max-width: 760px) {
  .pp-rh-liste li > .pp-rh-personne.pp-cert-ligne { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .pp-rh-liste li > .pp-rh-personne.pp-cert-ligne > .pp-rh-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
  .pp-rh-liste li > .pp-rh-personne.pp-cert-ligne > .pp-rh-actions form { margin: 0; }
}

/* Réglages de la Gestion : logo de la signature, sur fond clair comme dans la plupart des messageries. */
.pp-g-logo { display: block; max-width: 100%; height: auto; padding: var(--e2); background: #FFFFFF; border: 1px solid var(--trait); }

/* ---------------------------------------------------------------- Utilisateurs : liste, menu de
   ligne et panneau latéral (préfixe ut-). Le panneau recouvre la droite de l'écran sans quitter la
   liste ; à 900 px et moins, il occupe tout l'écran. */
.ut-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .9rem; }
.ut-recherche { flex: 1 1 18rem; max-width: 30rem; display: block; }
.ut-recherche input, .ut-recherche select { width: 100%; }
/* Filtre « Dolibarr à traiter » et actions globales sur les comptes Dolibarr. */
.ut-filtre { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.ut-outils .ut-dolibarr { display: flex; flex-flow: row wrap; align-items: center; gap: .5rem; margin: 0 0 0 auto; }
.ut-dolibarr form { margin: 0; }
/* Dernières lignes du journal dans l'onglet Dolibarr du panneau. */
.ut-journal { display: grid; gap: .35rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .9rem; }
.ut-journal li { padding-bottom: .35rem; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.ut-journal li:last-child { border-bottom: 0; }
.ut-table td { vertical-align: middle; }
.ut-table .statut { align-items: baseline; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 500; white-space: normal; line-height: 1.3; }
.ut-table .statut::before { flex: none; transform: translateY(-.05em); }
.ut-table .statut.muet { color: var(--encre-2); }
.ut-ligne { cursor: default; }
.ut-ligne[aria-current] td { background: var(--action-doux); }
.ut-ligne[aria-current] td:first-child { box-shadow: inset 2px 0 0 var(--action); }
.ut-ident { display: block; margin-top: .1rem; color: var(--encre-2); font-size: var(--t-1); overflow-wrap: anywhere; }
.ut-table td.col-titre { min-width: 14rem; white-space: normal; }
.ut-indice { display: block; max-width: 30rem; margin-top: .25rem; white-space: normal; color: var(--avert); font-size: var(--t-1); line-height: 1.35; }
.ut-col-menu { width: 2.75rem; text-align: right; }
.ut-plus {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--rayon-m); background: none; color: var(--encre-2);
  font-size: 1.25rem; line-height: 1; box-shadow: none;
}
.ut-plus:hover, .ut-plus[aria-expanded="true"] { background: var(--surface-3); color: var(--encre); box-shadow: none; }
.ut-inactifs { margin-top: 1.25rem; }
.ut-inactifs > summary, .ut-quota > summary { width: fit-content; cursor: pointer; color: var(--encre-2); font-size: .9rem; font-weight: 500; }
.ut-inactifs > summary:hover, .ut-quota > summary:hover { color: var(--encre); }
.ut-inactifs > .table-cadre { margin-top: .6rem; }
.ut-quota { margin-top: 1.5rem; }
.ut-quota > .formulaire { max-width: 26rem; margin-top: .75rem; }
#ut-aucun { margin-top: .75rem; }

.ut-menu {
  position: fixed; z-index: 40; display: grid; min-width: 16rem; max-width: min(21rem, calc(100vw - 1rem)); padding: .3rem;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--surface); box-shadow: var(--ombre);
  transition: opacity var(--duree-retour) var(--sortie), transform var(--duree-retour) var(--sortie);
}
.ut-menu { @starting-style { opacity: 0; transform: scale(.97); } }
.ut-menu [role="menuitem"] {
  display: grid; gap: .05rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: var(--rayon-s); background: none; color: var(--encre);
  font: inherit; font-size: .9rem; font-weight: 400; text-align: left; box-shadow: none; cursor: pointer;
}
.ut-menu [role="menuitem"]:hover, .ut-menu [role="menuitem"]:focus { background: var(--surface-3); color: var(--encre); box-shadow: none; outline: none; }
.ut-menu [role="menuitem"]:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.ut-menu [role="menuitem"].danger { color: var(--crit); }
.ut-menu [role="menuitem"].danger:hover, .ut-menu [role="menuitem"].danger:focus { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); }
.ut-menu [role="menuitem"][aria-disabled="true"] { color: var(--encre-3); cursor: not-allowed; }
.ut-menu [role="menuitem"] small { color: var(--encre-2); font-size: var(--t-1); }
.ut-menu [role="menuitem"] small:empty { display: none; }

.ut-panneau {
  position: fixed; inset: 0 0 0 auto; z-index: 30; display: block; width: min(35rem, 100vw); overflow: hidden;
  border-left: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  box-shadow: -18px 0 44px -18px light-dark(rgb(15 23 42 / .28), rgb(0 0 0 / .7));
  transition: transform var(--duree-apparition) var(--sortie);
}
.ut-panneau { @starting-style { transform: translateX(1.5rem); } }
.ut-contenu { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); height: 100dvh; min-height: 0; }
.ut-contenu > form.ut-corps { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.ut-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .75rem; }
.ut-tete-texte { min-width: 0; }
.ut-tete h2 { margin: 0; font-size: var(--t2); overflow-wrap: anywhere; outline: none; }
.ut-sous { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; margin: .15rem 0 0; color: var(--encre-2); font-size: .85rem; }
button.ut-fermer { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--rayon-m); background: none; color: var(--encre-2); box-shadow: none; }
button.ut-fermer:hover { background: var(--surface-3); color: var(--encre); box-shadow: none; }
#panneau-message:empty { display: none; }
#panneau-message { padding: 0 1.25rem .6rem; }
#panneau-message .message { margin: 0; outline: none; }
.ut-recharger { margin-left: .4rem; }
.ut-onglets { display: flex; gap: .15rem; padding: 0 1.25rem; border-bottom: 1px solid var(--trait); overflow-x: auto; scrollbar-width: none; }
.ut-onglets [role="tab"] {
  flex: none; padding: .55rem .8rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--encre-2);
  font: inherit; font-size: .9rem; font-weight: 500; box-shadow: none;
}
.ut-onglets [role="tab"]:hover { background: none; color: var(--encre); box-shadow: none; }
.ut-onglets [role="tab"][aria-selected="true"] { color: var(--action); border-bottom-color: var(--action); }
.ut-section { min-height: 0; padding: 1rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; outline-offset: -2px; }
.ut-section:has(> .ut-form) { padding-bottom: 0; }
#ut-groupes { margin-bottom: .75rem; }
.ut-corps-creation > .ut-section { padding-bottom: 1rem; }
.ut-form { max-width: none; }
.ut-form .cases-droits { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); align-items: start; }
.ut-form .cases-droits label.case { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; align-items: center; }
.ut-form .cases-droits label.case small { grid-column: 2; padding-left: 0; white-space: normal; }
.ut-sauf-admin { display: grid; gap: 1rem; }
.ut-legende { grid-column: 1 / -1; margin-bottom: .2rem; }
.ut-note { margin: 0 0 .6rem; }
.ut-form + .ut-note { margin-top: 1rem; }
.ut-confirmation { align-items: flex-start; padding: .6rem .7rem; border: 1px solid color-mix(in srgb, var(--avert) 45%, transparent); border-radius: var(--rayon-m); background: color-mix(in srgb, var(--avert) 8%, transparent); font-size: .875rem; }
.ut-confirmation input { margin-top: .2rem; }
.ut-pied { position: sticky; bottom: 0; z-index: 1; margin: .25rem -1.25rem 0; padding: .75rem 1.25rem; border-top: 1px solid var(--trait); background: var(--surface); }
.ut-corps-creation > .ut-pied { position: static; margin: 0; }
.ut-rh { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--trait); }
.ut-section:has(> .ut-form) > .ut-rh { margin-bottom: 1.25rem; }
.ut-rh small { flex-basis: 100%; }
/* Onglet Accès, nouveau moteur des droits (lot 2) : groupes hérités, exceptions repliées, résumé. */
.ut-herites, .ut-resume, .ut-bascule-lignes { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.ut-resume li, .ut-bascule-lignes li { padding-bottom: .3rem; border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.ut-resume li:last-child, .ut-bascule-lignes li:last-child { border-bottom: 0; }
.ut-exceptions > summary { cursor: pointer; color: var(--encre-2); }
.ut-exceptions[open] > summary { margin-bottom: .5rem; }
.ut-bascule { display: grid; gap: .6rem; margin-bottom: 1rem; }
.ut-bascule h2 { margin: 0; font-size: 1rem; }
.ut-champ { display: grid; gap: .2rem; justify-items: start; margin-bottom: .75rem; font-size: .93rem; }
.ut-form > .ut-champ { margin-bottom: 0; }
.ut-etiquette { font-size: .875rem; font-weight: 500; color: var(--encre-2); }
.ut-statut { grid-template-columns: auto auto 1fr; align-items: center; gap: .3rem .75rem; }
.ut-statut .ut-etiquette { grid-column: 1 / -1; }
.ut-statut small { grid-column: 1 / -1; }
.ut-statut button { justify-self: start; }
.ut-statut-long { white-space: normal; }
.ut-titre { margin: 1.1rem 0 .5rem; font-size: .9rem; font-weight: 600; }
.ut-groupes { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.ut-groupes li { padding: .15rem .6rem; border: 1px solid var(--trait-fort); border-radius: var(--rond); font-family: var(--donnees); font-size: var(--t-1); }
.ut-boutons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

/* Écran large : la liste laisse la place du panneau et garde ses colonnes utiles. */
@media (min-width: 1280px) {
  body.ut-ouvert .ut-zone { padding-right: min(35rem, 40vw); }
  body.ut-ouvert .ut-table :is(th, td):nth-child(n+3):nth-child(-n+6) { display: none; }
}
@media (min-width: 1680px) {
  body.ut-ouvert .ut-table :is(th, td):nth-child(n+5):nth-child(-n+6) { display: table-cell; }
}
@media (max-width: 900px) {
  .ut-panneau { inset: 0; z-index: 45; width: 100%; border-left: 0; }
  .ut-contenu { height: 100dvh; }
  body.ut-ouvert { overflow: hidden; }
  table.ut-table tbody tr { position: relative; }
  table.ut-table tbody tr td.ut-col-menu { position: absolute; top: .55rem; right: .55rem; width: auto; }
  table.ut-table tbody tr td.col-titre { padding-right: 2.5rem; }
}

/* Tiroir des agendas du calendrier sous 1100 px (« Agendas » du ruban) : la colonne y est masquée,
   le bouton du ruban l'ouvre par-dessus la grille. Couche pupitre : elle bat les règles de masquage. */
@layer pupitre {
  .appli-agenda button.outil.bouton-agendas, .appli-agenda button.outil.fermer-volet-agendas { display: none; }
  @media (max-width: 1100px) {
    .appli-agenda button.outil.bouton-agendas { display: flex; }
    .appli-agenda.volet-ouvert .volet-agendas { display: block; position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(21rem, 92vw); background: var(--surface); backdrop-filter: none; border-right: 1px solid var(--trait-fort); box-shadow: 0 0 40px rgb(10 20 40 / .35); }
    .appli-agenda.volet-ouvert button.outil.fermer-volet-agendas { display: flex; margin: 0 0 .5rem auto; min-height: 2.75rem; }
  }
}

@layer pupitre {
  /* Interventions de Dolibarr dans le calendrier (cahier du 2026-11-08) : une couleur par technicien,
     « Commun » en teinte muette ; blocs en lecture seule, rangés dans la grille par le script. */
  .cal-inter-commun { --c: var(--encre-3); }
  .cal-inter-c0 { --c: var(--bleu-texte); }
  .cal-inter-c1 { --c: var(--vert-texte); }
  .cal-inter-c2 { --c: var(--violet-texte); }
  .cal-inter-c3 { --c: var(--ambre-texte); }
  .cal-inter-c4 { --c: var(--rose-texte); }
  .cal-inter-c5 { --c: var(--cyan-vif); }
  .cal-inter-c6 { --c: var(--etiquette); }
  .cal-inter-c7 { --c: var(--famille-plan); }
  .cal-inter-case { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
  .cal-inter-case input { margin: 0; accent-color: var(--action); }
  .cal-inter-etat { display: block; margin: .3rem .5rem; font-size: .8rem; }
  a.evt-agenda.cal-inter-bloc { cursor: pointer; }
  a.evt-agenda.cal-inter-bloc:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; z-index: 5; }
  .cal-inter-case:focus-within { border-radius: var(--rayon-s); outline: 2px solid var(--action); outline-offset: 2px; }
  a.evt-agenda.cal-inter-bloc.journee { position: static; }
}

@layer pupitre {
  /* Paramètres › Utilisateurs, vues Groupes et Services (rôles et droits, lot 3) : liste et panneau
     « Gérer », sur le modèle de la vue Personnes ; tout se joue dans le panneau (htmx). */
  .gr-contenu { grid-template-rows: auto auto minmax(0, 1fr); }
  .gr-section { overflow-y: auto; padding-bottom: 2rem; }
  .gr-editeur { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
  .gr-editeur[disabled] { opacity: .75; }
  .gr-editeur .cases-droits label.case .statut { justify-self: start; grid-column: 2; }
  .gr-famille { padding: .75rem; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--surface); }
  .gr-bascule { border-color: color-mix(in srgb, var(--avert) 45%, transparent); background: color-mix(in srgb, var(--avert) 10%, var(--surface)); }
  .gr-table tbody tr[aria-current="true"] { background: color-mix(in srgb, var(--action) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--action); }
  .gr-apercu { display: grid; gap: .5rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--action); border-radius: var(--rayon-m); background: color-mix(in srgb, var(--action) 6%, var(--surface)); }
  .gr-apercu:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .gr-apercu .ut-titre { margin-top: 0; }
  .gr-effets { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
  .gr-effet { display: flex; gap: .4rem; align-items: baseline; color: var(--encre-2); }
  .gr-signe { flex: none; inline-size: 1.1em; font-weight: 700; text-align: center; }
  .gr-mot { font-weight: 600; }
  .gr-gain :is(.gr-signe, .gr-mot) { color: var(--ok); }
  .gr-perte :is(.gr-signe, .gr-mot) { color: var(--crit); }
  .gr-cumul { margin: 0; padding: .5rem .65rem; border-radius: var(--rayon-s); background: color-mix(in srgb, var(--avert) 12%, var(--surface)); }
  .gr-confirmer { margin-bottom: 1rem; }
  .gr-gestes { margin-top: 1rem; }
  .gr-col-gerer { text-align: right; white-space: nowrap; }
  .gr-table td small { white-space: normal; }
  .gr-table td.col-titre { min-width: 12rem; }
  @media (min-width: 1280px) {
    .gr-zone:has(~ .gr-panneau:not([hidden])) { padding-right: min(35rem, 40vw); }
    /* Panneau ouvert : la liste ne garde que le nom, les effectifs et « Gérer ». */
    body.ut-ouvert .gr-table-groupes :is(th, td):nth-child(n+3):nth-child(-n+4) { display: none; }
    body.ut-ouvert .gr-table-services :is(th, td):nth-child(n+2):nth-child(-n+4):not(:nth-child(3)) { display: none; }
  }
  @media (max-width: 900px) {
    table.gr-table tbody tr td.gr-col-gerer { text-align: left; }
  }
}

/* ------------------------------------------------------------ visionneuse PDF (pages …/voir) */
/* Page « voir » (S-P20) : la zone du cadre a sa hauteur dès le départ (S-P18) ; pdf-voir.js
   mesure le haut de la zone et la barre basse `.pp-onglets` dans `--pdf-reserve`. Le cadre
   isolé peint lui-même l'entourage des pages selon le thème (EX-21). */
.pdf-voir { display: flex; flex-direction: column; gap: var(--e3); height: calc(100dvh - var(--pdf-reserve, 16rem)); min-height: 20rem; }
.pdf-voir iframe { flex: 1; display: block; width: 100%; min-height: 0; border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--surface-2); }
.pdf-etat { margin: 0; color: var(--encre-2); font-size: var(--t-1); }
.pdf-etat.message { color: var(--encre); font-size: var(--t0); }
.pdf-pages-impression { display: none; }
/* Le titre reçoit le focus à l'arrivée (lecteurs d'écran) : ce n'est pas une commande. */
#pdf-titre:focus { outline: none; }
@media (max-width: 760px) {
  .pdf-voir iframe { border-radius: var(--rayon-m); }
}
@media print {
  body.pdf-impression > :not(.pdf-pages-impression) { display: none !important; }
  body.pdf-impression .pdf-pages-impression { display: block; }
  .pdf-pages-impression img { display: block; width: 100%; height: auto; break-after: page; }
}

/* Téléphone étroit : le libellé passe au-dessus de sa valeur (aucun mot coupé, aucun chevauchement).
   Couche pupitre : elle bat le socle `cartes-mobiles` (base) ; les libellés de `ut-table` n'ont plus
   de règle propre (même largeur que le socle), donc plus rien hors couche ne la contredit. */
@layer pupitre {
  @media (max-width: 480px) {
    table.cartes-mobiles tbody tr td[data-label], table.cartes-mobiles.ut-table tbody tr td[data-label] { padding-left: 0; }
    table.cartes-mobiles tbody tr td[data-label]::before, table.cartes-mobiles.ut-table tbody tr td[data-label]::before { float: none; display: block; width: auto; margin: 0 0 .15rem; padding-top: 0; }
  }
}