/* Pilote Equipe : meme ossature que le pilote local (inspiree de Vuexy, ecrite
   de zero), identite distincte : sarcelle #00a3b8, pastille « En ligne · equipe ». */

:root {
  --fond: #f8f7fa; --carte: #fff; --titre: #444050; --texte: #6d6b77; --doux: #8d8b94;
  --bord: #e6e6e8; --champ-bord: #d1d0d4; --survol: rgba(47, 43, 61, .06);
  --primaire: #00a3b8; --primaire-fonce: #008799; --succes: #28c76f; --info: #2a8bd8;
  --alerte: #ff9f43; --danger: #ff4c51; --secondaire: #808390;
  --ombre: 0 .1875rem .75rem 0 rgba(47, 43, 61, .14);
  --ombre-sm: 0 .125rem .5rem 0 rgba(47, 43, 61, .12);
  --ombre-primaire: 0 .125rem .375rem 0 rgba(0, 163, 184, .32);
  --rayon: .375rem; --menu-l: 260px;
  --police: "Public Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  color-scheme: light;
}
/* Clair par defaut, quelle que soit la preference du systeme ; sombre sur choix explicite. */
:root[data-theme="dark"] {
  --fond: #1f2a33; --carte: #27343f; --titre: #d3e3ea; --texte: #a9bcc5; --doux: #7f949e;
  --bord: #3a4b57; --champ-bord: #4b5d6a; --survol: rgba(210, 236, 245, .06);
  --primaire: #14b8cc; --primaire-fonce: #0fa0b2;
  --ombre: 0 .1875rem .75rem 0 rgba(10, 18, 24, .3); --ombre-sm: 0 .125rem .5rem 0 rgba(10, 18, 24, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police);
  font-size: .9375rem; line-height: 1.375; min-height: 100dvh; overflow-x: hidden;
}
a { color: var(--primaire); text-decoration: none; }
h1, h2, h3, h4, h5 { color: var(--titre); font-weight: 500; margin: 0; line-height: 1.37; }
h4 { font-size: 1.375rem; } h5 { font-size: 1.125rem; }
p { margin: 0 0 .75rem; }
.ti { font-size: 1.375rem; line-height: 1; }
.doux { color: var(--doux); } .petit { font-size: .8125rem; }
.cache, [hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .8125rem; padding: .1rem .3rem; border-radius: .25rem; background: color-mix(in srgb, var(--primaire) 10%, transparent); color: var(--primaire); word-break: break-all; }

/* ---------- disposition ---------- */
.menu {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--menu-l); display: flex; flex-direction: column;
  background: var(--carte); box-shadow: var(--ombre-sm); transition: transform .25s ease;
}
.marque { display: flex; align-items: center; gap: .75rem; height: 4rem; padding: 0 1.5rem; flex: none; }
.marque-logo {
  position: relative; width: 2rem; height: 2rem; border-radius: var(--rayon); display: grid; place-items: center;
  background: var(--primaire); color: #fff; box-shadow: var(--ombre-primaire);
}
.marque-logo .ti { font-size: 1.25rem; }
.marque-logo .equipe {
  position: absolute; right: -.45rem; bottom: -.4rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--carte); color: var(--primaire); box-shadow: var(--ombre-sm);
}
.marque-logo .equipe .ti { font-size: .75rem; }
.marque-nom { font-size: 1.25rem; font-weight: 700; color: var(--titre); letter-spacing: .01em; white-space: nowrap; }
.menu-liens { flex: 1; overflow-y: auto; padding: .25rem 0 1rem; }
.menu-entete { padding: 1.25rem 1.875rem .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .4px; color: var(--doux); }
.menu-item {
  display: flex; align-items: center; gap: .625rem; margin: .125rem .875rem; padding: .5rem .9375rem;
  border-radius: var(--rayon); color: var(--titre); font-size: .9375rem; transition: background .15s;
}
.menu-item > span:not(.badge) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item:hover { background: var(--survol); }
.menu-item.actif {
  color: #fff; background: linear-gradient(270deg, color-mix(in srgb, var(--primaire) 70%, transparent) 0%, var(--primaire) 100%);
  box-shadow: var(--ombre-primaire);
}
.menu-pied { padding: .875rem 1.5rem; border-top: 1px solid var(--bord); font-size: .8125rem; color: var(--doux); display: flex; align-items: center; gap: .5rem; }
.point { width: .5rem; height: .5rem; border-radius: 50%; background: var(--doux); flex: none; display: inline-block; }
.point.ok { background: var(--succes); box-shadow: 0 0 0 3px color-mix(in srgb, var(--succes) 20%, transparent); }

.voile { display: none; }
.page { margin-left: var(--menu-l); padding: 0 1.5rem; min-height: 100dvh; }
.barre {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem;
  max-width: 1440px; margin: 0 auto; height: 3.5rem; padding: 0 1rem 0 1.5rem;
  background: color-mix(in srgb, var(--carte) 92%, transparent); backdrop-filter: blur(6px);
  border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: var(--ombre-sm);
}
.fil { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9375rem; }
.fil a { color: var(--doux); } .fil a:hover { color: var(--primaire); }
.fil .sep { color: var(--doux); margin: 0 .4rem; }
.fil .courant { color: var(--titre); font-weight: 500; }
.barre-actions { display: flex; align-items: center; gap: .25rem; flex: none; }
.badge.edition { --c: var(--primaire); flex: none; font-weight: 700; }
.icone-btn {
  width: 2.375rem; height: 2.375rem; border: 0; border-radius: 50%; background: transparent; color: var(--titre);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.icone-btn:hover { background: var(--survol); }
.seulement-mobile { display: none; }
main { max-width: 1440px; margin: 0 auto; padding: 1.5rem 0 4rem; }

/* selecteur de poste et menus deroulants */
.ancre { position: relative; }
.choix-poste {
  display: inline-flex; align-items: center; gap: .45rem; max-width: 15rem; height: 2.375rem; padding: 0 .65rem;
  border: 1px solid var(--bord); border-radius: 50rem; background: transparent; color: var(--titre);
  font: 500 .875rem var(--police); cursor: pointer;
}
.choix-poste:hover { background: var(--survol); }
.choix-poste .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-poste .ti { font-size: 1rem; color: var(--doux); }
.avatar {
  width: 2.375rem; height: 2.375rem; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; font: 600 .875rem var(--police); color: var(--primaire);
  background: color-mix(in srgb, var(--primaire) 16%, transparent);
}
.deroulant {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; min-width: 15rem; max-width: calc(100vw - 32px);
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .5rem 0;
}
.deroulant .tete { padding: .5rem 1rem .75rem; border-bottom: 1px solid var(--bord); margin-bottom: .375rem; }
.deroulant .tete b { color: var(--titre); display: block; font-weight: 600; }
.deroulant-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem 1rem; border: 0; background: none;
  color: var(--titre); font: .9rem var(--police); cursor: pointer; text-align: left;
}
.deroulant-item:hover { background: var(--survol); }
.deroulant-item .ti { font-size: 1.15rem; color: var(--texte); }
.deroulant-item.choisi { color: var(--primaire); font-weight: 500; }
.deroulant-item > span:not(.point) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deroulant hr { border: 0; border-top: 1px solid var(--bord); margin: .375rem 0; }

@media (max-width: 1199.98px) {
  .menu { transform: translateX(-100%); }
  .menu.ouvert { transform: none; box-shadow: var(--ombre); }
  .voile.visible { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(20, 30, 38, .5); }
  .page { margin-left: 0; padding: 0 16px; }
  .barre { padding: 0 .5rem; }
  .seulement-mobile { display: grid; }
}
@media (max-width: 767.98px) {
  .fil { display: none; }
  .barre { justify-content: space-between; }
  .choix-poste { max-width: 7.5rem; padding: 0 .5rem; }
}
@media (max-width: 480px) {
  .edition-detail { display: none; }
  .barre { gap: .25rem; }
  .barre-actions { gap: 0; }
  .choix-poste { max-width: 5.75rem; gap: .3rem; }
  .choix-poste .ti-chevron-down { display: none; }
  .badge.edition { padding: .2rem .4rem; }
}
@media (max-width: 359.98px) {
  .choix-poste { max-width: 4.6rem; }
  .icone-btn, .avatar { width: 2.125rem; height: 2.125rem; }
}

/* ---------- cartes ---------- */
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); margin-bottom: 1.5rem; min-width: 0; }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.5rem 1.5rem 0; flex-wrap: wrap; }
.carte-entete .sous-titre { font-size: .8125rem; color: var(--doux); margin-top: .125rem; }
.carte-corps { padding: 1.5rem; }
@media (max-width: 575.98px) {
  .carte-entete { padding: 1.25rem 1.25rem 0; }
  .carte-corps { padding: 1.25rem; }
}
.grille { display: grid; gap: 1.5rem; }
.grille > .carte { margin-bottom: 0; }
.grille-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.colonnes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grille-stats { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
.entete-page { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.entete-page h4 { word-break: break-word; }
.entete-page .meta { margin-top: .375rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8125rem; }

.stat { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; color: inherit; }
.stat .valeur { font-size: 1.25rem; font-weight: 500; color: var(--titre); line-height: 1.2; word-break: break-word; }
.stat .libelle { font-size: .8125rem; color: var(--texte); }
a.stat:hover .valeur { color: var(--primaire); }
.pastille-icone {
  --c: var(--primaire); flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--rayon);
  display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
}
.c-primaire { --c: var(--primaire); } .c-succes { --c: var(--succes); } .c-info { --c: var(--info); }
.c-alerte { --c: var(--alerte); } .c-danger { --c: var(--danger); } .c-secondaire { --c: var(--secondaire); }

.badge {
  --c: var(--secondaire); display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem;
  border-radius: .25rem; font-size: .8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
}
.badge .ti { font-size: .9rem; }
.etiquette { --c: var(--secondaire); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- boutons et champs ---------- */
.btn {
  --c: var(--primaire); display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5413rem 1.25rem; border-radius: var(--rayon); border: 1px solid transparent; cursor: pointer;
  font: 500 .9375rem/1.375 var(--police); transition: all .15s; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
}
.btn .ti { font-size: 1.125rem; }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 24%, transparent); }
.btn.plein { color: #fff; background: var(--c); box-shadow: 0 .125rem .375rem 0 color-mix(in srgb, var(--c) 30%, transparent); }
.btn.plein:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 88%, #000); }
.btn.contour { background: transparent; border-color: var(--c); }
.btn.texte { background: transparent; padding-inline: .5rem; }
.btn.texte:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 8%, transparent); }
.btn.petit { padding: .3rem .75rem; font-size: .8125rem; }
.btn.bloc { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.boutons { display: flex; gap: .75rem; flex-wrap: wrap; }
.champ {
  width: 100%; padding: .5435rem .9375rem; font: inherit; color: var(--titre); background: transparent;
  border: 1px solid var(--champ-bord); border-radius: var(--rayon); transition: border-color .15s, box-shadow .15s;
}
.champ::placeholder { color: var(--doux); }
.champ:focus { outline: 0; border-color: var(--primaire); box-shadow: var(--ombre-primaire); }
@media (max-width: 767.98px) { .champ { font-size: 16px; } }
select.champ {
  -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--doux) 50%), linear-gradient(135deg, var(--doux) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .8rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat;
}
select.champ option { background: var(--carte); color: var(--titre); }
input[type="search"].champ { -webkit-appearance: none; appearance: none; }
label.etiquette-champ { display: block; font-size: .8125rem; color: var(--titre); margin: 0 0 .3rem; }
.groupe { margin-bottom: 1rem; }
.ligne-champ { display: flex; gap: .75rem; flex-wrap: wrap; }
.ligne-champ > .champ { flex: 1 1 12rem; min-width: 0; }
.message { font-size: .875rem; margin: .25rem 0 1rem; padding: .6rem .8rem; border-radius: var(--rayon); }
.message.erreur { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.message.ok { color: var(--succes); background: color-mix(in srgb, var(--succes) 10%, transparent); }

/* ---------- listes ---------- */
.liste-item { display: flex; align-items: center; gap: .875rem; padding: .875rem 0; border-bottom: 1px solid var(--bord); color: inherit; min-width: 0; }
.liste-item:last-child { border-bottom: 0; }
a.liste-item:hover .liste-titre { color: var(--primaire); }
.liste-corps { flex: 1; min-width: 0; }
.liste-titre { display: block; color: var(--titre); font-weight: 500; word-break: break-word; }
.liste-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .2rem; font-size: .8125rem; color: var(--doux); }
.liste-meta .ti { font-size: .95rem; vertical-align: -2px; margin-right: .15rem; }
.liste-actions { display: flex; gap: .25rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.etiquettes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.vide { text-align: center; color: var(--doux); padding: 1.75rem .5rem; font-size: .875rem; }
.vide .ti { display: block; font-size: 2.25rem; margin-bottom: .5rem; color: color-mix(in srgb, var(--primaire) 55%, var(--doux)); }
.vide .btn { margin-top: .875rem; }
@media (max-width: 575.98px) {
  .liste-item.repli { flex-wrap: wrap; }
  .liste-item.repli .liste-actions { width: 100%; justify-content: flex-start; }
}

.filtres { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.filtres .champ { flex: 1 1 14rem; min-width: 0; }
.puces { display: flex; gap: .4rem; flex-wrap: wrap; margin: .75rem 0 .25rem; }
.puce {
  --c: var(--primaire); display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 50rem;
  border: 1px solid var(--bord); background: transparent; color: var(--texte); font: 500 .8125rem var(--police); cursor: pointer;
}
.puce.actif { color: #fff; background: var(--c); border-color: var(--c); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--bord); margin-top: .5rem; font-size: .8125rem; }
.pagination .boutons { gap: .375rem; }

.onglets { display: flex; gap: .25rem; padding: 0 1rem; border-bottom: 1px solid var(--bord); overflow-x: auto; }
.onglet {
  display: inline-flex; align-items: center; gap: .4rem; padding: .85rem 1rem .7rem; border: 0; background: none; cursor: pointer;
  font: 500 .9rem var(--police); color: var(--texte); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.onglet .ti { font-size: 1.1rem; }
.onglet.actif { color: var(--primaire); border-bottom-color: var(--primaire); }

.table-simple { overflow-x: auto; }
.table-simple table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-simple th, .table-simple td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.table-simple th { color: var(--titre); font-weight: 500; white-space: nowrap; }

/* code d'appairage */
.code-appairage {
  font: 700 1.75rem/1.2 var(--mono); letter-spacing: .12em; color: var(--titre); text-align: center;
  padding: 1rem; border: 2px dashed color-mix(in srgb, var(--primaire) 50%, transparent); border-radius: var(--rayon);
  background: color-mix(in srgb, var(--primaire) 6%, transparent); margin: .75rem 0; word-break: break-all;
}
.secret { font: 600 1.05rem var(--mono); color: var(--titre); background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .75rem; text-align: center; word-break: break-all; margin: .75rem 0; user-select: all; }
.etapes { margin: .5rem 0 0; padding-left: 1.25rem; }
.etapes li { margin-bottom: .4rem; }

/* ---------- ecran de connexion ---------- */
.ecran-seul { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 16px; }
.ecran-seul .carte { width: min(26rem, 100%); margin: 0; }
.ecran-seul .marque { padding: 0; height: auto; margin-bottom: 1.25rem; }
.ecran-seul h4 { margin-bottom: .25rem; }

/* ---------- modale, toast ---------- */
.modale { position: fixed; inset: 0; z-index: 60; background: rgba(20, 30, 38, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modale-boite { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); width: min(30rem, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modale-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem .25rem; }
.modale-corps { padding: .5rem 1.25rem 1.25rem; }
.toast {
  position: fixed; z-index: 70; right: 1.5rem; bottom: 1.5rem; max-width: min(24rem, calc(100vw - 32px));
  background: var(--carte); color: var(--titre); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: .875rem 1rem; display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; border-left: 3px solid var(--primaire);
}
.toast .ti { color: var(--primaire); }
.toast.erreur { border-left-color: var(--danger); } .toast.erreur .ti { color: var(--danger); }
@media (max-width: 575.98px) { .toast { left: 16px; right: 16px; } }
.chargement { text-align: center; padding: 2rem 0; color: var(--doux); }
.chargement .ti { display: inline-block; animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.liste-actions select.champ { width: auto; padding-block: .3rem; font-size: .8125rem; }
.liste-item > .avatar { cursor: default; }
details > summary { cursor: pointer; margin: 1rem 0 .5rem; }

/* ---------- assistant de demarrage ---------- */
.menu-item .badge { flex: none; }
.menu-item.actif .badge { background: rgba(255, 255, 255, .25); color: #fff; }
.progression { height: .5rem; border-radius: 50rem; background: color-mix(in srgb, var(--primaire) 16%, transparent); overflow: hidden; margin: .5rem 0 1rem; }
.progression > span { display: block; height: 100%; width: 0; background: var(--primaire); border-radius: inherit; transition: width .3s; }
.progression-titre { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; flex-wrap: wrap; color: var(--titre); }
.progression-titre .ti { font-size: 1.1rem; vertical-align: -2px; color: var(--primaire); }
a.carte-demarrage { display: block; color: inherit; border-left: 3px solid var(--primaire); }
a.carte-demarrage .progression { margin-bottom: 0; }
.onglets-systeme { display: flex; gap: .4rem; flex-wrap: wrap; }
.onglets-systeme .ti { font-size: 1rem; }
.message.info { color: var(--titre); background: color-mix(in srgb, var(--info) 12%, transparent); }
details.etape { overflow: hidden; }
details.etape > summary { list-style: none; }
details.etape > summary::-webkit-details-marker { display: none; }
.etape-tete { display: flex; align-items: center; gap: .875rem; padding: 1.125rem 1.5rem; cursor: pointer; margin: 0 !important; }
.etape-tete:hover { background: var(--survol); }
.etape-tete .numero {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600;
  color: var(--primaire); background: color-mix(in srgb, var(--primaire) 14%, transparent);
}
.etape.faite .numero { color: #fff; background: var(--succes); }
.etape-tete .numero .ti { font-size: 1.1rem; }
.etape-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.etape-titre b { color: var(--titre); font-weight: 600; }
.etape-corps { border-top: 1px solid var(--bord); }
.etape-corps > p .ti { font-size: 1rem; vertical-align: -2px; }
@media (max-width: 575.98px) {
  .etape-tete { padding: 1rem; flex-wrap: wrap; }
  .etape-tete .badge { margin-left: 2.875rem; }
}
.bloc-commande { margin: .5rem 0 .875rem; }
.legende-commande { font-size: .8125rem; color: var(--texte); margin-bottom: .3rem; }
.commande { position: relative; }
.commande pre {
  margin: 0; padding: .7rem 2.75rem .7rem .875rem; overflow-x: auto; border-radius: var(--rayon);
  background: #1e2a33; color: #d8eef3; font: .8125rem/1.5 var(--mono); white-space: pre;
}
.commande pre code { background: none; color: inherit; padding: 0; word-break: normal; font-size: inherit; }
.commande .copier { position: absolute; top: .25rem; right: .25rem; color: #d8eef3; width: 2rem; height: 2rem; }
.commande .copier:hover { background: rgba(255, 255, 255, .12); }
.commande .copier .ti { font-size: 1.1rem; }
.verification { border: 1px solid color-mix(in srgb, var(--succes) 35%, var(--bord)); border-radius: var(--rayon); padding: .75rem .875rem; margin: 1rem 0; }
.titre-bloc { font-weight: 600; color: var(--titre); display: flex; align-items: center; gap: .4rem; }
.titre-bloc .ti { color: var(--succes); font-size: 1.15rem; }
.attendu { font-size: .875rem; }
details.problemes, details.packs { margin: .75rem 0; }
details.problemes > summary, details.packs > summary { display: flex; align-items: center; gap: .4rem; color: var(--titre); font-weight: 500; margin: 0; }
details.problemes > summary .ti, details.packs > summary .ti { font-size: 1.15rem; color: var(--primaire); }
details.problemes ul { margin: .5rem 0 0; padding-left: 1.25rem; font-size: .875rem; }
details.problemes li { margin-bottom: .35rem; }
.categorie-packs { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--doux); margin: 1rem 0 .25rem; }
.pack { display: flex; gap: .625rem; align-items: flex-start; padding: .4rem 0; cursor: pointer; }
.pack input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; flex: none; accent-color: var(--primaire); }
.pack > span { display: flex; flex-direction: column; min-width: 0; }
.pack b { color: var(--titre); font-weight: 500; font-family: var(--mono); font-size: .8125rem; word-break: break-all; }
.coche-etape { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; padding: .75rem .875rem; border-radius: var(--rayon); background: var(--fond); cursor: pointer; color: var(--titre); font-weight: 500; }
.coche-etape input { width: 1.2rem; height: 1.2rem; accent-color: var(--succes); margin: 0; flex: none; }
.hors-ecran { position: fixed; left: -9999px; top: 0; }

/* ---------- assistant pas a pas ---------- */
.indicateur { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .25rem; }
.indicateur li { min-width: 0; }
.pas { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--texte); text-align: center; padding: .25rem 0; border-radius: var(--rayon); }
.pas:hover { background: var(--survol); }
.pas .rond {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .875rem;
  color: var(--doux); background: var(--fond); border: 2px solid var(--bord);
}
.pas .rond .ti { font-size: 1.05rem; }
.pas .nom { font-size: .72rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pas.auto .rond { color: #fff; background: var(--succes); border-color: var(--succes); }
.pas.manuel .rond { color: var(--info); border-color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.pas.probleme .rond { color: #fff; background: var(--danger); border-color: var(--danger); }
.pas.reprendre .rond { color: var(--alerte); border-color: var(--alerte); border-style: dashed; }
.pas.courant .rond { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaire) 35%, transparent); border-color: var(--primaire); }
.pas.courant .nom { color: var(--titre); font-weight: 600; }
.etape-mobile { display: none; margin: 0 0 .25rem; color: var(--titre); }
.etape-active .etape-tete { padding: 0 0 1rem; cursor: default; border-bottom: 1px solid var(--bord); margin-bottom: 1rem !important; }
.etape-active .etape-tete:hover { background: none; }
.numero { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: var(--primaire); background: color-mix(in srgb, var(--primaire) 14%, transparent); }
.numero.fait { color: #fff; background: var(--succes); }
.numero .ti { font-size: 1.1rem; }
.badges-etape { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.onglets-systeme { margin-bottom: 1rem; }
.verif-poste, .verif-hub { border: 1px solid color-mix(in srgb, var(--primaire) 35%, var(--bord)); background: color-mix(in srgb, var(--primaire) 4%, transparent); border-radius: var(--rayon); padding: 1rem; margin: 1rem 0; }
.verif-hub { margin-top: 0; }
.verif-poste .titre-bloc .ti, .verif-hub .titre-bloc .ti { color: var(--primaire); }
.verif-hub p .ti, .c-succes-texte { color: var(--succes); }
.controles { list-style: none; padding: 0; margin: .75rem 0 .25rem; }
.controles li { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; font-size: .875rem; }
.controles li .ti { font-size: 1.15rem; flex: none; }
.controles li.ok .ti { color: var(--succes); } .controles li.ko .ti { color: var(--danger); } .controles li.facultatif .ti { color: var(--doux); }
.controles b { font-weight: 500; color: var(--titre); }
.manques { list-style: none; padding: 0; margin: .75rem 0; }
.manques li { padding: .5rem .75rem; border-left: 3px solid var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); border-radius: 0 var(--rayon) var(--rayon) 0; margin-bottom: .5rem; font-size: .875rem; color: var(--titre); }
.manques li .bloc-commande { margin: .4rem 0 0; }
.recap .manques li { border-left-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 8%, transparent); }
.attente-verif { margin-top: .75rem; }
.en-attente { color: var(--titre); font-weight: 500; }
.en-attente .ti { display: inline-block; animation: tourne 1s linear infinite; vertical-align: -3px; }
.coche-etape.repli { background: transparent; border: 1px dashed var(--champ-bord); font-weight: 400; }
.navigation-assistant { display: flex; gap: .75rem; justify-content: space-between; margin-bottom: 1.5rem; }
.navigation-assistant .btn { flex: 0 1 auto; }
.liste-item.recap { align-items: flex-start; }
.liste-item.recap .etiquettes { margin-top: .3rem; }
.boutons.centre { justify-content: center; margin-top: 1rem; }
.fin-assistant .vide .ti { color: var(--succes); font-size: 3rem; }
.fin-assistant h4 { margin-bottom: .5rem; }
@media (max-width: 767.98px) {
  .indicateur { display: none; }
  .etape-mobile { display: block; }
  .navigation-assistant {
    position: sticky; bottom: 0; z-index: 10; margin: 0 -16px; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--bord);
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  }
  .navigation-assistant [data-action="verifier"] { grid-column: 1 / -1; grid-row: 1; }
  .navigation-assistant .btn { width: 100%; }
  .etape-active .etape-tete { flex-wrap: wrap; }
  .badges-etape { justify-content: flex-start; width: 100%; padding-left: 2.875rem; }
}

/* Couleurs semantiques : apres .badge, .btn et .puce qui fixent --c par defaut. */
.c-primaire { --c: var(--primaire); } .c-succes { --c: var(--succes); } .c-info { --c: var(--info); }
.c-alerte { --c: var(--alerte); } .c-danger { --c: var(--danger); } .c-secondaire { --c: var(--secondaire); }
.titre-instructions { margin: 1.25rem 0 .5rem; } .titre-instructions .ti { color: var(--primaire); }

/* ---------- connexion, securite ---------- */
.separateur { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--doux); font-size: .8125rem; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 1px solid var(--bord); }
.code-totp { font: 600 1.25rem var(--mono); letter-spacing: .2em; text-align: center; }
.codes-secours { line-height: 1.8; }
.coche-ligne { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; cursor: pointer; font-size: .9rem; color: var(--titre); }
.coche-ligne input { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; flex: none; accent-color: var(--primaire); }
.choix-radio { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: .5rem; cursor: pointer; }
.choix-radio:has(input:checked) { border-color: var(--primaire); background: color-mix(in srgb, var(--primaire) 6%, transparent); }
.choix-radio input { margin: .2rem 0 0; accent-color: var(--primaire); flex: none; }
.choix-radio > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; color: var(--titre); }
.champ-court { max-width: 10rem; }
.c-alerte-texte { color: var(--alerte); }
.menu-item.discret { color: var(--texte); font-size: .875rem; }
.menu-item.discret .ti { font-size: 1.1rem; }

/* ---------- favoris ---------- */
.etoile { flex: none; padding-inline: .35rem; }
.etoile .ti { font-size: 1.15rem; }
.entete-categorie { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.grille-favoris { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.carte-projet { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.25rem; color: inherit; transition: transform .15s; }
.carte-projet:hover { transform: translateY(-2px); }

/* ---------- consommation ---------- */
.grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grille-4 { grid-template-columns: minmax(0, 1fr); } }
.histogramme { display: flex; align-items: flex-end; gap: 2px; height: 10rem; overflow-x: auto; padding-bottom: 1.2rem; }
.jour-barre { flex: 1 0 .9rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.jour-barre .barre { display: block; width: 100%; max-width: 1.6rem; background: var(--primaire); border-radius: .2rem .2rem 0 0; min-height: 2px; }
.jour-barre .etiquette-jour { position: absolute; bottom: -1.2rem; font-size: .65rem; color: var(--doux); }
.montant { color: var(--titre); white-space: nowrap; }
.filtres select.champ { width: auto; }

/* ---------- skills et agents ---------- */
details.plugin > summary { list-style: none; cursor: pointer; }
details.plugin > summary::-webkit-details-marker { display: none; }
.plugin-tete { display: flex; align-items: center; gap: .875rem; }
.plugin-tete:hover { background: var(--survol); }
.carte-corps.serre { padding-top: 0; }
.lien-element { border: 0; background: none; text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.lien-element:hover .liste-titre { color: var(--primaire); }
.liste-item.element { padding: .6rem 0; }
.pastille-icone.petite { width: 1.9rem; height: 1.9rem; }
.pastille-icone.petite .ti { font-size: 1.05rem; }
.liste-meta .sujet { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.modale-boite { width: min(46rem, 100%); }
.fiche-md { border-top: 1px solid var(--bord); margin-top: 1rem; padding-top: .75rem; color: var(--titre); font-size: .9rem; }
.fiche-md h3, .fiche-md h4, .fiche-md h5 { margin: 1rem 0 .4rem; font-size: 1rem; font-weight: 600; }
.fiche-md pre { background: #1e2a33; color: #d8eef3; padding: .7rem .875rem; border-radius: var(--rayon); overflow-x: auto; font: .8rem/1.5 var(--mono); }
.fiche-md pre code { background: none; color: inherit; padding: 0; word-break: normal; }
.fiche-md ul, .fiche-md ol { padding-left: 1.25rem; }

/* ---------- programmees ---------- */
.jours { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.jour { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--bord); border-radius: var(--rayon); padding: .3rem .55rem; font-size: .85rem; cursor: pointer; }
.jour input { accent-color: var(--primaire); }

/* ---------- taches : deroule, validations (lots 2 et 3) ---------- */
.entete-tache { min-width: 0; }
.entete-tache h4 { word-break: break-word; }
.entete-page .meta a { display: inline-flex; align-items: center; gap: .2rem; margin-left: .5rem; }
.entete-page .meta .ti { font-size: 1rem; vertical-align: -2px; }
.entete-page .meta code { word-break: break-all; }
.deroule { display: flex; flex-direction: column; gap: .6rem; }
.ev-texte { display: flex; gap: .6rem; align-items: flex-start; }
.ev-texte .pastille-icone { width: 2rem; height: 2rem; flex: none; }
.ev-texte .bulle { flex: 1; min-width: 0; margin: 0; padding: .65rem .85rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); overflow-wrap: anywhere; }
.ev-texte .bulle p:last-child { margin-bottom: 0; }
.ev-outil { display: flex; align-items: baseline; gap: .45rem; font-size: .8125rem; color: var(--doux); padding-left: 2.6rem; min-width: 0; }
.ev-outil.sous { padding-left: 3.6rem; }
.ev-outil .ti { font-size: 1rem; flex: none; align-self: center; }
.ev-outil .nom { font-weight: 600; color: var(--titre); flex: none; }
.ev-outil .quoi { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-info { display: flex; gap: .45rem; align-items: flex-start; font-size: .8125rem; color: var(--texte); padding: .4rem .6rem; border-radius: var(--rayon); background: color-mix(in srgb, var(--info) 8%, transparent); overflow-wrap: anywhere; }
.ev-info.erreur { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.ev-info .ti { font-size: 1rem; flex: none; }
.ev-statut { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem 0; }
.carte-demande { border: 1px solid color-mix(in srgb, var(--alerte) 55%, var(--bord)); border-left-width: 4px; border-radius: var(--rayon); padding: .75rem .875rem; background: color-mix(in srgb, var(--alerte) 6%, var(--carte)); }
.carte-demande.close { border-color: var(--bord); background: transparent; }
.carte-demande .tete { display: flex; align-items: center; gap: .5rem; color: var(--titre); margin-bottom: .5rem; }
.carte-demande .tete .pastille-icone { width: 1.9rem; height: 1.9rem; }
.carte-demande pre { max-height: 16rem; overflow: auto; font: .75rem/1.45 var(--mono); background: var(--fond); padding: .5rem; border-radius: var(--rayon); white-space: pre-wrap; overflow-wrap: anywhere; }
.carte-demande .choix { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; }
.commande-demande { display: block; white-space: pre-wrap; word-break: break-all; padding: .45rem .6rem; }
pre.consigne { max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .75rem/1.5 var(--mono); background: var(--fond); padding: .75rem; border-radius: var(--rayon); margin: .75rem 0 0; }
.texte-danger { color: var(--danger); }
.issue-prete { border-left: 3px solid var(--primaire); padding-left: .65rem; background: color-mix(in srgb, var(--primaire) 5%, transparent); }
.liste-item a.liste-titre:hover { color: var(--primaire); }
.petite-icone { font-size: .85rem !important; }
.installation-executant { margin: 1rem 0; }
.fichiers-executant { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.fichiers-executant a { font-weight: 500; display: inline-flex; align-items: center; gap: .3rem; }
.fichiers-executant .ti { font-size: 1.05rem; }
.empreinte { font-size: .75rem; overflow-wrap: anywhere; }
.empreinte code { font-size: .72rem; }
.filtres-journal input[type=date].champ { flex: 0 1 11rem; }
.filtres-journal .btn { flex: none; }
@media (max-width: 575.98px) {
  .ev-outil { padding-left: .25rem; }
  .ev-outil.sous { padding-left: 1rem; }
  .entete-page .meta a { margin-left: 0; }
  .filtres-journal input[type=date].champ { flex: 1 1 45%; }
}

/* ---------- discussions de projet ---------- */
.onglets-projet { padding: 0 .75rem; }
.onglets-projet .badge { padding: .05rem .4rem; }
.centre { text-align: center; }
.entete-liste { padding: 1rem 0 .25rem; text-transform: uppercase; letter-spacing: .4px; font-size: .75rem; }
.apercu-discussion { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-discussion b { color: var(--titre); font-weight: 500; }
/* La carte occupe la hauteur de l'ecran ; le fil prend ce que la saisie laisse. */
.discussion { position: relative; display: flex; flex-direction: column; height: clamp(24rem, calc(100dvh - 11rem), 64rem); }
.discussion > .onglets, .discussion > .epingles, .discussion > .saisie, .discussion > .nouveaux-messages { flex: none; }
.discussion.depot { outline: 2px dashed var(--primaire); outline-offset: -6px; }
.epingles { border-bottom: 1px solid var(--bord); padding: 0 1rem; }
.epingles summary { display: flex; align-items: center; gap: .35rem; color: var(--titre); font-size: .875rem; margin: .6rem 0; }
.epingles summary .ti { font-size: 1rem; color: var(--alerte); }
.epingles .citation { margin-bottom: .5rem; }
.fil-discussion { flex: 1 1 0; min-height: 6rem; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .75rem 1rem; }
.fil-discussion:focus { outline: none; }
.fil-discussion > .vide { padding-top: 4rem; }
.separateur-jour, .separateur-nouveaux { display: flex; align-items: center; gap: .75rem; margin: 1rem 0 .5rem; font-size: .75rem; color: var(--doux); }
.separateur-jour::before, .separateur-jour::after, .separateur-nouveaux::before, .separateur-nouveaux::after { content: ""; flex: 1; border-top: 1px solid var(--bord); }
.separateur-jour span::first-letter { text-transform: uppercase; }
.separateur-nouveaux { color: var(--danger); font-weight: 600; }
.separateur-nouveaux::before, .separateur-nouveaux::after { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.msg { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: .6rem; padding: .3rem .5rem; border-radius: var(--rayon); margin-top: .35rem; }
.msg.suite { margin-top: 0; padding-top: .1rem; }
.msg:hover { background: var(--survol); }
.msg.epingle { background: color-mix(in srgb, var(--alerte) 7%, transparent); }
.msg.surligne { animation: surligne 1.6s ease; }
@keyframes surligne { from { background: color-mix(in srgb, var(--primaire) 22%, transparent); } }
.msg-tete { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; min-width: 0; flex-wrap: wrap; }
.msg-tete b { color: var(--titre); font-weight: 600; }
.avatar.petit { width: 2.25rem; height: 2.25rem; font-size: .75rem; cursor: default; }
.msg-corps { grid-column: 2; min-width: 0; color: var(--titre); }
.msg-tete + .msg-corps { margin-top: -.6rem; }
.msg-texte.fiche-md { border: 0; margin: 0; padding: 0; overflow-wrap: anywhere; }
.msg-texte p { margin: 0 0 .4rem; }
.msg-texte p:last-child { margin-bottom: 0; }
.msg-texte pre { max-width: 100%; }
.msg-heure { position: absolute; left: .25rem; top: .35rem; width: 2.25rem; text-align: center; font-size: .65rem; opacity: 0; }
.msg:hover .msg-heure { opacity: 1; }
.mention { color: var(--primaire); font-weight: 600; }
.mention.moi { background: color-mix(in srgb, var(--alerte) 22%, transparent); color: var(--titre); border-radius: .2rem; padding: 0 .15rem; }
.citation {
  display: flex; align-items: baseline; gap: .35rem; width: 100%; max-width: 36rem; margin: .1rem 0 .35rem; padding: .35rem .6rem; text-align: left;
  border: 0; border-left: 3px solid var(--primaire); border-radius: 0 var(--rayon) var(--rayon) 0; background: var(--fond);
  color: var(--texte); font: .8125rem var(--police); cursor: pointer; min-width: 0;
}
.citation b { color: var(--titre); flex: none; font-weight: 600; }
.citation span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citation .ti { font-size: .95rem; flex: none; align-self: center; }
.carte-tache { display: flex; align-items: center; gap: .6rem; max-width: 30rem; margin: .35rem 0; padding: .55rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon); color: inherit; background: var(--carte); flex-wrap: wrap; }
.carte-tache > .ti { color: var(--primaire); font-size: 1.15rem; }
.msg-pieces { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .15rem; }
.piece-image { padding: 0; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); cursor: zoom-in; overflow: hidden; max-width: 100%; line-height: 0; }
/* Taille en valeurs absolues : un pourcentage dependrait de la largeur du bouton, elle-meme tiree de l'image. */
.piece-image img { display: block; max-width: min(22rem, calc(100vw - 7rem)); max-height: 15rem; width: auto; height: auto; }
.piece-fichier { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .5rem .75rem; border: 1px solid var(--bord); border-radius: var(--rayon); color: var(--titre); background: var(--carte); }
.piece-fichier:hover { border-color: var(--primaire); }
.piece-fichier .ti { color: var(--primaire); flex: none; }
.piece-fichier .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.piece-fichier .petit { flex: none; }
.msg-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .3rem; }
.msg-pied .ti { font-size: .85rem; vertical-align: -1px; }
.reaction { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .5rem; border: 1px solid var(--bord); border-radius: 50rem; background: var(--carte); color: var(--titre); font: .8125rem var(--police); cursor: pointer; }
.reaction.moi { border-color: var(--primaire); background: color-mix(in srgb, var(--primaire) 12%, transparent); }
.choix-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.choix-reactions button { width: 2.25rem; height: 2.25rem; border: 1px solid var(--bord); border-radius: 50%; background: var(--carte); font-size: 1.1rem; cursor: pointer; }
.choix-reactions button:hover { background: var(--survol); }
.msg-actions { position: absolute; top: -.6rem; right: .5rem; display: flex; gap: 1px; padding: 2px; border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre-sm); opacity: 0; pointer-events: none; }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; pointer-events: auto; }
.msg-actions button { width: 2rem; height: 2rem; border: 0; border-radius: var(--rayon); background: transparent; color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.msg-actions button:hover { background: var(--survol); color: var(--primaire); }
.msg-actions button.danger:hover { color: var(--danger); }
.msg-actions .ti { font-size: 1.1rem; }
.edition textarea { resize: vertical; margin-bottom: .5rem; }
.boutons.serres { gap: .3rem; flex-wrap: nowrap; }
.nouveaux-messages { display: flex; margin: -3rem auto .75rem; position: relative; z-index: 2; border-radius: 50rem; box-shadow: var(--ombre); }
.saisie { border-top: 1px solid var(--bord); padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); }
.saisie.lecture-seule { display: flex; align-items: center; gap: .4rem; padding: 1rem; }
.saisie.lecture-seule .ti { font-size: 1.1rem; }
.saisie-ligne { display: flex; align-items: flex-end; gap: .35rem; }
.saisie-ligne textarea { flex: 1; min-width: 0; resize: none; max-height: 200px; line-height: 1.4; padding-block: .5rem; }
.saisie-ligne .envoyer { flex: none; padding: .5rem .8rem; }
.saisie-ligne .icone-btn { color: var(--texte); }
.seulement-tactile { display: none; }
@media (hover: none) { .seulement-tactile { display: grid; } }
.aide-saisie { margin-top: .35rem; }
.reponse-en-cours { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; padding: .35rem .5rem; border-left: 3px solid var(--primaire); background: var(--fond); border-radius: 0 var(--rayon) var(--rayon) 0; font-size: .8125rem; }
.reponse-en-cours > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reponse-en-cours .icone-btn { width: 1.9rem; height: 1.9rem; }
.pieces-attente { display: flex; flex-wrap: wrap; gap: .5rem; }
.pieces-attente:not(:empty) { margin-bottom: .5rem; }
.piece-attente { display: flex; align-items: center; gap: .5rem; width: min(100%, 17rem); padding: .35rem .35rem .35rem .5rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.piece-attente.erreur { border-color: color-mix(in srgb, var(--danger) 50%, var(--bord)); }
.piece-attente > img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: .25rem; flex: none; }
.piece-attente > .ti { font-size: 1.4rem; color: var(--primaire); flex: none; width: 2.5rem; text-align: center; }
.piece-attente.erreur > .ti { color: var(--danger); }
.piece-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.piece-info .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--titre); font-size: .8125rem; font-weight: 500; }
.piece-info .progression { height: .3rem; margin: .25rem 0 0; }
.piece-attente .icone-btn { width: 1.9rem; height: 1.9rem; }
.progression.mince { display: block; height: .35rem; margin: .35rem 0 .5rem; min-width: 5rem; }
.visionneuse { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 3.5rem 16px 1.5rem; background: rgba(12, 18, 24, .88); }
.visionneuse img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; border-radius: var(--rayon); background: #fff; }
.visionneuse [data-fermer] { position: absolute; top: .75rem; right: .75rem; color: #fff; background: rgba(255, 255, 255, .12); }
@media (hover: none) {
  .msg-actions { display: none; position: static; grid-column: 2; opacity: 1; pointer-events: auto; box-shadow: none; background: transparent; padding: 0; margin-top: .1rem; justify-self: start; }
  .msg.montre { background: var(--survol); }
  .msg.montre .msg-actions { display: flex; }
  .msg-actions button { width: 2.25rem; height: 2rem; color: var(--doux); }
}
@media (max-width: 575.98px) {
  .entete-discussion { margin-bottom: .75rem; }
  .entete-discussion .meta, .entete-discussion > .btn { display: none; }
  .discussion { height: calc(100dvh - 8.75rem); min-height: 22rem; margin-bottom: .75rem; }
  .fil-discussion { padding: .25rem .25rem .75rem; }
  .epingles details[open] { max-height: 30dvh; overflow-y: auto; }
  .msg { grid-template-columns: 2rem minmax(0, 1fr); column-gap: .5rem; padding-inline: .35rem; }
  .avatar.petit { width: 2rem; height: 2rem; }
  .msg-tete + .msg-corps { margin-top: -.45rem; }
  .saisie { padding-inline: .5rem; }
  .aide-saisie { display: none; }
  .onglets-projet { padding: 0 .25rem; }
}
.quotas-pieces { display: flex; flex-direction: column; gap: .1rem; margin-top: .4rem; color: var(--texte); }
.quotas-pieces .ti { font-size: .95rem; vertical-align: -2px; margin-right: .25rem; }
.quotas-pieces b { color: var(--titre); font-weight: 600; }
.quotas-pieces.avertissement { color: var(--titre); padding: .35rem .5rem; border-radius: var(--rayon); background: color-mix(in srgb, var(--alerte) 14%, transparent); }
.quotas-pieces.avertissement .ti { color: var(--alerte); }