/* Lot M2 (projets et tâches) : liste des projets, fiche projet condensée et écran Tâches de la version mobile (screens/mobile_projets.js).
   Toutes les règles sont préfixées :root[data-mobile] ; seulement des var(--…) du thème (clair et sombre) ; la direction suit la maquette A (cartes en relief, coches rondes de 44 px). */

:root[data-mobile] .mp-i { flex: none; width: 20px; height: 20px; }
:root[data-mobile] .mp-i-acc { color: var(--accent); }
:root[data-mobile] .mp-i-chev { margin-left: auto; color: var(--muted); }
:root[data-mobile] .mp-t1 { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere; }
:root[data-mobile] .mp-t2 { display: block; font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
:root[data-mobile] .mp-t2 b { color: var(--fg); font-weight: 600; }
:root[data-mobile] .mp-ell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:root[data-mobile] .mp-danger { color: var(--danger); font-weight: 600; }
:root[data-mobile] .mp-ligne { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
:root[data-mobile] .mp-ligne > .mp-t2 { flex: 1 1 auto; min-width: 0; }
:root[data-mobile] .mp-ligne > .badge { flex: none; }
:root[data-mobile] .mp-corps { flex: 1 1 0; min-width: 0; text-align: left; }
:root[data-mobile] .mp-vide { padding: var(--s-4); color: var(--muted); font-size: 14px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-lg); }

/* ── Liste des projets : une carte par projet ── */
:root[data-mobile] .mp-liste { display: grid; gap: var(--s-3); }
:root[data-mobile] .mp-carte {
  display: grid; gap: var(--s-1); width: 100%; padding: var(--s-4); text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2);
}
:root[data-mobile] .mp-carte:active { background: var(--surface2); }
:root[data-mobile] .mp-ref { flex: 1 1 auto; font: 500 12.5px var(--font-mono); letter-spacing: .03em; color: var(--muted); }
:root[data-mobile] .mp-prog { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
:root[data-mobile] .mp-barre { flex: 1 1 auto; height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface2); }
:root[data-mobile] .mp-barre i { display: block; height: 100%; border-radius: inherit; background: var(--accent-grad); }
:root[data-mobile] .mp-barre-g { height: 12px; border-radius: 6px; }
:root[data-mobile] .mp-pct { flex: none; min-width: 3.2em; text-align: right; font-size: 14px; font-weight: 700; }
:root[data-mobile] .mp-pct-g { font-size: 20px; }
:root[data-mobile] .mp-pied { flex-wrap: wrap; margin-top: var(--s-1); }
:root[data-mobile] .mp-pied .badge { margin-left: auto; }

/* ── Fiche : en-tête, sections ── */
:root[data-mobile] .mp-fiche { display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-tete { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); }
:root[data-mobile] .mp-nom { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: anywhere; }
:root[data-mobile] .mp-sec { margin: var(--s-4) var(--s-1) 0; font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
:root[data-mobile] .mp-sec.mp-danger { color: var(--danger); }
:root[data-mobile] .mp-jalons, :root[data-mobile] .mp-taches-l { display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-lien { min-height: var(--mb-cible); padding: 0 var(--s-1); border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }

/* ── Jalon et tâche : grosse coche ronde (44 px), titre, ligne de détail ── */
:root[data-mobile] .mp-jalon, :root[data-mobile] .mp-carte-t {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2);
}
:root[data-mobile] .mp-coche {
  flex: none; display: grid; place-items: center; width: var(--mb-cible); height: var(--mb-cible); padding: 0; border-radius: 50%;
  border: 2px solid var(--accent); background: none; color: var(--accent); cursor: pointer;
}
:root[data-mobile] .mp-coche .mp-i { width: 22px; height: 22px; opacity: .45; }
:root[data-mobile] .mp-coche[disabled] { cursor: default; border-color: var(--border-in); color: var(--muted); }
:root[data-mobile] .mp-en-retard > .mp-coche { border-color: var(--danger); color: var(--danger); }
:root[data-mobile] .mp-fait > .mp-coche, :root[data-mobile] .mp-fait .mp-coche[aria-pressed="true"] { border-color: var(--success); background: var(--success); color: var(--bg); }
:root[data-mobile] .mp-fait > .mp-coche .mp-i, :root[data-mobile] .mp-coche[aria-pressed="true"] .mp-i { opacity: 1; }
:root[data-mobile] .mp-coche:focus-visible, :root[data-mobile] .mp-corps-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-mobile] .mp-corps-b { display: block; min-height: var(--mb-cible); padding: var(--s-1) 0; border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; }
:root[data-mobile] .mp-fait > .mp-corps .mp-tt, :root[data-mobile] .mp-fait > .mp-corps-b .mp-tt { text-decoration: line-through; color: var(--muted); }
:root[data-mobile] .mp-annule > .mp-corps-b .mp-tt, :root[data-mobile] .mp-annule > .mp-corps .mp-tt { color: var(--muted); }
:root[data-mobile] .mp-chev { flex: none; color: var(--muted); transition: transform .15s; }
:root[data-mobile] .mp-chev.mp-ouvert { transform: rotate(90deg); }
:root[data-mobile] .mp-sous-taches { flex: 1 1 100%; display: grid; margin-top: var(--s-1); padding-top: var(--s-1); border-top: 1px solid var(--border); }
:root[data-mobile] .mp-tache { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; }
:root[data-mobile] .mp-tache.mp-carte-t { min-height: 0; }
:root[data-mobile] .mp-coche-p { width: var(--mb-cible); height: var(--mb-cible); border-width: 2px; border-color: var(--border-in); color: var(--muted); }
:root[data-mobile] .mp-taches { display: grid; padding: var(--s-1) var(--s-2); }
:root[data-mobile] .mp-taches > .mp-tache + .mp-tache { border-top: 1px solid var(--border); }
:root[data-mobile] .mp-pastilles { display: flex; gap: var(--s-1); margin-top: var(--s-1); }

/* ── Contacts ── */
:root[data-mobile] .mp-personnes { display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-carte-b, :root[data-mobile] .mp-personne { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); }
:root[data-mobile] .mp-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-d); color: var(--accent); font-weight: 700; font-size: 15px; }
:root[data-mobile] .mp-nom-lien { display: block; min-height: 24px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
:root[data-mobile] .mp-tag { flex: none; padding: 2px var(--s-2); border-radius: var(--r-sm); background: var(--surface2); color: var(--muted); font: 600 12px var(--font-mono); }
:root[data-mobile] .mp-actions { display: flex; gap: var(--s-2); }
:root[data-mobile] .mp-bouton {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r-md);
  background: var(--accent-d); color: var(--accent); font-size: 15.5px; font-weight: 600; text-decoration: none;
}
:root[data-mobile] .mp-bouton:active { background: var(--surface2); }

/* ── Raccourcis Notes et photos / Documents ── */
:root[data-mobile] .mp-raccourcis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); }
:root[data-mobile] .mp-raccourci {
  display: flex; align-items: center; gap: var(--s-2); min-height: 56px; padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--e-2); color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
:root[data-mobile] .mp-feuille { min-height: 120px; }

/* ── Écran Tâches : résumé, sections, cartes ── */
:root[data-mobile] .mt-zone { display: grid; gap: var(--s-2); }
:root[data-mobile] .mt-seg { margin-bottom: var(--s-1); }
:root[data-mobile] .mt-resume { padding: var(--s-2) var(--s-1) 0; }
:root[data-mobile] .mt-n { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
:root[data-mobile] .mt-liste { display: grid; gap: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  :root[data-mobile] .mp-chev { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-coche { transition: background .15s, border-color .15s, color .15s; }
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-coche:active { transform: scale(.92); }
}