/* = Module planning — styles propres aux gabarits de templates/planning/.
   Un block utilisé par un second module remonte dans components.css.
   Issu du découpage de main.css (15/09/2026), chargé sur toutes les pages
   dans l'ordre fixé par templates/partials/feuilles_de_style.html.  */

/* --- Planning bar (Gantt simplifié) --- */

.planning-cell {
  text-align: center;
  font-size: var(--text-12);
  cursor: pointer;
  position: relative;
}

.planning-cell--surcharge {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.planning-cell--sous-charge {
  background: var(--color-primary-bg);
  color: var(--color-info);
}

.charge-bar {
  margin: 0 auto;
  width: 60px;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
}

.charge-bar__fill--confirmee {
  background: var(--color-primary);
  height: 100%;
}

.charge-bar__fill--previsionnelle {
  background: repeating-linear-gradient(
    90deg,
    var(--color-primary) 0,
    var(--color-primary) 2px,
    transparent 2px,
    transparent 4px
  );
  height: 100%;
  opacity: 0.5;
}

.planning-draggable {
  margin: 2px auto;
  padding: var(--space-0-5) var(--space-1);
  font-size: var(--text-10);
  border-radius: var(--radius-xs);
  cursor: grab;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-draggable--confirmee {
  background: var(--color-primary-bg);
  border: 1px solid var(--color-cat-violet);
}

.planning-draggable--previsionnelle {
  background: var(--color-bg-hover);
  border: 1px dashed var(--color-border-strong);
}

.charge-cell__total {
  font-weight: var(--weight-semibold);
}

.charge-cell__prev-note {
  font-size: var(--text-10);
  display: block;
  color: var(--color-text-secondary);
  font-style: italic;
}

.charge-cell__capacite {
  font-size: var(--text-10);
  display: block;
  color: var(--color-text-secondary);
}

.charge-cell__absence {
  font-size: var(--text-10);
  color: var(--color-text-secondary);
}

.charge-cell__ajout {
  color: var(--color-text-secondary);
  font-size: var(--text-18);
}

.cellule-edit {
  padding: var(--space-1-5);
  background: var(--color-warning-bg);
  min-width: 200px;
  vertical-align: top;
}

.cellule-edit__ref {
  font-size: var(--text-10);
  font-weight: var(--weight-semibold);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cellule-edit__unit {
  font-size: var(--text-10);
}

.cellule-edit__new-row {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-1);
  margin-top: var(--space-1);
}

.cellule-edit__actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1-5);
  justify-content: flex-end;
}

.echeance-item {
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-md);
  font-size: var(--text-12);
}

.echeance-item--retard {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
}

.echeance-item--proche {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.echeance-item__ref {
  font-weight: var(--weight-semibold);
}

.point-hebdo__collab-header {
  min-width: 150px;
}

.point-hebdo__semaine-header {
  text-align: center;
  min-width: 250px;
}

.point-hebdo__row--surcharge {
  background: var(--color-danger-bg);
}

.point-hebdo__collab-cell {
  font-weight: var(--weight-medium);
  vertical-align: top;
  padding-top: var(--space-2-5);
}

.point-hebdo__cell {
  vertical-align: top;
  font-size: var(--text-12);
}

.point-hebdo__cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1-5);
}

.point-hebdo__taux {
  font-size: var(--text-11);
}

.point-hebdo__taux--surcharge {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

.point-hebdo__taux--warning {
  color: var(--color-warning);
  font-weight: var(--weight-semibold);
}

.point-hebdo__taux--normal {
  color: var(--color-text-secondary);
}

.point-hebdo__surcharge-tag {
  color: var(--color-danger);
  font-size: var(--text-10);
  font-weight: var(--weight-bold);
}

.point-hebdo__absence {
  margin-bottom: 3px;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--color-warning-bg);
  border-radius: var(--radius-xs);
  font-size: var(--text-11);
}

.point-hebdo__projet {
  margin-bottom: 3px;
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-xs);
}

.point-hebdo__projet--confirme {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-subtle);
}

.point-hebdo__projet--previsionnel {
  border-left: 3px dashed var(--color-text-muted);
  background: var(--color-bg-subtle);
  opacity: 0.8;
}

.point-hebdo__projet-ref {
  font-weight: var(--weight-semibold);
}

.point-hebdo__prev-tag {
  font-size: var(--text-10);
  font-style: italic;
}

.projet-selector__label {
  margin: 0;
  white-space: nowrap;
}

.projet-planning-grille {
  min-width: 800px;
}

.projet-planning__collab-header {
  min-width: 160px;
}

.projet-planning__semaine-header {
  text-align: center;
  min-width: 80px;
  font-size: var(--text-11);
}

.projet-planning__total-header {
  text-align: center;
  min-width: 70px;
}

.projet-planning__cell {
  text-align: center;
  font-size: var(--text-12);
}

.projet-planning__heures-value {
  font-weight: var(--weight-semibold);
}

.projet-planning__total-cell {
  text-align: center;
  font-weight: var(--weight-semibold);
}

.projet-planning__foot-row {
  font-weight: var(--weight-semibold);
}

.projet-planning__total-footer {
  text-align: center;
}

.collab-affectation {
  margin-bottom: 2px;
  padding-left: var(--space-1-5);
}

.collab-affectation--confirme {
  border-left: 2px solid var(--color-primary);
}

.collab-affectation--previsionnel {
  opacity: 0.6;
  border-left: 2px dashed var(--color-text-muted);
}

.projets-resumes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.projet-resume__ref {
  font-weight: var(--weight-semibold);
  font-size: var(--text-13);
}

.projet-resume__avancement-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-10);
  margin-bottom: 2px;
}

.projet-resume__phases-note {
  font-size: var(--text-10);
  margin-top: 2px;
}

.projet-resume__footer {
  font-size: var(--text-11);
  padding-top: var(--space-1-5);
  border-top: 1px solid var(--color-border);
}

/* UX-G : les <select> dans la matrice ont color:inherit pour matcher la
   cellule colorée. Mais les <option> du dropdown natif héritent aussi,
   ce qui les rend blanches sur fond blanc (illisibles jusqu'au survol).
   On force des couleurs lisibles sur les options. */
.competence-matrix select[name="niveau"] option {
  color: var(--color-text);
  background: var(--color-surface);
}

.competence-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  vertical-align: middle;
}

.competence-swatch--aucune {
  background: var(--color-border);
}

.competence-swatch--notions {
  background: var(--color-info-bg);
}

.competence-swatch--operationnel {
  background: var(--color-info-border);
}

.competence-swatch--confirme {
  background: var(--color-info);
}

.competence-swatch--expert {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  text-align: center;
  line-height: 16px;
  font-size: var(--text-10);
}

.competence-matrix__collab-header {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 2;
  min-width: 160px;
}

.competence-matrix__cat-header {
  text-align: center;
  font-size: var(--text-11);
  color: var(--color-text-secondary);
  border-bottom: none;
}

.competence-matrix__comp-header {
  text-align: center;
  font-size: var(--text-11);
  min-width: 80px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 100px;
  padding: var(--space-2) var(--space-1);
}

.competence-matrix__collab-cell {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 1;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.competence-matrix__role {
  font-size: var(--text-10);
}

.competence-matrix__cell {
  text-align: center;
  padding: var(--space-1);
}

.competence-matrix__cell--n4 {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.competence-matrix__cell--n3 {
  background: var(--color-info);
  color: var(--color-text-inverse);
}

.competence-matrix__cell--n2 {
  background: var(--color-info-border);
}

.competence-matrix__cell--n1 {
  background: var(--color-info-bg);
}

.competence-matrix__cell--n0 {
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.competence-matrix__select {
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--text-11);
  cursor: pointer;
  text-align: center;
  width: 100%;
  padding: var(--space-0-5);
}

/* --- Toolbar actions --- */
.gantt-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

.gantt-toolbar__zoom {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

/* − et + font un carré de 28 px, « Ajuster » prend la largeur de son texte :
   une largeur minimale, pas une largeur fixe — en sélecteur `.bloc button`
   elle l'emportait sur toute classe posée sur le bouton et le libellé
   débordait du carré (régression de #122). */
.gantt-toolbar__zoom button {
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  font-size: var(--text-14);
  line-height: var(--leading-none);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gantt-toolbar__zoom button:hover {
  background: var(--color-bg-hover);
}

/* --- Container SVG --- */
.gantt-container {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: auto;
  max-height: calc(100vh - 260px);
}

.gantt-container svg {
  display: block;
}

/* ═══════════════════════════════════════════
   PLANNING GANTT — Full-width layout
   ═══════════════════════════════════════════ */

/* ── Prendre toute la largeur dispo ── */
.layout__content:has(.gantt-wrapper) {
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  max-width: none;
}

/* --- Wrapper scrollable --- */
.gantt-wrapper {
  overflow: auto;
  max-height: calc(100vh - 175px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-top: var(--space-3);
}

/* --- Table --- */
.gantt-grille {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-12);
  white-space: nowrap;
  table-layout: fixed;
}

/* ═══ Sticky columns ═══ */
.gantt-sticky {
  position: sticky;
  background: var(--color-surface);
  z-index: 10;
}

.gantt-sticky--collab {
  left: 0;
  width: 110px;
  min-width: 110px;
  z-index: 12;
}

.gantt-sticky--phase {
  left: 110px;
  width: 125px;
  min-width: 125px;
  z-index: 11;
}

.gantt-sticky--debut {
  left: 235px;
  width: 48px;
  min-width: 48px;
  z-index: 11;
}

.gantt-sticky--fin {
  left: 283px;
  width: 48px;
  min-width: 48px;
  z-index: 11;
}

.gantt-sticky--montant {
  left: 331px;
  width: 80px;
  min-width: 80px;
  z-index: 11;
}

/* Ombre de séparation fixe / scroll */
.gantt-sticky--montant::after {
  content: "";
  position: absolute;
  top: 0;
  right: -4px;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to right, var(--color-bg-active), transparent);
  pointer-events: none;
}

/* ═══ THEAD sticky ═══ */

/* `thead` nu dans le gabarit : devenu global, chaque table du site aurait eu
   son en-tête collant. Scopé sur la table du Gantt. */
.gantt-grille thead {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ── Header mois ── */
.gantt-th-mois {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-12);
  text-align: center;
  padding: var(--space-1-5) var(--space-1);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Header sticky cells (labels colonnes) */
.gantt-header-mois .gantt-sticky {
  background: var(--color-bg-subtle);
  font-weight: var(--weight-semibold);
  font-size: var(--text-11);
  color: var(--color-text-secondary);
  padding: var(--space-1-5) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  z-index: 25;
}

.gantt-header-mois .gantt-sticky--montant {
  text-align: right;
}

/* ── Header jours — lettre + numéro ── */
.gantt-th-jour {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  text-align: center;
  padding: var(--space-0-5) 0;
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  line-height: var(--leading-none);
  overflow: hidden;
}

.gantt-th-jour__letter {
  display: block;
  font-size: var(--text-8);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.gantt-th-jour__num {
  display: block;
  font-size: var(--text-8);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Lundi : séparateur de semaine */
.gantt-th-jour--lundi {
  border-left: 2px solid var(--color-border);
}

/* Week-end */
.gantt-th-jour--we {
  background: var(--color-border-light);
}

.gantt-th-jour--we .gantt-th-jour__letter,
.gantt-th-jour--we .gantt-th-jour__num {
  color: var(--color-text-secondary);
}

/* Férié */
.gantt-th-jour--fe {
  background: var(--color-cat-orange-bg);
}

.gantt-th-jour--fe .gantt-th-jour__num {
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

/* Aujourd'hui */
.gantt-th-jour--today {
  /* rouge comme le trait « aujourd'hui » de toutes les frises (gantt.css, lot D-7) */
  background: var(--color-danger);
}

.gantt-th-jour--today .gantt-th-jour__letter,
.gantt-th-jour--today .gantt-th-jour__num {
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

/* Hide cells doublées par rowspan */
.gantt-header-jours .gantt-sticky {
  display: none;
}

/* ═══ Body rows ═══ */
.gantt-row td {
  border-bottom: 1px solid var(--color-border-light);
}

.gantt-row--first td {
  border-top: 1px solid var(--color-border);
}

.gantt-td-collab {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-13);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  vertical-align: top;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.gantt-td-phase {
  padding: var(--space-1) var(--space-1-5);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.gantt-td-phase a {
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  vertical-align: middle;
}

.gantt-td-phase a:hover {
  text-decoration: underline;
}

.gantt-td-date {
  padding: var(--space-1) var(--space-0-5);
  font-size: var(--text-10);
  color: var(--color-text-secondary);
  text-align: center;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.gantt-td-montant {
  padding: var(--space-1) var(--space-1-5);
  font-size: var(--text-11);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-align: right;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ═══ Gantt cells ═══ */
.gantt-cell {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  padding: 0;
  border-right: 1px solid var(--color-border-light);
  background: var(--color-surface);
}

/* Lundi : séparateur de semaine */
.gantt-cell--lundi {
  border-left: 2px solid var(--color-border);
}

/* Week-end */
.gantt-cell--we {
  background: var(--color-bg-subtle);
}

/* Férié (inactif) */
.gantt-cell--fe:not(.gantt-cell--on) {
  background: var(--color-cat-orange-bg);
}

/* Barre active */
.gantt-cell--on {
  background: var(--gantt-color);
  position: relative;
}

/* Barre active + férié */
.gantt-cell--on.gantt-cell--fe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    color-mix(in srgb, var(--color-surface) 35%, transparent) 2px,
    color-mix(in srgb, var(--color-surface) 35%, transparent) 4px
  );
}

/* Barre active + week-end */
.gantt-cell--on.gantt-cell--we {
  opacity: 0.65;
}

/* Aujourd'hui */
.gantt-cell--today {
  box-shadow: inset 2px 0 0 var(--color-danger);
}

/* ═══ Legend ═══ */

/* La legende du planning porte quatre reperes, dont une phrase entiere :
   sans repli (flex-wrap) elle poussait la page a 406 px sur un telephone. */

.charge-sep {
  width: 1px;
  height: 60px;
  background: var(--color-border);
}

/* Un formulaire du planning (affectation, absence) : une largeur, donc un
   block de module (ADR 0006 § 3), ex `card--narrow`. */