/* =========================================================
   Prox-i · Suivi de maintenance — composants ajoutés à
   l'industrialisation. Même vocabulaire visuel que le
   prototype : noir, blanc, cyan #14dff4, angles nets.
   ========================================================= */

/* ---------------------------------------------------------
   Écran de connexion
   --------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  background: var(--noir);
}

.auth-vitrine {
  padding: 52px 56px;
  color: #b4b4b4;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.auth-vitrine::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(20, 223, 244, .16);
  border-radius: 50%;
}
.auth-vitrine img.logo { width: 190px; height: auto; display: block; }
.auth-vitrine h1 {
  color: var(--blanc);
  font-size: 40px;
  line-height: 1.15;
  margin: auto 0 0;
  max-width: 15ch;
}
.auth-vitrine h1 b { color: var(--cyan); font-weight: 400; }
.auth-vitrine .baseline {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 18px 0 0;
  max-width: 46ch;
  color: #9a9a9a;
}
.auth-points {
  display: flex;
  gap: 28px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  flex-wrap: wrap;
}
.auth-points div { max-width: 190px; }
.auth-points dt {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 6px;
}
.auth-points dd { margin: 0; font-size: 12.5px; color: #8a8a8a; line-height: 1.55; }

.auth-panneau {
  background: var(--surface);
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-panneau h2 { font-size: 25px; margin-bottom: 6px; }
.auth-panneau .sous { font-size: 13px; color: var(--encre-2); margin: 0 0 28px; line-height: 1.6; }
.auth-panneau .field { margin-bottom: 16px; }
.auth-panneau .btn-lg { width: 100%; justify-content: center; }
.auth-aide {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
  font-size: 12px;
  color: var(--encre-3);
  line-height: 1.65;
}

@media (max-width: 1000px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-vitrine { padding: 34px 26px; }
  .auth-vitrine h1 { font-size: 30px; margin-top: 30px; }
  .auth-panneau { padding: 34px 26px; }
}

/* ---------------------------------------------------------
   Barre supérieure — notifications et compte
   --------------------------------------------------------- */

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.cloche {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  color: var(--encre);
}
.cloche:hover { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.cloche svg { width: 17px; height: 17px; }
.cloche .pastille {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger);
  color: var(--blanc);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
}

.pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 460px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--noir);
  border-top: 3px solid var(--cyan);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  display: none;
}
.pop.is-open { display: block; }
.pop-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pop-head h3 { font-size: 14px; }
.pop-vide { padding: 32px 16px; text-align: center; color: var(--encre-3); font-size: 12.5px; }
.pop-item {
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ligne);
  color: inherit;
  text-decoration: none;
}
.pop-item:hover { background: var(--cyan-voile); text-decoration: none; }
.pop-item.is-neuf { background: var(--surface-2); }
.pop-item.is-neuf .pop-titre::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-encre);
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
.pop-titre { font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.pop-texte { font-size: 11.5px; color: var(--encre-2); margin-top: 3px; line-height: 1.5; }
.pop-date {
  font-size: 10px;
  color: var(--encre-3);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.menu-compte { position: relative; }
.menu-compte > button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.menu-compte > button:hover { border-color: var(--noir); }
.menu-compte .qui { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: left; }
.menu-compte .role { font-size: 10px; color: var(--encre-3); letter-spacing: .04em; }
.menu-compte .avatar { background: var(--noir); color: var(--cyan); border-color: var(--noir); }
.pop.pop-compte { width: 250px; }
.pop-lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--encre);
  border-bottom: 1px solid var(--ligne);
}
.pop-lien:last-child { border-bottom: none; }
.pop-lien:hover { background: var(--surface-2); text-decoration: none; }
.pop-lien svg { width: 15px; height: 15px; color: var(--encre-3); }

/* ---------------------------------------------------------
   Messages flash
   --------------------------------------------------------- */

.flashs { position: sticky; top: 64px; z-index: 40; padding: 14px 34px 0; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.55;
  border-left: 3px solid;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border-top: 1px solid var(--ligne);
  border-right: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}
.flash svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.flash-succes { border-left-color: var(--ok); color: #0d4b30; background: var(--ok-soft); }
.flash-erreur { border-left-color: var(--danger); color: #7d1611; background: var(--danger-soft); }
.flash-info { border-left-color: var(--cyan); color: #04525f; background: var(--cyan-voile); }
.flash-attention { border-left-color: #d98c0c; color: #6b4304; background: var(--warn-soft); }
.flash .fermer { margin-left: auto; border: none; background: none; cursor: pointer; color: inherit; opacity: .6; }
.flash .fermer:hover { opacity: 1; }

/* ---------------------------------------------------------
   Tableau kanban des tickets
   --------------------------------------------------------- */

.kanban {
  display: grid;
  grid-auto-flow: column;
  /* Les colonnes s'étirent quand la place le permet, et défilent sinon. */
  grid-auto-columns: minmax(206px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 14px;
  align-items: start;
}
.kan-col { background: var(--surface-3); border-radius: var(--radius); min-height: 120px; }
.kan-col-head {
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--noir);
  position: sticky;
  top: 0;
  background: var(--surface-3);
  z-index: 2;
}
.kan-col-head .titre {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--encre-2);
}
.kan-col-head .compte {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--noir);
  color: var(--cyan);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}
.kan-col.attend-client .kan-col-head { border-bottom-color: #d98c0c; }
.kan-col.attend-client .kan-col-head .compte { background: #d98c0c; color: var(--blanc); }
.kan-liste { padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.kan-vide {
  padding: 22px 10px;
  text-align: center;
  color: var(--encre-3);
  font-size: 11.5px;
}

.kan-carte {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  display: block;
  color: inherit;
  text-decoration: none;
}
.kan-carte:hover { border-color: var(--noir); border-left-color: var(--cyan); text-decoration: none; }
.kan-carte.est-urgent { border-left-color: var(--danger); }
.kan-carte .ref {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--encre-3);
  font-weight: 700;
  letter-spacing: .04em;
}
.kan-carte .titre { font-size: 12.5px; font-weight: 700; line-height: 1.42; margin: 4px 0 7px; }
.kan-carte .client { font-size: 11px; color: var(--encre-2); }
.kan-carte .pied {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--ligne);
  flex-wrap: wrap;
}
.kan-carte .heures {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--encre-2);
}

/* ---------------------------------------------------------
   Fil de discussion d'un ticket
   --------------------------------------------------------- */

.fil { display: flex; flex-direction: column; }
.fil-msg { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ligne); }
.fil-msg:last-child { border-bottom: none; }
.fil-msg .avatar { flex: none; }
.fil-msg.est-client .avatar { background: var(--cyan-voile); color: var(--cyan-encre); border-color: var(--cyan); }
.fil-msg.est-interne { background: var(--warn-soft); }
.fil-corps { flex: 1; min-width: 0; }
.fil-entete { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.fil-auteur { font-size: 12.5px; font-weight: 700; }
.fil-date {
  font-size: 10.5px;
  color: var(--encre-3);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
}
.fil-texte { font-size: 13px; line-height: 1.65; color: var(--encre); white-space: pre-wrap; word-wrap: break-word; }
.fil-texte a { word-break: break-all; }

.fil-systeme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ligne);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--encre-2);
}
.fil-systeme .puce {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--noir);
  color: var(--cyan);
}
.fil-systeme .puce svg { width: 12px; height: 12px; }
.fil-systeme b { color: var(--encre); font-weight: 700; }

.pj-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.pj {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--encre);
  max-width: 260px;
}
.pj:hover { border-color: var(--noir); text-decoration: none; background: var(--surface); }
.pj .ext {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--noir);
  color: var(--cyan);
  padding: 2px 5px;
  border-radius: 2px;
  flex: none;
}
.pj .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj .poids { color: var(--encre-3); font-size: 10.5px; flex: none; }
.pj-vignette {
  display: block;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 128px;
}
.pj-vignette img { display: block; width: 100%; height: 88px; object-fit: cover; }
.pj-vignette .nom {
  font-size: 10.5px;
  padding: 5px 7px;
  color: var(--encre-2);
  border-top: 1px solid var(--ligne);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-reponse { padding: 16px 18px; border-top: 1px solid var(--noir); background: var(--surface-2); }
.zone-reponse .textarea { min-height: 92px; background: var(--surface); }
.zone-reponse-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.fichier-champ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 12px;
  color: var(--encre-2);
  cursor: pointer;
}
.fichier-champ:hover { border-color: var(--noir); color: var(--encre); }
.fichier-champ input { display: none; }
.fichier-champ svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------
   Bandeau de décision — ce que l'application attend de vous
   --------------------------------------------------------- */

.decision {
  border: 1px solid var(--noir);
  border-top: 3px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.decision.attend-vous { border-top-color: #d98c0c; background: var(--warn-soft); }
.decision h3 { font-size: 16px; margin-bottom: 5px; }
.decision p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--encre-2); }
.decision .chiffre {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  display: block;
  margin-bottom: 3px;
}
.decision-actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------
   Compteur de réserve d'heures
   --------------------------------------------------------- */

.reserve-bloc {
  background: var(--noir);
  color: var(--blanc);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.reserve-bloc .etiquette {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.reserve-bloc .solde {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--cyan);
  margin: 9px 0 4px;
}
.reserve-bloc .solde.est-bas { color: #ff8078; }
.reserve-bloc .detail { font-size: 12px; color: #9a9a9a; line-height: 1.55; }
.reserve-bloc .bar { background: #2e2e2e; margin: 14px 0 9px; }
.reserve-bloc .repartition {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.reserve-bloc .repartition div { flex: 1; min-width: 96px; }
.reserve-bloc .repartition dt {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #767676;
}
.reserve-bloc .repartition dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Étapes de progression d'un ticket
   --------------------------------------------------------- */

.jalons { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.jalons li {
  flex: 1;
  min-width: 92px;
  padding: 9px 10px 9px 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-3);
  background: var(--surface-3);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
  margin-right: 2px;
}
.jalons li:first-child { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); padding-left: 12px; }
.jalons li:last-child { margin-right: 0; }
.jalons li.est-fait { background: var(--noir); color: #cfcfcf; }
.jalons li.est-courant { background: var(--cyan); color: var(--noir); }
.jalons li.attend-client { background: #d98c0c; color: var(--blanc); }

/* ---------------------------------------------------------
   Espace client — nuances
   --------------------------------------------------------- */

.sidebar.est-client .brand-sub b { color: var(--cyan); }
.bandeau-client {
  background: var(--cyan-voile);
  border-bottom: 1px solid var(--cyan);
  padding: 9px 34px;
  font-size: 12px;
  color: #04525f;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bandeau-client svg { width: 15px; height: 15px; flex: none; }

/* ---------------------------------------------------------
   Rapport imprimable
   --------------------------------------------------------- */

.report {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  padding: 46px 52px;
  max-width: 940px;
  margin: 0 auto;
}
.report-entete {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--noir);
  margin-bottom: 28px;
}
.report-entete img { width: 148px; height: auto; }
.report-entete h1 { font-size: 26px; line-height: 1.2; }
.report-entete .meta {
  margin-left: auto;
  text-align: right;
  font-size: 11.5px;
  color: var(--encre-2);
  line-height: 1.7;
}
.report h2 {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--encre-2);
  margin: 30px 0 12px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--cyan);
  font-family: var(--font);
}
.report h2:first-of-type { margin-top: 0; }
.report p { font-size: 13px; line-height: 1.7; color: var(--encre); }
.report-pied {
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--ligne);
  font-size: 11px;
  color: var(--encre-3);
  line-height: 1.7;
}

/* ---------------------------------------------------------
   Divers
   --------------------------------------------------------- */

.pagination { display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: 20px; }
.pagination a, .pagination span {
  padding: 5px 11px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--encre-2);
  background: var(--surface);
}
.pagination a:hover { border-color: var(--noir); color: var(--noir); text-decoration: none; }
.pagination .est-courant { background: var(--noir); border-color: var(--noir); color: var(--cyan); }

.form-erreur { color: var(--danger); font-size: 11.5px; margin-top: 5px; font-weight: 600; }
.input.est-invalide, .textarea.est-invalide, .select.est-invalide { border-color: var(--danger); }

.chip-choix { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.chip-choix label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
  background: var(--surface);
}
.chip-choix label:has(input:checked) { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.chip-choix input { accent-color: var(--cyan); }

.stat-ligne { display: flex; align-items: baseline; gap: 8px; }
.stat-ligne .valeur {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}
.stat-ligne .unite { font-size: 11.5px; color: var(--encre-3); }

.sep-h { height: 1px; background: var(--ligne); margin: 18px 0; }

.ext-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ext-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--encre-3);
  font-weight: 650;
  padding: 5px 8px;
  border-bottom: 1px solid var(--ligne);
}
.ext-table td { padding: 4px 8px; border-bottom: 1px solid var(--ligne); }
.ext-table tr:last-child td { border-bottom: none; }
.ext-table .input, .ext-table .select { padding: 4px 8px; font-size: 12.5px; }

.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-card {
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 12.5px;
  cursor: pointer;
  flex: 1;
  min-width: 150px;
}
.radio-card:has(input:checked) { border-color: var(--cyan); background: var(--cyan-voile); }
.radio-card input { margin-right: 6px; }
.radio-card b { display: block; font-weight: 600; }

@media print {
  .flashs, .cloche, .menu-compte, .bandeau-client, .zone-reponse, .decision { display: none !important; }
}

/* ---------------------------------------------------------
   Choix de sites, filtré par client
   --------------------------------------------------------- */

.choix-sites {
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.choix-sites.est-invalide { border-color: var(--danger); }

.choix-sites-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--ligne);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.choix-sites-barre .search .input { min-width: 0; }

.choix-sites-liste { max-height: 280px; overflow-y: auto; }

.choix-site {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ligne);
  cursor: pointer;
}
.choix-site:last-child { border-bottom: none; }
.choix-site:hover { background: var(--cyan-voile); }
.choix-site input { accent-color: var(--cyan); flex: none; }
.choix-site:has(input:checked) { background: var(--cyan-voile); }
.choix-site-corps { flex: 1; min-width: 0; }
.choix-site-corps .nom { display: block; font-size: 13px; font-weight: 600; }
.choix-site-corps .meta { display: block; font-size: 11px; color: var(--encre-3); }
.choix-site-tech { display: flex; gap: 8px; flex: none; }
.choix-site-tech .tech { font-size: 11px; }

.choix-sites-vide { padding: 22px 14px; text-align: center; color: var(--encre-3); font-size: 12.5px; }

/* ---------------------------------------------------------
   Boîte de dialogue de confirmation
   --------------------------------------------------------- */

.confirmation .modal { max-width: 460px; }
.confirmation .modal-body { font-size: 13.5px; line-height: 1.6; }
.confirmation .modal-body .objet {
  display: block;
  margin-top: 8px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--ligne-forte);
  font-size: 12.5px;
  color: var(--encre-2);
}

/* ---------- Choix des technologies d'un site ---------- */

.technos-choix {
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.technos-choix.est-invalide { border-color: var(--danger); }

.technos-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 11px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ligne);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.technos-ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  border-bottom: 1px solid var(--ligne);
}

.technos-ligne:last-child { border-bottom: 0; }
.technos-ligne:hover { background: var(--surface-2); }

.technos-case {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  cursor: pointer;
}

.technos-principale { display: flex; cursor: pointer; }
.technos-principale input:disabled { cursor: not-allowed; }

/* Intitulé réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.technos-ligne input { accent-color: var(--cyan); }
.technos-ligne input[type=radio]:disabled { opacity: .3; }

/* ---------- Éditeur de protocole ---------- */

.protocole-etape {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--ligne);
}

.protocole-etape-rang {
  flex: 0 0 26px;
  height: 26px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 800;
  color: var(--encre-3);
  background: var(--surface-2);
}

.protocole-etape-corps { flex: 1; min-width: 0; }

/* ---------- Parcours d'entrée : client → sites → contrat ---------- */

.parcours {
  border: 1px solid var(--ligne);
  background: var(--surface);
  padding: 14px 16px 16px;
}

.parcours-titre {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 11px;
}

.parcours-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.parcours-etapes > li {
  display: flex;
  gap: 12px;
  /* Les chiffres s'assoient sur la même ligne d'écriture que les titres :
     c'est ce qui les fait lire comme une numérotation, et non comme des
     vignettes posées à côté. */
  align-items: baseline;
  padding: 0 20px;
  border-left: 1px solid var(--ligne);
}

.parcours-etapes > li:first-child { padding-left: 0; border-left: 0; }

/* Le rang était un carré noir plein : dans un encart qui ne fait que guider,
   c'était la chose la plus lourde de l'écran. Il criait plus fort que le titre
   qu'il annonce et que le lien sur lequel il faut cliquer.

   Il redevient un simple numéro d'ordre, et rend l'accent au seul élément qui
   appelle un geste : le lien. */
.parcours-rang {
  flex: none;
  min-width: 17px;
  font-size: 21px;
  /* Assez lisible pour qu'on suive l'ordre — c'est tout le propos de
     l'encart —, assez léger pour rester derrière le titre. */
  font-weight: 600;
  line-height: 1;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}

/* Les descriptions ne font pas toutes la même longueur : sans cela, les trois
   liens retombent à des hauteurs différentes et l'encart perd ce qu'il veut
   montrer — trois étapes parallèles, dans l'ordre. */
.parcours-etapes > li > div {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.parcours-etapes b { font-size: 13px; }
.parcours-etapes span { font-size: 12px; color: var(--encre-2); margin: 2px 0 8px; }

.parcours-etapes a {
  /* Poussé en pied de colonne, et large de son seul texte : le filet cyan
     souligne le lien, pas la colonne. */
  margin-top: auto;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-encre);
  text-decoration: none;
  border-bottom: 1px solid var(--cyan);
}

.parcours-etapes a:hover { color: var(--noir); border-bottom-color: var(--noir); }

@media (max-width: 900px) {
  .parcours-etapes { grid-template-columns: 1fr; gap: 14px; }
  .parcours-etapes > li { padding: 0; border-left: 0; }
}

/* Bouton d'action à la fin d'un encart : poussé à droite, aligné au texte. */
.callout > .btn { margin-left: auto; align-self: center; flex: none; }

/* ---------- Liste déroulante avec recherche ---------- */

.combo { position: relative; }

.combo-champ { width: 100%; }

.combo-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .55);
}

.combo-item {
  padding: 6px 9px;
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.combo-item.is-survole { background: var(--cyan-voile); }
.combo-item:hover { background: var(--surface-3); }

/* ---------- Choix de sites : en attente du client ---------- */

.choix-sites-attente {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--encre-2);
  background: var(--surface-2);
}

.choix-sites-attente svg { color: var(--cyan-encre); flex: none; }

/* ---------- Relevé du socle, une ligne par pile ---------- */

.socle-pile:not([hidden]) ~ .socle-pile:not([hidden]) { border-top: 1px dashed var(--ligne); padding-top: 10px; }

/* ---------- L'attribut hidden l'emporte toujours ----------
   Les règles display:grid / display:flex de la charte prenaient le pas sur
   le style navigateur de [hidden] : un bloc « masqué » restait visible. */
[hidden] { display: none !important; }

/* ---------- Période de validité d'une prestation ---------- */

.presta-periode td {
  background: var(--surface-2);
  border-top: 0;
  padding-top: 8px;
  padding-bottom: 10px;
}

.reserve-echue {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(196, 33, 26, .22);
  border-left: 3px solid var(--danger);
  color: var(--blanc);
}

.reserve-echue.est-proche {
  background: rgba(147, 92, 5, .28);
  border-left-color: #d98c0c;
}

/* ---------- Listes que l'on allonge et raccourcit ---------- */

.repeteur-vide {
  padding: 16px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--encre-3);
  background: var(--surface-2);
  border: 1px dashed var(--ligne-forte);
}

.repeteur-pied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.repeteur-rang {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--encre-3);
}

.repeteur-item-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--ligne);
}

.repeteur-item-titre {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.protocole-groupe { border: 1px solid var(--ligne); background: var(--surface); margin-bottom: 14px; }
.protocole-groupe-corps { padding: 14px 16px 16px; }

/* ---------- Session : les étapes faites se replient ---------- */

/* Le bouton « rouvrir » se posait en absolu, en comptant sur un repère porté
   par `.step-head`. Or il n’en est pas l’enfant mais le frère : le repère ne
   s’appliquait donc jamais, et le bouton allait se coller au bord droit de la
   fenêtre. Plutôt que de déplacer le repère — ce qui le renverrait au milieu
   d’une étape dépliée — l’étape se compose en deux colonnes : le titre, puis
   ce qui se range à sa droite. Ce qui se déplie occupe les deux.

   La règle vit ici et non dans app.css, qui reproduit le prototype à
   l’identique. */

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.step-head { grid-column: 1; }

.step-rouvrir {
  grid-column: 2;
  padding-right: 12px;
  display: flex;
  align-items: center;
}

.step-body,
.step-releve { grid-column: 1 / -1; }

/* Le relevé d'une étape close reste lisible, sans occuper la page. */
.step-releve { border-top: 1px dashed var(--ligne); }
.step-releve .dl-row { padding: 3px 0; }

/* ---------- Ancres : s'arrêter sous la barre supérieure ----------
   Elle est collante sur 64 px ; sans cette marge, l'étape visée par
   l'ancre se range dessous et l'on croit avoir raté sa cible. */
.step, .protocole-groupe, [id^="etape-"] { scroll-margin-top: 78px; }

/* ---------- Suppression : le bouton, ou ce qui l'empêche ---------- */

.suppression-bloquee {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--encre-2);
  max-width: 640px;
}

.suppression-bloquee svg { color: var(--encre-3); flex: none; margin-top: 2px; }

/* ---------- Envoi en arrière-plan ----------
   Pendant qu'une action part sans rechargement, le formulaire doit dire
   qu'il travaille : sans ce signe, on reclique, et l'action part deux fois.
   Le voile est volontairement léger — l'écran ne doit pas clignoter pour
   une action qui dure trois dixièmes de seconde. */

form.est-en-cours {
  opacity: .6;
  pointer-events: none;
  transition: opacity .12s linear;
}

form.est-en-cours button[type=submit] { cursor: progress; }

/* ---------- Liste dont l'action passe à la ligne ----------
   Dans une colonne étroite — la fiche d'un site, ses mises à niveau — un
   bouton posé en bout de ligne se fait comprimer jusqu'à écrire son libellé
   une lettre par ligne. On le renvoie sous le texte, aligné avec lui : la
   gouttière de 37 px est celle de l'icône (25 px) et de son écart (12 px). */

.list-action-dessous .list-item { flex-wrap: wrap; }

.list-action-dessous .li-action {
  flex: 0 0 100%;
  margin: 9px 0 0 37px;
}

/* ---------- Cellule d'actions : tout tient sur une ligne ----------
   `text-align: right` suffit tant que la cellule ne porte que des liens. Mais
   un <form> — qui porte le jeton et l'action — est un bloc : il passait à la
   ligne, et les boutons se rangeaient en escalier le long du bord droit.
   On l'aligne donc comme un bouton.

   La règle vit ici parce que `.actions` appartient au design system du
   prototype, conservé à l'identique dans app.css. */

table.tbl td.actions form {
  display: inline-flex;
  vertical-align: middle;
}

table.tbl td.actions > * + * { margin-left: 6px; }

/* ---------- Tableau dont les largeurs sont décidées ----------
   En disposition automatique, le navigateur dimensionne les colonnes d'après
   leur contenu et ignore les pourcentages dès que l'ensemble ne rentre pas.
   Sur le portefeuille de contrats, la colonne du client tombait ainsi à
   109 px — quatre lignes par raison sociale — pendant que « Nature » en
   prenait 234, et le tableau débordait quand même de sa zone.

   `table-layout: fixed` rend la main aux largeurs déclarées dans le gabarit.
   À n'employer que sur un tableau dont toutes les colonnes sont dimensionnées. */

table.tbl.tbl-largeurs-fixes { table-layout: fixed; }

/* ---------- En-tête de carte : ça passe à la ligne ----------
   `.card-head` est une rangée flex qui ne se coupait jamais. Sur la liste des
   protocoles — titre, technologies couvertes, nombre d'étapes, état, puis
   « Dupliquer » et « Modifier » — la rangée réclamait 1100 px : à 1024, les
   deux boutons sortaient de l'écran, et le document entier débordait avec eux.

   Autoriser le retour à la ligne vaut mieux que rogner : on ne perd rien, la
   carte grandit d'une ligne. Le titre reçoit `min-width: 0` pour accepter de
   se réduire plutôt que d'imposer sa largeur au reste de la rangée. */

.card-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.card-head h2, .card-head h3 { min-width: 0; }

/* ---------- Journal des modifications ----------
   On ne relit pas un journal d'audit ligne à ligne : on le parcourt en
   cherchant ce qui sort de l'ordinaire. Un rôle accordé, un compte désactivé,
   un accès réécrit, une suppression : ces lignes-là portent un filet à
   gauche, pour que l'œil s'y arrête sans avoir à lire le reste. */

table.tbl tr.est-sensible > td:first-child {
  box-shadow: inset 3px 0 0 var(--amber, #d97706);
}

/* Les changements d'une ligne : une liste, mais sans puces ni retrait — la
   cellule est déjà étroite, et chaque entrée tient sur un mot ou deux. */

.liste-changements {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste-changements li + li { margin-top: 3px; }

.liste-changements b { margin-right: 4px; }

.liste-changements svg {
  vertical-align: -1px;
  opacity: .5;
}