/* Style de l'application (§12 « Interface »). Sombre par défaut, clair via
   data-theme="clair" sur <html>. Toutes les couleurs passent par les
   variables ci-dessous : pour retoucher un thème, ne modifier que ce bloc. */

:root {
  --fond: #292f4c;
  --fond-lateral: #30324e;
  --surface: #30324e;
  --surface-survol: #3a3d5c;
  --bordure: #4b4e69;
  --texte: #d5d8df;
  --texte-fort: #ffffff;
  --texte-doux: #9699a6;
  --accent: #0073ea;
  --accent-texte: #ffffff;
  --accent-doux: #133774;

  --vert: #00c875;
  --orange: #fdab3d;
  --rouge: #df2f4a;
  --gris: #797e93;
  --violet: #a25ddc;
  --bleu: #579bfc;

  --rayon: 8px;
  --ombre: 0 4px 12px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

:root[data-theme="clair"] {
  --fond: #ffffff;
  --fond-lateral: #f6f7fb;
  --surface: #ffffff;
  --surface-survol: #f0f1f5;
  --bordure: #d0d4e4;
  --texte: #323338;
  --texte-fort: #1f1f24;
  --texte-doux: #676879;
  --accent-doux: #cce5ff;
  --gris: #c4c4c4;
  --ombre: 0 4px 12px rgba(0, 0, 0, .08);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--fond);
  color: var(--texte);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--texte-fort); font-weight: 600; margin: 0; }

/* ---------- Cadre : barre latérale + contenu ---------- */

/* Barre latérale fine (pictos seuls) ; au survol elle s'élargit par-dessus la
   page pour montrer les libellés, sans pousser le contenu. Le JS de base.html
   pose .deplie ; :has(:focus-visible) la déplie aussi au clavier. */
.cadre { display: flex; min-height: 100vh; padding-left: 56px; }

.lateral {
  width: 56px;
  background: var(--fond-lateral);
  border-right: 1px solid var(--bordure);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 50;
  overflow: hidden;
  white-space: nowrap;
  transition: width .15s ease, box-shadow .15s ease;
}
.lateral.deplie, .lateral:has(:focus-visible) { width: 240px; box-shadow: var(--ombre); }

.lateral .libelle { opacity: 0; transition: opacity .1s ease; }
.lateral.deplie .libelle, .lateral:has(:focus-visible) .libelle { opacity: 1; }
.lateral .picto { flex-shrink: 0; }

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 16px;
  color: var(--texte-fort);
  font-weight: 700;
  font-size: 16px;
}
.marque:hover { text-decoration: none; }
.marque-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
/* Sur l'accueil, le logo (qui y mène) est entouré d'un liseré bleu. */
.marque.actif .marque-logo { box-shadow: 0 0 0 2px var(--fond-lateral),0 0 0 4px var(--accent); }

/* Titre de section : un trait quand la barre est repliée, le texte une fois dépliée. */
.lateral-titre {
  font-size: 12px;
  color: var(--texte-doux);
  padding: 12px 6px 4px;
  border-top: 1px solid var(--bordure);
  margin-top: 8px;
}
.lateral.deplie .lateral-titre, .lateral:has(:focus-visible) .lateral-titre { border-top-color: transparent; }

.lateral .nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lateral .nav:hover { background: var(--surface-survol); text-decoration: none; }
.lateral .nav.actif { background: var(--accent-doux); color: var(--texte-fort); }

/* Liens du menu : ils défilent si l'écran est trop bas (portable 13 pouces
   zoomé) ; le logo reste toujours visible. Barre de défilement cachée menu
   replié. Thème, « Voir en tant que » et déconnexion sont dans le menu du
   compte, en haut à droite. */
.lateral-defilant {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  /* Marge prise sur le rembourrage du menu : la pastille de retard des
     rappels dépasse du picto sans être coupée par le défilement. */
  margin: 0 -8px;
  padding: 0 8px;
}
.lateral.deplie .lateral-defilant { scrollbar-width: thin; }

/* Écran peu haut : menu resserré pour en montrer le plus possible. */
@media (max-height: 820px) {
  .lateral { padding-top: 10px; padding-bottom: 10px; }
  .marque { padding-bottom: 8px; }
  .lateral .nav { padding-top: 5px; padding-bottom: 5px; }
  .lateral-titre { padding-top: 8px; padding-bottom: 2px; margin-top: 4px; }
}

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

/* « Voir en tant que » (§9) : bandeau collé en haut, impossible à rater. */
.bandeau-en-tant-que {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 32px;
  background: var(--orange);
  color: #1f1f24;
}
.bandeau-en-tant-que form { margin: 0; }
.bandeau-en-tant-que .bouton { background: #1f1f24; border-color: #1f1f24; color: #fff; }

.barre-haut {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--bordure);
}

.avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  object-fit: cover;
}
/* Initiales sur la couleur de la personne (une par personne, sans photo). */
.avatar.c-bleu { background: var(--bleu); }
.avatar.c-vert { background: var(--vert); }
.avatar.c-violet { background: var(--violet); }
.avatar.c-orange { background: var(--orange); }
.avatar.c-rouge { background: var(--rouge); }
.avatar.c-gris { background: var(--gris); }
.avatar.grand { width: 96px; height: 96px; font-size: 32px; }
.avatar.petit { width: 22px; height: 22px; font-size: 9.5px; }
/* CP dans les listes : avatar et « Lisa D. », le nom complet en bulle. */
.cp-liste { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; white-space: nowrap; }
.cp-liste > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* Fiche utilisateur : la photo à gauche du nom, ses boutons dessous. */
.photo-fiche { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.photo-fiche form { margin: 0; }
.photo-fiche label.bouton { cursor: pointer; }
.entete-fiche:has(.photo-fiche) { justify-content: flex-start; align-items: center; gap: 20px; }
.entete-fiche:has(.photo-fiche) > div:last-child:not(.identite-fiche) { margin-left: auto; }

.contenu { padding: 28px 32px 48px; }
.entete-page { margin-bottom: 28px; }
.entete-page h1 { font-size: 28px; }
.entete-page p { color: var(--texte-doux); margin: 4px 0 0; }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--bordure);
  background: transparent;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
.bouton:hover { background: var(--surface-survol); }
.bouton.principal-bouton { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton.principal-bouton:hover { filter: brightness(1.1); }
.bouton.discret { border-color: transparent; }

/* ---------- Groupes façon monday ---------- */

.groupe { margin-bottom: 36px; --couleur: var(--bleu); }
.groupe.vert { --couleur: var(--vert); }
.groupe.violet { --couleur: var(--violet); }
.groupe.orange { --couleur: var(--orange); }
.groupe.gris { --couleur: var(--gris); }

.groupe-titre {
  color: var(--couleur);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.groupe-titre .compte { color: var(--texte-doux); font-size: 13px; font-weight: 400; }

.tableau {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bordure);
  border-left: 6px solid var(--couleur);
  border-radius: var(--rayon);
  overflow: hidden;
}
.tableau th, .tableau td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
}
.tableau th {
  font-weight: 400;
  color: var(--texte-doux);
  font-size: 13px;
  background: var(--surface);
}
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover td { background: var(--surface-survol); }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau td.libelle { color: var(--texte-fort); white-space: normal; min-width: 220px; width: 100%; }
.tableau .doux { color: var(--texte-doux); }
.tableau.aligne td { overflow: hidden; text-overflow: ellipsis; }

/* Recherche instantanée et tri des listes (static/js/listes.js). */
.recherche-listes {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  margin-bottom: 24px;
  padding: 0 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte-doux);
}
.recherche-listes:focus-within { border-color: var(--accent); }
.recherche-listes input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--texte);
  font: inherit;
  outline: none;
}
/* Au-dessus des listes : recherche à gauche, compteurs « à placer » au centre de la ligne. */
.barre-listes {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.barre-listes .recherche-listes { margin-bottom: 0; }
.compteurs-a-placer { display: flex; gap: 12px; }
.compteur {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  background: var(--surface);
}
.compteur.tma { border-left-color: var(--violet); }
.compteur-titre { font-size: 12px; color: var(--texte-doux); }
.compteur-valeurs { display: flex; gap: 16px; color: var(--texte-fort); font-weight: 600; font-size: 16px; white-space: nowrap; }
.compteur-valeurs small { font-size: 11px; font-weight: 400; color: var(--texte-doux); margin-right: 2px; }
/* Total, puis « N profils » cliquable : petite fenêtre de détail par profil (§9). */
.compteur { position: relative; }
.compteur-valeurs { align-items: center; gap: 10px; }
.compteur-profils {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border: 1px solid var(--bordure); border-radius: 999px;
  background: transparent; color: var(--texte-doux); font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.compteur-profils:hover, .compteur-profils[aria-expanded="true"] { color: var(--texte-fort); border-color: var(--accent); background: var(--accent-doux); }
.compteur-profils svg { transition: transform .15s; }
.compteur-profils[aria-expanded="true"] svg { transform: rotate(180deg); }
.detail-compteur {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 300px; padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--bordure); border-top: 3px solid var(--bleu);
  border-radius: 12px; box-shadow: var(--ombre); white-space: normal;
  animation: apparition-detail .14s ease-out;
}
.compteur.tma .detail-compteur { border-top-color: var(--violet); }
@keyframes apparition-detail { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.detail-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--texte-fort); }
.detail-filtre { font-size: 11px; color: var(--orange); }
.detail-compteur ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.detail-compteur li { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; }
.detail-compteur .pastille { grid-row: 1; min-width: 38px; text-align: center; }
.compteur.tma .detail-compteur .pastille { background: var(--violet); }
.detail-libelle { font-size: 13px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-jours { font-size: 14px; font-weight: 600; color: var(--texte-fort); }
.detail-barre { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--surface-survol); overflow: hidden; }
.detail-barre > span { display: block; height: 100%; border-radius: 3px; background: var(--bleu); transition: width .2s; }
.compteur.tma .detail-barre > span { background: var(--violet); }
.detail-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bordure); font-size: 13px; font-weight: 600; color: var(--texte-fort); }

/* ---------- Mon planning (§8) ---------- */

.entete-planning { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.barre-planning { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bascule-vue { display: inline-flex; margin-left: 10px; }
.bascule-vue .bouton { border-radius: 0; }
.bascule-vue .bouton:first-child { border-radius: 6px 0 0 6px; }
.bascule-vue .bouton:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.bascule-vue .bouton.actif { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }

.calendrier {
  display: grid;
  /* Samedi et dimanche, presque toujours vides : deux fois plus étroits. */
  grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .5fr));
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--surface);
}
.calendrier-entete {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-lateral);
}
.calendrier-entete.aujourdhui { color: var(--accent); font-weight: 600; }

/* Vue mois : une case par jour. */
.calendrier-jour {
  min-height: 112px;
  padding: 4px 6px 6px;
  border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.calendrier-jour:nth-child(7n) { border-right: none; }
.calendrier-jour.week-end, .colonne-jour.week-end { background: var(--fond); }
/* Jours du mois voisin : seul le numéro est grisé ; leurs prestations restent
   nettes (seule une planif passée est pâle). */
.calendrier-jour.hors-mois .numero { opacity: .4; }
.calendrier-jour .numero { align-self: flex-end; font-size: 12px; color: var(--texte-doux); padding: 1px 6px; border-radius: 10px; }
.calendrier-jour.aujourdhui .numero { background: var(--accent); color: var(--accent-texte); font-weight: 600; }

/* Une prestation : bleu projet, violet TMA, plus pâle une fois consommée. */
.presta {
  display: block;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 4px;
  border-left: 3px solid var(--bleu);
  background: color-mix(in srgb, var(--bleu) 22%, transparent);
  color: var(--texte-fort);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
}
.presta.tma { border-left-color: var(--violet); background: color-mix(in srgb, var(--violet) 22%, transparent); }
/* Passée : plus discrète, mais le texte reste lisible. */
.presta.passee { opacity: .75; }
.presta:hover { text-decoration: none; filter: brightness(1.15); }
.presta-horaires { display: block; font-weight: 600; white-space: nowrap; }
.presta-libelle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texte); }

/* Vue semaine : colonne des heures + une colonne par jour, 7 h → 20 h. */
.calendrier.semaine { grid-template-columns: 48px repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .5fr)); --heure: 44px; }
.calendrier.semaine .heures {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bordure);
}
.calendrier.semaine .heures span {
  height: var(--heure);
  font-size: 11px;
  color: var(--texte-doux);
  text-align: right;
  padding: 2px 6px 0 0;
}
.colonne-jour {
  position: relative;
  height: calc(13 * var(--heure));
  border-right: 1px solid var(--bordure);
  /* Un trait par heure. */
  background-image: linear-gradient(to bottom, var(--bordure) 1px, transparent 1px);
  background-size: 100% var(--heure);
}
.colonne-jour:last-child { border-right: none; }
.colonne-jour.aujourdhui { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }
.colonne-jour .presta { position: absolute; }
.colonne-jour .presta-libelle { white-space: normal; }

@media (max-width: 800px) {
  .calendrier.mois { grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; }
  .calendrier-jour { min-height: 70px; padding: 2px; }
  .presta-libelle { display: none; }
}

/* Aperçu de la semaine du consultant sous le formulaire de planif (§7). */
/* Dans une cellule du tableau des planifs, qui interdit le retour à la ligne. */
.apercu-planning { margin-top: 10px; white-space: normal; max-width: 100%; }
.apercu-planning:empty { display: none; }
.apercu-titre { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux); margin-bottom: 6px; }
.apercu-titre .bouton { padding: 0 8px; font-size: 14px; line-height: 20px; }
.apercu-alerte {
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  font-size: 12px;
}
.apercu-alerte strong { color: var(--orange); }
.apercu-alerte em { color: var(--texte-doux); }
.apercu-alerte ul { margin: 4px 0 0; padding-left: 18px; }
.apercu-alerte li { overflow-wrap: anywhere; }
.apercu-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.apercu-jour {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 4px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--surface);
}
.apercu-jour.week-end { background: var(--fond); }
.apercu-jour.saisi { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.apercu-date { font-size: 11px; color: var(--texte-doux); }
.apercu-jour.aujourdhui .apercu-date { color: var(--accent); font-weight: 600; }
.apercu-libre { font-size: 11px; color: var(--texte-doux); opacity: .6; }
.apercu-jour .presta { font-size: 11px; padding: 2px 4px; }
.presta.conflit { border-left-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }

/* ---------- CRA (§8, « Tableaux de bord ») ---------- */

.note-cra { color: var(--texte-doux); font-size: 13px; margin: -12px 0 24px; max-width: 900px; }
.hors-forfait { color: var(--rouge); font-weight: 600; }
.tableau-cra tfoot td { background: var(--fond-lateral); color: var(--texte-fort); border-bottom: none; }
/* CRA de l'équipe : nom cliquable qui déplie le détail du consultant. */
.nom-cra {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none;
  color: var(--texte-fort); font: inherit; font-weight: 600; cursor: pointer;
}
.nom-cra .fleche { color: var(--texte-doux); transition: transform .15s ease; }
.nom-cra[aria-expanded="false"] .fleche { transform: rotate(-90deg); }
.detail-cra > td { padding: 4px 14px 16px 34px; background: var(--fond); }
.detail-cra .enveloppe-tableau { margin-bottom: 8px; }
.tableau-cra.consolide tbody.consultant-cra:hover > tr:first-child td { background: var(--surface-survol); }

/* ---------- Annuaire (§9) ---------- */

.creation-annuaire { margin-bottom: 24px; }
.creation-annuaire > summary { list-style: none; display: inline-flex; cursor: pointer; }
.creation-annuaire > summary::-webkit-details-marker { display: none; }
.creation-annuaire[open] > summary { margin-bottom: 12px; }
/* Annuaire : formulaire de création sous le titre de la section, ouvert par son bouton « + ». */
.groupe > .creation-annuaire { margin: 0; }
.groupe > .creation-annuaire > summary { display: none; }
.groupe > .creation-annuaire[open] { margin: 4px 0 20px; }
.aide-annuaire { color: var(--texte-doux); font-size: 13px; margin: 0; }
.barre-annuaire { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.barre-annuaire .recherche-listes { margin-bottom: 0; flex: 0 1 360px; }
.afficher-archives { display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: 13px; cursor: pointer; }
.tableau tr.archive td { color: var(--texte-doux); }
.tableau tr.archive td.libelle { text-decoration: line-through; text-decoration-color: var(--bordure); }
.actions-ligne form { margin: 0; }
.note-archives { margin: -12px 0 20px; }
/* Fiche société / utilisateur : titre à gauche, archivage à droite. */
.entete-fiche { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.entete-fiche h1 { display: flex; align-items: center; gap: 10px; }
.entete-fiche h1 .pastille { display: inline-block; font-size: 12px; font-weight: 400; }
.entete-fiche form { margin: 0; }
.encart-fiche {
  margin-bottom: 28px;
  padding: 16px 18px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}
.encart-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.encart-titre h2 { font-size: 16px; }
.encart-actions { display: flex; align-items: center; gap: 8px; }
.encart-actions form { margin: 0; }
.coordonnees { display: grid; grid-template-columns: 110px 1fr; gap: 6px 16px; margin: 0 0 12px; }
.coordonnees dt { color: var(--texte-doux); }
.coordonnees dd { margin: 0; color: var(--texte-fort); }
.pastille.profil-admin { background: var(--rouge); }
.pastille.profil-manager { background: var(--violet); }
.pastille.profil-consultant { background: var(--bleu); }
.pastille.profil-client { background: var(--gris); }


/* Invitation agenda d'une planif (§7) : bouton d'envoi par mail et son état. */
.lien-ics {
  display: inline-flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: 13px;
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.lien-ics:hover { color: var(--texte-fort); }
.lien-ics.a_jour { color: var(--vert); }
.lien-ics.a_mettre_a_jour { color: var(--orange); font-weight: 600; }
/* Intervention passée : simple trace, pas un bouton. */
.lien-ics.passee { cursor: default; opacity: .55; }
.lien-ics.passee:hover { color: var(--texte-doux); }

.tableau th .tri {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.tableau th .tri:hover { color: var(--texte-fort); }
/* Flèche discrète sur toutes les colonnes triables, nette sur la colonne triée. */
/* Flèche de tri : au survol de l'en-tête seulement, toujours visible sur la colonne triée. */
.tableau th .tri::after { content: "↕"; margin-left: 4px; opacity: 0; font-size: 11px; transition: opacity .15s; }
.tableau th:hover .tri::after, .tableau th .tri:focus-visible::after { opacity: .45; }
.tableau th.tri-croissant .tri::after { content: "▲"; opacity: 1; }
.tableau th.tri-decroissant .tri::after { content: "▼"; opacity: 1; }
.tableau th.tri-croissant .tri, .tableau th.tri-decroissant .tri { color: var(--texte-fort); }
.tableau.aligne td.libelle { min-width: 0; }

/* Listes de projets : colonnes de largeur fixe, la colonne « Projet » prend le
   reste. Le min-width garde au moins 220px pour le nom du projet (somme des
   colonnes fixes + 220) : en dessous, le tableau défile au lieu d'écraser le nom. */
.tableau.aligne { table-layout: fixed; min-width: 1197px; }
.c-client { width: 180px; }
.c-type { width: 108px; }  /* « Enveloppe » tient dans la pastille */
.c-statut { width: 105px; }
.c-cp { width: 110px; }
.c-avancement { width: 170px; }
.c-vendu { width: 80px; }
.c-consomme { width: 90px; }
.c-non-planifie { width: 90px; }
.c-actions { width: 44px; }
/* Accueil client : mêmes largeurs, moins de colonnes. */
.tableau.aligne-client { table-layout: fixed; min-width: 900px; }
.tableau.aligne-client td.libelle { min-width: 0; }

/* Écrans de portable (13-14 pouces, souvent ~1280px utiles) : colonnes et marges
   resserrées pour que tout tienne sans défilement. */
@media (max-width: 1440px) {
  .barre-haut, .contenu, .bandeau-en-tant-que { padding-left: 20px; padding-right: 20px; }
  .tableau.aligne { min-width: 1074px; }
  .tableau.aligne th, .tableau.aligne td { padding-left: 10px; padding-right: 10px; }
  .tableau.aligne .avancement .barre { width: 32px; }
  .c-client { width: 160px; }
  .c-type { width: 96px; }
  .c-statut { width: 100px; }
  .c-cp { width: 105px; }
  .c-avancement { width: 150px; }
  .c-vendu { width: 68px; }
  .c-consomme { width: 86px; }
  .c-non-planifie { width: 96px; }
  .c-actions { width: 40px; }
}

.enveloppe-tableau { overflow-x: auto; border-radius: var(--rayon); }
/* Listes de projets : 5 lignes visibles au plus, le reste défile dans le
   tableau, en-têtes figés. listes.js ajuste la hauteur exacte ; 360px à défaut. */
/* scrollbar-gutter : la place de la barre de défilement est réservée même sans
   défilement, pour qu'un tableau court reste aligné sur un tableau long. */
.enveloppe-tableau.defilante { max-height: 360px; overflow: auto; scrollbar-gutter: stable; }
/* Page à liste unique (annuaire) : 12 lignes (data-lignes) ; hauteur d'attente avant listes.js. */
.enveloppe-tableau.defilante[data-lignes] { max-height: 70vh; }
/* overflow visible : sinon les en-têtes ne restent pas figés (l'enveloppe arrondit déjà les coins). */
.defilante .tableau { overflow: visible; }
.defilante thead th { position: sticky; top: 0; z-index: 1; }

.vide {
  border: 1px dashed var(--bordure);
  border-left: 6px solid var(--couleur);
  border-radius: var(--rayon);
  padding: 14px;
  color: var(--texte-doux);
}

/* États vides engageants (templates/_vide.html) : picto dans un rond à la
   couleur du groupe, titre, explication, bouton d'action. Masqué dès qu'un
   formulaire d'ajout s'ouvre à côté. */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 30px;
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.picto-vide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 50%;
  color: var(--couleur, var(--bleu));
  background: color-mix(in srgb, var(--couleur, var(--bleu)) 16%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--couleur, var(--bleu)) 6%, transparent);
}
.titre-vide { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--texte-fort); }
.texte-vide { margin: 0; max-width: 46ch; font-size: 13px; color: var(--texte-doux); line-height: 1.5; }
.etat-vide .bouton { margin-top: 14px; }
.volet .etat-vide { padding: 22px 14px; }
.zone-ajout:not(:empty) ~ .etat-vide,
:has(~ .zone-ajout:not(:empty)) > .etat-vide { display: none; }
/* Lot sans phase : le bouton de l'état vide remplace « + Nouvelle phase ». */
:has(> .etat-vide) ~ .zone-ajout:empty + .bouton { display: none; }

/* ---------- Pastilles de statut ---------- */

.pastille {
  display: block;  /* remplit la cellule, comme sur monday */
  padding: 3px 10px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  background: var(--gris);
}
/* Même code couleur partout (§12) : en cours vert, suspendu grisé (projet/TMA seulement), terminé noir. */
.pastille.en_cours, .pastille.projet-en_cours { background: var(--vert); }
/* Phase en cours pas encore commencée (aucune planif débutée) : contour, comme un brouillon. */
.pastille.a_venir { background: transparent; color: var(--texte-doux); box-shadow: inset 0 0 0 1px var(--texte-doux); }
.pastille.projet-suspendu { background: var(--gris); }
.pastille.projet-brouillon { background: transparent; color: var(--texte-doux); border: 1px dashed var(--texte-doux); padding: 2px 9px; position: relative; }
/* Jours avant la suppression automatique du brouillon : petite bulle posée sur
   le coin haut-droit, hors du flux pour ne jamais élargir la pastille ;
   orange les 3 derniers jours. */
.pastille .decompte {
  position: absolute;
  top: -10px;
  right: -8px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--surface-survol);
  color: var(--texte-doux);
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}
.pastille .decompte.proche { background: var(--orange); color: #1f1f24; }
.signal.brouillon { border-color: var(--texte-doux); border-left-color: var(--texte-doux); }
.signal.brouillon strong { color: var(--texte-fort); }
.pastille.termine, .pastille.projet-termine, .pastille.faite { background: #1f1f24; box-shadow: inset 0 0 0 1px var(--bordure); }
/* Thème clair : le noir ressort trop sur fond blanc ; gris ardoise, texte toujours blanc. */
:root[data-theme="clair"] .pastille.termine, :root[data-theme="clair"] .pastille.projet-termine, :root[data-theme="clair"] .pastille.faite,
:root[data-theme="clair"] .case-faite.faite { background: #5c6070; box-shadow: none; }
.pastille.tma { background: var(--violet); }
.pastille.projet { background: var(--bleu); }

.pastille.petite { display: inline-block; font-size: 12px; padding: 1px 8px; font-weight: 400; }
.pastilles { display: flex; gap: 8px; }
.pastilles .pastille { display: inline-block; min-width: 90px; }

/* ---------- Détail d'un projet ---------- */

.tableau td.libelle a { color: var(--texte-fort); }

.retour { display: inline-block; color: var(--texte-doux); margin-bottom: 12px; }

/* Actions de la fiche (démarrer, modifier, supprimer) : petites icônes à côté du titre. */
.titre-projet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.actions-projet { display: inline-flex; align-items: center; gap: 4px; }
.actions-projet .icone { width: 30px; height: 30px; }
.actions-projet a.icone:hover { text-decoration: none; }
.icone.demarrer { color: var(--vert); }
.icone.demarrer:hover { background: var(--vert); color: #fff; }

/* Titre et actions à gauche (ils passent à la ligne si besoin), pastilles
   toujours à droite, même avec un titre long. */
.entete-projet { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.entete-projet > div:first-child { flex: 1; min-width: 0; }
.entete-projet > .pastilles { flex-shrink: 0; }
.cp-entete { vertical-align: middle; margin-left: 4px; }
@media (max-width: 800px) { .entete-projet { flex-wrap: wrap; } }
/* Téléphone : titre sur toute la largeur, boutons de la fiche sur une ligne
   dessous, pastilles sous le texte ; chiffres en grille de deux. */
@media (max-width: 600px) {
  .entete-projet { flex-direction: column; gap: 10px; }
  .entete-projet > div:first-child { width: 100%; }
  .titre-projet { gap: 8px; }
  .titre-projet h1 { flex-basis: 100%; }
  main .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.chiffre {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 12px 16px;
}
.chiffre > span { display: block; color: var(--texte-doux); font-size: 13px; }
.chiffre strong { color: var(--texte-fort); font-size: 20px; font-weight: 600; }
.chiffre.alerte strong, .tableau td.negatif { color: var(--rouge); }

.signal {
  border: 1px solid var(--orange);
  border-left: 6px solid var(--orange);
  border-radius: var(--rayon);
  padding: 10px 14px;
  margin-bottom: 20px;
}
.signal strong { color: var(--orange); }

/* Hiérarchie phase → tâche → planif. Le tableau de la phase est décalé sous le
   texte de son titre ; chaque tâche est un bandeau teinté ; ses planifs, en
   retrait sur fond neutre, se lisent comme des sous-lignes. */
.contenu-phase {
  /* Trait sous le chevron du titre, tableau nettement en retrait (comme lot → phases). */
  margin-left: 32px;
  padding: 2px 0 4px 22px;
  border-left: 2px solid var(--bordure);
}
.groupe.replie > .contenu-phase { display: none; }
.tableau-taches > thead th { background: var(--fond); font-size: 12px; }
/* Alignement des en-têtes sur les données : cale invisible devant « Tâche »,
   colonne « Faite » centrée (en-tête et case). */
.tableau-taches .cale { visibility: hidden; }
.tableau-taches .cale .chevron { margin: -4px 4px -4px -6px; transform: none; }
.tableau-taches .cale .poignee { margin: -4px 0 -4px -10px; }
.tableau .centre { text-align: center; }
/* Charges en jours ; l'équivalent en heures apparaît dans la bulle au survol (§3). */
.charge { cursor: help; }
.tableau tbody + tbody tr:first-child td { border-top: 1px solid var(--bordure); }
.tableau-taches .ligne-tache > td {
  background: var(--fond-lateral);
  font-weight: 600;
  padding-top: 11px;
  padding-bottom: 11px;
}
.tableau-taches .ligne-tache > td.libelle { font-size: 15px; }
.tableau-taches .ligne-tache:hover > td { background: var(--surface-survol); }
.ligne-tache td .pastille { font-weight: 400; }
/* Colonne « Faite » cliquable par le CP (§4) : case discrète, pastille noire une fois faite. */
.case-faite {
  min-width: 70px;
  padding: 2px 8px;
  border: 1px dashed var(--bordure);
  border-radius: 4px;
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}
.case-faite:hover { border-color: var(--vert); color: var(--texte-fort); }
.case-faite.faite { border: none; background: #1f1f24; color: #fff; box-shadow: inset 0 0 0 1px var(--bordure); font-size: 13px; }
.case-faite.faite:hover { box-shadow: inset 0 0 0 1px var(--texte-doux); }
/* Sous-tableau des planifs : en retrait sous sa tâche, avec son propre en-tête. */
.tableau tr.sous-tableau > td { padding: 8px 14px 14px 58px; background: var(--fond); }
.tableau tr.sous-tableau:hover > td { background: var(--fond); }
/* Sans planif : seul le lien « + Ajouter une planif » reste (rien sur une tâche faite). */
.sous-tableau.vide:not(:has(.ligne-form)):not(:has(tfoot)) { display: none; }
.sous-tableau.vide:not(:has(.ligne-form)) .planifs thead { display: none; }
.tableau .planifs tfoot td { padding: 4px 6px 0; border-bottom: none; }
.bouton-plus.petit { width: 20px; height: 20px; font-size: 14px; margin-left: 6px; vertical-align: middle; }
.planifs {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-left: 2px solid var(--couleur);
}
.tableau .planifs th, .tableau .planifs td { padding: 6px 12px; font-size: 13px; font-weight: 400; }
.tableau .planifs th {
  background: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--bordure);
}
.tableau .planifs tbody tr:last-child td { border-bottom: none; }

.bouton-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--bordure);
  background: transparent;
  color: var(--texte-doux);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.bouton-plus:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.actions-ligne { text-align: right; }
.tableau td.actions-ligne { padding-left: 6px; padding-right: 6px; overflow: visible; text-overflow: clip; }
.tableau .planifs td.actions-ligne { padding: 2px 6px; overflow: visible; white-space: nowrap; }
/* Ligne de tâche : jusqu'à quatre boutons (faite, +, crayon, corbeille). */
.tableau .ligne-tache td.actions-ligne { padding: 4px 6px; overflow: visible; text-overflow: clip; }
.icone {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  opacity: 0;
}
/* Les icônes n'apparaissent qu'au survol de la ligne, comme sur monday. */
tr:hover .icone, .icone:focus-visible { opacity: 1; }
.icone:hover { background: var(--surface-survol); color: var(--texte-fort); }
.icone.danger:hover { color: var(--rouge); }
/* Icônes des en-têtes de lot et de phase : visibles au survol de l'en-tête. */
.groupe-titre:hover .icone, .entete-lot:hover .icone { opacity: 1; }
.icone.cadenas { cursor: help; }
.bouton.bouton-danger { border-color: var(--rouge); color: var(--rouge); }
.bouton.bouton-danger:hover { background: var(--rouge); color: #fff; }
.icone.cadenas:hover { background: none; color: var(--texte-doux); }
.groupe-titre .icone { font-size: 14px; }
@media (hover: none) { .icone { opacity: 1; } }

/* Une saisie à la fois : tant qu'un formulaire est ouvert, les autres boutons sont grisés. */
#projet:has(.ligne-form) .verrouillable { opacity: .25; pointer-events: none; cursor: default; }
#projet:has(.ligne-form) tr:hover .icone.verrouillable { opacity: .25; }

.ligne-form td { background: var(--surface); }
.form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-left: 22px; }
.form-ligne label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texte-doux); }
.form-ligne select, .form-ligne input {
  padding: 5px 8px;
  border: 1px solid var(--bordure);
  border-radius: 4px;
  background: var(--fond);
  color: var(--texte-fort);
  font: inherit;
  font-size: 13px;
}
.form-ligne input[type="number"] { width: 90px; }
.form-ligne .erreur { color: var(--rouge); font-style: normal; white-space: normal; max-width: 220px; }
.form-ligne .erreur-generale { flex-basis: 100%; max-width: none; }

/* ---------- Lots (projets à plusieurs lots seulement) ---------- */

/* Hiérarchie lot → phases : bandeau d'en-tête teinté, puis contenu décalé à
   droite et rattaché au lot par un trait vertical, comme une arborescence. */
.lot {
  border: 1px solid var(--bordure);
  border-radius: 12px;
  margin-bottom: 28px;
  overflow: hidden;
}
.entete-lot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--fond-lateral);
  border-bottom: 1px solid var(--bordure);
}
.entete-lot h2 { font-size: 22px; font-weight: 700; }
.contenu-lot {
  margin: 20px 20px 20px 34px;
  padding-left: 20px;
  border-left: 2px solid var(--bordure);
}
.lot > .ligne-form.bloc { margin: 12px 20px; }
/* Écran de portable (≤ 1440 px) : retraits du lot et de la phase resserrés,
   sinon les tableaux d'un projet à plusieurs lots débordent et défilent de côté. */
@media (max-width: 1440px) {
  .contenu-lot { margin: 16px 12px 16px 16px; padding-left: 12px; }
  .contenu-lot .contenu-phase { margin-left: 16px; padding-left: 14px; }
}
.totaux-lot { margin-left: auto; color: var(--texte-doux); font-size: 13px; }
.totaux-lot strong { color: var(--texte-fort); font-weight: 600; }
.totaux-lot strong.negatif { color: var(--rouge); }
.icone.visible { opacity: 1; }
.bouton-lot { display: block; margin-top: 8px; }
.zone-lot:not(:empty) { margin-top: 16px; }

/* ---------- Jalons de facturation (§6) ---------- */

.jalons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 10px; }
.jalon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font-size: 12px;
  color: var(--texte-doux);
}
.jalon.signale { border-color: var(--orange); color: var(--orange); }
.jalon .icone { width: 22px; height: 22px; }
.jalon:hover .icone { opacity: 1; }
.jalons .ligne-form.bloc { padding: 8px 10px; }
.jalons-projet { margin: -12px 0 20px; font-size: 13px; }
.jalons-projet .detail { color: var(--texte-doux); }
.jalons .ligne-form.bloc input[type="number"] { width: 90px; }

/* ---------- Avancement (tâches faites / tâches) ---------- */

.avancement { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.avancement .barre {
  width: 90px;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-survol);
  overflow: hidden;
}
.avancement .barre > span { display: block; height: 100%; background: var(--vert); border-radius: 4px; }
.avancement strong { color: var(--texte-fort); font-weight: 600; }
.avancement .detail, .avancement.detail { color: var(--texte-doux); }
.entete-lot .avancement { margin-left: 12px; }
/* Jauge d'enveloppe TMA (§5) : orange dès 80 % consommé, rouge une fois épuisée. */
.avancement.jauge-bas .barre > span { background: var(--orange); }
.avancement.jauge-epuise strong { color: var(--rouge); }
.tableau .avancement { gap: 6px; }
.tableau .avancement .barre { width: 44px; }
.tableau td.libelle .sous-titre { display: block; color: var(--texte-doux); font-size: 12px; font-weight: 400; }
.chiffre .avancement { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 0; }
.chiffre .avancement .detail { flex-basis: 100%; font-size: 12px; }
.chiffre .avancement .barre { flex: 1; min-width: 60px; }
.chiffre .avancement strong { font-size: 20px; }

/* ---------- Glisser-déposer (lot, phase, tâche) ---------- */

.poignee {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 22px;
  margin-left: -4px;
  color: var(--texte-doux);
  cursor: grab;
  opacity: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
.poignee:active { cursor: grabbing; }
.entete-lot:hover .poignee, .groupe-titre:hover .poignee, .ligne-tache:hover .poignee { opacity: 1; }
.ligne-tache .poignee { margin: -4px 0 -4px -10px; }
.fantome { opacity: .4; }
@media (hover: none) { .poignee { opacity: 1; } }

/* ---------- Ensembles réductibles (lot, phase, tâche) ---------- */

[data-basculer] { cursor: pointer; user-select: none; }
.chevron {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform .15s;
}
.chevron:hover { background: var(--surface-survol); color: var(--texte-fort); }
.groupe-titre .chevron { color: var(--couleur); }
/* Les ensembles imbriqués d'un ensemble réduit sont masqués : on peut viser large. */
.replie .chevron { transform: rotate(-90deg); }
.ligne-tache .chevron { margin: -4px 4px -4px -6px; }
/* Une tâche sans planif n'a rien à réduire. */
tbody:has(.sous-tableau.vide) .ligne-tache .chevron { visibility: hidden; }

.lot.replie > :not(.entete-lot) { display: none; }
.lot.replie > .entete-lot { border-bottom: none; }
.groupe.replie { margin-bottom: 18px; }
tbody.replie > .sous-tableau { display: none; }
.totaux-replie { display: none; margin-left: 8px; color: var(--texte-doux); font-size: 13px; font-weight: 400; }
.totaux-replie strong { color: var(--texte-fort); font-weight: 600; }
.totaux-replie strong.negatif { color: var(--rouge); }
.groupe.replie .totaux-replie { display: inline; }

/* ---------- Saisie : nouveau projet, phases, tâches ---------- */

.groupe-actions { margin-left: auto; display: flex; gap: 8px; font-size: 14px; font-weight: 400; }
.groupe-actions .bouton:hover, a.bouton:hover { text-decoration: none; }
.bouton.petit { padding: 3px 8px; font-size: 13px; color: var(--texte-doux); }
.bouton.petit:hover { color: var(--texte-fort); }
/* « Clore » / « Rouvrir » dans le titre d'une phase : un vrai bouton, à la taille du texte courant. */
.groupe-titre .bouton-phase { font-size: 12px; font-weight: 400; vertical-align: middle; margin-left: 4px; }

.ligne-ajout td { padding: 4px 8px; }
.zone-ajout:not(:empty) { margin-bottom: 12px; }
.ligne-form.bloc {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 12px 14px;
}
.ligne-form.bloc .form-ligne { padding-left: 0; }
.form-ligne input[type="text"] { min-width: 260px; }

.formulaire {
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ[hidden], .bouton[hidden] { display: none; }
.champ > label { color: var(--texte-doux); font-size: 13px; }
.champ-suite { margin-top: -10px; }
/* Encours d'une enveloppe : deux par ligne, pour un formulaire moins long. */
.grille-encours { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 600px) { .grille-encours { grid-template-columns: 1fr; } }
.champ .aide { color: var(--texte-doux); font-size: 12px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="number"], .champ select {
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 4px;
  background: var(--fond);
  color: var(--texte-fort);
  font: inherit;
}
.champ input:focus, .champ select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ input[type="number"] { max-width: 160px; }
.champ div:has(> div > label > input[type="radio"]) { display: flex; gap: 20px; }
.champ input[type="radio"] { accent-color: var(--accent); margin-right: 6px; }
.champ .erreur, .formulaire .errorlist { color: var(--rouge); font-style: normal; font-size: 13px; }
.formulaire .errorlist { list-style: none; padding: 0; margin: 0; }
.actions { display: flex; gap: 8px; }

/* Paramètres de la société (§9) : un bloc par thème, seuils sur deux colonnes. */
.formulaire.parametres { max-width: 640px; gap: 0; padding: 8px 24px 24px; }
.bloc-parametres { display: flex; flex-direction: column; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--bordure); }
.bloc-parametres h2 { margin: 0; font-size: 15px; color: var(--texte-fort); }
.bloc-parametres h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.aide-bloc { margin: -8px 0 0; font-size: 13px; color: var(--texte-doux); }
.grille-seuils { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grille-seuils > div { display: flex; flex-direction: column; gap: 12px; }
.formulaire.parametres .actions { padding-top: 18px; }
/* Annuaire (§9) : boutons de la ligne (invitation, archivage) côte à côte. */
.tableau td.actions-ligne:has(form) { white-space: nowrap; }
.tableau td.actions-ligne form { display: inline-block; margin-left: 4px; }

/* Profil d'un employé sur sa fiche (§1) : liste et bouton sur une ligne. */
.form-profil { display: inline-flex; align-items: center; gap: 8px; }
.form-profil select {
  padding: 5px 8px; border: 1px solid var(--bordure); border-radius: 4px;
  background: var(--fond); color: var(--texte); font: inherit;
}

/* Aide · Glossaire (§8) : recherche et lettres en tête, une carte par lettre. */
.barre-glossaire {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin: 0 -4px 20px; padding: 10px 4px; background: var(--fond);
}
.barre-glossaire .recherche-listes { margin-bottom: 0; flex: 0 1 360px; }
.lettres-glossaire { display: flex; flex-wrap: wrap; gap: 2px; }
.lettres-glossaire a {
  min-width: 26px; padding: 3px 6px; border-radius: 6px; text-align: center;
  color: var(--texte-doux); font-size: 13px; font-weight: 600;
}
.lettres-glossaire a:hover { background: var(--surface-survol); color: var(--texte-fort); text-decoration: none; }
.glossaire { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.lettre-glossaire { display: grid; grid-template-columns: 48px 1fr; gap: 12px; scroll-margin-top: 70px; }
.lettre-glossaire h2 {
  margin: 0; font-size: 26px; line-height: 1; font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lettre-glossaire dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.terme-glossaire {
  padding: 12px 16px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface);
  scroll-margin-top: 80px;
}
.terme-glossaire dt { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--texte-fort); }
.terme-glossaire dd { margin: 0; }
.terme-glossaire dd p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; }
.exemple-glossaire { color: var(--texte-doux); font-style: italic; }
.voir-glossaire { font-size: 13px; color: var(--texte-doux); }
.terme-glossaire.eclaire { animation: eclaire-terme 1.4s ease-out; }
@keyframes eclaire-terme { 0% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } 100% { box-shadow: none; } }

/* Aide « Comment faire » (§8) : bouton discret dans l'en-tête de la page. */
.titre-avec-aide { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bouton-aide { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
.bouton-aide:hover { color: var(--texte-fort); border-color: var(--accent); }

/* Visite guidée (§8, static/js/visite.js) : la page assombrie autour de
   l'élément montré (un « trou » lumineux), une bulle à côté. */
.visite-fond { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.visite-fond.plein { background: rgba(4, 6, 16, .74); }
.visite-spot {
  position: fixed; z-index: 1001; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(4, 6, 16, .74), 0 0 0 2px var(--accent), 0 0 22px 4px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.visite-bulle {
  position: fixed; z-index: 1002; width: min(340px, calc(100vw - 32px));
  padding: 18px 18px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--bordure);
  box-shadow: var(--ombre); color: var(--texte);
  transition: left .25s ease, top .25s ease;
  animation: apparition-detail .18s ease-out;
}
/* Liseré en haut, dans le dégradé du logo. */
.visite-bulle::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 4px;
  border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--accent), var(--violet));
}
.visite-bulle.centree { width: min(420px, calc(100vw - 32px)); padding: 26px 24px 18px; }
.visite-bulle strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--texte-fort); }
.visite-bulle.centree strong { font-size: 19px; }
.visite-bulle p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--texte); }
.visite-pied { display: flex; align-items: center; gap: 8px; }
.visite-progression { margin-right: auto; font-size: 12px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* Profils vendus (§9) : pastilles dans Paramètres, tableau éditable en ligne. */
.liste-profils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pastille.profil-vendu { display: inline-block; background: var(--bleu); }
.pastille.profil-vendu.archive { background: transparent; color: var(--texte-doux); border: 1px dashed var(--texte-doux); }
.tableau-profils input[type="text"] {
  width: 100%; padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 4px;
  background: var(--fond); color: var(--texte); font: inherit;
}
.tableau-profils input.champ-code { width: 90px; text-transform: uppercase; font-weight: 600; }
.tableau-profils tr.archive td { opacity: .7; }
.actions-profil > div { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.formulaire-ligne { flex-direction: row; flex-wrap: wrap; align-items: flex-end; max-width: none; }
.formulaire-ligne .champ { flex: 1 1 200px; }

/* Purge des données (§9) : critères en ligne, aperçu, encadré rouge de confirmation. */
.criteres-purge {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px;
  margin-bottom: 24px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px;
}
.criteres-purge fieldset { display: flex; gap: 16px; margin: 0; padding: 0; border: 0; }
.criteres-purge legend { margin-bottom: 6px; padding: 0; font-size: 13px; color: var(--texte-doux); }
.criteres-purge .case { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.criteres-purge input[type="checkbox"], .tableau-purge input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.champ-date { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texte-doux); }
.champ-date input, .etape-purge input[type="text"] {
  padding: 7px 10px; border: 1px solid var(--bordure); border-radius: 4px;
  background: var(--fond); color: var(--texte); font: inherit; color-scheme: dark light;
}
.detail-purge { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.tableau-purge td.centre, .tableau-purge th.centre { width: 44px; text-align: center; }
.alerte-purge { border-color: var(--rouge); border-left-color: var(--rouge); }
.alerte-purge ul { margin: 8px 0 12px; padding-left: 20px; }
.etape-purge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; }
.etape-purge input[type="text"] { width: 120px; text-transform: uppercase; letter-spacing: .08em; }
.alerte-brouillons { margin-top: 18px; border-color: var(--rouge); border-left-color: var(--rouge); }
.alerte-brouillons ul { margin: 8px 0; padding-left: 20px; }
.alerte-brouillons p { margin: 0; color: var(--texte-doux); font-size: 13px; }
.champ input:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) { .grille-seuils { grid-template-columns: 1fr; } }

/* ---------- Pages hors connexion ---------- */

/* Pages hors connexion : écran partagé, la marque à gauche, le formulaire à droite. */
.page-seule {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.panneau-marque {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 48px clamp(32px, 6vw, 96px);
  background: linear-gradient(135deg, #0073ea 0%, #5a49d8 55%, #a25ddc 100%);
  color: #fff;
}
/* Halos lumineux discrets dans le dégradé. */
.panneau-marque::before, .panneau-marque::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}
.panneau-marque::before { width: 340px; height: 340px; background: #5fd3ff; top: -90px; left: -80px; }
.panneau-marque::after { width: 300px; height: 300px; background: #ff8ad8; bottom: -100px; right: -60px; }
.marque-connexion { position: relative; display: flex; align-items: center; gap: 14px; font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.marque-connexion img { border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); outline: 2px solid rgba(255, 255, 255, .35); }
/* Slogan sur deux lignes : la première en blanc, la seconde en dégradé cyan / rose très clair. */
.slogan-connexion {
  position: relative;
  margin: 36px 0 18px;
  max-width: 640px;
  font-size: clamp(34px, 3.9vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}
.slogan-connexion span { display: block; }
.slogan-connexion .degrade {
  background: linear-gradient(90deg, #c9f6ff 0%, #ffe0f5 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accroche-connexion {
  position: relative;
  margin: 0 0 36px;
  max-width: 500px;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.illustration-connexion { position: relative; width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 18px 40px rgba(20, 10, 60, .35)); }
.illustration-connexion .fond-illu { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .25); }
.illustration-connexion .grille-illu line { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.illustration-connexion .barres-illu rect { fill: rgba(255, 255, 255, .9); }
.illustration-connexion .barres-illu .b2 { fill: #8fe3c0; }
.illustration-connexion .barres-illu .b3 { fill: #cdb4ff; }
.illustration-connexion .barres-illu .b4 { fill: #ffd28a; }
.illustration-connexion .barres-illu .cible { fill-opacity: .35; stroke: rgba(255, 255, 255, .6); }
.illustration-connexion .barres-illu .retard { fill: #ff6b81; }
.illustration-connexion .barres-illu .jalon { fill: #ffb84d; }
.illustration-connexion .courbe-illu { fill: none; stroke: #8fe3c0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.illustration-connexion .courbe-illu.prevue { stroke: #fff; stroke-dasharray: 7 6; stroke-width: 3; opacity: .8; }
.illustration-connexion .aujourdhui-illu { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.illustration-connexion .point-illu { fill: #fff; }
.cote-formulaire { display: grid; place-items: center; padding: 32px 24px; background: var(--fond); }
.carte {
  width: 100%;
  max-width: 380px;
}
.carte h1 { font-size: 26px; margin: 0 0 20px; color: var(--texte-fort); letter-spacing: -.01em; }
.sous-titre-connexion { margin: -14px 0 26px !important; color: var(--texte-doux); }
.form-connexion { display: flex; flex-direction: column; gap: 16px; }
.champ-connexion { display: flex; flex-direction: column; gap: 6px; }
.champ-connexion label { margin: 0 !important; color: var(--texte) !important; font-size: 13px !important; font-weight: 600; }
.carte .champ-connexion input[type] { padding: 11px 12px; border-radius: 8px; border-color: var(--bordure); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.carte .champ-connexion input[type]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.aide-connexion { color: var(--texte-doux); font-size: 12px; line-height: 1.4; }
.mot-de-passe { position: relative; }
.carte .mot-de-passe input[type] { padding-right: 44px; }
.oeil { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--texte-doux); cursor: pointer; }
.oeil:hover { color: var(--texte-fort); background: var(--surface-survol); }
.oeil .ferme, .oeil.vu .ouvert { display: none; }
.oeil.vu .ferme { display: block; }
.erreur-connexion { padding: 10px 12px; border: 1px solid var(--rouge); border-left: 5px solid var(--rouge); border-radius: 8px; color: var(--texte-fort); font-size: 13px; background: color-mix(in srgb, var(--rouge) 10%, transparent); }
.carte .form-connexion .bouton { margin-top: 4px; padding: 11px; font-size: 15px; font-weight: 600; border-radius: 8px; }
.carte .bas { margin-top: 18px; text-align: center; font-size: 13px; }
/* Écran moyen (tablette, petit portable) : le panneau se resserre. */
@media (max-width: 1100px) {
  .page-seule { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
  .accroche-connexion { margin-bottom: 28px; }
}
/* Téléphone : priorité au formulaire. La marque et le slogan en bandeau
   compact au-dessus, sans l'accroche ni l'illustration. */
@media (max-width: 760px) {
  .page-seule { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panneau-marque { padding: 20px 20px 22px; }
  .marque-connexion { font-size: 22px; }
  .marque-connexion img { width: 34px; height: 34px; }
  .slogan-connexion { margin: 14px 0 0; font-size: 24px; }
  .accroche-connexion, .illustration-connexion { display: none; }
  .cote-formulaire { place-items: start center; padding-top: 28px; }
}
.carte p { margin: 0 0 14px; }
.carte label { display: block; color: var(--texte-doux); font-size: 13px; margin-bottom: 4px; }
.carte input[type="text"], .carte input[type="email"], .carte input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 4px;
  background: var(--fond);
  color: var(--texte-fort);
  font: inherit;
}
.carte input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.carte .bouton { width: 100%; justify-content: center; padding: 9px; margin-top: 6px; }
.carte .errorlist { color: var(--rouge); padding: 0; list-style: none; margin: 0 0 10px; }
.carte .bas { margin-top: 18px; text-align: center; font-size: 13px; }

/* ---------- Petits écrans ---------- */

@media (max-width: 800px) {
  /* Pas de survol au doigt : menu complet, en haut de page. */
  .cadre { flex-direction: column; padding-left: 0; }
  .lateral, .lateral.deplie, .lateral:has(:focus-visible) {
    width: auto; height: auto; position: static; box-shadow: none;
    border-right: none; border-bottom: 1px solid var(--bordure);
  }
  .lateral .libelle { opacity: 1; }
  .lateral-titre { border-top-color: transparent; }
  .lateral-defilant { overflow: visible; }
  .barre-listes { grid-template-columns: 1fr; }
  .barre-listes .bouton-excel { grid-column: auto; justify-self: start; }
  .compteurs-a-placer { flex-wrap: wrap; }
  .barre-haut, .contenu, .bandeau-en-tant-que { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Journal d'un projet ou d'une TMA (§4) ---------- */

/* Bouton de l'en-tête de la fiche : nombre de notes, rappels ouverts ou en retard. */
.bouton-journal { display: inline-flex; align-items: center; gap: 6px; }
.bouton-journal .ouverts { color: var(--orange); }
.bouton-journal .retard { color: var(--rouge); font-weight: 600; }
.bouton-journal.alerte { border-color: var(--rouge); }

/* Volets à droite (journal, documents), par-dessus la page : fermés par défaut,
   ouverts par l'attribut data-volet de <body> (static/js/volet.js), qui survit
   au réaffichage de #projet. */
.volet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;  /* au-dessus du menu latéral (50) */
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--fond);
  border-left: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .2s ease, visibility .2s;
}
[data-volet="journal"] #volet-journal, [data-volet="documents"] #volet-documents,
[data-volet="courbe"] #volet-courbe { transform: none; visibility: visible; }
.fond-volet { display: none; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .3); }
[data-volet] .fond-volet { display: block; }
.entete-volet {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bordure);
}
.entete-volet h2 { margin: 0; font-size: 18px; color: var(--texte-fort); }
.entete-volet .detail { color: var(--texte-doux); font-size: 13px; }
.entete-volet .fermer-volet { margin-left: auto; }
.contenu-journal, .contenu-volet { flex: 1; overflow-y: auto; padding: 14px 16px; }
.note {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.note.rappel { border-left-color: var(--orange); }
.note.rappel.en-retard { border-left-color: var(--rouge); }
.note.rappel.fait { border-left-color: var(--gris); }
.entete-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--texte-doux); font-size: 12px; }
.pastilles-note { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.texte-note { color: var(--texte); margin-top: 4px; overflow-wrap: anywhere; }
.note.fait .texte-note { color: var(--texte-doux); }
.actions-note { margin-left: auto; display: inline-flex; gap: 2px; }
.note:hover .icone { opacity: 1; }
.pastille.etat-rappel { border: none; cursor: pointer; background: var(--orange); color: #1f1f24; }
.en-retard .pastille.etat-rappel { background: var(--rouge); color: #fff; }
.fait .pastille.etat-rappel { background: transparent; color: var(--texte-doux); box-shadow: inset 0 0 0 1px var(--bordure); }
.pastille.visible-client { background: transparent; color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.form-note { margin-bottom: 8px; }
.form-note textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 8px;
}
.options-note { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.options-note > label { display: flex; flex-direction: column; gap: 2px; color: var(--texte-doux); font-size: 13px; }
.options-note > label.case { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.compteur-note { display: block; text-align: right; color: var(--texte-doux); font-size: 12px; }
.compteur-note.proche { color: var(--orange); }
.compteur-note.depasse { color: var(--rouge); font-weight: 600; }
.form-note .champ-texte { display: block; }

/* ---------- Mes rappels (§8) ---------- */

/* Pastille rouge du menu, posée sur le coin du picto : visible menu replié. */
.picto-avec-pastille { position: relative; display: inline-flex; }
.pastille-menu {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rouge);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}
.liste-rappels { max-width: 860px; margin-bottom: 24px; }
.titre-rappels { font-size: 16px; color: var(--texte-fort); margin: 0 0 10px; }
.titre-rappels.en-retard { color: var(--rouge); }
.titre-rappels .compte { color: var(--texte-doux); font-weight: 400; font-size: 13px; margin-left: 4px; }
.projet-rappel { color: var(--texte-fort); font-weight: 600; font-size: 13px; }
.liste-rappels .actions-note { margin: 0 0 0 auto; }

/* Note très brève d'une planif (§7) : sous le consultant, sur une ligne. */
.commentaire-planif {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texte-doux);
  font-size: 12px;
  font-style: italic;
}
.icone.bulle-planif.remplie { opacity: 1; color: var(--bleu); }

/* ---------- Documents d'un projet ou d'une TMA (§4) ---------- */

.document {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 8px 12px;
  margin-bottom: 8px;
}
.type-document {
  flex: none;
  width: 42px;
  padding: 6px 0;
  border-radius: 4px;
  background: var(--accent-doux);
  color: var(--texte-fort);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.infos-document { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.infos-document a { color: var(--texte-fort); max-width: 100%; overflow-wrap: anywhere; }
.infos-document .detail { color: var(--texte-doux); font-size: 12px; }
.document:hover .icone { opacity: 1; }
.choix-fichiers { display: flex; flex-direction: column; gap: 6px; color: var(--texte-doux); font-size: 13px; }
.choix-fichiers input[type="file"] { color: var(--texte); max-width: 100%; }

/* ---------- Courbe d'avancement (burn-up) ---------- */

.volet.volet-large { width: min(780px, 100vw); }
.resume-courbe { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.resume-courbe > div { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 8px 12px; }
.resume-courbe > div > span { display: block; color: var(--texte-doux); font-size: 12px; }
.resume-courbe strong { color: var(--texte-fort); font-size: 17px; font-weight: 600; }
.resume-courbe strong.negatif { color: var(--rouge); }
.courbe { width: 100%; height: auto; display: block; }
.courbe .grille { stroke: var(--bordure); stroke-width: 1; }
.courbe .axe { fill: var(--texte-doux); font-size: 11px; font-family: inherit; }
.courbe .aujourdhui { stroke: var(--texte-doux); stroke-width: 1; stroke-dasharray: 2 3; }
.courbe .vendu { stroke: var(--orange); stroke-width: 2; }
.courbe .vendu-texte { fill: var(--orange); }
.courbe .realise { fill: none; stroke: var(--vert); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.courbe .planifie { fill: none; stroke: var(--bleu); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.legende-courbe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--texte-doux); font-size: 12px; margin: 8px 0 4px; }
.legende-courbe .trait { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: -8px; }
.legende-courbe .trait.realise { border-color: var(--vert); }
.legende-courbe .trait.planifie { border-color: var(--bleu); border-top-style: dashed; }
.legende-courbe .trait.vendu { border-color: var(--orange); }
.aide-courbe { color: var(--texte-doux); font-size: 12px; margin: 0; }
.note-courbe { margin-top: 12px; color: var(--texte-doux); font-size: 12px; }
.note-courbe summary { cursor: pointer; color: var(--texte); font-size: 13px; }
.note-courbe ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.note-courbe strong { color: var(--texte-fort); font-weight: 600; }
/* Petit badge « burn-up » à côté du titre du volet. */
.badge-burnup {
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--vert);
  color: var(--vert);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Plan de charge de l'équipe (§8) ---------- */

.tableau-charge th .sous-titre { display: block; font-weight: 400; font-size: 11px; color: var(--texte-doux); }
.tableau-charge th.semaine-en-cours { color: var(--accent); }
.tableau-charge td.case-charge { font-weight: 600; cursor: default; }
/* Couleurs selon les seuils de la vue (prestations/plan_charge.py). */
.case-charge.vert { background: color-mix(in srgb, var(--vert) 18%, transparent); color: var(--texte-fort); }
.case-charge.orange { background: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--texte-fort); }
.case-charge.rouge { background: color-mix(in srgb, var(--rouge) 30%, transparent); color: var(--texte-fort); }
.tableau-charge .total-charge { border-left: 2px solid var(--bordure); }
/* Période affichée entre les flèches, bien visible. */
.periode-charge { margin-right: 4px; font-size: 16px; font-weight: 600; color: var(--texte-fort); white-space: nowrap; }
/* Flèches précédent / suivant collées, à une place fixe (la période est écrite avant elles). */
.fleches { display: inline-flex; }
.fleches .bouton { border-radius: 0; min-width: 34px; text-align: center; }
.fleches .bouton:first-child { border-radius: 6px 0 0 6px; }
.fleches .bouton:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
/* Zoom du portefeuille : − (plus de mois) et + (moins de mois). */
.zoom { display: inline-flex; margin-left: 10px; }
.zoom .bouton { border-radius: 0; min-width: 34px; text-align: center; }
.zoom .bouton:first-child { border-radius: 6px 0 0 6px; }
.zoom .bouton:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.zoom .bouton.inactif { opacity: .35; pointer-events: none; }
/* Vue mois : une seule colonne de jours, le tableau reste étroit. */
.tableau-charge.vue-mois { width: auto; min-width: 420px; }
.legende-charge { display: inline-block; padding: 0 8px; border-radius: 4px; margin: 0 2px; color: var(--texte-fort); }
.legende-charge.vert { background: color-mix(in srgb, var(--vert) 18%, transparent); }
.legende-charge.orange { background: color-mix(in srgb, var(--orange) 25%, transparent); }
.legende-charge.rouge { background: color-mix(in srgb, var(--rouge) 30%, transparent); }
.tableau-charge tfoot td { background: var(--fond-lateral); color: var(--texte-fort); font-weight: 600; border-bottom: none; }

/* ---------- Exports Excel ---------- */

.bouton-excel { display: inline-flex; align-items: center; gap: 6px; }
.bouton-excel:hover { text-decoration: none; }
/* Listes : toujours dans la colonne de droite de la barre, même sans compteurs. */
.barre-listes .bouton-excel { grid-column: 3; justify-self: end; }
/* Téléphone : une seule colonne, sinon le bouton crée une colonne de trop et la page déborde. */
@media (max-width: 800px) { .barre-listes .bouton-excel { grid-column: auto; justify-self: start; } }

/* Dates cibles d'une phase (§11, piste 5), dans son en-tête. */
.dates-phase { color: var(--texte-doux); font-size: 13px; font-weight: 400; white-space: nowrap; }
.dates-phase.depassee { color: var(--rouge); font-weight: 600; }
.ligne-form.bloc input[type="date"] { min-width: 150px; }

/* ---------- Gantt léger d'un projet (§11, piste 5) ---------- */

/* Bascule Tableau | Gantt : l'état est l'attribut data-affichage de <body>. */
.bascule-projet { margin: 0 0 16px; }
.vue-gantt { display: none; }
[data-affichage="gantt"] .vue-gantt { display: block; }
[data-affichage="gantt"] .vue-tableau { display: none; }
body:not([data-affichage="gantt"]) .bascule-projet [data-affichage="tableau"],
[data-affichage="gantt"] .bascule-projet [data-affichage="gantt"] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }

.enveloppe-gantt { overflow-x: auto; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre); }
.gantt { display: block; width: 100%; min-width: 820px; height: auto; font-family: inherit; }
/* Couleur de chaque phase, la même que son groupe dans le tableau. */
.gantt .c-bleu { --c: var(--bleu); }
.gantt .c-vert { --c: var(--vert); }
.gantt .c-violet { --c: var(--violet); }
.gantt .c-orange { --c: var(--orange); }
.gantt .entete-gantt { fill: var(--fond-lateral); }
.gantt .titre-colonne { fill: var(--texte-doux); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gantt .mois { stroke: var(--bordure); stroke-width: 1; }
.gantt .mois-texte { fill: var(--texte-fort); font-size: 12px; font-weight: 600; }
.gantt .semaine { stroke: var(--bordure); stroke-width: .6; opacity: .5; }
.gantt .semaine-texte { fill: var(--texte-doux); font-size: 11px; }
.gantt .separateur { stroke: var(--bordure); stroke-width: 1; }
.gantt .ligne-paire { fill: var(--texte); opacity: .025; }
.gantt .week-end { fill: var(--texte); opacity: .045; }
.gantt .survol { fill: transparent; }
.gantt .ligne-gantt:hover .survol { fill: var(--surface-survol); opacity: .6; }
.gantt .pastille-phase { fill: var(--c); }
/* Le dessin (base de 1 500 points) est réduit d'un quart sur un portable : textes un peu plus grands pour rester lisibles. */
.gantt .libelle-gantt { fill: var(--texte); font-size: 13.5px; }
.gantt .phase .libelle-gantt { fill: var(--texte-fort); font-weight: 600; font-size: 14.5px; }
.gantt .lot .libelle-gantt { fill: var(--texte-doux); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.gantt .faite .libelle-gantt { fill: var(--texte-doux); }
/* Cible : bande claire de la couleur de la phase ; réel : barre pleine par-dessus. */
.gantt .barre.cible { fill: var(--c); fill-opacity: .16; stroke: var(--c); stroke-opacity: .45; stroke-width: 1; }
.gantt .barre.reel { fill: var(--c); }
.gantt .barre.tache { fill: var(--c); fill-opacity: .55; }
.gantt .barre.retard, .gantt .barre.tache-retard { fill: var(--rouge); }
.gantt .barre.tache-retard { fill-opacity: .75; }
.gantt .close .barre.reel { fill-opacity: .45; }
.gantt .faite .barre.tache { fill-opacity: .3; }
.gantt .texte-barre { fill: #fff; font-size: 11px; font-weight: 600; pointer-events: none; }
.gantt .close .texte-barre { fill: var(--texte-fort); }
.gantt .texte-retard { fill: var(--rouge); font-size: 11px; font-weight: 700; }
.gantt .jalon-gantt rect { fill: var(--surface); stroke: var(--orange); stroke-width: 2.5; }
.gantt .jalon-gantt.signale rect { fill: var(--orange); }
.gantt .jalon-gantt text { fill: var(--orange); font-size: 10px; font-weight: 700; }
.gantt .aujourdhui { stroke: var(--accent); stroke-width: 2; }
.gantt .pastille-aujourdhui { fill: var(--accent); }
.gantt .texte-aujourdhui { fill: #fff; font-size: 10px; font-weight: 700; }
.aide-gantt { color: var(--texte-doux); font-size: 13px; margin: 0 0 10px; }
.legende-gantt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--texte-doux); font-size: 12px; margin: 8px 0 24px; }
.legende-gantt .echantillon { display: inline-block; width: 20px; height: 10px; border-radius: 2px; margin-right: -6px; }
.legende-gantt .echantillon.cible { background: color-mix(in srgb, var(--bleu) 16%, transparent); border: 1px solid color-mix(in srgb, var(--bleu) 45%, transparent); }
.legende-gantt .echantillon.reel { background: var(--bleu); }
.legende-gantt .echantillon.retard { background: var(--rouge); }
.legende-gantt .losange { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid var(--orange); margin-right: -4px; }
.legende-gantt .losange.signale { background: var(--orange); }

/* ---------- Portefeuille (§11, piste 5) : frise de tous les projets, par CP ---------- */

.gantt.portefeuille .fond-cp { fill: var(--c); fill-opacity: .08; }
/* Dessin réduit d'un quart sur un portable : textes un peu plus grands pour rester lisibles. */
.gantt.portefeuille .groupe-cp .libelle-gantt { fill: var(--texte-fort); font-weight: 700; font-size: 15px; }
.gantt .sous-titre-gantt { fill: var(--texte-doux); font-weight: 400; font-size: 12.5px; }
.gantt.portefeuille .projet-pf .libelle-gantt { fill: var(--texte-fort); font-weight: 600; font-size: 14px; }
.gantt .societe-gantt { fill: var(--texte-doux); font-size: 12.5px; }
.gantt .lien-gantt { cursor: pointer; }
.gantt .lien-gantt:hover .libelle-gantt { fill: var(--accent); text-decoration: underline; }
.gantt .suspendu .barre { fill-opacity: .35; }
.gantt .suspendu .barre.cible { fill-opacity: .08; }
.gantt .jalon-gantt.petit rect { stroke-width: 2; }

/* ---------- Menu du compte (en haut à droite) ---------- */

.menu-compte { position: relative; }
.menu-compte > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary:hover, .menu-compte[open] > summary { background: var(--surface-survol); }
.menu-compte .fleche-compte { color: var(--texte-doux); transition: transform .15s ease; }
.menu-compte[open] .fleche-compte { transform: rotate(180deg); }
.panneau-compte {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: 270px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  box-shadow: var(--ombre);
}
.identite-compte { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--bordure); }
.identite-compte strong { color: var(--texte-fort); }
.identite-compte > span { color: var(--texte-doux); font-size: 12px; overflow-wrap: anywhere; }
.identite-compte .profil-compte { align-self: flex-start; margin-top: 6px; background: var(--accent-doux); color: var(--texte-fort); }
.identite-compte .en-tant-que-compte { color: var(--orange); font-weight: 600; }
.item-compte {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.item-compte:hover { background: var(--surface-survol); color: var(--texte-fort); text-decoration: none; }
.item-compte .picto { flex: none; width: 18px; height: 18px; color: var(--texte-doux); }
.panneau-compte .separe { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bordure); }
.photo-fiche .form-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.aide-photo { color: var(--texte-doux); font-size: 11px; line-height: 1.35; text-align: center; }

/* ---------- Fenêtre de confirmation (static/js/dialogues.js) ---------- */

.dialogue-volta {
  width: min(440px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  background: var(--surface);
  color: var(--texte);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.dialogue-volta::backdrop { background: rgba(10, 12, 25, .55); backdrop-filter: blur(2px); }
.dialogue-volta[open] { animation: apparition-dialogue .14s ease-out; }
/* Glissement seul, sans transparence : visible dès la première image, même si l'animation ne tourne pas. */
@keyframes apparition-dialogue { from { transform: translateY(8px) scale(.98); } to { transform: none; } }
.question-dialogue { margin: 0 0 20px; color: var(--texte-fort); font-size: 15px; line-height: 1.5; white-space: pre-line; }
.actions-dialogue { display: flex; justify-content: flex-end; gap: 8px; }
.bouton.bouton-danger-plein { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton.bouton-danger-plein:hover { filter: brightness(1.1); background: var(--rouge); }

/* ---------- Notifications (« toasts ») en bas à droite ---------- */

.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--vert);
  border-radius: 10px;
  background: var(--surface);
  color: var(--texte-fort);
  box-shadow: var(--ombre);
  pointer-events: auto;
  animation: arrivee-toast .2s ease-out;
}
.toast.error { border-left-color: var(--rouge); }
.toast.warning { border-left-color: var(--orange); }
.toast.info { border-left-color: var(--bleu); }
.toast.sortie { opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .25s; }
@keyframes arrivee-toast { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .dialogue-volta[open] { animation: none; } }
.texte-toast { flex: 1; font-size: 14px; line-height: 1.45; }
.fermer-toast { border: 0; background: none; color: var(--texte-doux); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fermer-toast:hover { color: var(--texte-fort); }

/* ---------- Barre de chargement (static/js/chargement.js) ---------- */

/* Trait de 2,5 px tout en haut, dans le dégradé du logo, avec un léger halo et
   un reflet qui glisse pendant l'attente. Invisible au repos. */
#barre-chargement {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 2.5px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #0073ea 0%, #5a49d8 55%, #a25ddc 100%);
  box-shadow: 0 0 10px rgba(90, 73, 216, .7), 0 0 3px rgba(0, 115, 234, .6);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease-out, opacity .3s ease;
  overflow: hidden;
}
#barre-chargement.actif { opacity: 1; }
#barre-chargement.fin { opacity: 0; transition: transform .2s ease-out, opacity .35s ease .15s; }
#barre-chargement::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: reflet-chargement 1.1s ease-in-out infinite;
}
@keyframes reflet-chargement { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
@media (prefers-reduced-motion: reduce) { #barre-chargement::after { animation: none; } }

/* Bouton en attente de la réponse du serveur : grisé, curseur d'attente. */
.en-attente { opacity: .55; cursor: progress !important; }