/* Fiche projet : résumé d'avancement et frise des phases, onglet Jalons (phases repliables, tâches sous le jalon), onglet Tâches « par jalon »,
   bandeau « Mes jalons », Historique regroupé. Aucune valeur en dur : variables du thème (app.css) et quelques variables propres ci-dessous. */
:root {
  --cible-tactile: 44px;               /* taille mini d'une zone de toucher */
  --jl-coche: 24px;                    /* case ronde « terminé » */
  --jl-anneau: 88px;                   /* diamètre de l'anneau d'avancement */
  --jl-anneau-ep: 9px;                 /* épaisseur de l'anneau */
  --jl-frise-h: 5px;                   /* hauteur des barres de la frise */
  --jl-colonnes: var(--jl-coche) minmax(0, 1fr) minmax(0, 17rem) 6.5rem 7rem 4.2rem 2.2rem;
}

/* ── Résumé : anneau + chiffres + frise des phases ── */
.rs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.rs-anneau { --p: 0; position: relative; display: grid; place-items: center; width: var(--jl-anneau); height: var(--jl-anneau); border-radius: 50%; background: conic-gradient(var(--sc, var(--accent)) calc(var(--p) * 1%), var(--surface2) 0); }
.rs-anneau::before { content: ""; position: absolute; inset: var(--jl-anneau-ep); border-radius: 50%; background: var(--surface); }
.rs-anneau b { position: relative; font-size: 20px; font-weight: 700; }
.rs-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s-3) var(--s-4); }
.rs-fait span { display: block; font-size: 12px; color: var(--muted); }
.rs-fait b { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.rs-fait .rs-alerte { color: var(--danger); }
.rs-fait .rs-ok { color: var(--success); }
.rs-avant { font: inherit; font-size: 12px; color: var(--orange); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.rs-avant:hover, .rs-avant:focus-visible { text-decoration-style: solid; }
.ph-frise { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); row-gap: var(--s-2); margin: 0 0 var(--s-3); }      /* toutes les phases, à la ligne si elles sont nombreuses : jamais de libellé coupé */
.ph-etape { --p: 0; position: relative; min-width: 0; padding: var(--s-3) var(--s-2) 0 0; text-align: left; background: none; border: 0; color: var(--fg); font: inherit; cursor: pointer; }
.ph-etape::before { content: ""; position: absolute; left: 0; right: var(--s-1); top: 0; height: var(--jl-frise-h); border-radius: var(--r-sm); background: var(--surface2); }
.ph-etape i { position: absolute; left: 0; top: 0; height: var(--jl-frise-h); width: calc(var(--p) * 1%); max-width: calc(100% - var(--s-1)); border-radius: var(--r-sm); background: var(--success); transition: width var(--t-base); }
.ph-etape.ph-cur i { background: var(--accent); }
.ph-etape span { display: block; font-size: 12.5px; font-weight: 600; }
.ph-etape small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ph-etape.ph-cur span { color: var(--accent); }
.ph-etape:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* ── Onglet Jalons ── */
.jl-phase { margin: 0 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.jl-ph { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); }
.jl-ph-t { flex: 1; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-1); background: none; border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.jl-ph-nom { flex: 1; font-size: 15px; font-weight: 620; min-width: 0; overflow-wrap: anywhere; }
.jl-ph-n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.jl-chev { color: var(--muted); flex: none; transition: transform var(--t-base); }
.jl-ouverte > .jl-ph .jl-chev, .jl-n[aria-expanded="true"] .jl-chev { transform: rotate(180deg); }
.jl-corps[hidden], .jl-edit[hidden], .jl-taches[hidden] { display: none; }
.jl-vide { padding: var(--s-3) var(--s-4); }

.jl-item { border-top: 1px solid var(--border); }
.jl-row { display: grid; grid-template-columns: var(--jl-colonnes); gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4); transition: background var(--t-fast); }
.jl-row:has(.jl-sel) { grid-template-columns: var(--jl-coche) var(--jl-colonnes); }
.jl-row:hover { background: var(--surface2); }
.jl-ck { display: grid; place-items: center; width: var(--jl-coche); height: var(--jl-coche); padding: 0; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); color: transparent; cursor: pointer; transition: background var(--t-base), border-color var(--t-base), color var(--t-base); }
.jl-ck:hover:not(:disabled) { color: var(--muted); }
.jl-fait .jl-ck:hover:not(:disabled) { color: var(--bg); }
.tk-ck-cell { display: inline-flex; padding-left: var(--s-3); margin-left: var(--s-2); border-left: 1px solid var(--border); }
.jl-ck:disabled { cursor: default; opacity: .5; }
.jl-fait .jl-ck { background: var(--success); border-color: var(--success); color: var(--bg); animation: jl-pop var(--t-base) var(--ease-spring); }
@keyframes jl-pop { 50% { transform: scale(1.18); } }
.jl-nom { background: none; border: 0; padding: var(--s-1) 0; text-align: left; font: inherit; font-weight: 550; color: var(--fg); cursor: pointer; overflow-wrap: anywhere; min-width: 0; }
.jl-fait .jl-nom, .jl-na .jl-nom { color: var(--muted); }
.jl-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.jl-pers { display: flex; flex-wrap: wrap; gap: var(--s-1); min-width: 0; }
.jl-pers-c { padding: 1px var(--s-2); border-radius: 999px; font-size: 12px; background: var(--surface2); color: var(--muted); }
.jl-confie { background: var(--accent-d); color: var(--accent); font-weight: 600; }
.jl-inactif { text-decoration: line-through; }
.jl-date { color: var(--muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.jl-date.jl-late { color: var(--danger); font-weight: 600; }
.jl-st { white-space: nowrap; }
.jl-n { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-1); padding: var(--s-1); background: none; border: 0; border-radius: var(--r-sm); color: var(--muted); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.jl-n:hover, .jl-n[aria-expanded="true"] { color: var(--fg); background: var(--surface2); }
.jl-menu { display: inline-flex; justify-content: flex-end; }
.jl-edit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); align-items: end; padding: var(--s-3) var(--s-4) var(--s-4) calc(var(--s-4) + var(--jl-coche) + var(--s-3)); background: var(--surface2); border-top: 1px solid var(--border); }
.jl-edit label { display: grid; gap: var(--s-1); font-size: 12px; color: var(--muted); min-width: 0; }
.jl-edit select, .jl-edit input { min-width: 0; width: 100%; }
.jl-notes { grid-column: 1 / -1; }
.jl-taches { padding: var(--s-1) var(--s-4) var(--s-3) calc(var(--s-4) + var(--jl-coche) + var(--s-3)); background: var(--surface2); border-top: 1px solid var(--border); }
.jl-tache { display: grid; grid-template-columns: var(--jl-coche) minmax(0, 1fr) minmax(0, 17rem) 7rem 2.25rem; gap: var(--s-3); align-items: center; padding: var(--s-1) 0; }
.jl-sous { padding-left: var(--s-5); }
.jl-ttitre { background: none; border: 0; padding: var(--s-1) 0; text-align: left; font: inherit; color: var(--fg); cursor: pointer; overflow-wrap: anywhere; }
.jl-ttitre:hover { text-decoration: underline; text-underline-offset: 3px; }
.jl-tache.jl-fait .jl-ttitre { text-decoration: line-through; color: var(--muted); }
.jl-tech { color: var(--muted); font-size: 13px; text-align: right; }
.jl-tmenu { display: flex; justify-content: flex-end; }
.jl-tnew { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-top: var(--s-2); }
.jl-tnew-t { flex: 1 1 14rem; min-width: 0; }
.jl-tnew-m { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; }
.jl-tck { width: 18px; height: 18px; justify-self: center; cursor: pointer; }
.jl-sel { justify-self: center; }
.pj-toolbar .ms-all-lbl { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 13px; }

/* ── Onglet Tâches : regroupement par jalon ; Mes tâches : Projet › Jalon ── */
.tk-groupe { margin: 0 0 var(--s-3); }
.tk-groupe-t { margin: 0 0 var(--s-2); font-size: 14px; font-weight: 620; }
.tk-groupe-int { padding: var(--s-3) var(--s-4) var(--s-1); margin: 0; border-top: 1px solid var(--border); }
.tk-groupe-int:first-child { border-top: 0; }
.tk-bar[hidden] { display: none; }
.tk-all { margin-left: var(--s-2); cursor: pointer; vertical-align: middle; }
.tk-retrait { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: 13px; }
.tk-retrait[hidden] { display: none; }      /* la case n'apparaît que si quelqu'un est retiré du jalon */

/* ── Bandeau « Mes jalons » (replié) ── */
.mj { margin: 0 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.mj > summary { padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; }
.mj > summary::-webkit-details-marker { display: none; }
.mj > summary::before { content: "▸"; display: inline-block; margin-right: var(--s-2); color: var(--muted); transition: transform var(--t-base); }
.mj[open] > summary::before { transform: rotate(90deg); }
.mj-liste { list-style: none; margin: 0; padding: 0 0 var(--s-2); }
.mj-lien { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 6.5rem 3.5rem; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-4); color: var(--fg); text-decoration: none; border-top: 1px solid var(--border); }
.mj-lien:hover { background: var(--surface2); }
.mj-nom { font-weight: 550; overflow-wrap: anywhere; }
.mj-date { color: var(--muted); text-align: right; font-size: 13px; }
.mj-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Historique regroupé ── */
.hi-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0 var(--s-4) var(--s-2); }
.hi-jour { margin: 0; padding: var(--s-3) var(--s-4) var(--s-1); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: capitalize; }
.hi-ev { display: grid; grid-template-columns: var(--jl-coche) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); }
.hi-ico { display: grid; place-items: center; width: var(--jl-coche); height: var(--jl-coche); border-radius: 50%; background: var(--surface2); color: var(--muted); font-size: 12px; }
.hi-t-note .hi-ico { background: var(--accent-d); color: var(--blue); }
.hi-t-statut .hi-ico { background: var(--accent-d); color: var(--accent); }
.hi-t-jalon .hi-ico { background: var(--accent-d); color: var(--success); }
.hi-t-tache .hi-ico { background: var(--accent-d); color: var(--orange); }
.hi-ev-meta { font-size: 12px; color: var(--muted); }
.hi-ev-corps { white-space: pre-line; overflow-wrap: anywhere; }
.hi-groupe > summary { cursor: pointer; list-style: none; }
.hi-groupe > summary::-webkit-details-marker { display: none; }
.hi-groupe > summary::after { content: " ▸"; color: var(--muted); }
.hi-groupe[open] > summary::after { content: " ▾"; }
.hi-groupe ul { margin: var(--s-2) 0 0; padding-left: var(--s-4); font-size: 13px; color: var(--muted); }

/* ── Mobile ── */
@media (max-width: 760px) {
  .rs { grid-template-columns: 1fr; justify-items: start; gap: var(--s-3); }
  .rs-faits { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-anneau { --jl-anneau: 72px; }
  .jl-row { grid-template-columns: var(--jl-coche) minmax(0, 1fr) auto auto; gap: var(--s-2) var(--s-3); padding: var(--s-3); }
  .jl-row:has(.jl-sel) { grid-template-columns: var(--jl-coche) var(--jl-coche) minmax(0, 1fr) auto auto; }
  .jl-nom { grid-column: 2; }
  .jl-pers { grid-column: 2; grid-row: 2; }
  .jl-date { grid-column: 2; grid-row: 3; text-align: left; }
  .jl-st { grid-column: 3; grid-row: 1; }
  .jl-n { grid-column: 3; grid-row: 2; }
  .jl-menu { grid-column: 4; grid-row: 1; }
  .jl-row:has(.jl-sel) .jl-nom, .jl-row:has(.jl-sel) .jl-pers, .jl-row:has(.jl-sel) .jl-date { grid-column: 3; }
  .jl-row:has(.jl-sel) .jl-st, .jl-row:has(.jl-sel) .jl-n { grid-column: 4; }
  .jl-row:has(.jl-sel) .jl-menu { grid-column: 5; }
  .jl-pers:empty, .jl-date:empty { display: none; }
  .jl-edit { grid-template-columns: 1fr 1fr; padding-left: var(--s-3); padding-right: var(--s-3); }
  .jl-taches { padding-left: var(--s-3); padding-right: var(--s-3); }
  .jl-tache { grid-template-columns: var(--jl-coche) minmax(0, 1fr) auto; }
  .jl-tpers, .jl-tech { grid-column: 2 / -1; text-align: left; }
  .jl-tmenu { grid-column: 3; grid-row: 1; }
  .mj-lien { grid-template-columns: minmax(0, 1fr) auto; }
  .mj-lien .pm-muted { grid-column: 1; }
  .mj-date { grid-column: 1; text-align: left; }
}
/* Fiche projet sur téléphone : onglets sur une seule rangée qui défile, sélecteur de statut contenu dans l'écran */
@media (max-width: 760px) {
  .tabs-bar.tabs-wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--s-6); -webkit-mask-image: linear-gradient(90deg, var(--fg) calc(100% - var(--s-6)), transparent); mask-image: linear-gradient(90deg, var(--fg) calc(100% - var(--s-6)), transparent); }      /* les onglets suivants s'estompent au bord : on voit qu'on peut faire défiler */
  .tabs-bar.tabs-wrap::-webkit-scrollbar { display: none; }
  .tabs-bar.tabs-wrap .detail-tab { flex: none; }
  .pj-statut-wrap { flex-wrap: wrap; max-width: 100%; }
  .pj-statut { max-width: 100%; min-width: 0; }
  .ph-frise { grid-template-columns: repeat(2, minmax(0, 1fr)); }      /* phases sur deux colonnes : plus de libellé coupé ni de défilement */
  .ph-etape { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .jl-ck, .jl-chev, .ph-etape i { transition: none; animation: none; } .jl-fait .jl-ck { animation: none; } }


/* ── Correctifs de recette (C1) ── */
/* Tâche annulée : ni coche verte ni case « terminée » */
.jl-annule .jl-ck { background: var(--surface2); border-color: var(--muted); color: var(--muted); }
.jl-tache.jl-annule .jl-ttitre { text-decoration: line-through; color: var(--muted); }
/* Planning : le repère « Aujourd'hui » est un point au pied du trait ; la semaine en cours prend la couleur du repère (plus de pastille sur S45) */
.gt-today-l { width: var(--s-2); height: var(--s-2); padding: 0; bottom: calc(-1 * var(--s-1)); }
.gt-tmark { top: auto; height: var(--s-1); }      /* le trait ne traverse plus les libellés de l'en-tête */
.gt-w.now { color: var(--danger); opacity: 1; font-weight: 600; }
/* Onglet Tâches du projet et Mes tâches : air entre le compteur et le tableau, saisie rapide qui ne chevauche pas l'en-tête */
.tk-resume { margin: var(--s-3) 0 var(--s-4); }
.tk-head-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-left: var(--s-3); }
.tk-head-act select, .tk-head-act .btn { margin-left: 0; }
.tk-head-act .btn-primary { white-space: nowrap; flex: none; }
.tk-quick { position: relative; z-index: 0; }
.tk-quick + .tk-zone { margin-top: var(--s-3); }
.tk-quick .tk-q-titre { min-width: 0; }

@media (max-width: 760px) {
  /* En-tête de l'onglet Tâches : titre et compteur, puis filtres et bouton principal entier sur la ligne suivante */
  .tk-head { flex-wrap: wrap; row-gap: var(--s-2); }
  .tk-head .panel-meta { padding-left: 0; text-align: right; }
  .tk-head-act { flex: 1 0 100%; margin-left: 0; }
  .tk-head-act .btn-primary { margin-left: auto; }
  /* Tâches en cartes : une carte par tâche, les colonnes secondaires passent sous le titre */
  .tk-zone .data-table, .tk-zone .data-table tbody { display: block; width: 100%; }
  .tk-zone .data-table thead { display: none; }
  .tk-zone .data-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--border); }
  .tk-zone .data-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .tk-zone .data-table td:empty { display: none; }
  .tk-zone .data-table td.empty-row { flex: 1 0 100%; }
  .tk-zone .tk-c-sel { order: 1; }
  .tk-zone .tk-c-fait { order: 2; padding: 0; margin: 0; border: 0; }
  .tk-zone .tk-c-titre { order: 3; flex: 1 1 0; }
  .tk-zone .tk-c-x { order: 4; }
  .tk-zone .tk-c-projet, .tk-zone .tk-c-ass, .tk-zone .tk-c-jal { flex: 1 0 100%; }
  .tk-zone .tk-c-projet { order: 5; }
  .tk-zone .tk-c-ass { order: 6; }
  .tk-zone .tk-c-jal { order: 7; }
  .tk-zone .tk-c-prio { order: 8; }
  .tk-zone .tk-c-etat { order: 9; }
  .tk-zone .tk-c-ech { order: 10; }
  .tk-zone .tk-sous { padding-left: var(--s-3); }
}
.jl-fait .jl-ck.jl-deja-fait { animation: none; }      /* ligne redessinée par la réponse du serveur alors que la coche était déjà passée à « fait » : pas de second rebond */
.pj-badges { display: contents; }      /* pastilles de l'en-tête remplaçables sans changer la mise en page */

/* Écran tactile : la coche reste de 24 px à l'œil, sa zone de toucher fait 44 px ; le bouton « ⋯ » aussi */
@media (pointer: coarse), (max-width: 760px) {
  .jl-ck { position: relative; }
  .jl-ck::after { content: ""; position: absolute; inset: calc((var(--jl-coche) - var(--cible-tactile)) / 2 - 2px); }
  .jl-menu > button, .jl-tmenu > button { min-width: var(--cible-tactile); min-height: var(--cible-tactile); }
}