/* Module « planning » : page de suivi, diagramme de Gantt (SVG) et administration.
   Couleurs : jetons de app.css uniquement (thèmes clair et sombre automatiques),
   plus quatre couleurs de statut propres au diagramme. Aucune règle hors du
   préfixe « planning- » (et des classes de statut qu'il porte). */

:root {
  --planning-termine: var(--ok);
  --planning-en-cours: #3B4970;
  --planning-a-venir: #8B93A5;
  --planning-en-retard: var(--err);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --planning-en-cours: #8FA6E6;
    --planning-a-venir: #6F7890;
  }
}
:root[data-theme="sombre"] {
  --planning-en-cours: #8FA6E6;
  --planning-a-venir: #6F7890;
}

/* Couleur portée par le statut (barres, losanges, pastilles). */
.planning-gantt .statut-termine, .planning-pastille.statut-termine, .planning-pastille-jalon.statut-termine,
.planning-barre .statut-termine { --planning-c: var(--planning-termine); }
.planning-gantt .statut-en-cours, .planning-pastille.statut-en-cours, .planning-pastille-jalon.statut-en-cours,
.planning-barre .statut-en-cours { --planning-c: var(--planning-en-cours); }
.planning-gantt .statut-a-venir, .planning-pastille.statut-a-venir, .planning-pastille-jalon.statut-a-venir,
.planning-barre .statut-a-venir { --planning-c: var(--planning-a-venir); }
.planning-gantt .statut-en-retard, .planning-pastille.statut-en-retard, .planning-pastille-jalon.statut-en-retard,
.planning-barre .statut-en-retard { --planning-c: var(--planning-en-retard); }

/* --- Synthèse : avancement global et prochain jalon ------------------------------ */
.planning-synthese { display: grid; gap: 18px 28px; }
@media (min-width: 900px) {
  .planning-synthese { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); align-items: center; }
  .planning-prochain { border-left: 1px solid var(--border); padding-left: 24px; }
}
.planning-global-titre { font-size: 1.15rem; margin: 0 0 10px; color: var(--text); }
.planning-global-titre strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.planning-globale { margin-bottom: 8px; }
.planning-globale-svg { display: block; width: 100%; height: 16px; max-width: none; border-radius: 999px; overflow: hidden; }
.planning-globale-piste { fill: var(--surface-3); }
.planning-globale-rempli { fill: var(--planning-en-cours); }
.planning-globale-prevu { fill: var(--accent); }
.planning-repere-legende {
  display: inline-block; width: 4px; height: 12px; margin-right: 6px; vertical-align: -1px;
  background: var(--accent); border-radius: 1px;
}
.planning-prochain p { margin: 0; }
.planning-prochain-titre { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.planning-prochain-libelle { font-weight: 600; font-size: 1.02rem; margin: 4px 0 6px !important; color: var(--text); }
.planning-prochain-date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.planning-compte {
  display: inline-flex; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.9rem;
  background: var(--accent); color: var(--on-accent);
}

/* Quatre tuiles sur une ligne dès que la place le permet ; deux colonnes sur téléphone. */
.planning-tuiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 640px) {
  .planning-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .planning-tuiles .tuile { padding: 10px 12px; }
  .planning-tuiles .tuile-valeur { font-size: 1.4rem; }
}

/* --- Diagramme ------------------------------------------------------------------ */
.planning-echelles { margin-bottom: 0; border-bottom: 0; }
.planning-cadre {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.planning-cadre:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Échelle 1 : les deux SVG gardent leur taille pour rester alignés ligne à ligne. */
.planning-cadre > svg { flex: none; max-width: none; display: block; }
.planning-libelles {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  border-right: 1px solid var(--border); box-shadow: 4px 0 6px -5px rgba(15, 22, 40, 0.25);
}
.planning-gantt text { font-family: var(--police); font-size: 12px; fill: var(--text-2); }
.planning-gantt .planning-court { display: none; }
@media (max-width: 640px) {
  /* Téléphone : cadre plus large, colonne des libellés réduite (le SVG est rogné, pas réduit) et libellés courts. */
  .planning-carte-diagramme { padding: 14px 8px; }
  .planning-carte-diagramme .carte-entete { padding: 0 6px; }
  .planning-libelles { width: 140px; }
  .planning-gantt .planning-long { display: none; }
  .planning-gantt .planning-court { display: inline; }
}
.planning-gantt .planning-mois-texte { fill: var(--text-2); font-size: 11px; font-weight: 600; }
.planning-gantt .planning-entete-texte { fill: var(--muted); font-size: 11px; font-weight: 600; }
.planning-gantt .planning-groupe-texte { fill: var(--text); font-weight: 700; }
.planning-gantt .planning-groupe-pc { fill: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.planning-gantt .planning-element-texte { fill: var(--text-2); }
.planning-gantt .planning-interne { font-style: italic; }
.planning-gantt text.planning-interne { fill: var(--muted); }
.planning-gantt .planning-pc-texte { font-size: 11px; font-weight: 600; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.planning-gantt .planning-date-texte { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.planning-bande { fill: var(--surface-2); }
.planning-rayure { fill: var(--ligne-alt); }
.planning-axe { stroke: var(--border); stroke-width: 1; }
.planning-mois { stroke: var(--border); stroke-width: 1; }
.planning-semaine { stroke: var(--border-leger); stroke-width: 1; }
.planning-resume-piste { fill: var(--surface-3); }
.planning-resume-rempli { fill: var(--text-2); }
.planning-piste { fill: var(--planning-c); fill-opacity: 0.24; }
.planning-piste.statut-a-venir { fill: var(--surface-3); fill-opacity: 1; stroke: var(--border-champ); stroke-width: 1; }
.planning-piste.planning-indicatif { stroke: var(--planning-c); stroke-width: 1; stroke-dasharray: 4 3; }
.planning-rempli { fill: var(--planning-c); }
.planning-marque { fill: var(--planning-c); }
.planning-jalon { fill: var(--surface); stroke: var(--planning-c); stroke-width: 2; }
.planning-jalon.planning-atteint { fill: var(--planning-c); }
.planning-jalon.planning-indicatif { stroke-dasharray: 3 2; }
.planning-suite { fill: var(--text-2); fill-opacity: 0.7; }
.planning-aujourdhui { stroke: var(--accent); stroke-width: 2; }
.planning-aujourdhui-fond { fill: var(--accent); }
.planning-gantt .planning-aujourdhui-texte { fill: var(--on-accent); font-size: 11px; font-weight: 700; }
.planning-ligne-element:hover .planning-piste, .planning-ligne-element:hover .planning-jalon { stroke: var(--text); stroke-width: 1.5; }

/* Légende */
.planning-legende { margin-top: 12px; }
.planning-legende li { display: inline-flex; align-items: center; }
.planning-pastille {
  display: inline-block; flex: none; width: 12px; height: 10px; border-radius: 2px; margin-right: 6px;
  background: var(--planning-c, var(--planning-en-cours));
}
.planning-pastille.statut-a-venir { background: var(--surface-3); border: 1px solid var(--border-champ); }
.planning-pastille-jalon {
  display: inline-block; flex: none; width: 9px; height: 9px; margin: 0 7px 0 2px; transform: rotate(45deg);
  border: 2px solid var(--planning-c, var(--text-2)); background: var(--surface);
}
.planning-pastille-jalon.statut-termine { background: var(--planning-c); }
.planning-legende .planning-pastille-jalon { background: var(--text-2); border-color: var(--text-2); }
.planning-pastille-aujourdhui { display: inline-block; width: 3px; height: 14px; margin-right: 6px; background: var(--accent); }
.planning-legende-interne { font-style: italic; }

/* --- Liste des étapes par groupe -------------------------------------------------- */
.planning-titre-liste { margin: 28px 0 12px; }
.planning-groupe .carte-entete h3 { margin: 0; }
.planning-tableau { max-height: none; margin-bottom: 0; }
.planning-tableau .tableau th[scope="row"] { font-weight: 400; min-width: 260px; }
.planning-nom { display: flex; align-items: baseline; gap: 2px; font-weight: 600; color: var(--text); }
.planning-nom .planning-pastille, .planning-nom .planning-pastille-jalon { position: relative; top: 1px; }
.planning-nature { font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.planning-description, .planning-remarque { display: block; font-size: 0.85rem; color: var(--text-2); margin-top: 4px; max-width: 64ch; }
.planning-remarque { color: var(--warn-tx); }
.planning-remarque::before { content: 'Remarque : '; font-weight: 600; }
.planning-dates { white-space: nowrap; font-variant-numeric: tabular-nums; }
.planning-ligne-interne > * { font-style: italic; }
.planning-details { margin-top: 6px; font-size: 0.85rem; }
.planning-details summary { cursor: pointer; color: var(--lien); }
.planning-details p { margin: 6px 0 0; }
.planning-source { white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); }
.planning-avancement { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.planning-avancement-groupe { min-width: 200px; }
.planning-barre { flex: 1; min-width: 80px; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.planning-barre > span { display: block; height: 100%; border-radius: 999px; background: var(--planning-c, var(--text-2)); }
.planning-pc-valeur { min-width: 3.2em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.planning-mesure { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 720px) {
  /* Carte empilée : le nom de l'élément occupe toute la largeur, sans étiquette. */
  .planning-tableau .tableau th[scope="row"] { min-width: 0; display: block; padding-bottom: 8px; border-bottom: 1px solid var(--border-leger); }
  .planning-tableau .tableau th[scope="row"]::before { content: none; }
  .planning-avancement { min-width: 0; width: 100%; }
  .planning-dates { white-space: normal; }
}

/* Largeur des barres par pas de 1 % (aucun style en ligne). */
.planning-pc-0 { width: 0; } .planning-pc-1 { width: 1%; } .planning-pc-2 { width: 2%; } .planning-pc-3 { width: 3%; } .planning-pc-4 { width: 4%; }
.planning-pc-5 { width: 5%; } .planning-pc-6 { width: 6%; } .planning-pc-7 { width: 7%; } .planning-pc-8 { width: 8%; } .planning-pc-9 { width: 9%; }
.planning-pc-10 { width: 10%; } .planning-pc-11 { width: 11%; } .planning-pc-12 { width: 12%; } .planning-pc-13 { width: 13%; } .planning-pc-14 { width: 14%; }
.planning-pc-15 { width: 15%; } .planning-pc-16 { width: 16%; } .planning-pc-17 { width: 17%; } .planning-pc-18 { width: 18%; } .planning-pc-19 { width: 19%; }
.planning-pc-20 { width: 20%; } .planning-pc-21 { width: 21%; } .planning-pc-22 { width: 22%; } .planning-pc-23 { width: 23%; } .planning-pc-24 { width: 24%; }
.planning-pc-25 { width: 25%; } .planning-pc-26 { width: 26%; } .planning-pc-27 { width: 27%; } .planning-pc-28 { width: 28%; } .planning-pc-29 { width: 29%; }
.planning-pc-30 { width: 30%; } .planning-pc-31 { width: 31%; } .planning-pc-32 { width: 32%; } .planning-pc-33 { width: 33%; } .planning-pc-34 { width: 34%; }
.planning-pc-35 { width: 35%; } .planning-pc-36 { width: 36%; } .planning-pc-37 { width: 37%; } .planning-pc-38 { width: 38%; } .planning-pc-39 { width: 39%; }
.planning-pc-40 { width: 40%; } .planning-pc-41 { width: 41%; } .planning-pc-42 { width: 42%; } .planning-pc-43 { width: 43%; } .planning-pc-44 { width: 44%; }
.planning-pc-45 { width: 45%; } .planning-pc-46 { width: 46%; } .planning-pc-47 { width: 47%; } .planning-pc-48 { width: 48%; } .planning-pc-49 { width: 49%; }
.planning-pc-50 { width: 50%; } .planning-pc-51 { width: 51%; } .planning-pc-52 { width: 52%; } .planning-pc-53 { width: 53%; } .planning-pc-54 { width: 54%; }
.planning-pc-55 { width: 55%; } .planning-pc-56 { width: 56%; } .planning-pc-57 { width: 57%; } .planning-pc-58 { width: 58%; } .planning-pc-59 { width: 59%; }
.planning-pc-60 { width: 60%; } .planning-pc-61 { width: 61%; } .planning-pc-62 { width: 62%; } .planning-pc-63 { width: 63%; } .planning-pc-64 { width: 64%; }
.planning-pc-65 { width: 65%; } .planning-pc-66 { width: 66%; } .planning-pc-67 { width: 67%; } .planning-pc-68 { width: 68%; } .planning-pc-69 { width: 69%; }
.planning-pc-70 { width: 70%; } .planning-pc-71 { width: 71%; } .planning-pc-72 { width: 72%; } .planning-pc-73 { width: 73%; } .planning-pc-74 { width: 74%; }
.planning-pc-75 { width: 75%; } .planning-pc-76 { width: 76%; } .planning-pc-77 { width: 77%; } .planning-pc-78 { width: 78%; } .planning-pc-79 { width: 79%; }
.planning-pc-80 { width: 80%; } .planning-pc-81 { width: 81%; } .planning-pc-82 { width: 82%; } .planning-pc-83 { width: 83%; } .planning-pc-84 { width: 84%; }
.planning-pc-85 { width: 85%; } .planning-pc-86 { width: 86%; } .planning-pc-87 { width: 87%; } .planning-pc-88 { width: 88%; } .planning-pc-89 { width: 89%; }
.planning-pc-90 { width: 90%; } .planning-pc-91 { width: 91%; } .planning-pc-92 { width: 92%; } .planning-pc-93 { width: 93%; } .planning-pc-94 { width: 94%; }
.planning-pc-95 { width: 95%; } .planning-pc-96 { width: 96%; } .planning-pc-97 { width: 97%; } .planning-pc-98 { width: 98%; } .planning-pc-99 { width: 99%; }
.planning-pc-100 { width: 100%; }

/* --- Administration ------------------------------------------------------------- */
.planning-admin-conteneur { max-height: none; }
.planning-admin td, .planning-admin th { vertical-align: top; }
.planning-admin tr[id], .planning-groupe tr[id] { scroll-margin-top: 90px; }
.planning-admin input[type="text"], .planning-admin input[type="date"], .planning-admin input[type="number"],
.planning-admin select, .planning-admin textarea { padding: 5px 8px; font-size: 0.88rem; }
.planning-champ-ordre { width: 4.8em !important; }
/* Bureau (1280 px, navigation comprise) : le tableau tient dans sa carte, bouton « Enregistrer » visible sans défilement. */
.planning-admin-element { min-width: 220px; }
.planning-admin-element .meta { display: block; margin-top: 4px; }
.planning-admin-details { display: grid; gap: 10px; margin-top: 8px; }
.planning-admin-dates { min-width: 150px; }
.planning-etiquette { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.planning-etiquette select, .planning-etiquette input { color: var(--text); }
.planning-admin-avancement { min-width: 150px; }
.planning-admin-statut { min-width: 140px; }
.planning-admin-avancement select { width: 100%; }
.planning-curseur .planning-pc-valeur { flex: none; white-space: nowrap; }
.planning-curseur { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.planning-curseur input[type="range"] { flex: 1; width: 80px; min-width: 80px; accent-color: var(--action); }
.planning-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.planning-actions form { margin: 0; }
.planning-admin-cellule { min-width: 0; }
@media (max-width: 720px) {
  /* Carte empilée : le contenu d'une cellule reste d'un bloc dans la colonne des valeurs. */
  .planning-admin td > .planning-admin-cellule { justify-self: stretch; }
  .planning-admin-element, .planning-admin-dates, .planning-admin-avancement { min-width: 0; }
  .planning-admin-statut { min-width: 0; }
  .planning-actions { flex-direction: row; flex-wrap: wrap; }
}