/* Les dossiers fonciers de l'agence (src/dossier.js, 17/10/2026) : la liste dans le portail Projets, le dossier en plein
   écran (fenêtre .pg du site), les tâches aux statuts des livrables d'Auguste, le planning Gantt, les documents. */
:root { --ds-gris: #8E8E93; --ds-bleu: #3B82F6; --ds-ambre: #D97706; --ds-vert: #22A55A; --ds-rouge: #D9534F; }

/* ── Portail : la liste ── */
.ds-liste { gap: 6px; }
.ds-carte { display: grid; gap: 3px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-moyen); background: var(--survol); box-shadow: inset 0 0 0 1px var(--filet); color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.ds-carte:hover { background: var(--actif); }
.ds-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-carte small { color: var(--encre-3); font-size: var(--t-13); }
.ds-carte .ds-signal { color: var(--ds-rouge); }
.ds-pastille { flex: none; padding: 2px 8px; border-radius: var(--r-rond); font-style: normal; font-size: var(--t-12); font-weight: 600; background: var(--actif); color: var(--encre-2); }
.ds-pastille.ds-contact, .ds-pastille.ds-offre { color: var(--ds-bleu); }
.ds-pastille.ds-promesse, .ds-pastille.ds-acquis { color: var(--ds-vert); }
.ds-pastille.ds-abandonne { color: var(--ds-gris); }

/* ── Le dossier, en plein écran ── */
body.ds-ouvert { overflow: hidden; }
.pg.ds { z-index: 70; }
/* .pg (style.css) pose display: flex, qui l'emporte sur l'attribut hidden : fermé, le dossier restait affiché, figé, et
   ses boutons agissaient sur un dossier déjà fermé (Henri, 17/10/2026 : « dans ce type de fenêtre les boutons bugs ») */
.pg.ds[hidden] { display: none; }
.pg.ds .pg-reglages { gap: 6px; }
.ds-texte { margin: 0; display: grid; gap: 2px; font-size: var(--t-14); }
.ds-texte small { color: var(--encre-3); }
.ds-texte.ds-signal { color: var(--encre-2); line-height: 1.45; }
.ds-note { width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-moyen); background: var(--survol); box-shadow: inset 0 0 0 1px var(--filet); color: var(--encre); font: inherit; font-size: var(--t-14); resize: vertical; }
.ds-note:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.ds-parcelles { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.ds-parcelles li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--filet); font-size: var(--t-13); }
.ds-parcelles small { color: var(--encre-3); }
.ds-lien { border: 0; background: none; padding: 0; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.ds-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
.ds-danger { margin-top: 18px; font-size: var(--t-13); color: var(--encre-3); }
.ds-danger summary { cursor: pointer; }
.ds-danger .bouton { margin-top: 8px; }

/* les volets */
.ds-onglets { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-moyen); background: var(--survol); align-self: flex-start; }
.ds-onglets button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-bouton); background: none; color: var(--encre-2); font: inherit; font-size: var(--t-14); cursor: pointer; }
.ds-onglets button[aria-selected="true"] { background: var(--actif); color: var(--encre); font-weight: 600; }
.ds-onglets small { color: var(--encre-3); font-weight: 400; }

/* ── Tâches ── */
.ds-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px; border-radius: var(--r-moyen); background: var(--survol); }
.ds-form input[name="titre"] { flex: 1 1 260px; }
.ds-form input, .ds-form select, .ds-form textarea { height: 34px; padding: 0 8px; border: 0; border-radius: var(--r-bouton); background: var(--fond); box-shadow: inset 0 0 0 1px var(--filet); color: var(--encre); font: inherit; font-size: var(--t-14); }
.ds-form textarea { flex: 1 1 100%; height: auto; padding: 6px 8px; }
.ds-form label { display: grid; gap: 2px; font-size: var(--t-12); color: var(--encre-3); }
.ds-form-actions { display: flex; gap: 6px; margin-left: auto; }
.ds-groupe { display: grid; gap: 4px; }
.ds-groupe-titre, .ds-groupe summary { margin: 8px 0 0; font-size: var(--t-12); font-weight: 600; color: var(--encre-3); cursor: default; }
.ds-groupe summary { cursor: pointer; }
.ds-groupe small { font-weight: 400; }
.ds-taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ds-tache { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-bouton); }
.ds-tache:hover { background: var(--survol); }
.ds-tache.ds-edition { display: block; padding: 0; }
.ds-statut { height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-bouton); background: var(--actif); color: var(--encre-2); font: inherit; font-size: var(--t-12); font-weight: 600; }
.ds-statut.ds-en-cours { color: var(--ds-bleu); }
.ds-statut.ds-a-valider { color: var(--ds-ambre); }
.ds-statut.ds-valide, .ds-statut.ds-livre { color: var(--ds-vert); }
.ds-statut.ds-archive { color: var(--ds-gris); }
.ds-tache-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; color: var(--encre); font: inherit; font-size: var(--t-14); text-align: left; cursor: pointer; }
.ds-prio { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: var(--r-fin); background: var(--ds-rouge); color: #fff; font-style: normal; font-size: var(--t-11); font-weight: 700; }
.ds-tache-meta { font-size: var(--t-13); color: var(--encre-3); white-space: nowrap; }
.ds-retard { color: var(--ds-rouge); font-weight: 600; }

/* ── Planning (Gantt) ── */
.ds-gantt { --ds-g-nom: 240px; position: relative; display: grid; border-radius: var(--r-moyen); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; background: var(--fond); }
.ds-g-tete, .ds-g-ligne { display: grid; grid-template-columns: var(--ds-g-nom) max-content; }
.ds-g-tete { overflow: hidden; border-bottom: 1px solid var(--filet); }
.ds-g-corps { position: relative; overflow: auto; max-height: calc(100vh - 230px); }
.ds-g-nom { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 10px; background: var(--fond); border-right: 1px solid var(--filet); font-size: var(--t-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-g-nom small { margin-left: auto; padding-left: 6px; color: var(--encre-3); }
.ds-g-echelle { position: relative; height: 42px; }
.ds-g-mois { position: absolute; top: 4px; padding-left: 6px; font-size: var(--t-12); font-weight: 600; color: var(--encre-2); text-transform: capitalize; white-space: nowrap; }
.ds-g-sem { position: absolute; bottom: 4px; padding-left: 6px; border-left: 1px solid var(--filet); font-size: var(--t-11); color: var(--encre-3); }
.ds-g-ligne { height: 38px; border-bottom: 1px solid var(--filet); }
.ds-g-piste { position: relative; background: repeating-linear-gradient(90deg, transparent 0 153px, var(--filet) 153px 154px); }
.ds-g-barre { position: absolute; top: 9px; height: 20px; border-radius: var(--r-pastille); background: var(--encre-4, #888); cursor: grab; touch-action: none; }
.ds-g-barre.ds-en-cours { background: var(--ds-bleu); }
.ds-g-barre.ds-a-valider { background: var(--ds-ambre); }
.ds-g-barre.ds-valide, .ds-g-barre.ds-livre { background: var(--ds-vert); }
.ds-g-barre.ds-a-produire { background: color-mix(in srgb, var(--encre) 35%, transparent); }
.ds-g-poignee { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: ew-resize; border-radius: 0 6px 6px 0; }
.ds-g-poignee:hover { background: rgba(255, 255, 255, .35); }
.ds-g-jalon { position: absolute; top: 12px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--encre); cursor: grab; touch-action: none; }
.ds-g-jalon.ds-valide, .ds-g-jalon.ds-livre { background: var(--ds-vert); }
.ds-g-tire { cursor: grabbing; opacity: .8; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.ds-g-auj { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ds-rouge); pointer-events: none; z-index: 1; }
.ds-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-gris); }
.ds-point.ds-en-cours { background: var(--ds-bleu); }
.ds-point.ds-a-valider { background: var(--ds-ambre); }
.ds-point.ds-valide, .ds-point.ds-livre { background: var(--ds-vert); }

/* ── Documents ── */
.ds-depose { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: var(--r-carte); border: 1.5px dashed var(--filet-2, var(--filet)); color: var(--encre-2); text-align: center; cursor: pointer; }
.ds-depose:hover, .pg.ds.ds-depot .ds-depose { border-color: var(--accent); background: var(--survol); }
.ds-depose small { color: var(--encre-3); font-size: var(--t-13); }
.ds-envoi { margin-top: 6px; font-size: var(--t-13); color: var(--accent); }
.pg.ds.ds-depot .pg-plateau { box-shadow: inset 0 0 0 2px var(--accent); }
.ds-filtres { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-filtres button { height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-rond); background: var(--survol); color: var(--encre-2); font: inherit; font-size: var(--t-13); cursor: pointer; }
.ds-filtres button[aria-pressed="true"] { background: var(--actif); color: var(--encre); font-weight: 600; }
.ds-filtres small { color: var(--encre-3); }
.ds-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ds-docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-bouton); }
.ds-docs li:hover { background: var(--survol); }
.ds-doc-nom { display: grid; gap: 2px; min-width: 0; border: 0; background: none; padding: 0; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.ds-doc-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-14); font-weight: 600; }
.ds-doc-nom small { color: var(--encre-3); font-size: var(--t-12); }
.ds-docs select { height: 30px; padding: 0 6px; border: 0; border-radius: var(--r-bouton); background: var(--survol); color: var(--encre); font: inherit; font-size: var(--t-13); }
.ds-choix-liste { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }

@media (max-width: 899px) {
  /* Au téléphone, une seule colonne qui défile : la fiche du dossier (statut, propriétaire, note, parcelles) en tête,
     puis les volets. En grille, la fiche passait SOUS les tâches, hors de l'écran (mesuré au simulateur iPhone 17,
     17/10/2026 : fiche à 1 236 px dans une fenêtre de 654). */
  .pg.ds .pg-appli { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
  .pg.ds .pg-reglages { max-height: none; overflow: visible; border-right: 0; border-bottom: 1px solid var(--filet); }
  .pg.ds .pg-plateau { overflow: visible; min-height: 0; }
  .pg.ds .pg-poignee-x { display: none; }
  /* des cibles de 44 px au doigt (Apple HIG) : onglets, titres des tâches, liste de statut assez large pour « À produire » */
  .ds-onglets button { min-height: 44px; }
  .ds-tache-titre { min-height: 44px; }
  /* une tâche en deux lignes : statut et titre, puis responsable et échéance côte à côte */
  .ds-tache { grid-template-columns: 124px minmax(0, 1fr) auto; row-gap: 0; }
  .ds-tache-titre { grid-column: 2 / 4; }
  .ds-tache-meta { grid-column: 2; grid-row: 2; }
  .ds-tache-meta + .ds-tache-meta { grid-column: 3; text-align: right; }
  .ds-tache > select, .ds-tache > .ml-bouton { grid-row: 1 / 3; align-self: center; }
  .ds-gantt { --ds-g-nom: 140px; }
}
/* le statut d'une tâche, dessiné par src/menu-liste.js (bouton) : sa couleur suit, sa taille reste celle de la ligne */
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ds-statut { min-height: 28px; padding: 0 8px; background: var(--actif); font-size: var(--t-12); font-weight: 600; box-shadow: none; }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ds-en-cours { color: var(--ds-bleu); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ds-a-valider { color: var(--ds-ambre); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton:is(.ds-valide, .ds-livre) { color: var(--ds-vert); }
:is(html, html[data-theme]) :is(.page-app, body) .ml-bouton.ds-archive { color: var(--ds-gris); }